diff options
| -rw-r--r-- | bower.json | 62 | ||||
| -rw-r--r-- | bundles.json | 46 | ||||
| -rw-r--r-- | docs/error.html | 28 | ||||
| -rw-r--r-- | docs/index.html | 136 | ||||
| -rw-r--r-- | docs/src/less/docs.less | 170 | ||||
| -rw-r--r-- | docs/src/less/lib/fontface.less | 24 | ||||
| -rw-r--r-- | docs/src/less/lib/mixins.less | 32 | ||||
| -rw-r--r-- | docs/src/templates/controls.html | 114 | ||||
| -rw-r--r-- | gulpfile.js | 346 | ||||
| -rw-r--r-- | package.json | 82 | ||||
| -rw-r--r-- | src/less/plyr.less | 1038 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 980 |
12 files changed, 1529 insertions, 1529 deletions
@@ -1,33 +1,33 @@ { - "name": "plyr", - "description": "A simple HTML5 media player using custom controls", - "homepage": "http://plyr.io", - "keywords": [ - "Audio", - "Video", - "HTML5 Audio", - "HTml5 Video" - ], - "authors": [ - "Sam Potts <me@sampotts.me>" - ], - "dependencies": {}, - "main": [ - "dist/plyr.css", - "dist/plyr.js", - "dist/sprite.svg", - "src/less/plyr.less", - "src/sass/plyr.sass", - "src/js/plyr.js" - ], - "ignore": [ - "node_modules", - "bower_components", - ".gitignore" - ], - "repository": { - "type": "git", - "url": "git://github.com/selz/plyr.git" - }, - "license": "MIT" + "name": "plyr", + "description": "A simple HTML5 media player using custom controls", + "homepage": "http://plyr.io", + "keywords": [ + "Audio", + "Video", + "HTML5 Audio", + "HTml5 Video" + ], + "authors": [ + "Sam Potts <me@sampotts.me>" + ], + "dependencies": {}, + "main": [ + "dist/plyr.css", + "dist/plyr.js", + "dist/sprite.svg", + "src/less/plyr.less", + "src/sass/plyr.sass", + "src/js/plyr.js" + ], + "ignore": [ + "node_modules", + "bower_components", + ".gitignore" + ], + "repository": { + "type": "git", + "url": "git://github.com/selz/plyr.git" + }, + "license": "MIT" }
\ No newline at end of file diff --git a/bundles.json b/bundles.json index 1f9733a4..0595c557 100644 --- a/bundles.json +++ b/bundles.json @@ -1,25 +1,25 @@ { - "plyr": { - "less": { - "plyr.css": ["src/less/plyr.less"] - }, - "sass": { - "plyr.css": ["src/less/plyr.sass"] - }, - "js": { - "plyr.js": ["src/js/plyr.js"] - } - }, - "docs": { - "less": { - "docs.css": ["docs/src/less/docs.less"] - }, - "js": { - "docs.js": [ - "docs/src/js/lib/hogan-3.0.2.mustache.js", - "docs/dist/templates.js", - "docs/src/js/docs.js" - ] - } - } + "plyr": { + "less": { + "plyr.css": ["src/less/plyr.less"] + }, + "sass": { + "plyr.css": ["src/less/plyr.sass"] + }, + "js": { + "plyr.js": ["src/js/plyr.js"] + } + }, + "docs": { + "less": { + "docs.css": ["docs/src/less/docs.less"] + }, + "js": { + "docs.js": [ + "docs/src/js/lib/hogan-3.0.2.mustache.js", + "docs/dist/templates.js", + "docs/src/js/docs.js" + ] + } + } }
\ No newline at end of file diff --git a/docs/error.html b/docs/error.html index a79ad4a3..2bf4ad3d 100644 --- a/docs/error.html +++ b/docs/error.html @@ -1,18 +1,18 @@ <!doctype html> <html lang="en" class="error"> - <head> - <meta charset="utf-8" /> - <title>Doh. Looks like something went wrong.</title> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <head> + <meta charset="utf-8" /> + <title>Doh. Looks like something went wrong.</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> - <!-- Docs styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> - </head> - <body> - <main> - <h1>Doh.</h1> - <p>Looks like something went wrong.</p> - <a href="http://plyr.io" class="btn">Back to plyr.io</a> - </main> - </body> + <!-- Docs styles --> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> + </head> + <body> + <main> + <h1>Doh.</h1> + <p>Looks like something went wrong.</p> + <a href="http://plyr.io" class="btn">Back to plyr.io</a> + </main> + </body> </html>
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 3aad0424..229e2ff9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,79 +1,79 @@ <!doctype html> <html lang="en"> - <head> - <meta charset="utf-8" /> - <title>Plyr - A simple HTML5 media player</title> - <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions."> - <meta name="author" content="Sam Potts"> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <head> + <meta charset="utf-8" /> + <title>Plyr - A simple HTML5 media player</title> + <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions."> + <meta name="author" content="Sam Potts"> + <meta name="viewport" content="width=device-width, initial-scale=1"> - <!-- Styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css"> + <!-- Styles --> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css"> - <!-- Docs styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> - </head> - <body> - <header> - <h1>Plyr</h1> - <p>A simple HTML5 media player with custom controls and WebVTT captions.</p> - <a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a> - </header> + <!-- Docs styles --> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> + </head> + <body> + <header> + <h1>Plyr</h1> + <p>A simple HTML5 media player with custom controls and WebVTT captions.</p> + <a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a> + </header> - <main> - <section class="example-video"> - <div class="player"> - <video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> - <!-- Video files --> - <source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> - <source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> - - <!-- Text track file --> - <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default> - - <!-- Fallback for browsers that don't support the <video> element --> - <div> - <a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a> - </div> - </video> - </div> - <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small> - </section> + <main> + <section class="example-video"> + <div class="player"> + <video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> + <!-- Video files --> + <source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> + <source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> + + <!-- Text track file --> + <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default> + + <!-- Fallback for browsers that don't support the <video> element --> + <div> + <a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a> + </div> + </video> + </div> + <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small> + </section> - <section class="example-audio"> - <div class="player"> - <audio controls> - <!-- Audio files --> - <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> - <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> - - <!-- Fallback for browsers that don't support the <audio> element --> - <div> - <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> - </div> - </audio> - </div> - <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small> - </section> - </main> + <section class="example-audio"> + <div class="player"> + <audio controls> + <!-- Audio files --> + <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> + <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> + + <!-- Fallback for browsers that don't support the <audio> element --> + <div> + <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> + </div> + </audio> + </div> + <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small> + </section> + </main> - <footer> - <p>Used by …</p> - <a href="https://selz.com" target="_blank" class="logo"> - <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz"> - </a> - </footer> + <footer> + <p>Used by …</p> + <a href="https://selz.com" target="_blank" class="logo"> + <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz"> + </a> + </footer> - <!-- Load SVG defs --> - <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> - <script> - (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.25/sprite.svg"); - </script> + <!-- Load SVG defs --> + <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> + <script> + (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.25/sprite.svg"); + </script> - <!-- Plyr core script --> - <script src="//cdn.plyr.io/1.0.25/plyr.js"></script> + <!-- Plyr core script --> + <script src="//cdn.plyr.io/1.0.25/plyr.js"></script> - <!-- Docs script --> - <script src="//cdn.plyr.io/1.0.25/docs.js"></script> - </body> + <!-- Docs script --> + <script src="//cdn.plyr.io/1.0.25/docs.js"></script> + </body> </html>
\ No newline at end of file diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less index 7cb191d7..54407423 100644 --- a/docs/src/less/docs.less +++ b/docs/src/less/docs.less @@ -12,153 +12,153 @@ // Variables // --------------------------------------- // Colors -@blue: #3498DB; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; +@blue: #3498DB; +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #cbd0d3; // Elements -@link-color: @blue; -@padding-base: 20px; +@link-color: @blue; +@padding-base: 20px; // Breakpoints -@screen-md: 768px; +@screen-md: 768px; // BORDER-BOX ALL THE THINGS! // http://paulirish.com/2012/box-sizing-border-box-ftw/ *, *::after, *::before { - box-sizing: border-box; + box-sizing: border-box; } // Base body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: #fff; - line-height: 1.5; - text-align: center; - color: #6D797F; + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: #fff; + line-height: 1.5; + text-align: center; + color: #6D797F; } // Error page html.error, .error body { - height: 100%; + height: 100%; } .error body { - width: 100%; - display: table; - table-layout: fixed; + width: 100%; + display: table; + table-layout: fixed; } .error main { - display: table-cell; - width: 100%; - vertical-align: middle; + display: table-cell; + width: 100%; + vertical-align: middle; } // Type h1, h2 { - letter-spacing: -.025em; - color: #2E3C44; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - .font-smoothing(); + letter-spacing: -.025em; + color: #2E3C44; + margin: 0 0 (@padding-base / 2); + line-height: 1.2; + .font-smoothing(); } h1 { - .font-size(64); - color: #3498DB; + .font-size(64); + color: #3498DB; } p, small { - margin: 0 0 @padding-base; + margin: 0 0 @padding-base; } small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(14); + display: block; + padding: 0 (@padding-base / 2); + .font-size(14); } // Header header { - padding: @padding-base; - margin-bottom: @padding-base; + padding: @padding-base; + margin-bottom: @padding-base; - p { - .font-size(18); - } - @media (min-width: 560px) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } + p { + .font-size(18); + } + @media (min-width: 560px) { + padding-top: (@padding-base * 3); + padding-bottom: (@padding-base * 3); + } } // Sections section { - padding-bottom: @padding-base; + padding-bottom: @padding-base; - @media (min-width: 560px) { - padding-bottom: (@padding-base * 2); - } + @media (min-width: 560px) { + padding-bottom: (@padding-base * 2); + } } // Links & Buttons a { - text-decoration: none; - color: @link-color; - border-bottom: 1px solid currentColor; - transition: all .3s ease; - - &:hover, - &:focus { - color: #000; - } - &:focus { - .tab-focus(); - } - &.logo { - border: 0; - } + text-decoration: none; + color: @link-color; + border-bottom: 1px solid currentColor; + transition: all .3s ease; + + &:hover, + &:focus { + color: #000; + } + &:focus { + .tab-focus(); + } + &.logo { + border: 0; + } } .btn { - display: inline-block; - padding: (@padding-base / 2) (@padding-base * 1.5); - background: @link-color; - border: 0; - color: #fff; - .font-smoothing(on); - font-weight: 600; - border-radius: 3px; - user-select: none; - - &:hover, - &:focus { - color: #fff; - background: darken(@link-color, 5%); - } + display: inline-block; + padding: (@padding-base / 2) (@padding-base * 1.5); + background: @link-color; + border: 0; + color: #fff; + .font-smoothing(on); + font-weight: 600; + border-radius: 3px; + user-select: none; + + &:hover, + &:focus { + color: #fff; + background: darken(@link-color, 5%); + } } // Players .example-audio .player { - max-width: 480px; + max-width: 480px; } .example-video .player { - max-width: 1200px; + max-width: 1200px; } .example-audio .player, .example-video .player { - margin: 0 auto @padding-base; + margin: 0 auto @padding-base; - &-fullscreen, - &.fullscreen-active { - max-width: none; - } + &-fullscreen, + &.fullscreen-active { + max-width: none; + } } // Footer footer { - margin-bottom: @padding-base; + margin-bottom: @padding-base; - p { - margin-bottom: (@padding-base / 2); - } + p { + margin-bottom: (@padding-base / 2); + } }
\ No newline at end of file diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less index 704503d1..479f7fa4 100644 --- a/docs/src/less/lib/fontface.less +++ b/docs/src/less/lib/fontface.less @@ -1,16 +1,16 @@ @font-face { - font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), - url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype"); - font-style: normal; - font-weight: 400; + font-family: "Avenir"; + src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), + url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), + url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype"); + font-style: normal; + font-weight: 400; } @font-face { - font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), - url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype"); - font-style: normal; - font-weight: 600; + font-family: "Avenir"; + src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), + url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), + url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype"); + font-style: normal; + font-weight: 600; }
\ No newline at end of file diff --git a/docs/src/less/lib/mixins.less b/docs/src/less/lib/mixins.less index b3a1f63b..a4451b1c 100644 --- a/docs/src/less/lib/mixins.less +++ b/docs/src/less/lib/mixins.less @@ -5,38 +5,38 @@ // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ // --------------------------------------- .clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } + zoom: 1; + &:before, + &:after { content: ""; display: table; } + &:after { clear: both; } } // Webkit-style focus // --------------------------------------- .tab-focus() { - // Default - outline: thin dotted @gray-dark; - // Webkit - //outline: 5px auto -webkit-focus-ring-color; - outline-offset: 1px; + // Default + outline: thin dotted @gray-dark; + // Webkit + //outline: 5px auto -webkit-focus-ring-color; + outline-offset: 1px; } // Use rems for font sizing // Leave <body> at 100%/16px // --------------------------------------- .font-size(@font-size: 16){ - @rem: round((@font-size / 16), 1); - font-size: (@font-size * 1px); - font-size: ~"@{rem}rem"; + @rem: round((@font-size / 16), 1); + 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; + -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; + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; }
\ No newline at end of file diff --git a/docs/src/templates/controls.html b/docs/src/templates/controls.html index 6a2faa31..9fbb92b2 100644 --- a/docs/src/templates/controls.html +++ b/docs/src/templates/controls.html @@ -1,62 +1,62 @@ <div class="player-controls"> - <div class="player-progress"> - <label for="seek{id}" class="sr-only">Seek</label> - <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek"> - <progress class="player-progress-played" max="100" value="0"> - <span>0</span>% played - </progress> - <progress class="player-progress-buffer" max="100" value="0"> - <span>0</span>% buffered - </progress> - </div> - <span class="player-controls-left"> - <button type="button" data-player="restart"> - <svg><use xlink:href="#icon-restart"></use></svg> - <span class="sr-only">Restart</span> - </button> - <button type="button" data-player="rewind"> - <svg><use xlink:href="#icon-rewind"></use></svg> - <span class="sr-only">Rewind {seektime} secs</span> - </button> - <button type="button" data-player="play"> - <svg><use xlink:href="#icon-play"></use></svg> - <span class="sr-only">Play</span> - </button> - <button type="button" data-player="pause"> - <svg><use xlink:href="#icon-pause"></use></svg> - <span class="sr-only">Pause</span> - </button> - <button type="button" data-player="fast-forward"> - <svg><use xlink:href="#icon-fast-forward"></use></svg> - <span class="sr-only">Forward {seektime} secs</span> - </button> - <span class="player-time"> - <span class="sr-only">Time</span> - <span class="player-duration">00:00</span> - </span> - </span> - <span class="player-controls-right"> - <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute"> - <label id="mute{id}" for="mute{id}"> - <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg> - <svg><use xlink:href="#icon-volume"></use></svg> - <span class="sr-only">Toggle Mute</span> - </label> + <div class="player-progress"> + <label for="seek{id}" class="sr-only">Seek</label> + <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek"> + <progress class="player-progress-played" max="100" value="0"> + <span>0</span>% played + </progress> + <progress class="player-progress-buffer" max="100" value="0"> + <span>0</span>% buffered + </progress> + </div> + <span class="player-controls-left"> + <button type="button" data-player="restart"> + <svg><use xlink:href="#icon-restart"></use></svg> + <span class="sr-only">Restart</span> + </button> + <button type="button" data-player="rewind"> + <svg><use xlink:href="#icon-rewind"></use></svg> + <span class="sr-only">Rewind {seektime} secs</span> + </button> + <button type="button" data-player="play"> + <svg><use xlink:href="#icon-play"></use></svg> + <span class="sr-only">Play</span> + </button> + <button type="button" data-player="pause"> + <svg><use xlink:href="#icon-pause"></use></svg> + <span class="sr-only">Pause</span> + </button> + <button type="button" data-player="fast-forward"> + <svg><use xlink:href="#icon-fast-forward"></use></svg> + <span class="sr-only">Forward {seektime} secs</span> + </button> + <span class="player-time"> + <span class="sr-only">Time</span> + <span class="player-duration">00:00</span> + </span> + </span> + <span class="player-controls-right"> + <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute"> + <label id="mute{id}" for="mute{id}"> + <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg> + <svg><use xlink:href="#icon-volume"></use></svg> + <span class="sr-only">Toggle Mute</span> + </label> - <label for="volume{id}" class="sr-only">Volume</label> - <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume"> + <label for="volume{id}" class="sr-only">Volume</label> + <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume"> - <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions"> - <label for="captions{id}"> - <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg> - <svg><use xlink:href="#icon-captions-off"></use></svg> - <span class="sr-only">Toggle Captions</span> - </label> + <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions"> + <label for="captions{id}"> + <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg> + <svg><use xlink:href="#icon-captions-off"></use></svg> + <span class="sr-only">Toggle Captions</span> + </label> - <button type="button" data-player="fullscreen"> - <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg> - <svg><use xlink:href="#icon-enter-fullscreen"></use></svg> - <span class="sr-only">Toggle Fullscreen</span> - </button> - </span> + <button type="button" data-player="fullscreen"> + <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg> + <svg><use xlink:href="#icon-enter-fullscreen"></use></svg> + <span class="sr-only">Toggle Fullscreen</span> + </button> + </span> </div>
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 7b530d25..d00b9def 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,59 +4,59 @@ /*global require, __dirname*/ /*jshint -W079 */ -var fs = require("fs"), - path = require("path"), - gulp = require("gulp"), - gutil = require("gulp-util"), - concat = require("gulp-concat"), - uglify = require("gulp-uglify"), - less = require("gulp-less"), - sass = require("gulp-sass"), - minify = require("gulp-minify-css"), - run = require("run-sequence"), - prefix = require("gulp-autoprefixer"), - svgstore = require("gulp-svgstore"), - svgmin = require("gulp-svgmin"), - hogan = require("gulp-hogan-compile"), - rename = require("gulp-rename"), - s3 = require("gulp-s3"), - gzip = require("gulp-gzip"), - replace = require("gulp-replace"), - open = require("gulp-open"); +var fs = require("fs"), + path = require("path"), + gulp = require("gulp"), + gutil = require("gulp-util"), + concat = require("gulp-concat"), + uglify = require("gulp-uglify"), + less = require("gulp-less"), + sass = require("gulp-sass"), + minify = require("gulp-minify-css"), + run = require("run-sequence"), + prefix = require("gulp-autoprefixer"), + svgstore = require("gulp-svgstore"), + svgmin = require("gulp-svgmin"), + hogan = require("gulp-hogan-compile"), + rename = require("gulp-rename"), + s3 = require("gulp-s3"), + gzip = require("gulp-gzip"), + replace = require("gulp-replace"), + open = require("gulp-open"); var root = __dirname, paths = { - plyr: { - // Source paths - src: { - less: path.join(root, "src/less/**/*"), - sass: path.join(root, "src/sass/**/*"), - js: path.join(root, "src/js/**/*"), - sprite: path.join(root, "src/sprite/*.svg") - }, - // Output paths - output: path.join(root, "dist/") - }, - docs: { - // Source paths - src: { - less: path.join(root, "docs/src/less/**/*"), - js: path.join(root, "docs/src/js/**/*"), - templates: path.join(root, "docs/src/templates/*.html") - }, - // Output paths - output: path.join(root, "docs/dist/"), - // Docs - root: path.join(root, "docs/") - }, - upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")] + plyr: { + // Source paths + src: { + less: path.join(root, "src/less/**/*"), + sass: path.join(root, "src/sass/**/*"), + js: path.join(root, "src/js/**/*"), + sprite: path.join(root, "src/sprite/*.svg") + }, + // Output paths + output: path.join(root, "dist/") + }, + docs: { + // Source paths + src: { + less: path.join(root, "docs/src/less/**/*"), + js: path.join(root, "docs/src/js/**/*"), + templates: path.join(root, "docs/src/templates/*.html") + }, + // Output paths + output: path.join(root, "docs/dist/"), + // Docs + root: path.join(root, "docs/") + }, + upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")] }, // Task arrays tasks = { - less: [], - sass: [], - js: [] + less: [], + sass: [], + js: [] }, // Fetch bundles from JSON @@ -69,88 +69,88 @@ function loadJSON(path) { } var build = { - js: function (files, bundle) { - for (var key in files) { - (function(key) { - var name = "js-" + key; - tasks.js.push(name); + js: function (files, bundle) { + for (var key in files) { + (function(key) { + var name = "js-" + key; + tasks.js.push(name); - gulp.task(name, function () { - return gulp - .src(bundles[bundle].js[key]) - .pipe(concat(key)) - .pipe(uglify()) - .pipe(gulp.dest(paths[bundle].output)); - }); - })(key); - } - }, - less: function(files, bundle) { - for (var key in files) { - (function (key) { - var name = "less-" + key; - tasks.less.push(name); + gulp.task(name, function () { + return gulp + .src(bundles[bundle].js[key]) + .pipe(concat(key)) + .pipe(uglify()) + .pipe(gulp.dest(paths[bundle].output)); + }); + })(key); + } + }, + less: function(files, bundle) { + for (var key in files) { + (function (key) { + var name = "less-" + key; + tasks.less.push(name); - gulp.task(name, function () { - return gulp - .src(bundles[bundle].less[key]) - .pipe(less()) - .on("error", gutil.log) - .pipe(concat(key)) - .pipe(prefix(["last 2 versions"], { cascade: true })) - .pipe(minify()) - .pipe(gulp.dest(paths[bundle].output)); - }); - })(key); - } - }, - sass: function(files, bundle) { - for (var key in files) { - (function (key) { - var name = "sass-" + key; - tasks.sass.push(name); + gulp.task(name, function () { + return gulp + .src(bundles[bundle].less[key]) + .pipe(less()) + .on("error", gutil.log) + .pipe(concat(key)) + .pipe(prefix(["last 2 versions"], { cascade: true })) + .pipe(minify()) + .pipe(gulp.dest(paths[bundle].output)); + }); + })(key); + } + }, + sass: function(files, bundle) { + for (var key in files) { + (function (key) { + var name = "sass-" + key; + tasks.sass.push(name); - gulp.task(name, function () { - return gulp - .src(bundles[bundle].sass[key]) - .pipe(sass()) - .on("error", gutil.log) - .pipe(concat(key)) - .pipe(prefix(["last 2 versions"], { cascade: true })) - .pipe(minify()) - .pipe(gulp.dest(paths[bundle].output)); - }); - })(key); - } - }, - sprite: function() { - // Process Icons - gulp.task("sprite", function () { - return gulp - .src(paths.plyr.src.sprite) - .pipe(svgmin({ - plugins: [{ - removeDesc: true - }] - })) - .pipe(svgstore()) - .pipe(gulp.dest(paths.plyr.output)); - }); - }, - templates: function() { - // Build templates - gulp.task("templates", function () { - return gulp - .src(paths.docs.src.templates) - .pipe(hogan("templates.js", { - wrapper: false, - templateName: function (file) { - return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); - } - })) - .pipe(gulp.dest(paths.docs.output)); - }); - } + gulp.task(name, function () { + return gulp + .src(bundles[bundle].sass[key]) + .pipe(sass()) + .on("error", gutil.log) + .pipe(concat(key)) + .pipe(prefix(["last 2 versions"], { cascade: true })) + .pipe(minify()) + .pipe(gulp.dest(paths[bundle].output)); + }); + })(key); + } + }, + sprite: function() { + // Process Icons + gulp.task("sprite", function () { + return gulp + .src(paths.plyr.src.sprite) + .pipe(svgmin({ + plugins: [{ + removeDesc: true + }] + })) + .pipe(svgstore()) + .pipe(gulp.dest(paths.plyr.output)); + }); + }, + templates: function() { + // Build templates + gulp.task("templates", function () { + return gulp + .src(paths.docs.src.templates) + .pipe(hogan("templates.js", { + wrapper: false, + templateName: function (file) { + return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); + } + })) + .pipe(gulp.dest(paths.docs.output)); + }); + } }; // Plyr core files @@ -166,22 +166,22 @@ build.js(bundles.docs.js, "docs"); // Default gulp task gulp.task("default", function(){ - run("templates", tasks.js, tasks.less, "sprite"); + run("templates", tasks.js, tasks.less, "sprite"); }); // Build all JS (inc. templates) gulp.task("js", function(){ - run("templates", tasks.js); + run("templates", tasks.js); }); // Build SASS (for testing, default is LESS) gulp.task("sass", function(){ - run(tasks.sass); + run(tasks.sass); }); // Watch for file changes gulp.task("watch", function () { - // Plyr core + // Plyr core gulp.watch(paths.plyr.src.js, tasks.js); gulp.watch(paths.plyr.src.less, tasks.less); gulp.watch(paths.plyr.src.sprite, "sprite"); @@ -189,7 +189,7 @@ gulp.task("watch", function () { // Docs gulp.watch(paths.docs.src.js, tasks.js); gulp.watch(paths.docs.src.less, tasks.less); - gulp.watch(paths.docs.src.templates, "js"); + gulp.watch(paths.docs.src.templates, "js"); }); // Publish a version to CDN and docs @@ -198,69 +198,69 @@ gulp.task("watch", function () { // Some options var aws = loadJSON(path.join(root, "aws.json")), version = package.version, -maxAge = 31536000, // seconds 1 year +maxAge = 31536000, // seconds 1 year options = { - cdn: { - headers: { - "Cache-Control": "max-age=" + maxAge + ", no-transform, public", - "Vary": "Accept-Encoding" - }, - gzippedOnly: true - }, - docs: { - headers: { - "Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0", - "Vary": "Accept-Encoding" - }, - gzippedOnly: true - } + cdn: { + headers: { + "Cache-Control": "max-age=" + maxAge + ", no-transform, public", + "Vary": "Accept-Encoding" + }, + gzippedOnly: true + }, + docs: { + headers: { + "Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0", + "Vary": "Accept-Encoding" + }, + gzippedOnly: true + } }, cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"); // Publish version to CDN bucket gulp.task("cdn", function () { - console.log("Uploading " + version + " to " + aws.cdn.bucket); + console.log("Uploading " + version + " to " + aws.cdn.bucket); - // Upload to CDN - gulp.src(paths.upload) - .pipe(rename(function (path) { - path.dirname = path.dirname.replace(".", version); - })) - .pipe(gzip()) - .pipe(s3(aws.cdn, options.cdn)); + // Upload to CDN + gulp.src(paths.upload) + .pipe(rename(function (path) { + path.dirname = path.dirname.replace(".", version); + })) + .pipe(gzip()) + .pipe(s3(aws.cdn, options.cdn)); }); // Publish to Docs bucket gulp.task("docs", function () { - console.log("Uploading " + version + " docs to " + aws.docs.bucket); + console.log("Uploading " + version + " docs to " + aws.docs.bucket); - // Replace versioned files in *.html - gulp.src([paths.docs.root + "*.html"]) - .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version)) - .pipe(gulp.dest(paths.docs.root)) - .pipe(gzip()) - .pipe(s3(aws.docs, options.docs)); + // Replace versioned files in *.html + gulp.src([paths.docs.root + "*.html"]) + .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version)) + .pipe(gulp.dest(paths.docs.root)) + .pipe(gzip()) + .pipe(s3(aws.docs, options.docs)); - // Upload error.html to cdn using docs options - gulp.src([paths.docs.root + "error.html"]) - .pipe(gzip()) - .pipe(s3(aws.cdn, options.docs)); + // Upload error.html to cdn using docs options + gulp.src([paths.docs.root + "error.html"]) + .pipe(gzip()) + .pipe(s3(aws.cdn, options.docs)); }); // Open the docs site to check it's sweet gulp.task("open", function () { - console.log("Opening " + aws.docs.bucket + "..."); + console.log("Opening " + aws.docs.bucket + "..."); - // A file must be specified or gulp will skip the task - // Doesn't matter which file since we set the URL above - // Weird, I know... - gulp.src([paths.docs.root + "index.html"]) - .pipe(open("", { - url: "http://" + aws.docs.bucket - })); + // A file must be specified or gulp will skip the task + // Doesn't matter which file since we set the URL above + // Weird, I know... + gulp.src([paths.docs.root + "index.html"]) + .pipe(open("", { + url: "http://" + aws.docs.bucket + })); }); // Do everything gulp.task("publish", function () { - run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open"); + run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open"); });
\ No newline at end of file diff --git a/package.json b/package.json index 7bbaa372..be166c4d 100644 --- a/package.json +++ b/package.json @@ -1,43 +1,43 @@ { - "name": "plyr", - "version": "1.0.25", - "description": "A simple HTML5 media player using custom controls", - "homepage": "http://plyr.io", - "main": "gulpfile.js", - "dependencies": {}, - "devDependencies": { - "gulp": "~3.8.6", - "gulp-autoprefixer": "^0.0.8", - "gulp-concat": "~2.3.3", - "gulp-gzip": "^1.0.0", - "gulp-hogan-compile": "^0.4.1", - "gulp-less": "~1.3.1", - "gulp-minify-css": "~0.3.6", - "gulp-open": "^0.3.2", - "gulp-rename": "^1.2.0", - "gulp-replace": "^0.5.3", - "gulp-s3": "^0.3.0", - "gulp-sass": "^1.3.3", - "gulp-svgmin": "^1.0.0", - "gulp-svgstore": "^5.0.0", - "gulp-uglify": "~0.3.1", - "gulp-util": "~2.2.20", - "run-sequence": "^0.3.6" - }, - "scripts": { - "preinstall": "npm install -g gulp" - }, - "keywords": [ - "HTML5 Video", - "HTML5 Audio", - "Media Player" - ], - "repository": { - "type": "git", - "url": "git://github.com/selz/plyr.git" - }, - "authors": [ - "Sam Potts <me@sampotts.me>" - ], - "license": "MIT" + "name": "plyr", + "version": "1.0.25", + "description": "A simple HTML5 media player using custom controls", + "homepage": "http://plyr.io", + "main": "gulpfile.js", + "dependencies": {}, + "devDependencies": { + "gulp": "~3.8.6", + "gulp-autoprefixer": "^0.0.8", + "gulp-concat": "~2.3.3", + "gulp-gzip": "^1.0.0", + "gulp-hogan-compile": "^0.4.1", + "gulp-less": "~1.3.1", + "gulp-minify-css": "~0.3.6", + "gulp-open": "^0.3.2", + "gulp-rename": "^1.2.0", + "gulp-replace": "^0.5.3", + "gulp-s3": "^0.3.0", + "gulp-sass": "^1.3.3", + "gulp-svgmin": "^1.0.0", + "gulp-svgstore": "^5.0.0", + "gulp-uglify": "~0.3.1", + "gulp-util": "~2.2.20", + "run-sequence": "^0.3.6" + }, + "scripts": { + "preinstall": "npm install -g gulp" + }, + "keywords": [ + "HTML5 Video", + "HTML5 Audio", + "Media Player" + ], + "repository": { + "type": "git", + "url": "git://github.com/selz/plyr.git" + }, + "authors": [ + "Sam Potts <me@sampotts.me>" + ], + "license": "MIT" } diff --git a/src/less/plyr.less b/src/less/plyr.less index 3063e9ca..8b5f3d8d 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -5,580 +5,580 @@ // Variables // ------------------------------- // Colors -@blue: #3498DB; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; +@blue: #3498DB; +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #cbd0d3; // Font sizes -@font-size-small: 14px; -@font-size-base: 16px; +@font-size-small: 14px; +@font-size-base: 16px; @font-size-large: ceil((@font-size-base * 1.5)); // Controls -@control-spacing: 10px; -@controls-bg: @gray-dark; -@control-bg-hover: @blue; -@control-color: @gray-light; -@control-color-inactive: @gray; -@control-color-hover: #fff; +@control-spacing: 10px; +@controls-bg: @gray-dark; +@control-bg-hover: @blue; +@control-color: @gray-light; +@control-color-inactive: @gray; +@control-color-hover: #fff; // Tooltips -@tooltip-bg: @controls-bg; -@tooltip-color: #fff; -@tooltip-padding: @control-spacing; -@tooltip-arrow-size: 5px; -@tooltip-radius: 3px; +@tooltip-bg: @controls-bg; +@tooltip-color: #fff; +@tooltip-padding: @control-spacing; +@tooltip-arrow-size: 5px; +@tooltip-radius: 3px; // Progress -@progress-bg: lighten(@gray, 10%); -@progress-playing-bg: @blue; -@progress-buffered-bg: @gray; -@progress-loading-size: 40px; -@progress-loading-bg: rgba(0,0,0, .15); +@progress-bg: lighten(@gray, 10%); +@progress-playing-bg: @blue; +@progress-buffered-bg: @gray; +@progress-loading-size: 40px; +@progress-loading-bg: rgba(0,0,0, .15); // Volume -@volume-track-height: 6px; -@volume-track-bg: @gray; -@volume-thumb-height: (@volume-track-height * 2); -@volume-thumb-width: (@volume-track-height * 2); -@volume-thumb-bg: @control-color; -@volume-thumb-bg-focus: @control-bg-hover; +@volume-track-height: 6px; +@volume-track-bg: @gray; +@volume-thumb-height: (@volume-track-height * 2); +@volume-thumb-width: (@volume-track-height * 2); +@volume-thumb-bg: @control-color; +@volume-thumb-bg-focus: @control-bg-hover; // Breakpoints -@bp-control-split: 560px; // When controls split into left/right -@bp-captions-large: 768px; // When captions jump to the larger font size +@bp-control-split: 560px; // When controls split into left/right +@bp-captions-large: 768px; // When captions jump to the larger font size // Utility classes & mixins // ------------------------------- // Screen reader only .sr-only { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; } // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ .clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } + zoom: 1; + &:before, + &:after { content: ""; display: table; } + &:after { clear: both; } } // Tab focus styles .tab-focus() { - outline: thin dotted #000; - outline-offset: 0; + outline: thin dotted #000; + outline-offset: 0; } // Animation // --------------------------------------- @keyframes progress { - to { background-position: @progress-loading-size 0; } + to { background-position: @progress-loading-size 0; } } // <input type="range"> styling // --------------------------------------- .volume-thumb() { - height: @volume-thumb-height; - width: @volume-thumb-width; - background: @volume-thumb-bg; - border: 0; - border-radius: (@volume-thumb-height / 2); - transition: background .3s ease; - cursor: ew-resize; + height: @volume-thumb-height; + width: @volume-thumb-width; + background: @volume-thumb-bg; + border: 0; + border-radius: (@volume-thumb-height / 2); + transition: background .3s ease; + cursor: ew-resize; } .volume-track() { - height: @volume-track-height; - background: @volume-track-bg; - border: 0; - border-radius: (@volume-track-height / 2); + height: @volume-track-height; + background: @volume-track-bg; + border: 0; + border-radius: (@volume-track-height / 2); } .seek-thumb() { - background: transparent; - border: 0; - width: (@control-spacing * 2); - height: @control-spacing; + background: transparent; + border: 0; + width: (@control-spacing * 2); + height: @control-spacing; } .seek-track() { - background: none; - border: 0; + background: none; + border: 0; } // Font smoothing // --------------------------------------- .font-smoothing(@mode: on) when (@mode = on) { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + -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; + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; } // Styles // ------------------------------- // Base .player { - position: relative; - max-width: 100%; - min-width: 290px; - - // border-box everything - // http://paulirish.com/2012/box-sizing-border-box-ftw/ - &, - *, - *::after, - *::before { - box-sizing: border-box; - } - - // For video - &-video-wrapper { - position: relative; - } - video { - width: 100%; - height: auto; - vertical-align: middle; - } - - // Captions - &-captions { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 20px; - min-height: 2.5em; - color: #fff; - font-size: @font-size-base; - font-weight: 600; - text-shadow: - -1px -1px 0 @gray, - 1px -1px 0 @gray, - -1px 1px 0 @gray, - 1px 1px 0 @gray; - text-align: center; - .font-smoothing(); - - @media (min-width: @bp-captions-large) { - font-size: @font-size-large; - } - } - &.captions-active &-captions { - display: block; - } - - // Player controls - &-controls { - .clearfix(); - .font-smoothing(); - position: relative; - padding: (@control-spacing * 2) @control-spacing @control-spacing; - background: @controls-bg; - line-height: 1; - text-align: center; - - // Layout - &-right { - display: block; - margin: @control-spacing auto 0; - } - @media (min-width: @bp-control-split) { - &-left { - float: left; - } - &-right { - float: right; - margin-top: 0; - } - } - - input + label, - button { - display: inline-block; - vertical-align: middle; - margin: 0 2px; - padding: (@control-spacing / 2) @control-spacing; - - transition: background .3s ease; - border-radius: 3px; - cursor: pointer; - - svg { - width: 18px; - height: 18px; - display: block; - fill: currentColor; - transition: fill .3s ease; - } - } - input + label, - .inverted:checked + label { - color: @control-color-inactive; - } - button, - .inverted + label, - input:checked + label { - color: @control-color; - } - button { - border: 0; - background: transparent; - overflow: hidden; - } - - // Specificity for overriding .inverted - button:focus, - button:hover, - [type="checkbox"]:focus + label, - [type="checkbox"] + label:hover { - background: @control-bg-hover; - color: @control-color-hover; - } - button:focus, - input:focus + label { - outline: 0; - } - .icon-exit-fullscreen, - .icon-muted, - .icon-captions-on { - display: none; - } - .player-time { - display: inline-block; - vertical-align: middle; - margin-left: @control-spacing; - color: @control-color; - font-weight: 600; - font-size: @font-size-small; - .font-smoothing(); - } - } - - // Tooltips - &-tooltip { - visibility: hidden; - position: absolute; - z-index: 2; - bottom: 100%; - margin-bottom: @tooltip-padding; - padding: @tooltip-padding (@tooltip-padding * 1.5); + position: relative; + max-width: 100%; + min-width: 290px; + + // border-box everything + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; + } + + // For video + &-video-wrapper { + position: relative; + } + video { + width: 100%; + height: auto; + vertical-align: middle; + } + + // Captions + &-captions { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 20px; + min-height: 2.5em; + color: #fff; + font-size: @font-size-base; + font-weight: 600; + text-shadow: + -1px -1px 0 @gray, + 1px -1px 0 @gray, + -1px 1px 0 @gray, + 1px 1px 0 @gray; + text-align: center; + .font-smoothing(); + + @media (min-width: @bp-captions-large) { + font-size: @font-size-large; + } + } + &.captions-active &-captions { + display: block; + } + + // Player controls + &-controls { + .clearfix(); + .font-smoothing(); + position: relative; + padding: (@control-spacing * 2) @control-spacing @control-spacing; + background: @controls-bg; + line-height: 1; + text-align: center; + + // Layout + &-right { + display: block; + margin: @control-spacing auto 0; + } + @media (min-width: @bp-control-split) { + &-left { + float: left; + } + &-right { + float: right; + margin-top: 0; + } + } + + input + label, + button { + display: inline-block; + vertical-align: middle; + margin: 0 2px; + padding: (@control-spacing / 2) @control-spacing; + + transition: background .3s ease; + border-radius: 3px; + cursor: pointer; + + svg { + width: 18px; + height: 18px; + display: block; + fill: currentColor; + transition: fill .3s ease; + } + } + input + label, + .inverted:checked + label { + color: @control-color-inactive; + } + button, + .inverted + label, + input:checked + label { + color: @control-color; + } + button { + border: 0; + background: transparent; + overflow: hidden; + } + + // Specificity for overriding .inverted + button:focus, + button:hover, + [type="checkbox"]:focus + label, + [type="checkbox"] + label:hover { + background: @control-bg-hover; + color: @control-color-hover; + } + button:focus, + input:focus + label { + outline: 0; + } + .icon-exit-fullscreen, + .icon-muted, + .icon-captions-on { + display: none; + } + .player-time { + display: inline-block; + vertical-align: middle; + margin-left: @control-spacing; + color: @control-color; + font-weight: 600; + font-size: @font-size-small; + .font-smoothing(); + } + } + + // Tooltips + &-tooltip { + visibility: hidden; + position: absolute; + z-index: 2; + bottom: 100%; + margin-bottom: @tooltip-padding; + padding: @tooltip-padding (@tooltip-padding * 1.5); opacity: 0; - background: @tooltip-bg; - border-radius: @tooltip-radius; - color: @tooltip-color; - font-size: @font-size-small; - line-height: 1.5; - font-weight: 600; - - transform: translate(-50%, (@tooltip-padding * 3)); + background: @tooltip-bg; + border-radius: @tooltip-radius; + color: @tooltip-color; + font-size: @font-size-small; + line-height: 1.5; + font-weight: 600; + + transform: translate(-50%, (@tooltip-padding * 3)); transition: transform .2s .2s ease, opacity .2s .2s ease; - &::after { - content: ""; - display: block; - position: absolute; - left: 50%; - bottom: -@tooltip-arrow-size; - margin-left: -@tooltip-arrow-size; - width: 0; - height: 0; - transition: inherit; - border-style: solid; - border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size; - border-color: @controls-bg transparent transparent; - } - } - label:hover .player-tooltip, - input:focus + label .player-tooltip, - button:hover .player-tooltip, - button:focus .player-tooltip { - visibility: visible; - opacity: 1; - transform: translate(-50%, 0); - } - label:hover .player-tooltip, - button:hover .player-tooltip { - z-index: 3; - } - - // Player progress - // <progress> element - &-progress { - position: absolute; - top: 0; - left: 0; - right: 0; - width: 100%; - height: @control-spacing; - background: @progress-bg; - - &-buffer[value], - &-played[value], - &-seek[type=range] { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: @control-spacing; - margin: 0; - padding: 0; - vertical-align: top; - - -webkit-appearance: none; - -moz-appearance: none; - border: none; - background: transparent; - } - &-buffer[value], - &-played[value] { - &::-webkit-progress-bar { - background: transparent; - } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } - } - &-played[value] { - z-index: 2; - color: @progress-playing-bg; - } - &-buffer[value] { - color: @progress-buffered-bg; - } - - // Seek control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &-seek[type=range] { - z-index: 4; - cursor: pointer; - outline: 0; - - // Webkit - &::-webkit-slider-runnable-track { - .seek-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - .seek-thumb(); - } - - // Mozilla - &::-moz-range-track { - .seek-track(); - } - &::-moz-range-thumb { - -moz-appearance: none; - .seek-thumb(); - } - - // Microsoft - &::-ms-track { - color: transparent; - .seek-track(); - } - &::-ms-fill-lower, - &::-ms-fill-upper { - .seek-track(); - } - &::-ms-thumb { - .seek-thumb(); - } - - &:focus { - outline: 0; - } - &::-moz-focus-outer { - border: 0; - } - } - } - - // Loading state - &.loading .player-progress-buffer { - animation: progress 1s linear infinite; - background-size: @progress-loading-size @progress-loading-size; - background-repeat: repeat-x; - background-color: @progress-buffered-bg; - background-image: linear-gradient( - -45deg, - @progress-loading-bg 25%, - transparent 25%, - transparent 50%, - @progress-loading-bg 50%, - @progress-loading-bg 75%, - transparent 75%, - transparent); - color: transparent; - } - - // States - &-controls [data-player='pause'], - &.playing .player-controls [data-player='play'] { - display: none; - } - &.playing .player-controls [data-player='pause'] { - display: inline-block; - } - - // Volume control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &-volume[type=range] { - display: inline-block; - vertical-align: middle; - -webkit-appearance: none; - -moz-appearance: none; - width: 100px; - margin: 0 @control-spacing 0 0; - padding: 0; - cursor: pointer; - background: none; - - // Webkit - &::-webkit-slider-runnable-track { - .volume-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -((@volume-thumb-height - @volume-track-height) / 2); - .volume-thumb(); - } - - // Mozilla - &::-moz-range-track { - .volume-track(); - } - &::-moz-range-thumb { - .volume-thumb(); - } - - // Microsoft - &::-ms-track { - height: @volume-track-height; - background: transparent; - border-color: transparent; - border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0; - color: transparent; - } - &::-ms-fill-lower, - &::-ms-fill-upper { - .volume-track(); - } - &::-ms-thumb { - .volume-thumb(); - } - - &:focus { - outline: 0; - - &::-webkit-slider-thumb { - background: @volume-thumb-bg-focus; - } - &::-moz-range-thumb { - background: @volume-thumb-bg-focus; - } - &::-ms-thumb { - background: @volume-thumb-bg-focus; - } - } - } - - // Hide sound controls on iOS - // It's not supported to change volume using JavaScript: - // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html - &.ios &-volume, - &.ios [data-player='mute'], - &.ios [data-player='mute'] + label, - &-audio.ios &-controls-right { - display: none; - } - // Center buttons so it looks less odd - &-audio.ios &-controls-left { - float: none; - } - - // Full screen mode - &-fullscreen, - &.fullscreen-active { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 10000000; - background: #000; - - .player-video-wrapper { - height: 100%; - width: 100%; - - video { - height: 100%; - } - .player-captions { - top: auto; - bottom: 90px; - - @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) { - bottom: 60px; - } - @media (min-width: @bp-captions-large) { - bottom: 80px; - } - } - } - .player-controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } - } - - // Change icons on state change - &.fullscreen-active .icon-exit-fullscreen, - &.muted .player-controls .icon-muted, - &.captions-active .player-controls .icon-captions-on { - display: block; - - & + svg { - display: none; - } - } - - // Some options are hidden by default - [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { - display: none; - } - &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { - display: inline-block; - } - - // Full browser view hides toggle - &-fullscreen [data-player='fullscreen'], - &-fullscreen [data-player='fullscreen'] + label { - display: none !important; - } + &::after { + content: ""; + display: block; + position: absolute; + left: 50%; + bottom: -@tooltip-arrow-size; + margin-left: -@tooltip-arrow-size; + width: 0; + height: 0; + transition: inherit; + border-style: solid; + border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size; + border-color: @controls-bg transparent transparent; + } + } + label:hover .player-tooltip, + input:focus + label .player-tooltip, + button:hover .player-tooltip, + button:focus .player-tooltip { + visibility: visible; + opacity: 1; + transform: translate(-50%, 0); + } + label:hover .player-tooltip, + button:hover .player-tooltip { + z-index: 3; + } + + // Player progress + // <progress> element + &-progress { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: @control-spacing; + background: @progress-bg; + + &-buffer[value], + &-played[value], + &-seek[type=range] { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: @control-spacing; + margin: 0; + padding: 0; + vertical-align: top; + + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background: transparent; + } + &-buffer[value], + &-played[value] { + &::-webkit-progress-bar { + background: transparent; + } + + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + } + &::-moz-progress-bar { + background: currentColor; + } + } + &-played[value] { + z-index: 2; + color: @progress-playing-bg; + } + &-buffer[value] { + color: @progress-buffered-bg; + } + + // Seek control + // <input[type='range']> element + // Specificity is for bootstrap compatibility + &-seek[type=range] { + z-index: 4; + cursor: pointer; + outline: 0; + + // Webkit + &::-webkit-slider-runnable-track { + .seek-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + .seek-thumb(); + } + + // Mozilla + &::-moz-range-track { + .seek-track(); + } + &::-moz-range-thumb { + -moz-appearance: none; + .seek-thumb(); + } + + // Microsoft + &::-ms-track { + color: transparent; + .seek-track(); + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .seek-track(); + } + &::-ms-thumb { + .seek-thumb(); + } + + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + } + } + + // Loading state + &.loading .player-progress-buffer { + animation: progress 1s linear infinite; + background-size: @progress-loading-size @progress-loading-size; + background-repeat: repeat-x; + background-color: @progress-buffered-bg; + background-image: linear-gradient( + -45deg, + @progress-loading-bg 25%, + transparent 25%, + transparent 50%, + @progress-loading-bg 50%, + @progress-loading-bg 75%, + transparent 75%, + transparent); + color: transparent; + } + + // States + &-controls [data-player='pause'], + &.playing .player-controls [data-player='play'] { + display: none; + } + &.playing .player-controls [data-player='pause'] { + display: inline-block; + } + + // Volume control + // <input[type='range']> element + // Specificity is for bootstrap compatibility + &-volume[type=range] { + display: inline-block; + vertical-align: middle; + -webkit-appearance: none; + -moz-appearance: none; + width: 100px; + margin: 0 @control-spacing 0 0; + padding: 0; + cursor: pointer; + background: none; + + // Webkit + &::-webkit-slider-runnable-track { + .volume-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -((@volume-thumb-height - @volume-track-height) / 2); + .volume-thumb(); + } + + // Mozilla + &::-moz-range-track { + .volume-track(); + } + &::-moz-range-thumb { + .volume-thumb(); + } + + // Microsoft + &::-ms-track { + height: @volume-track-height; + background: transparent; + border-color: transparent; + border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0; + color: transparent; + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .volume-track(); + } + &::-ms-thumb { + .volume-thumb(); + } + + &:focus { + outline: 0; + + &::-webkit-slider-thumb { + background: @volume-thumb-bg-focus; + } + &::-moz-range-thumb { + background: @volume-thumb-bg-focus; + } + &::-ms-thumb { + background: @volume-thumb-bg-focus; + } + } + } + + // Hide sound controls on iOS + // It's not supported to change volume using JavaScript: + // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html + &.ios &-volume, + &.ios [data-player='mute'], + &.ios [data-player='mute'] + label, + &-audio.ios &-controls-right { + display: none; + } + // Center buttons so it looks less odd + &-audio.ios &-controls-left { + float: none; + } + + // Full screen mode + &-fullscreen, + &.fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + z-index: 10000000; + background: #000; + + .player-video-wrapper { + height: 100%; + width: 100%; + + video { + height: 100%; + } + .player-captions { + top: auto; + bottom: 90px; + + @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) { + bottom: 60px; + } + @media (min-width: @bp-captions-large) { + bottom: 80px; + } + } + } + .player-controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } + } + + // Change icons on state change + &.fullscreen-active .icon-exit-fullscreen, + &.muted .player-controls .icon-muted, + &.captions-active .player-controls .icon-captions-on { + display: block; + + & + svg { + display: none; + } + } + + // Some options are hidden by default + [data-player='captions'], + [data-player='captions'] + label, + [data-player='fullscreen'], + [data-player='fullscreen'] + label { + display: none; + } + &.captions-enabled [data-player='captions'], + &.captions-enabled [data-player='captions'] + label, + &.fullscreen-enabled [data-player='fullscreen'], + &.fullscreen-enabled [data-player='fullscreen'] + label { + display: inline-block; + } + + // Full browser view hides toggle + &-fullscreen [data-player='fullscreen'], + &-fullscreen [data-player='fullscreen'] + label { + display: none !important; + } }
\ No newline at end of file diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 17b770a2..d1402706 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -5,588 +5,588 @@ // Variables // ------------------------------- // Colors -$blue: #3498DB; -$gray-dark: #343f4a; -$gray: #565d64; -$gray-light: #cbd0d3; +$blue: #3498DB; +$gray-dark: #343f4a; +$gray: #565d64; +$gray-light: #cbd0d3; // Font sizes -$font-size-small: 14px; -$font-size-base: 16px; -$font-size-large: ceil(($font-size-base * 1.5)); +$font-size-small: 14px; +$font-size-base: 16px; +$font-size-large: ceil(($font-size-base * 1.5)); // Controls -$control-spacing: 10px; -$controls-bg: $gray-dark; -$control-bg-hover: $blue; -$control-color: $gray-light; -$control-color-inactive: $gray; -$control-color-hover: #fff; +$control-spacing: 10px; +$controls-bg: $gray-dark; +$control-bg-hover: $blue; +$control-color: $gray-light; +$control-color-inactive: $gray; +$control-color-hover: #fff; // Tooltips -$tooltip-bg: $controls-bg; -$tooltip-color: #fff; -$tooltip-padding: $control-spacing; -$tooltip-arrow-size: 5px; -$tooltip-radius: 3px; +$tooltip-bg: $controls-bg; +$tooltip-color: #fff; +$tooltip-padding: $control-spacing; +$tooltip-arrow-size: 5px; +$tooltip-radius: 3px; // Progress -$progress-bg: lighten($gray, 10%); -$progress-playing-bg: $blue; -$progress-buffered-bg: $gray; -$progress-loading-size: 40px; -$progress-loading-bg: rgba(0,0,0, .15); +$progress-bg: lighten($gray, 10%); +$progress-playing-bg: $blue; +$progress-buffered-bg: $gray; +$progress-loading-size: 40px; +$progress-loading-bg: rgba(0,0,0, .15); // Volume -$volume-track-height: 6px; -$volume-track-bg: $gray; -$volume-thumb-height: ($volume-track-height * 2); -$volume-thumb-width: ($volume-track-height * 2); -$volume-thumb-bg: $control-color; -$volume-thumb-bg-focus: $control-bg-hover; +$volume-track-height: 6px; +$volume-track-bg: $gray; +$volume-thumb-height: ($volume-track-height * 2); +$volume-thumb-width: ($volume-track-height * 2); +$volume-thumb-bg: $control-color; +$volume-thumb-bg-focus: $control-bg-hover; // Breakpoints -$bp-control-split: 560px; // When controls split into left/right -$bp-captions-large: 768px; // When captions jump to the larger font size +$bp-control-split: 560px; // When controls split into left/right +$bp-captions-large: 768px; // When captions jump to the larger font size // Utility classes & mixins // ------------------------------- // Screen reader only .sr-only { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; } // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } + zoom: 1; + &:before, + &:after { content: ""; display: table; } + &:after { clear: both; } } // Tab focus styles @mixin tab-focus() { - outline: thin dotted #000; - outline-offset: 0; + outline: thin dotted #000; + outline-offset: 0; } // Animation // --------------------------------------- @keyframes progress { - to { background-position: $progress-loading-size 0; } + to { background-position: $progress-loading-size 0; } } // <input type="range"> styling // --------------------------------------- @mixin volume-thumb() { - height: $volume-thumb-height; - width: $volume-thumb-width; - background: $volume-thumb-bg; - border: 0; - border-radius: ($volume-thumb-height / 2); - transition: background .3s ease; - cursor: ew-resize; + height: $volume-thumb-height; + width: $volume-thumb-width; + background: $volume-thumb-bg; + border: 0; + border-radius: ($volume-thumb-height / 2); + transition: background .3s ease; + cursor: ew-resize; } @mixin volume-track() { - height: $volume-track-height; - background: $volume-track-bg; - border: 0; - border-radius: ($volume-track-height / 2); + height: $volume-track-height; + background: $volume-track-bg; + border: 0; + border-radius: ($volume-track-height / 2); } @mixin seek-thumb() { - background: transparent; - border: 0; - width: ($control-spacing * 2); - height: $control-spacing; + background: transparent; + border: 0; + width: ($control-spacing * 2); + height: $control-spacing; } @mixin seek-track() { - background: none; - border: 0; + background: none; + border: 0; } // Font smoothing // --------------------------------------- @mixin font-smoothing($mode: on) { - @if $mode == 'on' { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } @else if $mode == 'off' { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } + @if $mode == 'on' { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } @else if $mode == 'off' { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } } // Styles // ------------------------------- // Base .player { - position: relative; - max-width: 100%; - min-width: 290px; - - // border-box everything - // http://paulirish.com/2012/box-sizing-border-box-ftw/ - &, - *, - *::after, - *::before { - box-sizing: border-box; - } - - // For video - &-video-wrapper { position: relative; - } - video { - width: 100%; - height: auto; - vertical-align: middle; - } - - // Captions - &-captions { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 20px; - min-height: 2.5em; - color: #fff; - font-size: $font-size-base; - font-weight: 600; - text-shadow: - -1px -1px 0 $gray, - 1px -1px 0 $gray, - -1px 1px 0 $gray, - 1px 1px 0 $gray; - text-align: center; - @include font-smoothing(); - - @media (min-width: $bp-captions-large) { - font-size: $font-size-large; + max-width: 100%; + min-width: 290px; + + // border-box everything + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; } - } - &.captions-active &-captions { - display: block; - } - - // Player controls - &-controls { - @include clearfix(); - @include font-smoothing(); - position: relative; - padding: ($control-spacing * 2) $control-spacing $control-spacing; - background: $controls-bg; - line-height: 1; - text-align: center; - - // Layout - &-right { - display: block; - margin: $control-spacing auto 0; + + // For video + &-video-wrapper { + position: relative; } - @media (min-width: $bp-control-split) { - &-left { - float: left; - } - &-right { - float: right; - margin-top: 0; - } + video { + width: 100%; + height: auto; + vertical-align: middle; } - input + label, - button { - display: inline-block; - vertical-align: middle; - margin: 0 2px; - padding: ($control-spacing / 2) $control-spacing; - - transition: background .3s ease; - border-radius: 3px; - cursor: pointer; + // Captions + &-captions { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 20px; + min-height: 2.5em; + color: #fff; + font-size: $font-size-base; + font-weight: 600; + text-shadow: + -1px -1px 0 $gray, + 1px -1px 0 $gray, + -1px 1px 0 $gray, + 1px 1px 0 $gray; + text-align: center; + @include font-smoothing(); - svg { - width: 18px; - height: 18px; - display: block; - fill: currentColor; - transition: fill .3s ease; - } - } - input + label, - .inverted:checked + label { - color: $control-color-inactive; - } - button, - .inverted + label, - input:checked + label { - color: $control-color; + @media (min-width: $bp-captions-large) { + font-size: $font-size-large; + } } - button { - border: 0; - background: transparent; - overflow: hidden; + &.captions-active &-captions { + display: block; } - // Specificity for overriding .inverted - button:focus, - button:hover, - [type="checkbox"]:focus + label, - [type="checkbox"] + label:hover { - background: $control-bg-hover; - color: $control-color-hover; - } - button:focus, - input:focus + label { - outline: 0; + // Player controls + &-controls { + @include clearfix(); + @include font-smoothing(); + position: relative; + padding: ($control-spacing * 2) $control-spacing $control-spacing; + background: $controls-bg; + line-height: 1; + text-align: center; + + // Layout + &-right { + display: block; + margin: $control-spacing auto 0; + } + @media (min-width: $bp-control-split) { + &-left { + float: left; + } + &-right { + float: right; + margin-top: 0; + } + } + + input + label, + button { + display: inline-block; + vertical-align: middle; + margin: 0 2px; + padding: ($control-spacing / 2) $control-spacing; + + transition: background .3s ease; + border-radius: 3px; + cursor: pointer; + + svg { + width: 18px; + height: 18px; + display: block; + fill: currentColor; + transition: fill .3s ease; + } + } + input + label, + .inverted:checked + label { + color: $control-color-inactive; + } + button, + .inverted + label, + input:checked + label { + color: $control-color; + } + button { + border: 0; + background: transparent; + overflow: hidden; + } + + // Specificity for overriding .inverted + button:focus, + button:hover, + [type="checkbox"]:focus + label, + [type="checkbox"] + label:hover { + background: $control-bg-hover; + color: $control-color-hover; + } + button:focus, + input:focus + label { + outline: 0; + } + .icon-exit-fullscreen, + .icon-muted, + .icon-captions-on { + display: none; + } + .player-time { + display: inline-block; + vertical-align: middle; + margin-left: $control-spacing; + color: $control-color; + font-weight: 600; + font-size: $font-size-small; + @include font-smoothing(); + } } - .icon-exit-fullscreen, - .icon-muted, - .icon-captions-on { - display: none; + + // Tooltips + &-tooltip { + visibility: hidden; + position: absolute; + z-index: 2; + bottom: 100%; + margin-bottom: $tooltip-padding; + padding: $tooltip-padding ($tooltip-padding * 1.5); + + opacity: 0; + background: $tooltip-bg; + border-radius: $tooltip-radius; + color: $tooltip-color; + font-size: $font-size-small; + line-height: 1.5; + font-weight: 600; + + transform: translate(-50%, ($tooltip-padding * 3)); + transition: transform .2s .2s ease, opacity .2s .2s ease; + + &::after { + content: ""; + display: block; + position: absolute; + left: 50%; + bottom: -$tooltip-arrow-size; + margin-left: -$tooltip-arrow-size; + width: 0; + height: 0; + transition: inherit; + border-style: solid; + border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size; + border-color: $controls-bg transparent transparent; + } } - .player-time { - display: inline-block; - vertical-align: middle; - margin-left: $control-spacing; - color: $control-color; - font-weight: 600; - font-size: $font-size-small; - @include font-smoothing(); + label:hover .player-tooltip, + input:focus + label .player-tooltip, + button:hover .player-tooltip, + button:focus .player-tooltip { + visibility: visible; + opacity: 1; + transform: translate(-50%, 0); } - } - - // Tooltips - &-tooltip { - visibility: hidden; - position: absolute; - z-index: 2; - bottom: 100%; - margin-bottom: $tooltip-padding; - padding: $tooltip-padding ($tooltip-padding * 1.5); - - opacity: 0; - background: $tooltip-bg; - border-radius: $tooltip-radius; - color: $tooltip-color; - font-size: $font-size-small; - line-height: 1.5; - font-weight: 600; - - transform: translate(-50%, ($tooltip-padding * 3)); - transition: transform .2s .2s ease, opacity .2s .2s ease; - - &::after { - content: ""; - display: block; - position: absolute; - left: 50%; - bottom: -$tooltip-arrow-size; - margin-left: -$tooltip-arrow-size; - width: 0; - height: 0; - transition: inherit; - border-style: solid; - border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size; - border-color: $controls-bg transparent transparent; + label:hover .player-tooltip, + button:hover .player-tooltip { + z-index: 3; } - } - label:hover .player-tooltip, - input:focus + label .player-tooltip, - button:hover .player-tooltip, - button:focus .player-tooltip { - visibility: visible; - opacity: 1; - transform: translate(-50%, 0); - } - label:hover .player-tooltip, - button:hover .player-tooltip { - z-index: 3; - } - - // Player progress - // <progress> element - &-progress { - position: absolute; - top: 0; - left: 0; - right: 0; - width: 100%; - height: $control-spacing; - background: $progress-bg; - - &-buffer[value], - &-played[value], - &-seek[type=range] { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: $control-spacing; - margin: 0; - padding: 0; - vertical-align: top; - - -webkit-appearance: none; - -moz-appearance: none; - border: none; - background: transparent; + + // Player progress + // <progress> element + &-progress { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: $control-spacing; + background: $progress-bg; + + &-buffer[value], + &-played[value], + &-seek[type=range] { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: $control-spacing; + margin: 0; + padding: 0; + vertical-align: top; + + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background: transparent; + } + &-buffer[value], + &-played[value] { + &::-webkit-progress-bar { + background: transparent; + } + + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + } + &::-moz-progress-bar { + background: currentColor; + } + } + &-played[value] { + z-index: 2; + color: $progress-playing-bg; + } + &-buffer[value] { + color: $progress-buffered-bg; + } + + // Seek control + // <input[type='range']> element + // Specificity is for bootstrap compatibility + &-seek[type=range] { + z-index: 4; + cursor: pointer; + outline: 0; + + // Webkit + &::-webkit-slider-runnable-track { + @include seek-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + @include seek-thumb(); + } + + // Mozilla + &::-moz-range-track { + @include seek-track(); + } + &::-moz-range-thumb { + -moz-appearance: none; + @include seek-thumb(); + } + + // Microsoft + &::-ms-track { + color: transparent; + @include seek-track(); + } + &::-ms-fill-lower, + &::-ms-fill-upper { + @include seek-track(); + } + &::-ms-thumb { + @include seek-thumb(); + } + + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + } } - &-buffer[value], - &-played[value] { - &::-webkit-progress-bar { - background: transparent; - } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } + + // Loading state + &.loading .player-progress-buffer { + animation: progress 1s linear infinite; + background-size: $progress-loading-size $progress-loading-size; + background-repeat: repeat-x; + background-color: $progress-buffered-bg; + background-image: linear-gradient( + -45deg, + $progress-loading-bg 25%, + transparent 25%, + transparent 50%, + $progress-loading-bg 50%, + $progress-loading-bg 75%, + transparent 75%, + transparent); + color: transparent; } - &-played[value] { - z-index: 2; - color: $progress-playing-bg; + + // States + &-controls [data-player='pause'], + &.playing .player-controls [data-player='play'] { + display: none; } - &-buffer[value] { - color: $progress-buffered-bg; + &.playing .player-controls [data-player='pause'] { + display: inline-block; } - // Seek control + // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-seek[type=range] { - z-index: 4; - cursor: pointer; - outline: 0; - - // Webkit - &::-webkit-slider-runnable-track { - @include seek-track(); - } - &::-webkit-slider-thumb { + &-volume[type=range] { + display: inline-block; + vertical-align: middle; -webkit-appearance: none; - @include seek-thumb(); - } - - // Mozilla - &::-moz-range-track { - @include seek-track(); - } - &::-moz-range-thumb { -moz-appearance: none; - @include seek-thumb(); - } - - // Microsoft - &::-ms-track { - color: transparent; - @include seek-track(); - } - &::-ms-fill-lower, - &::-ms-fill-upper { - @include seek-track(); - } - &::-ms-thumb { - @include seek-thumb(); - } - - &:focus { - outline: 0; - } - &::-moz-focus-outer { - border: 0; - } - } - } - - // Loading state - &.loading .player-progress-buffer { - animation: progress 1s linear infinite; - background-size: $progress-loading-size $progress-loading-size; - background-repeat: repeat-x; - background-color: $progress-buffered-bg; - background-image: linear-gradient( - -45deg, - $progress-loading-bg 25%, - transparent 25%, - transparent 50%, - $progress-loading-bg 50%, - $progress-loading-bg 75%, - transparent 75%, - transparent); - color: transparent; - } - - // States - &-controls [data-player='pause'], - &.playing .player-controls [data-player='play'] { - display: none; - } - &.playing .player-controls [data-player='pause'] { - display: inline-block; - } - - // Volume control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &-volume[type=range] { - display: inline-block; - vertical-align: middle; - -webkit-appearance: none; - -moz-appearance: none; - width: 100px; - margin: 0 $control-spacing 0 0; - padding: 0; - cursor: pointer; - background: none; + width: 100px; + margin: 0 $control-spacing 0 0; + padding: 0; + cursor: pointer; + background: none; + + // Webkit + &::-webkit-slider-runnable-track { + @include volume-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -(($volume-thumb-height - $volume-track-height) / 2); + @include volume-thumb(); + } - // Webkit - &::-webkit-slider-runnable-track { - @include volume-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -(($volume-thumb-height - $volume-track-height) / 2); - @include volume-thumb(); - } + // Mozilla + &::-moz-range-track { + @include volume-track(); + } + &::-moz-range-thumb { + @include volume-thumb(); + } - // Mozilla - &::-moz-range-track { - @include volume-track(); - } - &::-moz-range-thumb { - @include volume-thumb(); - } + // Microsoft + &::-ms-track { + height: $volume-track-height; + background: transparent; + border-color: transparent; + border-width: (($volume-thumb-height - $volume-track-height) / 2) 0; + color: transparent; + } + &::-ms-fill-lower, + &::-ms-fill-upper { + @include volume-track(); + } + &::-ms-thumb { + @include volume-thumb(); + } - // Microsoft - &::-ms-track { - height: $volume-track-height; - background: transparent; - border-color: transparent; - border-width: (($volume-thumb-height - $volume-track-height) / 2) 0; - color: transparent; + &:focus { + outline: 0; + + &::-webkit-slider-thumb { + background: $volume-thumb-bg-focus; + } + &::-moz-range-thumb { + background: $volume-thumb-bg-focus; + } + &::-ms-thumb { + background: $volume-thumb-bg-focus; + } + } } - &::-ms-fill-lower, - &::-ms-fill-upper { - @include volume-track(); + + // Hide sound controls on iOS + // It's not supported to change volume using JavaScript: + // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html + &.ios &-volume, + &.ios [data-player='mute'], + &.ios [data-player='mute'] + label, + &-audio.ios &-controls-right { + display: none; } - &::-ms-thumb { - @include volume-thumb(); + // Center buttons so it looks less odd + &-audio.ios &-controls-left { + float: none; } - &:focus { - outline: 0; - - &::-webkit-slider-thumb { - background: $volume-thumb-bg-focus; - } - &::-moz-range-thumb { - background: $volume-thumb-bg-focus; - } - &::-ms-thumb { - background: $volume-thumb-bg-focus; - } - } - } - - // Hide sound controls on iOS - // It's not supported to change volume using JavaScript: - // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html - &.ios &-volume, - &.ios [data-player='mute'], - &.ios [data-player='mute'] + label, - &-audio.ios &-controls-right { - display: none; - } - // Center buttons so it looks less odd - &-audio.ios &-controls-left { - float: none; - } - - // Full screen mode - &-fullscreen, - &.fullscreen-active { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 10000000; - background: #000; - - .player-video-wrapper { - height: 100%; - width: 100%; - - video { + // Full screen mode + &-fullscreen, + &.fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; height: 100%; - } - .player-captions { - top: auto; - bottom: 90px; - - @media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) { - bottom: 60px; + width: 100%; + z-index: 10000000; + background: #000; + + .player-video-wrapper { + height: 100%; + width: 100%; + + video { + height: 100%; + } + .player-captions { + top: auto; + bottom: 90px; + + @media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) { + bottom: 60px; + } + @media (min-width: $bp-captions-large) { + bottom: 80px; + } + } } - @media (min-width: $bp-captions-large) { - bottom: 80px; + .player-controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; } - } } - .player-controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; + + // Change icons on state change + &.fullscreen-active .icon-exit-fullscreen, + &.muted .player-controls .icon-muted, + &.captions-active .player-controls .icon-captions-on { + display: block; + + & + svg { + display: none; + } } - } - // Change icons on state change - &.fullscreen-active .icon-exit-fullscreen, - &.muted .player-controls .icon-muted, - &.captions-active .player-controls .icon-captions-on { - display: block; + // Some options are hidden by default + [data-player='captions'], + [data-player='captions'] + label, + [data-player='fullscreen'], + [data-player='fullscreen'] + label { + display: none; + } + &.captions-enabled [data-player='captions'], + &.captions-enabled [data-player='captions'] + label, + &.fullscreen-enabled [data-player='fullscreen'], + &.fullscreen-enabled [data-player='fullscreen'] + label { + display: inline-block; + } - & + svg { - display: none; + // Full browser view hides toggle + &-fullscreen [data-player='fullscreen'], + &-fullscreen [data-player='fullscreen'] + label { + display: none !important; } - } - - // Some options are hidden by default - [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { - display: none; - } - &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { - display: inline-block; - } - - // Full browser view hides toggle - &-fullscreen [data-player='fullscreen'], - &-fullscreen [data-player='fullscreen'] + label { - display: none !important; - } } |