ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
Sam Potts 2016-04-25 19:06:55 +10:00
parent 1ddb4eb60c
commit ffebc7b077
21 changed files with 1286 additions and 961 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ node_modules
aws.json aws.json
docs/index.dev.html docs/index.dev.html
*.mp4 *.mp4
index-dev.html

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

3
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/sprite.svg vendored
View File

@ -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="icon-captions-off" viewBox="0 0 18 18"><title>Captions Off</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><title>Captions On</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><title>Enter Fullscreen</title><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><title>Exit Fullscreen</title><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><title>Fast Forward</title><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><title>Muted</title><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>Pause</title><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><title>Play</title><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.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.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 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.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>Rewind</title><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><title>Volume</title><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></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="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 16 16"><path d="M7 6.4L0 1v14l7-5.4V15l9-7-9-7"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 16 16"><path d="M5 1H2c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM14 1h-3c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="icon-play" viewBox="0 0 16 16"><path d="M13.6 7.2l-10-7C2.9-.3 2 .2 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.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.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 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.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 16 16"><path d="M9 1L0 8l9 7V9.6l7 5.4V1L9 6.4"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol><symbol id="ui-16px-1_settings-gear-65" viewBox="0 0 16 16"><path d="M15.135 6.784c-1.303-.326-1.92-1.818-1.23-2.97.322-.535.225-.997-.094-1.315l-.31-.31c-.317-.32-.78-.416-1.315-.095-1.152.69-2.644.073-2.97-1.23C9.066.258 8.67 0 8.22 0h-.44c-.45 0-.844.258-.996.865-.326 1.303-1.818 1.92-2.97 1.23-.535-.322-.998-.225-1.316.093l-.31.31c-.318.318-.415.78-.093 1.317.69 1.152.073 2.644-1.23 2.97C.26 6.934 0 7.33 0 7.78v.44c0 .45.258.844.865.996 1.303.326 1.92 1.818 1.23 2.97-.322.535-.225.997.094 1.315l.31.31c.318.32.78.416 1.315.095 1.152-.69 2.644-.073 2.97 1.23.15.607.546.865.996.865h.44c.45 0 .844-.258.996-.865.326-1.303 1.818-1.92 2.97-1.23.534.32.996.225 1.315-.094l.31-.31c.32-.317.416-.78.095-1.315-.69-1.152-.073-2.644 1.23-2.97.607-.15.865-.546.865-.996v-.44c0-.45-.26-.845-.865-.996zM8 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></symbol><symbol id="ui-16px-2_enlarge-57" viewBox="0 0 16 16"><path d="M2 2h4V0H0v6h2M10 2h4v4h2V0h-6M14 14h-4v2h6v-6h-2M6 14H2v-4H0v6h6M4 6h8v4H4z"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

2
docs/dist/docs.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.js vendored
View File

@ -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 n,s=arguments.length;for(n=0;s>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",s=e.Element[n],i=Object,r=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>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 o.call(e,t)},l=function(e){for(var t=r.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],s=0,i=n.length;i>s;s++)this.push(n[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],p=function(){return new l(this)};if(a[n]=Error[n],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,n=0,s=t.length,i=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),i=!0);while(++n<s);i&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,s=0,i=n.length,r=!1;do for(e=n[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),r=!0,t=c(this,e);while(++s<i);r&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),s=n?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},i.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{i.defineProperty(s,t,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,i.defineProperty(s,t,d))}}else i[n].__defineGetter__&&s.__defineGetter__(t,p)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(n?" "+t:"")}}function t(){var t=this,s=t.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(s){case"video":i.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.0/example_captions_en.vtt","default":!0}]});break;case"audio":i.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",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"youtube":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case"vimeo":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}for(var r=n.length-1;r>=0;r--)e(n[r].parentElement,"active",!1);e((event.target||event.srcElement).parentElement,"active",!0)}for(var n=document.querySelectorAll("[data-source]"),s=n.length-1;s>=0;s--)n[s].addEventListener("click",t)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,s,i,r,o){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,r=t.createElement(n),o=t.getElementsByTagName(n)[0],r.async=1,r.src=s,o.parentNode.insertBefore(r,o)}(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,n=arguments.length;for(i=0;n>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",n=e.Element[i],s=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;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=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);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,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.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:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",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:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

1
docs/dist/docs.svg vendored
View File

@ -1 +0,0 @@
<?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="icon-github" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 .2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V14c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"/></symbol><symbol id="icon-twitter" viewBox="0 0 16 16"><title>Twitter</title><path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"/></symbol><symbol id="icon-vimeo" viewBox="0 0 16 16"><path d="M16 4.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C4 9.9 3.4 5 2 5c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z"/></symbol><symbol id="icon-youtube" viewBox="0 0 16 16"><path d="M15.8 4.8c-.2-1.3-.8-2.2-2.2-2.4C11.4 2 8 2 8 2s-3.4 0-5.6.4C1 2.6.3 3.5.2 4.8 0 6.1 0 8 0 8s0 1.9.2 3.2c.2 1.3.8 2.2 2.2 2.4C4.6 14 8 14 8 14s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4C16 9.9 16 8 16 8s0-1.9-.2-3.2zM6 11V5l5 3-5 3z"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 0 B

7
docs/index.html
View File

@ -118,10 +118,11 @@
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="../dist/plyr.js"></script> <script src="../dist/plyr.js"></script>
<!-- Shr core script -->
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="dist/docs.js"></script> <script src="dist/docs.js"></script>
<!-- Shr core script -->
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
<script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
</body> </body>
</html> </html>

9
docs/src/js/docs.js
View File

@ -2,7 +2,7 @@
// Docs example // Docs example
// ========================================================================== // ==========================================================================
/*global plyr, shr*/ /*global plyr*/
// Setup the player // Setup the player
plyr.setup('.js-media-player', { plyr.setup('.js-media-player', {
@ -17,13 +17,6 @@ plyr.setup('.js-media-player', {
} }
}); });
// Setup shr
shr.setup({
count: {
classname: 'btn__count'
}
});
// General functions // General functions
(function() { (function() {
var buttons = document.querySelectorAll('[data-source]'); var buttons = document.querySelectorAll('[data-source]');

6
docs/src/less/components/base.less
View File

@ -16,15 +16,9 @@
// Base // Base
html { html {
height: 100%; height: 100%;
font-size: 100%;
background: linear-gradient(#fff, @body-background) fixed; background: linear-gradient(#fff, @body-background) fixed;
} }
body { body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
text-align: center;
color: @gray;
.font-smoothing(on);
padding: 0 (@padding-base / 2); padding: 0 (@padding-base / 2);
} }

1
docs/src/less/components/buttons.less
View File

@ -92,7 +92,6 @@ nav {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-radius: @border-radius-base; border-radius: @border-radius-base;
font-weight: 600;
user-select: none; user-select: none;
} }

16
docs/src/less/components/examples.less
View File

@ -9,7 +9,6 @@ section {
video, video,
.plyr__video-embed { .plyr__video-embed {
border-radius: @border-radius-base;
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
} }
@ -20,14 +19,8 @@ video,
// Example players // Example players
.plyr { .plyr {
margin: 0 auto; margin: 0 auto;
border-radius: @border-radius-base;
&__controls {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
video,
.plyr__video-embed {
border-radius: @border-radius-base @border-radius-base 0 0;
}
&--fullscreen, &--fullscreen,
&--fullscreen-active { &--fullscreen-active {
max-width: none; max-width: none;
@ -45,13 +38,18 @@ video,
.plyr--audio { .plyr--audio {
max-width: @example-width-audio; max-width: @example-width-audio;
.plyr__controls { /*.plyr__controls {
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
.plyr__progress { .plyr__progress {
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
progress,
[type='range'] {
border-radius: @border-radius-base @border-radius-base 0 0;
overflow: hidden; overflow: hidden;
} }
}*/
} }
// Style full supported player // Style full supported player

13
docs/src/less/components/type.less
View File

@ -2,6 +2,18 @@
// Typography // Typography
// ========================================================================== // ==========================================================================
// Base
html {
font-size: 100%;
}
body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
text-align: center;
color: @gray;
font-weight: @font-weight-base;
}
// Headings // Headings
h1, h1,
h2 { h2 {
@ -10,6 +22,7 @@ h2 {
margin: 0 0 (@padding-base / 2); margin: 0 0 (@padding-base / 2);
line-height: 1.2; line-height: 1.2;
.font-smoothing(); .font-smoothing();
font-weight: @font-weight-bold;
} }
h1 { h1 {
.font-size(@font-size-h1); .font-size(@font-size-h1);

8
docs/src/less/lib/fontface.less
View File

@ -2,17 +2,17 @@
// Fonts // Fonts
// ========================================================================== // ==========================================================================
@font-face { /*@font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
font-style: normal; font-style: normal;
font-weight: 400; font-weight: @font-weight-base;
} }
@font-face { @font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
font-style: normal; font-style: normal;
font-weight: 600; font-weight: @font-weight-bold;
} }*/

2
docs/src/less/variables.less
View File

@ -22,6 +22,8 @@
@font-size-base: 16; @font-size-base: 16;
@font-size-small: 14; @font-size-small: 14;
@font-size-h1: 64; @font-size-h1: 64;
@font-weight-base: 500;
@font-weight-bold: 700;
// Elements // Elements
@link-color: @blue; @link-color: @blue;

1358
src/js/plyr.js
View File

File diff suppressed because it is too large Load Diff

726
src/less/plyr.less
View File

@ -7,129 +7,104 @@
// ------------------------------- // -------------------------------
// Colors // Colors
@blue: #3498DB; @plyr-color-main: #3498DB;
@gray-dark: #343F4A;
@gray: #565D64;
@gray-light: #6B7D86;
@gray-lighter: #CBD0D3;
@off-white: #D6DADD;
// Font sizes // Font sizes
@font-size-small: 14px; @plyr-font-size-small: 14px;
@font-size-base: 16px; @plyr-font-size-base: 16px;
// Captions // Captions
@font-size-captions-base: ceil(@font-size-base * 1.25); @plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
@font-size-captions-medium: ceil(@font-size-base * 1.5); @plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@font-size-captions-large: (@font-size-base * 2); @plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls // Controls
@control-spacing: 10px; @plyr-controls-bg: #000;
@controls-bg: #fff; @plyr-control-color: #fff;
@control-bg-hover: @blue; @plyr-control-color-hover: #fff;
.contrast-control-color(@controls-bg); @plyr-control-spacing: 10px;
.contrast-control-color-hover(@control-bg-hover); @plyr-control-bg-hover: @plyr-color-main;
//.contrast-control-color(@plyr-controls-bg);
//.contrast-control-color-hover(@plyr-control-bg-hover);
// Tooltips // Tooltips
@tooltip-bg: @controls-bg; @plyr-tooltip-bg: @plyr-controls-bg;
@tooltip-border-color: fade(@gray-dark, 10%); @plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
@tooltip-border-width: 1px; @plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color; @plyr-tooltip-border-width: 1px;
@tooltip-color: @control-color; @plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
@tooltip-padding: @control-spacing; @plyr-tooltip-color: @plyr-control-color;
@tooltip-arrow-size: 6px; @plyr-tooltip-padding: (@plyr-control-spacing / 2);
@tooltip-radius: 3px; @plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
// Progress // Progress
@progress-bg: fade(@gray, 20%); @plyr-progress-bg: fade(@plyr-control-color, 25%);
@progress-playing-bg: @blue; @plyr-progress-playing-bg: @plyr-color-main;
@progress-buffered-bg: fade(@gray, 25%); @plyr-progress-buffered-bg: fade(@plyr-control-color, 25%);
@progress-loading-size: 40px; @plyr-progress-loading-size: 25px;
@progress-loading-bg: rgba(0,0,0, .15); @plyr-progress-loading-bg: fade(#000, 15%);
// Volume // Range sliders
@volume-track-height: 6px; @range-track-height: 8px;
@volume-track-bg: darken(@controls-bg, 10%); @range-track-bg: fade(#fff, 25%);
@volume-thumb-height: (@volume-track-height * 2); @range-thumb-height: floor(@range-track-height * 2);
@volume-thumb-width: (@volume-track-height * 2); @range-thumb-width: floor(@range-track-height * 2);
@volume-thumb-bg: @control-color; @range-thumb-bg: #fff;
@volume-thumb-bg-focus: @control-bg-hover; @range-thumb-border: 2px solid transparent;
@range-thumb-active-border-color: #fff;
@range-thumb-active-bg: @plyr-control-bg-hover;
@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%);
// Breakpoints // Breakpoints
@bp-control-split: 560px; // When controls split into left/right @plyr-bp-control-split: 560px; // When controls split into left/right
@bp-captions-large: 768px; // When captions jump to the larger font size @plyr-bp-captions-large: 768px; // When captions jump to the larger font size
// Animation // Animation
// --------------------------------------- // ---------------------------------------
@keyframes progress { @keyframes plyr-progress {
to { background-position: @progress-loading-size 0; } to { background-position: @plyr-progress-loading-size 0; }
} }
// Mixins // Mixins
// ------------------------------- // -------------------------------
// Contrast // Contrast
.contrast-control-color(@color: "") when (lightness(@color) >= 65%) { /*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@control-color: @gray-light; @plyr-control-color: @plyr-gray-light;
} }
.contrast-control-color(@color: "") when (lightness(@color) < 65%) { .contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@control-color: @gray-lighter; @plyr-control-color: @plyr-gray-lighter;
} }
.contrast-control-color-hover(@color: "") when (lightness(@color) >= 65%) { .contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@control-color-hover: @gray; @plyr-control-color-hover: @plyr-gray;
}
.contrast-control-color-hover(@color: "") when (lightness(@color) < 65%) {
@control-color-hover: #fff;
}
// Font smoothing
.font-smoothing(@mode: on) when (@mode = on) {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.font-smoothing(@mode: on) when (@mode = off) {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
zoom: 1;
&:before,
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
.tab-focus() {
outline: 1px dotted fade(@gray-dark, 80%);
outline-offset: 3px;
} }
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@plyr-control-color-hover: #fff;
}*/
// <input type="range"> styling // <input type="range"> styling
.volume-thumb() { .range-track() {
height: @volume-thumb-height; height: @range-track-height;
width: @volume-thumb-width; background: @range-track-bg;
background: @volume-thumb-bg;
border: 0; border: 0;
border-radius: (@range-track-height / 2);
user-select: none;
}
.range-thumb() {
position: relative;
height: @range-thumb-height;
width: @range-thumb-width;
background: @range-thumb-bg;
border: @range-thumb-border;
border-radius: 100%; border-radius: 100%;
transition: background .3s ease; transition: background .2s ease, border .2s ease, transform .2s ease;
cursor: ew-resize; box-shadow: @range-thumb-shadow;
box-sizing: border-box;
} }
.volume-track() { .range-thumb-active() {
height: @volume-track-height; background: @range-thumb-active-bg;
background: @volume-track-bg; border-color: @range-thumb-active-border-color;
border: 0; transform: scale(1.25);
border-radius: (@volume-track-height / 2);
}
.seek-thumb() {
background: transparent;
border: 0;
width: (@control-spacing * 4);
height: @control-spacing;
transform: translateX(-50%);
}
.seek-track() {
background: none;
border: 0;
} }
// Styles // Styles
@ -139,6 +114,7 @@
position: relative; position: relative;
max-width: 100%; max-width: 100%;
min-width: 290px; min-width: 290px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything // border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/ // http://paulirish.com/2012/box-sizing-border-box-ftw/
@ -168,12 +144,16 @@
// For video // For video
&__video-wrapper { &__video-wrapper {
position: relative; position: relative;
background: #000;
border-radius: inherit;
//overflow: hidden;
} }
video, video,
audio { audio {
width: 100%; width: 100%;
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
border-radius: inherit;
} }
// Container for embeds // Container for embeds
@ -181,7 +161,7 @@
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
height: 0; height: 0;
overflow: hidden; overflow: hidden;
background: #000; border-radius: inherit;
iframe { iframe {
position: absolute; position: absolute;
@ -199,79 +179,215 @@
padding-bottom: 200%; padding-bottom: 200%;
transform: translateY(-35.95%); transform: translateY(-35.95%);
} }
// To allow mouse events to be captured if full support
&.plyr iframe {
pointer-events: none;
}
} }
// Captions // Captions
// Hide default captions
video::-webkit-media-text-track-container {
display: none;
}
&__captions { &__captions {
display: none; display: none;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3); padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8);
color: #fff; color: #fff;
font-size: @font-size-captions-base; font-size: @plyr-font-size-captions-base;
text-align: center; text-align: center;
.font-smoothing(); font-weight: 400;
span { span {
border-radius: 2px; border-radius: 2px;
padding: 3px 10px; padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
background: rgba(0,0,0, .9); background: fade(#000, 85%);
} }
span:empty { span:empty {
display: none; display: none;
} }
@media (min-width: @bp-captions-large) { @media (min-width: @plyr-bp-captions-large) {
font-size: @font-size-captions-medium; font-size: @plyr-font-size-captions-medium;
} }
} }
&--captions-active &__captions { &--captions-active &__captions {
display: block; display: block;
} }
&--fullscreen-active &__captions { &--fullscreen-active &__captions {
font-size: @font-size-captions-large; font-size: @plyr-font-size-captions-large;
}
// Common
// Specificity is for bootstrap compatibility
input[type='range'] {
display: block;
height: @range-thumb-height;
width: 100%;
margin: 0;
padding: 0;
vertical-align: middle;
appearance: none;
cursor: pointer;
border: none;
background: transparent;
// Webkit
&::-webkit-slider-runnable-track {
.range-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -((@range-thumb-height - @range-track-height) / 2);
.range-thumb();
}
// Mozilla
&::-moz-range-track {
.range-track();
}
&::-moz-range-thumb {
.range-thumb();
}
&::-moz-focus-outer {
border: 0;
}
// Microsoft
&::-ms-track {
height: @range-track-height;
background: transparent;
border: 0;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.range-track();
}
&::-ms-thumb {
.range-thumb();
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
}
&::-ms-tooltip {
display: none;
}
// Focus styles
&:focus {
outline: 0;
}
&::-moz-focus-outer {
border: 0;
}
&.tab-focus:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
outline-offset: 3px;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
.range-thumb-active();
}
&::-moz-range-thumb {
.range-thumb-active();
}
&::-ms-thumb {
.range-thumb-active();
}
}
}
// Large play button
&__play-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: @plyr-control-spacing;
background: @plyr-control-bg-hover;
border: 4px solid @plyr-control-color;
border-radius: 100%;
color: @plyr-control-color;
svg {
position: relative;
left: 2px;
width: 20px;
height: 20px;
display: block;
fill: currentColor;
}
&:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
}
}
// Shared
&__controls,
&__play-large {
transition: visibility .3s ease, opacity .3s ease;
}
&--playing &__play-large {
visibility: hidden;
opacity: 0;
} }
// Playback controls // Playback controls
&__controls { &__controls {
.clearfix(); position: absolute;
.font-smoothing(); left: 0;
position: relative; right: 0;
padding: @control-spacing; bottom: 0;
background: @controls-bg; display: flex;
align-items: center;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 25%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
box-shadow: 0 1px 1px fade(@gray-dark, 20%);
// Layout // Spacing
&--right { > button,
display: block; .plyr__progress,
margin: @control-spacing auto 0; .plyr__time,
.plyr__volume[type="range"] {
margin-left: @plyr-control-spacing;
&::first-child {
margin-left: 0;
} }
@media (min-width: @bp-control-split) {
&--left {
float: left;
}
&--right {
float: right;
margin-top: 0;
} }
[data-plyr="mute"] {
margin-left: 0;
} }
// Buttons // Buttons
button { button {
position: relative;
display: inline-block; display: inline-block;
flex-shrink: 0;
vertical-align: middle; vertical-align: middle;
margin: 0 2px; padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
padding: (@control-spacing / 2) @control-spacing;
overflow: hidden;
border: 0; border: 0;
background: transparent; background: transparent;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
color: @control-color; color: @plyr-control-color;
transition: background .3s ease, color .3s ease, opacity .3s ease; transition: background .3s ease, color .3s ease, opacity .3s ease;
svg { svg {
@ -279,14 +395,13 @@
height: 18px; height: 18px;
display: block; display: block;
fill: currentColor; fill: currentColor;
transition: fill .3s ease;
} }
// Hover and tab focus // Hover and tab focus
&.tab-focus:focus, &.tab-focus:focus,
&:hover { &:hover {
background: @control-bg-hover; background: @plyr-control-bg-hover;
color: @control-color-hover; color: @plyr-control-color-hover;
} }
// Default focus // Default focus
&:focus { &:focus {
@ -300,53 +415,30 @@
.icon--captions-on { .icon--captions-on {
display: none; display: none;
} }
// plyr time
.plyr__time {
display: inline-block;
vertical-align: middle;
margin-left: @control-spacing;
color: @control-color;
font-weight: 600;
font-size: @font-size-small;
}
// Media duration hidden on small screens
.plyr__time + .plyr__time {
display: none;
@media (min-width: @bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: '\2044';
margin-right: @control-spacing;
}
}
} }
// Tooltips // Tooltips
&__tooltip { &__tooltip {
visibility: hidden;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
bottom: 100%; bottom: 100%;
margin-bottom: @tooltip-padding; margin-bottom: (@plyr-tooltip-padding * 2);
padding: @tooltip-padding (@tooltip-padding * 1.5); padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
pointer-events: none;
opacity: 0; opacity: 0;
background: @tooltip-bg; background: @plyr-tooltip-bg;
box-shadow: @tooltip-shadow; box-shadow: @plyr-tooltip-shadow;
border-radius: @tooltip-radius; border-radius: @plyr-tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
transform: translate(-50%, (@tooltip-padding * 3)) scale(.8); color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
line-height: 1.3;
transform: translate(-50%, 10px) scale(.8);
transform-origin: 50% 100%; transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease; transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
// Arrows // Arrows
&::after, &::after,
@ -361,24 +453,26 @@
} }
// The border triangle // The border triangle
&::after { &::after {
@border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1)); @plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
bottom: -(@border-arrow-size + @tooltip-border-width); bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
border-right: @border-arrow-size solid transparent; border-right: @plyr-border-arrow-size solid transparent;
border-top: @border-arrow-size solid @tooltip-border-color; border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
border-left: @border-arrow-size solid transparent; border-left: @plyr-border-arrow-size solid transparent;
z-index: 1; z-index: 1;
} }
// The background triangle // The background triangle
&::before { &::before {
bottom: -@tooltip-arrow-size; bottom: -@plyr-tooltip-arrow-size;
border-right: @tooltip-arrow-size solid transparent; border-right: @plyr-tooltip-arrow-size solid transparent;
border-top: @tooltip-arrow-size solid @tooltip-bg; border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
border-left: @tooltip-arrow-size solid transparent; border-left: @plyr-tooltip-arrow-size solid transparent;
z-index: 2; z-index: 2;
} }
} }
button:hover .plyr__tooltip, button:hover .plyr__tooltip,
button.tab-focus:focus .plyr__tooltip { button.tab-focus:focus .plyr__tooltip,
&__tooltip--visible {
visibility: visible;
opacity: 1; opacity: 1;
transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1);
} }
@ -386,122 +480,116 @@
z-index: 3; z-index: 3;
} }
// Common range styles
input[type='range'].tab-focus:focus {
.tab-focus();
}
// Playback progress // Playback progress
// <progress> element // <progress> element
&__progress { &__progress {
position: absolute; position: relative;
bottom: 100%; flex: 1;
left: 0;
right: 0;
width: 100%;
height: @control-spacing;
background: @progress-bg;
&--buffer[value], input[type="range"] {
&--played[value], position: relative;
&--seek[type='range'] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: @control-spacing;
margin: 0;
padding: 0;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: transparent;
}
&--buffer[value],
&--played[value] {
&::-webkit-progress-bar {
background: transparent;
}
// Inherit from currentColor;
&::-webkit-progress-value {
background: currentColor;
}
&::-moz-progress-bar {
background: currentColor;
}
}
&--played[value] {
z-index: 2; z-index: 2;
color: @progress-playing-bg;
}
&--buffer[value] {
color: @progress-buffered-bg;
}
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&--seek[type='range'] {
z-index: 4;
cursor: pointer;
outline: 0;
// Webkit
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
.seek-track(); background: transparent;
} }
&::-webkit-slider-thumb {
-webkit-appearance: none;
.seek-thumb();
}
// Mozilla
&::-moz-range-track { &::-moz-range-track {
.seek-track(); background: transparent;
}
&::-moz-range-thumb {
-moz-appearance: none;
.seek-thumb();
}
// Microsoft
&::-ms-track {
color: transparent;
.seek-track();
} }
&::-ms-fill-lower, &::-ms-fill-lower,
&::-ms-fill-upper { &::-ms-fill-upper {
.seek-track(); background: transparent;
} }
&::-ms-thumb {
.seek-thumb();
} }
&:focus { &--buffer[value],
outline: 0; &--played[value] {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: @range-track-height;
margin: -(@range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
appearance: none;
border: none;
border-radius: 100px;
&::-webkit-progress-bar {
background: transparent;
} }
&::-moz-focus-outer { &::-webkit-progress-value {
border: 0; background: currentColor;
border-radius: 100px;
min-width: @range-track-height;
} }
&::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: @range-track-height;
}
&::-ms-fill {
border-radius: 100px;
}
}
&--played[value] {
z-index: 1;
color: @plyr-progress-playing-bg;
background: transparent;
&::-webkit-progress-value {
background: currentColor;
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&::-moz-progress-bar {
background: currentColor;
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&::-ms-fill {
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&--buffer[value] {
color: @plyr-progress-buffered-bg;
background: @range-track-bg;
&::-webkit-progress-value {
transition: width .2s ease;
}
&::-moz-progress-bar {
transition: width .2s ease;
}
&::-ms-fill {
transition: width .2s ease;
}
}
// Seek tooltip to show time
.plyr__tooltip {
left: 0;
} }
} }
// Loading state // Loading state
&--loading .plyr__progress--buffer { &--loading .plyr__progress--buffer {
animation: progress 1s linear infinite; animation: plyr-progress 1s linear infinite;
background-size: @progress-loading-size @progress-loading-size; background-size: @plyr-progress-loading-size @plyr-progress-loading-size;
background-repeat: repeat-x; background-repeat: repeat-x;
background-color: @progress-buffered-bg; background-color: @plyr-progress-buffered-bg;
background-image: linear-gradient( background-image: linear-gradient(
-45deg, -45deg,
@progress-loading-bg 25%, @plyr-progress-loading-bg 25%,
transparent 25%, transparent 25%,
transparent 50%, transparent 50%,
@progress-loading-bg 50%, @plyr-progress-loading-bg 50%,
@progress-loading-bg 75%, @plyr-progress-loading-bg 75%,
transparent 75%, transparent 75%,
transparent); transparent);
color: transparent; color: transparent;
@ -516,68 +604,35 @@
display: inline-block; display: inline-block;
} }
// plyr time
&__time {
display: inline-block;
vertical-align: middle;
color: @plyr-control-color;
font-size: @plyr-font-size-small;
line-height: .95;
}
// Media duration hidden on small screens
&__time + &__time {
display: none;
@media (min-width: @plyr-bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: '\2044';
margin-right: @plyr-control-spacing;
}
}
// Volume control // Volume control
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
&__volume[type='range'] { &__volume[type='range'] {
display: inline-block; max-width: 100px;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
width: 100px;
margin: 0 @control-spacing 0 0;
padding: 0;
cursor: pointer;
background: transparent;
border: none;
// Webkit
&::-webkit-slider-runnable-track {
.volume-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
.volume-thumb();
}
// Mozilla
&::-moz-range-track {
.volume-track();
}
&::-moz-range-thumb {
.volume-thumb();
}
// Microsoft
&::-ms-track {
height: @volume-track-height;
background: transparent;
border-color: transparent;
border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.volume-track();
}
&::-ms-thumb {
.volume-thumb();
}
&:focus {
outline: 0;
&::-webkit-slider-thumb {
background: @volume-thumb-bg-focus;
}
&::-moz-range-thumb {
background: @volume-thumb-bg-focus;
}
&::-ms-thumb {
background: @volume-thumb-bg-focus;
}
}
} }
// Hide sound controls on iOS // Hide sound controls on iOS
@ -596,16 +651,16 @@
// Audio specific styles // Audio specific styles
// Position the progress within the container // Position the progress within the container
&--audio .plyr__controls { &--audio .plyr__controls {
padding-top: (@control-spacing * 2); padding-top: (@plyr-control-spacing * 2);
} }
&--audio .plyr__progress { &--audio .plyr__progress {
bottom: auto; bottom: auto;
top: 0; top: 0;
background: @off-white; background: #fff;
} }
// Full screen mode // Full screen mode
&--fullscreen, &.plyr--fullscreen,
&--fullscreen-active { &--fullscreen-active {
position: fixed; position: fixed;
top: 0; top: 0;
@ -633,29 +688,10 @@
} }
// Hide controls when playing in full screen // Hide controls when playing in full screen
&--fullscreen--hide-controls&--fullscreen-active&--playing { &.plyr--hide-controls {
.plyr__controls { .plyr__controls {
transform: translateY(100%) translateY(@control-spacing / 2); opacity: 0;
transition: transform .3s .2s ease; visibility: hidden;
}
&.plyr--hover .plyr__controls {
transform: translateY(0);
}
.plyr__captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
&--fullscreen .plyr__captions,
&--fullscreen-active .plyr__captions,
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
} }
} }

8
src/sprite/icon-fast-forward.svg Executable file → Normal file
View File

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<title>Fast Forward</title> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 534 B

14
src/sprite/icon-pause.svg
View File

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<title>Pause</title> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<g transform="translate(2.000000, 2.000000)"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path> width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path> <path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>
</g> <path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 666 B

After

Width:  |  Height:  |  Size: 667 B

8
src/sprite/icon-play.svg Executable file → Normal file
View File

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<title>Play</title> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 382 B

After

Width:  |  Height:  |  Size: 582 B

10
src/sprite/icon-rewind.svg
View File

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<title>Rewind</title> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 729 B

After

Width:  |  Height:  |  Size: 535 B