From f34bf221253be40e4a620107a3f27196d577608d Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Sun, 27 May 2018 20:28:48 +0200 Subject: Restore utils.is.cue() --- src/js/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/utils.js b/src/js/utils.js index 0c5a28d7..0334879d 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -44,7 +44,7 @@ const utils = { return this.instanceof(input, Event); }, cue(input) { - return this.instanceof(input, TextTrackCue) || this.instanceof(input, VTTCue); + return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); }, track(input) { return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind)); -- cgit v1.2.3 From c69aa8a42b7f55276d35bf64a08e869654c3b0ce Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 00:02:08 +0200 Subject: Avoid duration getter returning NaN before element has loaded --- src/js/plyr.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 4c984fd7..21c00fd3 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -494,11 +494,11 @@ class Plyr { // Faux duration set via config const fauxDuration = parseFloat(this.config.duration); - // True duration - const realDuration = this.media ? Number(this.media.duration) : 0; + // Media duration can be NaN before the media has loaded + const duration = (this.media || {}).duration || 0; - // If custom duration is funky, use regular duration - return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration; + // If config duration is funky, use regular duration + return fauxDuration || duration; } /** -- cgit v1.2.3 From fac8a185ba4a945ba33a45cdfd0dd55c53edf532 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 00:33:17 +0200 Subject: Simplify currentTime setter and bail when media hasn't loaded --- src/js/plyr.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 21c00fd3..34b618bd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -432,21 +432,16 @@ class Plyr { * @param {number} input - where to seek to in seconds. Defaults to 0 (the start) */ set currentTime(input) { - let targetTime = 0; - - if (utils.is.number(input)) { - targetTime = input; + // Bail if media duration isn't available yet + if (!this.duration) { + return; } - // Normalise targetTime - if (targetTime < 0) { - targetTime = 0; - } else if (targetTime > this.duration) { - targetTime = this.duration; - } + // Validate input + const inputIsValid = utils.is.number(input) && input > 0; // Set - this.media.currentTime = targetTime; + this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0; // Logging this.debug.log(`Seeking to ${this.currentTime} seconds`); -- cgit v1.2.3 From 6391ced99f27f2b14f8c77c6657926a0012a2a69 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Sun, 27 May 2018 05:48:38 +0200 Subject: If storage is disabled, disable get as well, not just set --- src/js/storage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/storage.js b/src/js/storage.js index 5b914331..e4dc9e1b 100644 --- a/src/js/storage.js +++ b/src/js/storage.js @@ -31,7 +31,7 @@ class Storage { } get(key) { - if (!Storage.supported) { + if (!Storage.supported || !this.enabled) { return null; } -- cgit v1.2.3 From 69bb0917ad0e2a1ff2c033a0c4ddd2582de8124b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 28 May 2018 10:41:51 +1000 Subject: v3.3.9 --- src/js/defaults.js | 2 +- src/js/plyr.js | 2 +- src/js/plyr.polyfilled.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/js/defaults.js b/src/js/defaults.js index 5b1a4dd3..505520a5 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -56,7 +56,7 @@ const defaults = { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.3.8/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.3.9/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', diff --git a/src/js/plyr.js b/src/js/plyr.js index 34b618bd..4a064e09 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v3.3.8 +// plyr.js v3.3.9 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js index 9570d753..3f45ec40 100644 --- a/src/js/plyr.polyfilled.js +++ b/src/js/plyr.polyfilled.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr Polyfilled Build -// plyr.js v3.3.8 +// plyr.js v3.3.9 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== -- cgit v1.2.3 From 7aad747c25b07fedf4a4fc75095c560ea3c9899c Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Sun, 27 May 2018 05:08:18 +0200 Subject: Optimize captions code reused and ensure captionsenabled/captionsdisabled will be sent on initial setup --- src/js/captions.js | 64 +++++++++++++++++------------------------------------- src/js/plyr.js | 21 +++++++----------- src/js/ui.js | 6 +++-- 3 files changed, 32 insertions(+), 59 deletions(-) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index df717351..296888b2 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -27,17 +27,6 @@ const captions = { this.captions.language = this.config.captions.language.toLowerCase(); } - // Set captions enabled state if not set - if (!utils.is.boolean(this.captions.active)) { - const active = this.storage.get('captions'); - - if (utils.is.boolean(active)) { - this.captions.active = active; - } else { - this.captions.active = this.config.captions.active; - } - } - // Only Vimeo and HTML5 video supported at this point if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) { // Clear menu and hide @@ -55,17 +44,6 @@ const captions = { utils.insertAfter(this.elements.captions, this.elements.wrapper); } - // Set the class hook - utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); - - // Get tracks - const tracks = captions.getTracks.call(this); - - // If no caption file exists, hide container for caption text - if (utils.is.empty(tracks)) { - return; - } - // Get browser info const browser = utils.getBrowser(); @@ -94,14 +72,30 @@ const captions = { }); } + // Try to load the value from storage + let active = this.storage.get('captions'); + + // Otherwise fall back to the default config + if (!utils.is.boolean(active)) { + ({ active } = this.config.captions); + } + + // Set toggled state + this.toggleCaptions(active); + + // Update available languages in list + captions.update.call(this); + }, + + update() { // Set language captions.setLanguage.call(this); - // Enable UI - captions.show.call(this); + // Toggle the class hooks + utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); - // Set available languages in list - if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) { + // Update available languages in list + if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) { controls.setCaptionsMenu.call(this); } }, @@ -247,24 +241,6 @@ const captions = { this.debug.warn('No captions element to render to'); } }, - - // Display captions container and button (for initialization) - show() { - // Try to load the value from storage - let active = this.storage.get('captions'); - - // Otherwise fall back to the default config - if (!utils.is.boolean(active)) { - ({ active } = this.config.captions); - } else { - this.captions.active = active; - } - - if (active) { - utils.toggleClass(this.elements.container, this.config.classNames.captions.active, true); - utils.toggleState(this.elements.buttons.captions, true); - } - }, }; export default captions; diff --git a/src/js/plyr.js b/src/js/plyr.js index 34b618bd..061225f8 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -838,24 +838,19 @@ class Plyr { } // If the method is called without parameter, toggle based on current value - const show = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active); - - // Nothing to change... - if (this.captions.active === show) { - return; - } - - // Set global - this.captions.active = show; + const active = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active); // Toggle state - utils.toggleState(this.elements.buttons.captions, this.captions.active); + utils.toggleState(this.elements.buttons.captions, active); // Add class hook - utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.captions.active); + utils.toggleClass(this.elements.container, this.config.classNames.captions.active, active); - // Trigger an event - utils.dispatchEvent.call(this, this.media, this.captions.active ? 'captionsenabled' : 'captionsdisabled'); + // Update state and trigger event + if (active !== this.captions.active) { + this.captions.active = active; + utils.dispatchEvent.call(this, this.media, this.captions.active ? 'captionsenabled' : 'captionsdisabled'); + } } /** diff --git a/src/js/ui.js b/src/js/ui.js index 3a8f2d05..0d8e532f 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -55,8 +55,10 @@ const ui = { // Remove native controls ui.toggleNativeControls.call(this); - // Captions - captions.setup.call(this); + // Setup captions for html5 + if (this.isHTML5) { + captions.setup.call(this); + } // Reset volume this.volume = null; -- cgit v1.2.3 From 813f703211230024b99f4de95e433e4d33119f9a Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Sun, 27 May 2018 08:10:33 +0200 Subject: Add option to watch caption track changes and update language options --- src/js/captions.js | 5 +++++ src/js/defaults.js | 3 +++ 2 files changed, 8 insertions(+) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index 296888b2..5941ebda 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -83,6 +83,11 @@ const captions = { // Set toggled state this.toggleCaptions(active); + // Watch changes to textTracks and update captions menu + if (this.config.captions.update) { + utils.on(this.media.textTracks, 'change', captions.update.bind(this)); + } + // Update available languages in list captions.update.call(this); }, diff --git a/src/js/defaults.js b/src/js/defaults.js index 5b1a4dd3..dc8785d5 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -116,6 +116,9 @@ const defaults = { captions: { active: false, language: (navigator.language || navigator.userLanguage).split('-')[0], + // Listen to new tracks added after Plyr is initialized. + // This is needed for streaming captions, but may result in unselectable options + update: false, }, // Fullscreen settings -- cgit v1.2.3 From 0109454a34d58d5fc0b2828c5106486de6a334db Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 04:38:08 +0200 Subject: Ensure language is set in case the track is added after initialization, and trigger languagechange event when language is initially set --- src/js/captions.js | 21 ++++++++------------- src/js/controls.js | 5 +---- 2 files changed, 9 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index 5941ebda..f62b2d4f 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -16,17 +16,6 @@ const captions = { return; } - // Set default language if not set - const stored = this.storage.get('language'); - - if (!utils.is.empty(stored)) { - this.captions.language = stored; - } - - if (utils.is.empty(this.captions.language)) { - this.captions.language = this.config.captions.language.toLowerCase(); - } - // Only Vimeo and HTML5 video supported at this point if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) { // Clear menu and hide @@ -93,8 +82,14 @@ const captions = { }, update() { - // Set language - captions.setLanguage.call(this); + // Update tracks + const tracks = captions.getTracks.call(this); + this.options.captions = tracks.map(({language}) => language); + + // Set language if it hasn't been set already + if (!this.language) { + this.language = this.storage.get('language') || (this.config.captions.language || '').toLowerCase(); + } // Toggle the class hooks utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); diff --git a/src/js/controls.js b/src/js/controls.js index c76bd66b..32e82f78 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -883,13 +883,10 @@ const controls = { 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null, - track.language.toLowerCase() === this.captions.language.toLowerCase(), + track.language.toLowerCase() === this.language, ); }); - // Store reference - this.options.captions = tracks.map(track => track.language); - controls.updateSetting.call(this, type, list); }, -- cgit v1.2.3 From c9298fde768d14975a41ce8018fd0f10116943aa Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Sun, 13 May 2018 19:58:23 +0200 Subject: Fix typo --- src/js/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/ui.js b/src/js/ui.js index 0d8e532f..9a6692dc 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -55,7 +55,7 @@ const ui = { // Remove native controls ui.toggleNativeControls.call(this); - // Setup captions for html5 + // Setup captions for HTML5 if (this.isHTML5) { captions.setup.call(this); } -- cgit v1.2.3 From 812e07b7347bc9d9a212b0204af1d90c92ee0c13 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 07:43:37 +0200 Subject: Replace browser language detection in defaults.js with explicit 'auto' option --- src/js/captions.js | 6 +++++- src/js/defaults.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index f62b2d4f..f8083b65 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -88,7 +88,11 @@ const captions = { // Set language if it hasn't been set already if (!this.language) { - this.language = this.storage.get('language') || (this.config.captions.language || '').toLowerCase(); + let { language } = this.config.captions; + if (language === 'auto') { + [ language ] = (navigator.language || navigator.userLanguage).split('-'); + } + this.language = this.storage.get('language') || (language || '').toLowerCase(); } // Toggle the class hooks diff --git a/src/js/defaults.js b/src/js/defaults.js index dc8785d5..977a77e7 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -115,7 +115,7 @@ const defaults = { // Captions settings captions: { active: false, - language: (navigator.language || navigator.userLanguage).split('-')[0], + language: 'auto', // Listen to new tracks added after Plyr is initialized. // This is needed for streaming captions, but may result in unselectable options update: false, -- cgit v1.2.3 From f58e23b325a3b1d6ac30771d2167f22ea95fe54f Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 16:19:44 +0200 Subject: Change to using addtrack and removetrack listeners since 'change' didn't trigger in firefox for embedded captions (may also be a hls.js issue) --- src/js/captions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index f8083b65..52fdd8b3 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -74,7 +74,7 @@ const captions = { // Watch changes to textTracks and update captions menu if (this.config.captions.update) { - utils.on(this.media.textTracks, 'change', captions.update.bind(this)); + utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this)); } // Update available languages in list -- cgit v1.2.3 From 64399e0717cf39f547594dad06097bb429cb9010 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 17:54:25 +0200 Subject: Defer initial captions update to next tick, to avoid event being triggered to early --- src/js/captions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index 52fdd8b3..30c4bc74 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -77,8 +77,8 @@ const captions = { utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this)); } - // Update available languages in list - captions.update.call(this); + // Update available languages in list next tick (the event must not be triggered before the listeners) + setTimeout(captions.update.bind(this), 0); }, update() { -- cgit v1.2.3 From 9d798893b56e2ebe9da2d6b87f639f2d2ecee365 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 29 May 2018 16:06:07 +0200 Subject: Call duration update method manually if user config has duration --- src/js/ui.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src') diff --git a/src/js/ui.js b/src/js/ui.js index 3a8f2d05..aa398e3a 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -109,6 +109,12 @@ const ui = { if (this.poster && this.elements.poster && !this.elements.poster.style.backgroundImage) { ui.setPoster.call(this, this.poster); } + + // Manually set the duration if user has overridden it. + // The event listeners for it doesn't get called if preload is disabled (#701) + if (this.config.duration) { + controls.durationUpdate.call(this); + } }, // Setup aria attribute for play and iframe title -- cgit v1.2.3 From 8de06fb862fa89533216c1f9a14737f98651bf36 Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 13:55:22 +0200 Subject: Accept quality 0 --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 557291d9..cfce37c9 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -675,7 +675,7 @@ class Plyr { quality = Number(input); } - if (!utils.is.number(quality) || quality === 0) { + if (!utils.is.number(quality)) { quality = this.storage.get('quality'); } -- cgit v1.2.3 From e0c09c51f292062ca8dae679990465763434adb1 Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 14:55:29 +0200 Subject: Allow nested translations --- src/js/i18n.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/i18n.js b/src/js/i18n.js index 58c3e7cf..d35daacc 100644 --- a/src/js/i18n.js +++ b/src/js/i18n.js @@ -6,11 +6,15 @@ import utils from './utils'; const i18n = { get(key = '', config = {}) { - if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) { + if (utils.is.empty(key) || utils.is.empty(config)) { return ''; } - let string = config.i18n[key]; + let string = key.split('.').reduce((o,i) => o[i] || {}, config.i18n); + + if (utils.is.empty(string)) { + return ''; + } const replace = { '{seektime}': config.seekTime, -- cgit v1.2.3 From 1c1668bfc344a21e2039527f70034ba4ecb68dfd Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 14:55:48 +0200 Subject: Implement translation support for qualityName and qualityBadge --- src/js/controls.js | 31 ++++++++----------------------- src/js/defaults.js | 8 ++++++++ 2 files changed, 16 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/js/controls.js b/src/js/controls.js index 32e82f78..72b752c1 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -664,27 +664,7 @@ const controls = { // Get the badge HTML for HD, 4K etc const getBadge = quality => { - let label = ''; - - switch (quality) { - case 2160: - label = '4K'; - break; - - case 1440: - case 1080: - case 720: - label = 'HD'; - break; - - case 576: - case 480: - label = 'SD'; - break; - - default: - break; - } + const label = i18n.get(`qualityBadge.${quality}`, this.config); if (!label.length) { return null; @@ -708,7 +688,6 @@ const controls = { }, // Translate a value into a nice label - // TODO: Localisation getLabel(setting, value) { switch (setting) { case 'speed': @@ -716,7 +695,13 @@ const controls = { case 'quality': if (utils.is.number(value)) { - return `${value}p`; + const qualityName = i18n.get(`qualityName.${value}`, this.config); + + if (!qualityName.length) { + return `${value}p`; + } + + return qualityName; } return utils.toTitleCase(value); diff --git a/src/js/defaults.js b/src/js/defaults.js index 6a88e73f..a6b83f1f 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -190,6 +190,14 @@ const defaults = { disabled: 'Disabled', enabled: 'Enabled', advertisement: 'Ad', + qualityBadge: { + 2160: '4K', + 1440: 'HD', + 1080: 'HD', + 720: 'HD', + 576: 'SD', + 480: 'SD', + }, }, // URLs -- cgit v1.2.3 From 41c7dff0e81ccdad8a6ab80322e0f323eb9ac6c1 Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 16:59:11 +0200 Subject: Add getDeep method to utils --- src/js/i18n.js | 2 +- src/js/utils.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/i18n.js b/src/js/i18n.js index d35daacc..62e5bdb0 100644 --- a/src/js/i18n.js +++ b/src/js/i18n.js @@ -10,7 +10,7 @@ const i18n = { return ''; } - let string = key.split('.').reduce((o,i) => o[i] || {}, config.i18n); + let string = utils.getDeep(config.i18n, key); if (utils.is.empty(string)) { return ''; diff --git a/src/js/utils.js b/src/js/utils.js index 0334879d..e04d56e4 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -728,6 +728,11 @@ const utils = { return JSON.parse(JSON.stringify(object)); }, + // Get a nested value in an object + getDeep(object, value) { + return value.split('.').reduce((obj, key) => obj[key] || {}, object); + }, + // Get the closest value in an array closest(array, value) { if (!utils.is.array(array) || !array.length) { -- cgit v1.2.3 From 6435ced70710fd04f3e4a14d9150c529b3ebedc5 Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 17:10:38 +0200 Subject: Return undefined when the key is not present. --- src/js/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/utils.js b/src/js/utils.js index e04d56e4..ea2dc72d 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -729,8 +729,8 @@ const utils = { }, // Get a nested value in an object - getDeep(object, value) { - return value.split('.').reduce((obj, key) => obj[key] || {}, object); + getDeep(object, path) { + return path.split('.').reduce((obj, key) => (obj && obj[key]) || undefined, object); }, // Get the closest value in an array -- cgit v1.2.3 From a8fa125a96def9f7b41796375c11e2e1e753d28f Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 17:30:10 +0200 Subject: Refactor getDeep method --- src/js/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/utils.js b/src/js/utils.js index ea2dc72d..b6ba0941 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -730,7 +730,7 @@ const utils = { // Get a nested value in an object getDeep(object, path) { - return path.split('.').reduce((obj, key) => (obj && obj[key]) || undefined, object); + return path.split('.').reduce((obj, key) => obj && obj[key], object); }, // Get the closest value in an array -- cgit v1.2.3 From 61f4b998e1b9909b30a676463d7afa696299662e Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Thu, 31 May 2018 10:17:21 +0200 Subject: Wait for the metadata to be loaded before setting the currentTime --- src/js/html5.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/js/html5.js b/src/js/html5.js index 3818a441..63596cfc 100644 --- a/src/js/html5.js +++ b/src/js/html5.js @@ -99,6 +99,13 @@ const html5 = { // Set new source player.media.src = supported[0].getAttribute('src'); + // Restore time + const onLoadedMetaData = () => { + player.currentTime = currentTime; + player.off('loadedmetadata', onLoadedMetaData); + }; + player.on('loadedmetadata', onLoadedMetaData); + // Load new source player.media.load(); @@ -107,9 +114,6 @@ const html5 = { player.play(); } - // Restore time - player.currentTime = currentTime; - // Trigger change event utils.dispatchEvent.call(player, player.media, 'qualitychange', false, { quality: input, -- cgit v1.2.3 From 56668f58b6284e63f2874120cf7e1747b868d2b0 Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Thu, 31 May 2018 14:40:56 +0200 Subject: Rename qualityName to label --- src/js/controls.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/js/controls.js b/src/js/controls.js index 72b752c1..20518f9c 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -695,13 +695,13 @@ const controls = { case 'quality': if (utils.is.number(value)) { - const qualityName = i18n.get(`qualityName.${value}`, this.config); + const label = i18n.get(`qualityLabel.${value}`, this.config); - if (!qualityName.length) { + if (!label.length) { return `${value}p`; } - return qualityName; + return label; } return utils.toTitleCase(value); -- cgit v1.2.3 From 108bd3dfa078cf22c0446373830e86cba586919c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 31 May 2018 23:33:59 +1000 Subject: Fixed incorrect BEM formatting, fixed buffer alignment --- src/js/defaults.js | 5 ++--- src/sass/components/progress.scss | 30 +++++++++++++++++------------- src/sass/plyr.scss | 4 ++-- 3 files changed, 21 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/js/defaults.js b/src/js/defaults.js index a6b83f1f..8d92219a 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -322,9 +322,8 @@ const defaults = { display: { currentTime: '.plyr__time--current', duration: '.plyr__time--duration', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played', - loop: '.plyr__progress--loop', + buffer: '.plyr__progress__buffer', + loop: '.plyr__progress__loop', // Used later volume: '.plyr__volume--display', }, progress: '.plyr__progress', diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index 60994f99..eddd32ab 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -5,16 +5,21 @@ .plyr__progress { display: flex; flex: 1; - position: relative; - margin-right: $plyr-range-thumb-height; left: $plyr-range-thumb-height / 2; + margin-right: $plyr-range-thumb-height; + position: relative; + + input[type='range'], + &__buffer { + margin-left: -($plyr-range-thumb-height / 2); + margin-right: -($plyr-range-thumb-height / 2); + // Offset the range thumb in order to be able to calculate the relative progress (#954) + width: calc(100% + #{$plyr-range-thumb-height}); + } input[type='range'] { position: relative; z-index: 2; - // Offset the range thumb in order to be able to calculate the relative progress (#954) - width: calc(100% + #{$plyr-range-thumb-height}) !important; - margin: 0 -#{$plyr-range-thumb-height / 2} !important; } // Seek tooltip to show time @@ -24,18 +29,17 @@ } } -.plyr__progress--buffer { +.plyr__progress__buffer { -webkit-appearance: none; /* stylelint-disable-line */ background: transparent; border: 0; border-radius: 100px; height: $plyr-range-track-height; left: 0; - margin: -($plyr-range-track-height / 2) 0 0; + margin-top: -($plyr-range-track-height / 2); padding: 0; position: absolute; top: 50%; - width: 100%; &::-webkit-progress-bar { background: transparent; @@ -63,17 +67,17 @@ } } -.plyr--video .plyr__progress--buffer { +.plyr--video .plyr__progress__buffer { box-shadow: 0 1px 1px rgba(#000, 0.15); color: $plyr-video-progress-buffered-bg; } -.plyr--audio .plyr__progress--buffer { +.plyr--audio .plyr__progress__buffer { color: $plyr-audio-progress-buffered-bg; } // Loading state -.plyr--loading .plyr__progress--buffer { +.plyr--loading .plyr__progress__buffer { animation: plyr-progress 1s linear infinite; background-image: linear-gradient( -45deg, @@ -90,10 +94,10 @@ color: transparent; } -.plyr--video.plyr--loading .plyr__progress--buffer { +.plyr--video.plyr--loading .plyr__progress__buffer { background-color: $plyr-video-progress-buffered-bg; } -.plyr--audio.plyr--loading .plyr__progress--buffer { +.plyr--audio.plyr--loading .plyr__progress__buffer { background-color: $plyr-audio-progress-buffered-bg; } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index e934cf92..3d824f7d 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -31,12 +31,12 @@ @import 'components/controls'; @import 'components/embed'; @import 'components/menus'; -@import 'components/progress'; -@import 'components/poster'; @import 'components/sliders'; +@import 'components/poster'; @import 'components/times'; @import 'components/tooltips'; @import 'components/video'; +@import 'components/progress'; @import 'components/volume'; @import 'states/fullscreen'; -- cgit v1.2.3 From 969a877a34e0cad1bca4bf17e9661ba6e73bcb99 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 31 May 2018 23:41:48 +1000 Subject: v3.3.10 --- src/js/defaults.js | 2 +- src/js/plyr.js | 2 +- src/js/plyr.polyfilled.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/js/defaults.js b/src/js/defaults.js index 505520a5..34e077ee 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -56,7 +56,7 @@ const defaults = { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.3.9/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', diff --git a/src/js/plyr.js b/src/js/plyr.js index 4a064e09..dcc9fee6 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v3.3.9 +// plyr.js v3.3.10 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js index 3f45ec40..f66a82de 100644 --- a/src/js/plyr.polyfilled.js +++ b/src/js/plyr.polyfilled.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr Polyfilled Build -// plyr.js v3.3.9 +// plyr.js v3.3.10 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== -- cgit v1.2.3 From c95d9923f7996ca7331e6f1f7f232066ec1d002e Mon Sep 17 00:00:00 2001 From: cky <576779975@qq.com> Date: Wed, 6 Jun 2018 16:57:24 +0800 Subject: fix: https://github.com/sampotts/plyr/issues/1006 --- src/js/listeners.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/listeners.js b/src/js/listeners.js index 86236fe3..45d6097c 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -74,7 +74,10 @@ class Listeners { // and if the focused element is not editable (e.g. text input) // and any that accept key input http://webaim.org/techniques/keyboard/ const focused = utils.getFocusElement(); - if (utils.is.element(focused) && utils.matches(focused, this.player.config.selectors.editable)) { + if (utils.is.element(focused) && ( + focused !== this.player.elements.inputs.seek && + utils.matches(focused, this.player.config.selectors.editable)) + ) { return; } -- cgit v1.2.3 From 84424f7f67461a3da7f3a1ba1ffea6505dddc4dc Mon Sep 17 00:00:00 2001 From: cky <576779975@qq.com> Date: Wed, 6 Jun 2018 19:27:07 +0800 Subject: fix: when the seek input is focused and the video is playing, the space key can't make the video pause, because after 'keyup', it always make the video play --- src/js/listeners.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src') diff --git a/src/js/listeners.js b/src/js/listeners.js index 45d6097c..81f5271c 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -563,6 +563,12 @@ class Listeners { on(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => { const seek = event.currentTarget; + const code = event.keyCode ? event.keyCode : event.which; + const eventType = event.type; + + if ((eventType === 'keydown' || eventType === 'keyup') && (code !== 39 && code !== 37)) { + return; + } // Was playing before? const play = seek.hasAttribute('play-on-seeked'); -- cgit v1.2.3 From 0c03accd417e31ad34f81b12f1e9febec6e6fc48 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 9 Jun 2018 12:04:53 +1000 Subject: Fix Sprite issue --- src/js/utils.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/js/utils.js b/src/js/utils.js index b6ba0941..a7d2ada4 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -151,24 +151,23 @@ const utils = { return; } - const prefix = 'cache-'; + const prefix = 'cache'; const hasId = utils.is.string(id); let isCached = false; - const exists = () => document.querySelectorAll(`#${id}`).length; + const exists = () => document.getElementById(id) !== null; + + const update = (container, data) => { + container.innerHTML = data; - function injectSprite(data) { // Check again incase of race condition if (hasId && exists()) { return; } - // Inject content - this.innerHTML = data; - // Inject the SVG to the body - document.body.insertBefore(this, document.body.childNodes[0]); - } + document.body.insertAdjacentElement('afterbegin', container); + }; // Only load once if ID set if (!hasId || !exists()) { @@ -184,13 +183,12 @@ const utils = { // Check in cache if (useStorage) { - const cached = window.localStorage.getItem(prefix + id); + const cached = window.localStorage.getItem(`${prefix}-${id}`); isCached = cached !== null; if (isCached) { const data = JSON.parse(cached); - injectSprite.call(container, data.content); - return; + update(container, data.content); } } @@ -204,14 +202,14 @@ const utils = { if (useStorage) { window.localStorage.setItem( - prefix + id, + `${prefix}-${id}`, JSON.stringify({ content: result, }), ); } - injectSprite.call(container, result); + update(container, result); }) .catch(() => {}); } -- cgit v1.2.3