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 +++++++++++++++++------------------------------------- 1 file changed, 20 insertions(+), 44 deletions(-) (limited to 'src/js/captions.js') 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; -- 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 +++++ 1 file changed, 5 insertions(+) (limited to 'src/js/captions.js') 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); }, -- 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 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) (limited to 'src/js/captions.js') 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))); -- 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 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/js/captions.js') 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 -- 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/js/captions.js') 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/js/captions.js') 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