ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweaks

Browse Source
This commit is contained in:
Sam 2016-04-25 20:05:01 +10:00
parent fdaeecbb06
commit 833d3ac36f
6 changed files with 490 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/sprite.svg vendored
View File

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 16 16"><path d="M7 6.4L0 1v14l7-5.4V15l9-7-9-7"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 16 16"><path d="M5 1H2c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM14 1h-3c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="icon-play" viewBox="0 0 16 16"><path d="M13.6 7.2l-10-7C2.9-.3 2 .2 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 16 16"><path d="M9 1L0 8l9 7V9.6l7 5.4V1L9 6.4"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol><symbol id="ui-16px-1_settings-gear-65" viewBox="0 0 16 16"><path d="M15.135 6.784c-1.303-.326-1.92-1.818-1.23-2.97.322-.535.225-.997-.094-1.315l-.31-.31c-.317-.32-.78-.416-1.315-.095-1.152.69-2.644.073-2.97-1.23C9.066.258 8.67 0 8.22 0h-.44c-.45 0-.844.258-.996.865-.326 1.303-1.818 1.92-2.97 1.23-.535-.322-.998-.225-1.316.093l-.31.31c-.318.318-.415.78-.093 1.317.69 1.152.073 2.644-1.23 2.97C.26 6.934 0 7.33 0 7.78v.44c0 .45.258.844.865.996 1.303.326 1.92 1.818 1.23 2.97-.322.535-.225.997.094 1.315l.31.31c.318.32.78.416 1.315.095 1.152-.69 2.644-.073 2.97 1.23.15.607.546.865.996.865h.44c.45 0 .844-.258.996-.865.326-1.303 1.818-1.92 2.97-1.23.534.32.996.225 1.315-.094l.31-.31c.32-.317.416-.78.095-1.315-.69-1.152-.073-2.644 1.23-2.97.607-.15.865-.546.865-.996v-.44c0-.45-.26-.845-.865-.996zM8 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></symbol><symbol id="ui-16px-2_enlarge-57" viewBox="0 0 16 16"><path d="M2 2h4V0H0v6h2M10 2h4v4h2V0h-6M14 14h-4v2h6v-6h-2M6 14H2v-4H0v6h6M4 6h8v4H4z"/></symbol></svg>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 16 16"><path d="M7 6.4L0 1v14l7-5.4V15l9-7-9-7"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 16 16"><path d="M5 1H2c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM14 1h-3c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="icon-play" viewBox="0 0 16 16"><path d="M13.6 7.2l-10-7C2.9-.3 2 .2 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 16 16"><path d="M9 1L0 8l9 7V9.6l7 5.4V1L9 6.4"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

1
docs/dist/docs.svg vendored
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-github" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 .2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V14c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"/></symbol><symbol id="icon-twitter" viewBox="0 0 16 16"><title>Twitter</title><path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"/></symbol><symbol id="icon-vimeo" viewBox="0 0 16 16"><path d="M16 4.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C4 9.9 3.4 5 2 5c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z"/></symbol><symbol id="icon-youtube" viewBox="0 0 16 16"><path d="M15.8 4.8c-.2-1.3-.8-2.2-2.2-2.4C11.4 2 8 2 8 2s-3.4 0-5.6.4C1 2.6.3 3.5.2 4.8 0 6.1 0 8 0 8s0 1.9.2 3.2c.2 1.3.8 2.2 2.2 2.4C4.6 14 8 14 8 14s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4C16 9.9 16 8 16 8s0-1.9-.2-3.2zM6 11V5l5 3-5 3z"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 1.7 KiB

15
src/js/plyr.js
View File

@ -2188,7 +2188,6 @@
if(typeof toggle !== "boolean") {
if(toggle && toggle.type) {
isMouseMove = toggle.type === 'mousemove';
toggle = _inArray(['mousemove','mouseenter'], toggle.type);
}
else {
@ -2200,10 +2199,15 @@
window.clearTimeout(plyr.timers.hover);
// If the mouse is not over the controls, set a timeout to hide them
if(toggle) {
if(toggle || plyr.media.paused) {
_toggleClass(plyr.container, config.classes.hideControls, false);
}
// Always show controls when paused
if(plyr.media.paused) {
return;
}
// If toggle is false or if we're playing (regardless of toggle), then
// set the timer to hide the controls
if(toggle === false || !plyr.media.paused) {
@ -2214,7 +2218,7 @@
}
_toggleClass(plyr.container, config.classes.hideControls, true);
}, isMouseMove ? 2000 : 500);
}, isMouseMove ? 2000 : 0);
}
}
@ -2258,6 +2262,11 @@
// Pause playback
_pause();
// Set seek input to 0
if(plyr.buttons.seek) {
plyr.buttons.seek.value = 0;
}
// Clean up YouTube stuff
if (plyr.type === 'youtube') {
// Destroy the embed instance

387
src/less/plyr.less
View File

@ -130,24 +130,7 @@
touch-action: manipulation;
}
// Screen reader only elements
&__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
// For video
&__video-wrapper {
position: relative;
background: #000;
border-radius: inherit;
//overflow: hidden;
}
// Media elements
video,
audio {
width: 100%;
@ -156,75 +139,7 @@
border-radius: inherit;
}
// Container for embeds
&__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: inherit;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
user-select: none;
}
// Vimeo hack
> div {
position: relative;
padding-bottom: 200%;
transform: translateY(-35.95%);
}
// To allow mouse events to be captured if full support
&.plyr iframe {
pointer-events: none;
}
}
// Captions
// Hide default captions
video::-webkit-media-text-track-container {
display: none;
}
&__captions {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8);
color: #fff;
font-size: @plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
span {
border-radius: 2px;
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
background: fade(#000, 85%);
}
span:empty {
display: none;
}
@media (min-width: @plyr-bp-captions-large) {
font-size: @plyr-font-size-captions-medium;
}
}
&--captions-active &__captions {
display: block;
}
&--fullscreen-active &__captions {
font-size: @plyr-font-size-captions-large;
}
// Common
// Range inputs
// Specificity is for bootstrap compatibility
input[type='range'] {
display: block;
@ -307,45 +222,103 @@
}
}
}
}
// Large play button
&__play-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: @plyr-control-spacing;
background: @plyr-control-bg-hover;
border: 4px solid @plyr-control-color;
border-radius: 100%;
color: @plyr-control-color;
// Screen reader only elements
.plyr__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
svg {
// Video
.plyr__video-wrapper {
position: relative;
left: 2px;
width: 20px;
height: 20px;
background: #000;
border-radius: inherit;
}
// Container for embeds
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: inherit;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
user-select: none;
}
// Vimeo hack
> div {
position: relative;
padding-bottom: 200%;
transform: translateY(-35.95%);
}
}
// To allow mouse events to be captured if full support
.plyr.plyr__video-embed iframe {
pointer-events: none;
}
// Captions
// --------------------------------------------------------------
// Hide default captions
.plyr video::-webkit-media-text-track-container {
display: none;
}
.plyr__captions {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8);
color: #fff;
font-size: @plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
span {
border-radius: 2px;
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
background: fade(#000, 85%);
}
span:empty {
display: none;
}
@media (min-width: @plyr-bp-captions-large) {
font-size: @plyr-font-size-captions-medium;
}
}
.plyr--captions-active &__captions {
display: block;
fill: currentColor;
}
&:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
}
}
.plyr--fullscreen-active &__captions {
font-size: @plyr-font-size-captions-large;
}
// Controls
// --------------------------------------------------------------
// Shared
&__controls,
&__play-large {
.plyr__controls,
.plyr__play-large {
transition: visibility .3s ease, opacity .3s ease;
}
&--playing &__play-large {
visibility: hidden;
opacity: 0;
}
// Playback controls
&__controls {
.plyr__controls {
position: absolute;
left: 0;
right: 0;
@ -354,7 +327,7 @@
align-items: center;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 25%));
background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 50%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
@ -417,8 +390,72 @@
}
}
// Large play button
.plyr__play-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: @plyr-control-spacing;
background: @plyr-control-bg-hover;
border: 4px solid @plyr-control-color;
border-radius: 100%;
color: @plyr-control-color;
svg {
position: relative;
left: 2px;
width: 20px;
height: 20px;
display: block;
fill: currentColor;
}
&:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
}
}
// States
.plyr__controls [data-plyr='pause'],
.plyr--playing .plyr__controls [data-plyr='play'] {
display: none;
}
.plyr--playing .plyr__controls [data-plyr='pause'] {
display: inline-block;
}
// Hide controls
&.plyr--hide-controls .plyr__controls,
.plyr--playing .plyr__play-large {
visibility: hidden;
opacity: 0;
}
// Change icons on state change
.plyr--fullscreen-active .icon--exit-fullscreen,
.plyr--muted .plyr__controls .icon--muted,
.plyr--captions-active .plyr__controls .icon--captions-on {
display: block;
& + svg {
display: none;
}
}
// Some options are hidden by default
[data-plyr='captions'],
[data-plyr='fullscreen'] {
display: none;
}
.plyr--captions-enabled [data-plyr='captions'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block;
}
// Tooltips
&__tooltip {
// --------------------------------------------------------------
.plyr__tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
@ -441,25 +478,14 @@
transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
// Arrows
&::after,
&::before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
// The border triangle
&::after {
@plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
border-right: @plyr-border-arrow-size solid transparent;
border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
border-left: @plyr-border-arrow-size solid transparent;
z-index: 1;
}
// The background triangle
&::before {
bottom: -@plyr-tooltip-arrow-size;
@ -469,20 +495,21 @@
z-index: 2;
}
}
button:hover .plyr__tooltip,
button.tab-focus:focus .plyr__tooltip,
&__tooltip--visible {
.plyr button:hover .plyr__tooltip,
.plyr button.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
button:hover .plyr__tooltip {
.plyr button:hover .plyr__tooltip {
z-index: 3;
}
// Playback progress
// --------------------------------------------------------------
// <progress> element
&__progress {
.plyr__progress {
position: relative;
flex: 1;
@ -502,8 +529,14 @@
}
}
&--buffer[value],
&--played[value] {
// Seek tooltip to show time
.plyr__tooltip {
left: 0;
}
}
.plyr__progress--buffer[value],
.plyr__progress--played[value] {
position: absolute;
left: 0;
top: 50%;
@ -533,7 +566,7 @@
border-radius: 100px;
}
}
&--played[value] {
.plyr__progress--played[value] {
z-index: 1;
color: @plyr-progress-playing-bg;
background: transparent;
@ -556,7 +589,7 @@
border-bottom-right-radius: 0;
}
}
&--buffer[value] {
.plyr__progress--buffer[value] {
color: @plyr-progress-buffered-bg;
background: @range-track-bg;
@ -571,14 +604,8 @@
}
}
// Seek tooltip to show time
.plyr__tooltip {
left: 0;
}
}
// Loading state
&--loading .plyr__progress--buffer {
.plyr--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite;
background-size: @plyr-progress-loading-size @plyr-progress-loading-size;
background-repeat: repeat-x;
@ -595,17 +622,10 @@
color: transparent;
}
// States
&__controls [data-plyr='pause'],
&--playing .plyr__controls [data-plyr='play'] {
display: none;
}
&--playing .plyr__controls [data-plyr='pause'] {
display: inline-block;
}
// plyr time
&__time {
// Time
// --------------------------------------------------------------
.plyr__time {
display: inline-block;
vertical-align: middle;
color: @plyr-control-color;
@ -614,7 +634,7 @@
}
// Media duration hidden on small screens
&__time + &__time {
.plyr__time + .plyr__time {
display: none;
@media (min-width: @plyr-bp-control-split) {
@ -628,40 +648,43 @@
}
}
// Volume control
// Volume
// --------------------------------------------------------------
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&__volume[type='range'] {
.plyr__volume[type='range'] {
max-width: 100px;
}
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&--is-ios &__volume,
&--is-ios [data-plyr='mute'],
&--is-ios.plyr--audio &__controls--right {
.plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr='mute'],
.plyr--is-ios.plyr--audio .plyr__controls--right {
display: none;
}
// Center buttons so it looks less odd
&--is-ios.plyr--audio &__controls--left {
.plyr--is-ios.plyr--audio .plyr__controls--left {
float: none;
}
// Audio specific styles
// Audio
// --------------------------------------------------------------
// Position the progress within the container
&--audio .plyr__controls {
.plyr--audio .plyr__controls {
padding-top: (@plyr-control-spacing * 2);
}
&--audio .plyr__progress {
.plyr--audio .plyr__progress {
bottom: auto;
top: 0;
background: #fff;
}
// Full screen mode
&.plyr--fullscreen,
&--fullscreen-active {
// Fullscreen
// --------------------------------------------------------------
.plyr--fullscreen,
.plyr--fullscreen-active {
position: fixed;
top: 0;
left: 0;
@ -686,33 +709,3 @@
right: 0;
}
}
// Hide controls when playing in full screen
&.plyr--hide-controls {
.plyr__controls {
opacity: 0;
visibility: hidden;
}
}
// Change icons on state change
&--fullscreen-active .icon--exit-fullscreen,
&--muted .plyr__controls .icon--muted,
&--captions-active .plyr__controls .icon--captions-on {
display: block;
& + svg {
display: none;
}
}
// Some options are hidden by default
[data-plyr='captions'],
[data-plyr='fullscreen'] {
display: none;
}
&--captions-enabled [data-plyr='captions'],
&--fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block;
}
}