Menu creation (WIP)
This commit is contained in:
Sam Potts
parent
ef1d73df15
commit
18bf4d84b9
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
@ -1 +1 @@
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen"]});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],n=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,n=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),n=!0);while(++i<s);n&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,n=i.length,o=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),o=!0,t=c(this,e);while(++s<n);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},n.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{n.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,n.defineProperty(s,t,p))}}else n[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in o&&(i||t!==r)&&(r.length||t!==o.video)){switch(t){case o.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case o.audio:s.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case o.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case o.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=n.length-1;a>=0;a--)e(n[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen"]});plyr.loadSprite("dist/demo.svg");for(var s=i[0],n=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=n.length-1;c>=0;c--)n[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=o.video),r in o&&history.replaceState({type:r},"",l?"":"#"+r),r!==o.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,n,o,r){e.GoogleAnalyticsObject=n,e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},e[n].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=s,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
@ -51,10 +51,9 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls>
|
||||
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
|
||||
<!-- Video files -->
|
||||
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
|
||||
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
|
||||
|
||||
@ -108,12 +108,8 @@
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||
type: 'video/mp4'
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
|
||||
type: 'video/webm'
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||
type: 'video/mp4'
|
||||
}],
|
||||
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||
tracks: [{
|
||||
|
||||
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
283
src/js/plyr.js
283
src/js/plyr.js
@ -417,7 +417,7 @@
|
||||
// Set attributes
|
||||
function setAttributes(element, attributes) {
|
||||
for (var key in attributes) {
|
||||
element.setAttribute(key, (is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]);
|
||||
element.setAttribute(key, attributes[key]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -817,7 +817,7 @@
|
||||
// Picture-in-picture support
|
||||
// Safari only currently
|
||||
pip: (function() {
|
||||
return is.function(document.createElement('video').webkitSetPresentationMode);
|
||||
return is.function(createElement('video').webkitSetPresentationMode);
|
||||
})(),
|
||||
// Airplay support
|
||||
// Safari only currently
|
||||
@ -870,12 +870,18 @@
|
||||
var plyr = this;
|
||||
var timers = {};
|
||||
var api;
|
||||
|
||||
// Elements cache
|
||||
var elements = {
|
||||
buttons: {},
|
||||
display: {},
|
||||
progress: {},
|
||||
inputs: {}
|
||||
}
|
||||
inputs: {},
|
||||
settings: {
|
||||
tabs: {},
|
||||
panes: {}
|
||||
}
|
||||
};
|
||||
|
||||
// Set media
|
||||
plyr.media = media;
|
||||
@ -901,10 +907,10 @@
|
||||
}
|
||||
}
|
||||
var log = function() {
|
||||
logger('log', arguments)
|
||||
logger('log', arguments);
|
||||
};
|
||||
var warn = function() {
|
||||
logger('warn', arguments)
|
||||
logger('warn', arguments);
|
||||
};
|
||||
|
||||
// Log config options and support
|
||||
@ -961,10 +967,10 @@
|
||||
insertElement(type, plyr.media, {
|
||||
src: attributes
|
||||
});
|
||||
} else if (attributes.constructor === Array) {
|
||||
for (var i = attributes.length - 1; i >= 0; i--) {
|
||||
insertElement(type, plyr.media, attributes[i]);
|
||||
}
|
||||
} else if (is.array(attributes)) {
|
||||
attributes.forEach(function(attribute) {
|
||||
insertElement(type, plyr.media, attribute);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -976,22 +982,6 @@
|
||||
};
|
||||
}
|
||||
|
||||
// Build a list of available captions
|
||||
function buildCaptionsMenu() {
|
||||
var trackSubs = '';
|
||||
|
||||
if (is.array(config.tracks) && !is.empty(config.tracks)) {
|
||||
config.tracks.forEach(function(track, index) {
|
||||
if (is.function(track)) {
|
||||
return;
|
||||
}
|
||||
trackSubs += '<button type="button" class="plyr__control" data-plyr="captions-lang" data-lang="' + track.srclang + '" data-index="' + index + '">' + track.label + '</button>';
|
||||
});
|
||||
}
|
||||
|
||||
return trackSubs;
|
||||
}
|
||||
|
||||
// Create <svg> icon
|
||||
function createIcon(type, attributes) {
|
||||
var namespace = 'http://www.w3.org/2000/svg';
|
||||
@ -1034,15 +1024,24 @@
|
||||
}
|
||||
|
||||
// Create a <button>
|
||||
function createButton(type) {
|
||||
function createButton(type, attributes) {
|
||||
var button = createElement('button');
|
||||
var attributes = {
|
||||
class: 'plyr__control'
|
||||
};
|
||||
var iconDefault;
|
||||
var iconToggled;
|
||||
var labelKey;
|
||||
|
||||
if (!is.object(attributes)) {
|
||||
attributes = {};
|
||||
}
|
||||
|
||||
if ('class' in attributes) {
|
||||
if (attributes.class.indexOf('plyr__control') === -1) {
|
||||
attributes.class += ' plyr__control';
|
||||
}
|
||||
} else {
|
||||
attributes.class = 'plyr__control';
|
||||
}
|
||||
|
||||
// Large play button
|
||||
switch (type) {
|
||||
case 'mute':
|
||||
@ -1171,6 +1170,8 @@
|
||||
|
||||
container.appendChild(createElement('span', getAttributesFromSelector(config.selectors.display[type]), '00:00'));
|
||||
|
||||
elements.display[type] = container;
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
@ -1222,14 +1223,11 @@
|
||||
|
||||
// Seek tooltip
|
||||
if (config.tooltips.seek) {
|
||||
//html.push('<span class="plyr__tooltip">00:00</span>');
|
||||
var tooltip = createElement('span', {
|
||||
role: 'tooltip',
|
||||
class: config.classes.tooltip
|
||||
});
|
||||
}, '00:00');
|
||||
|
||||
var value = document.createTextNode('00:00');
|
||||
tooltip.appendChild(value);
|
||||
container.appendChild(tooltip);
|
||||
}
|
||||
|
||||
@ -1284,24 +1282,132 @@
|
||||
|
||||
// Settings button / menu
|
||||
if (inArray(config.controls, 'settings')) {
|
||||
/*
|
||||
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>';
|
||||
}
|
||||
var wrapper = createElement('span', extend(getAttributesFromSelector(config.selectors.buttons.settings), {
|
||||
class: 'plyr__menu'
|
||||
}));
|
||||
|
||||
if (is.array(config.quality.options)) {
|
||||
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>';
|
||||
}
|
||||
wrapper.appendChild(createButton('settings', {
|
||||
id: 'plyr-settings-toggle-' + data.id,
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id,
|
||||
'aria-expanded': false
|
||||
}));
|
||||
|
||||
html.push(
|
||||
var form = createElement('form', {
|
||||
class: 'plyr__menu__container',
|
||||
id: 'plyr-settings-' + data.id,
|
||||
'aria-hidden': true,
|
||||
'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
|
||||
role: 'tablist',
|
||||
tabindex: -1
|
||||
});
|
||||
|
||||
var inner = createElement('div');
|
||||
|
||||
var home = createElement('div', {
|
||||
id: 'plyr-settings-' + data.id + '-home',
|
||||
'aria-hidden': false,
|
||||
'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
|
||||
role: 'tabpanel',
|
||||
tabindex: -1
|
||||
});
|
||||
|
||||
var tabs = createElement('ul', {
|
||||
role: 'tablist'
|
||||
});
|
||||
|
||||
['captions', 'quality', 'speed', 'loop'].forEach(function(type) {
|
||||
var tab = createElement('li', {
|
||||
role: 'tab'
|
||||
});
|
||||
|
||||
var button = createElement('button', extend(getAttributesFromSelector(config.selectors.buttons.settings), {
|
||||
type: 'button',
|
||||
class: 'plyr__control plyr__control--forward',
|
||||
id: 'plyr-settings-' + data.id + '-' + type + '-tab',
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id + '-' + type,
|
||||
'aria-expanded': false
|
||||
}), config.i18n[type]);
|
||||
|
||||
var value = createElement('span', {
|
||||
class: 'plyr__menu__value'
|
||||
});
|
||||
|
||||
// Speed contains HTML entities
|
||||
value.innerHTML = data[type];
|
||||
|
||||
button.appendChild(value);
|
||||
|
||||
tab.appendChild(button);
|
||||
|
||||
tabs.appendChild(tab);
|
||||
});
|
||||
|
||||
home.appendChild(tabs);
|
||||
|
||||
inner.appendChild(home);
|
||||
|
||||
['captions', 'quality', 'speed', 'loop'].forEach(function(type) {
|
||||
var pane = createElement('div', {
|
||||
id: 'plyr-settings-' + data.id + '-' + type,
|
||||
'aria-hidden': true,
|
||||
'aria-labelled-by': 'plyr-settings-tab-' + data.id,
|
||||
role: 'tabpanel',
|
||||
tabindex: -1
|
||||
});
|
||||
|
||||
var options = createElement('ul');
|
||||
|
||||
var option = createElement('li');
|
||||
|
||||
var back = createElement('button', {
|
||||
type: 'button',
|
||||
class: 'plyr__control plyr__control--back',
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id + '-home',
|
||||
'aria-expanded': false
|
||||
}, config.i18n.back);
|
||||
|
||||
option.appendChild(back);
|
||||
|
||||
options.appendChild(option);
|
||||
|
||||
switch (type) {
|
||||
case 'captions':
|
||||
if (is.array(config.tracks)) {
|
||||
config.tracks.forEach(function(track, index) {
|
||||
if (is.function(track)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var option = createElement('li');
|
||||
|
||||
var button = createButton('language', {
|
||||
'data-language': track.srclang,
|
||||
'data-index': index
|
||||
}, track.label);
|
||||
|
||||
option.appendChild(button);
|
||||
|
||||
options.appendChild(options);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
pane.appendChild(options);
|
||||
|
||||
inner.appendChild(pane);
|
||||
});
|
||||
|
||||
form.appendChild(inner);
|
||||
|
||||
wrapper.appendChild(form);
|
||||
|
||||
controls.appendChild(wrapper);
|
||||
|
||||
/*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">',
|
||||
'<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
|
||||
@ -1494,6 +1600,8 @@
|
||||
controls.appendChild(createButton('fullscreen'));
|
||||
}
|
||||
|
||||
elements.controls = controls;
|
||||
|
||||
return controls;
|
||||
}
|
||||
|
||||
@ -1958,7 +2066,7 @@
|
||||
// Set global
|
||||
plyr.captionsEnabled = show;
|
||||
elements.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
|
||||
getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
|
||||
//TODO: display lang getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
|
||||
|
||||
// Toggle state
|
||||
toggleState(elements.buttons.captions, plyr.captionsEnabled);
|
||||
@ -1997,15 +2105,19 @@
|
||||
}
|
||||
|
||||
// Create a unique ID
|
||||
plyr.id = Math.floor(Math.random() * (10000));
|
||||
plyr.id = Math.floor(Math.random() * 10000);
|
||||
|
||||
// Create controls
|
||||
var controls = createControls({
|
||||
id: plyr.id,
|
||||
seektime: config.seekTime,
|
||||
speed: getSpeedDisplayValue(),
|
||||
// TODO: Get current quality
|
||||
quality: 'HD',
|
||||
// TODO: Set language automatically based on UA?
|
||||
language: 'English'
|
||||
captions: 'English',
|
||||
// TODO: Get loop
|
||||
loop: 'None'
|
||||
});
|
||||
|
||||
// Controls container
|
||||
@ -2039,7 +2151,8 @@
|
||||
}
|
||||
|
||||
// Find the UI controls and store references
|
||||
function findElements() {
|
||||
// TODO: Restore when re-enabling custom HTML
|
||||
/*function findElements() {
|
||||
try {
|
||||
elements.controls = getElement(config.selectors.controls.wrapper);
|
||||
|
||||
@ -2092,7 +2205,7 @@
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// Toggle style hook
|
||||
function toggleStyleHook() {
|
||||
@ -2218,7 +2331,7 @@
|
||||
// Inject the player wrapper
|
||||
if (plyr.type === 'video') {
|
||||
// Create the wrapper div
|
||||
var wrapper = document.createElement('div');
|
||||
var wrapper = createElement('div');
|
||||
wrapper.setAttribute('class', config.classes.videoWrapper);
|
||||
|
||||
// Wrap the video in a container
|
||||
@ -2237,9 +2350,9 @@
|
||||
|
||||
// Setup YouTube/Vimeo
|
||||
function setupEmbed() {
|
||||
var container = document.createElement('div'),
|
||||
mediaId,
|
||||
id = plyr.type + '-' + Math.floor(Math.random() * (10000));
|
||||
var container = createElement('div');
|
||||
var mediaId;
|
||||
var id = plyr.type + '-' + Math.floor(Math.random() * (10000));
|
||||
|
||||
// Parse IDs from URLs if supplied
|
||||
switch (plyr.type) {
|
||||
@ -2322,7 +2435,7 @@
|
||||
} else if (plyr.type === 'soundcloud') {
|
||||
// TODO: Currently unsupported and undocumented
|
||||
// Inject the iframe
|
||||
var soundCloud = document.createElement('iframe');
|
||||
var soundCloud = createElement('iframe');
|
||||
|
||||
// Watch for iframe load
|
||||
soundCloud.loaded = false;
|
||||
@ -2957,10 +3070,10 @@
|
||||
// Get the duration (or custom if set)
|
||||
function getDuration() {
|
||||
// It should be a number, but parse it just incase
|
||||
var duration = parseInt(config.duration),
|
||||
var duration = parseInt(config.duration);
|
||||
|
||||
// True duration
|
||||
mediaDuration = 0;
|
||||
// True duration
|
||||
var mediaDuration = 0;
|
||||
|
||||
// Only if duration available
|
||||
if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
|
||||
@ -3597,17 +3710,17 @@
|
||||
// Create new markup
|
||||
switch (plyr.type) {
|
||||
case 'video':
|
||||
plyr.media = document.createElement('video');
|
||||
plyr.media = createElement('video');
|
||||
break;
|
||||
|
||||
case 'audio':
|
||||
plyr.media = document.createElement('audio');
|
||||
plyr.media = createElement('audio');
|
||||
break;
|
||||
|
||||
case 'youtube':
|
||||
case 'vimeo':
|
||||
case 'soundcloud':
|
||||
plyr.media = document.createElement('div');
|
||||
plyr.media = createElement('div');
|
||||
plyr.embedId = source.sources[0].src;
|
||||
break;
|
||||
}
|
||||
@ -3998,10 +4111,10 @@
|
||||
|
||||
// Settings
|
||||
on(elements.buttons.settings, 'click', function(event) {
|
||||
var menu = this,
|
||||
toggle = event.target,
|
||||
target = document.getElementById(toggle.getAttribute('aria-controls')),
|
||||
show = (toggle.getAttribute('aria-expanded') === 'false');
|
||||
var menu = this;
|
||||
var toggle = event.target;
|
||||
var target = document.getElementById(toggle.getAttribute('aria-controls'));
|
||||
var show = (toggle.getAttribute('aria-expanded') === 'false');
|
||||
|
||||
// Nothing to show, bail
|
||||
if (!is.htmlElement(target)) {
|
||||
@ -4009,10 +4122,10 @@
|
||||
}
|
||||
|
||||
// Are we targetting a tab?
|
||||
var isTab = target.getAttribute('role') === 'tabpanel',
|
||||
targetWidth,
|
||||
targetHeight,
|
||||
container;
|
||||
var isTab = target.getAttribute('role') === 'tabpanel';
|
||||
var targetWidth;
|
||||
var targetHeight;
|
||||
var container;
|
||||
|
||||
// Hide all other tabs
|
||||
if (isTab) {
|
||||
@ -4344,7 +4457,7 @@
|
||||
}
|
||||
|
||||
// Wrap media
|
||||
plyr.container = wrap(media, document.createElement('div'));
|
||||
plyr.container = wrap(media, createElement('div'));
|
||||
|
||||
// Allow focus to be captured
|
||||
plyr.container.setAttribute('tabindex', 0);
|
||||
@ -4395,21 +4508,17 @@
|
||||
}
|
||||
|
||||
// Inject custom controls if not present
|
||||
var controlsMissing = !getElements(config.selectors.controls.wrapper).length;
|
||||
if (controlsMissing) {
|
||||
if (!is.htmlElement(getElement(config.selectors.controls.wrapper))) {
|
||||
// Inject custom controls
|
||||
injectControls();
|
||||
controlListeners();
|
||||
}
|
||||
|
||||
// Find the elements
|
||||
if (!findElements()) {
|
||||
// TODO: re-enable when custom HTML is restored
|
||||
/*if (!findElements()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If the controls are injected, re-bind listeners for controls
|
||||
if (controlsMissing) {
|
||||
controlListeners();
|
||||
}
|
||||
}*/
|
||||
|
||||
// Media element listeners
|
||||
mediaListeners();
|
||||
@ -4556,7 +4665,7 @@
|
||||
}
|
||||
|
||||
// Create placeholder (to prevent loading twice)
|
||||
var container = document.createElement('div');
|
||||
var container = createElement('div');
|
||||
container.setAttribute('hidden', '');
|
||||
if (is.string(id)) {
|
||||
container.setAttribute('id', id);
|
||||
@ -4584,8 +4693,8 @@
|
||||
isOldIE = (browser.isIE && browser.version <= 9),
|
||||
isIos = browser.isIos,
|
||||
isIphone = /iPhone|iPod/i.test(navigator.userAgent),
|
||||
audio = !!document.createElement('audio').canPlayType,
|
||||
video = !!document.createElement('video').canPlayType,
|
||||
audio = !!createElement('audio').canPlayType,
|
||||
video = !!createElement('video').canPlayType,
|
||||
basic, full;
|
||||
|
||||
switch (type) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user