diff options
| -rw-r--r-- | assets/js/docs.js | 4 | ||||
| -rw-r--r-- | assets/js/simple-media.js | 12 | ||||
| -rw-r--r-- | assets/less/simple-media.less | 438 | ||||
| -rw-r--r-- | assets/templates/controls.html | 4 | ||||
| -rw-r--r-- | dist/css/simple-media.css | 2 | ||||
| -rw-r--r-- | dist/js/docs.js | 2 | ||||
| -rw-r--r-- | dist/js/simple-media.js | 2 | ||||
| -rw-r--r-- | dist/js/templates.js | 2 | ||||
| -rw-r--r-- | docs/index.html | 4 |
9 files changed, 75 insertions, 395 deletions
diff --git a/assets/js/docs.js b/assets/js/docs.js index c8a3bd44..f80fe696 100644 --- a/assets/js/docs.js +++ b/assets/js/docs.js @@ -11,9 +11,7 @@ var video = new InitPxVideo({ "seekInterval": 20, "videoTitle": "PayPal Austin promo", "debug": true, - "html": templates.controls.render({ - - }) + "html": templates.controls.render({}) }); console.log(video);
\ No newline at end of file diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js index 7179cd6b..09d67ce3 100644 --- a/assets/js/simple-media.js +++ b/assets/js/simple-media.js @@ -267,11 +267,10 @@ function InitPxVideo(options) { obj.playAriaLabel = "Play video, " + options.videoTitle; } - // Get the container, video element, and controls container + // Get the container and video element obj.container = document.getElementById(options.videoId); obj.container.className = obj.container.className + " stopped"; obj.movie = obj.container.getElementsByTagName("video")[0]; - obj.controls = obj.container.getElementsByClassName("px-video-controls")[0]; // Remove native video controls obj.movie.removeAttribute("controls"); @@ -281,11 +280,14 @@ function InitPxVideo(options) { // Insert custom video controls if (options.debug) { - console.log("Inserting custom video controls"); + console.log("Inserting custom controls..."); } - obj.controls.innerHTML = options.html + obj.container.insertAdjacentHTML("beforeend", options.html .replaceAll("{aria-label}", obj.playAriaLabel) - .replaceAll("{id}", obj.randomNum); + .replaceAll("{id}", obj.randomNum)); + + // Store reference + obj.controls = obj.container.querySelector(".player-controls"); // Responsive ffs // ---- diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less index ec83f4e0..edf9b059 100644 --- a/assets/less/simple-media.less +++ b/assets/less/simple-media.less @@ -22,6 +22,7 @@ // Controls @control-color: @gray-lightest; @control-color-active: @blue; +@control-color-inactive: @gray; @control-spacing: 10px; @@ -58,7 +59,19 @@ &:after { content: ""; display: table; } &:after { clear: both; } } +// Font smoothing +// --------------------------------------- +.font-smoothing(@mode: on) when (@mode = on) { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.font-smoothing(@mode: on) when (@mode = off) { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; +} +// Styles +// ------------------------------- // Base .player { position: relative; @@ -75,14 +88,14 @@ height: 100%; width: 100%; - .player-video { + &-video { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } - .controls { + &-controls { position: absolute; bottom: 0; left: 0; @@ -113,57 +126,62 @@ width: 100%; padding: 20px; min-height: 2.5em; - //background-color: #000; color: #fff; font-size: 24px; text-shadow: 0 1px 1px rgba(0,0,0, .75); text-align: center; - //opacity: 0.75; - - -webkit-font-smoothing: antialiased; - font-weight: 500; + .font-smoothing(); } - .controls { + + &-controls { .clearfix(); position: relative; - //position: absolute; - //bottom: 0; - //left: 0; - //right: 0; padding: (@control-spacing * 2) @control-spacing @control-spacing; - //background: rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .9); background: @gray-dark; - //transition: transform .3s ease; line-height: 1; - - button { - border: 0; - background: transparent; - overflow: hidden; - } - label, + + input + label, button { display: inline-block; vertical-align: middle; margin: 0 2px; padding: (@control-spacing / 2) @control-spacing; - color: @control-color; + transition: background .3s ease; border-radius: 3px; + cursor: pointer; svg { display: block; fill: currentColor; transition: fill .3s ease; } + } + input + label, + input.inverted:checked + label { + color: @control-color-inactive; + } + button, + input.inverted + label, + input:checked + label { + color: @control-color; + } + button { + border: 0; + background: transparent; + overflow: hidden; + &:focus { outline: 0; } - &:hover { - background: @control-color-active; - } - &:hover svg, - &:focus svg { + } + button:hover, + button:focus, + label:hover, + input:focus + label { + background: @control-color-active; + + svg { fill: #fff; } } @@ -177,7 +195,7 @@ color: #fff; font-weight: 600; font-size: 14px; - -webkit-font-smoothing: antialiased; + .font-smoothing(); } } progress { @@ -191,7 +209,6 @@ vertical-align: top; &[value] { - /* Reset the default appearance */ -webkit-appearance: none; border: none; background: @gray; @@ -216,19 +233,16 @@ .sound-controls { float: right; } - /*&.playing .controls { - transform: translateY(100%); - }*/ - .controls .px-video-pause, - &.playing .controls .px-video-play { + &-controls .px-video-pause, + &.playing .player-controls .px-video-play { display: none; } - &.playing .controls .px-video-pause { + &.playing .player-controls .px-video-pause { display: inline-block; } - /* volume range input */ + // Volume control input[type='range'] { -webkit-appearance: none; height: 6px; @@ -237,16 +251,12 @@ background: @gray; outline: 0; border-radius: 10px; - - &:focus::-webkit-slider-thumb { - //outline: 1px #999 dotted; - background: @control-color-active; - } + &::-moz-range-track { -moz-appearance: none; height: 6px; background: @gray; - border: none; + border: 0; border-radius: 10px; } &::-webkit-slider-thumb { @@ -260,100 +270,19 @@ &::-moz-range-thumb { height: 12px; width: 12px; + border: 0; background: @control-color; border-radius: 100%; } + &:focus::-webkit-slider-thumb { + background: @control-color-active; + } + &:focus::-moz-range-thumb { + background: @control-color-active; + } } } - -/* containers */ - -/* progress indicator */ -.px-video-progress { - - -} - -/* time */ -/*.px-video-time { - float: right; - margin-top: 2px; - font-size: 14px; -}*/ - -/* caption area */ - - -/* buttons */ -.px-video-controls button { - - //background: no-repeat url('../images/px-video-sprite.png'); -} -.px-video-controls button:focus { - //border: 1px #999 dotted; - //outline: none; -} -.px-video-controls button { - //cursor: pointer; -} - -/* captions button */ -.px-video-captions-btn-container label { - display: inline-block; - width: 25px; - height: 20px; - margin-left: 25px; - background: no-repeat url('../images/px-video-sprite.png'); - background-position: -6px -835px; -} -.px-video-captions-btn-container input[type="checkbox"]:focus+label { - outline: 1px #999 dotted; - background-position: -6px -799px; -} -.px-video-captions-btn-container input[type="checkbox"]:hover+label { - background-position: -6px -799px; - cursor: pointer; -} -.px-video-captions-btn-container input[type="checkbox"]:focus+label { - outline: 1px #999 dotted; - background-position: -6px -799px; -} -.px-video-captions-btn-container input[type="checkbox"]:checked+label { - background-position: -6px -871px; -} - -/* mute button */ -.px-video-mute-btn-container label { - display: inline-block; - width: 25px; - height: 20px; - margin-left: 240px; - margin-top: 2px; - background: no-repeat url('../images/px-video-sprite.png'); - background-position: -6px -476px; -} -.px-video-mute-btn-container input[type="checkbox"]:focus+label { - outline: 1px #999 dotted; - background-position: -6px -440px; -} -.px-video-mute-btn-container input[type="checkbox"]:hover+label { - background-position: -6px -440px; - cursor: pointer; -} -.px-video-mute-btn-container input[type="checkbox"]:focus+label { - outline: 1px #999 dotted; - background-position: -6px -440px; -} -/* checked state of mute button */ -.px-video-mute-btn-container input[type="checkbox"]:checked+label { - background-position: -6px -692px; -} -.px-video-mute-btn-container input[type="checkbox"]:checked:hover+label, -.px-video-mute-btn-container input[type="checkbox"]:checked:focus+label { - background-position: -6px -656px; -} - /* fixing display for IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .px-video-controls input[type='range'] { @@ -369,251 +298,4 @@ padding: 8px; min-height: 36px; } -} - -/*.media { - position: relative; - overflow: hidden; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - - video { - width: 100%; - - &::-webkit-media-controls { - display:none !important; - } - } - &.stopped, - &.paused { - .overlay-play { - display: block; - } - .media-controls { - transform: translate3d(0, 0, 0); - } - } -} -.media-controls { - height: 50px; - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: 2; - - .translate3d(0, 100%, 0); - .transition-transform(.5s); - - background-color: @base-color; - color: #fff; - .font-size(15); - -webkit-font-smoothing: antialiased; - font-weight: 600; - .user-select(none); - - button { - display: inline-block; - padding: 8px 15px; - margin: 0; - - -webkit-appearance: none; - background: none; - border: none; - color: #fff; - .font-size(24); - - .transition(); - - &:focus { - outline: none; - } - - &:hover, - &:focus { - text-shadow: 0 0 15px @green; - } - } - - .progress { - position: relative; - .border-radius(10px); - height: 10px; - background: lighten(@base-color, 10%); - - div { - position: absolute; - z-index: 1; - left: 0; - .border-radius(10px); - height: 10px; - min-width: 10px; // So it doesn't look strange at 0% - - &.progress-played, - &.progress-volume { - background: @green; - z-index: 2; - } - &.progress-buffered { - background: lighten(@base-color, 20%); - } - } - &.vertical-progress { - margin: 0 auto; - width: 10px; - height: auto; - min-height: 100px; - - div { - bottom: 0; - width: 10px; - height: auto; - min-height: 10px; - } - } - } - - .popover { - display: none; - position: absolute; - left: 50%; - bottom: 100%; - margin-bottom: 10px; - - background: @base-color; - .border-radius(4px); - - -webkit-animation: pop-upwards 160ms forwards linear; - -moz-animation: pop-upwards 160ms forwards linear; - -ms-animation: pop-upwards 160ms forwards linear; - -o-animation: pop-upwards 160ms forwards linear; - animation: pop-upwards 160ms forwards linear; - - .transition(); - - // Psuedo bits - &::before { - position: absolute; - bottom: -7px; - left: 50%; - margin-left: -7px; - width: 0; - height: 0; - border-right: 7px solid transparent; - border-top: 7px solid @base-color; - border-left: 7px solid transparent; - content: ''; - z-index: 1; - } - } - .has-popover:focus, - .has-popover:hover { - .popover { - display: block; - } - } - - .popover-volume { - width: 54px; - padding: 15px 5px 8px; - margin-left: -27px; - - text-align: center; - - .progress { - height: 120px; - margin-bottom: 5px; - } - } - - // Layout - .play, - .progress-play, - .volume, - .time, - .fullscreen { - position: absolute; - top: 0; - } - .play { - left: 10px; - } - .progress-play { - left: 70px; - right: 240px; - margin-top: 20px; - } - .time { - right: 120px; - width: 100px; - text-align: center; - line-height: 1; - padding-top: 17px; - } - .volume { - right: 60px; - } - .fullscreen { - right: 10px; - } - - @media only screen - and (max-width: 480px) { - .time-seperator, - .time-total { - display: none; - } - .time { - width: 50px; - right: 70px; - } - .fullscreen { - display: none; - } - .volume { - right: 10px; - } - .progress-play { - right: 140px; - } - } - @media only screen - and (max-width: 320px) { - .time { - display: none; - } - .progress-play { - right: 70px; - } - } -} -.media-pause .mejs-overlay-play { - background: rgba(0,0,0, .1); -} -.overlay { - display: none; - position: absolute; - z-index: 1; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: rgba(0,0,0, .1); -} -.overlay-play > span { - display: block; - position: absolute; - top: 50%; - left: 50%; - width: 60px; - height: 60px; - line-height: 1.5; - margin: -34px 0 0 -34px !important; - text-align: center; - background: rgba(red(@base-color), green(@base-color), blue(@base-color), .8); - border: 4px solid #fff; - color: #fff; - .border-radius(50%); - @shadow: 0 1px 5px rgba(0,0,0, .25), inset 0 1px 1px rgba(0,0,0,.25); - .box-shadow(@shadow); - .font-size(34); -}*/
\ No newline at end of file +}
\ No newline at end of file diff --git a/assets/templates/controls.html b/assets/templates/controls.html index 7434f9c9..3b1c6735 100644 --- a/assets/templates/controls.html +++ b/assets/templates/controls.html @@ -1,4 +1,4 @@ -<div class="controls"> +<div class="player-controls"> <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress> <div class="play-controls"> @@ -30,7 +30,7 @@ <div class="sound-controls"> <!--<div class="px-video-mute-btn-container">--> - <input class="px-video-mute sr-only" id="btnMute{id}" type="checkbox"> + <input class="px-video-mute inverted sr-only" id="btnMute{id}" type="checkbox"> <label id="labelMute{id}" for="btnMute{id}"> <svg><use xlink:href="#icon-sound"></use></svg> <span class="sr-only">Mute</span> diff --git a/dist/css/simple-media.css b/dist/css/simple-media.css index cdf99575..996f26fa 100644 --- a/dist/css/simple-media.css +++ b/dist/css/simple-media.css @@ -1 +1 @@ -.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.hide{display:none}.show-inline{display:inline-block}.player{position:relative;max-width:100%;overflow:hidden;background:#000}.player-video{position:relative}.player:-webkit-full-screen{height:100%;width:100%}.player:-moz-full-screen{height:100%;width:100%}.player:-ms-fullscreen{height:100%;width:100%}.player:fullscreen{height:100%;width:100%}.player:-webkit-full-screen .player-video{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.player:-moz-full-screen .player-video{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.player:-ms-fullscreen .player-video{position:absolute;top:50%;left:0;right:0;-ms-transform:translateY(-50%);transform:translateY(-50%)}.player:fullscreen .player-video{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.player:-webkit-full-screen .controls{position:absolute;bottom:0;left:0;right:0}.player:-moz-full-screen .controls{position:absolute;bottom:0;left:0;right:0}.player:-ms-fullscreen .controls{position:absolute;bottom:0;left:0;right:0}.player:fullscreen .controls{position:absolute;bottom:0;left:0;right:0}.player:-webkit-full-screen .controls .icon-exit-fullscreen{display:block}.player:-moz-full-screen .controls .icon-exit-fullscreen{display:block}.player:-ms-fullscreen .controls .icon-exit-fullscreen{display:block}.player:fullscreen .controls .icon-exit-fullscreen{display:block}.player:-webkit-full-screen .controls .icon-exit-fullscreen+svg{display:none}.player:-moz-full-screen .controls .icon-exit-fullscreen+svg{display:none}.player:-ms-fullscreen .controls .icon-exit-fullscreen+svg{display:none}.player:fullscreen .controls .icon-exit-fullscreen+svg{display:none}.player video{width:100%;height:auto;vertical-align:middle}.player svg{width:18px;height:18px}.player .px-video-captions{position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,.75);text-align:center;-webkit-font-smoothing:antialiased;font-weight:500}.player .controls{zoom:1;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1}.player .controls:after,.player .controls:before{content:"";display:table}.player .controls:after{clear:both}.player .controls button{border:0;background:0 0;overflow:hidden}.player .controls button,.player .controls label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;color:#cbd0d3;transition:background .3s ease;border-radius:3px}.player .controls button svg,.player .controls label svg{display:block;fill:currentColor;transition:fill .3s ease}.player .controls button:focus,.player .controls label:focus{outline:0}.player .controls button:hover,.player .controls label:hover{background:#3498db}.player .controls button:focus svg,.player .controls button:hover svg,.player .controls label:focus svg,.player .controls label:hover svg{fill:#fff}.player .controls .icon-exit-fullscreen{display:none}.player .controls .px-video-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-webkit-font-smoothing:antialiased}.player progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;margin:0;vertical-align:top}.player progress[value]{-webkit-appearance:none;border:none;background:#565d64;cursor:pointer}.player progress[value]::-webkit-progress-bar{background:#565d64}.player progress[value]::-webkit-progress-value{background:#3498db}.player progress[value]::-moz-progress-bar{background:#3498db}.player .play-controls{float:left}.player .sound-controls{float:right}.player .controls .px-video-pause,.player.playing .controls .px-video-play{display:none}.player.playing .controls .px-video-pause{display:inline-block}.player input[type=range]{-webkit-appearance:none;height:6px;width:100px;margin-right:10px;background:#565d64;outline:0;border-radius:10px}.player input[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player input[type=range]::-moz-range-track{-moz-appearance:none;height:6px;background:#565d64;border:none;border-radius:10px}.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;height:12px;width:12px;background:#cbd0d3;border-radius:100%;transition:background .3s ease}.player input[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border-radius:100%}.px-video-captions-btn-container label{display:inline-block;width:25px;height:20px;margin-left:25px;background:url(../images/px-video-sprite.png) -6px -835px no-repeat}.px-video-captions-btn-container input[type=checkbox]:hover+label{background-position:-6px -799px;cursor:pointer}.px-video-captions-btn-container input[type=checkbox]:focus+label{outline:#999 dotted 1px;background-position:-6px -799px}.px-video-captions-btn-container input[type=checkbox]:checked+label{background-position:-6px -871px}.px-video-mute-btn-container label{display:inline-block;width:25px;height:20px;margin-left:240px;margin-top:2px;background:url(../images/px-video-sprite.png) -6px -476px no-repeat}.px-video-mute-btn-container input[type=checkbox]:hover+label{background-position:-6px -440px;cursor:pointer}.px-video-mute-btn-container input[type=checkbox]:focus+label{outline:#999 dotted 1px;background-position:-6px -440px}.px-video-mute-btn-container input[type=checkbox]:checked+label{background-position:-6px -692px}.px-video-mute-btn-container input[type=checkbox]:checked:focus+label,.px-video-mute-btn-container input[type=checkbox]:checked:hover+label{background-position:-6px -656px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.px-video-controls input[type=range]{position:relative;padding:0;height:8px;top:-3px}.px-video-time{margin-top:4px}.px-video-captions{padding:8px;min-height:36px}}
\ No newline at end of file +.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.hide{display:none}.show-inline{display:inline-block}.player{position:relative;max-width:100%;overflow:hidden;background:#000}.player-video{position:relative}.player:-webkit-full-screen{height:100%;width:100%}.player:-moz-full-screen{height:100%;width:100%}.player:-ms-fullscreen{height:100%;width:100%}.player:fullscreen{height:100%;width:100%}.player:-webkit-full-screen-video{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.player:-moz-full-screen-video{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.player:-ms-fullscreen-video{position:absolute;top:50%;left:0;right:0;-ms-transform:translateY(-50%);transform:translateY(-50%)}.player:fullscreen-video{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.player:-webkit-full-screen-controls{position:absolute;bottom:0;left:0;right:0}.player:-moz-full-screen-controls{position:absolute;bottom:0;left:0;right:0}.player:-ms-fullscreen-controls{position:absolute;bottom:0;left:0;right:0}.player:fullscreen-controls{position:absolute;bottom:0;left:0;right:0}.player:-webkit-full-screen-controls .icon-exit-fullscreen{display:block}.player:-moz-full-screen-controls .icon-exit-fullscreen{display:block}.player:-ms-fullscreen-controls .icon-exit-fullscreen{display:block}.player:fullscreen-controls .icon-exit-fullscreen{display:block}.player:-webkit-full-screen-controls .icon-exit-fullscreen+svg{display:none}.player:-moz-full-screen-controls .icon-exit-fullscreen+svg{display:none}.player:-ms-fullscreen-controls .icon-exit-fullscreen+svg{display:none}.player:fullscreen-controls .icon-exit-fullscreen+svg{display:none}.player video{width:100%;height:auto;vertical-align:middle}.player svg{width:18px;height:18px}.player .px-video-captions{position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,.75);text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-controls{zoom:1;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:focus{outline:0}.player-controls button:focus,.player-controls button:hover,.player-controls input:focus+label,.player-controls label:hover{background:#3498db}.player-controls button:focus svg,.player-controls button:hover svg,.player-controls input:focus+label svg,.player-controls label:hover svg{fill:#fff}.player-controls .icon-exit-fullscreen{display:none}.player-controls .px-video-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;margin:0;vertical-align:top}.player progress[value]{-webkit-appearance:none;border:none;background:#565d64;cursor:pointer}.player progress[value]::-webkit-progress-bar{background:#565d64}.player progress[value]::-webkit-progress-value{background:#3498db}.player progress[value]::-moz-progress-bar{background:#3498db}.player .play-controls{float:left}.player .sound-controls{float:right}.player-controls .px-video-pause,.player.playing .player-controls .px-video-play{display:none}.player.playing .player-controls .px-video-pause{display:inline-block}.player input[type=range]{-webkit-appearance:none;height:6px;width:100px;margin-right:10px;background:#565d64;outline:0;border-radius:10px}.player input[type=range]::-moz-range-track{-moz-appearance:none;height:6px;background:#565d64;border:0;border-radius:10px}.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;height:12px;width:12px;background:#cbd0d3;border-radius:100%;transition:background .3s ease}.player input[type=range]::-moz-range-thumb{height:12px;width:12px;border:0;background:#cbd0d3;border-radius:100%}.player input[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player input[type=range]:focus::-moz-range-thumb{background:#3498db}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.px-video-controls input[type=range]{position:relative;padding:0;height:8px;top:-3px}.px-video-time{margin-top:4px}.px-video-captions{padding:8px;min-height:36px}}
\ No newline at end of file diff --git a/dist/js/docs.js b/dist/js/docs.js index 581329da..0b4dd9a2 100644 --- a/dist/js/docs.js +++ b/dist/js/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,i,r){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var l,c=new a;c.subs=new o,c.subsText={},c.buf="",s=s||{},c.stackSubs=s,c.subsText=r;for(l in n)s[l]||(s[l]=n[l]);for(l in s)c.subs[l]=s[l];i=i||{},c.stackPartials=i;for(l in e)i[l]||(i[l]=e[l]);for(l in i)c.partials[l]=i[l];return c}function s(t){return String(null===t||void 0===t?"":t)}function i(t){return t=s(t),u.test(t)?t.replace(r,"&").replace(a,"<").replace(o,">").replace(l,"'").replace(c,"""):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:i,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],i=n[s.name];if(s.instance&&s.base==i)return s.instance;if("string"==typeof i){if(!this.c)throw new Error("No compiler available.");i=this.c.compile(i,this.options)}if(!i)return null;if(this.partials[t].base=i,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);i=e(i,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=i,i},rp:function(t,n,e,s){var i=this.ep(t,e);return i?i.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 i=0;i<s.length;i++)t.push(s[i]),e(t,n,this),t.pop()},s:function(t,n,e,s,i,r,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,i,r,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,i){var r,a=t.split("."),o=this.f(a[0],e,s,i),l=this.options.modelGet,c=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var u=1;u<a.length;u++)r=n(a[u],o,l),void 0!==r?(c=o,o=r):o="";return i&&!o?!1:(i||"function"!=typeof o||(e.push(c),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,i){for(var r=!1,a=null,o=!1,l=this.options.modelGet,c=e.length-1;c>=0;c--)if(a=e[c],r=n(t,a,l),void 0!==r){o=!0;break}return o?(i||"function"!=typeof r||(r=this.mv(r,e,s)),r):i?!1:""},ls:function(t,n,e,i,r){var a=this.options.delimiters;return this.options.delimiters=r,this.b(this.ct(s(t.call(n,i)),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,i,r,a){var o,l=n[n.length-1],c=t.call(l);return"function"==typeof c?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(c,l,e,o.substring(i,r),a)):c},mv:function(t,n,e){var i=n[n.length-1],r=t.call(i);return"function"==typeof r?this.ct(s(r.call(i)),i,e):r},sub:function(t,n,e,s){var i=this.subs[t];i&&(this.activeSub=t,i(n,e,this,s),this.activeSub=!1)}};var r=/&/g,a=/</g,o=/>/g,l=/\'/g,c=/\"/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,i=t.length;i>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function i(n,e,s,o){var l=[],c=null,u=null,p=null;for(u=s[s.length-1];n.length>0;){if(p=n.shift(),u&&"<"==u.tag&&!(p.tag in w))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||r(p,o))s.push(p),p.nodes=i(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(c=s.pop(),p.n!=c.n&&!a(p.n,c.n,o))throw new Error("Nesting error: "+c.n+" vs. "+p.n);return c.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function r(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,i=e.length;i>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+c(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+c(e)+'":{name:"'+c(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function c(t){return t.replace(m,"\\\\").replace(d,'\\"').replace(g,"\\n").replace(v,"\\r").replace(x,"\\u2028").replace(y,"\\u2029")}function u(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+k++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+c(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+c(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,d=/\"/g,g=/\n/g,v=/\r/g,m=/\\/g,x=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(i,r){function a(){m.length>0&&(x.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=k;e<x.length;e++)if(n=t.tags[x[e].tag]<t.tags._v||"_t"==x[e].tag&&null===x[e].text.match(h),!n)return!1;return n}function l(t,n){if(a(),t&&o())for(var e,s=k;s<x.length;s++)x[s].text&&((e=x[s+1])&&">"==e.tag&&(e.indent=x[s].text.toString()),x.splice(s,1));else n||x.push({tag:"\n"});y=!1,k=x.length}function c(t,n){var s="="+S,i=t.indexOf(s,n),r=e(t.substring(t.indexOf("=",n)+1,i)).split(" ");return T=r[0],S=r[r.length-1],i+s.length-1}var u=i.length,p=0,b=1,f=2,d=p,g=null,v=null,m="",x=[],y=!1,w=0,k=0,T="{{",S="}}";for(r&&(r=r.split(" "),T=r[0],S=r[1]),w=0;u>w;w++)d==p?s(T,i,w)?(--w,a(),d=b):"\n"==i.charAt(w)?l(y):m+=i.charAt(w):d==b?(w+=T.length-1,v=t.tags[i.charAt(w+1)],g=v?i.charAt(w+1):"_v","="==g?(w=c(i,w),d=p):(v&&w++,d=f),y=w):s(S,i,w)?(x.push({tag:g,n:e(m),otag:T,ctag:S,i:"/"==g?y-T.length:w+S.length}),m="",w+=S.length-1,d=p,"{"==g&&("}}"==S?w++:n(x[x.length-1]))):m+=i.charAt(w);return l(y,!0),x};var w={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var k=0;t.generate=function(n,e,s){k=0;var i={code:"",subs:{},partials:{}};return t.walk(n,i),s.asString?this.stringify(i,e,s):this.makeTemplate(i,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)+'("'+c(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+u(n.n)+'("'+c(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var i=e.partials[p(n,e)];i.subs=s.subs,i.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+c(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+u(t.n)+'("'+c(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+c(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,i=0,r=n.length;r>i;i++)s=t.codegen[n[i].tag],s&&s(n[i],e);return e},t.parse=function(t,n,e){return e=e||{},i(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),i=this.cache[s];if(i){var r=i.partials;for(var a in r)delete r[a].instance;return i}return i=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=i}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,i){var r=this.f(n,e,s,0),a=e;return r&&(a=a.concat(r)),t.Template.prototype.rp.call(this,n,a,s,i)}var e=function(e,s,i){this.rp=n,t.Template.call(this,e,s,i)};e.prototype=t.Template.prototype;var s,i=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return i.prototype=t,s=new i,{to_html:function(t,n,e,i){var r=s.compile(t),a=r.render(n,e);return i?(i(a),void 0):a}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="controls">'),s.b("\n"+e),s.b(' <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>'),s.b("\n"),s.b("\n"+e),s.b(' <div class="play-controls">'),s.b("\n"+e),s.b(' <button class="px-video-restart" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-refresh"></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 class="px-video-rewind" 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 <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-play" aria-label="{aria-label}" 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 class="px-video-pause" 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 class="px-video-forward" 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">Fast forward <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <div class="px-video-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Time</span>'),s.b("\n"+e),s.b(' <span class="px-video-duration">00:00</span>'),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"),s.b("\n"+e),s.b(' <div class="sound-controls">'),s.b("\n"+e),s.b(' <!--<div class="px-video-mute-btn-container">-->'),s.b("\n"+e),s.b(' <input class="px-video-mute sr-only" id="btnMute{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label id="labelMute{id}" for="btnMute{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-sound"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),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="px-video-volume" type="range" min="0" max="10" value="5">'),s.b("\n"),s.b("\n"+e),s.b(' <!--<div class="px-video-captions-btn-container hide">-->'),s.b("\n"+e),s.b(' <input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label for="btnCaptions{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-film"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),s.b("\n"),s.b("\n"+e),s.b(' <button class="player-toggle-fullscreen" data-player="toggle-fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-expand"></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(" </div>"),s.b("\n"+e),s.b("</div>"),s.b("\n"),s.fl()},partials:{},subs:{}});var video=new InitPxVideo({videoId:"myvid",captionsOnDefault:!0,seekInterval:20,videoTitle:"PayPal Austin promo",debug:!0,html:templates.controls.render({})});console.log(video);
\ 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,i,r){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var l,c=new a;c.subs=new o,c.subsText={},c.buf="",s=s||{},c.stackSubs=s,c.subsText=r;for(l in n)s[l]||(s[l]=n[l]);for(l in s)c.subs[l]=s[l];i=i||{},c.stackPartials=i;for(l in e)i[l]||(i[l]=e[l]);for(l in i)c.partials[l]=i[l];return c}function s(t){return String(null===t||void 0===t?"":t)}function i(t){return t=s(t),u.test(t)?t.replace(r,"&").replace(a,"<").replace(o,">").replace(l,"'").replace(c,"""):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:i,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],i=n[s.name];if(s.instance&&s.base==i)return s.instance;if("string"==typeof i){if(!this.c)throw new Error("No compiler available.");i=this.c.compile(i,this.options)}if(!i)return null;if(this.partials[t].base=i,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);i=e(i,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=i,i},rp:function(t,n,e,s){var i=this.ep(t,e);return i?i.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 i=0;i<s.length;i++)t.push(s[i]),e(t,n,this),t.pop()},s:function(t,n,e,s,i,r,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,i,r,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,i){var r,a=t.split("."),o=this.f(a[0],e,s,i),l=this.options.modelGet,c=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var u=1;u<a.length;u++)r=n(a[u],o,l),void 0!==r?(c=o,o=r):o="";return i&&!o?!1:(i||"function"!=typeof o||(e.push(c),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,i){for(var r=!1,a=null,o=!1,l=this.options.modelGet,c=e.length-1;c>=0;c--)if(a=e[c],r=n(t,a,l),void 0!==r){o=!0;break}return o?(i||"function"!=typeof r||(r=this.mv(r,e,s)),r):i?!1:""},ls:function(t,n,e,i,r){var a=this.options.delimiters;return this.options.delimiters=r,this.b(this.ct(s(t.call(n,i)),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,i,r,a){var o,l=n[n.length-1],c=t.call(l);return"function"==typeof c?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(c,l,e,o.substring(i,r),a)):c},mv:function(t,n,e){var i=n[n.length-1],r=t.call(i);return"function"==typeof r?this.ct(s(r.call(i)),i,e):r},sub:function(t,n,e,s){var i=this.subs[t];i&&(this.activeSub=t,i(n,e,this,s),this.activeSub=!1)}};var r=/&/g,a=/</g,o=/>/g,l=/\'/g,c=/\"/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,i=t.length;i>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function i(n,e,s,o){var l=[],c=null,u=null,p=null;for(u=s[s.length-1];n.length>0;){if(p=n.shift(),u&&"<"==u.tag&&!(p.tag in w))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||r(p,o))s.push(p),p.nodes=i(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(c=s.pop(),p.n!=c.n&&!a(p.n,c.n,o))throw new Error("Nesting error: "+c.n+" vs. "+p.n);return c.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function r(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,i=e.length;i>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+c(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+c(e)+'":{name:"'+c(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function c(t){return t.replace(m,"\\\\").replace(d,'\\"').replace(g,"\\n").replace(v,"\\r").replace(x,"\\u2028").replace(y,"\\u2029")}function u(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+k++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+c(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+c(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,d=/\"/g,g=/\n/g,v=/\r/g,m=/\\/g,x=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(i,r){function a(){m.length>0&&(x.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=k;e<x.length;e++)if(n=t.tags[x[e].tag]<t.tags._v||"_t"==x[e].tag&&null===x[e].text.match(h),!n)return!1;return n}function l(t,n){if(a(),t&&o())for(var e,s=k;s<x.length;s++)x[s].text&&((e=x[s+1])&&">"==e.tag&&(e.indent=x[s].text.toString()),x.splice(s,1));else n||x.push({tag:"\n"});y=!1,k=x.length}function c(t,n){var s="="+S,i=t.indexOf(s,n),r=e(t.substring(t.indexOf("=",n)+1,i)).split(" ");return T=r[0],S=r[r.length-1],i+s.length-1}var u=i.length,p=0,b=1,f=2,d=p,g=null,v=null,m="",x=[],y=!1,w=0,k=0,T="{{",S="}}";for(r&&(r=r.split(" "),T=r[0],S=r[1]),w=0;u>w;w++)d==p?s(T,i,w)?(--w,a(),d=b):"\n"==i.charAt(w)?l(y):m+=i.charAt(w):d==b?(w+=T.length-1,v=t.tags[i.charAt(w+1)],g=v?i.charAt(w+1):"_v","="==g?(w=c(i,w),d=p):(v&&w++,d=f),y=w):s(S,i,w)?(x.push({tag:g,n:e(m),otag:T,ctag:S,i:"/"==g?y-T.length:w+S.length}),m="",w+=S.length-1,d=p,"{"==g&&("}}"==S?w++:n(x[x.length-1]))):m+=i.charAt(w);return l(y,!0),x};var w={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var k=0;t.generate=function(n,e,s){k=0;var i={code:"",subs:{},partials:{}};return t.walk(n,i),s.asString?this.stringify(i,e,s):this.makeTemplate(i,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)+'("'+c(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+u(n.n)+'("'+c(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var i=e.partials[p(n,e)];i.subs=s.subs,i.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+c(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+u(t.n)+'("'+c(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+c(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,i=0,r=n.length;r>i;i++)s=t.codegen[n[i].tag],s&&s(n[i],e);return e},t.parse=function(t,n,e){return e=e||{},i(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),i=this.cache[s];if(i){var r=i.partials;for(var a in r)delete r[a].instance;return i}return i=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=i}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,i){var r=this.f(n,e,s,0),a=e;return r&&(a=a.concat(r)),t.Template.prototype.rp.call(this,n,a,s,i)}var e=function(e,s,i){this.rp=n,t.Template.call(this,e,s,i)};e.prototype=t.Template.prototype;var s,i=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return i.prototype=t,s=new i,{to_html:function(t,n,e,i){var r=s.compile(t),a=r.render(n,e);return i?(i(a),void 0):a}}}(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(' <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>'),s.b("\n"),s.b("\n"+e),s.b(' <div class="play-controls">'),s.b("\n"+e),s.b(' <button class="px-video-restart" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-refresh"></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 class="px-video-rewind" 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 <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-play" aria-label="{aria-label}" 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 class="px-video-pause" 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 class="px-video-forward" 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">Fast forward <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <div class="px-video-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Time</span>'),s.b("\n"+e),s.b(' <span class="px-video-duration">00:00</span>'),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"),s.b("\n"+e),s.b(' <div class="sound-controls">'),s.b("\n"+e),s.b(' <!--<div class="px-video-mute-btn-container">-->'),s.b("\n"+e),s.b(' <input class="px-video-mute inverted sr-only" id="btnMute{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label id="labelMute{id}" for="btnMute{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-sound"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),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="px-video-volume" type="range" min="0" max="10" value="5">'),s.b("\n"),s.b("\n"+e),s.b(' <!--<div class="px-video-captions-btn-container hide">-->'),s.b("\n"+e),s.b(' <input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label for="btnCaptions{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-film"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),s.b("\n"),s.b("\n"+e),s.b(' <button class="player-toggle-fullscreen" data-player="toggle-fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-expand"></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(" </div>"),s.b("\n"+e),s.b("</div>"),s.b("\n"),s.fl()},partials:{},subs:{}});var video=new InitPxVideo({videoId:"myvid",captionsOnDefault:!0,seekInterval:20,videoTitle:"PayPal Austin promo",debug:!0,html:templates.controls.render({})});console.log(video);
\ No newline at end of file diff --git a/dist/js/simple-media.js b/dist/js/simple-media.js index 6044bf06..f048bd6d 100644 --- a/dist/js/simple-media.js +++ b/dist/js/simple-media.js @@ -1 +1 @@ -function InitPxVideo(e){"use strict";function n(e){var n=window.fullscreen.isFullScreen()?{x:0,y:0}:t(e.currentTarget);return{x:e.clientX-n.x,y:e.clientY-n.y}}function t(e){for(var n=0,t=0;e;)n+=e.offsetLeft-e.scrollLeft+e.clientLeft,t+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:n,y:t}}function r(e){var n=[];return n=e.split(" --> "),o(n[0])}function i(e){var n=[];return n=e.split(" --> "),o(n[1])}function o(e){if(null===e||void 0===e)return 0;var n,t=[],r=[];return t=e.split(","),r=t[0].split(":"),n=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function a(e){for(e.subcount=0;i(e.captions[e.subcount][0])<e.movie.currentTime.toFixed(1);)if(e.subcount++,e.subcount>e.captions.length-1){e.subcount=e.captions.length-1;break}}function s(e){e.isCaptionDefault&&(e.captionsContainer.className="px-video-captions show",e.captionsBtn.setAttribute("checked","checked"))}function c(){var e,n,t,r=navigator.userAgent,i=navigator.appName,o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(i="IE",o="11;"):-1!==(n=r.indexOf("MSIE"))?(i="IE",o=r.substring(n+5)):-1!==(n=r.indexOf("Chrome"))?(i="Chrome",o=r.substring(n+7)):-1!==(n=r.indexOf("Safari"))?(i="Safari",o=r.substring(n+7),-1!==(n=r.indexOf("Version"))&&(o=r.substring(n+8))):-1!==(n=r.indexOf("Firefox"))?(i="Firefox",o=r.substring(n+8)):(e=r.lastIndexOf(" ")+1)<(n=r.lastIndexOf("/"))&&(i=r.substring(e,n),o=r.substring(n+1),i.toLowerCase()==i.toUpperCase()&&(i=navigator.appName)),-1!==(t=o.indexOf(";"))&&(o=o.substring(0,t)),-1!==(t=o.indexOf(" "))&&(o=o.substring(0,t)),a=parseInt(""+o,10),isNaN(a)&&(o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10)),[i,a]}function l(){p.movie.play(),p.container.className=p.container.className.replace("stopped","playing")}function u(){p.movie.pause(),p.container.className=p.container.className.replace("playing","stopped")}function d(){p.movie.currentTime=0,p.isTextTracks||(p.subcount=0),l()}String.prototype.replaceAll||Object.defineProperty(String.prototype,"replaceAll",{value:function(e,n){return this.replace(new RegExp(e.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}});var p={};if(p.arBrowserInfo=c(),p.browserName=p.arBrowserInfo[0],p.browserMajorVersion=p.arBrowserInfo[1],"IE"===p.browserName&&(8===p.browserMajorVersion||9===p.browserMajorVersion))return!1;if(p.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),p.isSmartphoneOrTablet)return!1;"undefined"==typeof e.debug&&(e.debug=!1),p.debug=e.debug,e.debug&&console.log(p.browserName+" "+p.browserMajorVersion),p.playAriaLabel="undefined"==typeof e.videoTitle||""===e.videoTitle?"Play":"Play video, "+e.videoTitle,p.container=document.getElementById(e.videoId),p.container.className=p.container.className+" stopped",p.movie=p.container.getElementsByTagName("video")[0],p.controls=p.container.getElementsByClassName("px-video-controls")[0],p.movie.removeAttribute("controls"),p.randomNum=Math.floor(1e4*Math.random()),e.debug&&console.log("Inserting custom video controls"),p.controls.innerHTML=e.html.replaceAll("{aria-label}",p.playAriaLabel).replaceAll("{id}",p.randomNum),p.labelMute=document.getElementById("labelMute"+p.randomNum),p.labelMuteOffset=p.movieWidth-390,p.labelMuteOffset<0&&(p.labelMuteOffset=0),p.labelMute.setAttribute("style","margin-left:"+p.labelMuteOffset+"px");for(var m,f="",v=p.movie.childNodes,g=0;g<v.length;g++)"track"===v[g].nodeName.toLowerCase()&&(m=v[g].getAttribute("kind"),"captions"===m&&(f=v[g].getAttribute("src")));if(p.captionExists=!0,""===f?(p.captionExists=!1,e.debug&&console.log("No caption track found.")):e.debug&&console.log("Caption track found; URI: "+f),"undefined"==typeof e.captionsOnDefault&&(e.captionsOnDefault=!0),p.isCaptionDefault=e.captionsOnDefault,"undefined"==typeof e.seekInterval&&(e.seekInterval=10),p.seekInterval=e.seekInterval,p.btnPlay=p.container.getElementsByClassName("px-video-play")[0],p.btnPause=p.container.getElementsByClassName("px-video-pause")[0],p.btnRestart=p.container.getElementsByClassName("px-video-restart")[0],p.btnRewind=p.container.getElementsByClassName("px-video-rewind")[0],p.btnForward=p.container.getElementsByClassName("px-video-forward")[0],p.btnVolume=p.container.getElementsByClassName("px-video-volume")[0],p.btnMute=p.container.getElementsByClassName("px-video-mute")[0],p.progressBar=p.container.getElementsByClassName("px-video-progress")[0],p.progressBarSpan=p.progressBar.getElementsByTagName("span")[0],p.captionsContainer=p.container.getElementsByClassName("px-video-captions")[0],p.captionsBtn=p.container.getElementsByClassName("px-video-btnCaptions")[0],p.captionsBtnContainer=p.container.getElementsByClassName("px-video-captions-btn-container")[0],p.duration=p.container.getElementsByClassName("px-video-duration")[0],p.txtSeconds=p.container.getElementsByClassName("px-seconds"),p.toggleFullscreen=p.container.querySelector("[data-player='toggle-fullscreen']"),p.videoContainer=p.container.querySelector(".player-video"),p.txtSeconds[0].innerHTML=p.seekInterval,p.txtSeconds[1].innerHTML=p.seekInterval,p.isTextTracks=!1,p.movie.textTracks&&(p.isTextTracks=!0),p.toggleFullscreen.addEventListener("click",function(){window.fullscreen.isFullScreen()?window.fullscreen.cancelFullScreen():window.fullscreen.requestFullScreen(p.container)},!1),p.videoContainer.addEventListener("click",function(){p.movie.paused?l():p.movie.ended?d():u()},!1),p.btnPlay.addEventListener("click",function(){l(),p.btnPause.focus()},!1),p.btnPause.addEventListener("click",function(){u(),p.btnPlay.focus()},!1),p.btnRestart.addEventListener("click",d,!1),p.btnRewind.addEventListener("click",function(){var e=p.movie.currentTime-p.seekInterval;p.movie.currentTime=0>e?0:e,p.isTextTracks||a(p)},!1),p.btnForward.addEventListener("click",function(){var e=p.movie.currentTime+p.seekInterval;p.movie.currentTime=e>p.movie.duration?p.movie.duration:e,p.isTextTracks||a(p)},!1),p.btnVolume.addEventListener("change",function(){p.movie.volume=parseFloat(this.value/10)},!1),p.btnMute.addEventListener("click",function(){p.movie.muted=p.movie.muted===!0?!1:!0},!1),p.movie.addEventListener("timeupdate",function(){p.secs=parseInt(p.movie.currentTime%60),p.mins=parseInt(p.movie.currentTime/60%60),p.secs=("0"+p.secs).slice(-2),p.mins=("0"+p.mins).slice(-2),p.duration.innerHTML=p.mins+":"+p.secs},!1),p.movie.addEventListener("timeupdate",function(){p.percent=100/p.movie.duration*p.movie.currentTime,p.percent>0&&(p.progressBar.value=p.percent,p.progressBarSpan.innerHTML=p.percent)},!1),p.progressBar.addEventListener("click",function(e){p.pos=n(e).x/this.offsetWidth,p.movie.currentTime=p.pos*p.movie.duration,p.isTextTracks||a(p)}),p.movie.addEventListener("ended",function(){p.captionsContainer.innerHTML=""}),p.captionsBtn.addEventListener("click",function(){p.captionsContainer.className=this.checked?"px-video-captions show":"px-video-captions hide"},!1),p.captionExists){if("IE"===p.browserName&&10===p.browserMajorVersion||"IE"===p.browserName&&11===p.browserMajorVersion||"Firefox"===p.browserName&&p.browserMajorVersion>=31||"Safari"===p.browserName&&p.browserMajorVersion>=7){e.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),p.isTextTracks=!1;for(var b={},x=p.movie.textTracks,T=0;T<x.length;T++)b=p.movie.textTracks[T],b.mode="hidden"}if(p.isTextTracks){e.debug&&console.log("textTracks supported"),s(p);for(var b={},x=p.movie.textTracks,T=0;T<x.length;T++)b=p.movie.textTracks[T],b.mode="hidden","captions"===b.kind&&b.addEventListener("cuechange",function(){this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&(p.captionsContainer.innerHTML=this.activeCues[0].text)},!1)}else if(e.debug&&console.log("textTracks not supported so rendering captions manually"),s(p),p.currentCaption="",p.subcount=0,p.captions=[],p.movie.addEventListener("timeupdate",function(){p.movie.currentTime.toFixed(1)>r(p.captions[p.subcount][0])&&p.movie.currentTime.toFixed(1)<i(p.captions[p.subcount][0])&&(p.currentCaption=p.captions[p.subcount][1]),p.movie.currentTime.toFixed(1)>i(p.captions[p.subcount][0])&&p.subcount<p.captions.length-1&&p.subcount++,p.captionsContainer.innerHTML=p.currentCaption},!1),""!==f){var h;window.XMLHttpRequest?h=new XMLHttpRequest:window.ActiveXObject&&(h=new ActiveXObject("Microsoft.XMLHTTP")),h.onreadystatechange=function(){if(4===h.readyState)if(200===h.status){e.debug&&console.log("xhr = 200"),p.captions=[];var n,t=[],r=h.responseText;t=r.split("\n\n");for(var i=0;i<t.length;i++)n=t[i],p.captions[i]=[],p.captions[i]=n.split("\n");p.captions.shift(),e.debug&&console.log("Successfully loaded the caption file via ajax.")}else e.debug&&console.log("There was a problem loading the caption file via ajax.")},h.open("get",f,!0),h.send()}if("Safari"===p.browserName&&7===p.browserMajorVersion){console.log("Safari 7 detected; removing track from DOM");var x=p.movie.getElementsByTagName("track");p.movie.removeChild(x[0])}}else p.captionsContainer.className="px-video-captions hide"}!function(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var t=0,r=n.length;r>t;t++)if(e.prefix=n[t],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName=e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+"RequestFullScreen"]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+"CancelFullScreen"]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),window.fullscreen=e}();
\ No newline at end of file +function InitPxVideo(e){"use strict";function n(e){var n=window.fullscreen.isFullScreen()?{x:0,y:0}:t(e.currentTarget);return{x:e.clientX-n.x,y:e.clientY-n.y}}function t(e){for(var n=0,t=0;e;)n+=e.offsetLeft-e.scrollLeft+e.clientLeft,t+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:n,y:t}}function r(e){var n=[];return n=e.split(" --> "),o(n[0])}function i(e){var n=[];return n=e.split(" --> "),o(n[1])}function o(e){if(null===e||void 0===e)return 0;var n,t=[],r=[];return t=e.split(","),r=t[0].split(":"),n=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function a(e){for(e.subcount=0;i(e.captions[e.subcount][0])<e.movie.currentTime.toFixed(1);)if(e.subcount++,e.subcount>e.captions.length-1){e.subcount=e.captions.length-1;break}}function s(e){e.isCaptionDefault&&(e.captionsContainer.className="px-video-captions show",e.captionsBtn.setAttribute("checked","checked"))}function c(){var e,n,t,r=navigator.userAgent,i=navigator.appName,o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(i="IE",o="11;"):-1!==(n=r.indexOf("MSIE"))?(i="IE",o=r.substring(n+5)):-1!==(n=r.indexOf("Chrome"))?(i="Chrome",o=r.substring(n+7)):-1!==(n=r.indexOf("Safari"))?(i="Safari",o=r.substring(n+7),-1!==(n=r.indexOf("Version"))&&(o=r.substring(n+8))):-1!==(n=r.indexOf("Firefox"))?(i="Firefox",o=r.substring(n+8)):(e=r.lastIndexOf(" ")+1)<(n=r.lastIndexOf("/"))&&(i=r.substring(e,n),o=r.substring(n+1),i.toLowerCase()==i.toUpperCase()&&(i=navigator.appName)),-1!==(t=o.indexOf(";"))&&(o=o.substring(0,t)),-1!==(t=o.indexOf(" "))&&(o=o.substring(0,t)),a=parseInt(""+o,10),isNaN(a)&&(o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10)),[i,a]}function l(){p.movie.play(),p.container.className=p.container.className.replace("stopped","playing")}function u(){p.movie.pause(),p.container.className=p.container.className.replace("playing","stopped")}function d(){p.movie.currentTime=0,p.isTextTracks||(p.subcount=0),l()}String.prototype.replaceAll||Object.defineProperty(String.prototype,"replaceAll",{value:function(e,n){return this.replace(new RegExp(e.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}});var p={};if(p.arBrowserInfo=c(),p.browserName=p.arBrowserInfo[0],p.browserMajorVersion=p.arBrowserInfo[1],"IE"===p.browserName&&(8===p.browserMajorVersion||9===p.browserMajorVersion))return!1;if(p.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),p.isSmartphoneOrTablet)return!1;"undefined"==typeof e.debug&&(e.debug=!1),p.debug=e.debug,e.debug&&console.log(p.browserName+" "+p.browserMajorVersion),p.playAriaLabel="undefined"==typeof e.videoTitle||""===e.videoTitle?"Play":"Play video, "+e.videoTitle,p.container=document.getElementById(e.videoId),p.container.className=p.container.className+" stopped",p.movie=p.container.getElementsByTagName("video")[0],p.movie.removeAttribute("controls"),p.randomNum=Math.floor(1e4*Math.random()),e.debug&&console.log("Inserting custom controls..."),p.container.insertAdjacentHTML("beforeend",e.html.replaceAll("{aria-label}",p.playAriaLabel).replaceAll("{id}",p.randomNum)),p.controls=p.container.querySelector(".player-controls"),p.labelMute=document.getElementById("labelMute"+p.randomNum),p.labelMuteOffset=p.movieWidth-390,p.labelMuteOffset<0&&(p.labelMuteOffset=0),p.labelMute.setAttribute("style","margin-left:"+p.labelMuteOffset+"px");for(var m,f="",v=p.movie.childNodes,g=0;g<v.length;g++)"track"===v[g].nodeName.toLowerCase()&&(m=v[g].getAttribute("kind"),"captions"===m&&(f=v[g].getAttribute("src")));if(p.captionExists=!0,""===f?(p.captionExists=!1,e.debug&&console.log("No caption track found.")):e.debug&&console.log("Caption track found; URI: "+f),"undefined"==typeof e.captionsOnDefault&&(e.captionsOnDefault=!0),p.isCaptionDefault=e.captionsOnDefault,"undefined"==typeof e.seekInterval&&(e.seekInterval=10),p.seekInterval=e.seekInterval,p.btnPlay=p.container.getElementsByClassName("px-video-play")[0],p.btnPause=p.container.getElementsByClassName("px-video-pause")[0],p.btnRestart=p.container.getElementsByClassName("px-video-restart")[0],p.btnRewind=p.container.getElementsByClassName("px-video-rewind")[0],p.btnForward=p.container.getElementsByClassName("px-video-forward")[0],p.btnVolume=p.container.getElementsByClassName("px-video-volume")[0],p.btnMute=p.container.getElementsByClassName("px-video-mute")[0],p.progressBar=p.container.getElementsByClassName("px-video-progress")[0],p.progressBarSpan=p.progressBar.getElementsByTagName("span")[0],p.captionsContainer=p.container.getElementsByClassName("px-video-captions")[0],p.captionsBtn=p.container.getElementsByClassName("px-video-btnCaptions")[0],p.captionsBtnContainer=p.container.getElementsByClassName("px-video-captions-btn-container")[0],p.duration=p.container.getElementsByClassName("px-video-duration")[0],p.txtSeconds=p.container.getElementsByClassName("px-seconds"),p.toggleFullscreen=p.container.querySelector("[data-player='toggle-fullscreen']"),p.videoContainer=p.container.querySelector(".player-video"),p.txtSeconds[0].innerHTML=p.seekInterval,p.txtSeconds[1].innerHTML=p.seekInterval,p.isTextTracks=!1,p.movie.textTracks&&(p.isTextTracks=!0),p.toggleFullscreen.addEventListener("click",function(){window.fullscreen.isFullScreen()?window.fullscreen.cancelFullScreen():window.fullscreen.requestFullScreen(p.container)},!1),p.videoContainer.addEventListener("click",function(){p.movie.paused?l():p.movie.ended?d():u()},!1),p.btnPlay.addEventListener("click",function(){l(),p.btnPause.focus()},!1),p.btnPause.addEventListener("click",function(){u(),p.btnPlay.focus()},!1),p.btnRestart.addEventListener("click",d,!1),p.btnRewind.addEventListener("click",function(){var e=p.movie.currentTime-p.seekInterval;p.movie.currentTime=0>e?0:e,p.isTextTracks||a(p)},!1),p.btnForward.addEventListener("click",function(){var e=p.movie.currentTime+p.seekInterval;p.movie.currentTime=e>p.movie.duration?p.movie.duration:e,p.isTextTracks||a(p)},!1),p.btnVolume.addEventListener("change",function(){p.movie.volume=parseFloat(this.value/10)},!1),p.btnMute.addEventListener("click",function(){p.movie.muted=p.movie.muted===!0?!1:!0},!1),p.movie.addEventListener("timeupdate",function(){p.secs=parseInt(p.movie.currentTime%60),p.mins=parseInt(p.movie.currentTime/60%60),p.secs=("0"+p.secs).slice(-2),p.mins=("0"+p.mins).slice(-2),p.duration.innerHTML=p.mins+":"+p.secs},!1),p.movie.addEventListener("timeupdate",function(){p.percent=100/p.movie.duration*p.movie.currentTime,p.percent>0&&(p.progressBar.value=p.percent,p.progressBarSpan.innerHTML=p.percent)},!1),p.progressBar.addEventListener("click",function(e){p.pos=n(e).x/this.offsetWidth,p.movie.currentTime=p.pos*p.movie.duration,p.isTextTracks||a(p)}),p.movie.addEventListener("ended",function(){p.captionsContainer.innerHTML=""}),p.captionsBtn.addEventListener("click",function(){p.captionsContainer.className=this.checked?"px-video-captions show":"px-video-captions hide"},!1),p.captionExists){if("IE"===p.browserName&&10===p.browserMajorVersion||"IE"===p.browserName&&11===p.browserMajorVersion||"Firefox"===p.browserName&&p.browserMajorVersion>=31||"Safari"===p.browserName&&p.browserMajorVersion>=7){e.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),p.isTextTracks=!1;for(var b={},x=p.movie.textTracks,T=0;T<x.length;T++)b=p.movie.textTracks[T],b.mode="hidden"}if(p.isTextTracks){e.debug&&console.log("textTracks supported"),s(p);for(var b={},x=p.movie.textTracks,T=0;T<x.length;T++)b=p.movie.textTracks[T],b.mode="hidden","captions"===b.kind&&b.addEventListener("cuechange",function(){this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&(p.captionsContainer.innerHTML=this.activeCues[0].text)},!1)}else if(e.debug&&console.log("textTracks not supported so rendering captions manually"),s(p),p.currentCaption="",p.subcount=0,p.captions=[],p.movie.addEventListener("timeupdate",function(){p.movie.currentTime.toFixed(1)>r(p.captions[p.subcount][0])&&p.movie.currentTime.toFixed(1)<i(p.captions[p.subcount][0])&&(p.currentCaption=p.captions[p.subcount][1]),p.movie.currentTime.toFixed(1)>i(p.captions[p.subcount][0])&&p.subcount<p.captions.length-1&&p.subcount++,p.captionsContainer.innerHTML=p.currentCaption},!1),""!==f){var h;window.XMLHttpRequest?h=new XMLHttpRequest:window.ActiveXObject&&(h=new ActiveXObject("Microsoft.XMLHTTP")),h.onreadystatechange=function(){if(4===h.readyState)if(200===h.status){e.debug&&console.log("xhr = 200"),p.captions=[];var n,t=[],r=h.responseText;t=r.split("\n\n");for(var i=0;i<t.length;i++)n=t[i],p.captions[i]=[],p.captions[i]=n.split("\n");p.captions.shift(),e.debug&&console.log("Successfully loaded the caption file via ajax.")}else e.debug&&console.log("There was a problem loading the caption file via ajax.")},h.open("get",f,!0),h.send()}if("Safari"===p.browserName&&7===p.browserMajorVersion){console.log("Safari 7 detected; removing track from DOM");var x=p.movie.getElementsByTagName("track");p.movie.removeChild(x[0])}}else p.captionsContainer.className="px-video-captions hide"}!function(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var t=0,r=n.length;r>t;t++)if(e.prefix=n[t],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName=e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+"RequestFullScreen"]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+"CancelFullScreen"]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),window.fullscreen=e}();
\ No newline at end of file diff --git a/dist/js/templates.js b/dist/js/templates.js index 64940b75..1bef66c8 100644 --- a/dist/js/templates.js +++ b/dist/js/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=\"controls\">");t.b("\n" + i);t.b(" <progress class=\"px-video-progress\" max=\"100\" value=\"0\"><span>0</span>% played</progress>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"play-controls\">");t.b("\n" + i);t.b(" <button class=\"px-video-restart\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></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 class=\"px-video-rewind\" 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 <span class=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button class=\"px-video-play\" aria-label=\"{aria-label}\" 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 class=\"px-video-pause\" 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 class=\"px-video-forward\" 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\">Fast forward <span class=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <div class=\"px-video-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"px-video-duration\">00:00</span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"sound-controls\">");t.b("\n" + i);t.b(" <!--<div class=\"px-video-mute-btn-container\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-mute sr-only\" id=\"btnMute{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label id=\"labelMute{id}\" for=\"btnMute{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n" + i);t.b(" <!--</div>-->");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=\"px-video-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\">");t.b("\n");t.b("\n" + i);t.b(" <!--<div class=\"px-video-captions-btn-container hide\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-btnCaptions sr-only\" id=\"btnCaptions{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label for=\"btnCaptions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-film\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n" + i);t.b(" <!--</div>-->");t.b("\n");t.b("\n" + i);t.b(" <button class=\"player-toggle-fullscreen\" data-player=\"toggle-fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></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(" </div>");t.b("\n" + i);t.b("</div>");t.b("\n");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(" <progress class=\"px-video-progress\" max=\"100\" value=\"0\"><span>0</span>% played</progress>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"play-controls\">");t.b("\n" + i);t.b(" <button class=\"px-video-restart\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></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 class=\"px-video-rewind\" 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 <span class=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button class=\"px-video-play\" aria-label=\"{aria-label}\" 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 class=\"px-video-pause\" 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 class=\"px-video-forward\" 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\">Fast forward <span class=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <div class=\"px-video-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"px-video-duration\">00:00</span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"sound-controls\">");t.b("\n" + i);t.b(" <!--<div class=\"px-video-mute-btn-container\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-mute inverted sr-only\" id=\"btnMute{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label id=\"labelMute{id}\" for=\"btnMute{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n" + i);t.b(" <!--</div>-->");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=\"px-video-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\">");t.b("\n");t.b("\n" + i);t.b(" <!--<div class=\"px-video-captions-btn-container hide\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-btnCaptions sr-only\" id=\"btnCaptions{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label for=\"btnCaptions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-film\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n" + i);t.b(" <!--</div>-->");t.b("\n");t.b("\n" + i);t.b(" <button class=\"player-toggle-fullscreen\" data-player=\"toggle-fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></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(" </div>");t.b("\n" + i);t.b("</div>");t.b("\n");return t.fl(); },partials: {}, subs: { }});
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 445b2ba5..598774e0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,7 +19,7 @@ <div class="player" id="myvid"> <div class="player-video"> - <div class="px-video-captions hide"></div> + <div class="px-video-captions"></div> <video width="640" height="360" poster="../media/poster_PayPal_Austin2.jpg" controls> <!-- video files --> <source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" type="video/mp4" /> @@ -36,8 +36,6 @@ </div> </video> </div> - <!-- Inject these... --> - <div class="px-video-controls"></div> </div> <!-- Load SVG defs --> |