Merge pull request #520 from platformpurple/feature/subtitles

Feature/subtitles

src/js/plyr.js

@@ -63,6 +63,9 @@
             hideControls: true,
             showPosterOnEnd: false,
             disableContextMenu: true,
+            quality: {
+                options: false
+            },
             keyboardShortcuts: {
                 focused: true,
                 global: false
@@ -71,6 +74,7 @@
                 controls: false,
                 seek: true
             },
+            tracks: [],
             selectors: {
                 html5: 'video, audio',
                 embed: '[data-type]',
@@ -90,6 +94,8 @@
                     forward: '[data-plyr="fast-forward"]',
                     mute: '[data-plyr="mute"]',
                     captions: '[data-plyr="captions"]',
+                    captions_menu: '[data-plyr="captions_menu"]',
+                    captions_lang: '[data-plyr="captions_lang"]',
                     fullscreen: '[data-plyr="fullscreen"]',
                     settings: '[data-plyr="settings"]',
                     pip: '[data-plyr="pip"]',
@@ -210,6 +216,7 @@
                 mute: null,
                 volume: null,
                 captions: null,
+                captions_lang: null,
                 fullscreen: null,
                 speed: null,
                 loop: null
@@ -824,6 +831,19 @@
             };
         }
 
+        function buildCaptionsMenu() {
+            var trackSubs = '';
+            if (Array.isArray(config.tracks) && config.tracks.length > 0) {
+              for (var i in config.tracks) {
+                var track = config.tracks[i];
+                if (typeof track == 'function') continue;
+                trackSubs += '<button type="button" class="plyr__control" data-plyr="captions_lang" data-lang="'+track.srclang+'" data-index="'+i+'">'+track.label+'</button>';
+              }
+            }
+
+            return trackSubs;
+        }
+
         // Build the default HTML
         function buildControls() {
             // Create html array
@@ -989,6 +1009,22 @@
             // Settings button / menu
             if (inArray(config.controls, 'settings')) {
                 /* beautify ignore:start */
+                var captionsMenuItem = '';
+                if (inArray(config.controls, 'captions')) {
+                captionsMenuItem = '<li role="tab">'+
+                        '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">'+
+                            config.i18n.captions +
+                            '<span class="plyr__menu__value" data-captions="settings">{lang}</span>'+
+                        '</button>'+
+                    '</li>';
+                }
+
+                if(config.qualityOptions){
+                   var showQuality = '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">'+
+                                        config.i18n.quality +'<span class="plyr__menu__value">Auto</span>'+
+                                     '</button>';
+                }
+
                 html.push(
                     '<div class="plyr__menu" data-plyr="settings">',
                         '<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
@@ -999,12 +1035,7 @@
                             '<div>',
                                 '<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
                                     '<ul>',
-                                        '<li role="tab">',
+                                        captionsMenuItem,
-                                            '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
-                                                config.i18n.captions +
-                                                '<span class="plyr__menu__value">{lang}</span>',
-                                            '</button>',
-                                        '</li>',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
                                                 config.i18n.speed +
@@ -1012,10 +1043,14 @@
                                             '</button>',
                                         '</li>',
                                         '<li role="tab">',
+
+                                            showQuality,
+
                                             '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
                                                 config.i18n.quality +
-                                                '<span class="plyr__menu__value">{quality}</span>',
+                                                '<span class="plyr__menu__value">{quality}</span>'
                                             '</button>',
+
                                         '</li>',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-loop-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-loop" aria-expanded="false">',
@@ -1032,11 +1067,11 @@
                                                 config.i18n.captions,
                                             '</button>',
                                         '</li>',
-                                        '<li>',
+                                        '<li data-captions="langs">',
-                                            '<button type="button" class="plyr__control">English</button>',
+                                            buildCaptionsMenu(),
                                         '</li>',
                                         '<li>',
-                                            '<button type="button" class="plyr__control">Off</button>',
+                                            '<button type="button" class="plyr__control" data-plyr="captions_menu">Off</button>',
                                         '</li>',
                                     '</ul>',
                                 '</div>',
@@ -1386,7 +1421,7 @@
             if (captionSources.length === 0) {
                 plyr.captionExists = false;
                 log('No caption track found');
-            } else if ((config.captions.selectedIndex + 1) > captionSources.length) {
+            } else if ((Number(config.captions.selectedIndex) + 1) > captionSources.length) {
                 plyr.captionExists = false;
                 log('Caption index out of bound');
             } else {
@@ -1503,27 +1538,30 @@
         function setCaption(caption) {
             var captions = getElement(config.selectors.captions);
             var content = document.createElement('span');
+            if(captions) {
 
-            // Empty the container
+              // Empty the container
-            captions.innerHTML = '';
+              captions.innerHTML = '';
 
-            // Default to empty
+              // Default to empty
-            if (is.undefined(caption)) {
+              if (is.undefined(caption)) {
                 caption = '';
-            }
+              }
 
-            // Set the span content
+              // Set the span content
-            if (is.string(caption)) {
+              if (is.string(caption)) {
                 content.innerHTML = caption.trim();
-            } else {
+              } else {
                 content.appendChild(caption);
+              }
+
+              // Set new caption text
+              captions.appendChild(content);
+
+              // Force redraw (for Safari)
+              var redraw = captions.offsetHeight;
             }
 
-            // Set new caption text
-            captions.appendChild(content);
-
-            // Force redraw (for Safari)
-            var redraw = captions.offsetHeight;
         }
 
         // Captions functions
@@ -1773,6 +1811,7 @@
                     fullscreen: getElement(config.selectors.buttons.fullscreen),
                     settings: getElement(config.selectors.buttons.settings),
                     pip: getElement(config.selectors.buttons.pip),
+                    lang: getElement(config.selectors.buttons.captions_lang),
                     speed: getElement(config.selectors.buttons.speed),
                     loop: getElement(config.selectors.buttons.loop)
                 };
@@ -1780,6 +1819,7 @@
                 // Inputs
                 plyr.buttons.mute = getElement(config.selectors.buttons.mute);
                 plyr.buttons.captions = getElement(config.selectors.buttons.captions);
+                plyr.buttons.captions_menu = getElement(config.selectors.buttons.captions_menu);
 
                 // Progress
                 plyr.progress = {
@@ -2929,6 +2969,8 @@
 
             // Set global
             plyr.captionsEnabled = show;
+            plyr.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
+            getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
 
             // Toggle state
             toggleState(plyr.buttons.captions, plyr.captionsEnabled);
@@ -2948,13 +2990,27 @@
         // Select active caption
         function setCaptionIndex(index) {
             // Save active caption
-            config.captions.selectedIndex = index;
+            config.captions.selectedIndex = index || config.captions.selectedIndex;
 
             // Clear caption
             setCaption();
 
             // Re-run setup
             setupCaptions();
+
+            getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
+        }
+
+        function getSubsLangValue() {
+            if (config.tracks.length === 0) {
+              return 'No Subs';
+            }
+
+            if (plyr.captionsEnabled || !is.boolean(plyr.captionsEnabled) && plyr.storage.captionsEnabled) {
+              return config.tracks[config.captions.selectedIndex].label;
+            } else {
+              return 'Disabled';
+            }
         }
 
         // Check if media is loading
@@ -3752,7 +3808,13 @@
             }
 
             // Captions
-            proxy(plyr.buttons.captions, 'click', config.listeners.captions, toggleCaptions);
+            proxy(plyr.buttons.captions, 'click', config.listeners.captions toggleCaptions);
+            // ?? on(plyr.buttons.captions_menu, 'click', toggleCaptions);
+            // Language
+            proxy(plyr.buttons.lang, 'click', config.listeners.lang, function(e) {
+                var langIndex = e.target.attributes.getNamedItem("data-index").value;
+                setCaptionIndex(langIndex);
+            });
 
             // Settings
             on(plyr.buttons.settings, 'click', function(event) {
@@ -4180,6 +4242,7 @@
 
             // Captions
             setupCaptions();
+            setCaptionIndex();
 
             // Set volume
             setVolume();