diff options
32 files changed, 675 insertions, 370 deletions
@@ -17,7 +17,7 @@ "dist/plyr.js", "dist/sprite.svg", "src/less/plyr.less", - "src/sass/plyr.sass", + "src/sass/plyr.scss", "src/js/plyr.js" ], "ignore": [ @@ -30,4 +30,4 @@ "url": "git://github.com/selz/plyr.git" }, "license": "MIT" -}
\ No newline at end of file +} diff --git a/bundles.json b/bundles.json index 0595c557..f96c12d2 100644 --- a/bundles.json +++ b/bundles.json @@ -17,6 +17,7 @@ "js": { "docs.js": [ "docs/src/js/lib/hogan-3.0.2.mustache.js", + "docs/src/js/lib/classlist.js", "docs/dist/templates.js", "docs/src/js/docs.js" ] diff --git a/changelog.md b/changelog.md index 710a136b..1cf71c24 100644 --- a/changelog.md +++ b/changelog.md @@ -1,7 +1,49 @@ # Changelog -## v1.2.0 -- Added YouTube support. +# v1.3.5 +- Fixed bug with API use on basic supported browsers + +# v1.3.4 +- Code cleanup by @calvintam236 + +# v1.3.3 +- Removed captions being read by screen readers + +# v1.3.2 +- Voiceover fix for captions + +# v1.3.1 +- ARIA improvements for captions being read + +# v1.3.0 +- Internationalization support (i18n) using default controls (required markup changes to controls) +- ARIA enhancements for controls (required markup changes to controls) +- Captions legibility improvements +- YouTube bug fixes + +## v1.2.6 +- SASS updates and fixes (cheers @ChristianPV) + +## v1.2.5 +- Fix for YouTube quality (let them decide quality) + +## v1.2.4 +- Fix for omitted kind attribute on <track> (fixes #88) + +## v1.2.3 +- Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native) +- Docs tidy up +- Fullscreen for Safari fix (Fixes #96) + +## v1.2.2 +- Fix for :focus keyboard vs mouse (Fixes #61) +- Fix for caption positioning in full screen (Fixes #92) + +## v1.2.1 +- Tooltip bug fix + +# v1.2.0 +- Added YouTube support ## v1.1.13 - Added icon prefix option for when using default controls diff --git a/controls.md b/controls.md index 510da2de..bc536f0a 100644 --- a/controls.md +++ b/controls.md @@ -1,10 +1,36 @@ -# Controls HTML +# Controls This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. -The demo Plyr setup uses a Hogan template. This purely to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. +## Internationalization using default controls -## Requirements +You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. + +### Example + +```javascript +i18n: { + restart: "Restart", + rewind: "Rewind {seektime} secs", + play: "Play", + pause: "Pause", + forward: "Forward {seektime} secs", + played: "played", + buffered: "buffered", + currentTime: "Current time", + duration: "Duration", + volume: "Volume", + toggleMute: "Toggle Mute", + toggleCaptions: "Toggle Captions", + toggleFullscreen: "Toggle Fullscreen" +} +``` + +Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs". + +## Using custom HTML + +The example on [plyr.io](http://plyr.io) setup uses a Hogan template. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. The classes and data attributes used in your template should match the `selectors` option. @@ -15,7 +41,7 @@ You need to add several placeholders to your html template that are replaced whe You can include only the controls you need when specifying custom html. -## Example +### Example This is an example `html` option with all controls. @@ -62,20 +88,18 @@ This is an example `html` option with all controls. "</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}'>", + "<button type='button' data-player='mute'>", "<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>", + "</button>", "<label for='volume{id}' class='sr-only'>Volume</label>", "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>", - "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>", - "<label for='captions{id}'>", + "<button type='button' data-player='captions'>", "<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>", "<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>", diff --git a/dist/sprite.svg b/dist/sprite.svg index 2aa2e0bf..b4909d2d 100644 --- a/dist/sprite.svg +++ b/dist/sprite.svg @@ -1 +1 @@ -<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><title>icon-captions-off</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><title>icon-captions-on</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><title>expand</title><path d="M6.425 10.165l-2.57 2.57.018-1.847c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.99.992l-.024 4.22c0 .264.106.518.295.707.01.007.017.016.026.023.008.007.015.017.023.025.187.188.442.294.706.295l4.22-.023c.55.002.994-.442.992-.992-.003-.55-.45-1-1.002-1.002l-1.847.017 2.568-2.57c.387-.386.387-1.012 0-1.4l-.012-.012c-.387-.386-1.014-.386-1.4 0zM14.154 5.266l-.017 1.846c.003.552.45 1 1.002 1.002.55.003.994-.442.99-.992l.025-4.22c-.002-.264-.107-.518-.296-.707-.01-.007-.017-.016-.026-.023-.008-.007-.015-.017-.023-.025-.187-.188-.442-.294-.706-.295l-4.22.023c-.55-.002-.994.442-.99.992 0 .55.45 1 1 1.002l1.847-.017-2.568 2.57c-.387.386-.387 1.012 0 1.4.4.398 1.026.398 1.413.012l2.57-2.57z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><title>collapse</title><path d="M14.425 2.165l-2.57 2.57.018-1.847c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.99.992l-.024 4.22c0 .264.106.518.295.707.01.007.017.016.026.023.008.007.015.017.023.025.187.188.442.294.706.295l4.22-.023c.55.002.994-.442.992-.992-.003-.55-.45-1-1.002-1.002l-1.847.017 2.568-2.57c.387-.386.387-1.012 0-1.4l-.012-.012c-.387-.386-1.014-.386-1.4 0zM6.154 13.266l-.017 1.846c.003.552.45 1 1.002 1.002.55.003.994-.442.99-.992l.025-4.22c-.002-.264-.107-.518-.296-.707-.01-.007-.017-.016-.026-.023-.008-.007-.015-.017-.023-.025-.187-.188-.442-.294-.706-.295l-4.22.023c-.55-.002-.994.442-.99.992 0 .55.45 1 1 1.002l1.847-.017-2.568 2.57c-.387.386-.387 1.012 0 1.4.4.398 1.026.398 1.413.012l2.57-2.57z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><title>muted</title><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67z" id="Shape"/><path d="M14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>pause</title><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 18 18"><title>icon-restart</title><path d="M1 2c.552 0 1 .448 1 1v4.318L11 2c.552 0 1 .448 1 1v1.954L17 2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1l-5-2.955V15c0 .552-.448 1-1 1l-9-5.318V15c0 .552-.448 1-1 1s-1-.448-1-1V3c0-.552.448-1 1-1zm11 8.722l4 2.364V4.914l-4 2.364v3.444zm-2 2.364V4.914L3.085 9 10 13.086z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>rewind</title><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
\ No newline at end of file +<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M6.425 10.165l-2.57 2.57.018-1.847c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.99.992l-.024 4.22c0 .264.106.518.295.707.01.007.017.016.026.023.008.007.015.017.023.025.187.188.442.294.706.295l4.22-.023c.55.002.994-.442.992-.992-.003-.55-.45-1-1.002-1.002l-1.847.017 2.568-2.57c.387-.386.387-1.012 0-1.4l-.012-.012c-.387-.386-1.014-.386-1.4 0zM14.154 5.266l-.017 1.846c.003.552.45 1 1.002 1.002.55.003.994-.442.99-.992l.025-4.22c-.002-.264-.107-.518-.296-.707-.01-.007-.017-.016-.026-.023-.008-.007-.015-.017-.023-.025-.187-.188-.442-.294-.706-.295l-4.22.023c-.55-.002-.994.442-.99.992 0 .55.45 1 1 1.002l1.847-.017-2.568 2.57c-.387.386-.387 1.012 0 1.4.4.398 1.026.398 1.413.012l2.57-2.57z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M14.425 2.165l-2.57 2.57.018-1.847c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.99.992l-.024 4.22c0 .264.106.518.295.707.01.007.017.016.026.023.008.007.015.017.023.025.187.188.442.294.706.295l4.22-.023c.55.002.994-.442.992-.992-.003-.55-.45-1-1.002-1.002l-1.847.017 2.568-2.57c.387-.386.387-1.012 0-1.4l-.012-.012c-.387-.386-1.014-.386-1.4 0zM6.154 13.266l-.017 1.846c.003.552.45 1 1.002 1.002.55.003.994-.442.99-.992l.025-4.22c-.002-.264-.107-.518-.296-.707-.01-.007-.017-.016-.026-.023-.008-.007-.015-.017-.023-.025-.187-.188-.442-.294-.706-.295l-4.22.023c-.55-.002-.994.442-.99.992 0 .55.45 1 1 1.002l1.847-.017-2.568 2.57c-.387.386-.387 1.012 0 1.4.4.398 1.026.398 1.413.012l2.57-2.57z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 18 18"><path d="M1 2c.552 0 1 .448 1 1v4.318L11 2c.552 0 1 .448 1 1v1.954L17 2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1l-5-2.955V15c0 .552-.448 1-1 1l-9-5.318V15c0 .552-.448 1-1 1s-1-.448-1-1V3c0-.552.448-1 1-1zm11 8.722l4 2.364V4.914l-4 2.364v3.444zm-2 2.364V4.914L3.085 9 10 13.086z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
\ No newline at end of file diff --git a/docs/dist/docs.js b/docs/dist/docs.js index c5a044c7..6a5addd8 100644 --- a/docs/dist/docs.js +++ b/docs/dist/docs.js @@ -1 +1 @@ -var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var c,l=new i;l.subs=new o,l.subsText={},l.buf="",s=s||{},l.stackSubs=s,l.subsText=a;for(c in n)s[c]||(s[c]=n[c]);for(c in s)l.subs[c]=s[c];r=r||{},l.stackPartials=r;for(c in e)r[c]||(r[c]=e[c]);for(c in r)l.partials[c]=r[c];return l}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),u.test(t)?t.replace(a,"&").replace(i,"<").replace(o,">").replace(c,"'").replace(l,"""):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,a,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,a,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var a,i=t.split("."),o=this.f(i[0],e,s,r),c=this.options.modelGet,l=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var u=1;u<i.length;u++)a=n(i[u],o,c),void 0!==a?(l=o,o=a):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(l),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var a=!1,i=null,o=!1,c=this.options.modelGet,l=e.length-1;l>=0;l--)if(i=e[l],a=n(t,i,c),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,c=n[n.length-1],l=t.call(c);return"function"==typeof l?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(l,c,e,o.substring(r,a),i)):l},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=/</g,o=/>/g,c=/\'/g,l=/\"/g,u=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var c=[],l=null,u=null,p=null;for(u=s[s.length-1];n.length>0;){if(p=n.shift(),u&&"<"==u.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(l=s.pop(),p.n!=l.n&&!i(p.n,l.n,o))throw new Error("Nesting error: "+l.n+" vs. "+p.n);return l.end=p.i,c}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}c.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return c}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+l(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function c(t){var n=[];for(var e in t.partials)n.push('"'+l(e)+'":{name:"'+l(t.partials[e].name)+'", '+c(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function l(t){return t.replace(w,"\\\\").replace(g,'\\"').replace(h,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(y,"\\u2029")}function u(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+x++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+l(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var d=/\S/,g=/\"/g,h=/\n/g,v=/\r/g,w=/\\/g,m=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){w.length>0&&(m.push({tag:"_t",text:new String(w)}),w="")}function o(){for(var n=!0,e=x;e<m.length;e++)if(n=t.tags[m[e].tag]<t.tags._v||"_t"==m[e].tag&&null===m[e].text.match(d),!n)return!1;return n}function c(t,n){if(i(),t&&o())for(var e,s=x;s<m.length;s++)m[s].text&&((e=m[s+1])&&">"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});y=!1,x=m.length}function l(t,n){var s="="+T,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=a[0],T=a[a.length-1],r+s.length-1}var u=r.length,p=0,b=1,f=2,g=p,h=null,v=null,w="",m=[],y=!1,k=0,x=0,S="{{",T="}}";for(a&&(a=a.split(" "),S=a[0],T=a[1]),k=0;u>k;k++)g==p?s(S,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?c(y):w+=r.charAt(k):g==b?(k+=S.length-1,v=t.tags[r.charAt(k+1)],h=v?r.charAt(k+1):"_v","="==h?(k=l(r,k),g=p):(v&&k++,g=f),y=k):s(T,r,k)?(m.push({tag:h,n:e(w),otag:S,ctag:T,i:"/"==h?y-S.length:k+T.length}),w="",k+=T.length-1,g=p,"{"==h&&("}}"==T?k++:n(m[m.length-1]))):w+=r.charAt(k);return c(y,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+c(n)+"}"};var x=0;t.generate=function(n,e,s){x=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+u(n.n)+'("'+l(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+u(n.n)+'("'+l(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+l(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+l(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,volume:9,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},onSetup:function(){if("media"in this){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}}),function(){function t(t){"a"==t.target.nodeName.toLowerCase()&&(t.preventDefault?t.preventDefault():t.returnValue=!1);var n=t.target,e=n.href,s=n.getAttribute("data-window-width")||600,r=n.getAttribute("data-window-height")||600,a=n.getAttribute("data-window-name")||"popup";if(window["window-"+a]&&!window["window-"+a].closed)window["window-"+a].focus();else{var i=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,c=screen.width/2-s/2+i,l=screen.height/2-r/2+o;window["window-"+a]=window.open(e,a,"top="+l+",left="+c+",width="+s+",height="+r),window["window-"+a].focus()}}function n(t,n){var e="jsonp_callback_"+Math.round(1e5*Math.random());window[e]=function(t){delete window[e],document.body.removeChild(s),n(t)};var s=document.createElement("script");s.setAttribute("src",t+(t.indexOf("?")>=0?"&":"?")+"callback="+e),document.body.appendChild(s)}function e(t,n){document.querySelector(t).innerHTML=n}function s(t){return"★ "+t}function r(t){t.preventDefault();for(var n=t.target,e=document.querySelector(n.getAttribute("href")),s=c.length-1;s>=0;s--)c[s].classList.remove(l);for(var r=o.length-1;r>=0;r--)o[r].classList.remove(l);e.classList.add(l),t.target.classList.add(l)}document.querySelector(".js-popup").addEventListener("click",t);var a="sessionStorage"in window,i={github:".js-stargazers-count",twitter:".js-tweet-count"};a&&"github_stargazers"in window.sessionStorage?e(i.github,s(window.sessionStorage.github_stargazers)):n("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(e(i.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),a&&"tweets"in window.sessionStorage?e(i.twitter,window.sessionStorage.tweets):n("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(e(i.twitter,t.count),window.sessionStorage.tweets=t.count)});for(var o=document.querySelectorAll(".nav-panel a"),c=document.querySelectorAll(".panels > .panel"),l="active",u=o.length-1;u>=0;u--)o[u].addEventListener("click",r)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,a,i){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,a=n.createElement(e),i=n.getElementsByTagName(e)[0],a.async=1,a.src=s,i.parentNode.insertBefore(a,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file +var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,i){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var c,u=new a;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=i;for(c in n)s[c]||(s[c]=n[c]);for(c in s)u.subs[c]=s[c];r=r||{},u.stackPartials=r;for(c in e)r[c]||(r[c]=e[c]);for(c in r)u.partials[c]=r[c];return u}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),l.test(t)?t.replace(i,"&").replace(a,"<").replace(o,">").replace(c,"'").replace(u,"""):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,i,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,i,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var i,a=t.split("."),o=this.f(a[0],e,s,r),c=this.options.modelGet,u=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var l=1;l<a.length;l++)i=n(a[l],o,c),void 0!==i?(u=o,o=i):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(u),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var i=!1,a=null,o=!1,c=this.options.modelGet,u=e.length-1;u>=0;u--)if(a=e[u],i=n(t,a,c),void 0!==i){o=!0;break}return o?(r||"function"!=typeof i||(i=this.mv(i,e,s)),i):r?!1:""},ls:function(t,n,e,r,i){var a=this.options.delimiters;return this.options.delimiters=i,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=a,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,i,a){var o,c=n[n.length-1],u=t.call(c);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,c,e,o.substring(r,i),a)):u},mv:function(t,n,e){var r=n[n.length-1],i=t.call(r);return"function"==typeof i?this.ct(s(i.call(r)),r,e):i},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var i=/&/g,a=/</g,o=/>/g,c=/\'/g,u=/\"/g,l=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var c=[],u=null,l=null,p=null;for(l=s[s.length-1];n.length>0;){if(p=n.shift(),l&&"<"==l.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||i(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(u=s.pop(),p.n!=u.n&&!a(p.n,u.n,o))throw new Error("Nesting error: "+u.n+" vs. "+p.n);return u.end=p.i,c}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}c.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return c}function i(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function a(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function c(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+c(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(m,"\\\\").replace(g,'\\"').replace(d,"\\n").replace(v,"\\r").replace(w,"\\u2028").replace(y,"\\u2029")}function l(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+x++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function f(t,n){n.code+="t.b(t.t(t."+l(t.n)+'("'+u(t.n)+'",c,p,0)));'}function b(t){return"t.b("+t+");"}var h=/\S/,g=/\"/g,d=/\n/g,v=/\r/g,m=/\\/g,w=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,i){function a(){m.length>0&&(w.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=x;e<w.length;e++)if(n=t.tags[w[e].tag]<t.tags._v||"_t"==w[e].tag&&null===w[e].text.match(h),!n)return!1;return n}function c(t,n){if(a(),t&&o())for(var e,s=x;s<w.length;s++)w[s].text&&((e=w[s+1])&&">"==e.tag&&(e.indent=w[s].text.toString()),w.splice(s,1));else n||w.push({tag:"\n"});y=!1,x=w.length}function u(t,n){var s="="+T,r=t.indexOf(s,n),i=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=i[0],T=i[i.length-1],r+s.length-1}var l=r.length,p=0,f=1,b=2,g=p,d=null,v=null,m="",w=[],y=!1,k=0,x=0,S="{{",T="}}";for(i&&(i=i.split(" "),S=i[0],T=i[1]),k=0;l>k;k++)g==p?s(S,r,k)?(--k,a(),g=f):"\n"==r.charAt(k)?c(y):m+=r.charAt(k):g==f?(k+=S.length-1,v=t.tags[r.charAt(k+1)],d=v?r.charAt(k+1):"_v","="==d?(k=u(r,k),g=p):(v&&k++,g=b),y=k):s(T,r,k)?(w.push({tag:d,n:e(m),otag:S,ctag:T,i:"/"==d?y-S.length:k+T.length}),m="",k+=T.length-1,g=p,"{"==d&&("}}"==T?k++:n(w[w.length-1]))):m+=r.charAt(k);return c(y,!0),w};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+c(n)+"}"};var x=0;t.generate=function(n,e,s){x=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+l(n.n)+'("'+u(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+l(n.n)+'("'+u(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+u(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=b('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+l(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=b('"'+u(t.text)+'"')},"{":f,"&":f},t.walk=function(n,e){for(var s,r=0,i=n.length;i>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var i=r.partials;for(var a in i)delete i[a].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var i=this.f(n,e,s,0),a=e;return i&&(a=a.concat(i)),t.Template.prototype.rp.call(this,n,a,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var i=s.compile(t),a=i.render(n,e);return r?(r(a),void 0):a}}}(Hogan);"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 n=function(t){var n=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var e,s=arguments.length;for(e=0;s>e;e++)t=arguments[e],n.call(this,t)}};n("add"),n("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var e=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,n){return 1 in arguments&&!this.contains(t)==!n?n:e.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var n="classList",e="prototype",s=t.Element[e],r=Object,i=String[e].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[e].indexOf||function(t){for(var n=0,e=this.length;e>n;n++)if(n in this&&this[n]===t)return n;return-1},o=function(t,n){this.name=t,this.code=DOMException[t],this.message=n},c=function(t,n){if(""===n)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(n))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,n)},u=function(t){for(var n=i.call(t.getAttribute("class")||""),e=n?n.split(/\s+/):[],s=0,r=e.length;r>s;s++)this.push(e[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},l=u[e]=[],p=function(){return new u(this)};if(o[e]=Error[e],l.item=function(t){return this[t]||null},l.contains=function(t){return t+="",-1!==c(this,t)},l.add=function(){var t,n=arguments,e=0,s=n.length,r=!1;do t=n[e]+"",-1===c(this,t)&&(this.push(t),r=!0);while(++e<s);r&&this._updateClassName()},l.remove=function(){var t,n,e=arguments,s=0,r=e.length,i=!1;do for(t=e[s]+"",n=c(this,t);-1!==n;)this.splice(n,1),i=!0,n=c(this,t);while(++s<r);i&&this._updateClassName()},l.toggle=function(t,n){t+="";var e=this.contains(t),s=e?n!==!0&&"remove":n!==!1&&"add";return s&&this[s](t),n===!0||n===!1?n:!e},l.toString=function(){return this.join(" ")},r.defineProperty){var f={get:p,enumerable:!0,configurable:!0};try{r.defineProperty(s,n,f)}catch(b){-2146823252===b.number&&(f.enumerable=!1,r.defineProperty(s,n,f))}}else r[e].__defineGetter__&&s.__defineGetter__(n,p)}}(self));var templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <button type="button" data-player="mute">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"+e),s.b(' <button type="button" data-player="captions">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,volume:9,title:"Video demo",html:templates.controls.render({}),tooltips:!0,captions:{defaultActive:!0},onSetup:function(){if("media"in this){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}}),function(){function t(t){"a"==t.target.nodeName.toLowerCase()&&(t.preventDefault?t.preventDefault():t.returnValue=!1);var n=t.target,e=n.href,s=n.getAttribute("data-window-width")||600,r=n.getAttribute("data-window-height")||600,i=n.getAttribute("data-window-name")||"popup";if(window["window-"+i]&&!window["window-"+i].closed)window["window-"+i].focus();else{var a=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,c=screen.width/2-s/2+a,u=screen.height/2-r/2+o;window["window-"+i]=window.open(e,i,"top="+u+",left="+c+",width="+s+",height="+r),window["window-"+i].focus()}}function n(t,n){var e="jsonp_callback_"+Math.round(1e5*Math.random());window[e]=function(t){delete window[e],document.body.removeChild(s),n(t)};var s=document.createElement("script");s.setAttribute("src",t+(t.indexOf("?")>=0?"&":"?")+"callback="+e),document.body.appendChild(s)}function e(t,n){document.querySelector(t).innerHTML=n}function s(t){return"★ "+t}function r(t){t.preventDefault();for(var n=t.target,e=document.querySelector(n.getAttribute("href")),s=c.length-1;s>=0;s--)c[s].classList.remove(u);for(var r=o.length-1;r>=0;r--)o[r].classList.remove(u);e.classList.add(u),t.target.classList.add(u)}document.querySelector(".js-popup").addEventListener("click",t);var i="sessionStorage"in window,a={github:".js-stargazers-count",twitter:".js-tweet-count"};i&&"github_stargazers"in window.sessionStorage?e(a.github,s(window.sessionStorage.github_stargazers)):n("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(e(a.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),i&&"tweets"in window.sessionStorage?e(a.twitter,window.sessionStorage.tweets):n("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(e(a.twitter,t.count),window.sessionStorage.tweets=t.count)});for(var o=document.querySelectorAll(".nav-panel a"),c=document.querySelectorAll(".panels > .panel"),u="active",l=o.length-1;l>=0;l--)o[l].addEventListener("click",r)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,i,a){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,i=n.createElement(e),a=n.getElementsByTagName(e)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file diff --git a/docs/dist/templates.js b/docs/dist/templates.js index 0cb6d126..7b523c86 100644 --- a/docs/dist/templates.js +++ b/docs/dist/templates.js @@ -1,2 +1,2 @@ var templates = {}; - templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b(" <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
\ No newline at end of file + templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b(" <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"mute\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"captions\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
\ No newline at end of file diff --git a/docs/error.html b/docs/error.html index 9282ad2b..de0428d7 100644 --- a/docs/error.html +++ b/docs/error.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Docs styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.1.14/docs.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.3.5/docs.css"> </head> <body> <main> diff --git a/docs/index.html b/docs/index.html index 77502f35..d6171a78 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,25 +8,27 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Styles --> - <link rel="stylesheet" href="https://cdn.plyr.io/1.1.14/plyr.css?1"> + <link rel="stylesheet" href="https://cdn.plyr.io/1.3.5/plyr.css"> <!-- Docs styles --> - <link rel="stylesheet" href="https://cdn.plyr.io/1.1.14/docs.css?2"> + <link rel="stylesheet" href="https://cdn.plyr.io/1.3.5/docs.css"> </head> <body> <header> <h1>Plyr</h1> <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> - <ul class="actions"> - <li> - <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a> - <span class="btn-count js-stargazers-count">…</span> - </li> - <li> - <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a> - <span class="btn-count js-tweet-count">…</span> - </li> - </ul> + <nav> + <ul> + <li> + <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a> + <span class="btn-count js-stargazers-count">…</span> + </li> + <li> + <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a> + <span class="btn-count js-tweet-count">…</span> + </li> + </ul> + </nav> </header> <main role="main" id="main"> @@ -46,7 +48,7 @@ <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> <!-- Text track file --> - <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.vtt" default> + <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> <!-- Fallback for browsers that don't support the <video> element --> <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> @@ -90,18 +92,18 @@ a.send(); a.onload = function(){ var c = d.createElement("div"); - c.style.display="none"; + c.setAttribute("hidden", ""); c.innerHTML = a.responseText; b.insertBefore(c, b.childNodes[0]); } } - })(document, "https://cdn.plyr.io/1.1.14/sprite.svg"); + })(document, "https://cdn.plyr.io/1.3.5/sprite.svg"); </script> <!-- Plyr core script --> - <script src="https://cdn.plyr.io/1.1.14/plyr.js?1"></script> + <script src="https://cdn.plyr.io/1.3.5/plyr.js"></script> <!-- Docs script --> - <script src="https://cdn.plyr.io/1.1.14/docs.js?1"></script> + <script src="https://cdn.plyr.io/1.3.5/docs.js"></script> </body> </html> diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index df205260..3835fef1 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -10,6 +10,7 @@ plyr.setup({ volume: 9, title: "Video demo", html: templates.controls.render({}), + tooltips: true, captions: { defaultActive: true }, @@ -107,7 +108,7 @@ plyr.setup({ // Add star function formatGitHubCount(count) { - return "★ " + count; + return "★ " + count; } // Check if it's in session storage first diff --git a/docs/src/js/lib/classlist.js b/docs/src/js/lib/classlist.js new file mode 100644 index 00000000..eac1e99e --- /dev/null +++ b/docs/src/js/lib/classlist.js @@ -0,0 +1,237 @@ +/* + * 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/docs/src/less/components/base.less b/docs/src/less/components/base.less index 81a68058..b4e5ddf1 100644 --- a/docs/src/less/components/base.less +++ b/docs/src/less/components/base.less @@ -8,17 +8,24 @@ box-sizing: border-box; } +// Hidden +[hidden] { + display: none; +} + // Base html { + height: 100%; font-size: 100%; + background: linear-gradient(#fff, @body-background) fixed; } body { font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: @body-background; line-height: 1.5; text-align: center; color: @gray; .font-smoothing(on); + padding: 0 (@padding-base / 2); } // Header diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less index 749cd11f..68c1f5d3 100644 --- a/docs/src/less/components/buttons.less +++ b/docs/src/less/components/buttons.less @@ -25,6 +25,7 @@ nav { position: relative; margin: 0 auto @padding-base; max-width: @example-width-video; + white-space: nowrap; &::before { content: ""; @@ -101,7 +102,8 @@ nav { } } .btn-primary { - background: linear-gradient(@link-color, darken(@link-color, 3%)); + background-image: linear-gradient(@link-color, darken(@link-color, 3%)); + 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); @@ -123,7 +125,7 @@ nav { position: relative; margin-left: 6px; padding: ((@padding-base / 2) - 1px); - background: @body-background; + background: #fff; border: 1px solid @gray-light; &::before { diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index d91bf727..97087b02 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -6,7 +6,6 @@ .example-audio .player, .example-video .player { margin: 0 auto @padding-base; - box-shadow: 0 1px 1px rgba(0,0,0, .1); &-controls { border-radius: 0 0 @border-radius-base @border-radius-base; @@ -31,29 +30,31 @@ iframe { border-radius: @border-radius-base; } + iframe { + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + } } // Style full supported player .example-video .player-video, -.example-video .player-youtube, -.example-video .player-vimeo { +.example-video .player-youtube { video, - .player-video-wrapper { + iframe { border-radius: @border-radius-base @border-radius-base 0 0; } - .player-video-wrapper { + iframe { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } &-fullscreen, &.fullscreen-active { max-width: none; - video, .player-controls, - .player-video-wrapper { + video, + iframe { border-radius: 0; } - .player-video-wrapper { + iframe { -webkit-mask-image: none; } } diff --git a/docs/src/templates/controls.html b/docs/src/templates/controls.html index 47ccbd55..fb82cf0d 100644 --- a/docs/src/templates/controls.html +++ b/docs/src/templates/controls.html @@ -40,23 +40,18 @@ </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}"> + <button type="button" data-player="mute"> <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> - + </button> <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}"> + <button type="button" data-player="captions"> <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> <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> diff --git a/gulpfile.js b/gulpfile.js index 6c84bf69..5b354740 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -66,7 +66,12 @@ package = loadJSON(path.join(root, "package.json")); // Load json function loadJSON(path) { - return JSON.parse(fs.readFileSync(path)); + try { + return JSON.parse(fs.readFileSync(path)); + } + catch(err) { + return {}; + } } var build = { @@ -165,11 +170,6 @@ build.templates(); build.less(bundles.docs.less, "docs"); build.js(bundles.docs.js, "docs"); -// Default gulp task -gulp.task("default", function(){ - run("templates", tasks.js, tasks.less, "sprite"); -}); - // Build all JS (inc. templates) gulp.task("js", function(){ run("templates", tasks.js); @@ -193,6 +193,11 @@ gulp.task("watch", function () { gulp.watch(paths.docs.src.templates, ["js"]); }); +// Default gulp task +gulp.task("default", function(){ + run("templates", tasks.js, tasks.less, "sprite", "watch"); +}); + // Publish a version to CDN and docs // -------------------------------------------- @@ -203,7 +208,7 @@ maxAge = 31536000, // seconds 1 year options = { cdn: { headers: { - "Cache-Control": "max-age=" + maxAge + ", no-transform, public", + "Cache-Control": "max-age=" + maxAge, "Vary": "Accept-Encoding" }, gzippedOnly: true @@ -215,8 +220,12 @@ options = { }, gzippedOnly: true } -}, -cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"); +}; + +// If aws is setup +if("cdn" in aws) { + var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"); +} // Publish version to CDN bucket gulp.task("cdn", function () { diff --git a/package.json b/package.json index daf34eaf..2819fbd8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.2.0", + "version": "1.3.5", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", @@ -3,21 +3,22 @@ A simple, accessible HTML5 media player. [Checkout the demo](http://plyr.io) -[](http://plyr.io) +[](http://plyr.io) ## Why? -We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. +We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. ## Features -- **Accessible** - full support for captions and screen readers. -- **Lightweight** - just 6.4KB minified and gzipped. +- **Accessible** - full support for VTT captions and screen readers. +- **Lightweight** - just 8KB minified and gzipped. - **[Customisable](#html)** - make the player look how you want with the markup you want. - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks. - **Responsive** - as you'd expect these days. - **Audio & Video** - support for both formats. -- **[Embed](#embed)** - support for YouTube (Vimeo soon). +- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon). - **[API](#api)** - toggle playback, volume, seeking, and more. - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes. +- **i18n support** - support for internationalization of controls. - **No dependencies** - written in vanilla JavaScript, no jQuery required. Oh and yes, it works with Bootstrap. @@ -26,9 +27,9 @@ Oh and yes, it works with Bootstrap. Check out [the changelog](changelog.md) ## Planned development -- Playlists -- ~~YouTube~~ and Vimeo support +- Vimeo support - Playback speed +- Playlists - Multiple language captions (with selection) - Audio captions ... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues) @@ -39,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue Check `docs/index.html` and `docs/dist/docs.js` for an example setup. -**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.1.14/plyr.js` to `https://cdn.plyr.io/1.1.14/plyr.js` +**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.3.5/plyr.js` to `https://cdn.plyr.io/1.3.5/plyr.js` ### Bower If bower is your thang, you can grab Plyr using: @@ -59,11 +60,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub] If you want to use our CDN, you can use the following: ```html -<link rel="stylesheet" href="https://cdn.plyr.io/1.1.14/plyr.css"> -<script src="https://cdn.plyr.io/1.1.14/plyr.js"></script> +<link rel="stylesheet" href="https://cdn.plyr.io/1.3.5/plyr.css"> +<script src="https://cdn.plyr.io/1.3.5/plyr.js"></script> ``` -You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.14/sprite.svg`. +You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.5/sprite.svg`. ### CSS If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. @@ -183,6 +184,12 @@ You can pass the following options to the setup method using `plyr.setup({...})` <td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td> </tr> <tr> + <td><code>i18n</code></td> + <td>Object</td> + <td><code><a href="controls.md">See controls.md</a></code></td> + <td>Used for internationalisation (i18n) of the tooltips/labels within the buttons.</td> + </tr> + <tr> <td><code>iconPrefix</code></td> <td>String</td> <td><code>icon</code></td> @@ -360,6 +367,9 @@ Here's a list of the methods supported: <strong>array</strong><br> <code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br> This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. + <br><br> + <strong>YouTube</strong><br> + Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.) </td> </tr> <tr> diff --git a/src/js/plyr.js b/src/js/plyr.js index b14f6964..dfcc12f0 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.3.4 +// plyr.js v1.3.5 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -1398,6 +1398,7 @@ player.embed.api('seekTo', targetTime); } + // Trigger timeupdate _triggerEvent(player.media, 'timeupdate'); if (paused) { @@ -2047,6 +2048,10 @@ if (player.type == 'video' || player.type == 'audio') { // Bail if no support if (!player.supported.full) { + // Successful setup + player.init = true; + + // Don't inject controls if no full support return; } @@ -2197,4 +2202,4 @@ return players; }; -}(this.plyr = this.plyr || {}));
\ No newline at end of file +}(this.plyr = this.plyr || {})); diff --git a/src/less/plyr.less b/src/less/plyr.less index d6f5f800..99742135 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -17,7 +17,11 @@ // Font sizes @font-size-small: 14px; @font-size-base: 16px; -@font-size-large: ceil((@font-size-base * 1.5)); + +// Captions +@font-size-captions-base: ceil(@font-size-base * 1.25); +@font-size-captions-medium: ceil(@font-size-base * 1.5); +@font-size-captions-large: (@font-size-base * 2); // Controls @control-spacing: 10px; @@ -28,7 +32,8 @@ // Tooltips @tooltip-bg: @controls-bg; -@tooltip-color: #fff; +@tooltip-border-color: @off-white; +@tooltip-color: @control-color; @tooltip-padding: @control-spacing; @tooltip-arrow-size: 5px; @tooltip-radius: 3px; @@ -197,26 +202,31 @@ bottom: 0; left: 0; width: 100%; - padding: 20px; - min-height: 2.5em; + padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3); 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; + font-size: @font-size-captions-base; text-align: center; .font-smoothing(); + span { + border-radius: 2px; + padding: 3px 10px; + background: rgba(0,0,0, .9); + } + span:empty { + display: none; + } + @media (min-width: @bp-captions-large) { - font-size: @font-size-large; + font-size: @font-size-captions-medium; } } &.captions-active &-captions { display: block; } + &.fullscreen-active &-captions { + font-size: @font-size-captions-large; + } // Player controls &-controls { @@ -244,17 +254,20 @@ } } - input + label, + // Buttons button { display: inline-block; vertical-align: middle; margin: 0 2px; padding: (@control-spacing / 2) @control-spacing; - - transition: background .3s ease, color .3s ease, opacity .3s ease; + overflow: hidden; + border: 0; + background: transparent; border-radius: 3px; cursor: pointer; - + color: @control-color; + transition: background .3s ease, color .3s ease, opacity .3s ease; + svg { width: 18px; height: 18px; @@ -262,41 +275,27 @@ fill: currentColor; transition: fill .3s ease; } - } - input + label, - .inverted:checked + label { - opacity: .5; - } - button, - .inverted + label, - input:checked + label { - color: @control-color; - opacity: 1; - } - 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; - opacity: 1; - } - button:focus, - input:focus + label { - outline: 0; + // Hover and tab focus + &.tab-focus, + &:hover { + background: @control-bg-hover; + color: @control-color-hover; + } + // Default focus + &:focus { + outline: 0; + } } + + // Hide toggle icons by default .icon-exit-fullscreen, .icon-muted, .icon-captions-on { display: none; } + + // Player time .player-time { display: inline-block; vertical-align: middle; @@ -317,7 +316,7 @@ // Add a slash in before &::before { - content: "\2044"; + content: '\2044'; margin-right: @control-spacing; } } @@ -325,7 +324,6 @@ // Tooltips &-tooltip { - visibility: hidden; position: absolute; z-index: 2; bottom: 100%; @@ -334,39 +332,38 @@ opacity: 0; background: @tooltip-bg; + border: 1px solid @tooltip-border-color; 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; - + transform: translate(-50%, (@tooltip-padding * 3)) scale(0); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; + + // Arrow &::after { - content: ""; - display: block; + content: ''; position: absolute; + z-index: 1; + top: 100%; 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; + display: block; + width: 10px; + height: 10px; + background: @tooltip-bg; + transform: translate(-50%, -50%) rotate(45deg) translateY(1px); + border: 1px solid @tooltip-border-color; + border-width: 0 1px 1px 0; } } - label:hover .player-tooltip, - input:focus + label .player-tooltip, button:hover .player-tooltip, - button:focus .player-tooltip { - visibility: visible; + button.tab-focus:focus .player-tooltip { opacity: 1; - transform: translate(-50%, 0); + transform: translate(-50%, 0) scale(1); } - label:hover .player-tooltip, button:hover .player-tooltip { z-index: 3; } @@ -384,7 +381,7 @@ &-buffer[value], &-played[value], - &-seek[type=range] { + &-seek[type='range'] { position: absolute; left: 0; top: 0; @@ -424,7 +421,7 @@ // Seek control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-seek[type=range] { + &-seek[type='range'] { z-index: 4; cursor: pointer; outline: 0; @@ -499,7 +496,7 @@ // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-volume[type=range] { + &-volume[type='range'] { display: inline-block; vertical-align: middle; -webkit-appearance: none; @@ -565,7 +562,6 @@ // 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; } @@ -604,16 +600,7 @@ .player-video-wrapper { height: 100%; width: 100%; - - .player-captions { - top: auto; - bottom: 90px; - - @media (min-width: @bp-control-split) { - bottom: 60px; - } - } - } + } .player-controls { position: absolute; bottom: 0; @@ -622,13 +609,29 @@ } // Hide controls when playing in full screen - &.fullscreen-hide-controls.playing .player-controls { - transform: translateY(100%) translateY(@control-spacing / 2); - transition: transform .3s .2s ease; - - &.hover { + &.fullscreen-hide-controls.playing { + .player-controls { + transform: translateY(100%) translateY(@control-spacing / 2); + transition: transform .3s .2s ease; + } + &.player-hover .player-controls { transform: translateY(0); } + .player-captions { + bottom: (@control-spacing / 2); + transition: bottom .3s .2s ease; + } + } + + // Captions + .player-captions, + &.fullscreen-hide-controls.playing.player-hover .player-captions { + top: auto; + bottom: 90px; + + @media (min-width: @bp-control-split) { + bottom: 60px; + } } } @@ -645,15 +648,11 @@ // Some options are hidden by default [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { + [data-player='fullscreen'] { display: none; } &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { + &.fullscreen-enabled [data-player='fullscreen'] { display: inline-block; } }
\ No newline at end of file diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 767dc501..de386cd8 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -7,50 +7,66 @@ // ------------------------------- // Colors -$blue: #3498DB !default; -$gray-dark: #343F4A !default; -$gray: #565D64 !default; -$gray-light: #6B7D86 !default; -$gray-lighter: #CBD0D3 !default; -$off-white: #D6DADD !default; +$blue: #3498DB !default; +$gray-dark: #343F4A !default; +$gray: #565D64 !default; +$gray-light: #6B7D86 !default; +$gray-lighter: #CBD0D3 !default; +$off-white: #D6DADD !default; // Font sizes -$font-size-small: 14px !default; -$font-size-base: 16px !default; -$font-size-large: ceil(($font-size-base * 1.5)) !default; +$font-size-small: 14px !default; +$font-size-base: 16px !default; + +// Captions +$font-size-captions-base: ceil($font-size-base * 1.25) !default; +$font-size-captions-medium: ceil($font-size-base * 1.5) !default; +$font-size-captions-large: ($font-size-base * 2) !default; // Controls -$control-spacing: 10px !default; -$controls-bg: #fff !default; -$control-bg-hover: @blue !default; -.contrast-control-color($controls-bg); -.contrast-control-color-hover($control-bg-hover); +$control-spacing: 10px !default; +$controls-bg: #fff !default; +$control-bg-hover: $blue !default; +$control-color: null !default; +$control-color-hover: null !default; + +// Contrast +@if lightness($controls-bg) >= 65% { + $control-color: $gray-light; +} @else { + $control-color: $gray-lighter; +} +@if lightness($control-bg-hover) >= 65% { + $control-color-hover: $gray; +} @else { + $control-color-hover: #fff; +} // Tooltips -$tooltip-bg: $controls-bg !default; -$tooltip-color: #fff !default; -$tooltip-padding: $control-spacing !default; -$tooltip-arrow-size: 5px !default; -$tooltip-radius: 3px !default; +$tooltip-bg: $controls-bg !default; +$tooltip-color: $control-color !default; +$tooltip-padding: $control-spacing !default; +$tooltip-arrow-size: 5px !default; +$tooltip-radius: 3px !default; // Progress -$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default; -$progress-playing-bg: $blue !default; -$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default; -$progress-loading-size: 40px !default; -$progress-loading-bg: rgba(0,0,0, .15) !default; +$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default; +$progress-playing-bg: $blue !default; +$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default; +$progress-loading-size: 40px !default; +$progress-loading-bg: rgba(0,0,0, .15) !default; // Volume -$volume-track-height: 6px !default; -$volume-track-bg: darken($controls-bg, 10%) !default; -$volume-thumb-height: ($volume-track-height * 2) !default; -$volume-thumb-width: ($volume-track-height * 2) !default; -$volume-thumb-bg: $control-color !default; -$volume-thumb-bg-focus: $control-bg-hover !default; +$volume-track-height: 6px !default; +$volume-track-bg: darken($controls-bg, 10%) !default; +$volume-thumb-height: ($volume-track-height * 2) !default; +$volume-thumb-width: ($volume-track-height * 2) !default; +$volume-thumb-bg: $control-color !default; +$volume-thumb-bg-focus: $control-bg-hover !default; // Breakpoints -$bp-control-split: 560px !default; // When controls split into left/right -$bp-captions-large: 768px !default; // When captions jump to the larger font size +$bp-control-split: 560px !default; // When controls split into left/right +$bp-captions-large: 768px !default; // When captions jump to the larger font size // Animation // --------------------------------------- @@ -59,46 +75,25 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo to { background-position: $progress-loading-size 0; } } -// Mixins -// ------------------------------- - -// Contrast -@mixin contrast-control-color($color: "") { - @if (lightness($color) >= 65%) { - $control-color: $gray-light; - } - @else if(lightness(@color) < 65%) { - $control-color: $gray-lighter; - } -} -@mixin contrast-control-color-hover($color: "") { - @if (lightness($color) >= 65%) { - $control-color-hover: $gray; - } - @else if (lightness($color) < 65%) { - $control-color-hover: #fff; - } -} - // 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; + } } // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { zoom: 1; - &:before, - &:after { content: ""; display: table; } + &:before, + &:after { content: ''; display: table; } &:after { clear: both; } } // Tab focus styles @@ -108,7 +103,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo outline-offset: 0; } -// Range mixins +// <input type="range"> styling @mixin volume-thumb() { height: $volume-thumb-height; @@ -153,7 +148,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Styles // ------------------------------- -// Base +// Base .player { position: relative; max-width: 100%; @@ -164,8 +159,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &, *, *::after, - *::before { - box-sizing: border-box; + *::before { + box-sizing: border-box; } // For video @@ -179,6 +174,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo vertical-align: middle; } + // For embeds + &-video-embed { + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + } + } + // Captions &-captions { display: none; @@ -186,26 +196,31 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo bottom: 0; left: 0; width: 100%; - padding: 20px; - min-height: 2.5em; + padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3); 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; + font-size: $font-size-captions-base; text-align: center; @include font-smoothing(); + span { + border-radius: 2px; + padding: 3px 10px; + background: rgba(0,0,0, .9); + } + span:empty { + display: none; + } + @media (min-width: $bp-captions-large) { - font-size: $font-size-large; + font-size: $font-size-captions-medium; } } &.captions-active &-captions { display: block; } + &.fullscreen-active &-captions { + font-size: $font-size-captions-large; + } // Player controls &-controls { @@ -232,18 +247,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo margin-top: 0; } } - - input + label, + + // Buttons button { display: inline-block; vertical-align: middle; margin: 0 2px; padding: ($control-spacing / 2) $control-spacing; - - background .3s ease, color .3s ease, opacity .3s ease; + overflow: hidden; + border: 0; + background: transparent; border-radius: 3px; cursor: pointer; - + color: $control-color; + transition: background .3s ease, color .3s ease, opacity .3s ease; + svg { width: 18px; height: 18px; @@ -251,41 +269,27 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo fill: currentColor; transition: fill .3s ease; } + + // Hover and tab focus + &.tab-focus, + &:hover { + background: $control-bg-hover; + color: $control-color-hover; + } + // Default focus + &:focus { + outline: 0; + } } - input + label, - .inverted:checked + label { - opacity: .5; - } - button, - .inverted + label, - input:checked + label { - color: $control-color; - opacity: 1; - } - 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; - opacity: 1; - } - button:focus, - input:focus + label { - outline: 0; - } + + // Hide toggle icons by default .icon-exit-fullscreen, .icon-muted, .icon-captions-on { display: none; } + + // Time display .player-time { display: inline-block; vertical-align: middle; @@ -306,7 +310,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Add a slash in before &::before { - content: "\2044"; + content: '\2044'; margin-right: $control-spacing; } } @@ -314,7 +318,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Tooltips &-tooltip { - visibility: hidden; position: absolute; z-index: 2; bottom: 100%; @@ -329,11 +332,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo line-height: 1.5; font-weight: 600; - transform: translate(-50%, ($tooltip-padding * 3)); - transition: transform .2s .2s ease, opacity .2s .2s ease; + transform: translate(-50%, ($tooltip-padding * 3)) scale(0); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; &::after { - content: ""; + content: ''; display: block; position: absolute; left: 50%; @@ -347,15 +351,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo 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); + transform: translate(-50%, 0) scale(1); } - label:hover .player-tooltip, button:hover .player-tooltip { z-index: 3; } @@ -373,7 +373,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &-buffer[value], &-played[value], - &-seek[type=range] { + &-seek[type='range'] { position: absolute; left: 0; top: 0; @@ -389,7 +389,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo background: transparent; } &-buffer[value], - &-played[value] { + &-played[value] { &::-webkit-progress-bar { background: transparent; } @@ -413,7 +413,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Seek control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-seek[type=range] { + &-seek[type='range'] { z-index: 4; cursor: pointer; outline: 0; @@ -435,7 +435,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo -moz-appearance: none; @include seek-thumb(); } - + // Microsoft &::-ms-track { color: transparent; @@ -465,15 +465,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo 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%, + -45deg, + $progress-loading-bg 25%, + transparent 25%, + transparent 50%, + $progress-loading-bg 50%, $progress-loading-bg 75%, - transparent 75%, + transparent 75%, transparent); - color: transparent; + color: transparent; } // States @@ -488,18 +488,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-volume[type=range] { + &-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; + padding: 0; cursor: pointer; background: transparent; border: none; - + // Webkit &::-webkit-slider-runnable-track { @include volume-track(); @@ -517,7 +517,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &::-moz-range-thumb { @include volume-thumb(); } - + // Microsoft &::-ms-track { height: $volume-track-height; @@ -554,7 +554,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // 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; } @@ -593,15 +592,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo .player-video-wrapper { height: 100%; width: 100%; - - .player-captions { - top: auto; - bottom: 90px; - - @media (min-width: $bp-control-split) { - bottom: 60px; - } - } } .player-controls { position: absolute; @@ -611,13 +601,29 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo } // Hide controls when playing in full screen - &.fullscreen-hide-controls.playing .player-controls { - transform: translateY(100%) translateY($control-spacing / 2); - transition: transform .3s .2s ease; - - &.hover { + &.fullscreen-hide-controls.playing { + .player-controls { + transform: translateY(100%) translateY($control-spacing / 2); + transition: transform .3s .2s ease; + } + &.player-hover .player-controls { transform: translateY(0); } + .player-captions { + bottom: ($control-spacing / 2); + transition: bottom .3s .2s ease; + } + } + + // Captions + .player-captions, + &.fullscreen-hide-controls.playing.player-hover .player-captions { + top: auto; + bottom: 90px; + + @media (min-width: $bp-control-split) { + bottom: 60px; + } } } @@ -634,15 +640,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Some options are hidden by default [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { + [data-player='fullscreen'] { display: none; } &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { + &.fullscreen-enabled [data-player='fullscreen'] { display: inline-block; } -}
\ No newline at end of file +} diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg index 56fc708d..c9bd5b3c 100644 --- a/src/sprite/icon-captions-off.svg +++ b/src/sprite/icon-captions-off.svg @@ -1,8 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>icon-captions-off</title> - <desc>Created with Sketch.</desc> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path> diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg index 4e388e41..1ed58de9 100644 --- a/src/sprite/icon-captions-on.svg +++ b/src/sprite/icon-captions-on.svg @@ -1,8 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>icon-captions-on</title> - <desc>Created with Sketch.</desc> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path> diff --git a/src/sprite/icon-enter-fullscreen.svg b/src/sprite/icon-enter-fullscreen.svg index 5fd651bd..13434bb1 100644 --- a/src/sprite/icon-enter-fullscreen.svg +++ b/src/sprite/icon-enter-fullscreen.svg @@ -1,8 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>expand</title> - <desc>Created with Sketch.</desc> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)"> diff --git a/src/sprite/icon-exit-fullscreen.svg b/src/sprite/icon-exit-fullscreen.svg index d41e0402..ff4269bc 100644 --- a/src/sprite/icon-exit-fullscreen.svg +++ b/src/sprite/icon-exit-fullscreen.svg @@ -1,8 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>collapse</title> - <desc>Created with Sketch.</desc> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1"> <g id="collapse" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)"> diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg index cc4ee6d1..05b23faa 100755 --- a/src/sprite/icon-fast-forward.svg +++ b/src/sprite/icon-fast-forward.svg @@ -1,6 +1,4 @@ <?xml version="1.0" encoding="utf-8"?> -<!-- Generated by IcoMoon.io --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path> </svg> diff --git a/src/sprite/icon-muted.svg b/src/sprite/icon-muted.svg index 031da8d1..532c513d 100644 --- a/src/sprite/icon-muted.svg +++ b/src/sprite/icon-muted.svg @@ -1,9 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>muted</title> - <desc>Created with Sketch.</desc> - <defs></defs> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <g id="sound" sketch:type="MSLayerGroup" transform="translate(0.000000, 2.000000)"> <path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z" id="Shape" sketch:type="MSShapeGroup"></path> diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg index ea2efe98..ee25646d 100644 --- a/src/sprite/icon-pause.svg +++ b/src/sprite/icon-pause.svg @@ -1,8 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>pause</title> - <desc>Created with Sketch.</desc> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <g id="pause" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)"> diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg index ebe9ff57..f0057b32 100755 --- a/src/sprite/icon-play.svg +++ b/src/sprite/icon-play.svg @@ -1,6 +1,4 @@ <?xml version="1.0" encoding="utf-8"?> -<!-- Generated by IcoMoon.io --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path> </svg> diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg index 3a18dfad..43645a5c 100644 --- a/src/sprite/icon-restart.svg +++ b/src/sprite/icon-restart.svg @@ -1,9 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>icon-restart</title> - <desc>Created with Sketch.</desc> - <defs></defs> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path> </g> diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg index 7be18d37..5f122c86 100644 --- a/src/sprite/icon-rewind.svg +++ b/src/sprite/icon-rewind.svg @@ -1,8 +1,5 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg width="18px" height="21px" viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> - <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --> - <title>rewind</title> - <desc>Created with Sketch.</desc> +<svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage"> <path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path> diff --git a/src/sprite/icon-volume.svg b/src/sprite/icon-volume.svg index 6c6ca54d..edcc8867 100755 --- a/src/sprite/icon-volume.svg +++ b/src/sprite/icon-volume.svg @@ -1,7 +1,5 @@ <?xml version="1.0" encoding="utf-8"?> -<!-- Generated by IcoMoon.io --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"> +<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path> <path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path> </svg> |
