Working on settings menu
This commit is contained in:
Sam
parent
28335ef3d8
commit
37840c3844
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;s>i;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;i>t;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;o>s;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+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(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);-1!==t;)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(h){-2146823252===h.number&&(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}});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;s>i;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;i>t;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;o>s;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+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(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);-1!==t;)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(h){-2146823252===h.number&&(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","speed-up","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"));
|
||||
@ -21,7 +21,7 @@
|
||||
captions: {
|
||||
defaultActive: true
|
||||
},
|
||||
controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen']
|
||||
controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen']
|
||||
});
|
||||
plyr.loadSprite('dist/demo.svg');
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
// Set a new source
|
||||
function newSource(type, init) {
|
||||
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
|
||||
if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
|
||||
if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.svg
vendored
2
dist/plyr.svg
vendored
@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-settings" viewBox="0 0 16 16"><path d="M15.135 6.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094A2 2 0 0 1 9.216.865C9.065.258 8.669 0 8.219 0h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C.26 6.935 0 7.33 0 7.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 4.5 KiB |
153
src/js/plyr.js
153
src/js/plyr.js
@ -41,12 +41,7 @@
|
||||
volumeStep: 1,
|
||||
defaultSpeed: 1.0,
|
||||
currentSpeed: 1.0,
|
||||
speeds: [
|
||||
0.5,
|
||||
1.0,
|
||||
1.5,
|
||||
2.0
|
||||
],
|
||||
speeds: [ 0.5, 1.0, 1.5, 2.0 ],
|
||||
duration: null,
|
||||
displayDuration: true,
|
||||
loadSprite: true,
|
||||
@ -84,7 +79,7 @@
|
||||
mute: '[data-plyr="mute"]',
|
||||
captions: '[data-plyr="captions"]',
|
||||
fullscreen: '[data-plyr="fullscreen"]',
|
||||
speedup: '[data-plyr="speed-up"]'
|
||||
settings: '[data-plyr="settings"]'
|
||||
},
|
||||
volume: {
|
||||
input: '[data-plyr="volume"]',
|
||||
@ -137,7 +132,7 @@
|
||||
enabled: true,
|
||||
key: 'plyr'
|
||||
},
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
|
||||
i18n: {
|
||||
restart: 'Restart',
|
||||
rewind: 'Rewind {seektime} secs',
|
||||
@ -153,7 +148,9 @@
|
||||
toggleCaptions: 'Toggle Captions',
|
||||
toggleFullscreen: 'Toggle Fullscreen',
|
||||
frameTitle: 'Player for {title}',
|
||||
speedup: 'Speed x{speed}'
|
||||
captions: 'Captions',
|
||||
settings: 'Settings',
|
||||
speed: 'Speed'
|
||||
},
|
||||
types: {
|
||||
embed: ['youtube', 'vimeo', 'soundcloud'],
|
||||
@ -183,7 +180,7 @@
|
||||
volume: null,
|
||||
captions: null,
|
||||
fullscreen: null,
|
||||
speedup: null
|
||||
speed: null
|
||||
},
|
||||
// Events to watch on HTML5 media elements
|
||||
events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'],
|
||||
@ -354,21 +351,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Unwrap an element
|
||||
// http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/
|
||||
/*function _unwrap(wrapper) {
|
||||
// Get the element's parent node
|
||||
var parent = wrapper.parentNode;
|
||||
|
||||
// Move all children out of the element
|
||||
while (wrapper.firstChild) {
|
||||
parent.insertBefore(wrapper.firstChild, wrapper);
|
||||
}
|
||||
|
||||
// Remove the empty element
|
||||
parent.removeChild(wrapper);
|
||||
}*/
|
||||
|
||||
// Remove an element
|
||||
function _remove(element) {
|
||||
if (!element) {
|
||||
@ -452,7 +434,7 @@
|
||||
}
|
||||
|
||||
// Toggle event listener
|
||||
function _toggleListener(element, events, callback, toggle, useCapture) {
|
||||
function _toggleListener(elements, events, callback, toggle, useCapture) {
|
||||
var eventList = events.split(' ');
|
||||
|
||||
// Whether the listener is a capturing listener or not
|
||||
@ -462,10 +444,10 @@
|
||||
}
|
||||
|
||||
// If a nodelist is passed, call itself on each node
|
||||
if (element instanceof NodeList) {
|
||||
for (var x = 0; x < element.length; x++) {
|
||||
if (element[x] instanceof Node) {
|
||||
_toggleListener(element[x], arguments[1], arguments[2], arguments[3]);
|
||||
if (elements instanceof NodeList) {
|
||||
for (var x = 0; x < elements.length; x++) {
|
||||
if (elements[x] instanceof Node) {
|
||||
_toggleListener(elements[x], arguments[1], arguments[2], arguments[3]);
|
||||
}
|
||||
}
|
||||
return;
|
||||
@ -473,7 +455,7 @@
|
||||
|
||||
// If a single node is passed, bind the event listener
|
||||
for (var i = 0; i < eventList.length; i++) {
|
||||
element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture);
|
||||
elements[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture);
|
||||
}
|
||||
}
|
||||
|
||||
@ -484,13 +466,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Unbind event
|
||||
/*function _off(element, events, callback, useCapture) {
|
||||
if (element) {
|
||||
_toggleListener(element, events, callback, false, useCapture);
|
||||
}
|
||||
}*/
|
||||
|
||||
// Trigger event
|
||||
function _event(element, type, bubbles, properties) {
|
||||
// Bail if no element
|
||||
@ -604,6 +579,9 @@
|
||||
},
|
||||
undefined: function(input) {
|
||||
return input !== null && typeof input === 'undefined';
|
||||
},
|
||||
empty: function(input) {
|
||||
return input === null || this.undefined(input) || ((this.string(input) || this.array(input) || this.nodeList(input)) && input.length === 0) || (this.object(input) && Object.keys(input).length === 0);
|
||||
}
|
||||
};
|
||||
|
||||
@ -813,22 +791,12 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Speed-up button
|
||||
if (_inArray(config.controls, 'speed-up')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="speed-up">',
|
||||
'<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.speedup + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
|
||||
// Progress
|
||||
if (_inArray(config.controls, 'progress')) {
|
||||
// Create progress
|
||||
html.push('<span class="plyr__progress">',
|
||||
'<label for="seek{id}" class="plyr__sr-only">Seek</label>',
|
||||
'<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
|
||||
'<label for="seek-{id}" class="plyr__sr-only">Seek</label>',
|
||||
'<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
|
||||
'<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
|
||||
'<progress class="plyr__progress--buffer" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.buffered,
|
||||
@ -878,8 +846,8 @@
|
||||
if (_inArray(config.controls, 'volume')) {
|
||||
html.push(
|
||||
'<span class="plyr__volume">',
|
||||
'<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
|
||||
'<input id="volume{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">',
|
||||
'<label for="volume-{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
|
||||
'<input id="volume-{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">',
|
||||
'<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
|
||||
'</span>'
|
||||
);
|
||||
@ -896,6 +864,34 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Settings button
|
||||
if (_inArray(config.controls, 'settings')) {
|
||||
|
||||
|
||||
html.push(
|
||||
'<div class="plyr__menu">',
|
||||
'<button type="button" id="plyr-settings-toggle-{id}" data-plyr="settings" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
|
||||
'<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
|
||||
'</button>',
|
||||
'<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<button type="button" data-plyr="slide-captions">',
|
||||
config.i18n.captions + ' <span class="plyr__menu__value">{lang}</span>',
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button" data-plyr="slide-speed">',
|
||||
config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>',
|
||||
'</button>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
// Toggle fullscreen button
|
||||
if (_inArray(config.controls, 'fullscreen')) {
|
||||
html.push(
|
||||
@ -1292,7 +1288,10 @@
|
||||
html = _replaceAll(html, '{seektime}', config.seekTime);
|
||||
|
||||
// Replace seek time instances
|
||||
html = _replaceAll(html, '{speed}', config.currentSpeed);
|
||||
html = _replaceAll(html, '{speed}', config.currentSpeed === 1 ? 'Normal' : config.currentSpeed.toFixed(1) + 'x');
|
||||
|
||||
// Replace current captions language
|
||||
html = _replaceAll(html, '{lang}', 'English');
|
||||
|
||||
// Replace all id references with random numbers
|
||||
html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000)));
|
||||
@ -1340,7 +1339,7 @@
|
||||
plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
|
||||
plyr.buttons.forward = _getElement(config.selectors.buttons.forward);
|
||||
plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
|
||||
plyr.buttons.speedup = _getElement(config.selectors.buttons.speedup);
|
||||
plyr.buttons.settings = _getElement(config.selectors.buttons.settings);
|
||||
|
||||
// Inputs
|
||||
plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
|
||||
@ -1982,13 +1981,14 @@
|
||||
}
|
||||
|
||||
// Speed-up
|
||||
function _speedup(speed) {
|
||||
function _speed(speed) {
|
||||
if (!_is.array(config.speeds)) {
|
||||
_warn('Invalid speeds format');
|
||||
return;
|
||||
}
|
||||
if (!_is.number(speed)) {
|
||||
var index = config.speeds.indexOf(config.currentSpeed);
|
||||
|
||||
if (index !== -1) {
|
||||
var nextIndex = index + 1;
|
||||
if (nextIndex >= config.speeds.length) {
|
||||
@ -2000,12 +2000,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Store current speed
|
||||
config.currentSpeed = speed;
|
||||
|
||||
// Set HTML5 speed
|
||||
plyr.media.playbackRate = speed;
|
||||
|
||||
_updateSpeedupTooltip(speed);
|
||||
|
||||
// Save speed to localStorage
|
||||
_updateStorage({speed: speed});
|
||||
}
|
||||
@ -2578,31 +2578,13 @@
|
||||
}
|
||||
|
||||
// Set playback speed
|
||||
function _setSpeedup(speed) {
|
||||
function _setSpeed(speed) {
|
||||
// Load speed from storage or default value
|
||||
if (_is.undefined(speed)) {
|
||||
speed = plyr.storage.speed || config.defaultSpeed;
|
||||
}
|
||||
|
||||
_speedup(speed);
|
||||
}
|
||||
|
||||
// Update hover tooltip for playback speed changed
|
||||
function _updateSpeedupTooltip(speed) {
|
||||
if (!isNaN(speed)) {
|
||||
speed = config.currentSpeed;
|
||||
}
|
||||
|
||||
var button = plyr.buttons.speedup;
|
||||
var template = config.i18n.speedup;
|
||||
|
||||
var elements= button.getElementsByClassName(config.classes.tooltip);
|
||||
if (elements.length === 0){
|
||||
return;
|
||||
}
|
||||
|
||||
var tooltip = elements[0];
|
||||
tooltip.innerHTML = _replaceAll(template, '{speed}', speed);
|
||||
_speed(speed);
|
||||
}
|
||||
|
||||
// Show the player controls in fullscreen mode
|
||||
@ -3068,7 +3050,7 @@
|
||||
_proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward);
|
||||
|
||||
// Speed-up
|
||||
_proxyListener(plyr.buttons.speedup, 'click', config.listeners.speedup, _speedup);
|
||||
_proxyListener(plyr.buttons.speed, 'click', config.listeners.speed, _speed);
|
||||
|
||||
// Seek
|
||||
_proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
|
||||
@ -3092,6 +3074,18 @@
|
||||
// Captions
|
||||
_on(plyr.buttons.captions, 'click', _toggleCaptions);
|
||||
|
||||
// Menus
|
||||
_on(plyr.controls.querySelectorAll('[aria-haspopup="true"]'), 'click', function() {
|
||||
var toggle = this,
|
||||
target = document.querySelector('#' + toggle.getAttribute('aria-controls')),
|
||||
show = (toggle.getAttribute('aria-expanded') === 'false');
|
||||
|
||||
console.log(target, toggle);
|
||||
|
||||
toggle.setAttribute('aria-expanded', show);
|
||||
target.setAttribute('aria-hidden', !show);
|
||||
});
|
||||
|
||||
// Seek tooltip
|
||||
_on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
|
||||
|
||||
@ -3456,7 +3450,7 @@
|
||||
_updateVolume();
|
||||
|
||||
// Set playback speed
|
||||
_setSpeedup();
|
||||
_setSpeed();
|
||||
|
||||
// Reset time display
|
||||
_timeUpdate();
|
||||
@ -3488,6 +3482,7 @@
|
||||
source: _source,
|
||||
poster: _updatePoster,
|
||||
setVolume: _setVolume,
|
||||
setSpeed: _setSpeed,
|
||||
togglePlay: _togglePlay,
|
||||
toggleMute: _toggleMute,
|
||||
toggleCaptions: _toggleCaptions,
|
||||
|
||||
@ -11,6 +11,16 @@
|
||||
@keyframes plyr-progress {
|
||||
to { background-position: @plyr-progress-loading-size 0; }
|
||||
}
|
||||
@keyframes plyr-popup {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: .5;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
// -------------------------------
|
||||
@ -40,6 +50,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ARIA
|
||||
[aria-hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
@ -268,7 +283,8 @@
|
||||
// Spacing
|
||||
> button,
|
||||
.plyr__progress,
|
||||
.plyr__time {
|
||||
.plyr__time,
|
||||
.plyr__menu {
|
||||
margin-left: (@plyr-control-spacing / 2);
|
||||
|
||||
&:first-child {
|
||||
@ -320,9 +336,16 @@
|
||||
@media (min-width: @plyr-bp-screen-sm) {
|
||||
> button,
|
||||
.plyr__progress,
|
||||
.plyr__time {
|
||||
.plyr__time,
|
||||
.plyr__menu {
|
||||
margin-left: @plyr-control-spacing;
|
||||
}
|
||||
|
||||
> button + button,
|
||||
.plyr__menu + button,
|
||||
> button + .plyr__menu {
|
||||
margin-left: (@plyr-control-spacing / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Hide controls
|
||||
@ -338,7 +361,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
|
||||
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
|
||||
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: @plyr-video-control-color;
|
||||
@ -442,6 +465,78 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Menus
|
||||
// --------------------------------------------------------------
|
||||
.plyr__menu {
|
||||
position: relative;
|
||||
|
||||
// Hide tooltip
|
||||
button[aria-expanded='true'] .plyr__tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// The actual menu container
|
||||
&__container {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: -5px;
|
||||
margin-bottom: 10px;
|
||||
animation: plyr-popup .2s ease;
|
||||
background: fade(@plyr-video-controls-bg, 90%);
|
||||
box-shadow: 0 1px 0 fade(#000, 20%);
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
color: @plyr-video-control-color;
|
||||
font-size: @plyr-font-size-small;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px 30px 10px 12px;
|
||||
color: @plyr-video-control-color;
|
||||
font-weight: 600;
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 5px;
|
||||
border: 5px solid transparent;
|
||||
border-left-color: fade(@plyr-video-control-color, 80%);
|
||||
}
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__value {
|
||||
margin-left: auto;
|
||||
padding-left: 25px;
|
||||
font-weight: 400;
|
||||
color: fade(@plyr-video-control-color, 80%);
|
||||
}
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 15px;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 6px solid transparent;
|
||||
border-top-color: fade(@plyr-video-controls-bg, 90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
// --------------------------------------------------------------
|
||||
.plyr__tooltip {
|
||||
@ -492,7 +587,7 @@
|
||||
}
|
||||
|
||||
// First tooltip
|
||||
.plyr__controls button:first-child .plyr__tooltip {
|
||||
.plyr__controls > button:first-child .plyr__tooltip {
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform-origin: 0 100%;
|
||||
@ -503,7 +598,7 @@
|
||||
}
|
||||
|
||||
// Last tooltip
|
||||
.plyr__controls button:last-child .plyr__tooltip {
|
||||
.plyr__controls > button:last-child .plyr__tooltip {
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform-origin: 100% 100%;
|
||||
@ -515,8 +610,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__controls button:first-child,
|
||||
.plyr__controls button:last-child {
|
||||
.plyr__controls > button:first-child,
|
||||
.plyr__controls > button:last-child {
|
||||
&:hover .plyr__tooltip,
|
||||
&.tab-focus:focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
@plyr-font-size-base: 16px;
|
||||
|
||||
// Captions
|
||||
@plyr-captions-bg: fade(#000, 70%);
|
||||
@plyr-captions-bg: fade(#343f4a, 85%);
|
||||
@plyr-captions-color: #fff;
|
||||
@plyr-font-size-captions-base: @plyr-font-size-base;
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@ -27,7 +27,7 @@
|
||||
@plyr-control-icon-size: 18px;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-control-padding: (@plyr-control-spacing * .7);
|
||||
@plyr-video-controls-bg: #000;
|
||||
@plyr-video-controls-bg: #343f4a;
|
||||
@plyr-video-control-color: #fff;
|
||||
@plyr-video-control-color-hover: #fff;
|
||||
@plyr-video-control-bg-hover: @plyr-color-main;
|
||||
@ -38,7 +38,7 @@
|
||||
@plyr-audio-control-bg-hover: @plyr-color-main;
|
||||
|
||||
// Tooltips
|
||||
@plyr-tooltip-bg: fade(#000, 70%);
|
||||
@plyr-tooltip-bg: fade(#343f4a, 85%);
|
||||
@plyr-tooltip-color: #fff;
|
||||
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
|
||||
@plyr-tooltip-arrow-size: 4px;
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
// Progress
|
||||
@plyr-progress-loading-size: 25px;
|
||||
@plyr-progress-loading-bg: fade(#000, 15%);
|
||||
@plyr-progress-loading-bg: fade(#343f4a, 20%);
|
||||
@plyr-video-progress-bg: fade(#fff, 25%);
|
||||
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
|
||||
@plyr-audio-progress-bg: fade(#C6D6DB, 66%);
|
||||
@ -58,7 +58,7 @@
|
||||
@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
|
||||
@plyr-range-thumb-bg: #fff;
|
||||
@plyr-range-thumb-border: 2px solid transparent;
|
||||
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#000, 15%);
|
||||
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
|
||||
@plyr-range-thumb-active-border-color: #fff;
|
||||
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
|
||||
@plyr-range-thumb-active-scale: 1.25;
|
||||
|
||||
12
src/sprite/plyr-settings.svg
Normal file
12
src/sprite/plyr-settings.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
|
||||
<path d="M15.135,6.784c-1.303-0.326-1.921-1.818-1.23-2.969c0.322-0.536,0.225-0.998-0.094-1.316l-0.31-0.31
|
||||
c-0.318-0.318-0.78-0.415-1.316-0.094c-1.152,0.691-2.644,0.073-2.969-1.23C9.065,0.258,8.669,0,8.219,0H7.781
|
||||
c-0.45,0-0.845,0.258-0.997,0.865c-0.326,1.303-1.818,1.921-2.969,1.23C3.279,1.773,2.816,1.87,2.498,2.188l-0.31,0.31
|
||||
C1.87,2.816,1.773,3.279,2.095,3.815c0.691,1.152,0.073,2.644-1.23,2.969C0.26,6.935,0,7.33,0,7.781v0.438
|
||||
c0,0.45,0.258,0.845,0.865,0.997c1.303,0.326,1.921,1.818,1.23,2.969c-0.322,0.536-0.225,0.998,0.094,1.316l0.31,0.31
|
||||
c0.319,0.319,0.782,0.415,1.316,0.094c1.152-0.691,2.644-0.073,2.969,1.23C6.935,15.742,7.331,16,7.781,16h0.438
|
||||
c0.45,0,0.845-0.258,0.997-0.865c0.326-1.303,1.818-1.921,2.969-1.23c0.535,0.321,0.997,0.225,1.316-0.094l0.31-0.31
|
||||
c0.318-0.318,0.415-0.781,0.094-1.316c-0.691-1.152-0.073-2.644,1.23-2.969C15.742,9.065,16,8.669,16,8.219V7.781
|
||||
C16,7.33,15.74,6.935,15.135,6.784z M8,11c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S9.657,11,8,11z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
x
Reference in New Issue
Block a user