1 files changed, 119 insertions, 33 deletions

diff --git a/src/js/captions.js b/src/js/captions.js
index 5f78e636..fd2692f7 100644
--- a/src/js/captions.js
+++ b/src/js/captions.js
@@ -7,10 +7,11 @@ import controls from './controls';
 import i18n from './i18n';
 import support from './support';
 import browser from './utils/browser';
-import { createElement, emptyElement, getAttributesFromSelector, insertAfter, removeElement, toggleClass } from './utils/elements';
+import { createElement, emptyElement, getAttributesFromSelector, insertAfter, removeElement, toggleClass, toggleState } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import fetch from './utils/fetch';
 import is from './utils/is';
+import { dedupe } from './utils/arrays';
 import { getHTML } from './utils/strings';
 import { parseUrl } from './utils/urls';
 
@@ -60,21 +61,34 @@ const captions = {
             });
         }
 
-        // Try to load the value from storage
-        let active = this.storage.get('captions');
+        // Get and set initial data
+        // The "preferred" options are not realized unless / until the wanted language has a match
+        // * languages: Array of user's browser languages.
+        // * language:  The language preferred by user settings or config
+        // * active:    The state preferred by user settings or config
+        // * toggled:   The real captions state
 
-        // Otherwise fall back to the default config
-        if (!is.boolean(active)) {
-            ({ active } = this.config.captions);
-        }
+        const languages = dedupe(Array.from(navigator.languages || navigator.userLanguage)
+            .map(language => language.split('-')[0]));
 
-        // Get language from storage, fallback to config
         let language = this.storage.get('language') || this.config.captions.language;
+
+        // Use first browser language when language is 'auto'
         if (language === 'auto') {
-            [language] = (navigator.language || navigator.userLanguage).split('-');
+            [language] = languages;
+        }
+
+        let active = this.storage.get('captions');
+        if (!is.boolean(active)) {
+            ({ active } = this.config.captions);
         }
-        // Set language and show if active
-        captions.setLanguage.call(this, language, active);
+
+        Object.assign(this.captions, {
+            toggled: false,
+            active,
+            language,
+            languages,
+        });
 
         // Watch changes to textTracks and update captions menu
         if (this.isHTML5) {
@@ -86,10 +100,12 @@ const captions = {
         setTimeout(captions.update.bind(this), 0);
     },
 
+    // Update available language options in settings based on tracks
     update() {
         const tracks = captions.getTracks.call(this, true);
         // Get the wanted language
-        const { language, meta } = this.captions;
+        const { active, language, meta, currentTrackNode } = this.captions;
+        const languageExists = Boolean(tracks.find(track => track.language === language));
 
         // Handle tracks (add event listener and "pseudo"-default)
         if (this.isHTML5 && this.isVideo) {
@@ -108,12 +124,10 @@ const captions = {
             });
         }
 
-        const trackRemoved = !tracks.find(track => track === this.captions.currentTrackNode);
-        const firstMatch = this.language !== language && tracks.find(track => track.language === language);
-
-        // Update language if removed or first matching track added
-        if (trackRemoved || firstMatch) {
-            captions.setLanguage.call(this, language, this.config.captions.active);
+        // Update language first time it matches, or if the previous matching track was removed
+        if ((languageExists && this.language !== language) || !tracks.includes(currentTrackNode)) {
+            captions.setLanguage.call(this, language);
+            captions.toggle.call(this, active && languageExists);
         }
 
         // Enable or disable captions based on track length
@@ -125,12 +139,69 @@ const captions = {
         }
     },
 
-    set(index, setLanguage = true, show = true) {
+    // Toggle captions display
+    // Used internally for the toggleCaptions method, with the passive option forced to false
+    toggle(input, passive = true) {
+        // If there's no full support
+        if (!this.supported.ui) {
+            return;
+        }
+
+        const { toggled } = this.captions; // Current state
+        const activeClass = this.config.classNames.captions.active;
+
+        // Get the next state
+        // If the method is called without parameter, toggle based on current value
+        const active = is.nullOrUndefined(input) ? !toggled : input;
+
+        // Update state and trigger event
+        if (active !== toggled) {
+            // Force language if the call isn't passive and there is no matching language to toggle to
+            if (!this.language && active && !passive) {
+                const tracks = captions.getTracks.call(this);
+                const track = captions.findTrack.call(this, [
+                    this.captions.language,
+                    ...this.captions.languages,
+                ], true);
+
+                // Override user preferences to avoid switching languages if a matching track is added
+                this.captions.language = track.language;
+
+                // Set caption, but don't store in localStorage as user preference
+                captions.set.call(this, tracks.indexOf(track));
+                return;
+            }
+
+            // Toggle state
+            toggleState(this.elements.buttons.captions, active);
+
+            // Add class hook
+            toggleClass(this.elements.container, activeClass, active);
+
+            this.captions.toggled = active;
+
+            // Update settings menu
+            controls.updateSetting.call(this, 'captions');
+
+            // When passive, don't override user preferences
+            if (!passive) {
+                this.captions.active = active;
+                this.storage.set({ captions: active });
+            }
+
+            // Trigger event (not used internally)
+            triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
+        }
+    },
+
+    // Set captions by track index
+    // Used internally for the currentTrack setter with the passive option forced to false
+    set(index, passive = true) {
         const tracks = captions.getTracks.call(this);
 
         // Disable captions if setting to -1
         if (index === -1) {
-            this.toggleCaptions(false);
+            captions.toggle.call(this, false, passive);
             return;
         }
 
@@ -146,15 +217,19 @@ const captions = {
 
         if (this.captions.currentTrack !== index) {
             this.captions.currentTrack = index;
-            const track = captions.getCurrentTrack.call(this);
+            const track = tracks[index];
             const { language } = track || {};
 
             // Store reference to node for invalidation on remove
             this.captions.currentTrackNode = track;
 
-            // Prevent setting language in some cases, since it can violate user's intentions
-            if (setLanguage) {
+            // Update settings menu
+            controls.updateSetting.call(this, 'captions');
+
+            // When passive, don't override user preferences
+            if (!passive) {
                 this.captions.language = language;
+                this.storage.set({ language });
             }
 
             // Handle Vimeo captions
@@ -172,12 +247,12 @@ const captions = {
         }
 
         // Show captions
-        if (show) {
-            this.toggleCaptions(true);
-        }
+        captions.toggle.call(this, true, passive);
     },
 
-    setLanguage(language, show = true) {
+    // Set captions by language
+    // Used internally for the language setter with the passive option forced to false
+    setLanguage(language, passive = true) {
         if (!is.string(language)) {
             this.debug.warn('Invalid language argument', language);
             return;
@@ -187,8 +262,8 @@ const captions = {
 
         // Set currentTrack
         const tracks = captions.getTracks.call(this);
-        const track = captions.getCurrentTrack.call(this, true);
-        captions.set.call(this, tracks.indexOf(track), false, show);
+        const track = captions.findTrack.call(this, [language]);
+        captions.set.call(this, tracks.indexOf(track), passive);
     },
 
     // Get current valid caption tracks
@@ -204,19 +279,30 @@ const captions = {
             .filter(track => ['captions', 'subtitles'].includes(track.kind));
     },
 
-    // Get the current track for the current language
-    getCurrentTrack(fromLanguage = false) {
+    // Match tracks based on languages and get the first
+    findTrack(languages, force = false) {
         const tracks = captions.getTracks.call(this);
         const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
         const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
-        return (!fromLanguage && tracks[this.currentTrack]) || sorted.find(track => track.language === this.captions.language) || sorted[0];
+        let track;
+        languages.every(language => {
+            track = sorted.find(track => track.language === language);
+            return !track; // Break iteration if there is a match
+        });
+        // If no match is found but is required, get first
+        return track || (force ? sorted[0] : undefined);
+    },
+
+    // Get the current track
+    getCurrentTrack() {
+        return captions.getTracks.call(this)[this.currentTrack];
     },
 
     // Get UI label for track
     getLabel(track) {
         let currentTrack = track;
 
-        if (!is.track(currentTrack) && support.textTracks && this.captions.active) {
+        if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {
             currentTrack = captions.getCurrentTrack.call(this);
         }