aboutsummaryrefslogtreecommitdiffstats
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/dist/docs.css2
-rw-r--r--docs/dist/docs.js2
-rw-r--r--docs/index.html87
-rw-r--r--docs/index.youtube.html68
-rw-r--r--docs/src/js/docs.js223
-rw-r--r--docs/src/less/components/base.less45
-rw-r--r--docs/src/less/components/buttons.less144
-rw-r--r--docs/src/less/components/error.less19
-rw-r--r--docs/src/less/components/examples.less39
-rw-r--r--docs/src/less/components/panels.less13
-rw-r--r--docs/src/less/components/type.less47
-rw-r--r--docs/src/less/docs.less234
-rw-r--r--docs/src/less/lib/animation.less9
-rw-r--r--docs/src/less/lib/fontface.less10
-rw-r--r--docs/src/less/lib/mixins.less3
-rw-r--r--docs/src/less/variables.less30
16 files changed, 615 insertions, 360 deletions
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index ee763a6a..dcc49989 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;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.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;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.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#f2f5f7;line-height:1.5;text-align:center;color:#565d64}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}.actions{list-style:none;margin:0;padding:0;font-size:0}.actions li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}.actions li+li{margin-left:20px}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:3px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#3498db;border:0;color:#fff}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.btn-twitter{background:#8799A2}.btn-twitter:focus,.btn-twitter:hover{background:#798d97}.btn-count{position:relative;margin-left:6px;padding:9px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-controls,.example-video .player-controls{border-radius:0 0 4px 4px}.example-audio .player{max-width:520px}.example-audio .player-controls{border-radius:4px}.example-audio .player-progress{border-radius:4px 4px 0 0;overflow:hidden}.example-video .player{max-width:1200px}.example-video .player video{border-radius:4px 4px 0 0}.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px} \ No newline at end of file
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}*,::after,::before{box-sizing:border-box}html{font-size:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#f2f5f7;line-height:1.5;text-align:center;color:#55646b;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:480px){section{padding-bottom:40px}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:background .3s ease,color .3s ease}a:focus,a:hover{color:#343f4a}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}nav ul{list-style:none;margin:0;padding:0;font-size:0}nav li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}nav li+li{margin-left:20px}.btn-bar{position:relative;margin:0 auto 20px;max-width:1200px}.btn-bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b}.btn:focus,.btn:hover{background-color:#fff;border-color:#bdc4c7;color:#3498db;outline:0}.btn-bar .active,.btn-primary{background:linear-gradient(#3498db,#2791d9);border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:6px;padding:9px;background:#f2f5f7;border:1px solid #cbd0d3}.btn-count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-controls,.example-video .player-controls{border-radius:0 0 4px 4px}.example-audio .player{max-width:520px}.example-audio .player-controls{border-radius:4px}.example-audio .player-progress{border-radius:4px 4px 0 0;overflow:hidden}.example-video .player{max-width:1200px}.example-video .player iframe,.example-video .player video{border-radius:4px 4px 0 0}.example-video .player iframe{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none} \ No newline at end of file
diff --git a/docs/dist/docs.js b/docs/dist/docs.js
index eef800b4..c5a044c7 100644
--- a/docs/dist/docs.js
+++ b/docs/dist/docs.js
@@ -1 +1 @@
-function popup(t){"a"==t.target.nodeName.toLowerCase()&&(t.preventDefault?t.preventDefault():t.returnValue=!1);var n=t.target,e=n.href,s=n.getAttribute("data-window-width")||600,r=n.getAttribute("data-window-height")||600,a=n.getAttribute("data-window-name")||"popup";if(window["window-"+a]&&!window["window-"+a].closed)window["window-"+a].focus();else{var i=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,u=screen.width/2-s/2+i,c=screen.height/2-r/2+o;window["window-"+a]=window.open(e,a,"top="+c+",left="+u+",width="+s+",height="+r),window["window-"+a].focus()}}function getJSONP(t,n){var e="jsonp_callback_"+Math.round(1e5*Math.random());window[e]=function(t){delete window[e],document.body.removeChild(s),n(t)};var s=document.createElement("script");s.setAttribute("src",t+(t.indexOf("?")>=0?"&":"?")+"callback="+e),document.body.appendChild(s)}function displayCount(t,n){document.querySelector(t).innerHTML=n}function formatGitHubCount(t){return"&bigstar; "+t}var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var u,c=new i;c.subs=new o,c.subsText={},c.buf="",s=s||{},c.stackSubs=s,c.subsText=a;for(u in n)s[u]||(s[u]=n[u]);for(u in s)c.subs[u]=s[u];r=r||{},c.stackPartials=r;for(u in e)r[u]||(r[u]=e[u]);for(u in r)c.partials[u]=r[u];return c}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),l.test(t)?t.replace(a,"&amp;").replace(i,"&lt;").replace(o,"&gt;").replace(u,"&#39;").replace(c,"&quot;"):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,a,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,a,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var a,i=t.split("."),o=this.f(i[0],e,s,r),u=this.options.modelGet,c=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var l=1;l<i.length;l++)a=n(i[l],o,u),void 0!==a?(c=o,o=a):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(c),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var a=!1,i=null,o=!1,u=this.options.modelGet,c=e.length-1;c>=0;c--)if(i=e[c],a=n(t,i,u),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,u=n[n.length-1],c=t.call(u);return"function"==typeof c?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(c,u,e,o.substring(r,a),i)):c},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=/</g,o=/>/g,u=/\'/g,c=/\"/g,l=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var u=[],c=null,l=null,p=null;for(l=s[s.length-1];n.length>0;){if(p=n.shift(),l&&"<"==l.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(c=s.pop(),p.n!=c.n&&!i(p.n,c.n,o))throw new Error("Nesting error: "+c.n+" vs. "+p.n);return c.end=p.i,u}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}u.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return u}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+c(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function u(t){var n=[];for(var e in t.partials)n.push('"'+c(e)+'":{name:"'+c(t.partials[e].name)+'", '+u(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function c(t){return t.replace(w,"\\\\").replace(g,'\\"').replace(h,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(y,"\\u2029")}function l(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+x++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+c(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+l(t.n)+'("'+c(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var d=/\S/,g=/\"/g,h=/\n/g,v=/\r/g,w=/\\/g,m=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){w.length>0&&(m.push({tag:"_t",text:new String(w)}),w="")}function o(){for(var n=!0,e=x;e<m.length;e++)if(n=t.tags[m[e].tag]<t.tags._v||"_t"==m[e].tag&&null===m[e].text.match(d),!n)return!1;return n}function u(t,n){if(i(),t&&o())for(var e,s=x;s<m.length;s++)m[s].text&&((e=m[s+1])&&">"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});y=!1,x=m.length}function c(t,n){var s="="+T,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=a[0],T=a[a.length-1],r+s.length-1}var l=r.length,p=0,b=1,f=2,g=p,h=null,v=null,w="",m=[],y=!1,k=0,x=0,S="{{",T="}}";for(a&&(a=a.split(" "),S=a[0],T=a[1]),k=0;l>k;k++)g==p?s(S,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?u(y):w+=r.charAt(k):g==b?(k+=S.length-1,v=t.tags[r.charAt(k+1)],h=v?r.charAt(k+1):"_v","="==h?(k=c(r,k),g=p):(v&&k++,g=f),y=k):s(T,r,k)?(m.push({tag:h,n:e(w),otag:S,ctag:T,i:"/"==h?y-S.length:k+T.length}),w="",k+=T.length-1,g=p,"{"==h&&("}}"==T?k++:n(m[m.length-1]))):w+=r.charAt(k);return u(y,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+u(n)+"}"};var x=0;t.generate=function(n,e,s){x=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+l(n.n)+'("'+c(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+l(n.n)+'("'+c(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+c(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+l(t.n)+'("'+c(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+c(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,volume:9,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},onSetup:function(){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}),document.querySelector(".js-popup").addEventListener("click",popup);var storageSupported="sessionStorage"in window,selectors={github:".js-stargazers-count",twitter:".js-tweet-count"};storageSupported&&"github_stargazers"in window.sessionStorage?displayCount(selectors.github,formatGitHubCount(window.sessionStorage.github_stargazers)):getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(displayCount(selectors.github,formatGitHubCount(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),storageSupported&&"tweets"in window.sessionStorage?displayCount(selectors.twitter,window.sessionStorage.tweets):getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(displayCount(selectors.twitter,t.count),window.sessionStorage.tweets=t.count)}),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,a,i){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,a=n.createElement(e),i=n.getElementsByTagName(e)[0],a.async=1,a.src=s,i.parentNode.insertBefore(a,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); \ No newline at end of file
+var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var c,l=new i;l.subs=new o,l.subsText={},l.buf="",s=s||{},l.stackSubs=s,l.subsText=a;for(c in n)s[c]||(s[c]=n[c]);for(c in s)l.subs[c]=s[c];r=r||{},l.stackPartials=r;for(c in e)r[c]||(r[c]=e[c]);for(c in r)l.partials[c]=r[c];return l}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),u.test(t)?t.replace(a,"&amp;").replace(i,"&lt;").replace(o,"&gt;").replace(c,"&#39;").replace(l,"&quot;"):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,a,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,a,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var a,i=t.split("."),o=this.f(i[0],e,s,r),c=this.options.modelGet,l=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var u=1;u<i.length;u++)a=n(i[u],o,c),void 0!==a?(l=o,o=a):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(l),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var a=!1,i=null,o=!1,c=this.options.modelGet,l=e.length-1;l>=0;l--)if(i=e[l],a=n(t,i,c),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,c=n[n.length-1],l=t.call(c);return"function"==typeof l?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(l,c,e,o.substring(r,a),i)):l},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=/</g,o=/>/g,c=/\'/g,l=/\"/g,u=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var c=[],l=null,u=null,p=null;for(u=s[s.length-1];n.length>0;){if(p=n.shift(),u&&"<"==u.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(l=s.pop(),p.n!=l.n&&!i(p.n,l.n,o))throw new Error("Nesting error: "+l.n+" vs. "+p.n);return l.end=p.i,c}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}c.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return c}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+l(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function c(t){var n=[];for(var e in t.partials)n.push('"'+l(e)+'":{name:"'+l(t.partials[e].name)+'", '+c(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function l(t){return t.replace(w,"\\\\").replace(g,'\\"').replace(h,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(y,"\\u2029")}function u(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+x++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+l(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var d=/\S/,g=/\"/g,h=/\n/g,v=/\r/g,w=/\\/g,m=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){w.length>0&&(m.push({tag:"_t",text:new String(w)}),w="")}function o(){for(var n=!0,e=x;e<m.length;e++)if(n=t.tags[m[e].tag]<t.tags._v||"_t"==m[e].tag&&null===m[e].text.match(d),!n)return!1;return n}function c(t,n){if(i(),t&&o())for(var e,s=x;s<m.length;s++)m[s].text&&((e=m[s+1])&&">"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});y=!1,x=m.length}function l(t,n){var s="="+T,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=a[0],T=a[a.length-1],r+s.length-1}var u=r.length,p=0,b=1,f=2,g=p,h=null,v=null,w="",m=[],y=!1,k=0,x=0,S="{{",T="}}";for(a&&(a=a.split(" "),S=a[0],T=a[1]),k=0;u>k;k++)g==p?s(S,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?c(y):w+=r.charAt(k):g==b?(k+=S.length-1,v=t.tags[r.charAt(k+1)],h=v?r.charAt(k+1):"_v","="==h?(k=l(r,k),g=p):(v&&k++,g=f),y=k):s(T,r,k)?(m.push({tag:h,n:e(w),otag:S,ctag:T,i:"/"==h?y-S.length:k+T.length}),w="",k+=T.length-1,g=p,"{"==h&&("}}"==T?k++:n(m[m.length-1]))):w+=r.charAt(k);return c(y,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+c(n)+"}"};var x=0;t.generate=function(n,e,s){x=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+u(n.n)+'("'+l(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+u(n.n)+'("'+l(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+l(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+l(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,volume:9,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},onSetup:function(){if("media"in this){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}}),function(){function t(t){"a"==t.target.nodeName.toLowerCase()&&(t.preventDefault?t.preventDefault():t.returnValue=!1);var n=t.target,e=n.href,s=n.getAttribute("data-window-width")||600,r=n.getAttribute("data-window-height")||600,a=n.getAttribute("data-window-name")||"popup";if(window["window-"+a]&&!window["window-"+a].closed)window["window-"+a].focus();else{var i=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,c=screen.width/2-s/2+i,l=screen.height/2-r/2+o;window["window-"+a]=window.open(e,a,"top="+l+",left="+c+",width="+s+",height="+r),window["window-"+a].focus()}}function n(t,n){var e="jsonp_callback_"+Math.round(1e5*Math.random());window[e]=function(t){delete window[e],document.body.removeChild(s),n(t)};var s=document.createElement("script");s.setAttribute("src",t+(t.indexOf("?")>=0?"&":"?")+"callback="+e),document.body.appendChild(s)}function e(t,n){document.querySelector(t).innerHTML=n}function s(t){return"&bigstar; "+t}function r(t){t.preventDefault();for(var n=t.target,e=document.querySelector(n.getAttribute("href")),s=c.length-1;s>=0;s--)c[s].classList.remove(l);for(var r=o.length-1;r>=0;r--)o[r].classList.remove(l);e.classList.add(l),t.target.classList.add(l)}document.querySelector(".js-popup").addEventListener("click",t);var a="sessionStorage"in window,i={github:".js-stargazers-count",twitter:".js-tweet-count"};a&&"github_stargazers"in window.sessionStorage?e(i.github,s(window.sessionStorage.github_stargazers)):n("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(e(i.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),a&&"tweets"in window.sessionStorage?e(i.twitter,window.sessionStorage.tweets):n("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(e(i.twitter,t.count),window.sessionStorage.tweets=t.count)});for(var o=document.querySelectorAll(".nav-panel a"),c=document.querySelectorAll(".panels > .panel"),l="active",u=o.length-1;u>=0;u--)o[u].addEventListener("click",r)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,a,i){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,a=n.createElement(e),i=n.getElementsByTagName(e)[0],a.async=1,a.src=s,i.parentNode.insertBefore(a,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); \ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 10566df5..77502f35 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -19,56 +19,63 @@
<p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
<ul class="actions">
<li>
- <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-download">Download on GitHub</a>
+ <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a>
<span class="btn-count js-stargazers-count">&hellip;</span>
</li>
<li>
- <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter js-popup" data-window-height="250" data-window-width="500">Tweet</a>
+ <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a>
<span class="btn-count js-tweet-count">&hellip;</span>
</li>
</ul>
</header>
- <main>
- <section class="example-video">
- <div class="player">
- <video poster="https://cdn.plyr.io/static/poster.jpg" controls crossorigin>
- <!-- Video files -->
- <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
- <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
-
- <!-- Text track file -->
- <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.vtt" default>
-
- <!-- Fallback for browsers that don't support the <video> element -->
- <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
- </video>
- </div>
- <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
- </section>
-
- <section class="example-audio">
- <div class="player">
- <audio controls>
- <!-- Audio files -->
- <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
- <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
-
- <!-- Fallback for browsers that don't support the <audio> element -->
- <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
- </audio>
- </div>
- <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
- </section>
+ <main role="main" id="main">
+ <nav class="btn-bar nav-panel">
+ <ul>
+ <li><a href="#video" class="btn active btn-small">Video</a></li>
+ <li><a href="#youtube" class="btn btn-small">YouTube</a></li>
+ <li><a href="#audio" class="btn btn-small">Audio</a></li>
+ </ul>
+ </nav>
+ <div class="panels">
+ <section class="panel example-video active" id="video">
+ <div class="player">
+ <video poster="https://cdn.plyr.io/static/poster.jpg" controls crossorigin>
+ <!-- Video files -->
+ <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+ <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
+
+ <!-- Text track file -->
+ <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.vtt" default>
+
+ <!-- Fallback for browsers that don't support the <video> element -->
+ <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
+ </video>
+ </div>
+ <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
+ </section>
+ <section class="panel example-video" id="youtube">
+ <div class="player">
+ <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div>
+ </div>
+ <small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small>
+ </section>
+ <section class="panel example-audio" id="audio">
+ <div class="player">
+ <audio controls>
+ <!-- Audio files -->
+ <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+ <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
+
+ <!-- Fallback for browsers that don't support the <audio> element -->
+ <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
+ </audio>
+ </div>
+ <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
+ </section>
+ </div>
</main>
- <footer>
- <p>Used by &hellip;</p>
- <a href="https://selz.com" target="_blank" class="logo">
- <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
- </a>
- </footer>
-
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script>
diff --git a/docs/index.youtube.html b/docs/index.youtube.html
new file mode 100644
index 00000000..c234bae8
--- /dev/null
+++ b/docs/index.youtube.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Plyr - A simple HTML5 media player</title>
+ <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+ <meta name="author" content="Sam Potts">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- Styles -->
+ <link rel="stylesheet" href="../dist/plyr.css">
+
+ <!-- Docs styles -->
+ <link rel="stylesheet" href="dist/docs.css">
+ </head>
+ <body>
+ <header>
+ <h1>Plyr</h1>
+ <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+ <ul class="actions">
+ <li>
+ <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-download">Download on GitHub</a>
+ <span class="btn-count js-stargazers-count">&hellip;</span>
+ </li>
+ <li>
+ <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter js-popup" data-window-height="250" data-window-width="500">Tweet</a>
+ <span class="btn-count js-tweet-count">&hellip;</span>
+ </li>
+ </ul>
+ </header>
+
+ <main>
+ <section class="example-video">
+ <div class="player">
+ <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div>
+ </div>
+ </section>
+ </main>
+
+ <!-- Load SVG defs -->
+ <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
+ <script>
+ (function(d, u){
+ var a = new XMLHttpRequest(),
+ b = d.body;
+
+ // If proper CORS supported
+ if("withCredentials" in a) {
+ a.open("GET", u, true);
+ a.send();
+ a.onload = function(){
+ var c = d.createElement("div");
+ c.style.display="none";
+ c.innerHTML = a.responseText;
+ b.insertBefore(c, b.childNodes[0]);
+ }
+ }
+ })(document, "../dist/sprite.svg");
+ </script>
+
+ <!-- Plyr core script -->
+ <script src="../src/js/plyr.js"></script>
+ <!--<script src="../dist/plyr.js"></script>-->
+
+ <!-- Docs script -->
+ <script src="dist/docs.js"></script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 072a9236..df205260 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -14,6 +14,10 @@ plyr.setup({
defaultActive: true
},
onSetup: function() {
+ if(!("media" in this)) {
+ return;
+ }
+
var player = this,
type = player.media.tagName.toLowerCase(),
toggle = document.querySelector("[data-toggle='fullscreen']");
@@ -26,116 +30,145 @@ plyr.setup({
}
});
-// Popup
-function popup(event) {
- // Prevent the link opening
- if(event.target.nodeName.toLowerCase() == "a") {
- if(event.preventDefault) {
- event.preventDefault();
+// General functions
+(function() {
+ // Popup
+ function popup(event) {
+ // Prevent the link opening
+ if(event.target.nodeName.toLowerCase() == "a") {
+ if(event.preventDefault) {
+ event.preventDefault();
+ }
+ else {
+ event.returnValue = false;
+ }
+ }
+
+ var link = event.target,
+ url = link.href,
+ width = link.getAttribute("data-window-width") || 600,
+ height = link.getAttribute("data-window-height") || 600,
+ name = link.getAttribute("data-window-name") || "popup";
+
+ // If window exists, just focus it
+ if(window["window-"+name] && !window["window-"+name].closed) {
+ window["window-"+name].focus();
}
else {
- event.returnValue = false;
+ // Get position
+ var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
+ var top = window.screenTop !== undefined ? window.screenTop : screen.top;
+
+ // Open in the centre of the screen
+ var x = (screen.width / 2) - (width / 2) + left,
+ y = (screen.height / 2) - (height / 2) + top;
+
+ // Open that window
+ window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
+
+ // Focus new window
+ window["window-"+name].focus();
}
}
- var link = event.target,
- url = link.href,
- width = link.getAttribute("data-window-width") || 600,
- height = link.getAttribute("data-window-height") || 600,
- name = link.getAttribute("data-window-name") || "popup";
+ // Trigger popups
+ document.querySelector(".js-popup").addEventListener("click", popup);
+
+ // Get JSONP
+ function getJSONP(url, callback) {
+ var name = "jsonp_callback_" + Math.round(100000 * Math.random());
+
+ // Cleanup to prevent memory leaks and hit original callback
+ window[name] = function(data) {
+ delete window[name];
+ document.body.removeChild(script);
+ callback(data);
+ };
+
+ // Create a faux script
+ var script = document.createElement("script");
+ script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
+
+ // Inject to the body
+ document.body.appendChild(script);
+ }
+
+ // Get star count
+ var storageSupported = ("sessionStorage" in window),
+ selectors = {
+ github: ".js-stargazers-count",
+ twitter: ".js-tweet-count"
+ };
- // If window exists, just focus it
- if(window["window-"+name] && !window["window-"+name].closed) {
- window["window-"+name].focus();
+ // Display the count next to the button
+ function displayCount(selector, count) {
+ document.querySelector(selector).innerHTML = count;
+ }
+
+ // Add star
+ function formatGitHubCount(count) {
+ return "&bigstar; " + count;
+ }
+
+ // Check if it's in session storage first
+ if(storageSupported && "github_stargazers" in window.sessionStorage) {
+ displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
}
else {
- // Get position
- var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
- var top = window.screenTop !== undefined ? window.screenTop : screen.top;
+ getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
+ if (json && typeof json.data.stargazers_count !== "undefined") {
+ // Update UI
+ displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
+
+ // Store in session storage
+ window.sessionStorage.github_stargazers = json.data.stargazers_count;
+ }
+ });
+ }
- // Open in the centre of the screen
- var x = (screen.width / 2) - (width / 2) + left,
- y = (screen.height / 2) - (height / 2) + top;
+ // Get tweet count
+ if(storageSupported && "tweets" in window.sessionStorage) {
+ displayCount(selectors.twitter, window.sessionStorage.tweets);
+ }
+ else {
+ getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
+ if (json && typeof json.count !== "undefined") {
+ // Update UI
+ displayCount(selectors.twitter, json.count);
+
+ // Store in session storage
+ window.sessionStorage.tweets = json.count;
+ }
+ });
+ }
- // Open that window
- window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
+ // Tabs
+ var tabs = document.querySelectorAll(".nav-panel a"),
+ panels = document.querySelectorAll(".panels > .panel"),
+ activeClass = "active";
- // Focus new window
- window["window-"+name].focus();
+ for (var i = tabs.length - 1; i >= 0; i--) {
+ tabs[i].addEventListener("click", togglePanel);
}
-}
-
-// Trigger popups
-document.querySelector(".js-popup").addEventListener("click", popup);
-
-// Get JSONP
-function getJSONP(url, callback) {
- var name = "jsonp_callback_" + Math.round(100000 * Math.random());
-
- // Cleanup to prevent memory leaks and hit original callback
- window[name] = function(data) {
- delete window[name];
- document.body.removeChild(script);
- callback(data);
- };
-
- // Create a faux script
- var script = document.createElement("script");
- script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
-
- // Inject to the body
- document.body.appendChild(script);
-}
-
-// Get star count
-var storageSupported = ("sessionStorage" in window),
- selectors = {
- github: ".js-stargazers-count",
- twitter: ".js-tweet-count"
- };
-
-// Display the count next to the button
-function displayCount(selector, count) {
- document.querySelector(selector).innerHTML = count;
-}
-
-// Add star
-function formatGitHubCount(count) {
- return "&bigstar; " + count;
-}
-
-// Check if it's in session storage first
-if(storageSupported && "github_stargazers" in window.sessionStorage) {
- displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
-}
-else {
- getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
- if (json && typeof json.data.stargazers_count !== "undefined") {
- // Update UI
- displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
-
- // Store in session storage
- window.sessionStorage.github_stargazers = json.data.stargazers_count;
+
+ function togglePanel(event) {
+ event.preventDefault();
+
+ var tab = event.target,
+ panel = document.querySelector(tab.getAttribute("href"));
+
+ for (var i = panels.length - 1; i >= 0; i--) {
+ panels[i].classList.remove(activeClass);
}
- });
-}
-
-// Get tweet count
-if(storageSupported && "tweets" in window.sessionStorage) {
- displayCount(selectors.twitter, window.sessionStorage.tweets);
-}
-else {
- getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
- if (json && typeof json.count !== "undefined") {
- // Update UI
- displayCount(selectors.twitter, json.count);
-
- // Store in session storage
- window.sessionStorage.tweets = json.count;
+
+ for (var x = tabs.length - 1; x >= 0; x--) {
+ tabs[x].classList.remove(activeClass);
}
- });
-}
+ panel.classList.add(activeClass);
+ event.target.classList.add(activeClass);
+ }
+})();
// Google analytics
// For demo site (http://[www.]plyr.io) only
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
new file mode 100644
index 00000000..81a68058
--- /dev/null
+++ b/docs/src/less/components/base.less
@@ -0,0 +1,45 @@
+// ==========================================================================
+// Base layout
+// ==========================================================================
+
+// BORDER-BOX ALL THE THINGS!
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+*, *::after, *::before {
+ box-sizing: border-box;
+}
+
+// Base
+html {
+ font-size: 100%;
+}
+body {
+ font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ background: @body-background;
+ line-height: 1.5;
+ text-align: center;
+ color: @gray;
+ .font-smoothing(on);
+}
+
+// Header
+header {
+ padding: @padding-base;
+ margin-bottom: @padding-base;
+
+ p {
+ .font-size(18);
+ }
+ @media (min-width: @screen-sm) {
+ padding-top: (@padding-base * 3);
+ padding-bottom: (@padding-base * 3);
+ }
+}
+
+// Sections
+section {
+ padding-bottom: @padding-base;
+
+ @media (min-width: @screen-sm) {
+ padding-bottom: (@padding-base * 2);
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
new file mode 100644
index 00000000..749cd11f
--- /dev/null
+++ b/docs/src/less/components/buttons.less
@@ -0,0 +1,144 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+nav {
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+ }
+ li {
+ display: inline-block;
+ margin-top: (@padding-base / 2);
+ .font-size();
+ white-space: nowrap;
+ }
+ li + li {
+ margin-left: @padding-base;
+ }
+}
+
+// Tabs
+.btn-bar {
+ position: relative;
+ margin: 0 auto @padding-base;
+ max-width: @example-width-video;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: @gray-lighter;
+ }
+
+ ul {
+ position: relative;
+ z-index: 1;
+ display: inline-block;
+ user-select: none;
+ }
+ li {
+ margin: 0;
+
+ &:first-child .btn {
+ border-radius: 4px 0 0 4px;
+ }
+ &:last-child .btn {
+ border-radius: 0 4px 4px 0;
+ }
+ & + li .btn {
+ margin-left: -1px;
+ }
+ }
+ .btn {
+ display: block;
+ border-radius: 0;
+ }
+ .active {
+ &:extend(.btn-primary);
+ }
+ .btn.active {
+ box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
+ position: relative;
+ z-index: 1;
+ }
+
+ @media (min-width: 560px) {
+ margin-bottom: (@padding-base * 2);
+ }
+}
+
+// Shared
+.btn,
+.btn-count {
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: @border-radius-base;
+ font-weight: 600;
+ user-select: none;
+}
+
+// Buttons
+.btn {
+ padding: (@padding-base / 2) @padding-base;
+ background: @body-background;
+ border: 1px solid @gray-light;
+ box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+ text-shadow: 0 1px 1px #fff;
+ color: @gray;
+
+ &:hover,
+ &:focus {
+ background-color: #fff;
+ border-color: darken(@gray-light, 5%);
+ color: @link-color;
+ outline: 0;
+ }
+}
+.btn-primary {
+ background: linear-gradient(@link-color, darken(@link-color, 3%));
+ border-color: darken(@link-color, 10%);
+ box-shadow: 0 1px 1px rgba(0,0,0, .15);
+ text-shadow: 0 1px 1px rgba(0,0,0, .1);
+ color: #fff;
+
+ &:hover,
+ &:focus {
+ color: #fff;
+ border-color: darken(@link-color, 20%);
+ }
+}
+.btn-small {
+ padding-top: ceil(@padding-base / 3);
+ padding-bottom: ceil(@padding-base / 3);
+}
+
+// Count bubble
+.btn-count {
+ position: relative;
+ margin-left: 6px;
+ padding: ((@padding-base / 2) - 1px);
+ background: @body-background;
+ border: 1px solid @gray-light;
+
+ &::before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: @arrow-size;
+ height: @arrow-size;
+ left: 1px;
+ top: 50%;
+ margin-top: -(@arrow-size / 2);
+
+ background: inherit;
+ border: inherit;
+ border-width: 1px 0 0 1px;
+ transform: rotate(-45deg) translate(-50%, -50%);
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/error.less b/docs/src/less/components/error.less
new file mode 100644
index 00000000..b1427173
--- /dev/null
+++ b/docs/src/less/components/error.less
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Errors (AWS pages)
+// ==========================================================================
+
+// Error page
+html.error,
+.error body {
+ height: 100%;
+}
+.error body {
+ width: 100%;
+ display: table;
+ table-layout: fixed;
+}
+.error main {
+ display: table-cell;
+ width: 100%;
+ vertical-align: middle;
+} \ No newline at end of file
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
new file mode 100644
index 00000000..9c145847
--- /dev/null
+++ b/docs/src/less/components/examples.less
@@ -0,0 +1,39 @@
+// ==========================================================================
+// Examples
+// ==========================================================================
+
+// Example players
+.example-audio .player,
+.example-video .player {
+ margin: 0 auto @padding-base;
+
+ &-controls {
+ border-radius: 0 0 @border-radius-base @border-radius-base;
+ }
+}
+.example-audio .player {
+ max-width: @example-width-audio;
+
+ &-controls {
+ border-radius: @border-radius-base;
+ }
+ &-progress {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ overflow: hidden;
+ }
+}
+.example-video .player {
+ max-width: @example-width-video;
+
+ video,
+ iframe {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ }
+ iframe {
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+ }
+ &-fullscreen,
+ &.fullscreen-active {
+ max-width: none;
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less
new file mode 100644
index 00000000..290e5dfc
--- /dev/null
+++ b/docs/src/less/components/panels.less
@@ -0,0 +1,13 @@
+// ==========================================================================
+// Panels
+// ==========================================================================
+
+// Panels
+.panel {
+ display: none;
+
+ &.active {
+ display: block;
+ animation: fade-in .3s ease;
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
new file mode 100644
index 00000000..97652342
--- /dev/null
+++ b/docs/src/less/components/type.less
@@ -0,0 +1,47 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+// Headings
+h1,
+h2 {
+ letter-spacing: -.025em;
+ color: #2E3C44;
+ margin: 0 0 (@padding-base / 2);
+ line-height: 1.2;
+ .font-smoothing();
+}
+h1 {
+ .font-size(64);
+ color: #3498DB;
+}
+
+// Paragraph and small
+p,
+small {
+ margin: 0 0 @padding-base;
+}
+small {
+ display: block;
+ padding: 0 (@padding-base / 2);
+ .font-size(14);
+}
+
+// Links
+a {
+ text-decoration: none;
+ color: @link-color;
+ border-bottom: 1px solid currentColor;
+ transition: background .3s ease, color .3s ease;
+
+ &:hover,
+ &:focus {
+ color: @gray-dark;
+ }
+ &:focus {
+ .tab-focus();
+ }
+ &.logo {
+ border: 0;
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index d4ef32b9..cea3a2af 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -2,233 +2,33 @@
// HTML5 Video Player Demo Page
// ==========================================================================
-// Reset
+// CSS Reset
@import "lib/normalize.less";
+
// Mixins
@import "lib/mixins.less";
-// Fonts - docs only!
-@import "lib/fontface.less";
// Variables
-// ---------------------------------------
-// Colors
-@blue: #3498db;
-@gray-dark: #343f4a;
-@gray: #565d64;
-@gray-light: #cbd0d3;
-@off-white: #f2f5f7;
-
-// Elements
-@link-color: @blue;
-@padding-base: 20px;
-@arrow-size: 8px;
-
-// Breakpoints
-@screen-md: 768px;
-
-// BORDER-BOX ALL THE THINGS!
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {
- box-sizing: border-box;
-}
+@import "variables.less";
-// Base
-body {
- font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: @off-white;
- line-height: 1.5;
- text-align: center;
- color: @gray;
-}
+// Animation
+@import "lib/animation.less";
-// Error page
-html.error,
-.error body {
- height: 100%;
-}
-.error body {
- width: 100%;
- display: table;
- table-layout: fixed;
-}
-.error main {
- display: table-cell;
- width: 100%;
- vertical-align: middle;
-}
+// Base layout
+@import "components/base.less";
// Type
-h1,
-h2 {
- letter-spacing: -.025em;
- color: #2E3C44;
- margin: 0 0 (@padding-base / 2);
- line-height: 1.2;
- .font-smoothing();
-}
-h1 {
- .font-size(64);
- color: #3498DB;
-}
-p,
-small {
- margin: 0 0 @padding-base;
-}
-small {
- display: block;
- padding: 0 (@padding-base / 2);
- .font-size(14);
-}
-
-// Header
-header {
- padding: @padding-base;
- margin-bottom: @padding-base;
-
- p {
- .font-size(18);
- }
- @media (min-width: 560px) {
- padding-top: (@padding-base * 3);
- padding-bottom: (@padding-base * 3);
- }
-}
-
-// Sections
-section {
- padding-bottom: @padding-base;
-
- @media (min-width: 560px) {
- padding-bottom: (@padding-base * 2);
- }
-}
-
-// Links & Buttons
-.actions {
- list-style: none;
- margin: 0;
- padding: 0;
- font-size: 0;
-
- li {
- display: inline-block;
- margin-top: (@padding-base / 2);
- .font-size();
- white-space: nowrap;
- }
- li + li {
- margin-left: @padding-base;
- }
-}
-a {
- text-decoration: none;
- color: @link-color;
- border-bottom: 1px solid currentColor;
- transition: all .3s ease;
-
- &:hover,
- &:focus {
- color: #000;
- }
- &:focus {
- .tab-focus();
- }
- &.logo {
- border: 0;
- }
-}
-.btn,
-.btn-count {
- display: inline-block;
- vertical-align: middle;
- border-radius: 3px;
- .font-smoothing(on);
- font-weight: 600;
- user-select: none;
-}
-.btn {
- padding: (@padding-base / 2) @padding-base;
- background: @link-color;
- border: 0;
- color: #fff;
-
- &:hover,
- &:focus {
- color: #fff;
- background: darken(@link-color, 5%);
- }
-
- &-twitter {
- background: #8799A2;
-
- &:hover,
- &:focus {
- background: darken(#8799A2, 5%);
- }
- }
-}
-.btn-count {
- position: relative;
- margin-left: 6px;
- padding: ((@padding-base / 2) - 1px);
- background: #fff;
- border: 1px solid @gray-light;
-
- &::before {
- content: "";
- position: absolute;
- display: block;
- width: @arrow-size;
- height: @arrow-size;
- left: 1px;
- top: 50%;
- margin-top: -(@arrow-size / 2);
-
- background: inherit;
- border: inherit;
- border-width: 1px 0 0 1px;
- transform: rotate(-45deg) translate(-50%, -50%);
- }
-}
-
-// Example players
-.example-audio .player,
-.example-video .player {
- margin: 0 auto @padding-base;
-
- &-controls {
- border-radius: 0 0 4px 4px;
- }
-}
-.example-audio .player {
- max-width: 520px;
-
- &-controls {
- border-radius: 4px;
- }
- &-progress {
- border-radius: 4px 4px 0 0;
- overflow: hidden;
- }
-}
-.example-video .player {
- max-width: 1200px;
+@import "lib/fontface.less";
+@import "components/type.less";
- video {
- border-radius: 4px 4px 0 0;
- }
- &-fullscreen,
- &.fullscreen-active {
- max-width: none;
- }
-}
+// Buttons
+@import "components/buttons.less";
+// Panels
+@import "components/panels.less";
-// Footer
-footer {
- margin-bottom: @padding-base;
+// Error
+@import "components/error.less";
- p {
- margin-bottom: (@padding-base / 2);
- }
-} \ No newline at end of file
+// Examples
+@import "components/examples.less"; \ No newline at end of file
diff --git a/docs/src/less/lib/animation.less b/docs/src/less/lib/animation.less
new file mode 100644
index 00000000..386c6613
--- /dev/null
+++ b/docs/src/less/lib/animation.less
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Animations
+// ==========================================================================
+
+// Fade
+@keyframes fade-in {
+ 0% { opacity: 0 }
+ 100% { opacity: 1 }
+} \ No newline at end of file
diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less
index 479f7fa4..9442f17d 100644
--- a/docs/src/less/lib/fontface.less
+++ b/docs/src/less/lib/fontface.less
@@ -1,16 +1,18 @@
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
@font-face {
font-family: "Avenir";
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.ttf") format("truetype");
+ url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Avenir";
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.ttf") format("truetype");
+ url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
font-style: normal;
font-weight: 600;
} \ No newline at end of file
diff --git a/docs/src/less/lib/mixins.less b/docs/src/less/lib/mixins.less
index a4451b1c..923df1ea 100644
--- a/docs/src/less/lib/mixins.less
+++ b/docs/src/less/lib/mixins.less
@@ -17,7 +17,6 @@
// Default
outline: thin dotted @gray-dark;
// Webkit
- //outline: 5px auto -webkit-focus-ring-color;
outline-offset: 1px;
}
@@ -25,7 +24,7 @@
// Leave <body> at 100%/16px
// ---------------------------------------
.font-size(@font-size: 16){
- @rem: round((@font-size / 16), 1);
+ @rem: round((@font-size / 16), 3);
font-size: (@font-size * 1px);
font-size: ~"@{rem}rem";
}
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
new file mode 100644
index 00000000..4ea34d84
--- /dev/null
+++ b/docs/src/less/variables.less
@@ -0,0 +1,30 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+// Colors
+@blue: #3498db;
+@gray-dark: #343f4a;
+@gray: #55646b;
+@gray-light: #cbd0d3;
+@gray-lighter: #dbe3e8;
+@off-white: #f2f5f7;
+
+// Base
+@body-background: @off-white;
+
+// Elements
+@link-color: @blue;
+@padding-base: 20px;
+@arrow-size: 8px;
+
+// Breakpoints
+@screen-sm: 480px;
+@screen-md: 768px;
+
+// Radii
+@border-radius-base: 4px;
+
+// Examples
+@example-width-audio: 520px;
+@example-width-video: 1200px; \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-12 12:17:10 +0000