aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js213
-rw-r--r--src/less/mixins.less4
-rw-r--r--src/less/plyr.less140
-rw-r--r--src/less/variables.less10
4 files changed, 174 insertions, 193 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index d5d9f11b..c0a39fb9 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -471,6 +471,7 @@
isFirefox: isFirefox,
isChrome: isChrome,
isSafari: isSafari,
+ isWebkit: 'WebkitAppearance' in document.documentElement.style,
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform),
};
@@ -1429,6 +1430,45 @@
}
}
+ // Webkit polyfill for lower fill range
+ function updateRangeFill(range) {
+ if (!player.browser.isWebkit) {
+ return;
+ }
+
+ if (!utils.is.htmlElement(range)) {
+ return;
+ }
+
+ // Inject the stylesheet if needed
+ if (!utils.is.htmlElement(player.elements.styleSheet)) {
+ player.elements.styleSheet = utils.createElement('style');
+ player.elements.container.appendChild(player.elements.styleSheet);
+ }
+
+ var styleSheet = player.elements.styleSheet.sheet;
+ var percentage = (range.value / range.max) * 100;
+ var selector = '#' + range.id + '::-webkit-slider-runnable-track';
+ var styles = '{ background-image: linear-gradient(to right, currentColor ' + percentage + '%, transparent ' + percentage + '%) }';
+ var index = -1;
+
+ // Find old rule if it exists
+ [].some.call(styleSheet.rules, function(rule, i) {
+ if (rule.selectorText === selector) {
+ index = i;
+ return true;
+ }
+ })[0];
+
+ // Remove old rule
+ if (index !== -1) {
+ styleSheet.deleteRule(index);
+ }
+
+ // Insert new one
+ styleSheet.insertRule([selector, styles].join(' '));
+ }
+
// Get icon URL
function getIconUrl() {
return {
@@ -1605,7 +1645,7 @@
type: 'range',
min: 0,
max: 100,
- step: 0.1,
+ step: 0.01,
value: 0,
autocomplete: 'off',
},
@@ -1738,14 +1778,11 @@
container.appendChild(seek.label);
container.appendChild(seek.input);
- // TODO: Add loop display indicator
-
- // Played progress
- container.appendChild(createProgress('played'));
-
// Buffer progress
container.appendChild(createProgress('buffer'));
+ // TODO: Add loop display indicator
+
// Seek tooltip
if (player.config.tooltips.seek) {
var tooltip = utils.createElement(
@@ -1803,10 +1840,6 @@
volume.appendChild(range.label);
volume.appendChild(range.input);
- // Create the display progress
- var progress = createProgress('volume', attributes);
- volume.appendChild(progress);
-
controls.appendChild(volume);
}
@@ -2701,8 +2734,6 @@
// Display
player.elements.display = {
buffer: getElement(player.config.selectors.display.buffer),
- played: getElement(player.config.selectors.display.played),
- volume: getElement(player.config.selectors.display.volume),
duration: getElement(player.config.selectors.display.duration),
currentTime: getElement(player.config.selectors.display.currentTime),
};
@@ -3043,7 +3074,6 @@
// Get current quality
player.media.quality = instance.getPlaybackQuality();
- // Trigger timeupdate
trigger(player.media, 'qualitychange');
},
onPlaybackRateChange: function(event) {
@@ -3053,7 +3083,6 @@
// Get current speed
player.media.playbackRate = instance.getPlaybackRate();
- // Trigger timeupdate
trigger(player.media, 'ratechange');
},
onReady: function(event) {
@@ -3097,10 +3126,7 @@
// Update UI
embedReady();
- // Trigger timeupdate
trigger(player.media, 'timeupdate');
-
- // Trigger timeupdate
trigger(player.media, 'durationchange');
// Reset timer
@@ -3177,10 +3203,7 @@
// Poll to get playback progress
timers.playing = window.setInterval(function() {
- // Set the current time
player.media.currentTime = instance.getCurrentTime();
-
- // Trigger timeupdate
trigger(player.media, 'timeupdate');
}, 100);
@@ -3248,15 +3271,11 @@
player.embed.getCurrentTime().then(function(value) {
player.media.currentTime = value;
-
- // Trigger timeupdate
trigger(player.media, 'timeupdate');
});
player.embed.getDuration().then(function(value) {
player.media.duration = value;
-
- // Trigger timeupdate
trigger(player.media, 'durationchange');
});
@@ -3358,8 +3377,6 @@
player.embed.getPosition(function(value) {
player.media.currentTime = value;
-
- // Trigger timeupdate
trigger(player.media, 'timeupdate');
});
@@ -3554,10 +3571,7 @@
var value = player.media.muted ? 0 : player.media.volume;
if (player.elements.inputs.volume) {
- player.elements.inputs.volume.value = value;
- }
- if (player.elements.display.volume) {
- player.elements.display.volume.value = value;
+ setRange(player.elements.inputs.volume, value);
}
}
@@ -3592,13 +3606,48 @@
}, player.loading ? 250 : 0);
}
+ // Update seek value and lower fill
+ function setRange(range, value) {
+ if (!utils.is.htmlElement(range)) {
+ return;
+ }
+
+ range.value = value;
+
+ // Webkit range fill
+ updateRangeFill(range);
+ }
+
+ // Set <progress> value
+ function setProgress(progress, value) {
+ // Default to 0
+ if (utils.is.undefined(value)) {
+ value = 0;
+ }
+
+ // Default to buffer or bail
+ if (utils.is.undefined(progress)) {
+ progress = player.elements.display.buffer;
+ }
+
+ // Update value and label
+ if (utils.is.htmlElement(progress)) {
+ progress.value = value;
+
+ // Update text label inside
+ var label = progress.getElementsByTagName('span')[0];
+ if (utils.is.htmlElement(label)) {
+ label.childNodes[0].nodeValue = value;
+ }
+ }
+ }
+
// Update <progress> elements
function updateProgress(event) {
if (!player.supported.full) {
return;
}
- var progress = player.elements.display.played;
var value = 0;
var duration = player.getDuration();
@@ -3610,8 +3659,8 @@
value = utils.getPercentage(player.media.currentTime, duration);
// Set seek range value only if it's a 'natural' time event
- if (event.type === 'timeupdate' && player.elements.inputs.seek) {
- player.elements.inputs.seek.value = value;
+ if (event.type === 'timeupdate') {
+ setRange(player.elements.inputs.seek, value);
}
break;
@@ -3619,7 +3668,6 @@
// Check buffer status
case 'playing':
case 'progress':
- progress = player.elements.display.buffer;
value = (function() {
var buffered = player.media.buffered;
@@ -3634,6 +3682,8 @@
return 0;
})();
+ setProgress(player.elements.display.buffer, value);
+
break;
}
}
@@ -3643,45 +3693,12 @@
console.warn('Looping');
player.seek(player.config.loop.start);
}*/
-
- setProgress(progress, value);
- }
-
- // Set <progress> value
- function setProgress(progress, value) {
- if (!player.supported.full) {
- return;
- }
-
- // Default to 0
- if (utils.is.undefined(value)) {
- value = 0;
- }
- // Default to buffer or bail
- if (utils.is.undefined(progress)) {
- if (utils.is.htmlElement(player.elements.display.buffer)) {
- progress = player.elements.display.buffer;
- } else {
- return;
- }
- }
-
- // Update value and label
- if (utils.is.htmlElement(progress)) {
- progress.value = value;
-
- // Update text label inside
- var label = progress.getElementsByTagName('span')[0];
- if (utils.is.htmlElement(label)) {
- label.childNodes[0].nodeValue = value;
- }
- }
}
// Update the displayed time
function updateTimeDisplay(time, element) {
// Bail if there's no duration display
- if (!element) {
+ if (!utils.is.htmlElement(element)) {
return;
}
@@ -3749,27 +3766,6 @@
updateProgress(event);
}
- // Update seek range and progress
- function updateSeekDisplay(time) {
- // Default to 0
- if (!utils.is.number(time)) {
- time = 0;
- }
-
- var duration = player.getDuration();
- var value = utils.getPercentage(time, duration);
-
- // Update progress
- if (player.elements.progress && player.elements.display.played) {
- player.elements.display.played.value = value;
- }
-
- // Update seek range input
- if (player.elements.buttons && player.elements.inputs.seek) {
- player.elements.inputs.seek.value = value;
- }
- }
-
// Update hover tooltip for seeking
function updateSeekTooltip(event) {
var duration = player.getDuration();
@@ -3828,17 +3824,13 @@
return;
}
- // Update seek range and progress
- updateSeekDisplay();
-
- // Reset buffer progress
- setProgress();
-
// Cancel current network requests
cancelRequests();
// Destroy instance and re-setup
player.destroy(function() {
+ // TODO: Reset menus here
+
// Remove elements
removeElement(player.media);
removeElement('captions');
@@ -3977,7 +3969,7 @@
var target = player.elements.buttons[play ? 'pause' : 'play'];
// Transfer focus
- if (target) {
+ if (utils.is.htmlElement(target)) {
target.focus();
}
}
@@ -4262,11 +4254,12 @@
// Click anywhere closes menu
utils.on(document.documentElement, 'click', toggleMenu);
- // Show tab in menu
- utils.on(player.elements.settings.form, 'click', showTab);
-
- // Settings menu items - use event delegation as items are added/removed
+ // Settings menu
utils.on(player.elements.settings.form, 'click', function(event) {
+ // Show tab in menu
+ showTab(event);
+
+ // Settings menu items - use event delegation as items are added/removed
// Settings - Language
if (utils.matches(event.target, player.config.selectors.inputs.language)) {
handlerProxy.call(this, event, player.config.listeners.language, function() {
@@ -4306,11 +4299,18 @@
player.seek(event.target.value / event.target.max * duration);
});
- // Seek
+ // Volume
utils.proxy(player.elements.inputs.volume, inputEvent, player.config.listeners.volume, function() {
player.setVolume(event.target.value);
});
+ // Polyfill for lower fill in <input type="range"> for webkit
+ if (player.browser.isWebkit) {
+ utils.on(getElements('input[type="range"]'), [inputEvent, 'updated'].join(' '), function(event) {
+ updateRangeFill(event.target);
+ });
+ }
+
// Seek tooltip
utils.on(player.elements.progress, 'mouseenter mouseleave mousemove', updateSeekTooltip);
@@ -4789,7 +4789,6 @@
setupCaptions: setupCaptions,
toggleNativeControls: toggleNativeControls,
updateTimeDisplay: updateTimeDisplay,
- updateSeekDisplay: updateSeekDisplay,
updateSource: updateSource,
toggleMenu: toggleMenu,
timers: timers,
@@ -4925,9 +4924,6 @@
targetTime = duration;
}
- // Update seek range and progress
- player.core.updateSeekDisplay(targetTime);
-
// Set the current time
// Embeds
if (utils.inArray(types.embed, player.type)) {
@@ -4949,9 +4945,6 @@
player.pause();
}
- // Trigger timeupdate
- player.core.trigger(player.media, 'timeupdate');
-
// Set seeking flag
player.media.seeking = true;
@@ -5196,7 +5189,7 @@
player.config.loop.end = null;
}
player.config.loop.start = currentTime;
- player.config.loop.indicator.start = player.elements.display.played.value;
+ //player.config.loop.indicator.start = player.elements.display.played.value;
break;
case 'end':
@@ -5204,7 +5197,7 @@
return;
}
player.config.loop.end = currentTime;
- player.config.loop.indicator.end = player.elements.display.played.value;
+ //player.config.loop.indicator.end = player.elements.display.played.value;
break;
case 'all':
diff --git a/src/less/mixins.less b/src/less/mixins.less
index 0b75b2a6..a620a599 100644
--- a/src/less/mixins.less
+++ b/src/less/mixins.less
@@ -18,7 +18,7 @@
background: @plyr-range-thumb-bg;
border: @plyr-range-thumb-border;
border-radius: 100%;
- transition: background .2s ease, border .2s ease, transform .2s ease;
+ transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
box-shadow: @plyr-range-thumb-shadow;
box-sizing: border-box;
}
@@ -26,4 +26,4 @@
background: @plyr-range-thumb-active-bg;
border-color: @plyr-range-thumb-active-border-color;
transform: scale(@plyr-range-thumb-active-scale);
-} \ No newline at end of file
+}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 0c36930c..22e29aa2 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -1,6 +1,7 @@
// ==========================================================================
// Plyr styles
// https://github.com/sampotts/plyr
+// TODO: break into smaller files and look at use of BEM classnames
// ==========================================================================
@import 'variables';
@@ -57,7 +58,7 @@
}
// ARIA
- [aria-hidden="true"] {
+ [aria-hidden='true'] {
display: none;
}
@@ -77,7 +78,7 @@
// Range inputs
// Specificity is for bootstrap compatibility
- input[type="range"] {
+ input[type='range'] {
display: block;
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%;
@@ -87,6 +88,9 @@
border: none;
background: transparent;
+ // Used in JS to populate lower fill for WebKit
+ color: @plyr-range-selected-bg;
+
// WebKit
-webkit-appearance: none;
@@ -106,6 +110,11 @@
&::-moz-range-thumb {
.plyr-range-thumb();
}
+ &::-moz-range-progress {
+ height: @plyr-range-track-height;
+ background: currentColor;
+ border-radius: (@plyr-range-track-height / 2);
+ }
// Microsoft
&::-ms-track {
@@ -119,7 +128,7 @@
}
&::-ms-fill-lower {
.plyr-range-track();
- background: @plyr-range-selected-bg;
+ background: currentColor;
}
&::-ms-thumb {
.plyr-range-thumb();
@@ -157,13 +166,37 @@
}
// Video range inputs
-.plyr--video input[type="range"].tab-focus {
- outline: 1px dotted fade(@plyr-video-control-color, 50%);
+.plyr--video input[type='range'] {
+ &::-webkit-slider-runnable-track {
+ background: @plyr-video-range-track-bg;
+ }
+ &::-moz-range-track {
+ background: @plyr-video-range-track-bg;
+ }
+ &::-ms-track {
+ background: @plyr-video-range-track-bg;
+ }
+
+ &.tab-focus {
+ outline: 1px dotted fade(@plyr-video-control-color, 50%);
+ }
}
// Audio range inputs
-.plyr--audio input[type="range"].tab-focus {
- outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+.plyr--audio input[type='range'] {
+ &::-webkit-slider-runnable-track {
+ background: @plyr-audio-range-track-bg;
+ }
+ &::-moz-range-track {
+ background: @plyr-audio-range-track-bg;
+ }
+ &::-ms-track {
+ background: @plyr-audio-range-track-bg;
+ }
+
+ &.tab-focus {
+ outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+ }
}
// Screen reader only elements
@@ -354,7 +387,6 @@
display: block;
fill: currentColor;
pointer-events: none;
- filter: drop-shadow(0 1px 1px fade(#000, 15%));
}
// Hide toggle icons by default
@@ -378,17 +410,21 @@
bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
- background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
+ background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
transition: opacity 0.3s ease;
.plyr__control {
+ svg {
+ filter: drop-shadow(0 1px 1px fade(#000, 15%));
+ }
+
// Hover and tab focus
&.tab-focus,
&:hover,
- &[aria-expanded="true"] {
+ &[aria-expanded='true'] {
background: @plyr-video-control-bg-hover;
color: @plyr-video-control-color-hover;
}
@@ -407,7 +443,7 @@
// Hover and tab focus
&.tab-focus,
&:hover,
- &[aria-expanded="true"] {
+ &[aria-expanded='true'] {
background: @plyr-audio-control-bg-hover;
color: @plyr-audio-control-color-hover;
}
@@ -461,11 +497,11 @@
}
// States
-.plyr__controls [data-plyr="pause"],
-.plyr--playing .plyr__controls [data-plyr="play"] {
+.plyr__controls [data-plyr='pause'],
+.plyr--playing .plyr__controls [data-plyr='play'] {
display: none;
}
-.plyr--playing .plyr__controls [data-plyr="pause"] {
+.plyr--playing .plyr__controls [data-plyr='pause'] {
display: inline-block;
}
@@ -481,16 +517,16 @@
}
// Some options are hidden by default
-.plyr [data-plyr="captions"],
-.plyr [data-plyr="fullscreen"],
-.plyr [data-plyr="pip"],
-.plyr [data-plyr="airplay"] {
+.plyr [data-plyr='captions'],
+.plyr [data-plyr='fullscreen'],
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'] {
display: none;
}
-.plyr--captions-enabled [data-plyr="captions"],
-.plyr--fullscreen-enabled [data-plyr="fullscreen"],
-.plyr--pip-enabled [data-plyr="pip"],
-.plyr--airplay-enabled [data-plyr="airplay"] {
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'],
+.plyr--pip-enabled [data-plyr='pip'],
+.plyr--airplay-enabled [data-plyr='airplay'] {
display: inline-block;
}
@@ -503,7 +539,7 @@
.plyr__control svg {
transition: transform 0.3s ease;
}
- .plyr__control[aria-expanded="true"] {
+ .plyr__control[aria-expanded='true'] {
svg {
transform: rotate(45deg);
}
@@ -668,7 +704,7 @@
&::before {
// Arrows
- content: "";
+ content: '';
position: absolute;
width: 0;
height: 0;
@@ -739,16 +775,6 @@
input[type='range'] {
position: relative;
z-index: 2;
-
- &::-webkit-slider-runnable-track {
- background: transparent;
- }
- &::-moz-range-track {
- background: transparent;
- }
- &::-ms-fill-upper {
- background: transparent;
- }
}
// Seek tooltip to show time
@@ -760,9 +786,7 @@
display: inline-block;
}
-.plyr__progress--buffer,
-.plyr__progress--played,
-.plyr__volume--display {
+.plyr__progress--buffer {
position: absolute;
left: 0;
top: 50%;
@@ -770,8 +794,7 @@
height: @plyr-range-track-height;
margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0;
- vertical-align: top;
-
+ background: transparent;
border: none;
border-radius: 100px;
@@ -799,31 +822,6 @@
border-radius: 100px;
}
}
-.plyr__progress--played,
-.plyr__volume--display {
- z-index: 1;
- color: @plyr-range-selected-bg;
- background: transparent;
- transition: none;
-
- &::-webkit-progress-value {
- min-width: @plyr-range-track-height;
- max-width: 99%;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- transition: none;
- }
- &::-moz-progress-bar {
- min-width: @plyr-range-track-height;
- max-width: 99%;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- transition: none;
- }
- &::-ms-fill {
- display: none;
- }
-}
.plyr__progress--buffer {
&::-webkit-progress-value {
transition: width 0.2s ease;
@@ -835,18 +833,10 @@
transition: width 0.2s ease;
}
}
-.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display {
- background: @plyr-video-range-track-bg;
- box-shadow: 0 1px 1px fade(#000, 15%);
-}
.plyr--video .plyr__progress--buffer {
+ box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-progress-buffered-bg;
}
-.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display {
- background: @plyr-audio-range-track-bg;
-}
.plyr--audio .plyr__progress--buffer {
color: @plyr-audio-progress-buffered-bg;
}
@@ -892,7 +882,7 @@
// Add a slash in before
&::before {
- content: "\2044";
+ content: '\2044';
margin-right: @plyr-control-spacing;
}
}
@@ -926,7 +916,7 @@
// 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
.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr="mute"] {
+.plyr--is-ios [data-plyr='mute'] {
display: none !important;
}
diff --git a/src/less/variables.less b/src/less/variables.less
index fe6e3e39..8232c3cb 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -29,8 +29,8 @@
// Controls
@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px;
-@plyr-control-padding: (@plyr-control-spacing * .7);
-@plyr-video-controls-bg: #343f4a;
+@plyr-control-padding: (@plyr-control-spacing * 0.7);
+@plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@@ -55,10 +55,8 @@
// Progress
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#343f4a, 20%);
-@plyr-video-progress-bg: fade(#fff, 25%);
-@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
-@plyr-audio-progress-bg: fade(#c6d6db, 66%);
-@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
+@plyr-video-progress-buffered-bg: fade(#fff, 25%);
+@plyr-audio-progress-buffered-bg: fade(#c6d6db, 66%);
// Range sliders
@plyr-range-track-height: 8px;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 14:13:43 +0000