Manually merged PRs

This commit is contained in:
Sam Potts 2018-03-10 23:32:48 +11:00
parent 6f061621ad
commit 572b8a7aca
16 changed files with 1769 additions and 1029 deletions

4
demo/dist/demo.js vendored
View File

@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', function () {
var player = new Plyr('#player', { var player = new Plyr('#player', {
debug: true, debug: true,
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
// iconUrl: '../dist/plyr.svg', iconUrl: '../dist/plyr.svg',
keyboard: { keyboard: {
global: true global: true
}, },
@ -231,7 +231,7 @@ if (window.location.host === 'plyr.io') {
a.async = 1; a.async = 1;
a.src = g; a.src = g;
m.parentNode.insertBefore(a, m); m.parentNode.insertBefore(a, m);
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
window.ga('create', 'UA-40881672-11', 'auto'); window.ga('create', 'UA-40881672-11', 'auto');
window.ga('send', 'pageview'); window.ga('send', 'pageview');
} }

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="//www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}(); !function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="https://www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
//# sourceMappingURL=demo.min.js.map //# sourceMappingURL=demo.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () => {
const player = new Plyr('#player', { const player = new Plyr('#player', {
debug: true, debug: true,
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
// iconUrl: '../dist/plyr.svg', iconUrl: '../dist/plyr.svg',
keyboard: { keyboard: {
global: true, global: true,
}, },
@ -238,7 +238,7 @@ if (window.location.host === 'plyr.io') {
a.async = 1; a.async = 1;
a.src = g; a.src = g;
m.parentNode.insertBefore(a, m); m.parentNode.insertBefore(a, m);
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
window.ga('create', 'UA-40881672-11', 'auto'); window.ga('create', 'UA-40881672-11', 'auto');
window.ga('send', 'pageview'); window.ga('send', 'pageview');
} }

28
dist/plyr.js vendored
View File

@ -77,7 +77,7 @@ var defaults = {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.0.0-beta.16/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.0.0-beta.17/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -1484,7 +1484,6 @@ var utils = {
// Plyr support checks // Plyr support checks
// ========================================================================== // ==========================================================================
// Check for feature support
var support = { var support = {
// Basic support // Basic support
audio: 'canPlayType' in document.createElement('audio'), audio: 'canPlayType' in document.createElement('audio'),
@ -2002,7 +2001,6 @@ var Storage = function () {
/* global google */ /* global google */
// Build the default tag URL
var getTagUrl = function getTagUrl() { var getTagUrl = function getTagUrl() {
var params = { var params = {
AV_PUBLISHERID: '58c25bb0073ef448b1087ad6', AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
@ -2663,7 +2661,6 @@ var Ads = function () {
// Plyr Event Listeners // Plyr Event Listeners
// ========================================================================== // ==========================================================================
// Sniff out the browser
var browser$2 = utils.getBrowser(); var browser$2 = utils.getBrowser();
var listeners = { var listeners = {
@ -3972,6 +3969,11 @@ var controls = {
setQualityMenu: function setQualityMenu(options) { setQualityMenu: function setQualityMenu(options) {
var _this = this; var _this = this;
// Menu required
if (!utils.is.element(this.elements.settings.panes.quality)) {
return;
}
var type = 'quality'; var type = 'quality';
var list = this.elements.settings.panes.quality.querySelector('ul'); var list = this.elements.settings.panes.quality.querySelector('ul');
@ -4133,6 +4135,10 @@ var controls = {
// Set the looping options // Set the looping options
/* setLoopMenu() { /* setLoopMenu() {
// Menu required
if (!utils.is.element(this.elements.settings.panes.loop)) {
return;
}
const options = ['start', 'end', 'all', 'reset']; const options = ['start', 'end', 'all', 'reset'];
const list = this.elements.settings.panes.loop.querySelector('ul'); const list = this.elements.settings.panes.loop.querySelector('ul');
// Show the pane and tab // Show the pane and tab
@ -4233,6 +4239,11 @@ var controls = {
setSpeedMenu: function setSpeedMenu() { setSpeedMenu: function setSpeedMenu() {
var _this3 = this; var _this3 = this;
// Menu required
if (!utils.is.element(this.elements.settings.panes.speed)) {
return;
}
var type = 'speed'; var type = 'speed';
// Set the default speeds // Set the default speeds
@ -5730,7 +5741,6 @@ var vimeo = {
// Plyr Media // Plyr Media
// ========================================================================== // ==========================================================================
// Sniff out the browser
var browser$3 = utils.getBrowser(); var browser$3 = utils.getBrowser();
var media = { var media = {
@ -5970,17 +5980,11 @@ var source = {
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v3.0.0-beta.16 // plyr.js v3.0.0-beta.17
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
// Private properties
// TODO: Use a WeakMap for private globals
// const globals = new WeakMap();
// Plyr instance
var Plyr = function () { var Plyr = function () {
function Plyr(target, options) { function Plyr(target, options) {
var _this = this; var _this = this;

2
dist/plyr.js.map vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2679
dist/plyr.polyfilled.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -36,15 +36,15 @@
"gulp-uglify-es": "^1.0.1", "gulp-uglify-es": "^1.0.1",
"gulp-util": "^3.0.8", "gulp-util": "^3.0.8",
"rollup-plugin-babel": "^3.0.3", "rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^8.3.0", "rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.0.3", "rollup-plugin-node-resolve": "^3.2.0",
"run-sequence": "^2.2.1", "run-sequence": "^2.2.1",
"stylelint": "^9.1.1", "stylelint": "^9.1.1",
"stylelint-config-prettier": "^2.1.0", "stylelint-config-prettier": "^2.1.0",
"stylelint-config-sass-guidelines": "^5.0.0", "stylelint-config-sass-guidelines": "^5.0.0",
"stylelint-config-recommended": "^2.1.0", "stylelint-config-recommended": "^2.1.0",
"stylelint-order": "^0.8.1", "stylelint-order": "^0.8.1",
"stylelint-scss": "^2.4.0", "stylelint-scss": "^2.5.0",
"stylelint-selector-bem-pattern": "^2.0.0" "stylelint-selector-bem-pattern": "^2.0.0"
}, },
"keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"], "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],

View File

@ -278,7 +278,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
| `toggleInvert` | Boolean | `true` | Allow users to click to toggle the above. | | `toggleInvert` | Boolean | `true` | Allow users to click to toggle the above. |
| `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire. | | `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire. |
| `captions` | Object | `{ active: false, language: window.navigator.language.split('-')[0] }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). | | `captions` | Object | `{ active: false, language: window.navigator.language.split('-')[0] }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). |
| `fullscreen` | Object | `{ enabled: true, fallback: true }` | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution. | | `fullscreen` | Object | `{ enabled: true, fallback: true, iosNative: false }` | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution. `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls) |
| `ratio` | String | `16:9` | The aspect ratio you want to use for embedded players. | | `ratio` | String | `16:9` | The aspect ratio you want to use for embedded players. |
| `storage` | Object | `{ enabled: true, key: 'plyr' }` | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use. | | `storage` | Object | `{ enabled: true, key: 'plyr' }` | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use. |
| `speed` | Object | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }` | `selected`: The default speed for playback. `options`: Options to display in the menu. Most browsers will refuse to play slower than 0.5. | | `speed` | Object | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }` | `selected`: The default speed for playback. `options`: Options to display in the menu. Most browsers will refuse to play slower than 0.5. |

53
src/js/controls.js vendored
View File

@ -50,7 +50,7 @@ const controls = {
icon, icon,
utils.extend(attributes, { utils.extend(attributes, {
role: 'presentation', role: 'presentation',
}) }),
); );
// Create the <use> to reference sprite // Create the <use> to reference sprite
@ -115,8 +115,8 @@ const controls = {
{ {
class: this.config.classNames.menu.badge, class: this.config.classNames.menu.badge,
}, },
text text,
) ),
); );
return badge; return badge;
@ -238,7 +238,7 @@ const controls = {
for: attributes.id, for: attributes.id,
class: this.config.classNames.hidden, class: this.config.classNames.hidden,
}, },
this.config.i18n[type] this.config.i18n[type],
); );
// Seek input // Seek input
@ -254,8 +254,8 @@ const controls = {
value: 0, value: 0,
autocomplete: 'off', autocomplete: 'off',
}, },
attributes attributes,
) ),
); );
this.elements.inputs[type] = input; this.elements.inputs[type] = input;
@ -280,8 +280,8 @@ const controls = {
max: 100, max: 100,
value: 0, value: 0,
}, },
attributes attributes,
) ),
); );
// Create the label inside // Create the label inside
@ -322,8 +322,8 @@ const controls = {
{ {
class: this.config.classNames.hidden, class: this.config.classNames.hidden,
}, },
this.config.i18n[type] this.config.i18n[type],
) ),
); );
container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00')); container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
@ -349,7 +349,7 @@ const controls = {
value, value,
checked, checked,
class: 'plyr__sr-only', class: 'plyr__sr-only',
}) }),
); );
const faux = utils.createElement('span', { 'aria-hidden': true }); const faux = utils.createElement('span', { 'aria-hidden': true });
@ -427,6 +427,11 @@ const controls = {
// Set the YouTube quality menu // Set the YouTube quality menu
// TODO: Support for HTML5 // TODO: Support for HTML5
setQualityMenu(options) { setQualityMenu(options) {
// Menu required
if (!utils.is.element(this.elements.settings.panes.quality)) {
return;
}
const type = 'quality'; const type = 'quality';
const list = this.elements.settings.panes.quality.querySelector('ul'); const list = this.elements.settings.panes.quality.querySelector('ul');
@ -482,7 +487,7 @@ const controls = {
}; };
this.options.quality.forEach(quality => this.options.quality.forEach(quality =>
controls.createMenuItem.call(this, quality, list, type, controls.getLabel.call(this, 'quality', quality), getBadge(quality)) controls.createMenuItem.call(this, quality, list, type, controls.getLabel.call(this, 'quality', quality), getBadge(quality)),
); );
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
@ -583,6 +588,11 @@ const controls = {
// Set the looping options // Set the looping options
/* setLoopMenu() { /* setLoopMenu() {
// Menu required
if (!utils.is.element(this.elements.settings.panes.loop)) {
return;
}
const options = ['start', 'end', 'all', 'reset']; const options = ['start', 'end', 'all', 'reset'];
const list = this.elements.settings.panes.loop.querySelector('ul'); const list = this.elements.settings.panes.loop.querySelector('ul');
@ -681,7 +691,7 @@ const controls = {
'language', 'language',
track.label || track.language, track.label || track.language,
controls.createBadge.call(this, track.language.toUpperCase()), controls.createBadge.call(this, track.language.toUpperCase()),
track.language.toLowerCase() === this.captions.language.toLowerCase() track.language.toLowerCase() === this.captions.language.toLowerCase(),
); );
}); });
@ -690,6 +700,11 @@ const controls = {
// Set a list of available captions languages // Set a list of available captions languages
setSpeedMenu() { setSpeedMenu() {
// Menu required
if (!utils.is.element(this.elements.settings.panes.speed)) {
return;
}
const type = 'speed'; const type = 'speed';
// Set the default speeds // Set the default speeds
@ -933,7 +948,7 @@ const controls = {
role: 'tooltip', role: 'tooltip',
class: this.config.classNames.tooltip, class: this.config.classNames.tooltip,
}, },
'00:00' '00:00',
); );
progress.appendChild(tooltip); progress.appendChild(tooltip);
@ -978,7 +993,7 @@ const controls = {
'volume', 'volume',
utils.extend(attributes, { utils.extend(attributes, {
id: `plyr-volume-${data.id}`, id: `plyr-volume-${data.id}`,
}) }),
); );
volume.appendChild(range.label); volume.appendChild(range.label);
volume.appendChild(range.input); volume.appendChild(range.input);
@ -1005,7 +1020,7 @@ const controls = {
'aria-haspopup': true, 'aria-haspopup': true,
'aria-controls': `plyr-settings-${data.id}`, 'aria-controls': `plyr-settings-${data.id}`,
'aria-expanded': false, 'aria-expanded': false,
}) }),
); );
const form = utils.createElement('form', { const form = utils.createElement('form', {
@ -1048,7 +1063,7 @@ const controls = {
'aria-controls': `plyr-settings-${data.id}-${type}`, 'aria-controls': `plyr-settings-${data.id}-${type}`,
'aria-expanded': false, 'aria-expanded': false,
}), }),
this.config.i18n[type] this.config.i18n[type],
); );
const value = utils.createElement('span', { const value = utils.createElement('span', {
@ -1088,7 +1103,7 @@ const controls = {
'aria-controls': `plyr-settings-${data.id}-home`, 'aria-controls': `plyr-settings-${data.id}-home`,
'aria-expanded': false, 'aria-expanded': false,
}, },
this.config.i18n[type] this.config.i18n[type],
); );
pane.appendChild(back); pane.appendChild(back);
@ -1221,7 +1236,7 @@ const controls = {
this.config.selectors.labels, this.config.selectors.labels,
' .', ' .',
this.config.classNames.hidden, this.config.classNames.hidden,
].join('') ].join(''),
); );
Array.from(labels).forEach(label => { Array.from(labels).forEach(label => {