diff --git a/assets/fonts/AvenirLTStd-Heavy.ttf b/assets/fonts/AvenirLTStd-Heavy.ttf new file mode 100644 index 00000000..7bee7997 Binary files /dev/null and b/assets/fonts/AvenirLTStd-Heavy.ttf differ diff --git a/assets/fonts/AvenirLTStd-Heavy.woff b/assets/fonts/AvenirLTStd-Heavy.woff new file mode 100644 index 00000000..771c45a1 Binary files /dev/null and b/assets/fonts/AvenirLTStd-Heavy.woff differ diff --git a/assets/fonts/AvenirLTStd-Heavy.woff2 b/assets/fonts/AvenirLTStd-Heavy.woff2 new file mode 100755 index 00000000..b889b061 Binary files /dev/null and b/assets/fonts/AvenirLTStd-Heavy.woff2 differ diff --git a/assets/fonts/AvenirLTStd-Medium.ttf b/assets/fonts/AvenirLTStd-Medium.ttf new file mode 100644 index 00000000..73ec1e54 Binary files /dev/null and b/assets/fonts/AvenirLTStd-Medium.ttf differ diff --git a/assets/fonts/AvenirLTStd-Medium.woff b/assets/fonts/AvenirLTStd-Medium.woff new file mode 100644 index 00000000..bc2a778e Binary files /dev/null and b/assets/fonts/AvenirLTStd-Medium.woff differ diff --git a/assets/fonts/AvenirLTStd-Medium.woff2 b/assets/fonts/AvenirLTStd-Medium.woff2 new file mode 100755 index 00000000..bcf4649b Binary files /dev/null and b/assets/fonts/AvenirLTStd-Medium.woff2 differ diff --git a/assets/icons/expand.svg b/assets/icons/expand.svg index 9c541d48..5fd651bd 100644 --- a/assets/icons/expand.svg +++ b/assets/icons/expand.svg @@ -4,8 +4,8 @@ expand Created with Sketch. - - + + diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js index 954cc9b2..7179cd6b 100644 --- a/assets/js/simple-media.js +++ b/assets/js/simple-media.js @@ -1,3 +1,77 @@ +// ========================================================================== +// Simple Media Player +// simple-media.js v1.0.0 +// https://github.com/sampotts/simple-media +// ========================================================================== +// Credits: http://paypal.github.io/accessible-html5-video-player/ +// ========================================================================== + +// Fullscreen API +(function() { + var + fullscreen = { + supportsFullScreen: false, + isFullScreen: function() { return false; }, + requestFullScreen: function() {}, + cancelFullScreen: function() {}, + fullScreenEventName: "", + element: null, + prefix: "" + }, + browserPrefixes = "webkit moz o ms khtml".split(" "); + + // check for native support + if (typeof document.cancelFullScreen != "undefined") { + fullscreen.supportsFullScreen = true; + } + else { + // check for fullscreen support by vendor prefix + for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { + fullscreen.prefix = browserPrefixes[i]; + + if (typeof document[fullscreen.prefix + "CancelFullScreen" ] != "undefined" ) { + fullscreen.supportsFullScreen = true; + + break; + } + } + } + + // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag so set it to not supported + // https://bugs.webkit.org/show_bug.cgi?id=121496 + if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) { + fullscreen.supportsFullScreen = false; + } + + // Update methods to do something useful + if (fullscreen.supportsFullScreen) { + fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange"; + + fullscreen.isFullScreen = function() { + switch (this.prefix) { + case "": + return document.fullScreen; + case "webkit": + return document.webkitIsFullScreen; + default: + return document[this.prefix + "FullScreen"]; + } + }; + fullscreen.requestFullScreen = function(element) { + return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + "RequestFullScreen"](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null); + }; + fullscreen.cancelFullScreen = function() { + return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"](); + }; + fullscreen.element = function() { + return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"]; + }; + } + + // Export api + window.fullscreen = fullscreen; +})(); + function InitPxVideo(options) { "use strict"; @@ -12,6 +86,37 @@ function InitPxVideo(options) { }); } + // Get click position relative to parent + // http://www.kirupa.com/html5/getting_mouse_click_position.htm + // --------------------------------- + function getClickPosition(e) { + var parentPosition = window.fullscreen.isFullScreen() ? { x: 0, y: 0 } : getPosition(e.currentTarget); + + return { + x: e.clientX - parentPosition.x, + y: e.clientY - parentPosition.y + }; + } + + // Get element position + // http://www.kirupa.com/html5/getting_mouse_click_position.htm + // --------------------------------- + function getPosition(element) { + var xPosition = 0; + var yPosition = 0; + + while (element) { + xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); + yPosition += (element.offsetTop - element.scrollTop + element.clientTop); + element = element.offsetParent; + } + + return { + x: xPosition, + y: yPosition + }; + } + // Utilities for caption time codes function video_timecode_min(tc) { var tcpair = []; @@ -255,6 +360,9 @@ function InitPxVideo(options) { obj.duration = obj.container.getElementsByClassName("px-video-duration")[0]; obj.txtSeconds = obj.container.getElementsByClassName("px-seconds"); + obj.toggleFullscreen = obj.container.querySelector("[data-player='toggle-fullscreen']"); + obj.videoContainer = obj.container.querySelector(".player-video"); + // Update number of seconds in rewind and fast forward buttons obj.txtSeconds[0].innerHTML = obj.seekInterval; obj.txtSeconds[1].innerHTML = obj.seekInterval; @@ -265,30 +373,41 @@ function InitPxVideo(options) { obj.isTextTracks = true; } - // Play - obj.btnPlay.addEventListener("click", function() { + // Fullscreen + obj.toggleFullscreen.addEventListener("click", function() { + if(!window.fullscreen.isFullScreen()) { + window.fullscreen.requestFullScreen(obj.container); + } + else { + window.fullscreen.cancelFullScreen(); + } + }, false); + + // Click video + obj.videoContainer.addEventListener("click", function() { + if(obj.movie.paused) { + play(); + } + else if(obj.movie.ended) { + restart(); + } + else { + pause(); + } + }, false); + + function play() { obj.movie.play(); - obj.container.className = obj.container.className.replace("stopped", "playing"); + + } - obj.btnPlay.className = "px-video-play hide"; - obj.btnPause.className = "px-video-pause px-video-show-inline"; - obj.btnPause.focus(); - }, false); - - // Pause - obj.btnPause.addEventListener("click", function() { + function pause() { obj.movie.pause(); - obj.container.className = obj.container.className.replace("playing", "stopped"); + } - obj.btnPlay.className = "px-video-play px-video-show-inline"; - obj.btnPause.className = "px-video-pause hide"; - obj.btnPlay.focus(); - }, false); - - // Restart - obj.btnRestart.addEventListener("click", function() { + function restart() { // Move to beginning obj.movie.currentTime = 0; @@ -298,11 +417,17 @@ function InitPxVideo(options) { } // Play and ensure the play button is in correct state - obj.movie.play(); - obj.btnPlay.className = "px-video-play hide"; - obj.btnPause.className = "px-video-pause px-video-show-inline"; + play(); + } - }, false); + // Play + obj.btnPlay.addEventListener("click", function() { play(); obj.btnPause.focus(); }, false); + + // Pause + obj.btnPause.addEventListener("click", function() { pause(); obj.btnPlay.focus(); }, false); + + // Restart + obj.btnRestart.addEventListener("click", restart, false); // Rewind obj.btnRewind.addEventListener("click", function() { @@ -373,7 +498,7 @@ function InitPxVideo(options) { // Skip when clicking progress bar obj.progressBar.addEventListener("click", function(e) { - obj.pos = (e.pageX - this.offsetLeft) / this.offsetWidth; + obj.pos = getClickPosition(e).x / this.offsetWidth; obj.movie.currentTime = obj.pos * obj.movie.duration; // Special handling for "manual" captions @@ -527,101 +652,5 @@ function InitPxVideo(options) { var tracks = obj.movie.getElementsByTagName("track"); obj.movie.removeChild(tracks[0]); } - } -}; - - - -/*$(function() { - $("video").simplePlayer(); -});*/ - -// Simple player plugin -// --------------------------------- -/*;(function($) { - $.fn.simplePlayer = function (settings) { - // Config defaults - var config = { - wrapperClass: "media", // Class name added to replaced selects - shownClass: "in", - autoplay: false, - templates: { - controls: "
\ - \ -
\ -
\ -
\ -
\ -
\ - 88:88 \ - / \ - 88:88 \ -
\ -
\ - \ -
\ -
\ -
\ -
\ -
100%
\ -
\ -
\ - \ -
", - overlay: "
" - } - }; - - // Extend settings if they"re passed - if (settings) { - $.extend(config, settings); - } - - this.each(function() { - var player = this, - status = {}, - $player = $(this).wrap("
"), - $wrapper = $player.parents("." + config.wrapperClass), - supportMP4 = (function (v) { return (v.canPlayType && v.canPlayType("video/mp4")); }(document.createElement("video"))); - - console.log($wrapper); - - // Inject the controls - $(config.templates.controls).insertAfter($player); - $(config.templates.overlay).insertAfter($player); - - // Select controls - var $playbackToggle = $(".js-button-toggle-play"), - $muteToggle = $(".js-button-toggle-mute"); - - function togglePlayback() { - if(status.playing && status.playing == true) { - player.pause(); - status.playing = false; - $wrapper.removeClass("playing").addClass("paused"); - } else { - player.play(); - status.playing = true; - $wrapper.removeClass("paused stopped").addClass("playing"); - } - $("span", this).attr("class", "icon-" + (status.playing ? "pause" : "play")); - }; - - function toggleMute() { - player.muted = !status.muted; - status.muted = player.muted; - $("span", this).attr("class", "icon-" + (status.muted ? "mute" : "volume-up")); - }; - - $playbackToggle.on("click", togglePlayback); - $muteToggle.on("click", toggleMute); - }); - }; -})(jQuery);*/ \ No newline at end of file +} \ No newline at end of file diff --git a/assets/less/docs.less b/assets/less/docs.less index 05b19a48..57b4ad9e 100644 --- a/assets/less/docs.less +++ b/assets/less/docs.less @@ -7,6 +7,24 @@ // Mixins @import "lib/mixins.less"; +@font-face { + font-family: "Avenir"; + src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), + url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), + url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype"); + font-style: normal; + font-weight: 400; +} + +@font-face { + font-family: "Avenir"; + src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), + url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), + url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); + font-style: normal; + font-weight: 600; +} + // BORDER-BOX ALL THE THINGS! // http://paulirish.com/2012/box-sizing-border-box-ftw/ *, *::after, *::before { @@ -16,22 +34,27 @@ html { font-size: 62.5%; } body { - font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; .font-size(18); color: #6D797F; line-height: 1.5; background: #ECF0F1; max-width: 960px; - margin: 50px auto; + margin: 40px auto; text-align: center; } h1 { .font-size(48); letter-spacing: -.025em; color: #2E3C44; - margin: 0 0 20px; + margin: 0 0 10px; line-height: 1.2; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } p { margin: 0 0 20px; +} +header { + margin-bottom: 40px; } \ No newline at end of file diff --git a/assets/less/simple-player.less b/assets/less/simple-media.less similarity index 76% rename from assets/less/simple-player.less rename to assets/less/simple-media.less index a935e09e..ec83f4e0 100644 --- a/assets/less/simple-player.less +++ b/assets/less/simple-media.less @@ -4,12 +4,25 @@ // Variables // ------------------------------- -@base-color: #2E3C44; -@green: #1ABC9C; -@red: #D44334; -//@green: #4CB953; -@blue: #3498DB; -@control-color: @blue; +// Colors +@base-color: #2E3C44; +@green: #1ABC9C; +@red: #D44334; +@blue: #3498DB; + +// Grays +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #6f7e86; +@gray-lighter: #859093; +@gray-lightest: #cbd0d3; +@gray-light-mega: #dadfe2; +@off-white: #f9fafb; + +// Controls +@control-color: @gray-lightest; +@control-color-active: @blue; +@control-spacing: 10px; // BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/) @@ -51,7 +64,39 @@ position: relative; max-width: 100%; overflow: hidden; // For the controls + background: #000; + // For video + &-video { + position: relative; + } + + &:fullscreen { + height: 100%; + width: 100%; + + .player-video { + position: absolute; + top: 50%; + left: 0; + right: 0; + transform: translateY(-50%); + } + .controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + + .icon-exit-fullscreen { + display: block; + + & + svg { + display: none; + } + } + } + } video { width: 100%; height: auto; @@ -61,15 +106,34 @@ width: 18px; height: 18px; } - .controls { - .clearfix(); + .px-video-captions { position: absolute; bottom: 0; left: 0; - right: 0; - padding: 10px 5px; - background: rgba(0,0,0, .75); - transition: transform .3s ease; + 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; + } + .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 { @@ -82,8 +146,8 @@ display: inline-block; vertical-align: middle; margin: 0 2px; - padding: 5px 10px; - color: #ddd; + padding: (@control-spacing / 2) @control-spacing; + color: @control-color; transition: background .3s ease; border-radius: 3px; @@ -93,22 +157,23 @@ transition: fill .3s ease; } &:focus { - background: #000; outline: 0; } &:hover { - background: @control-color; + background: @control-color-active; } &:hover svg, &:focus svg { fill: #fff; } } + .icon-exit-fullscreen { + display: none; + } .px-video-time { display: inline-block; vertical-align: middle; - padding-top: 3px; - margin-left: 10px; + margin-left: @control-spacing; color: #fff; font-weight: 600; font-size: 14px; @@ -117,24 +182,31 @@ } progress { position: absolute; - top: -10px; + top: 0; left: 0; right: 0; width: 100%; - height: 10px; + height: @control-spacing; margin: 0; vertical-align: top; - + &[value] { /* Reset the default appearance */ -webkit-appearance: none; border: none; - + background: @gray; + cursor: pointer; + &::-webkit-progress-bar { - background-color: #eee; + background: @gray; } + + // The value &::-webkit-progress-value { - background-color: @control-color; + background: @control-color-active; + } + &::-moz-progress-bar { + background: @control-color-active; } } } @@ -147,17 +219,55 @@ /*&.playing .controls { transform: translateY(100%); }*/ + + .controls .px-video-pause, + &.playing .controls .px-video-play { + display: none; + } + &.playing .controls .px-video-pause { + display: inline-block; + } + + /* volume range input */ + input[type='range'] { + -webkit-appearance: none; + height: 6px; + width: 100px; + margin-right: @control-spacing; + 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-radius: 10px; + } + &::-webkit-slider-thumb { + -webkit-appearance: none !important; + height: 12px; + width: 12px; + background: @control-color; + border-radius: 100%; + transition: background .3s ease; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + background: @control-color; + border-radius: 100%; + } + } } /* containers */ -.px-video-img-captions-container * { - box-sizing: border-box; -} - -.px-video-img-captions-container { - position: relative; -} /* progress indicator */ .px-video-progress { @@ -173,22 +283,7 @@ }*/ /* caption area */ -.px-video-captions { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding: .5em; - min-height: 2.5em; - background-color: #000; - color: #fff; - font-size: 1.1em; - text-align: center; - opacity: 0.75; - -webkit-font-smoothing: antialiased; - font-weight: 500; -} /* buttons */ .px-video-controls button { @@ -259,34 +354,6 @@ background-position: -6px -656px; } -/* volume range input */ -.px-video-controls input[type='range'] { - -webkit-appearance: none; - height: 6px; - width: 100px; - margin-top: 8px; - background-color: #E6E6E6; - outline:none; -} -.px-video-controls input[type='range']:focus::-webkit-slider-thumb { - outline: 1px #999 dotted; -} -.px-video-controls input[type='range']::-moz-range-track { - -moz-appearance: none; - height: 6px; - background-color: #E6E6E6; - border: none; -} -.px-video-controls input[type='range']::-webkit-slider-thumb { - -webkit-appearance: none !important; - height: 10px; - width: 6px; - background-color: #666; -} -.px-video-controls input[type='range']::-moz-range-thumb { - height: 12px; - width: 8px; -} /* fixing display for IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .px-video-controls input[type='range'] { diff --git a/assets/templates/controls.html b/assets/templates/controls.html index 2fc38196..7434f9c9 100644 --- a/assets/templates/controls.html +++ b/assets/templates/controls.html @@ -14,7 +14,7 @@ Play - @@ -47,5 +47,11 @@ Captions + +
diff --git a/dist/css/docs.css b/dist/css/docs.css index 9372da09..6269d78c 100644 --- a/dist/css/docs.css +++ b/dist/css/docs.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;font-size:1.8rem;color:#6D797F;line-height:1.5;background:#ECF0F1;max-width:960px;margin:50px auto;text-align:center}h1{font-size:48px;font-size:4.8rem;letter-spacing:-.025em;color:#2E3C44;margin:0 0 20px;line-height:1.2}p{margin:0 0 20px} \ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;font-size:1.8rem;color:#6D797F;line-height:1.5;background:#ECF0F1;max-width:960px;margin:40px auto;text-align:center}h1{font-size:48px;font-size:4.8rem;letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin:0 0 20px}header{margin-bottom:40px} \ No newline at end of file diff --git a/dist/css/simple-media.css b/dist/css/simple-media.css new file mode 100644 index 00000000..cdf99575 --- /dev/null +++ b/dist/css/simple-media.css @@ -0,0 +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 diff --git a/dist/js/docs.js b/dist/js/docs.js index 98c30afa..581329da 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,u=new a;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=r;for(l in n)s[l]||(s[l]=n[l]);for(l in s)u.subs[l]=s[l];i=i||{},u.stackPartials=i;for(l in e)i[l]||(i[l]=e[l]);for(l in i)u.partials[l]=i[l];return u}function s(t){return String(null===t||void 0===t?"":t)}function i(t){return t=s(t),c.test(t)?t.replace(r,"&").replace(a,"<").replace(o,">").replace(l,"'").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: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=0;u--)if(a=e[u],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],u=t.call(l);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,l,e,o.substring(i,r),a)):u},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,l=/\'/g,u=/\"/g,c=/[&<>\"\']/,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=[],u=null,c=null,p=null;for(c=s[s.length-1];n.length>0;){if(p=n.shift(),c&&"<"==c.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(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,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('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(m,"\\\\").replace(d,'\\"').replace(v,"\\n").replace(g,"\\r").replace(x,"\\u2028").replace(y,"\\u2029")}function c(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("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,d=/\"/g,v=/\n/g,g=/\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"==e.tag&&(e.indent=x[s].text.toString()),x.splice(s,1));else n||x.push({tag:"\n"});y=!1,k=x.length}function u(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 c=i.length,p=0,b=1,f=2,d=p,v=null,g=null,m="",x=[],y=!1,w=0,k=0,T="{{",S="}}";for(r&&(r=r.split(" "),T=r[0],S=r[1]),w=0;c>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,g=t.tags[i.charAt(w+1)],v=g?i.charAt(w+1):"_v","="==v?(w=u(i,w),d=p):(g&&w++,d=f),y=w):s(S,i,w)?(x.push({tag:v,n:e(m),otag:T,ctag:S,i:"/"==v?y-T.length:w+S.length}),m="",w+=S.length-1,d=p,"{"==v&&("}}"==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."+c(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."+c(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 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("'+u(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."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+u(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('
'),s.b("\n"+e),s.b(' 0% played'),s.b("\n"),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' Time'),s.b("\n"+e),s.b(' 00:00'),s.b("\n"+e),s.b("
"),s.b("\n"+e),s.b("
"),s.b("\n"),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(" "),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(" "),s.b("\n"+e),s.b("
"),s.b("\n"+e),s.b("
"),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=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,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"==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('
'),s.b("\n"+e),s.b(' 0% played'),s.b("\n"),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' Time'),s.b("\n"+e),s.b(' 00:00'),s.b("\n"+e),s.b("
"),s.b("\n"+e),s.b("
"),s.b("\n"),s.b("\n"+e),s.b('
'),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(" "),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' '),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b(" "),s.b("\n"),s.b("\n"+e),s.b(' "),s.b("\n"+e),s.b("
"),s.b("\n"+e),s.b("
"),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 new file mode 100644 index 00000000..6044bf06 --- /dev/null +++ b/dist/js/simple-media.js @@ -0,0 +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.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;ge?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;Tr(p.captions[p.subcount][0])&&p.movie.currentTime.toFixed(1)i(p.captions[p.subcount][0])&&p.subcountt;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/simple-player.js b/dist/js/simple-player.js deleted file mode 100644 index 26c3968b..00000000 --- a/dist/js/simple-player.js +++ /dev/null @@ -1 +0,0 @@ -function InitPxVideo(e){"use strict";function t(e){var t=[];return t=e.split(" --> "),o(t[0])}function n(e){var t=[];return t=e.split(" --> "),o(t[1])}function o(e){if(null===e||void 0===e)return 0;var t,n=[],o=[];return n=e.split(","),o=n[0].split(":"),t=Math.floor(60*o[0]*60)+Math.floor(60*o[1])+Math.floor(o[2])}function a(e){for(e.subcount=0;n(e.captions[e.subcount][0])e.captions.length-1){e.subcount=e.captions.length-1;break}}function i(e){e.isCaptionDefault&&(e.captionsContainer.className="px-video-captions show",e.captionsBtn.setAttribute("checked","checked"))}function s(){var e,t,n,o=navigator.userAgent,a=navigator.appName,i=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",i="11;"):-1!==(t=o.indexOf("MSIE"))?(a="IE",i=o.substring(t+5)):-1!==(t=o.indexOf("Chrome"))?(a="Chrome",i=o.substring(t+7)):-1!==(t=o.indexOf("Safari"))?(a="Safari",i=o.substring(t+7),-1!==(t=o.indexOf("Version"))&&(i=o.substring(t+8))):-1!==(t=o.indexOf("Firefox"))?(a="Firefox",i=o.substring(t+8)):(e=o.lastIndexOf(" ")+1)<(t=o.lastIndexOf("/"))&&(a=o.substring(e,t),i=o.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=i.indexOf(";"))&&(i=i.substring(0,n)),-1!==(n=i.indexOf(" "))&&(i=i.substring(0,n)),s=parseInt(""+i,10),isNaN(s)&&(i=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),[a,s]}String.prototype.replaceAll||Object.defineProperty(String.prototype,"replaceAll",{value:function(e,t){return this.replace(new RegExp(e.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),t)}});var r={};if(r.arBrowserInfo=s(),r.browserName=r.arBrowserInfo[0],r.browserMajorVersion=r.arBrowserInfo[1],"IE"===r.browserName&&(8===r.browserMajorVersion||9===r.browserMajorVersion))return!1;if(r.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),r.isSmartphoneOrTablet)return!1;"undefined"==typeof e.debug&&(e.debug=!1),r.debug=e.debug,e.debug&&console.log(r.browserName+" "+r.browserMajorVersion),r.playAriaLabel="undefined"==typeof e.videoTitle||""===e.videoTitle?"Play":"Play video, "+e.videoTitle,r.container=document.getElementById(e.videoId),r.container.className=r.container.className+" stopped",r.movie=r.container.getElementsByTagName("video")[0],r.controls=r.container.getElementsByClassName("px-video-controls")[0],r.movie.removeAttribute("controls"),r.randomNum=Math.floor(1e4*Math.random()),e.debug&&console.log("Inserting custom video controls"),r.controls.innerHTML=e.html.replaceAll("{aria-label}",r.playAriaLabel).replaceAll("{id}",r.randomNum),r.labelMute=document.getElementById("labelMute"+r.randomNum),r.labelMuteOffset=r.movieWidth-390,r.labelMuteOffset<0&&(r.labelMuteOffset=0),r.labelMute.setAttribute("style","margin-left:"+r.labelMuteOffset+"px");for(var c,l="",d=r.movie.childNodes,p=0;pe?0:e,r.isTextTracks||a(r)},!1),r.btnForward.addEventListener("click",function(){var e=r.movie.currentTime+r.seekInterval;r.movie.currentTime=e>r.movie.duration?r.movie.duration:e,r.isTextTracks||a(r)},!1),r.btnVolume.addEventListener("change",function(){r.movie.volume=parseFloat(this.value/10)},!1),r.btnMute.addEventListener("click",function(){r.movie.muted=r.movie.muted===!0?!1:!0},!1),r.movie.addEventListener("timeupdate",function(){r.secs=parseInt(r.movie.currentTime%60),r.mins=parseInt(r.movie.currentTime/60%60),r.secs=("0"+r.secs).slice(-2),r.mins=("0"+r.mins).slice(-2),r.duration.innerHTML=r.mins+":"+r.secs},!1),r.movie.addEventListener("timeupdate",function(){r.percent=100/r.movie.duration*r.movie.currentTime,r.percent>0&&(r.progressBar.value=r.percent,r.progressBarSpan.innerHTML=r.percent)},!1),r.progressBar.addEventListener("click",function(e){r.pos=(e.pageX-this.offsetLeft)/this.offsetWidth,r.movie.currentTime=r.pos*r.movie.duration,r.isTextTracks||a(r)}),r.movie.addEventListener("ended",function(){r.captionsContainer.innerHTML=""}),r.captionsBtn.addEventListener("click",function(){r.captionsContainer.className=this.checked?"px-video-captions show":"px-video-captions hide"},!1),r.captionExists){if("IE"===r.browserName&&10===r.browserMajorVersion||"IE"===r.browserName&&11===r.browserMajorVersion||"Firefox"===r.browserName&&r.browserMajorVersion>=31||"Safari"===r.browserName&&r.browserMajorVersion>=7){e.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),r.isTextTracks=!1;for(var u={},m=r.movie.textTracks,v=0;vt(r.captions[r.subcount][0])&&r.movie.currentTime.toFixed(1)n(r.captions[r.subcount][0])&&r.subcount");t.b("\n" + i);t.b(" 0% played");t.b("\n");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" Time");t.b("\n" + i);t.b(" 00:00");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b("
");t.b("\n");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b("");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("
");t.b("\n" + i);t.b(" 0% played");t.b("\n");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" Time");t.b("\n" + i);t.b(" 00:00");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b("
");t.b("\n");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b(" ");t.b("\n");t.b("\n" + i);t.b(" ");t.b("\n" + i);t.b("
");t.b("\n" + i);t.b("
");t.b("\n");return t.fl(); },partials: {}, subs: { }}); \ No newline at end of file diff --git a/dist/svg/sprite.svg b/dist/svg/sprite.svg index b6a35931..7d0efdcd 100644 --- a/dist/svg/sprite.svg +++ b/dist/svg/sprite.svg @@ -1 +1 @@ -collapseexpandpauserewind \ No newline at end of file +collapseexpandpauserewind \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 1afbd70a..445b2ba5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,23 +2,23 @@ - Simple HTML5 Video Player + Simple Media - +
-

HTML5 Media Player

+

Simple Media

A simple HTML5 media player

-
-
+
+