diff options
author | Sam Potts <me@sampotts.me> | 2017-03-25 18:44:17 +1100 |
---|---|---|
committer | Sam Potts <me@sampotts.me> | 2017-03-25 18:44:17 +1100 |
commit | ca12343b164d3cb8d80dc5a4347f81d70c14095a (patch) | |
tree | e252e8deae0fdf9420b6488f321871c36e161df8 /src | |
parent | a974fbf31ca4886e7c89cfced744d31a4b1a092d (diff) | |
parent | 6eaf33ec6c0b85d5e26445cc46ca5d5ddf9015b8 (diff) | |
download | plyr-ca12343b164d3cb8d80dc5a4347f81d70c14095a.tar.lz plyr-ca12343b164d3cb8d80dc5a4347f81d70c14095a.tar.xz plyr-ca12343b164d3cb8d80dc5a4347f81d70c14095a.zip |
Merge branch 'develop' of https://github.com/Selz/plyr into develop
Diffstat (limited to 'src')
-rw-r--r-- | src/js/plyr.js | 115 |
1 files changed, 89 insertions, 26 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index d797f66d..21edc662 100644 --- a/src/js/plyr.js +++ b/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">', - '<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>', + captionsMenuItem, '<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>', - '<button type="button" class="plyr__control">English</button>', + '<li data-captions="langs">', + 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 - captions.innerHTML = ''; + // Empty the container + captions.innerHTML = ''; - // Default to empty - if (is.undefined(caption)) { + // Default to empty + if (is.undefined(caption)) { caption = ''; - } + } - // Set the span content - if (is.string(caption)) { + // Set the span content + if (is.string(caption)) { content.innerHTML = caption.trim(); - } else { + } else { content.appendChild(caption); - } + } - // Set new caption text - captions.appendChild(content); + // Set new caption text + captions.appendChild(content); + + // Force redraw (for Safari) + var redraw = captions.offsetHeight; + } - // 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(); |