aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js195
-rw-r--r--src/less/plyr.less588
-rw-r--r--[-rwxr-xr-x]src/sprite/icon-fast-forward.svg11
-rw-r--r--src/sprite/icon-pause.svg15
-rw-r--r--[-rwxr-xr-x]src/sprite/icon-play.svg11
-rw-r--r--src/sprite/icon-rewind.svg11
6 files changed, 440 insertions, 391 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 3d78c58c..5c9e329e 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -39,8 +39,9 @@
duration: null,
displayDuration: true,
iconPrefix: 'icon',
- click: true,
- tooltips: {
+ clickToPlay: true,
+ hideControls: true,
+ tooltips: {
controls: false,
seek: true
},
@@ -83,6 +84,7 @@
hover: 'plyr--hover',
tooltip: 'plyr__tooltip',
hidden: 'plyr__sr-only',
+ hideControls: 'plyr--hide-controls',
isIos: 'plyr--is-ios',
isTouch: 'plyr--is-touch',
captions: {
@@ -91,8 +93,7 @@
},
fullscreen: {
enabled: 'plyr--fullscreen-enabled',
- active: 'plyr--fullscreen-active',
- hideControls: 'plyr--fullscreen--hide-controls'
+ active: 'plyr--fullscreen-active'
},
tabFocus: 'tab-focus'
},
@@ -102,14 +103,13 @@
fullscreen: {
enabled: true,
fallback: true,
- hideControls: true,
allowAudio: false
},
storage: {
enabled: true,
key: 'plyr'
},
- controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'],
+ controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
i18n: {
restart: 'Restart',
rewind: 'Rewind {seektime} secs',
@@ -390,6 +390,30 @@
return false;
}
+ // Debounce
+ // deBouncer by hnldesign.nl
+ // based on code by Paul Irish and the original debouncing function from John Hann
+ // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+ function _debounce(func, threshold, execAsap) {
+ var timeout;
+ return function debounced () {
+ var obj = this, args = arguments;
+ function delayed () {
+ if (!execAsap) {
+ func.apply(obj, args);
+ }
+ timeout = null;
+ }
+ if (timeout) {
+ clearTimeout(timeout);
+ }
+ else if (execAsap) {
+ func.apply(obj, args);
+ }
+ timeout = setTimeout(delayed, threshold || 100);
+ };
+ }
+
// Bind event
function _on(element, events, callback) {
if (element) {
@@ -634,27 +658,20 @@
// Build the default HTML
function _buildControls() {
- // Open and add the progress and seek elements
- var html = [
- '<div class="plyr__controls">',
- '<div class="plyr__progress">',
- '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
- '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
- '<progress class="plyr__progress--played" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.played,
- '</progress>',
- '<progress class="plyr__progress--buffer" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.buffered,
- '</progress>'];
+ // Create html array
+ var html = [];
- // Seek tooltip
- if (config.tooltips.seek) {
- html.push('<span class="plyr__tooltip">00:00</span>');
+ // Larger overlaid play button
+ if (_inArray(config.controls, 'play-large')) {
+ html.push(
+ '<button type="button" data-plyr="play" class="plyr__play-large">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
+ '</button>'
+ );
}
- // Close progress
- html.push('</div>',
- '<span class="plyr__controls--left">');
+ html.push('<div class="plyr__controls">');
// Restart button
if (_inArray(config.controls, 'restart')) {
@@ -676,7 +693,8 @@
);
}
- // Play/pause button
+ // Play Pause button
+ // TODO: This should be a toggle button really?
if (_inArray(config.controls, 'play')) {
html.push(
'<button type="button" data-plyr="play">',
@@ -700,6 +718,28 @@
);
}
+ // Progress
+ if (_inArray(config.controls, 'progress')) {
+ // Create progress
+ html.push('<span class="plyr__progress">',
+ '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
+ '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
+ '<progress class="plyr__progress--played" max="100" value="0">',
+ '<span>0</span>% ' + config.i18n.played,
+ '</progress>',
+ '<progress class="plyr__progress--buffer" max="100" value="0">',
+ '<span>0</span>% ' + config.i18n.buffered,
+ '</progress>');
+
+ // Seek tooltip
+ if (config.tooltips.seek) {
+ html.push('<span class="plyr__tooltip">00:00</span>');
+ }
+
+ // Close
+ html.push('</span>');
+ }
+
// Media current time display
if (_inArray(config.controls, 'current-time')) {
html.push(
@@ -720,12 +760,6 @@
);
}
- // Close left controls
- html.push(
- '</span>',
- '<span class="plyr__controls--right">'
- );
-
// Toggle mute button
if (_inArray(config.controls, 'mute')) {
html.push(
@@ -768,10 +802,7 @@
}
// Close everything
- html.push(
- '</span>',
- '</div>'
- );
+ html.push('</div>');
return html.join('');
}
@@ -801,11 +832,6 @@
// Setup focus trap
_focusTrap();
-
- // Set control hide class hook
- if (config.fullscreen.hideControls) {
- _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
- }
}
}
@@ -1171,7 +1197,7 @@
// Setup tooltips
if (config.tooltips.controls) {
- var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
+ var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
for (var i = labels.length - 1; i >= 0; i--) {
var label = labels[i];
@@ -1190,7 +1216,7 @@
// Buttons
plyr.buttons = {};
plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
- plyr.buttons.play = _getElement(config.selectors.buttons.play);
+ plyr.buttons.play = _getElements(config.selectors.buttons.play);
plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
@@ -1234,7 +1260,7 @@
_log('It looks like there is a problem with your controls html', true);
// Restore native video controls
- _toggleControls(true);
+ _toggleNativeControls(true);
return false;
}
@@ -1246,7 +1272,7 @@
}
// Toggle native controls
- function _toggleControls(toggle) {
+ function _toggleNativeControls(toggle) {
if(toggle) {
plyr.media.setAttribute('controls', '');
}
@@ -1267,7 +1293,9 @@
// If there's a play button, set label
if (plyr.supported.full && plyr.buttons.play) {
- plyr.buttons.play.setAttribute('aria-label', label);
+ for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
+ plyr.buttons.play[i].setAttribute('aria-label', label);
+ }
}
// Set iframe title
@@ -1755,6 +1783,8 @@
function _checkPlaying() {
_toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
_toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
+
+ _toggleControls(plyr.media.paused);
}
// Toggle fullscreen
@@ -1813,10 +1843,7 @@
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
// Hide on entering full screen
- if (config.fullscreen.hideControls) {
- //_toggleClass(plyr.controls, config.classes.hover, false);
- _showControls(true);
- }
+ _toggleControls(false);
// Trigger an event
_triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
@@ -2151,24 +2178,44 @@
}
// Show the player controls in fullscreen mode
- function _showControls(force) {
- // We're only worried about fullscreen
- if (!plyr.isFullscreen) {
+ function _toggleControls(toggle) {
+ if (!config.hideControls) {
return;
}
+ var isMouseMove = false;
+
+ // Default to false if no boolean
+ if(typeof toggle !== "boolean") {
+ if(toggle && toggle.type) {
+ isMouseMove = toggle.type === 'mousemove';
- // Set shown class
- _toggleClass(plyr.container, config.classes.hover, true);
+ toggle = _inArray(['mousemove','mouseenter'], toggle.type);
+ }
+ else {
+ toggle = false;
+ }
+ }
// Clear timer every movement
window.clearTimeout(plyr.timers.hover);
// If the mouse is not over the controls, set a timeout to hide them
- plyr.timers.hover = window.setTimeout(function() {
- if (!plyr.controls.mouseover || (force === true)) {
- _toggleClass(plyr.container, config.classes.hover, false);
- }
- }, 2000);
+ if(toggle) {
+ _toggleClass(plyr.container, config.classes.hideControls, false);
+ }
+
+ // 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) {
+ plyr.timers.hover = window.setTimeout(function() {
+ // If the mouse is over the controls, bail
+ if(plyr.controls.active) {
+ return;
+ }
+
+ _toggleClass(plyr.container, config.classes.hideControls, true);
+ }, isMouseMove ? 2000 : 500);
+ }
}
// Add common function to retrieve media source
@@ -2449,13 +2496,14 @@
// Seek tooltip
_on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
- // Toggle controls visibility based on mouse movement and location
- var hoverTimer, isMouseOver = false;
+ // Toggle controls visibility based on mouse movement
+ if (config.hideControls) {
+ _on(plyr.container, 'mouseenter mouseleave', _toggleControls);
+ _on(plyr.container, 'mousemove', _debounce(_toggleControls, 500, true));
- if (config.fullscreen.hideControls) {
- // Keep an eye on the mouse location in relation to controls
- _on(plyr.controls, 'mouseenter mouseleave', function(event) {
- plyr.controls.mouseover = (event.type === 'mouseenter');
+ // Watch for cursor over controls so they don't hide when trying to interact
+ _on(plyr.controls, 'mouseenter mouseleave', function(event) {
+ plyr.controls.active = (event.type === 'mouseenter');
});
}
}
@@ -2495,7 +2543,10 @@
_on(plyr.media, 'waiting canplay seeked', _checkLoading);
// Click video
- if (config.click) {
+ if (config.clickToPlay) {
+ // Set cursor
+ plyr.videoContainer.style.cursor = "pointer";
+
_on(plyr.media, 'click', function() {
if (plyr.media.paused) {
_play();
@@ -2510,12 +2561,6 @@
});
}
- // Listen for mouse move to show controls
- if (config.fullscreen.hideControls) {
- // Show the controls on mouse move
- _on(plyr.media, 'mousemove', _showControls);
- }
-
// Proxy events to container
_on(plyr.media, config.events.join(' '), function(event) {
_triggerEvent(plyr.container, event.type);
@@ -2581,7 +2626,7 @@
}
// Restore native video controls
- _toggleControls(true);
+ _toggleNativeControls(true);
// Clone the media element to remove listeners
// http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
@@ -2679,7 +2724,7 @@
_remove(_getElement(config.selectors.controls.wrapper));
// Restore native controls
- _toggleControls(true);
+ _toggleNativeControls(true);
// Bail
return;
@@ -2706,7 +2751,7 @@
_mediaListeners();
// Remove native controls
- _toggleControls();
+ _toggleNativeControls();
// Setup fullscreen
_setupFullscreen();
diff --git a/src/less/plyr.less b/src/less/plyr.less
index f27023bc..50a530c9 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -7,12 +7,7 @@
// -------------------------------
// Colors
-@plyr-blue: #3498DB;
-@plyr-gray-dark: #343F4A;
-@plyr-gray: #565D64;
-@plyr-gray-light: #6B7D86;
-@plyr-gray-lighter: #CBD0D3;
-@plyr-off-white: #D6DADD;
+@plyr-color-main: #3498DB;
// Font sizes
@plyr-font-size-small: 14px;
@@ -24,11 +19,13 @@
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls
+@plyr-controls-bg: #000;
+@plyr-control-color: #fff;
+@plyr-control-color-hover: #fff;
@plyr-control-spacing: 10px;
-@plyr-controls-bg: #fff;
-@plyr-control-bg-hover: @plyr-blue;
-.contrast-control-color(@plyr-controls-bg);
-.contrast-control-color-hover(@plyr-control-bg-hover);
+@plyr-control-bg-hover: @plyr-color-main;
+//.contrast-control-color(@plyr-controls-bg);
+//.contrast-control-color-hover(@plyr-control-bg-hover);
// Tooltips
@plyr-tooltip-bg: @plyr-controls-bg;
@@ -37,24 +34,27 @@
@plyr-tooltip-border-width: 1px;
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
@plyr-tooltip-color: @plyr-control-color;
-@plyr-tooltip-padding: @plyr-control-spacing;
-@plyr-tooltip-arrow-size: 6px;
+@plyr-tooltip-padding: (@plyr-control-spacing / 2);
+@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
// Progress
-@plyr-progress-bg: fade(@plyr-gray, 20%);
-@plyr-progress-playing-bg: @plyr-blue;
-@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
-@plyr-progress-loading-size: 40px;
+@plyr-progress-bg: fade(@plyr-control-color, 25%);
+@plyr-progress-playing-bg: @plyr-color-main;
+@plyr-progress-buffered-bg: fade(@plyr-control-color, 25%);
+@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#000, 15%);
-// Volume
-@plyr-volume-track-height: 6px;
-@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
-@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-bg: @plyr-control-color;
-@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
+// Range sliders
+@range-track-height: 8px;
+@range-track-bg: fade(#fff, 25%);
+@range-thumb-height: floor(@range-track-height * 2);
+@range-thumb-width: floor(@range-track-height * 2);
+@range-thumb-bg: #fff;
+@range-thumb-border: 2px solid transparent;
+@range-thumb-active-border-color: #fff;
+@range-thumb-active-bg: @plyr-control-bg-hover;
+@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%);
// Breakpoints
@plyr-bp-control-split: 560px; // When controls split into left/right
@@ -69,7 +69,7 @@
// Mixins
// -------------------------------
// Contrast
-.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
+/*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@plyr-control-color: @plyr-gray-light;
}
.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@@ -80,47 +80,31 @@
}
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@plyr-control-color-hover: #fff;
-}
-
-// Font smoothing
-.font-smoothing(@mode: on) when (@mode = on) {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
-}
-.font-smoothing(@mode: on) when (@mode = off) {
- -moz-osx-font-smoothing: auto;
- -webkit-font-smoothing: subpixel-antialiased;
-}
+}*/
// <input type="range"> styling
-.volume-thumb() {
- height: @plyr-volume-thumb-height;
- width: @plyr-volume-thumb-width;
- background: @plyr-volume-thumb-bg;
- border: 0;
- border-radius: 100%;
- transition: background .3s ease;
- cursor: ew-resize;
-}
-.volume-track() {
- height: @plyr-volume-track-height;
- background: @plyr-volume-track-bg;
- border: 0;
- border-radius: (@plyr-volume-track-height / 2);
-}
-.seek-thumb() {
- background: transparent;
+.range-track() {
+ height: @range-track-height;
+ background: @range-track-bg;
border: 0;
- width: 1px;
- height: @plyr-control-spacing;
+ border-radius: (@range-track-height / 2);
+ user-select: none;
}
-.seek-thumb-touch() {
- width: (@plyr-control-spacing * 4);
- transform: translateX(-50%);
+.range-thumb() {
+ position: relative;
+ height: @range-thumb-height;
+ width: @range-thumb-width;
+ background: @range-thumb-bg;
+ border: @range-thumb-border;
+ border-radius: 100%;
+ transition: background .2s ease, border .2s ease, transform .2s ease;
+ box-shadow: @range-thumb-shadow;
+ box-sizing: border-box;
}
-.seek-track() {
- background: none;
- border: 0;
+.range-thumb-active() {
+ background: @range-thumb-active-bg;
+ border-color: @range-thumb-active-border-color;
+ transform: scale(1.25);
}
// Styles
@@ -160,17 +144,16 @@
// For video
&__video-wrapper {
position: relative;
+ background: #000;
+ border-radius: inherit;
+ //overflow: hidden;
}
video,
audio {
width: 100%;
height: auto;
vertical-align: middle;
- }
-
- // Hide default captions
- video::-webkit-media-text-track-container {
- display: none;
+ border-radius: inherit;
}
// Container for embeds
@@ -178,7 +161,7 @@
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
- background: #000;
+ border-radius: inherit;
iframe {
position: absolute;
@@ -204,22 +187,27 @@
}
// 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 * 3);
+ 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-smoothing();
+ font-weight: 400;
span {
border-radius: 2px;
- padding: 3px 10px;
- background: fade(#000, 90%);
+ padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
+ background: fade(#000, 85%);
}
span:empty {
display: none;
@@ -236,45 +224,165 @@
font-size: @plyr-font-size-captions-large;
}
+ // Common
+ // Specificity is for bootstrap compatibility
+ input[type='range'] {
+ display: block;
+ height: @range-thumb-height;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ vertical-align: middle;
+
+ appearance: none;
+ cursor: pointer;
+ border: none;
+ background: transparent;
+
+ // Webkit
+ &::-webkit-slider-runnable-track {
+ .range-track();
+ }
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ margin-top: -((@range-thumb-height - @range-track-height) / 2);
+ .range-thumb();
+ }
+
+ // Mozilla
+ &::-moz-range-track {
+ .range-track();
+ }
+ &::-moz-range-thumb {
+ .range-thumb();
+ }
+ &::-moz-focus-outer {
+ border: 0;
+ }
+
+ // Microsoft
+ &::-ms-track {
+ height: @range-track-height;
+ background: transparent;
+ border: 0;
+ color: transparent;
+ }
+ &::-ms-fill-lower,
+ &::-ms-fill-upper {
+ .range-track();
+ }
+ &::-ms-thumb {
+ .range-thumb();
+
+ // For some reason, Edge uses the -webkit margin above
+ margin-top: 0;
+ }
+
+ &::-ms-tooltip {
+ display: none;
+ }
+
+ // Focus styles
+ &:focus {
+ outline: 0;
+ }
+ &::-moz-focus-outer {
+ border: 0;
+ }
+ &.tab-focus:focus {
+ outline: 1px dotted fade(@plyr-control-color, 50%);
+ outline-offset: 3px;
+ }
+
+ // Pressed styles
+ &:active {
+ &::-webkit-slider-thumb {
+ .range-thumb-active();
+ }
+ &::-moz-range-thumb {
+ .range-thumb-active();
+ }
+ &::-ms-thumb {
+ .range-thumb-active();
+ }
+ }
+ }
+
+ // 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;
+
+ svg {
+ position: relative;
+ left: 2px;
+ width: 20px;
+ height: 20px;
+ display: block;
+ fill: currentColor;
+ }
+
+ &:focus {
+ outline: 1px dotted fade(@plyr-control-color, 50%);
+ }
+ }
+
+ // Shared
+ &__controls,
+ &__play-large {
+ transition: visibility .3s ease, opacity .3s ease;
+ }
+ &--playing &__play-large {
+ visibility: hidden;
+ opacity: 0;
+ }
+
// Playback controls
&__controls {
- .font-smoothing();
- position: relative;
- padding: @plyr-control-spacing;
- background: @plyr-controls-bg;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ 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%));
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+
line-height: 1;
text-align: center;
- box-shadow: 0 1px 1px fade(@plyr-gray-dark, 20%);
- // Clear floats
- &::after {
- content: '';
- display: table;
- clear: both;
- }
+ // Spacing
+ > button,
+ .plyr__progress,
+ .plyr__time,
+ .plyr__volume[type="range"] {
+ margin-left: @plyr-control-spacing;
- // Layout
- &--right {
- display: block;
- margin: @plyr-control-spacing auto 0;
- }
- @media (min-width: @plyr-bp-control-split) {
- &--left {
- float: left;
- }
- &--right {
- float: right;
- margin-top: 0;
+ &::first-child {
+ margin-left: 0;
}
}
+ [data-plyr="mute"] {
+ margin-left: 0;
+ }
// Buttons
button {
+ position: relative;
display: inline-block;
+ flex-shrink: 0;
vertical-align: middle;
- margin: 0 2px;
padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
- overflow: hidden;
border: 0;
background: transparent;
border-radius: 3px;
@@ -287,7 +395,6 @@
height: 18px;
display: block;
fill: currentColor;
- transition: fill .3s ease;
}
// Hover and tab focus
@@ -308,31 +415,6 @@
.icon--captions-on {
display: none;
}
-
- // plyr time
- .plyr__time {
- display: inline-block;
- vertical-align: middle;
- margin-left: @plyr-control-spacing;
- color: @plyr-control-color;
- font-weight: 600;
- font-size: @plyr-font-size-small;
- }
-
- // Media duration hidden on small screens
- .plyr__time + .plyr__time {
- display: none;
-
- @media (min-width: @plyr-bp-control-split) {
- display: inline-block;
- }
-
- // Add a slash in before
- &::before {
- content: '\2044';
- margin-right: @plyr-control-spacing;
- }
- }
}
// Tooltips
@@ -341,7 +423,7 @@
position: absolute;
z-index: 2;
bottom: 100%;
- margin-bottom: @plyr-tooltip-padding;
+ margin-bottom: (@plyr-tooltip-padding * 2);
padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
pointer-events: none;
@@ -349,10 +431,10 @@
background: @plyr-tooltip-bg;
box-shadow: @plyr-tooltip-shadow;
border-radius: @plyr-tooltip-radius;
+
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
- line-height: 1.5;
- font-weight: 600;
+ line-height: 1.3;
transform: translate(-50%, 10px) scale(.8);
transform-origin: 50% 100%;
@@ -398,115 +480,95 @@
z-index: 3;
}
- // Common range styles
- input[type='range'] {
- &::-ms-tooltip {
- display: none;
- }
- &.tab-focus:focus {
- outline: 1px dotted fade(@plyr-gray-dark, 80%);
- outline-offset: 3px;
- }
- }
-
// Playback progress
// <progress> element
&__progress {
- position: absolute;
- bottom: 100%;
- left: 0;
- right: 0;
- width: 100%;
- height: @plyr-control-spacing;
- background: @plyr-progress-bg;
+ position: relative;
+ flex: 1;
+
+ input[type="range"] {
+ position: relative;
+ z-index: 2;
+
+ &::-webkit-slider-runnable-track {
+ background: transparent;
+ }
+ &::-moz-range-track {
+ background: transparent;
+ }
+ &::-ms-fill-lower,
+ &::-ms-fill-upper {
+ background: transparent;
+ }
+ }
&--buffer[value],
- &--played[value],
- &--seek[type='range'] {
+ &--played[value] {
position: absolute;
left: 0;
- top: 0;
+ top: 50%;
width: 100%;
- height: @plyr-control-spacing;
- margin: 0;
+ height: @range-track-height;
+ margin: -(@range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
-
- -webkit-appearance: none;
- -moz-appearance: none;
+ appearance: none;
border: none;
- background: transparent;
- }
- &--buffer[value],
- &--played[value] {
+ border-radius: 100px;
+
&::-webkit-progress-bar {
background: transparent;
- transition: width .2s ease;
}
-
- // Inherit from currentColor;
&::-webkit-progress-value {
background: currentColor;
- transition: width .2s ease;
+ border-radius: 100px;
+ min-width: @range-track-height;
}
&::-moz-progress-bar {
background: currentColor;
- transition: width .2s ease;
+ border-radius: 100px;
+ min-width: @range-track-height;
+ }
+ &::-ms-fill {
+ border-radius: 100px;
}
}
&--played[value] {
- z-index: 2;
+ z-index: 1;
color: @plyr-progress-playing-bg;
- }
- &--buffer[value] {
- color: @plyr-progress-buffered-bg;
- }
-
- // Seek control
- // <input[type='range']> element
- // Specificity is for bootstrap compatibility
- &--seek[type='range'] {
- z-index: 4;
- cursor: pointer;
- outline: 0;
-
- // Webkit
- &::-webkit-slider-runnable-track {
- .seek-track();
- }
- &::-webkit-slider-thumb {
- -webkit-appearance: none;
- .seek-thumb();
- }
-
- // Mozilla
- &::-moz-range-track {
- .seek-track();
- }
- &::-moz-range-thumb {
- -moz-appearance: none;
- .seek-thumb();
- }
+ background: transparent;
- // Microsoft
- &::-ms-track {
- color: transparent;
- .seek-track();
+ &::-webkit-progress-value {
+ background: currentColor;
+ min-width: @range-track-height;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
- &::-ms-fill-lower,
- &::-ms-fill-upper {
- .seek-track();
+ &::-moz-progress-bar {
+ background: currentColor;
+ min-width: @range-track-height;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
- &::-ms-thumb {
- .seek-thumb();
+ &::-ms-fill {
+ min-width: @range-track-height;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
+ }
+ &--buffer[value] {
+ color: @plyr-progress-buffered-bg;
+ background: @range-track-bg;
- &:focus {
- outline: 0;
- }
- &::-moz-focus-outer {
- border: 0;
+ &::-webkit-progress-value {
+ transition: width .2s ease;
}
+ &::-moz-progress-bar {
+ transition: width .2s ease;
+ }
+ &::-ms-fill {
+ transition: width .2s ease;
+ }
}
// Seek tooltip to show time
@@ -515,21 +577,6 @@
}
}
- // Touch seek wider handle
- &--is-touch &--seek[type='range'] {
- &::-webkit-slider-thumb {
- .seek-thumb-touch();
- }
- // Mozilla
- &::-moz-range-thumb {
- .seek-thumb-touch();
- }
- // Microsoft
- &::-ms-thumb {
- .seek-thumb-touch();
- }
- }
-
// Loading state
&--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite;
@@ -557,68 +604,35 @@
display: inline-block;
}
- // Volume control
- // <input[type='range']> element
- // Specificity is for bootstrap compatibility
- &__volume[type='range'] {
+ // plyr time
+ &__time {
display: inline-block;
vertical-align: middle;
- -webkit-appearance: none;
- -moz-appearance: none;
- width: 100px;
- margin: 0 @plyr-control-spacing 0 0;
- padding: 0;
- cursor: pointer;
- background: transparent;
- border: none;
+ color: @plyr-control-color;
+ font-size: @plyr-font-size-small;
+ line-height: .95;
+ }
- // Webkit
- &::-webkit-slider-runnable-track {
- .volume-track();
- }
- &::-webkit-slider-thumb {
- -webkit-appearance: none;
- margin-top: -((@plyr-volume-thumb-height - @plyr-volume-track-height) / 2);
- .volume-thumb();
- }
+ // Media duration hidden on small screens
+ &__time + &__time {
+ display: none;
- // Mozilla
- &::-moz-range-track {
- .volume-track();
- }
- &::-moz-range-thumb {
- .volume-thumb();
+ @media (min-width: @plyr-bp-control-split) {
+ display: inline-block;
}
- // Microsoft
- &::-ms-track {
- height: @plyr-volume-track-height;
- background: transparent;
- border-color: transparent;
- border-width: ((@plyr-volume-thumb-height - @plyr-volume-track-height) / 2) 0;
- color: transparent;
- }
- &::-ms-fill-lower,
- &::-ms-fill-upper {
- .volume-track();
- }
- &::-ms-thumb {
- .volume-thumb();
+ // Add a slash in before
+ &::before {
+ content: '\2044';
+ margin-right: @plyr-control-spacing;
}
+ }
- &:focus {
- outline: 0;
-
- &::-webkit-slider-thumb {
- background: @plyr-volume-thumb-bg-focus;
- }
- &::-moz-range-thumb {
- background: @plyr-volume-thumb-bg-focus;
- }
- &::-ms-thumb {
- background: @plyr-volume-thumb-bg-focus;
- }
- }
+ // Volume control
+ // <input[type='range']> element
+ // Specificity is for bootstrap compatibility
+ &__volume[type='range'] {
+ max-width: 100px;
}
// Hide sound controls on iOS
@@ -642,7 +656,7 @@
&--audio .plyr__progress {
bottom: auto;
top: 0;
- background: @plyr-off-white;
+ background: #fff;
}
// Full screen mode
@@ -674,30 +688,10 @@
}
// Hide controls when playing in full screen
- &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
- &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
+ &.plyr--hide-controls {
.plyr__controls {
- transform: translateY(100%) translateY(@plyr-control-spacing / 2);
- transition: transform .3s .2s ease;
- }
- .plyr__captions {
- bottom: (@plyr-control-spacing / 2);
- transition: bottom .3s .2s ease;
- }
- &.plyr--hover .plyr__controls {
- transform: translateY(0);
- }
- }
-
- // Captions
- &.plyr--fullscreen .plyr__captions,
- &--fullscreen-active .plyr__captions,
- &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
- top: auto;
- bottom: 90px;
-
- @media (min-width: @plyr-bp-control-split) {
- bottom: 60px;
+ opacity: 0;
+ visibility: hidden;
}
}
diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg
index 1cc67199..3ae96af6 100755..100644
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>
+</svg>
diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg
index 7fb41105..db51a807 100644
--- a/src/sprite/icon-pause.svg
+++ b/src/sprite/icon-pause.svg
@@ -1,7 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g transform="translate(2.000000, 2.000000)">
- <path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path>
- <path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path>
- </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>
+<path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>
+</svg>
diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg
index 056b9f79..069af73c 100755..100644
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>
+</svg>
diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg
index 661df0fd..fbc252d2 100644
--- a/src/sprite/icon-rewind.svg
+++ b/src/sprite/icon-rewind.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>
+</svg>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 09:04:48 +0000