diff options
Diffstat (limited to 'demo')
52 files changed, 1114 insertions, 1023 deletions
diff --git a/demo/dist/demo.css b/demo/dist/demo.css index c01a1dd5..2f44268b 100644 --- a/demo/dist/demo.css +++ b/demo/dist/demo.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:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-webkit-box-sizing:content-box;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"}small{font-size:80%}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]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;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}}@font-face{font-family:Avenir;src:url(https://cdn.plyr.io/static/fonts/avenir-medium.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-medium.woff) format('woff');font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Avenir;src:url(https://cdn.plyr.io/static/fonts/avenir-bold.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-bold.woff) format('woff');font-style:normal;font-weight:700;font-display:swap}html{font-size:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1,h2{letter-spacing:-.025em;color:#3498db;margin:0 0 10px;line-height:1.2;font-weight:700}h1{font-size:64px;font-size:4rem}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}li,ul{list-style:none;margin:0;padding:0}a{text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;-webkit-transition:background .3s ease,color .3s ease,border .3s ease;transition:background .3s ease,color .3s ease,border .3s ease}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:thin dotted #343f4a;outline-offset:1px}a.logo{border:0}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none}html{height:100%;background:#f2f5f7 fixed}body{margin:0;padding:10px}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{max-width:1200px;margin:0 auto 20px}@media (min-width:480px){section{margin-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}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;white-space:nowrap}.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 li.active .btn{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;vertical-align:middle;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700}.btn{padding:10px 12px;background:-webkit-gradient(linear,left top,left bottom,from(#f8fafb),to(#e9eef1));background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;-webkit-transition:background .1s ease,color .1s ease;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:-webkit-gradient(linear,left top,left bottom,from(#3498db),to(#258cd1));background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15);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--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4baaf4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;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%)}.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}video{max-width:100%;vertical-align:middle}.plyr{margin:0 auto;border-radius:6px}.plyr--audio{max-width:520px}.plyr__video-wrapper::after{content:"";pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}
\ No newline at end of file +@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:300;src:url(https://cdn.plyr.io/static/fonts/gordita-light.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-light.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:400;src:url(https://cdn.plyr.io/static/fonts/gordita-regular.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-regular.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:500;src:url(https://cdn.plyr.io/static/fonts/gordita-medium.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-medium.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:600;src:url(https://cdn.plyr.io/static/fonts/gordita-bold.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-bold.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:900;src:url(https://cdn.plyr.io/static/fonts/gordita-black.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-black.woff) format("woff")}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity: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,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 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'}small{font-size:80%}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}*,::after,::before{box-sizing:border-box}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#4dc1ff,#0074b3);background-attachment:fixed;height:100%}body{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-height:100%}.grid{-webkit-box-flex:1;flex:1;overflow:auto}main{margin:auto;text-align:center}aside{-webkit-box-align:center;align-items:center;background:#fff;color:#55646b;display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;padding:15px;position:relative;text-align:center;text-shadow:none;width:100%}aside .icon{fill:#4baaf4;margin-right:10px}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.tab-focus.faux-link{box-shadow:0 0 0 3px rgba(75,170,244,.35);outline:0}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;max-width:1280px;width:100%}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:.9375rem;color:#fff;font-family:Gordita,Avenir,"Helvetica Neue",sans-serif;font-weight:500;line-height:1.75;text-shadow:0 1px 1px rgba(0,0,0,.15)}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{font-size:13px;font-size:.8125rem;display:block}h1{font-size:64px;font-size:4rem;font-weight:600;letter-spacing:-.025em;margin:0 0 10px}.button,.button__count{-webkit-box-align:center;align-items:center;background:#fff;border:0;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);color:#55646b;display:-webkit-inline-box;display:inline-flex;padding:15px;position:relative;text-shadow:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.button{font-weight:600;padding-left:20px;padding-right:20px;transition:all .2s ease}.button:focus,.button:hover{color:#343f4a}.button:focus::after,.button:hover::after{display:none}.button:hover{box-shadow:0 2px 2px rgba(0,0,0,.1);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.button:focus{outline:0}.button.tab-focus{box-shadow:0 0 0 3px rgba(255,255,255,.35);outline:0}.button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}.button--with-count{display:-webkit-inline-box;display:inline-flex}.button--with-count .button .icon{flex-shrink:0}.button__count{-webkit-animation:fadein .2s ease;animation:fadein .2s ease;margin-left:10px}.button__count::before{border:5px solid transparent;border-left-width:0;border-right-color:#fff;content:'';height:0;position:absolute;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:0}header{padding-bottom:20px;text-align:center}header .call-to-action{margin-top:30px}@media only screen and (min-width:768px){header{margin-right:60px;max-width:360px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;height:16px;vertical-align:-3px;width:16px}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:6px}button.faux-link{background:0 0;border:0;border-radius:0;cursor:pointer;font:inherit;line-height:1.75;margin:0;padding:0;position:relative;text-align:inherit;text-shadow:inherit;-moz-user-select:text;vertical-align:baseline;width:auto}a,button.faux-link{border-bottom:1px dotted currentColor;color:#fff;font-weight:600;position:relative;text-decoration:none;transition:all .2s ease}a::after,button.faux-link::after{background:currentColor;content:'';height:1px;left:50%;position:absolute;top:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:width .2s ease;width:0}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.tab-focus.faux-link{box-shadow:0 0 0 3px rgba(255,255,255,.35);outline:0}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2);margin:20px auto}.plyr.plyr--audio{max-width:480px}.plyr__video-wrapper::after{border:1px solid rgba(0,0,0,.15);border-radius:inherit;bottom:0;content:'';left:0;pointer-events:none;position:absolute;right:0;top:0}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:4px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}@-webkit-keyframes plyr-popup{0%{opacity:.5;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes plyr-popup{0%{opacity:.5;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:inherit;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui button.faux-link,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:rgba(255,255,255,.9);font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{-webkit-animation:plyr-fade-in .3s ease;animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:12px;left:0;padding:10px;position:absolute;text-align:center;-webkit-transform:translateY(-40px);transform:translateY(-40px);transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;width:100%}.plyr__captions span{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions span div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:13px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__control[aria-pressed=false] .icon--pressed,.plyr__control[aria-pressed=false] .label--pressed,.plyr__control[aria-pressed=true] .icon--not-pressed,.plyr__control[aria-pressed=true] .label--not-pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,-webkit-transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;-webkit-transform:translateY(100%);transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__video-embed{height:0;padding-bottom:56.25%}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__video-embed>div{padding-bottom:200%;position:relative;-webkit-transform:translateY(-35.9375%);transform:translateY(-35.9375%)}.plyr--full-ui .plyr__video-embed iframe{pointer-events:none}.plyr__menu{display:-webkit-box;display:flex;position:relative}.plyr__menu .plyr__control svg{transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{-webkit-animation:plyr-popup .2s ease;animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:13px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:1}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:7px}.plyr__menu__container .plyr__control{-webkit-box-align:center;align-items:center;color:#4f5b5f;display:-webkit-box;display:flex;padding:4px 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:border-color .2s ease}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;-webkit-transform:scale(0);transform:scale(0);transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;margin-left:auto;margin-right:-7px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr__progress{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1;position:relative}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:11px;left:0}.plyr__progress--buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin:-3px 0 0;padding:0;position:absolute;top:50%;width:100%}.plyr__progress--buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress--buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress--buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress--buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress--buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(183,197,205,.66)}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;cursor:pointer;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui input[type=range]:active::-ms-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background:rgba(183,197,205,.66)}.plyr__time{font-size:11px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:12px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;-webkit-transform:translateX(50%);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__volume{-webkit-box-flex:1;flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--has-error{pointer-events:none}.plyr--has-error::after{-webkit-box-align:center;align-items:center;background:#000;color:#fff;content:attr(data-plyr-error);display:-webkit-box;display:flex;font-size:13px;height:100%;-webkit-box-pack:center;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 1px 1px #000;top:0;width:100%;z-index:10}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--no-transition{transition:none!important}.plyr--full-ui [hidden]{display:none}.plyr--full-ui [aria-hidden=true]{display:none}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}
\ No newline at end of file diff --git a/demo/dist/demo.js b/demo/dist/demo.js index c823e18e..07a5e9b8 100644 --- a/demo/dist/demo.js +++ b/demo/dist/demo.js @@ -1 +1,3 @@ -"document"in self&&("classList"in document.createElement("_")?function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():function(t){"use strict";if("Element"in t){var e=t.Element.prototype,i=Object,o=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},s=Array.prototype.indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},n=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},r=function(t,e){if(""===e)throw new n("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new n("INVALID_CHARACTER_ERR","String contains an invalid character");return s.call(t,e)},a=function(t){for(var e=o.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},c=a.prototype=[],l=function(){return new a(this)};if(n.prototype=Error.prototype,c.item=function(t){return this[t]||null},c.contains=function(t){return t+="",-1!==r(this,t)},c.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do{t=e[i]+"",-1===r(this,t)&&(this.push(t),s=!0)}while(++i<o);s&&this._updateClassName()},c.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do{for(t=i[o]+"",e=r(this,t);-1!==e;)this.splice(e,1),n=!0,e=r(this,t)}while(++o<s);n&&this._updateClassName()},c.toggle=function(t,e){t+="";var i=this.contains(t),o=i?!0!==e&&"remove":!1!==e&&"add";return o&&this[o](t),!0===e||!1===e?e:!i},c.toString=function(){return this.join(" ")},i.defineProperty){var u={get:l,enumerable:!0,configurable:!0};try{i.defineProperty(e,"classList",u)}catch(t){-2146823252===t.number&&(u.enumerable=!1,i.defineProperty(e,"classList",u))}}else i.prototype.__defineGetter__&&e.__defineGetter__("classList",l)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t.ga=t.ga||function(){(t.ga.q=t.ga.q||[]).push(arguments)},t.ga.l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(n,r)}(window,document,"script",0,"ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file +document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,o){if(t in a&&(o||t!==n)&&(n.length||t!==a.video)){switch(t){case a.video:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case a.audio:i.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case a.youtube:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case a.vimeo:i.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}n=t,Array.from(r).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});var o="tab-focus";document.addEventListener("focusout",function(e){e.target.classList.remove(o)}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add(o)},0)});var i=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=i;var r=document.querySelectorAll("[data-source]"),a={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if(Array.from(r).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),s&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var c=!n.length;c&&(n=a.video),n in a&&window.history.replaceState({type:n},"",c?"":"#"+n),n!==a.video&&t(n,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview")); + +//# sourceMappingURL=demo.js.map diff --git a/demo/dist/demo.js.map b/demo/dist/demo.js.map new file mode 100644 index 00000000..0826b4cf --- /dev/null +++ b/demo/dist/demo.js.map @@ -0,0 +1 @@ +{"version":3,"file":"demo.js","sources":["demo/src/js/demo.js"],"sourcesContent":["// ==========================================================================\n// Plyr.io demo\n// This code is purely for the https://plyr.io website\n// Please see readme.md in the root or github.com/sampotts/plyr\n// ==========================================================================\n\ndocument.addEventListener('DOMContentLoaded', () => {\n if (window.shr) {\n window.shr.setup({\n count: {\n classname: 'button__count',\n },\n });\n }\n\n // Setup tab focus\n const tabClassName = 'tab-focus';\n\n // Remove class on blur\n document.addEventListener('focusout', event => {\n event.target.classList.remove(tabClassName);\n });\n\n // Add classname to tabbed elements\n document.addEventListener('keydown', event => {\n if (event.keyCode !== 9) {\n return;\n }\n\n // Delay the adding of classname until the focus has changed\n // This event fires before the focusin event\n window.setTimeout(() => {\n document.activeElement.classList.add(tabClassName);\n }, 0);\n });\n\n // Setup the player\n const player = new window.Plyr('#player', {\n debug: true,\n title: 'View From A Blue Moon',\n iconUrl: '../dist/plyr.svg',\n keyboard: {\n global: true,\n },\n tooltips: {\n controls: true,\n },\n captions: {\n active: true,\n },\n controls: [\n 'play-large',\n 'play',\n 'progress',\n 'current-time',\n 'mute',\n 'volume',\n 'captions',\n 'settings',\n 'fullscreen',\n 'pip',\n 'airplay',\n ],\n keys: {\n google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',\n },\n });\n\n // Expose for testing\n window.player = player;\n\n // Setup type toggle\n const buttons = document.querySelectorAll('[data-source]');\n const types = {\n video: 'video',\n audio: 'audio',\n youtube: 'youtube',\n vimeo: 'vimeo',\n };\n let currentType = window.location.hash.replace('#', '');\n const historySupport = window.history && window.history.pushState;\n\n // Toggle class on an element\n function toggleClass(element, className, state) {\n if (element) {\n element.classList[state ? 'add' : 'remove'](className);\n }\n }\n\n // Set a new source\n function newSource(type, init) {\n // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video\n if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {\n return;\n }\n\n switch (type) {\n case types.video:\n player.source = {\n type: 'video',\n title: 'View From A Blue Moon',\n sources: [{\n src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4',\n type: 'video/mp4',\n }],\n poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg',\n tracks: [\n {\n kind: 'captions',\n label: 'English',\n srclang: 'en',\n src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n default: true,\n },\n {\n kind: 'captions',\n label: 'French',\n srclang: 'fr',\n src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',\n },\n ],\n };\n\n break;\n\n case types.audio:\n player.source = {\n type: 'audio',\n title: 'Kishi Bashi – “It All Began With A Burst”',\n sources: [\n {\n src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',\n type: 'audio/mp3',\n },\n {\n src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',\n type: 'audio/ogg',\n },\n ],\n };\n\n break;\n\n case types.youtube:\n player.source = {\n type: 'video',\n title: 'View From A Blue Moon',\n sources: [{\n src: 'https://youtube.com/watch?v=bTqVqk7FSmY',\n provider: 'youtube',\n }],\n };\n\n break;\n\n case types.vimeo:\n player.source = {\n type: 'video',\n sources: [{\n src: 'https://vimeo.com/76979871',\n provider: 'vimeo',\n }],\n };\n\n break;\n\n default:\n break;\n }\n\n // Set the current type for next time\n currentType = type;\n\n // Remove active classes\n Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));\n\n // Set active on parent\n toggleClass(document.querySelector(`[data-source=\"${type}\"]`), 'active', true);\n\n // Show cite\n Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {\n cite.setAttribute('hidden', '');\n });\n document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');\n }\n\n // Bind to each button\n Array.from(buttons).forEach(button => {\n button.addEventListener('click', () => {\n const type = button.getAttribute('data-source');\n\n newSource(type);\n\n if (historySupport) {\n window.history.pushState({ type }, '', `#${type}`);\n }\n });\n });\n\n // List for backwards/forwards\n window.addEventListener('popstate', event => {\n if (event.state && 'type' in event.state) {\n newSource(event.state.type);\n }\n });\n\n // On load\n if (historySupport) {\n const video = !currentType.length;\n\n // If there's no current type set, assume video\n if (video) {\n currentType = types.video;\n }\n\n // Replace current history state\n if (currentType in types) {\n window.history.replaceState(\n {\n type: currentType,\n },\n '',\n video ? '' : `#${currentType}`\n );\n }\n\n // If it's not video, load the source\n if (currentType !== types.video) {\n newSource(currentType, true);\n }\n }\n});\n\n// Google analytics\n// For demo site (https://plyr.io) only\n/* eslint-disable */\nif (window.location.host === 'plyr.io') {\n (function(i, s, o, g, r, a, m) {\n i.GoogleAnalyticsObject = r;\n i[r] =\n i[r] ||\n function() {\n (i[r].q = i[r].q || []).push(arguments);\n };\n i[r].l = 1 * new Date();\n a = s.createElement(o);\n m = s.getElementsByTagName(o)[0];\n a.async = 1;\n a.src = g;\n m.parentNode.insertBefore(a, m);\n })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');\n window.ga('create', 'UA-40881672-11', 'auto');\n window.ga('send', 'pageview');\n}\n/* eslint-enable */\n"],"names":["document","addEventListener","toggleClass","element","className","state","classList","newSource","type","init","types","currentType","length","video","source","audio","youtube","vimeo","from","buttons","forEach","button","parentElement","querySelector","querySelectorAll","setAttribute","removeAttribute","window","shr","setup","tabClassName","target","remove","event","keyCode","setTimeout","activeElement","add","player","Plyr","location","hash","replace","historySupport","history","pushState","getAttribute","replaceState","host","i","s","o","g","r","a","m","GoogleAnalyticsObject","q","push","arguments","l","Date","createElement","getElementsByTagName","async","src","parentNode","insertBefore","ga"],"mappings":"AAMAA,SAASC,iBAAiB,mBAAoB,oBA6EjCC,EAAYC,EAASC,EAAWC,GACjCF,KACQG,UAAUD,EAAQ,MAAQ,UAAUD,YAK3CG,EAAUC,EAAMC,MAEfD,KAAQE,IAAYD,GAAQD,IAASG,KAAkBA,EAAYC,QAAUJ,IAASE,EAAMG,eAI1FL,QACCE,EAAMG,QACAC,aACG,cACC,sCAEE,kDACC,qBAEF,2DAGM,iBACC,kBACE,SACJ,yDACI,SAGH,iBACC,iBACE,SACJ,8DAOhBJ,EAAMK,QACAD,aACG,cACC,4EAGM,mFACC,kBAGD,mFACC,0BAOjBJ,EAAMM,UACAF,aACG,cACC,sCAEE,mDACK,wBAMjBJ,EAAMO,QACAH,aACG,sBAEG,sCACK,aAWZN,QAGRU,KAAKC,GAASC,QAAQ,mBAAUlB,EAAYmB,EAAOC,cAAe,UAAU,OAGtEtB,SAASuB,+BAA+Bf,QAAW,UAAU,SAGnEU,KAAKlB,SAASwB,iBAAiB,gBAAgBJ,QAAQ,cACpDK,aAAa,SAAU,eAEvBF,8BAA8Bf,GAAQkB,gBAAgB,WAhL/DC,OAAOC,YACAA,IAAIC,wBAEQ,uBAMjBC,EAAe,qBAGZ7B,iBAAiB,WAAY,cAC5B8B,OAAOzB,UAAU0B,OAAOF,cAIzB7B,iBAAiB,UAAW,YACX,IAAlBgC,EAAMC,gBAMHC,WAAW,oBACLC,cAAc9B,UAAU+B,IAAIP,IACtC,SAIDQ,EAAS,IAAIX,OAAOY,KAAK,kBACpB,QACA,gCACE,qCAEG,uBAGE,qBAGF,aAGR,aACA,OACA,WACA,eACA,OACA,SACA,WACA,WACA,aACA,MACA,wBAGQ,oDAKTD,OAASA,MAGVnB,EAAUnB,SAASwB,iBAAiB,iBACpCd,SACK,cACA,gBACE,gBACF,SAEPC,EAAcgB,OAAOa,SAASC,KAAKC,QAAQ,IAAK,IAC9CC,EAAiBhB,OAAOiB,SAAWjB,OAAOiB,QAAQC,mBA2GlD3B,KAAKC,GAASC,QAAQ,cACjBnB,iBAAiB,QAAS,eACvBO,EAAOa,EAAOyB,aAAa,iBAEvBtC,GAENmC,UACOC,QAAQC,WAAYrC,QAAQ,OAAQA,cAMhDP,iBAAiB,WAAY,YAC5BgC,EAAM5B,OAAS,SAAU4B,EAAM5B,SACrB4B,EAAM5B,MAAMG,QAK1BmC,EAAgB,KACV9B,GAASF,EAAYC,OAGvBC,MACcH,EAAMG,OAIpBF,KAAeD,UACRkC,QAAQG,mBAEDpC,GAEV,GACAE,EAAQ,OAASF,GAKrBA,IAAgBD,EAAMG,SACZF,GAAa,MAQN,YAAzBgB,OAAOa,SAASQ,iBACNC,EAAGC,EAAGC,EAAGC,EAAGC,EAAGC,EAAGC,KACtBC,sBAYoE,OAXtE,GACIP,EAAA,IACA,YACKA,EAAA,GAAKQ,EAAIR,EAAA,GAAKQ,OAASC,KAAKC,cAErC,GAAKC,EAAI,EAAI,IAAIC,OACbX,EAAEY,cAKW,YAJbZ,EAAEa,qBAIW,UAJa,KAC5BC,MAAQ,IACRC,IAEyB,4CADzBC,WAAWC,aAAab,EAAGC,IAC9B5B,OAAQ3B,iBACJoE,GAAG,SAAU,iBAAkB,eAC/BA,GAAG,OAAQ"}
\ No newline at end of file diff --git a/demo/dist/demo.svg b/demo/dist/demo.svg deleted file mode 100644 index 6f09b44b..00000000 --- a/demo/dist/demo.svg +++ /dev/null @@ -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>
\ No newline at end of file diff --git a/demo/error.html b/demo/error.html index 6dc22cb1..915aa4b5 100644 --- a/demo/error.html +++ b/demo/error.html @@ -7,18 +7,18 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Docs styles --> - <link rel="stylesheet" href="dist/demo.css"> + <link rel="stylesheet" href="dist/error.css"> <!-- Preload --> - <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2"> - <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"> </head> <body> <main> <h1>Doh.</h1> <p>Looks like something went wrong.</p> - <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a> + <a href="javascript:history.back()" class="button">Go back</a> </main> </body> diff --git a/demo/index.html b/demo/index.html index b6941537..47714de0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,101 +3,181 @@ <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."> + <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title> + <meta name="description" property="og: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"> + <!-- Icons --> + <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico"> + <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32"> + <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16"> + <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png"> + + <!-- Opengraph --> + <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"> + <meta property="og:site_name" content="Plyr"> + <meta property="og:url" content="https://plyr.io"> + <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png"> + + <!-- Twitter --> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@sam_potts"> + <meta name="twitter:creator" content="@sam_potts"> + <meta name="twitter:card" content="summary_large_image"> <!-- Docs styles --> <link rel="stylesheet" href="dist/demo.css"> <!-- Preload --> - <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2"> - <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"> </head> <body> - <header> - <h1>Plyr</h1> - <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> - <nav> - <ul> - <li> - <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github"> - <svg class="icon"> - <use xlink:href="#icon-github" /> - </svg>Download on GitHub - </a> - </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--large btn--twitter" data-shr-network="twitter"> - <svg class="icon"> - <use xlink:href="#icon-twitter" /> - </svg>Tweet + <div class="grid"> + <header> + <h1>Plyr</h1> + <p>A simple, accessible and customisable media player for + <button type="button" class="faux-link" data-source="video"> + <svg class="icon"> + <title>HTML5</title> + <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path> + </svg>Video</button>, + <button type="button" class="faux-link" data-source="audio"> + <svg class="icon"> + <title>HTML5</title> + <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path> + </svg>Audio</button>, + <button type="button" class="faux-link" data-source="youtube"> + <svg class="icon" role="presentation"> + <title>YouTube</title> + <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 + s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z + M6,11V5l5,3L6,11z"></path> + </svg>YouTube</button> and + <button type="button" class="faux-link" data-source="vimeo"> + <svg class="icon" role="presentation"> + <title>Vimeo</title> + <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 + C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 + c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path> + </svg>Vimeo</button> + </p> + + <!--<p>Monetization options provided by + <a href="https://vi.ai" target="_blank">vi.ai</a> + </p>--> + + <div class="call-to-action"> + <span class="button--with-count"> + <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github"> + <svg class="icon" role="presentation"> + <title>GitHub</title> + <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6 + C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5 + c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1 + c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8 + c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2 + c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path> + </svg> + Download on GitHub </a> - </li> - </ul> - </nav> - </header> + </span> + </div> + </header> - <main role="main" id="main"> - <nav class="btn__bar"> - <ul> - <li class="active"> - <button type="button" class="btn" data-source="video">Video</button> - </li> - <li> - <button type="button" class="btn" data-source="audio">Audio</button> - </li> - <li> - <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> - </li> - <li> - <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button> - </li> - </ul> - </nav> - <section> - <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin> + <main> + <video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> <!-- Video files --> - <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> - <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> + <source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> + <!--<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">--> <!-- Text track file --> - <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" - default> + <track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default> + <track kind="captions" label="Français" srclang="fr" src="media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"> <!-- Fallback for browsers that don't support the <video> element --> - <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a> + <a href="media/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a> </video> <ul> - <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm</small></li> - <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi</small></li> - <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li> - <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li> + <li class="plyr__cite plyr__cite--video" hidden> + <small> + <svg class="icon"> + <title>HTML5</title> + <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path> + </svg> + <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm + </small> + </li> + <li class="plyr__cite plyr__cite--audio" hidden> + <small> + <svg class="icon" title="HTML5"> + <title>HTML5</title> + <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path> + </svg> + <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi + </small> + </li> + <li class="plyr__cite plyr__cite--youtube" hidden> + <small> + <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on + <span class="color--youtube"> + <svg class="icon" role="presentation"> + <title>YouTube</title> + <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 + s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z + M6,11V5l5,3L6,11z"></path> + </svg>YouTube + </span> + </small> + </li> + <li class="plyr__cite plyr__cite--vimeo" hidden> + <small> + <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on + <span class="color--vimeo"> + <svg class="icon" role="presentation"> + <title>Vimeo</title> + <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 + C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 + c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path> + </svg>Vimeo + </span> + </small> + </li> </ul> - </section> - </main> + </main> + </div> + + <aside> + <svg class="icon"> + <title>Twitter</title> + <path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1 + C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7 + c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3 + c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path> + </svg> + <p>If you think Plyr's good, + <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" data-shr-network="twitter">tweet it</a> + </p> + </aside> + + <!-- Polyfills --> + <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,fetch"></script> <!-- Plyr core script --> <script src="../dist/plyr.js"></script> - <!-- Docs script --> - <script src="dist/demo.js"></script> + <!-- Sharing libary (https://shr.one) --> + <script src="https://cdn.shr.one/1.0.1/shr.js"></script> <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) --> <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script> - <!-- Sharing libary (https://shr.one) --> - <script src="https://cdn.shr.one/1.0.1/shr.js"></script> - <script> - if (window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); } - </script> + <!-- Docs script --> + <script src="dist/demo.js"></script> </body> </html>
\ No newline at end of file diff --git a/demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt b/demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt new file mode 100644 index 00000000..5da5f307 --- /dev/null +++ b/demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt @@ -0,0 +1,29 @@ +WEBVTT FILE + +1 +00:00:09.500 --> 00:00:12.000 +The ocean floor rises 5 miles to the shores + +2 +00:00:12.001 --> 00:00:16.500 +of what people call, the seven mile miracle + +3 +00:00:25.500 --> 00:00:28.000 +What would it be like to be born on this island? + +4 +00:00:32.500 --> 00:00:34.500 +To grow up on these shores + +5 +00:00:37.500 --> 00:00:40.000 +To witness this water, every day + +6 +00:00:43.500 --> 00:00:46.000 +You're about to meet someone, who did + +7 +00:02:45.500 --> 00:02:49.000 +This is a film about John John Florence
\ No newline at end of file diff --git a/demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt b/demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt new file mode 100644 index 00000000..52e3af7d --- /dev/null +++ b/demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt @@ -0,0 +1,29 @@ +WEBVTT FILE + +1 +00:00:09.500 --> 00:00:12.000 +Le fond de l'océan monte 5 miles des rives + +2 +00:00:12.001 --> 00:00:16.500 +de ce que les gens appellent le miracle de sept mile + +3 +00:00:25.500 --> 00:00:28.000 +Que serait-il d'être né sur cette île? + +4 +00:00:32.500 --> 00:00:34.500 +Pour grandir sur ces rivages + +5 +00:00:37.500 --> 00:00:40.000 +Pour assister à cette eau, tous les jours + +6 +00:00:43.500 --> 00:00:46.000 +Vous êtes sur le point de rencontrer quelqu'un, qui ne + +7 +00:02:45.500 --> 00:02:49.000 +Ceci est un film sur John John Florence
\ No newline at end of file diff --git a/demo/media/View_From_A_Blue_Moon_Trailer-HD.jpg b/demo/media/View_From_A_Blue_Moon_Trailer-HD.jpg Binary files differnew file mode 100644 index 00000000..9e7b883c --- /dev/null +++ b/demo/media/View_From_A_Blue_Moon_Trailer-HD.jpg diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js new file mode 100644 index 00000000..ee52dfd8 --- /dev/null +++ b/demo/src/js/demo.js @@ -0,0 +1,255 @@ +// ========================================================================== +// Plyr.io demo +// This code is purely for the https://plyr.io website +// Please see readme.md in the root or github.com/sampotts/plyr +// ========================================================================== + +document.addEventListener('DOMContentLoaded', () => { + if (window.shr) { + window.shr.setup({ + count: { + classname: 'button__count', + }, + }); + } + + // Setup tab focus + const tabClassName = 'tab-focus'; + + // Remove class on blur + document.addEventListener('focusout', event => { + event.target.classList.remove(tabClassName); + }); + + // Add classname to tabbed elements + document.addEventListener('keydown', event => { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + window.setTimeout(() => { + document.activeElement.classList.add(tabClassName); + }, 0); + }); + + // Setup the player + const player = new window.Plyr('#player', { + debug: true, + title: 'View From A Blue Moon', + iconUrl: '../dist/plyr.svg', + keyboard: { + global: true, + }, + tooltips: { + controls: true, + }, + captions: { + active: true, + }, + controls: [ + 'play-large', + 'play', + 'progress', + 'current-time', + 'mute', + 'volume', + 'captions', + 'settings', + 'fullscreen', + 'pip', + 'airplay', + ], + keys: { + google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', + }, + }); + + // Expose for testing + window.player = player; + + // Setup type toggle + const buttons = document.querySelectorAll('[data-source]'); + const types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo', + }; + let currentType = window.location.hash.replace('#', ''); + const historySupport = window.history && window.history.pushState; + + // Toggle class on an element + function toggleClass(element, className, state) { + if (element) { + element.classList[state ? 'add' : 'remove'](className); + } + } + + // Set a new source + function newSource(type, init) { + // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video + if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { + return; + } + + switch (type) { + case types.video: + player.source = { + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4', + }], + poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [ + { + kind: 'captions', + label: 'English', + srclang: 'en', + src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true, + }, + { + kind: 'captions', + label: 'French', + srclang: 'fr', + src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + }, + ], + }; + + break; + + case types.audio: + player.source = { + type: 'audio', + title: 'Kishi Bashi – “It All Began With A Burst”', + sources: [ + { + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + type: 'audio/mp3', + }, + { + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + type: 'audio/ogg', + }, + ], + }; + + break; + + case types.youtube: + player.source = { + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', + provider: 'youtube', + }], + }; + + break; + + case types.vimeo: + player.source = { + type: 'video', + sources: [{ + src: 'https://vimeo.com/76979871', + provider: 'vimeo', + }], + }; + + break; + + default: + break; + } + + // Set the current type for next time + currentType = type; + + // Remove active classes + Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); + + // Set active on parent + toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); + + // Show cite + Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { + cite.setAttribute('hidden', ''); + }); + document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden'); + } + + // Bind to each button + Array.from(buttons).forEach(button => { + button.addEventListener('click', () => { + const type = button.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + window.history.pushState({ type }, '', `#${type}`); + } + }); + }); + + // List for backwards/forwards + window.addEventListener('popstate', event => { + if (event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if (historySupport) { + const video = !currentType.length; + + // If there's no current type set, assume video + if (video) { + currentType = types.video; + } + + // Replace current history state + if (currentType in types) { + window.history.replaceState( + { + type: currentType, + }, + '', + video ? '' : `#${currentType}` + ); + } + + // If it's not video, load the source + if (currentType !== types.video) { + newSource(currentType, true); + } + } +}); + +// Google analytics +// For demo site (https://plyr.io) only +/* eslint-disable */ +if (window.location.host === 'plyr.io') { + (function(i, s, o, g, r, a, m) { + i.GoogleAnalyticsObject = r; + i[r] = + i[r] || + function() { + (i[r].q = i[r].q || []).push(arguments); + }; + i[r].l = 1 * new Date(); + a = s.createElement(o); + m = s.getElementsByTagName(o)[0]; + a.async = 1; + a.src = g; + m.parentNode.insertBefore(a, m); + })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); + window.ga('create', 'UA-40881672-11', 'auto'); + window.ga('send', 'pageview'); +} +/* eslint-enable */ diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js deleted file mode 100644 index eac1e99e..00000000 --- a/demo/src/js/lib/classlist.js +++ /dev/null @@ -1,237 +0,0 @@ -/* - * classList.js: Cross-browser full element.classList implementation. - * 1.1.20150312 - * - * By Eli Grey, http://eligrey.com - * License: Dedicated to the public domain. - * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md - */ - -/*global self, document, DOMException */ - -/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ - -if ("document" in self) { - -// Full polyfill for browsers with no classList support -if (!("classList" in document.createElement("_"))) { - -(function (view) { - -"use strict"; - -if (!('Element' in view)) return; - -var - classListProp = "classList" - , protoProp = "prototype" - , elemCtrProto = view.Element[protoProp] - , objCtr = Object - , strTrim = String[protoProp].trim || function () { - return this.replace(/^\s+|\s+$/g, ""); - } - , arrIndexOf = Array[protoProp].indexOf || function (item) { - var - i = 0 - , len = this.length - ; - for (; i < len; i++) { - if (i in this && this[i] === item) { - return i; - } - } - return -1; - } - // Vendors: please allow content code to instantiate DOMExceptions - , DOMEx = function (type, message) { - this.name = type; - this.code = DOMException[type]; - this.message = message; - } - , checkTokenAndGetIndex = function (classList, token) { - if (token === "") { - throw new DOMEx( - "SYNTAX_ERR" - , "An invalid or illegal string was specified" - ); - } - if (/\s/.test(token)) { - throw new DOMEx( - "INVALID_CHARACTER_ERR" - , "String contains an invalid character" - ); - } - return arrIndexOf.call(classList, token); - } - , ClassList = function (elem) { - var - trimmedClasses = strTrim.call(elem.getAttribute("class") || "") - , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] - , i = 0 - , len = classes.length - ; - for (; i < len; i++) { - this.push(classes[i]); - } - this._updateClassName = function () { - elem.setAttribute("class", this.toString()); - }; - } - , classListProto = ClassList[protoProp] = [] - , classListGetter = function () { - return new ClassList(this); - } -; -// Most DOMException implementations don't allow calling DOMException's toString() -// on non-DOMExceptions. Error's toString() is sufficient here. -DOMEx[protoProp] = Error[protoProp]; -classListProto.item = function (i) { - return this[i] || null; -}; -classListProto.contains = function (token) { - token += ""; - return checkTokenAndGetIndex(this, token) !== -1; -}; -classListProto.add = function () { - var - tokens = arguments - , i = 0 - , l = tokens.length - , token - , updated = false - ; - do { - token = tokens[i] + ""; - if (checkTokenAndGetIndex(this, token) === -1) { - this.push(token); - updated = true; - } - } - while (++i < l); - - if (updated) { - this._updateClassName(); - } -}; -classListProto.remove = function () { - var - tokens = arguments - , i = 0 - , l = tokens.length - , token - , updated = false - , index - ; - do { - token = tokens[i] + ""; - index = checkTokenAndGetIndex(this, token); - while (index !== -1) { - this.splice(index, 1); - updated = true; - index = checkTokenAndGetIndex(this, token); - } - } - while (++i < l); - - if (updated) { - this._updateClassName(); - } -}; -classListProto.toggle = function (token, force) { - token += ""; - - var - result = this.contains(token) - , method = result ? - force !== true && "remove" - : - force !== false && "add" - ; - - if (method) { - this[method](token); - } - - if (force === true || force === false) { - return force; - } else { - return !result; - } -}; -classListProto.toString = function () { - return this.join(" "); -}; - -if (objCtr.defineProperty) { - var classListPropDesc = { - get: classListGetter - , enumerable: true - , configurable: true - }; - try { - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } catch (ex) { // IE 8 doesn't support enumerable:true - if (ex.number === -0x7FF5EC54) { - classListPropDesc.enumerable = false; - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } - } -} else if (objCtr[protoProp].__defineGetter__) { - elemCtrProto.__defineGetter__(classListProp, classListGetter); -} - -}(self)); - -} else { -// There is full or partial native classList support, so just check if we need -// to normalize the add/remove and toggle APIs. - -(function () { - "use strict"; - - var testElement = document.createElement("_"); - - testElement.classList.add("c1", "c2"); - - // Polyfill for IE 10/11 and Firefox <26, where classList.add and - // classList.remove exist but support only one argument at a time. - if (!testElement.classList.contains("c2")) { - var createMethod = function(method) { - var original = DOMTokenList.prototype[method]; - - DOMTokenList.prototype[method] = function(token) { - var i, len = arguments.length; - - for (i = 0; i < len; i++) { - token = arguments[i]; - original.call(this, token); - } - }; - }; - createMethod('add'); - createMethod('remove'); - } - - testElement.classList.toggle("c3", false); - - // Polyfill for IE 10 and Firefox <24, where classList.toggle does not - // support the second argument. - if (testElement.classList.contains("c3")) { - var _toggle = DOMTokenList.prototype.toggle; - - DOMTokenList.prototype.toggle = function(token, force) { - if (1 in arguments && !this.contains(token) === !force) { - return force; - } else { - return _toggle.call(this, token); - } - }; - - } - - testElement = null; -}()); - -} - -}
\ No newline at end of file diff --git a/demo/src/js/main.js b/demo/src/js/main.js deleted file mode 100644 index 7d732dcd..00000000 --- a/demo/src/js/main.js +++ /dev/null @@ -1,203 +0,0 @@ -// ========================================================================== -// Plyr.io demo -// This code is purely for the plyr.io website -// Please see readme.md in the root or github.com/selz/plyr -// ========================================================================== - -/*global plyr*/ - -// General functions -(function() { - //document.body.addEventListener('ready', function(event) { console.log(event); }); - - // Setup the player - var instances = plyr.setup({ - debug: true, - title: "Video demo", - iconUrl: "../dist/plyr.svg", - tooltips: { - controls: true - }, - captions: { - defaultActive: true - } - }); - plyr.loadSprite("dist/demo.svg"); - - // Plyr returns an array regardless - var player = instances[0]; - - // Setup type toggle - var buttons = document.querySelectorAll("[data-source]"), - types = { - video: "video", - audio: "audio", - youtube: "youtube", - vimeo: "vimeo" - }, - currentType = window.location.hash.replace("#", ""), - historySupport = window.history && window.history.pushState; - - // Bind to each button - for (var i = buttons.length - 1; i >= 0; i--) { - buttons[i].addEventListener("click", function() { - var type = this.getAttribute("data-source"); - - newSource(type); - - if (historySupport) { - history.pushState({ type: type }, "", "#" + type); - } - }); - } - - // List for backwards/forwards - window.addEventListener("popstate", function(event) { - if (event.state && "type" in event.state) { - newSource(event.state.type); - } - }); - - // On load - if (historySupport) { - var video = !currentType.length; - - // If there's no current type set, assume video - if (video) { - currentType = types.video; - } - - // Replace current history state - if (currentType in types) { - history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType); - } - - // If it's not video, load the source - if (currentType !== types.video) { - newSource(currentType, true); - } - } - - // Toggle class on an element - function toggleClass(element, className, state) { - if (element) { - if (element.classList) { - element.classList[state ? "add" : "remove"](className); - } else { - var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", ""); - element.className = name + (state ? " " + className : ""); - } - } - } - - // Set a new source - function newSource(type, init) { - // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video - if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { - return; - } - - switch (type) { - case types.video: - player.source({ - type: "video", - title: "View From A Blue Moon", - sources: [ - { - src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4", - type: "video/mp4" - }, - { - src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm", - type: "video/webm" - } - ], - poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg", - tracks: [ - { - kind: "captions", - label: "English", - srclang: "en", - src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt", - default: true - } - ] - }); - break; - - case types.audio: - player.source({ - type: "audio", - title: "Kishi Bashi – “It All Began With A Burst”", - sources: [ - { - src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3", - type: "audio/mp3" - }, - { - src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg", - type: "audio/ogg" - } - ] - }); - break; - - case types.youtube: - player.source({ - type: "video", - title: "View From A Blue Moon", - sources: [ - { - src: "bTqVqk7FSmY", - type: "youtube" - } - ] - }); - break; - - case types.vimeo: - player.source({ - type: "video", - title: "View From A Blue Moon", - sources: [ - { - src: "147865858", - type: "vimeo" - } - ] - }); - break; - } - - // Set the current type for next time - currentType = type; - - // Remove active classes - for (var x = buttons.length - 1; x >= 0; x--) { - toggleClass(buttons[x].parentElement, "active", false); - } - - // Set active on parent - toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, "active", true); - } -})(); - -// Google analytics -// For demo site (http://[www.]plyr.io) only -if (document.domain.indexOf("plyr.io") > -1) { - (function(i, s, o, g, r, a, m) { - i.GoogleAnalyticsObject = r; - (i[r] = - i[r] || - function() { - (i[r].q = i[r].q || []).push(arguments); - }), - (i[r].l = 1 * new Date()); - (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); - a.async = 1; - a.src = g; - m.parentNode.insertBefore(a, m); - })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga"); - ga("create", "UA-40881672-11", "auto"); - ga("send", "pageview"); -} diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less deleted file mode 100644 index 502196cf..00000000 --- a/demo/src/less/components/base.less +++ /dev/null @@ -1,48 +0,0 @@ -// ========================================================================== -// Base layout -// ========================================================================== - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Hidden -[hidden] { - display: none; -} - -// Base -html { - height: 100%; - background: @body-background fixed; -} -body { - margin: 0; - padding: (@padding-base / 2); -} - -// 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 { - max-width: @example-width-video; - margin: 0 auto @padding-base; - - @media (min-width: @screen-sm) { - margin-bottom: (@padding-base * 2); - } -}
\ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less deleted file mode 100644 index c99a0836..00000000 --- a/demo/src/less/components/buttons.less +++ /dev/null @@ -1,172 +0,0 @@ -// ========================================================================== -// 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; - white-space: nowrap; - - &::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; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - 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; - user-select: none; - font-weight: @font-weight-bold; -} - -// Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// Sizes -.btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); -} - -// Styles -.btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - 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--youtube .icon { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; -} - -// Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - 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%); - } -} diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less deleted file mode 100644 index 951be36d..00000000 --- a/demo/src/less/components/type.less +++ /dev/null @@ -1,75 +0,0 @@ -// ========================================================================== -// 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; - .font-smoothing(); -} - -// Headings -h1, -h2 { - letter-spacing: -.025em; - color: @brand-primary; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - font-weight: @font-weight-bold; -} -h1 { - .font-size(@font-size-h1); -} - -// Paragraph and small -p, -small { - margin: 0 0 @padding-base; -} -small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(@font-size-small); -} - -// Lists -ul, -li { - list-style: none; - margin: 0; - padding: 0; -} - -// Links -a { - text-decoration: none; - color: @link-color; - border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; - - &:hover, - &:focus { - color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); - } - &:focus { - .tab-focus(); - } - &.logo { - border: 0; - } -} - -.color--vimeo { - color: @color-vimeo; -} -.color--youtube { - color: @color-youtube; -} diff --git a/demo/src/less/demo.less b/demo/src/less/demo.less deleted file mode 100644 index ac15a3c0..00000000 --- a/demo/src/less/demo.less +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// Plyr.io Demo Page -// ========================================================================== - -// CSS Reset -@import "lib/normalize.less"; - -// Mixins -@import "lib/mixins.less"; - -// Variables -@import "variables.less"; - -// Animation -@import "lib/animation.less"; - -// Type -@import "lib/fontface.less"; -@import "components/type.less"; - -// Components -@import "components/base.less"; -@import "components/icons.less"; -@import "components/buttons.less"; -@import "components/error.less"; -@import "components/examples.less"; diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less deleted file mode 100644 index 82a2a160..00000000 --- a/demo/src/less/lib/fontface.less +++ /dev/null @@ -1,18 +0,0 @@ -// ========================================================================== -// Fonts -// ========================================================================== - -@font-face { - font-family: 'Avenir'; - src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff'); - font-style: normal; - font-weight: @font-weight-base; - font-display: swap; -} -@font-face { - font-family: 'Avenir'; - src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff'); - font-style: normal; - font-weight: @font-weight-bold; - font-display: swap; -} diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less deleted file mode 100644 index 923df1ea..00000000 --- a/demo/src/less/lib/mixins.less +++ /dev/null @@ -1,41 +0,0 @@ -// ========================================================================== -// Mixins -// ========================================================================== - -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ -// --------------------------------------- -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } -} - -// Webkit-style focus -// --------------------------------------- -.tab-focus() { - // Default - outline: thin dotted @gray-dark; - // Webkit - outline-offset: 1px; -} - -// Use rems for font sizing -// Leave <body> at 100%/16px -// --------------------------------------- -.font-size(@font-size: 16){ - @rem: round((@font-size / 16), 3); - font-size: (@font-size * 1px); - font-size: ~"@{rem}rem"; -} - -// 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; -}
\ No newline at end of file diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less deleted file mode 100644 index 4768cdd6..00000000 --- a/demo/src/less/variables.less +++ /dev/null @@ -1,48 +0,0 @@ -// ========================================================================== -// Variables -// ========================================================================== - -// Colors -@gray-dark: #343f4a; -@gray: #55646b; -@gray-light: #cbd0d3; -@gray-lighter: #dbe3e8; -@off-white: #f2f5f7; - -@brand-primary: #3498db; -@brand-secondary: #02BD9B; - -// Brands -@color-twitter: #4BAAF4; -@color-youtube: #cc181e; -@color-vimeo: #19b7ed; - -// Base -@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); - -// Type -@font-size-base: 16; -@font-size-small: 14; -@font-size-h1: 64; -@font-weight-base: 500; -@font-weight-bold: 700; - -// Elements -@link-color: @brand-primary; -@padding-base: 20px; -@arrow-size: 8px; - -// Icons -@icon-size: 18px; - -// Breakpoints -@screen-sm: 480px; -@screen-md: 768px; - -// Radii -@border-radius-base: 4px; -@border-radius-large: 6px; - -// Examples -@example-width-audio: 520px; -@example-width-video: 1200px; diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss new file mode 100644 index 00000000..96438483 --- /dev/null +++ b/demo/src/sass/bundles/demo.scss @@ -0,0 +1,41 @@ +// ========================================================================== +// Plyr.io Demo Page +// ========================================================================== +@charset 'UTF-8'; + +// Settings +@import '../settings/breakpoints'; +@import '../settings/colors'; +@import '../settings/cosmetic'; +@import '../settings/icons'; +@import '../settings/layout'; +@import '../settings/plyr'; +@import '../settings/spacing'; +@import '../settings/type'; + +// Libs +@import '../lib/fontface'; +@import '../lib/animation'; +@import '../lib/mixins'; +@import '../lib/normalize'; +@import '../lib/reset'; + +// Layout +@import '../layout/core'; +@import '../layout/grid'; + +// Type +@import '../type/base'; +@import '../type/headings'; + +// Components +@import '../components/buttons'; +@import '../components/header'; +@import '../components/icons'; +@import '../components/links'; +@import '../components/lists'; +@import '../components/navigation'; +@import '../components/players'; + +// Plyr +@import '../../../../src/sass/plyr'; diff --git a/demo/src/sass/bundles/error.scss b/demo/src/sass/bundles/error.scss new file mode 100644 index 00000000..29c98947 --- /dev/null +++ b/demo/src/sass/bundles/error.scss @@ -0,0 +1,29 @@ +// ========================================================================== +// Plyr.io Error Page +// ========================================================================== +@charset 'UTF-8'; + +// Libs +@import '../lib/fontface'; +@import '../lib/mixins'; +@import '../lib/normalize'; +@import '../lib/reset'; + +// Settings +@import '../settings/colors'; +@import '../settings/cosmetic'; +@import '../settings/icons'; +@import '../settings/layout'; +@import '../settings/spacing'; +@import '../settings/type'; + +// Layout +@import '../layout/error'; + +// Type +@import '../type/base'; +@import '../type/headings'; + +// Components +@import '../components/buttons'; +@import '../components/links'; diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss new file mode 100644 index 00000000..db821ad3 --- /dev/null +++ b/demo/src/sass/components/buttons.scss @@ -0,0 +1,83 @@ +// ========================================================================== +// Buttons +// ========================================================================== + +// Shared +.button, +.button__count { + align-items: center; + background: #fff; + border: 0; + border-radius: $border-radius-base; + box-shadow: 0 1px 1px rgba(#000, 0.1); + color: $gray; + display: inline-flex; + padding: ($spacing-base * 0.75); + position: relative; + text-shadow: none; + user-select: none; + vertical-align: middle; +} + +// Buttons +.button { + font-weight: $font-weight-bold; + padding-left: $spacing-base; + padding-right: $spacing-base; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: $gray-dark; + + // Remove the underline/border + &::after { + display: none; + } + } + + &:hover { + box-shadow: 0 2px 2px rgba(#000, 0.1); + transform: translateY(-1px); + } + + &:focus { + outline: 0; + } + + &.tab-focus { + @include tab-focus(); + } + + &:active { + transform: translateY(1px); + } +} + +// Button group +.button--with-count { + display: inline-flex; + + .button .icon { + flex-shrink: 0; + } +} + +// Count bubble +.button__count { + animation: fadein 0.2s ease; + margin-left: ($spacing-base / 2); + + &::before { + border: $arrow-size solid transparent; + border-left-width: 0; + border-right-color: #fff; + content: ''; + height: 0; + position: absolute; + right: 100%; + top: 50%; + transform: translateY(-50%); + width: 0; + } +} diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss new file mode 100644 index 00000000..eab2214e --- /dev/null +++ b/demo/src/sass/components/header.scss @@ -0,0 +1,19 @@ +// ========================================================================== +// Header +// ========================================================================== + +header { + padding-bottom: $spacing-base; + text-align: center; + + .call-to-action { + margin-top: ($spacing-base * 1.5); + } + + @media only screen and (min-width: $screen-md) { + margin-right: ($spacing-base * 3); + max-width: 360px; + padding-bottom: ($spacing-base * 2); + text-align: left; + } +} diff --git a/demo/src/less/components/icons.less b/demo/src/sass/components/icons.scss index 9530b601..b2b353a6 100644 --- a/demo/src/less/components/icons.less +++ b/demo/src/sass/components/icons.scss @@ -4,23 +4,20 @@ // Base size icon styles .icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; + fill: currentColor; + height: $icon-size; + vertical-align: -3px; + width: $icon-size; } // Within elements a svg, button svg, label svg { - pointer-events: none; + pointer-events: none; } + a .icon, .btn .icon { - margin-right: (@padding-base / 2); -} -.btn:not(.btn-large) .icon { - width: (@icon-size - 2); - height: (@icon-size - 2); + margin-right: floor($spacing-base / 3); } diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss new file mode 100644 index 00000000..25780b41 --- /dev/null +++ b/demo/src/sass/components/links.scss @@ -0,0 +1,45 @@ +// ========================================================================== +// Links +// ========================================================================== + +// Make a <button> look like an <a> +button.faux-link { + @extend a; // stylelint-disable-line + @include cancel-button-styles(); +} + +// Links +a { + border-bottom: 1px dotted currentColor; + color: $color-link; + font-weight: $font-weight-bold; + position: relative; + text-decoration: none; + transition: all 0.2s ease; + + &::after { + background: currentColor; + content: ''; + height: 1px; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%); + transition: width 0.2s ease; + width: 0; + } + + &:hover, + &:focus { + border-bottom-color: transparent; + outline: 0; + + &::after { + width: 100%; + } + } + + &.tab-focus { + @include tab-focus(); + } +} diff --git a/demo/src/sass/components/lists.scss b/demo/src/sass/components/lists.scss new file mode 100644 index 00000000..bae3d11d --- /dev/null +++ b/demo/src/sass/components/lists.scss @@ -0,0 +1,11 @@ +// ========================================================================== +// Lists +// ========================================================================== + +// Lists +ul, +li { + list-style: none; + margin: 0; + padding: 0; +} diff --git a/demo/src/sass/components/navigation.scss b/demo/src/sass/components/navigation.scss new file mode 100644 index 00000000..fe14c000 --- /dev/null +++ b/demo/src/sass/components/navigation.scss @@ -0,0 +1,9 @@ +// ========================================================================== +// Navigation +// ========================================================================== + +nav { + display: flex; + justify-content: center; + margin-bottom: $spacing-base; +} diff --git a/demo/src/less/components/examples.less b/demo/src/sass/components/players.scss index a9e72d21..90e2bc94 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/sass/components/players.scss @@ -10,31 +10,34 @@ video { // Example players .plyr { - margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; + border-radius: $border-radius-base; + box-shadow: 0 2px 5px rgba(#000, 0.2); + margin: $spacing-base auto; + + &.plyr--audio { + max-width: 480px; + } } + .plyr__video-wrapper::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; + border: 1px solid rgba(#000, 0.15); + border-radius: inherit; bottom: 0; + content: ''; left: 0; + pointer-events: none; + position: absolute; right: 0; - border: 1px solid fade(#000, 15%); - border-radius: inherit; + top: 0; } // Style full supported player .plyr__cite { display: none; - margin-top: @padding-base; + margin-top: $spacing-base; .icon { - margin-right: (@padding-base / 4); + margin-right: ceil($spacing-base / 6); } } diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss new file mode 100644 index 00000000..c4d9a445 --- /dev/null +++ b/demo/src/sass/layout/core.scss @@ -0,0 +1,63 @@ +// ========================================================================== +// Core +// ========================================================================== + +html, +body { + display: flex; + width: 100%; +} + +html { + background: $page-background; + background-attachment: fixed; + height: 100%; +} + +body { + align-items: center; + display: flex; + flex-direction: column; + min-height: 100%; +} + +.grid { + flex: 1; + overflow: auto; +} + +main { + margin: auto; + text-align: center; +} + +aside { + align-items: center; + background: #fff; + color: $gray; + display: flex; + flex-shrink: 0; + justify-content: center; + padding: ($spacing-base * 0.75); + position: relative; + text-align: center; + text-shadow: none; + width: 100%; + + .icon { + fill: $color-twitter; + margin-right: ($spacing-base / 2); + } + + p { + margin: 0; + } + + a { + color: $color-twitter; + + &.tab-focus { + @include tab-focus($color-twitter); + } + } +} diff --git a/demo/src/less/components/error.less b/demo/src/sass/layout/error.scss index b1427173..385ecbf3 100644 --- a/demo/src/less/components/error.less +++ b/demo/src/sass/layout/error.scss @@ -7,13 +7,24 @@ html.error, .error body { height: 100%; } + +html.error { + background: $page-background; + background-attachment: fixed; +} + .error body { + align-items: center; + display: flex; width: 100%; - display: table; - table-layout: fixed; } + .error main { - display: table-cell; + padding: $spacing-base; + text-align: center; width: 100%; - vertical-align: middle; -}
\ No newline at end of file + + p { + @include font-size($font-size-large); + } +} diff --git a/demo/src/sass/layout/grid.scss b/demo/src/sass/layout/grid.scss new file mode 100644 index 00000000..40dd829e --- /dev/null +++ b/demo/src/sass/layout/grid.scss @@ -0,0 +1,19 @@ +// ========================================================================== +// Super basic grid +// ========================================================================== + +.grid { + margin: 0 auto; + padding: $spacing-base; + + @media only screen and (min-width: $screen-md) { + align-items: center; + display: flex; + max-width: $container-max-width; + width: 100%; + + > * { + flex: 1; + } + } +} diff --git a/demo/src/less/lib/animation.less b/demo/src/sass/lib/animation.scss index 386c6613..3c14b0a7 100644 --- a/demo/src/less/lib/animation.less +++ b/demo/src/sass/lib/animation.scss @@ -3,7 +3,11 @@ // ========================================================================== // Fade -@keyframes fade-in { - 0% { opacity: 0 } - 100% { opacity: 1 } -}
\ No newline at end of file +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/demo/src/sass/lib/fontface.scss b/demo/src/sass/lib/fontface.scss new file mode 100644 index 00000000..e7e4edf8 --- /dev/null +++ b/demo/src/sass/lib/fontface.scss @@ -0,0 +1,45 @@ +// ========================================================================== +// Fonts +// ========================================================================== + +@font-face { + font-display: swap; + font-family: 'Gordita'; + font-style: normal; + font-weight: $font-weight-light; + src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff'); +} + +@font-face { + font-display: swap; + font-family: 'Gordita'; + font-style: normal; + font-weight: $font-weight-regular; + src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'), + url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff'); +} + +@font-face { + font-display: swap; + font-family: 'Gordita'; + font-style: normal; + font-weight: $font-weight-medium; + src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'), + url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff'); +} + +@font-face { + font-display: swap; + font-family: 'Gordita'; + font-style: normal; + font-weight: $font-weight-bold; + src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff'); +} + +@font-face { + font-display: swap; + font-family: 'Gordita'; + font-style: normal; + font-weight: $font-weight-black; + src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff'); +} diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss new file mode 100644 index 00000000..cdfcb87d --- /dev/null +++ b/demo/src/sass/lib/mixins.scss @@ -0,0 +1,54 @@ +// ========================================================================== +// Mixins +// ========================================================================== + +// Convert a <button> into an <a> +// --------------------------------------- +@mixin cancel-button-styles() { + background: transparent; + border: 0; + border-radius: 0; + cursor: pointer; + font: inherit; + line-height: $line-height-base; + margin: 0; + padding: 0; + position: relative; + text-align: inherit; + text-shadow: inherit; + -moz-user-select: text; // stylelint-disable-line + vertical-align: baseline; + width: auto; +} + +// Nicer focus styles +// --------------------------------------- +@mixin tab-focus($color: $tab-focus-default-color) { + box-shadow: 0 0 0 3px rgba($color, 0.35); + outline: 0; +} + +// Use rems for font sizing +// Leave <body> at 100%/16px +// --------------------------------------- +@function calculate-rem($size) { + $rem: $size / 16; + @return #{$rem}rem; +} + +@mixin font-size($size: 16) { + font-size: $size * 1px; // Fallback in px + font-size: calculate-rem($size); +} + +// Font smoothing +// --------------------------------------- +@mixin font-smoothing($enabled: true) { + @if $enabled { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } @else { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } +} diff --git a/demo/src/less/lib/normalize.less b/demo/src/sass/lib/normalize.scss index 562891ab..34743e73 100644 --- a/demo/src/less/lib/normalize.less +++ b/demo/src/sass/lib/normalize.scss @@ -189,7 +189,7 @@ pre { */ q { - quotes: "\201C" "\201D" "\2018" "\2019"; + quotes: '\201C' '\201D' '\2018' '\2019'; } /** @@ -322,9 +322,9 @@ select { */ button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { +html input[type='button'], +input[type='reset'], +input[type='submit'] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } @@ -343,8 +343,8 @@ html input[disabled] { * 2. Remove excess padding in IE 8/9/10. */ -input[type="checkbox"], -input[type="radio"] { +input[type='checkbox'], +input[type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -355,7 +355,7 @@ input[type="radio"] { * (include `-moz` to future-proof). */ -input[type="search"] { +input[type='search'] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ @@ -367,8 +367,8 @@ input[type="search"] { * on OS X. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } @@ -403,4 +403,4 @@ textarea { table { border-collapse: collapse; border-spacing: 0; -}
\ No newline at end of file +} diff --git a/demo/src/sass/lib/reset.scss b/demo/src/sass/lib/reset.scss new file mode 100644 index 00000000..50798b10 --- /dev/null +++ b/demo/src/sass/lib/reset.scss @@ -0,0 +1,11 @@ +// ========================================================================== +// Resets +// ========================================================================== + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, +*::after, +*::before { + box-sizing: border-box; +} diff --git a/demo/src/sass/settings/breakpoints.scss b/demo/src/sass/settings/breakpoints.scss new file mode 100644 index 00000000..65940ad6 --- /dev/null +++ b/demo/src/sass/settings/breakpoints.scss @@ -0,0 +1,6 @@ +// ========================================================================== +// Breakpoints +// ========================================================================== + +$screen-sm: 480px; +$screen-md: 768px; diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss new file mode 100644 index 00000000..aa1c96ee --- /dev/null +++ b/demo/src/sass/settings/colors.scss @@ -0,0 +1,27 @@ +// ========================================================================== +// Colors +// ========================================================================== + +// Greyscale +$gray-dark: #343f4a; +$gray: #55646b; +$gray-light: #cbd0d3; +$gray-lighter: #dbe3e8; +$off-white: #f2f5f7; + +// Text +$color-text: #fff; + +// Plyr +$color-brand-primary: #1aafff; + +// Brands +$color-twitter: #4baaf4; +$color-youtube: #cc181e; +$color-vimeo: #19b7ed; + +// Elements +$color-link: #fff; + +// Focus +$tab-focus-default-color: #fff; diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss new file mode 100644 index 00000000..dee536e5 --- /dev/null +++ b/demo/src/sass/settings/cosmetic.scss @@ -0,0 +1,12 @@ +// ========================================================================== +// Misc cosmetic +// ========================================================================== + +// Button count arrow size +$arrow-size: 5px; + +// Radii +$border-radius-base: 4px; + +// Background +$page-background: linear-gradient(to left top, lighten($color-brand-primary, 10%), darken($color-brand-primary, 20%)); diff --git a/demo/src/sass/settings/icons.scss b/demo/src/sass/settings/icons.scss new file mode 100644 index 00000000..ad16a645 --- /dev/null +++ b/demo/src/sass/settings/icons.scss @@ -0,0 +1,5 @@ +// ========================================================================== +// Icons +// ========================================================================== + +$icon-size: 16px; diff --git a/demo/src/sass/settings/layout.scss b/demo/src/sass/settings/layout.scss new file mode 100644 index 00000000..8d1fbd28 --- /dev/null +++ b/demo/src/sass/settings/layout.scss @@ -0,0 +1,5 @@ +// ========================================================================== +// Layout +// ========================================================================== + +$container-max-width: 1280px; diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss new file mode 100644 index 00000000..3d30ce71 --- /dev/null +++ b/demo/src/sass/settings/plyr.scss @@ -0,0 +1,18 @@ +// ========================================================================== +// Plyr Settings +// ========================================================================== + +// Font +$plyr-font-family: inherit; + +// Sizes +$plyr-font-size-base: 13px; +$plyr-font-size-small: 12px; +$plyr-font-size-time: 11px; +$plyr-font-size-badges: 9px; + +// Captions +$plyr-font-size-captions-base: $plyr-font-size-base; +$plyr-font-size-captions-small: $plyr-font-size-small; +$plyr-font-size-captions-medium: 18px; +$plyr-font-size-captions-large: 21px; diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss new file mode 100644 index 00000000..a19b0a95 --- /dev/null +++ b/demo/src/sass/settings/spacing.scss @@ -0,0 +1,5 @@ +// ========================================================================== +// Colors +// ========================================================================== + +$spacing-base: 20px; diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss new file mode 100644 index 00000000..e8f0b2c8 --- /dev/null +++ b/demo/src/sass/settings/type.scss @@ -0,0 +1,20 @@ +// ========================================================================== +// Typography +// ========================================================================== + +$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif; + +$font-size-base: 15; +$font-size-small: 13; +$font-size-large: 18; +$font-size-h1: 64; + +$font-weight-light: 300; +$font-weight-regular: 400; +$font-weight-medium: 500; +$font-weight-bold: 600; +$font-weight-black: 900; + +$line-height-base: 1.75; + +$letter-spacing-headings: -0.025em; diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss new file mode 100644 index 00000000..452298bd --- /dev/null +++ b/demo/src/sass/type/base.scss @@ -0,0 +1,35 @@ +// ========================================================================== +// Base +// ========================================================================== + +// Set to 100% for rem sizing +html { + font-size: 100%; +} + +body { + @include font-smoothing(); + @include font-size($font-size-base); + color: $color-text; + font-family: $font-sans-serif; + font-weight: $font-weight-medium; + line-height: $line-height-base; + text-shadow: 0 1px 1px rgba(#000, 0.15); +} + +button, +input, +select, +textarea { + font: inherit; +} + +p, +small { + margin: 0 0 $spacing-base; +} + +small { + @include font-size($font-size-small); + display: block; +} diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss new file mode 100644 index 00000000..c2abc97e --- /dev/null +++ b/demo/src/sass/type/headings.scss @@ -0,0 +1,10 @@ +// ========================================================================== +// Headings +// ========================================================================== + +h1 { + @include font-size($font-size-h1); + font-weight: $font-weight-bold; + letter-spacing: $letter-spacing-headings; + margin: 0 0 ($spacing-base / 2); +} diff --git a/demo/src/sass/utilities/color.scss b/demo/src/sass/utilities/color.scss new file mode 100644 index 00000000..786e6ccb --- /dev/null +++ b/demo/src/sass/utilities/color.scss @@ -0,0 +1,11 @@ +// ========================================================================== +// Color +// ========================================================================== + +.color--vimeo { + color: $color-vimeo; +} + +.color--youtube { + color: $color-youtube; +} diff --git a/demo/src/sass/utilities/hidden.scss b/demo/src/sass/utilities/hidden.scss new file mode 100644 index 00000000..a48b107a --- /dev/null +++ b/demo/src/sass/utilities/hidden.scss @@ -0,0 +1,7 @@ +// ========================================================================== +// Hidden +// ========================================================================== + +[hidden] { + display: none; +} diff --git a/demo/src/sprite/icon-github.svg b/demo/src/sprite/icon-github.svg deleted file mode 100755 index 685dd746..00000000 --- a/demo/src/sprite/icon-github.svg +++ /dev/null @@ -1,12 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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 fill-rule="evenodd" clip-rule="evenodd" d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
- C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
- c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
- c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
- c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
- c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"/>
-</svg>
diff --git a/demo/src/sprite/icon-twitter.svg b/demo/src/sprite/icon-twitter.svg deleted file mode 100755 index b3f644b1..00000000 --- a/demo/src/sprite/icon-twitter.svg +++ /dev/null @@ -1,11 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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">
- <title>Twitter</title>
-<path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
- C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
- c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
- c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"/>
-</svg>
diff --git a/demo/src/sprite/icon-vimeo.svg b/demo/src/sprite/icon-vimeo.svg deleted file mode 100755 index 83dd3dc0..00000000 --- a/demo/src/sprite/icon-vimeo.svg +++ /dev/null @@ -1,9 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
- C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
- c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"/>
-</svg>
diff --git a/demo/src/sprite/icon-youtube.svg b/demo/src/sprite/icon-youtube.svg deleted file mode 100755 index 8b5d6897..00000000 --- a/demo/src/sprite/icon-youtube.svg +++ /dev/null @@ -1,9 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
- s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
- M6,11V5l5,3L6,11z"/>
-</svg>
|
