From 1b8b5d6ee45eb3b89703583e32b7c885aa601917 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 24 Feb 2015 12:37:23 +1100 Subject: Tidying up, bower changes - Folder tidy up - Bower updated to include source files - Upgraded to svgstore 5.0.0 --- assets/fonts/AvenirLTStd-Heavy.ttf | Bin 49936 -> 0 bytes assets/fonts/AvenirLTStd-Heavy.woff | Bin 28088 -> 0 bytes assets/fonts/AvenirLTStd-Heavy.woff2 | Bin 21164 -> 0 bytes assets/fonts/AvenirLTStd-Medium.ttf | Bin 52748 -> 0 bytes assets/fonts/AvenirLTStd-Medium.woff | Bin 28964 -> 0 bytes assets/fonts/AvenirLTStd-Medium.woff2 | Bin 22084 -> 0 bytes assets/icons/bubble.svg | 6 - assets/icons/collapse.svg | 13 - assets/icons/expand.svg | 13 - assets/icons/fast-forward.svg | 6 - assets/icons/muted.svg | 14 - assets/icons/pause.svg | 13 - assets/icons/play.svg | 6 - assets/icons/refresh.svg | 7 - assets/icons/rewind.svg | 10 - assets/icons/sound.svg | 7 - assets/js/docs.js | 15 - assets/js/lib/hogan-3.0.2.mustache.js | 802 ----------------------- assets/js/plyr.js | 1123 --------------------------------- assets/less/docs.less | 141 ----- assets/less/docs/fontface.less | 16 - assets/less/docs/mixins.less | 42 -- assets/less/docs/normalize.less | 406 ------------ assets/less/plyr.less | 431 ------------- assets/templates/controls.html | 59 -- bower.json | 6 +- bundles.json | 10 +- dist/js/plyr.js | 2 +- dist/sprite.svg | 1 + dist/svg/sprite.svg | 1 - gulpfile.js | 63 +- index.html | 4 +- package.json | 4 +- src/fonts/AvenirLTStd-Heavy.ttf | Bin 0 -> 49936 bytes src/fonts/AvenirLTStd-Heavy.woff | Bin 0 -> 28088 bytes src/fonts/AvenirLTStd-Heavy.woff2 | Bin 0 -> 21164 bytes src/fonts/AvenirLTStd-Medium.ttf | Bin 0 -> 52748 bytes src/fonts/AvenirLTStd-Medium.woff | Bin 0 -> 28964 bytes src/fonts/AvenirLTStd-Medium.woff2 | Bin 0 -> 22084 bytes src/js/docs.js | 15 + src/js/lib/hogan-3.0.2.mustache.js | 802 +++++++++++++++++++++++ src/js/plyr.js | 1123 +++++++++++++++++++++++++++++++++ src/less/docs.less | 140 ++++ src/less/docs/fontface.less | 16 + src/less/docs/mixins.less | 42 ++ src/less/docs/normalize.less | 406 ++++++++++++ src/less/plyr.less | 431 +++++++++++++ src/sprite/icon-bubble.svg | 6 + src/sprite/icon-collapse.svg | 13 + src/sprite/icon-expand.svg | 13 + src/sprite/icon-fast-forward.svg | 6 + src/sprite/icon-muted.svg | 14 + src/sprite/icon-pause.svg | 13 + src/sprite/icon-play.svg | 6 + src/sprite/icon-refresh.svg | 7 + src/sprite/icon-rewind.svg | 10 + src/sprite/icon-sound.svg | 7 + src/templates/controls.html | 59 ++ 58 files changed, 3174 insertions(+), 3176 deletions(-) delete mode 100644 assets/fonts/AvenirLTStd-Heavy.ttf delete mode 100644 assets/fonts/AvenirLTStd-Heavy.woff delete mode 100755 assets/fonts/AvenirLTStd-Heavy.woff2 delete mode 100644 assets/fonts/AvenirLTStd-Medium.ttf delete mode 100644 assets/fonts/AvenirLTStd-Medium.woff delete mode 100755 assets/fonts/AvenirLTStd-Medium.woff2 delete mode 100755 assets/icons/bubble.svg delete mode 100644 assets/icons/collapse.svg delete mode 100644 assets/icons/expand.svg delete mode 100755 assets/icons/fast-forward.svg delete mode 100644 assets/icons/muted.svg delete mode 100644 assets/icons/pause.svg delete mode 100755 assets/icons/play.svg delete mode 100755 assets/icons/refresh.svg delete mode 100644 assets/icons/rewind.svg delete mode 100755 assets/icons/sound.svg delete mode 100644 assets/js/docs.js delete mode 100644 assets/js/lib/hogan-3.0.2.mustache.js delete mode 100644 assets/js/plyr.js delete mode 100644 assets/less/docs.less delete mode 100644 assets/less/docs/fontface.less delete mode 100644 assets/less/docs/mixins.less delete mode 100644 assets/less/docs/normalize.less delete mode 100644 assets/less/plyr.less delete mode 100644 assets/templates/controls.html create mode 100644 dist/sprite.svg delete mode 100644 dist/svg/sprite.svg create mode 100644 src/fonts/AvenirLTStd-Heavy.ttf create mode 100644 src/fonts/AvenirLTStd-Heavy.woff create mode 100755 src/fonts/AvenirLTStd-Heavy.woff2 create mode 100644 src/fonts/AvenirLTStd-Medium.ttf create mode 100644 src/fonts/AvenirLTStd-Medium.woff create mode 100755 src/fonts/AvenirLTStd-Medium.woff2 create mode 100644 src/js/docs.js create mode 100644 src/js/lib/hogan-3.0.2.mustache.js create mode 100644 src/js/plyr.js create mode 100644 src/less/docs.less create mode 100644 src/less/docs/fontface.less create mode 100644 src/less/docs/mixins.less create mode 100644 src/less/docs/normalize.less create mode 100644 src/less/plyr.less create mode 100755 src/sprite/icon-bubble.svg create mode 100644 src/sprite/icon-collapse.svg create mode 100644 src/sprite/icon-expand.svg create mode 100755 src/sprite/icon-fast-forward.svg create mode 100644 src/sprite/icon-muted.svg create mode 100644 src/sprite/icon-pause.svg create mode 100755 src/sprite/icon-play.svg create mode 100755 src/sprite/icon-refresh.svg create mode 100644 src/sprite/icon-rewind.svg create mode 100755 src/sprite/icon-sound.svg create mode 100644 src/templates/controls.html diff --git a/assets/fonts/AvenirLTStd-Heavy.ttf b/assets/fonts/AvenirLTStd-Heavy.ttf deleted file mode 100644 index 7bee7997..00000000 Binary files a/assets/fonts/AvenirLTStd-Heavy.ttf and /dev/null differ diff --git a/assets/fonts/AvenirLTStd-Heavy.woff b/assets/fonts/AvenirLTStd-Heavy.woff deleted file mode 100644 index 771c45a1..00000000 Binary files a/assets/fonts/AvenirLTStd-Heavy.woff and /dev/null differ diff --git a/assets/fonts/AvenirLTStd-Heavy.woff2 b/assets/fonts/AvenirLTStd-Heavy.woff2 deleted file mode 100755 index b889b061..00000000 Binary files a/assets/fonts/AvenirLTStd-Heavy.woff2 and /dev/null differ diff --git a/assets/fonts/AvenirLTStd-Medium.ttf b/assets/fonts/AvenirLTStd-Medium.ttf deleted file mode 100644 index 73ec1e54..00000000 Binary files a/assets/fonts/AvenirLTStd-Medium.ttf and /dev/null differ diff --git a/assets/fonts/AvenirLTStd-Medium.woff b/assets/fonts/AvenirLTStd-Medium.woff deleted file mode 100644 index bc2a778e..00000000 Binary files a/assets/fonts/AvenirLTStd-Medium.woff and /dev/null differ diff --git a/assets/fonts/AvenirLTStd-Medium.woff2 b/assets/fonts/AvenirLTStd-Medium.woff2 deleted file mode 100755 index bcf4649b..00000000 Binary files a/assets/fonts/AvenirLTStd-Medium.woff2 and /dev/null differ diff --git a/assets/icons/bubble.svg b/assets/icons/bubble.svg deleted file mode 100755 index 7090121a..00000000 --- a/assets/icons/bubble.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/icons/collapse.svg b/assets/icons/collapse.svg deleted file mode 100644 index d41e0402..00000000 --- a/assets/icons/collapse.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - collapse - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/assets/icons/expand.svg b/assets/icons/expand.svg deleted file mode 100644 index 5fd651bd..00000000 --- a/assets/icons/expand.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - expand - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/assets/icons/fast-forward.svg b/assets/icons/fast-forward.svg deleted file mode 100755 index cc4ee6d1..00000000 --- a/assets/icons/fast-forward.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/icons/muted.svg b/assets/icons/muted.svg deleted file mode 100644 index 031da8d1..00000000 --- a/assets/icons/muted.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - muted - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/assets/icons/pause.svg b/assets/icons/pause.svg deleted file mode 100644 index ea2efe98..00000000 --- a/assets/icons/pause.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - pause - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/assets/icons/play.svg b/assets/icons/play.svg deleted file mode 100755 index ebe9ff57..00000000 --- a/assets/icons/play.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/icons/refresh.svg b/assets/icons/refresh.svg deleted file mode 100755 index 10ffb198..00000000 --- a/assets/icons/refresh.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/assets/icons/rewind.svg b/assets/icons/rewind.svg deleted file mode 100644 index 7be18d37..00000000 --- a/assets/icons/rewind.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - rewind - Created with Sketch. - - - - - \ No newline at end of file diff --git a/assets/icons/sound.svg b/assets/icons/sound.svg deleted file mode 100755 index 6c6ca54d..00000000 --- a/assets/icons/sound.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/assets/js/docs.js b/assets/js/docs.js deleted file mode 100644 index 89803ee2..00000000 --- a/assets/js/docs.js +++ /dev/null @@ -1,15 +0,0 @@ -// ========================================================================== -// Docs example -// ========================================================================== - -/*global plyr, templates */ - -// Setup the player -plyr.setup({ - debug: true, - title: "Video demo", - html: templates.controls.render({}), - captions: { - defaultActive: true - } -}); \ No newline at end of file diff --git a/assets/js/lib/hogan-3.0.2.mustache.js b/assets/js/lib/hogan-3.0.2.mustache.js deleted file mode 100644 index f1300c46..00000000 --- a/assets/js/lib/hogan-3.0.2.mustache.js +++ /dev/null @@ -1,802 +0,0 @@ -/*! - * Copyright 2011 Twitter, Inc. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// A wrapper for compatibility with Mustache.js, quirks and all - - - -var Hogan = {}; - -(function (Hogan) { - Hogan.Template = function (codeObj, text, compiler, options) { - codeObj = codeObj || {}; - this.r = codeObj.code || this.r; - this.c = compiler; - this.options = options || {}; - this.text = text || ''; - this.partials = codeObj.partials || {}; - this.subs = codeObj.subs || {}; - this.buf = ''; - } - - Hogan.Template.prototype = { - // render: replaced by generated code. - r: function (context, partials, indent) { return ''; }, - - // variable escaping - v: hoganEscape, - - // triple stache - t: coerceToString, - - render: function render(context, partials, indent) { - return this.ri([context], partials || {}, indent); - }, - - // render internal -- a hook for overrides that catches partials too - ri: function (context, partials, indent) { - return this.r(context, partials, indent); - }, - - // ensurePartial - ep: function(symbol, partials) { - var partial = this.partials[symbol]; - - // check to see that if we've instantiated this partial before - var template = partials[partial.name]; - if (partial.instance && partial.base == template) { - return partial.instance; - } - - if (typeof template == 'string') { - if (!this.c) { - throw new Error("No compiler available."); - } - template = this.c.compile(template, this.options); - } - - if (!template) { - return null; - } - - // We use this to check whether the partials dictionary has changed - this.partials[symbol].base = template; - - if (partial.subs) { - // Make sure we consider parent template now - if (!partials.stackText) partials.stackText = {}; - for (key in partial.subs) { - if (!partials.stackText[key]) { - partials.stackText[key] = (this.activeSub !== undefined && partials.stackText[this.activeSub]) ? partials.stackText[this.activeSub] : this.text; - } - } - template = createSpecializedPartial(template, partial.subs, partial.partials, - this.stackSubs, this.stackPartials, partials.stackText); - } - this.partials[symbol].instance = template; - - return template; - }, - - // tries to find a partial in the current scope and render it - rp: function(symbol, context, partials, indent) { - var partial = this.ep(symbol, partials); - if (!partial) { - return ''; - } - - return partial.ri(context, partials, indent); - }, - - // render a section - rs: function(context, partials, section) { - var tail = context[context.length - 1]; - - if (!isArray(tail)) { - section(context, partials, this); - return; - } - - for (var i = 0; i < tail.length; i++) { - context.push(tail[i]); - section(context, partials, this); - context.pop(); - } - }, - - // maybe start a section - s: function(val, ctx, partials, inverted, start, end, tags) { - var pass; - - if (isArray(val) && val.length === 0) { - return false; - } - - if (typeof val == 'function') { - val = this.ms(val, ctx, partials, inverted, start, end, tags); - } - - pass = !!val; - - if (!inverted && pass && ctx) { - ctx.push((typeof val == 'object') ? val : ctx[ctx.length - 1]); - } - - return pass; - }, - - // find values with dotted names - d: function(key, ctx, partials, returnFound) { - var found, - names = key.split('.'), - val = this.f(names[0], ctx, partials, returnFound), - doModelGet = this.options.modelGet, - cx = null; - - if (key === '.' && isArray(ctx[ctx.length - 2])) { - val = ctx[ctx.length - 1]; - } else { - for (var i = 1; i < names.length; i++) { - found = findInScope(names[i], val, doModelGet); - if (found !== undefined) { - cx = val; - val = found; - } else { - val = ''; - } - } - } - - if (returnFound && !val) { - return false; - } - - if (!returnFound && typeof val == 'function') { - ctx.push(cx); - val = this.mv(val, ctx, partials); - ctx.pop(); - } - - return val; - }, - - // find values with normal names - f: function(key, ctx, partials, returnFound) { - var val = false, - v = null, - found = false, - doModelGet = this.options.modelGet; - - for (var i = ctx.length - 1; i >= 0; i--) { - v = ctx[i]; - val = findInScope(key, v, doModelGet); - if (val !== undefined) { - found = true; - break; - } - } - - if (!found) { - return (returnFound) ? false : ""; - } - - if (!returnFound && typeof val == 'function') { - val = this.mv(val, ctx, partials); - } - - return val; - }, - - // higher order templates - ls: function(func, cx, partials, text, tags) { - var oldTags = this.options.delimiters; - - this.options.delimiters = tags; - this.b(this.ct(coerceToString(func.call(cx, text)), cx, partials)); - this.options.delimiters = oldTags; - - return false; - }, - - // compile text - ct: function(text, cx, partials) { - if (this.options.disableLambda) { - throw new Error('Lambda features disabled.'); - } - return this.c.compile(text, this.options).render(cx, partials); - }, - - // template result buffering - b: function(s) { this.buf += s; }, - - fl: function() { var r = this.buf; this.buf = ''; return r; }, - - // method replace section - ms: function(func, ctx, partials, inverted, start, end, tags) { - var textSource, - cx = ctx[ctx.length - 1], - result = func.call(cx); - - if (typeof result == 'function') { - if (inverted) { - return true; - } else { - textSource = (this.activeSub && this.subsText && this.subsText[this.activeSub]) ? this.subsText[this.activeSub] : this.text; - return this.ls(result, cx, partials, textSource.substring(start, end), tags); - } - } - - return result; - }, - - // method replace variable - mv: function(func, ctx, partials) { - var cx = ctx[ctx.length - 1]; - var result = func.call(cx); - - if (typeof result == 'function') { - return this.ct(coerceToString(result.call(cx)), cx, partials); - } - - return result; - }, - - sub: function(name, context, partials, indent) { - var f = this.subs[name]; - if (f) { - this.activeSub = name; - f(context, partials, this, indent); - this.activeSub = false; - } - } - - }; - - //Find a key in an object - function findInScope(key, scope, doModelGet) { - var val; - - if (scope && typeof scope == 'object') { - - if (scope[key] !== undefined) { - val = scope[key]; - - // try lookup with get for backbone or similar model data - } else if (doModelGet && scope.get && typeof scope.get == 'function') { - val = scope.get(key); - } - } - - return val; - } - - function createSpecializedPartial(instance, subs, partials, stackSubs, stackPartials, stackText) { - function PartialTemplate() {}; - PartialTemplate.prototype = instance; - function Substitutions() {}; - Substitutions.prototype = instance.subs; - var key; - var partial = new PartialTemplate(); - partial.subs = new Substitutions(); - partial.subsText = {}; //hehe. substext. - partial.buf = ''; - - stackSubs = stackSubs || {}; - partial.stackSubs = stackSubs; - partial.subsText = stackText; - for (key in subs) { - if (!stackSubs[key]) stackSubs[key] = subs[key]; - } - for (key in stackSubs) { - partial.subs[key] = stackSubs[key]; - } - - stackPartials = stackPartials || {}; - partial.stackPartials = stackPartials; - for (key in partials) { - if (!stackPartials[key]) stackPartials[key] = partials[key]; - } - for (key in stackPartials) { - partial.partials[key] = stackPartials[key]; - } - - return partial; - } - - var rAmp = /&/g, - rLt = //g, - rApos = /\'/g, - rQuot = /\"/g, - hChars = /[&<>\"\']/; - - function coerceToString(val) { - return String((val === null || val === undefined) ? '' : val); - } - - function hoganEscape(str) { - str = coerceToString(str); - return hChars.test(str) ? - str - .replace(rAmp, '&') - .replace(rLt, '<') - .replace(rGt, '>') - .replace(rApos, ''') - .replace(rQuot, '"') : - str; - } - - var isArray = Array.isArray || function(a) { - return Object.prototype.toString.call(a) === '[object Array]'; - }; - -})(typeof exports !== 'undefined' ? exports : Hogan); - - - -(function (Hogan) { - // Setup regex assignments - // remove whitespace according to Mustache spec - var rIsWhitespace = /\S/, - rQuot = /\"/g, - rNewline = /\n/g, - rCr = /\r/g, - rSlash = /\\/g, - rLineSep = /\u2028/, - rParagraphSep = /\u2029/; - - Hogan.tags = { - '#': 1, '^': 2, '<': 3, '$': 4, - '/': 5, '!': 6, '>': 7, '=': 8, '_v': 9, - '{': 10, '&': 11, '_t': 12 - }; - - Hogan.scan = function scan(text, delimiters) { - var len = text.length, - IN_TEXT = 0, - IN_TAG_TYPE = 1, - IN_TAG = 2, - state = IN_TEXT, - tagType = null, - tag = null, - buf = '', - tokens = [], - seenTag = false, - i = 0, - lineStart = 0, - otag = '{{', - ctag = '}}'; - - function addBuf() { - if (buf.length > 0) { - tokens.push({tag: '_t', text: new String(buf)}); - buf = ''; - } - } - - function lineIsWhitespace() { - var isAllWhitespace = true; - for (var j = lineStart; j < tokens.length; j++) { - isAllWhitespace = - (Hogan.tags[tokens[j].tag] < Hogan.tags['_v']) || - (tokens[j].tag == '_t' && tokens[j].text.match(rIsWhitespace) === null); - if (!isAllWhitespace) { - return false; - } - } - - return isAllWhitespace; - } - - function filterLine(haveSeenTag, noNewLine) { - addBuf(); - - if (haveSeenTag && lineIsWhitespace()) { - for (var j = lineStart, next; j < tokens.length; j++) { - if (tokens[j].text) { - if ((next = tokens[j+1]) && next.tag == '>') { - // set indent to token value - next.indent = tokens[j].text.toString() - } - tokens.splice(j, 1); - } - } - } else if (!noNewLine) { - tokens.push({tag:'\n'}); - } - - seenTag = false; - lineStart = tokens.length; - } - - function changeDelimiters(text, index) { - var close = '=' + ctag, - closeIndex = text.indexOf(close, index), - delimiters = trim( - text.substring(text.indexOf('=', index) + 1, closeIndex) - ).split(' '); - - otag = delimiters[0]; - ctag = delimiters[delimiters.length - 1]; - - return closeIndex + close.length - 1; - } - - if (delimiters) { - delimiters = delimiters.split(' '); - otag = delimiters[0]; - ctag = delimiters[1]; - } - - for (i = 0; i < len; i++) { - if (state == IN_TEXT) { - if (tagChange(otag, text, i)) { - --i; - addBuf(); - state = IN_TAG_TYPE; - } else { - if (text.charAt(i) == '\n') { - filterLine(seenTag); - } else { - buf += text.charAt(i); - } - } - } else if (state == IN_TAG_TYPE) { - i += otag.length - 1; - tag = Hogan.tags[text.charAt(i + 1)]; - tagType = tag ? text.charAt(i + 1) : '_v'; - if (tagType == '=') { - i = changeDelimiters(text, i); - state = IN_TEXT; - } else { - if (tag) { - i++; - } - state = IN_TAG; - } - seenTag = i; - } else { - if (tagChange(ctag, text, i)) { - tokens.push({tag: tagType, n: trim(buf), otag: otag, ctag: ctag, - i: (tagType == '/') ? seenTag - otag.length : i + ctag.length}); - buf = ''; - i += ctag.length - 1; - state = IN_TEXT; - if (tagType == '{') { - if (ctag == '}}') { - i++; - } else { - cleanTripleStache(tokens[tokens.length - 1]); - } - } - } else { - buf += text.charAt(i); - } - } - } - - filterLine(seenTag, true); - - return tokens; - } - - function cleanTripleStache(token) { - if (token.n.substr(token.n.length - 1) === '}') { - token.n = token.n.substring(0, token.n.length - 1); - } - } - - function trim(s) { - if (s.trim) { - return s.trim(); - } - - return s.replace(/^\s*|\s*$/g, ''); - } - - function tagChange(tag, text, index) { - if (text.charAt(index) != tag.charAt(0)) { - return false; - } - - for (var i = 1, l = tag.length; i < l; i++) { - if (text.charAt(index + i) != tag.charAt(i)) { - return false; - } - } - - return true; - } - - // the tags allowed inside super templates - var allowedInSuper = {'_t': true, '\n': true, '$': true, '/': true}; - - function buildTree(tokens, kind, stack, customTags) { - var instructions = [], - opener = null, - tail = null, - token = null; - - tail = stack[stack.length - 1]; - - while (tokens.length > 0) { - token = tokens.shift(); - - if (tail && tail.tag == '<' && !(token.tag in allowedInSuper)) { - throw new Error('Illegal content in < super tag.'); - } - - if (Hogan.tags[token.tag] <= Hogan.tags['$'] || isOpener(token, customTags)) { - stack.push(token); - token.nodes = buildTree(tokens, token.tag, stack, customTags); - } else if (token.tag == '/') { - if (stack.length === 0) { - throw new Error('Closing tag without opener: /' + token.n); - } - opener = stack.pop(); - if (token.n != opener.n && !isCloser(token.n, opener.n, customTags)) { - throw new Error('Nesting error: ' + opener.n + ' vs. ' + token.n); - } - opener.end = token.i; - return instructions; - } else if (token.tag == '\n') { - token.last = (tokens.length == 0) || (tokens[0].tag == '\n'); - } - - instructions.push(token); - } - - if (stack.length > 0) { - throw new Error('missing closing tag: ' + stack.pop().n); - } - - return instructions; - } - - function isOpener(token, tags) { - for (var i = 0, l = tags.length; i < l; i++) { - if (tags[i].o == token.n) { - token.tag = '#'; - return true; - } - } - } - - function isCloser(close, open, tags) { - for (var i = 0, l = tags.length; i < l; i++) { - if (tags[i].c == close && tags[i].o == open) { - return true; - } - } - } - - function stringifySubstitutions(obj) { - var items = []; - for (var key in obj) { - items.push('"' + esc(key) + '": function(c,p,t,i) {' + obj[key] + '}'); - } - return "{ " + items.join(",") + " }"; - } - - function stringifyPartials(codeObj) { - var partials = []; - for (var key in codeObj.partials) { - partials.push('"' + esc(key) + '":{name:"' + esc(codeObj.partials[key].name) + '", ' + stringifyPartials(codeObj.partials[key]) + "}"); - } - return "partials: {" + partials.join(",") + "}, subs: " + stringifySubstitutions(codeObj.subs); - } - - Hogan.stringify = function(codeObj, text, options) { - return "{code: function (c,p,i) { " + Hogan.wrapMain(codeObj.code) + " }," + stringifyPartials(codeObj) + "}"; - } - - var serialNo = 0; - Hogan.generate = function(tree, text, options) { - serialNo = 0; - var context = { code: '', subs: {}, partials: {} }; - Hogan.walk(tree, context); - - if (options.asString) { - return this.stringify(context, text, options); - } - - return this.makeTemplate(context, text, options); - } - - Hogan.wrapMain = function(code) { - return 'var t=this;t.b(i=i||"");' + code + 'return t.fl();'; - } - - Hogan.template = Hogan.Template; - - Hogan.makeTemplate = function(codeObj, text, options) { - var template = this.makePartials(codeObj); - template.code = new Function('c', 'p', 'i', this.wrapMain(codeObj.code)); - return new this.template(template, text, this, options); - } - - Hogan.makePartials = function(codeObj) { - var key, template = {subs: {}, partials: codeObj.partials, name: codeObj.name}; - for (key in template.partials) { - template.partials[key] = this.makePartials(template.partials[key]); - } - for (key in codeObj.subs) { - template.subs[key] = new Function('c', 'p', 't', 'i', codeObj.subs[key]); - } - return template; - } - - function esc(s) { - return s.replace(rSlash, '\\\\') - .replace(rQuot, '\\\"') - .replace(rNewline, '\\n') - .replace(rCr, '\\r') - .replace(rLineSep, '\\u2028') - .replace(rParagraphSep, '\\u2029'); - } - - function chooseMethod(s) { - return (~s.indexOf('.')) ? 'd' : 'f'; - } - - function createPartial(node, context) { - var prefix = "<" + (context.prefix || ""); - var sym = prefix + node.n + serialNo++; - context.partials[sym] = {name: node.n, partials: {}}; - context.code += 't.b(t.rp("' + esc(sym) + '",c,p,"' + (node.indent || '') + '"));'; - return sym; - } - - Hogan.codegen = { - '#': function(node, context) { - context.code += 'if(t.s(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,1),' + - 'c,p,0,' + node.i + ',' + node.end + ',"' + node.otag + " " + node.ctag + '")){' + - 't.rs(c,p,' + 'function(c,p,t){'; - Hogan.walk(node.nodes, context); - context.code += '});c.pop();}'; - }, - - '^': function(node, context) { - context.code += 'if(!t.s(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,1),c,p,1,0,0,"")){'; - Hogan.walk(node.nodes, context); - context.code += '};'; - }, - - '>': createPartial, - '<': function(node, context) { - var ctx = {partials: {}, code: '', subs: {}, inPartial: true}; - Hogan.walk(node.nodes, ctx); - var template = context.partials[createPartial(node, context)]; - template.subs = ctx.subs; - template.partials = ctx.partials; - }, - - '$': function(node, context) { - var ctx = {subs: {}, code: '', partials: context.partials, prefix: node.n}; - Hogan.walk(node.nodes, ctx); - context.subs[node.n] = ctx.code; - if (!context.inPartial) { - context.code += 't.sub("' + esc(node.n) + '",c,p,i);'; - } - }, - - '\n': function(node, context) { - context.code += write('"\\n"' + (node.last ? '' : ' + i')); - }, - - '_v': function(node, context) { - context.code += 't.b(t.v(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,0)));'; - }, - - '_t': function(node, context) { - context.code += write('"' + esc(node.text) + '"'); - }, - - '{': tripleStache, - - '&': tripleStache - } - - function tripleStache(node, context) { - context.code += 't.b(t.t(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,0)));'; - } - - function write(s) { - return 't.b(' + s + ');'; - } - - Hogan.walk = function(nodelist, context) { - var func; - for (var i = 0, l = nodelist.length; i < l; i++) { - func = Hogan.codegen[nodelist[i].tag]; - func && func(nodelist[i], context); - } - return context; - } - - Hogan.parse = function(tokens, text, options) { - options = options || {}; - return buildTree(tokens, '', [], options.sectionTags || []); - } - - Hogan.cache = {}; - - Hogan.cacheKey = function(text, options) { - return [text, !!options.asString, !!options.disableLambda, options.delimiters, !!options.modelGet].join('||'); - } - - Hogan.compile = function(text, options) { - options = options || {}; - var key = Hogan.cacheKey(text, options); - var template = this.cache[key]; - - if (template) { - var partials = template.partials; - for (var name in partials) { - delete partials[name].instance; - } - return template; - } - - template = this.generate(this.parse(this.scan(text, options.delimiters), text, options), text, options); - return this.cache[key] = template; - } -})(typeof exports !== 'undefined' ? exports : Hogan); - - -var Mustache = (function (Hogan) { - - // Mustache.js has non-spec partial context behavior - function mustachePartial(name, context, partials, indent) { - var partialScope = this.f(name, context, partials, 0); - var cx = context; - if (partialScope) { - cx = cx.concat(partialScope); - } - - return Hogan.Template.prototype.rp.call(this, name, cx, partials, indent); - } - - var HoganTemplateWrapper = function(renderFunc, text, compiler){ - this.rp = mustachePartial; - Hogan.Template.call(this, renderFunc, text, compiler); - }; - HoganTemplateWrapper.prototype = Hogan.Template.prototype; - - // Add a wrapper for Hogan's generate method. Mustache and Hogan keep - // separate caches, and Mustache returns wrapped templates. - var wrapper; - var HoganWrapper = function(){ - this.cache = {}; - this.generate = function(code, text, options) { - return new HoganTemplateWrapper(new Function('c', 'p', 'i', code), text, wrapper); - } - }; - HoganWrapper.prototype = Hogan; - wrapper = new HoganWrapper(); - - return { - to_html: function(text, data, partials, sendFun) { - var template = wrapper.compile(text); - var result = template.render(data, partials); - if (!sendFun) { - return result; - } - - sendFun(result); - } - } - -})(Hogan); diff --git a/assets/js/plyr.js b/assets/js/plyr.js deleted file mode 100644 index 18687d39..00000000 --- a/assets/js/plyr.js +++ /dev/null @@ -1,1123 +0,0 @@ -// ========================================================================== -// Plyr -// plyr.js v1.0.9 -// https://github.com/sampotts/plyr -// ========================================================================== -// Credits: http://paypal.github.io/accessible-html5-video-player/ -// ========================================================================== - -(function (api) { - "use strict"; - - // Globals - var fullscreen, config; - - // Default config - var defaults = { - enabled: true, - debug: false, - seekInterval: 10, - volume: 5, - click: true, - selectors: { - container: ".player", - controls: ".player-controls", - buttons: { - play: "[data-player='play']", - pause: "[data-player='pause']", - restart: "[data-player='restart']", - rewind: "[data-player='rewind']", - forward: "[data-player='fast-forward']", - mute: "[data-player='mute']", - volume: "[data-player='volume']", - captions: "[data-player='captions']", - fullscreen: "[data-player='fullscreen']" - }, - progress: { - container: ".player-progress", - buffer: ".player-progress-buffer", - played: ".player-progress-played" - }, - captions: ".player-captions", - duration: ".player-duration", - seekTime: ".player-seek-time" - }, - classes: { - video: "player-video", - videoWrapper: "player-video-wrapper", - audio: "player-audio", - stopped: "stopped", - playing: "playing", - muted: "muted", - captions: { - enabled: "captions-enabled", - active: "captions-active" - }, - fullscreen: { - enabled: "fullscreen-enabled", - active: "fullscreen-active" - } - }, - captions: { - defaultActive: false - }, - fullscreen: { - enabled: true, - fallback: true - }, - storage: { - enabled: true, - supported: function() { - try { - return "localStorage" in window && window.localStorage !== null; - } - catch(e) { - return false; - } - } - } - }; - - // Debugging - function _log(text, error) { - if(config.debug && window.console) { - console[(error ? "error" : "log")](text); - } - } - - // Credits: http://paypal.github.io/accessible-html5-video-player/ - // Unfortunately, due to scattered support, browser sniffing is required - function _browserSniff() { - var nAgt = navigator.userAgent, - browserName = navigator.appName, - fullVersion = ""+parseFloat(navigator.appVersion), - majorVersion = parseInt(navigator.appVersion,10), - nameOffset, - verOffset, - ix; - - // MSIE 11 - if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) { - browserName = "IE"; - fullVersion = "11;"; - } - // MSIE - else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) { - browserName = "IE"; - fullVersion = nAgt.substring(verOffset+5); - } - // Chrome - else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) { - browserName = "Chrome"; - fullVersion = nAgt.substring(verOffset+7); - } - // Safari - else if ((verOffset=nAgt.indexOf("Safari")) !== -1) { - browserName = "Safari"; - fullVersion = nAgt.substring(verOffset+7); - if ((verOffset=nAgt.indexOf("Version")) !== -1) { - fullVersion = nAgt.substring(verOffset+8); - } - } - // Firefox - else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) { - browserName = "Firefox"; - fullVersion = nAgt.substring(verOffset+8); - } - // In most other browsers, "name/version" is at the end of userAgent - else if ( (nameOffset=nAgt.lastIndexOf(" ")+1) < (verOffset=nAgt.lastIndexOf("/")) ) { - browserName = nAgt.substring(nameOffset,verOffset); - fullVersion = nAgt.substring(verOffset+1); - if (browserName.toLowerCase()==browserName.toUpperCase()) { - browserName = navigator.appName; - } - } - // Trim the fullVersion string at semicolon/space if present - if ((ix=fullVersion.indexOf(";")) !== -1) { - fullVersion=fullVersion.substring(0,ix); - } - if ((ix=fullVersion.indexOf(" ")) !== -1) { - fullVersion=fullVersion.substring(0,ix); - } - // Get major version - majorVersion = parseInt(""+fullVersion,10); - if (isNaN(majorVersion)) { - fullVersion = ""+parseFloat(navigator.appVersion); - majorVersion = parseInt(navigator.appVersion,10); - } - // Return data - return [browserName, majorVersion]; - } - - // Replace all - function _replaceAll(string, find, replace) { - return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); - } - - // Wrap an element - function _wrap(elements, wrapper) { - // Convert `elms` to an array, if necessary. - if (!elements.length) { - elements = [elements]; - } - - // Loops backwards to prevent having to clone the wrapper on the - // first element (see `child` below). - for (var i = elements.length - 1; i >= 0; i--) { - var child = (i > 0) ? wrapper.cloneNode(true) : wrapper; - var el = elements[i]; - - // Cache the current parent and sibling. - var parent = el.parentNode; - var sibling = el.nextSibling; - - // Wrap the element (is automatically removed from its current - // parent). - child.appendChild(el); - - // If the element had a sibling, insert the wrapper before - // the sibling to maintain the HTML structure; otherwise, just - // append it to the parent. - if (sibling) { - parent.insertBefore(child, sibling); - } else { - parent.appendChild(child); - } - } - } - - // Toggle class on an element - function _toggleClass(element, name, state) { - if(element){ - if(element.classList) { - element.classList[state ? "add" : "remove"](name); - } - else { - var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", ""); - element.className = className + (state ? " " + name : ""); - } - } - } - - // Bind event - function _on(element, event, callback) { - element.addEventListener(event, callback, false); - } - - // Unbind event - function _off(element, event, callback) { - element.removeEventListener(event, callback, false); - } - - // Get percentage - function _getPercentage(current, max) { - return Math.floor((current / max) * 100); - } - - // Get click position relative to parent - // http://www.kirupa.com/html5/getting_mouse_click_position.htm - function _getClickPosition(event) { - var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget); - - return { - x: event.clientX - parentPosition.x, - y: event.clientY - parentPosition.y - }; - } - // Get element position - 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 - }; - } - - // Deep extend/merge two Objects - // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ - // Removed call to arguments.callee (used explicit function name instead) - function _extend(destination, source) { - for (var property in source) { - if (source[property] && source[property].constructor && source[property].constructor === Object) { - destination[property] = destination[property] || {}; - _extend(destination[property], source[property]); - } - else { - destination[property] = source[property]; - } - } - return destination; - } - - // Fullscreen API - function _fullscreen() { - 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; - } - // Special case for MS (when isn't it?) - else if (typeof document.msExitFullscreen != "undefined" && document.msFullscreenEnabled) { - fullscreen.prefix = "ms"; - 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) { - // Yet again Microsoft awesomeness, - // Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes - fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange"); - - fullscreen.isFullScreen = function() { - switch (this.prefix) { - case "": - return document.fullScreen; - case "webkit": - return document.webkitIsFullScreen; - case "ms": - // Docs say document.msFullScreenElement returns undefined - // if no element is full screem but it returns null, cheers - // https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx - return (document.msFullscreenElement !== null); - default: - return document[this.prefix + "FullScreen"]; - } - }; - fullscreen.requestFullScreen = function(element) { - return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null); - }; - fullscreen.cancelFullScreen = function() { - return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")](); - }; - fullscreen.element = function() { - return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"]; - }; - } - - return fullscreen; - } - - // Player instance - function Plyr(container) { - var player = this; - player.container = container; - - // Captions functions - // Credits: http://paypal.github.io/accessible-html5-video-player/ - - // For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.) - function _adjustManualCaptions() { - player.subcount = 0; - while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) { - player.subcount++; - if (player.subcount > player.captions.length-1) { - player.subcount = player.captions.length-1; - break; - } - } - } - // Display captions container and button (for initialization) - function _showCaptions() { - _toggleClass(player.container, config.classes.captions.enabled, true); - - if (config.captions.defaultActive) { - _toggleClass(player.container, config.classes.captions.active, true); - player.buttons.captions.setAttribute("checked", "checked"); - } - } - // Utilities for caption time codes - function _timecodeMin(tc) { - var tcpair = []; - tcpair = tc.split(" --> "); - return _subTcSecs(tcpair[0]); - } - function _timecodeMax(tc) { - var tcpair = []; - tcpair = tc.split(" --> "); - return _subTcSecs(tcpair[1]); - } - function _subTcSecs(tc) { - if (tc === null || tc === undefined) { - return 0; - } - else { - var tc1 = [], - tc2 = [], - seconds; - tc1 = tc.split(","); - tc2 = tc1[0].split(":"); - seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); - return seconds; - } - } - - // Find all elements - function _getElements(selector) { - return player.container.querySelectorAll(selector); - } - - // Find a single element - function _getElement(selector) { - return _getElements(selector)[0]; - } - - // Determine if we're in an iframe - function _inFrame() { - try { - return window.self !== window.top; - } - catch (e) { - return true; - } - } - - // Insert controls - function _injectControls() { - // Insert custom video controls - _log("Injecting custom controls."); - - // Use specified html - // Need to do a default? - var html = config.html; - - // Replace aria label instances - html = _replaceAll(html, "{aria-label}", config.playAriaLabel); - - // Replace all id references - html = _replaceAll(html, "{id}", player.random); - - // Inject into the container - player.container.insertAdjacentHTML("beforeend", html); - } - - // Find the UI controls and store references - function _findElements() { - try { - player.controls = _getElement(config.selectors.controls); - - // Buttons - player.buttons = {}; - player.buttons.play = _getElement(config.selectors.buttons.play); - player.buttons.pause = _getElement(config.selectors.buttons.pause); - player.buttons.restart = _getElement(config.selectors.buttons.restart); - player.buttons.rewind = _getElement(config.selectors.buttons.rewind); - player.buttons.forward = _getElement(config.selectors.buttons.forward); - player.buttons.mute = _getElement(config.selectors.buttons.mute); - player.buttons.captions = _getElement(config.selectors.buttons.captions); - player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); - - // Progress - player.progress = {}; - player.progress.container = _getElement(config.selectors.progress.container); - - // Progress - Buffering - player.progress.buffer = {}; - player.progress.buffer.bar = _getElement(config.selectors.progress.buffer); - player.progress.buffer.text = player.progress.buffer.bar.getElementsByTagName("span")[0]; - - // Progress - Played - player.progress.played = {}; - player.progress.played.bar = _getElement(config.selectors.progress.played); - player.progress.played.text = player.progress.played.bar.getElementsByTagName("span")[0]; - - // Volume - player.volume = _getElement(config.selectors.buttons.volume); - - // Timing - player.duration = _getElement(config.selectors.duration); - player.seekTime = _getElements(config.selectors.seekTime); - - return true; - } - catch(e) { - _log("It looks like there's a problem with your controls html. Bailing.", true); - return false; - } - } - - // Setup media - function _setupMedia() { - player.media = player.container.querySelectorAll("audio, video")[0]; - - // If there's no media, bail - if(!player.media) { - _log("No audio or video element found!", true); - return false; - } - - // Remove native video controls - player.media.removeAttribute("controls"); - - // Set media type - player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio"); - - // Add type class - _toggleClass(player.container, config.classes[player.type], true); - - // If there's no autoplay attribute, assume the video is stopped and add state class - _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null)); - - // Inject the player wrapper - if(player.type === "video") { - // Create the wrapper div - var wrapper = document.createElement("div"); - wrapper.setAttribute("class", config.classes.videoWrapper); - - // Wrap the video in a container - _wrap(player.media, wrapper); - - // Cache the container - player.videoContainer = wrapper; - } - } - - // Setup captions - function _setupCaptions() { - if(player.type === "video") { - // Inject the container - player.videoContainer.insertAdjacentHTML("afterbegin", "
"); - - // Cache selector - player.captionsContainer = _getElement(config.selectors.captions); - - // Determine if HTML5 textTracks is supported - player.isTextTracks = false; - if (player.media.textTracks) { - player.isTextTracks = true; - } - - // Get URL of caption file if exists - var captionSrc = "", - kind, - children = player.media.childNodes; - - for (var i = 0; i < children.length; i++) { - if (children[i].nodeName.toLowerCase() === "track") { - kind = children[i].getAttribute("kind"); - if (kind === "captions") { - captionSrc = children[i].getAttribute("src"); - } - } - } - - // Record if caption file exists or not - player.captionExists = true; - if (captionSrc === "") { - player.captionExists = false; - _log("No caption track found."); - } - else { - _log("Caption track found; URI: " + captionSrc); - } - - // If no caption file exists, hide container for caption text - if (!player.captionExists) { - _toggleClass(player.container, config.classes.captions.enabled); - } - // If caption file exists, process captions - else { - // Turn off native caption rendering to avoid double captions - // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below - var tracks = player.media.textTracks; - for (var x=0; x < tracks.length; x++) { - tracks[x].mode = "hidden"; - } - - // Enable UI - _showCaptions(player); - - // If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported) - if ((player.browserName === "IE" && player.browserMajorVersion === 10) || - (player.browserName === "IE" && player.browserMajorVersion === 11) || - (player.browserName === "Firefox" && player.browserMajorVersion >= 31) || - (player.browserName === "Safari" && player.browserMajorVersion >= 7)) { - // Debugging - _log("Detected IE 10/11 or Firefox 31+ or Safari 7+."); - - // Set to false so skips to "manual" captioning - player.isTextTracks = false; - } - - // Rendering caption tracks - // Native support required - http://caniuse.com/webvtt - if (player.isTextTracks) { - _log("TextTracks supported."); - - for (var y=0; y < tracks.length; y++) { - var track = tracks[y]; - - if (track.kind === "captions") { - _on(track, "cuechange", function() { - if (this.activeCues[0]) { - if (this.activeCues[0].hasOwnProperty("text")) { - player.captionsContainer.innerHTML = this.activeCues[0].text; - } - } - }); - } - } - } - // Caption tracks not natively supported - else { - _log("TextTracks not supported so rendering captions manually."); - - // Render captions from array at appropriate time - player.currentCaption = ""; - player.subcount = 0; - player.captions = []; - - _on(player.media, "timeupdate", function() { - // Check if the next caption is in the current time range - if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) && - player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) { - player.currentCaption = player.captions[player.subcount][1]; - } - // Is there a next timecode? - if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && - player.subcount < (player.captions.length-1)) { - player.subcount++; - } - // Render the caption - player.captionsContainer.innerHTML = player.currentCaption; - }); - - if (captionSrc !== "") { - // Create XMLHttpRequest Object - var xhr = new XMLHttpRequest(); - - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - var records = [], - record, - req = xhr.responseText; - - records = req.split("\n\n"); - - for (var r=0; r < records.length; r++) { - record = records[r]; - player.captions[r] = []; - player.captions[r] = record.split("\n"); - } - - // Remove first element ("VTT") - player.captions.shift(); - - _log("Successfully loaded the caption file via AJAX."); - } - else { - _log("There was a problem loading the caption file via AJAX.", true); - } - } - } - - xhr.open("get", captionSrc, true); - - xhr.send(); - } - } - - // If Safari 7+, removing track from DOM [see "turn off native caption rendering" above] - if (player.browserName === "Safari" && player.browserMajorVersion >= 7) { - _log("Safari 7+ detected; removing track from DOM."); - - // Find all elements - tracks = player.media.getElementsByTagName("track"); - - // Loop through and remove one by one - for (var t=0; t < tracks.length; t++) { - player.media.removeChild(tracks[t]); - } - } - } - } - } - - // Setup seeking - function _setupSeeking() { - // Update number of seconds in rewind and fast forward buttons - player.seekTime[0].innerHTML = config.seekInterval; - player.seekTime[1].innerHTML = config.seekInterval; - } - - // Setup fullscreen - function _setupFullscreen() { - if(player.type === "video" && config.fullscreen.enabled) { - // Check for native support - var nativeSupport = fullscreen.supportsFullScreen; - - if(nativeSupport || (config.fullscreen.fallback && !_inFrame())) { - _log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled."); - - // Add styling hook - _toggleClass(player.container, config.classes.fullscreen.enabled, true); - } - else { - _log("Fullscreen not supported and fallback disabled."); - } - } - } - - // Play media - function _play() { - player.media.play(); - - _toggleClass(player.container, config.classes.stopped); - _toggleClass(player.container, config.classes.playing, true); - } - - // Pause media - function _pause() { - player.media.pause(); - - _toggleClass(player.container, config.classes.playing); - _toggleClass(player.container, config.classes.stopped, true); - } - - // Restart playback - function _restart() { - // Move to beginning - player.media.currentTime = 0; - - // Special handling for "manual" captions - if (!player.isTextTracks) { - player.subcount = 0; - } - - // Play and ensure the play button is in correct state - _play(); - } - - // Rewind - function _rewind(seekInterval) { - // Use default if needed - if(typeof seekInterval === "undefined") { - seekInterval = config.seekInterval; - } - - var targetTime = player.media.currentTime - seekInterval; - - if (targetTime < 0) { - player.media.currentTime = 0; - } - else { - player.media.currentTime = targetTime; - } - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); - } - } - - // Fast forward - function _forward(seekInterval) { - // Use default if needed - if(typeof seekInterval === "undefined") { - seekInterval = config.seekInterval; - } - - var targetTime = player.media.currentTime + seekInterval; - - if (targetTime > player.media.duration) { - player.media.currentTime = player.media.duration; - } - else { - player.media.currentTime = targetTime; - } - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); - } - } - - // Toggle fullscreen - function _toggleFullscreen() { - // Check for native support - var nativeSupport = fullscreen.supportsFullScreen; - - // If it's a fullscreen change event, it's probably a native close - if(event.type === fullscreen.fullScreenEventName) { - config.fullscreen.active = fullscreen.isFullScreen(); - } - // If there's native support, use it - else if(nativeSupport) { - // Request fullscreen - if(!fullscreen.isFullScreen()) { - fullscreen.requestFullScreen(player.container); - } - // Bail from fullscreen - else { - fullscreen.cancelFullScreen(); - } - - // Check if we're actually full screen (it could fail) - config.fullscreen.active = fullscreen.isFullScreen(); - } - else { - // Otherwise, it's a simple toggle - config.fullscreen.active = !config.fullscreen.active; - - // Bind/unbind escape key - if(config.fullscreen.active) { - _on(document, "keyup", _handleEscapeFullscreen); - document.body.style.overflow = "hidden"; - } - else { - _off(document, "keyup", _handleEscapeFullscreen); - document.body.style.overflow = ""; - } - } - - // Set class hook - _toggleClass(player.container, config.classes.fullscreen.active, config.fullscreen.active); - } - - // Bail from faux-fullscreen - function _handleEscapeFullscreen(event) { - // If it's a keypress and not escape, bail - if((event.which || event.charCode || event.keyCode) === 27 && config.fullscreen.active) { - _toggleFullscreen(); - } - } - - // Set volume - function _setVolume(volume) { - // Use default if needed - if(typeof volume === "undefined") { - if(config.storage.enabled && config.storage.supported) { - volume = window.localStorage.plyr_volume || config.volume; - } - else { - volume = config.volume; - } - } - // Maximum is 10 - if(volume > 10) { - volume = 10; - } - - player.volume.value = volume; - player.media.volume = parseFloat(volume / 10); - _checkMute(); - - // Store the volume in storage - if(config.storage.enabled && config.storage.supported) { - window.localStorage.plyr_volume = volume; - } - } - - // Mute - function _toggleMute(muted) { - // If the method is called without parameter, toggle based on current value - if(typeof active === "undefined") { - muted = !player.media.muted; - player.buttons.mute.checked = muted; - } - - player.media.muted = muted; - _checkMute(); - } - - // Toggle captions - function _toggleCaptions(active) { - // If the method is called without parameter, toggle based on current value - if(typeof active === "undefined") { - active = (player.container.className.indexOf(config.classes.captions.active) === -1); - player.buttons.captions.checked = active; - } - - if (active) { - _toggleClass(player.container, config.classes.captions.active, true); - } - else { - _toggleClass(player.container, config.classes.captions.active); - } - } - - // Check mute state - function _checkMute() { - _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted)); - } - - // Update elements - function _updateProgress(event) { - var progress, text, value = 0; - - switch(event.type) { - // Video playing - case "timeupdate": - progress = player.progress.played.bar; - text = player.progress.played.text; - value = _getPercentage(player.media.currentTime, player.media.duration); - break; - - // Check buffer status - case "playing": - case "progress": - progress = player.progress.buffer.bar; - text = player.progress.buffer.text; - value = (function() { - var buffered = player.media.buffered; - - if(buffered.length) { - return _getPercentage(buffered.end(0), player.media.duration); - } - - return 0; - })(); - break; - } - - if (progress && value > 0) { - progress.value = value; - text.innerHTML = value; - } - } - - // Update the displayed play time - function _updateTimeDisplay() { - player.secs = parseInt(player.media.currentTime % 60); - player.mins = parseInt((player.media.currentTime / 60) % 60); - - // Ensure it"s two digits. For example, 03 rather than 3. - player.secs = ("0" + player.secs).slice(-2); - player.mins = ("0" + player.mins).slice(-2); - - // Render - player.duration.innerHTML = player.mins + ":" + player.secs; - } - - // Listen for events - function _listeners() { - // Play - _on(player.buttons.play, "click", function() { - _play(); - player.buttons.pause.focus(); - }); - - // Pause - _on(player.buttons.pause, "click", function() { - _pause(); - player.buttons.play.focus(); - }); - - // Restart - _on(player.buttons.restart, "click", _restart); - - // Rewind - _on(player.buttons.rewind, "click", function() { - _rewind(config.seekInterval); - }); - - // Fast forward - _on(player.buttons.forward, "click", function() { - _forward(config.seekInterval); - }); - - // Get the HTML5 range input element and append audio volume adjustment on change - _on(player.volume, "change", function() { - _setVolume(this.value); - }); - - // Mute - _on(player.buttons.mute, "change", function() { - _toggleMute(this.checked); - }); - - // Fullscreen - _on(player.buttons.fullscreen, "click", _toggleFullscreen); - - // Handle user exiting fullscreen by escaping etc - _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); - - // Click video - if(player.type === "video" && config.click) { - _on(player.videoContainer, "click", function() { - if(player.media.paused) { - _play(); - } - else if(player.media.ended) { - _restart(); - } - else { - _pause(); - } - }); - } - - // Duration - _on(player.media, "timeupdate", _updateTimeDisplay); - - // Playing progress - _on(player.media, "timeupdate", _updateProgress); - - // Skip when clicking progress bar - _on(player.progress.played.bar, "click", function(event) { - player.pos = _getClickPosition(event).x / this.offsetWidth; - player.media.currentTime = player.pos * player.media.duration; - - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); - } - }); - - // Captions - _on(player.buttons.captions, "click", function() { - _toggleCaptions(this.checked); - }); - - // Clear captions at end of video - _on(player.media, "ended", function() { - if(player.type === "video") { - player.captionsContainer.innerHTML = ""; - } - _toggleClass(player.container, config.classes.stopped, true); - _toggleClass(player.container, config.classes.playing); - }); - - // Check for buffer progress - _on(player.media, "progress", _updateProgress); - // Also check on start of playing - _on(player.media, "playing", _updateProgress); - } - - function _init() { - // Setup the fullscreen api - fullscreen = _fullscreen(); - - // Sniff - player.browserInfo = _browserSniff(); - player.browserName = player.browserInfo[0]; - player.browserMajorVersion = player.browserInfo[1]; - - // Debug info - _log(player.browserName + " " + player.browserMajorVersion); - - // If IE8, stop customization (use fallback) - // If IE9, stop customization (use native controls) - if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) { - _log("Browser not suppported.", true); - return false; - } - - // Set up aria-label for Play button with the title option - if (typeof(config.title) === "undefined" || !config.title.length) { - config.playAriaLabel = "Play"; - } - else { - config.playAriaLabel = "Play " + config.title; - } - - // Setup media - _setupMedia(); - - // Generate random number for id/for attribute values for controls - player.random = Math.floor(Math.random() * (10000)); - - // Inject custom controls - _injectControls(); - - // Find the elements - if(!_findElements()) { - return false; - } - - // Captions - _setupCaptions(); - - // Set volume - _setVolume(); - - // Setup fullscreen - _setupFullscreen(); - - // Seeking - _setupSeeking(); - - // Listeners - _listeners(); - } - - _init(); - - return { - media: player.media, - play: _play, - pause: _pause, - restart: _restart, - rewind: _rewind, - forward: _forward, - setVolume: _setVolume, - toggleMute: _toggleMute, - toggleCaptions: _toggleCaptions - } - } - - // Expose setup function - api.setup = function(options){ - // Extend the default options with user specified - config = _extend(defaults, options); - - // If enabled carry on - // You may want to disable certain UAs etc - if(!config.enabled) { - return false; - } - - // Get the players - var elements = document.querySelectorAll(config.selectors.container), players = []; - - // Create a player instance for each element - for (var i = elements.length - 1; i >= 0; i--) { - // Get the current element - var element = elements[i]; - - // Setup a player instance and add to the element - if(typeof element.plyr === "undefined") { - element.plyr = new Plyr(element); - } - - // Add to return array - players.push(element.plyr); - } - - return players; - } -}(this.plyr = this.plyr || {})); \ No newline at end of file diff --git a/assets/less/docs.less b/assets/less/docs.less deleted file mode 100644 index 4c8baa50..00000000 --- a/assets/less/docs.less +++ /dev/null @@ -1,141 +0,0 @@ -// ========================================================================== -// HTML5 Video Player Demo Page -// ========================================================================== - -// Reset -@import "docs/normalize.less"; -// Mixins -@import "docs/mixins.less"; - -// Variables -// --------------------------------------- -// Colors -@blue: #3498DB; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; - -// Elements -@link-color: @blue; -@padding-base: 20px; - -// Breakpoints -@screen-md: 768px; - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Base -html { - //font-size: 62.5%; -} -body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: #fff; - //.font-size(16); - line-height: 1.5; - text-align: center; - color: #6D797F; -} - -// Type -h1, -h2 { - letter-spacing: -.025em; - color: #2E3C44; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - .font-smoothing(); -} -h1 { - .font-size(64); - color: #3498DB; -} -p, -small { - margin: 0 0 @padding-base; -} -small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(14); -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: 560px) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} - -// Sections -section { - padding-bottom: @padding-base; - - @media (min-width: 560px) { - padding-bottom: (@padding-base * 2); - } -} - -// Links & Buttons -a { - text-decoration: none; - color: @link-color; - border-bottom: 1px solid currentColor; - transition: all .3s ease; - - &:hover, - &:focus { - color: #000; - } - &:focus { - .tab-focus(); - } -} -.btn { - display: inline-block; - padding: (@padding-base / 2) (@padding-base * 1.5); - background: @link-color; - border: 0; - color: #fff; - .font-smoothing(on); - font-weight: 600; - border-radius: 3px; - - &:hover, - &:focus { - color: #fff; - background: darken(@link-color, 5%); - } -} - -// Players -.example-audio .player { - max-width: 480px; -} -.example-video .player { - max-width: 1200px; -} -.example-audio .player, -.example-video .player { - margin: 0 auto @padding-base; - - &-fullscreen, - &.fullscreen-active { - max-width: none; - } -} - -// Fonts -// Last to not block rendering -@import "docs/fontface.less"; \ No newline at end of file diff --git a/assets/less/docs/fontface.less b/assets/less/docs/fontface.less deleted file mode 100644 index d4df4756..00000000 --- a/assets/less/docs/fontface.less +++ /dev/null @@ -1,16 +0,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; -} \ No newline at end of file diff --git a/assets/less/docs/mixins.less b/assets/less/docs/mixins.less deleted file mode 100644 index b3a1f63b..00000000 --- a/assets/less/docs/mixins.less +++ /dev/null @@ -1,42 +0,0 @@ -// ========================================================================== -// Mixins -// ========================================================================== - -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ -// --------------------------------------- -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } -} - -// Webkit-style focus -// --------------------------------------- -.tab-focus() { - // Default - outline: thin dotted @gray-dark; - // Webkit - //outline: 5px auto -webkit-focus-ring-color; - outline-offset: 1px; -} - -// Use rems for font sizing -// Leave at 100%/16px -// --------------------------------------- -.font-size(@font-size: 16){ - @rem: round((@font-size / 16), 1); - font-size: (@font-size * 1px); - font-size: ~"@{rem}rem"; -} - -// Font smoothing -// --------------------------------------- -.font-smoothing(@mode: on) when (@mode = on) { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} -.font-smoothing(@mode: on) when (@mode = off) { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; -} \ No newline at end of file diff --git a/assets/less/docs/normalize.less b/assets/less/docs/normalize.less deleted file mode 100644 index 562891ab..00000000 --- a/assets/less/docs/normalize.less +++ /dev/null @@ -1,406 +0,0 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background: transparent; -} - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre-wrap; -} - -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/assets/less/plyr.less b/assets/less/plyr.less deleted file mode 100644 index c1facb67..00000000 --- a/assets/less/plyr.less +++ /dev/null @@ -1,431 +0,0 @@ -// ========================================================================== -// HTML5 Media Player -// ========================================================================== - -// Variables -// ------------------------------- -// Colors -@blue: #3498DB; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; - -// Controls -@controls-bg: @gray-dark; -@control-color: @gray-light; -@control-color-active: @blue; -@control-color-inactive: @gray; -@control-spacing: 10px; - -// Progress -@progress-bg: lighten(@gray, 10%); -@progress-playing-bg: @blue; -@progress-buffered-bg: @gray; - -// Range -@range-track-height: 6px; -@range-track-bg: @gray; -@range-thumb-height: (@range-track-height * 2); -@range-thumb-width: (@range-track-height * 2); -@range-thumb-bg: @control-color; -@range-thumb-bg-focus: @control-color-active; - -// Breakpoints -@bp-control-split: 560px; // When controls split into left/right -@bg-captions-large: 768px; // When captions jump to the larger font size - -// Utility classes & mixins -// ------------------------------- -// Screen reader only -.sr-only { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; -} -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } -} - -// Tab focus styles -.tab-focus() { - outline: thin dotted #000; - outline-offset: 1px; -} - -// Range styling -// --------------------------------------- -.range-thumb() { - height: @range-thumb-height; - width: @range-thumb-width; - background: @range-thumb-bg; - border: 0; - border-radius: (@range-thumb-height / 2); - transition: background .3s ease; - cursor: ew-resize; -} -.range-track() { - height: @range-track-height; - background: @range-track-bg; - border: 0; - border-radius: (@range-track-height / 2); -} - -// 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; - max-width: 100%; - min-width: 290px; - overflow: hidden; // For the controls - - // border-box everything - // http://paulirish.com/2012/box-sizing-border-box-ftw/ - &, - *, - *::after, - *::before { - box-sizing: border-box; - } - - // For video - &-video-wrapper { - position: relative; - } - video { - width: 100%; - height: auto; - vertical-align: middle; - } - - // Captions - &-captions { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 20px; - min-height: 2.5em; - color: #fff; - font-size: 16px; - font-weight: 600; - text-shadow: - -1px -1px 0 @gray, - 1px -1px 0 @gray, - -1px 1px 0 @gray, - 1px 1px 0 @gray; - text-align: center; - .font-smoothing(); - - @media (min-width: @bg-captions-large) { - font-size: 24px; - } - } - &.captions-active &-captions { - display: block; - } - - // Player controls - &-controls { - .clearfix(); - .font-smoothing(); - position: relative; - padding: (@control-spacing * 2) @control-spacing @control-spacing; - background: @controls-bg; - line-height: 1; - text-align: center; - - // Layout - &-sound { - display: block; - margin: @control-spacing auto 0; - } - @media (min-width: @bp-control-split) { - &-playback { - float: left; - } - &-sound { - float: right; - margin-top: 0; - } - } - - input + label, - button { - display: inline-block; - vertical-align: middle; - margin: 0 2px; - padding: (@control-spacing / 2) @control-spacing; - - transition: background .3s ease; - border-radius: 3px; - cursor: pointer; - - svg { - width: 18px; - height: 18px; - display: block; - fill: currentColor; - transition: fill .3s ease; - } - } - input + label, - 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; - } - input:focus + label, - button:focus { - .tab-focus(); - color: #fff; - } - button:hover, - input + label:hover { - background: @control-color-active; - color: #fff; - } - .icon-exit-fullscreen, - .icon-muted { - display: none; - } - .player-time { - display: inline-block; - vertical-align: middle; - margin-left: @control-spacing; - color: #fff; - font-weight: 600; - font-size: 14px; - .font-smoothing(); - } - } - - // Player progress - // element - &-progress { - position: absolute; - top: 0; - left: 0; - right: 0; - width: 100%; - height: @control-spacing; - background: @progress-bg; - - &-buffer, - &-played { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - margin: 0; - vertical-align: top; - - &[value] { - -webkit-appearance: none; - border: none; - background: transparent; - - - &::-webkit-progress-bar { - background: transparent; - } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - transition: width .1s ease; - } - &::-moz-progress-bar { - background: currentColor; - transition: width .1s ease; - } - } - } - &-played { - z-index: 2; - } - &-played[value] { - cursor: pointer; - color: @progress-playing-bg; - } - &-buffer[value] { - color: @progress-buffered-bg; - } - } - - // States - &-controls [data-player='pause'], - &.playing .player-controls [data-player='play'] { - display: none; - } - &.playing .player-controls [data-player='pause'] { - display: inline-block; - } - - // Muted - &.muted .player-controls .icon-muted { - display: block; - - & + svg { - display: none; - } - } - - // Volume control - // element - &-volume { - vertical-align: middle; - -webkit-appearance: none; - -moz-appearance: none; - //height: 6px; - width: 100px; - margin: 0 @control-spacing 0 0; - padding: 0; - cursor: pointer; - background: none; - - // Webkit - &::-webkit-slider-runnable-track { - .range-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -((@range-thumb-height - @range-track-height) / 2); - .range-thumb(); - } - - // Mozilla - &::-moz-range-track { - .range-track(); - } - &::-moz-range-thumb { - .range-thumb(); - } - - // Microsoft - &::-ms-track { - height: @range-track-height; - background: transparent; - border-color: transparent; - border-width: ((@range-thumb-height - @range-track-height) / 2) 0; - color: transparent; - } - &::-ms-fill-lower, - &::-ms-fill-upper { - .range-track(); - } - &::-ms-thumb { - .range-thumb(); - } - - &:focus { - outline: 0; - - &::-webkit-slider-thumb { - background: @range-thumb-bg-focus; - } - &::-moz-range-thumb { - background: @range-thumb-bg-focus; - } - &::-ms-thumb { - background: @range-thumb-bg-focus; - } - } - } - - // Full screen mode - &-fullscreen, - &.fullscreen-active { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 10000000; - - .player-video-wrapper { - height: 100%; - width: 100%; - - video { - height: 100%; - } - .player-captions { - top: auto; - bottom: 90px; - - @media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) { - bottom: 60px; - } - @media (min-width: @bg-captions-large) { - bottom: 80px; - } - } - } - .player-controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - - .icon-exit-fullscreen { - display: block; - - & + svg { - display: none; - } - } - } - } - - // Some options are hidden by default - [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { - display: none; - } - &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { - display: inline-block; - } - - // Full browser view hides toggle - &-fullscreen [data-player='fullscreen'], - &-fullscreen [data-player='fullscreen'] + label { - display: none !important; - } -} \ No newline at end of file diff --git a/assets/templates/controls.html b/assets/templates/controls.html deleted file mode 100644 index 3ae8d8c4..00000000 --- a/assets/templates/controls.html +++ /dev/null @@ -1,59 +0,0 @@ -
-
- - 0% played - - - 0% buffered - -
- - - - - - - - Time - 00:00 - - - - - - - - - - - - - - -
\ No newline at end of file diff --git a/bower.json b/bower.json index 7262919a..80104705 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,6 @@ { "name": "plyr", + "version": "1.0.10", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "keywords": [ @@ -14,7 +15,10 @@ "dependencies": {}, "main": [ "dist/css/plyr.css", - "dist/js/plyr.js" + "dist/js/plyr.js", + "dist/sprite.svg", + "src/less/plyr.less", + "src/js/plyr.js" ], "ignore": [ "node_modules", diff --git a/bundles.json b/bundles.json index e654fee0..ab92813c 100644 --- a/bundles.json +++ b/bundles.json @@ -1,14 +1,14 @@ { "less": { - "plyr.css": ["assets/less/plyr.less"], - "docs.css": ["assets/less/docs.less"] + "plyr.css": ["src/less/plyr.less"], + "docs.css": ["src/less/docs.less"] }, "js": { - "plyr.js": ["assets/js/plyr.js"], + "plyr.js": ["src/js/plyr.js"], "docs.js": [ - "assets/js/lib/hogan-3.0.2.mustache.js", + "src/js/lib/hogan-3.0.2.mustache.js", "dist/js/templates.js", - "assets/js/docs.js" + "src/js/docs.js" ] } } \ No newline at end of file diff --git a/dist/js/plyr.js b/dist/js/plyr.js index bb3b648c..41694ad0 100644 --- a/dist/js/plyr.js +++ b/dist/js/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(e,t){b.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,r=navigator.userAgent,a=navigator.appName,s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",s="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",s=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",s=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",s=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(s=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",s=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),s=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=s.indexOf(";"))&&(s=s.substring(0,n)),-1!==(n=s.indexOf(" "))&&(s=s.substring(0,n)),o=parseInt(""+s,10),isNaN(o)&&(s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),[a,o]}function r(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function a(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function s(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function o(e,t,n){e.addEventListener(t,n,!1)}function i(e,t,n){e.removeEventListener(t,n,!1)}function c(e,t){return Math.floor(e/t*100)}function l(e){var t=d().isFullScreen()?{x:0,y:0}:u(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function u(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function p(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},p(e[n],t[n])):e[n]=t[n];return e}function d(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;case"ms":return null!==document.msFullscreenElement;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function f(e){function u(){for(_.subcount=0;v(_.captions[_.subcount][0])<_.media.currentTime.toFixed(1);)if(_.subcount++,_.subcount>_.captions.length-1){_.subcount=_.captions.length-1;break}}function p(){s(_.container,b.classes.captions.enabled,!0),b.captions.defaultActive&&(s(_.container,b.classes.captions.active,!0),_.buttons.captions.setAttribute("checked","checked"))}function f(e){var t=[];return t=e.split(" --> "),g(t[0])}function v(e){var t=[];return t=e.split(" --> "),g(t[1])}function g(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function y(e){return _.container.querySelectorAll(e)}function h(e){return y(e)[0]}function x(){try{return window.self!==window.top}catch(e){return!0}}function k(){t("Injecting custom controls");var e=b.html;e=r(e,"{aria-label}",b.playAriaLabel),e=r(e,"{id}",_.random),_.container.insertAdjacentHTML("beforeend",e)}function w(){try{return _.controls=h(b.selectors.controls),_.buttons={},_.buttons.play=h(b.selectors.buttons.play),_.buttons.pause=h(b.selectors.buttons.pause),_.buttons.restart=h(b.selectors.buttons.restart),_.buttons.rewind=h(b.selectors.buttons.rewind),_.buttons.forward=h(b.selectors.buttons.forward),_.buttons.mute=h(b.selectors.buttons.mute),_.buttons.captions=h(b.selectors.buttons.captions),_.buttons.fullscreen=h(b.selectors.buttons.fullscreen),_.progress={},_.progress.container=h(b.selectors.progress.container),_.progress.buffer={},_.progress.buffer.bar=h(b.selectors.progress.buffer),_.progress.buffer.text=_.progress.buffer.bar.getElementsByTagName("span")[0],_.progress.played={},_.progress.played.bar=h(b.selectors.progress.played),_.progress.played.text=_.progress.played.bar.getElementsByTagName("span")[0],_.volume=h(b.selectors.buttons.volume),_.duration=h(b.selectors.duration),_.seekTime=y(b.selectors.seekTime),!0}catch(e){return t("It looks like there's a problem with your controls html. Bailing.",!0),!1}}function T(){if(_.media=_.container.querySelectorAll("audio, video")[0],!_.media)return t("No audio or video element found!",!0),!1;if(_.media.removeAttribute("controls"),_.type="video"==_.media.tagName.toLowerCase()?"video":"audio",s(_.container,b.classes[_.type],!0),s(_.container,b.classes.stopped,null===_.media.getAttribute("autoplay")),"video"===_.type){var e=document.createElement("div");e.setAttribute("class",b.classes.videoWrapper),a(_.media,e),_.videoContainer=e}}function S(){if("video"===_.type){_.videoContainer.insertAdjacentHTML("afterbegin","
"),_.captionsContainer=h(b.selectors.captions),_.isTextTracks=!1,_.media.textTracks&&(_.isTextTracks=!0);for(var e,n="",r=_.media.childNodes,a=0;a=31||"Safari"===_.browserName&&_.browserMajorVersion>=7)&&(t("Detected IE 10/11 or Firefox 31+ or Safari 7+"),_.isTextTracks=!1),_.isTextTracks){t("textTracks supported");for(var l=0;lf(_.captions[_.subcount][0])&&_.media.currentTime.toFixed(1)v(_.captions[_.subcount][0])&&_.subcount<_.captions.length-1&&_.subcount++,_.captionsContainer.innerHTML=_.currentCaption}),""!==n){var d=new XMLHttpRequest;d.onreadystatechange=function(){if(4===d.readyState)if(200===d.status){var e,n=[],r=d.responseText;n=r.split("\n\n");for(var a=0;a=7){t("Safari 7+ detected; removing track from DOM"),i=_.media.getElementsByTagName("track");for(var m=0;mt?0:t,_.isTextTracks||"video"!==_.type||u(_)}function L(e){"undefined"==typeof e&&(e=b.seekInterval);var t=_.media.currentTime+e;_.media.currentTime=t>_.media.duration?_.media.duration:t,_.isTextTracks||"video"!==_.type||u(_)}function A(){var e=m.supportsFullScreen;event.type===m.fullScreenEventName?b.fullscreen.active=m.isFullScreen():e?(m.isFullScreen()?m.cancelFullScreen():m.requestFullScreen(_.container),b.fullscreen.active=m.isFullScreen()):(b.fullscreen.active=!b.fullscreen.active,b.fullscreen.active?(o(document,"keyup",V),document.body.style.overflow="hidden"):(i(document,"keyup",V),document.body.style.overflow="")),s(_.container,b.classes.fullscreen.active,b.fullscreen.active)}function V(e){27===(e.which||e.charCode||e.keyCode)&&b.fullscreen.active&&A()}function O(e){"undefined"==typeof e&&(e=b.storage.enabled&&b.storage.supported?window.localStorage.plyr_volume||b.volume:b.volume),e>10&&(e=10),_.volume.value=e,_.media.volume=parseFloat(e/10),H(),b.storage.enabled&&b.storage.supported&&(window.localStorage.plyr_volume=e)}function j(e){"undefined"==typeof active&&(e=!_.media.muted,_.buttons.mute.checked=e),_.media.muted=e,H()}function q(e){"undefined"==typeof e&&(e=-1===_.container.className.indexOf(b.classes.captions.active),_.buttons.captions.checked=e),e?s(_.container,b.classes.captions.active,!0):s(_.container,b.classes.captions.active)}function H(){s(_.container,b.classes.muted,0===_.media.volume||_.media.muted)}function B(e){var t,n,r=0;switch(e.type){case"timeupdate":t=_.progress.played.bar,n=_.progress.played.text,r=c(_.media.currentTime,_.media.duration);break;case"playing":case"progress":t=_.progress.buffer.bar,n=_.progress.buffer.text,r=function(){var e=_.media.buffered;return e.length?c(e.end(0),_.media.duration):0}()}t&&r>0&&(t.value=r,n.innerHTML=r)}function R(){_.secs=parseInt(_.media.currentTime%60),_.mins=parseInt(_.media.currentTime/60%60),_.secs=("0"+_.secs).slice(-2),_.mins=("0"+_.mins).slice(-2),_.duration.innerHTML=_.mins+":"+_.secs}function P(){o(_.buttons.play,"click",function(){C(),_.buttons.pause.focus()}),o(_.buttons.pause,"click",function(){I(),_.buttons.play.focus()}),o(_.buttons.restart,"click",M),o(_.buttons.rewind,"click",function(){E(b.seekInterval)}),o(_.buttons.forward,"click",function(){L(b.seekInterval)}),o(_.volume,"change",function(){O(this.value)}),o(_.buttons.mute,"change",function(){j(this.checked)}),o(_.buttons.fullscreen,"click",A),o(document,m.fullScreenEventName,A),"video"===_.type&&b.click&&o(_.videoContainer,"click",function(){_.media.paused?C():_.media.ended?M():I()}),o(_.media,"timeupdate",R),o(_.media,"timeupdate",B),o(_.progress.played.bar,"click",function(e){_.pos=l(e).x/this.offsetWidth,_.media.currentTime=_.pos*_.media.duration,_.isTextTracks||"video"!==_.type||u(_)}),o(_.buttons.captions,"click",function(){q(this.checked)}),o(_.media,"ended",function(){"video"===_.type&&(_.captionsContainer.innerHTML=""),s(_.container,b.classes.stopped,!0),s(_.container,b.classes.playing)}),o(_.media,"loadstart",function(){t("loadstart")}),o(_.media,"progress",B),o(_.media,"playing",B)}function W(){return m=d(),_.browserInfo=n(),_.browserName=_.browserInfo[0],_.browserMajorVersion=_.browserInfo[1],t(_.browserName+" "+_.browserMajorVersion),"IE"!==_.browserName||8!==_.browserMajorVersion&&9!==_.browserMajorVersion?(b.playAriaLabel="undefined"!=typeof b.title&&b.title.length?"Play "+b.title:"Play",T(),_.random=Math.floor(1e4*Math.random()),k(),w()?(S(),O(),N(),F(),P(),void 0):!1):(t("Browser not suppported.",!0),!1)}var _=this;return _.container=e,W(),{media:_.media,play:C,pause:I,restart:M,rewind:E,forward:L,setVolume:O,toggleMute:j,toggleCaptions:q}}var m,b,v={enabled:!0,debug:!1,seekInterval:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{video:"player-video",videoWrapper:"player-video-wrapper",audio:"player-audio",stopped:"stopped",playing:"playing",muted:"muted",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0,supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}}};e.setup=function(e){if(b=p(v,e),!b.enabled)return!1;for(var t=document.querySelectorAll(b.selectors.container),n=[],r=t.length-1;r>=0;r--){var a=t[r];"undefined"==typeof a.plyr&&(a.plyr=new f(a)),n.push(a.plyr)}return n}}(this.plyr=this.plyr||{}); \ No newline at end of file +!function(e){"use strict";function t(e,t){b.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,r=navigator.userAgent,s=navigator.appName,a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(s="IE",a="11;"):-1!==(t=r.indexOf("MSIE"))?(s="IE",a=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(s="Chrome",a=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(s="Safari",a=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(a=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(s="Firefox",a=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(s=r.substring(e,t),a=r.substring(t+1),s.toLowerCase()==s.toUpperCase()&&(s=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),o=parseInt(""+a,10),isNaN(o)&&(a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),[s,o]}function r(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function s(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],a=s.parentNode,o=s.nextSibling;r.appendChild(s),o?a.insertBefore(r,o):a.appendChild(r)}}function a(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function o(e,t,n){e.addEventListener(t,n,!1)}function i(e,t,n){e.removeEventListener(t,n,!1)}function c(e,t){return Math.floor(e/t*100)}function l(e){var t=d().isFullScreen()?{x:0,y:0}:u(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function u(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function p(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},p(e[n],t[n])):e[n]=t[n];return e}function d(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;case"ms":return null!==document.msFullscreenElement;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function f(e){function u(){for(X.subcount=0;v(X.captions[X.subcount][0])X.captions.length-1){X.subcount=X.captions.length-1;break}}function p(){a(X.container,b.classes.captions.enabled,!0),b.captions.defaultActive&&(a(X.container,b.classes.captions.active,!0),X.buttons.captions.setAttribute("checked","checked"))}function f(e){var t=[];return t=e.split(" --> "),g(t[0])}function v(e){var t=[];return t=e.split(" --> "),g(t[1])}function g(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function y(e){return X.container.querySelectorAll(e)}function h(e){return y(e)[0]}function x(){try{return window.self!==window.top}catch(e){return!0}}function k(){t("Injecting custom controls.");var e=b.html;e=r(e,"{aria-label}",b.playAriaLabel),e=r(e,"{id}",X.random),X.container.insertAdjacentHTML("beforeend",e)}function w(){try{return X.controls=h(b.selectors.controls),X.buttons={},X.buttons.play=h(b.selectors.buttons.play),X.buttons.pause=h(b.selectors.buttons.pause),X.buttons.restart=h(b.selectors.buttons.restart),X.buttons.rewind=h(b.selectors.buttons.rewind),X.buttons.forward=h(b.selectors.buttons.forward),X.buttons.mute=h(b.selectors.buttons.mute),X.buttons.captions=h(b.selectors.buttons.captions),X.buttons.fullscreen=h(b.selectors.buttons.fullscreen),X.progress={},X.progress.container=h(b.selectors.progress.container),X.progress.buffer={},X.progress.buffer.bar=h(b.selectors.progress.buffer),X.progress.buffer.text=X.progress.buffer.bar.getElementsByTagName("span")[0],X.progress.played={},X.progress.played.bar=h(b.selectors.progress.played),X.progress.played.text=X.progress.played.bar.getElementsByTagName("span")[0],X.volume=h(b.selectors.buttons.volume),X.duration=h(b.selectors.duration),X.seekTime=y(b.selectors.seekTime),!0}catch(e){return t("It looks like there's a problem with your controls html. Bailing.",!0),!1}}function T(){if(X.media=X.container.querySelectorAll("audio, video")[0],!X.media)return t("No audio or video element found!",!0),!1;if(X.media.removeAttribute("controls"),X.type="video"==X.media.tagName.toLowerCase()?"video":"audio",a(X.container,b.classes[X.type],!0),a(X.container,b.classes.stopped,null===X.media.getAttribute("autoplay")),"video"===X.type){var e=document.createElement("div");e.setAttribute("class",b.classes.videoWrapper),s(X.media,e),X.videoContainer=e}}function S(){if("video"===X.type){X.videoContainer.insertAdjacentHTML("afterbegin","
"),X.captionsContainer=h(b.selectors.captions),X.isTextTracks=!1,X.media.textTracks&&(X.isTextTracks=!0);for(var e,n="",r=X.media.childNodes,s=0;s=31||"Safari"===X.browserName&&X.browserMajorVersion>=7)&&(t("Detected IE 10/11 or Firefox 31+ or Safari 7+."),X.isTextTracks=!1),X.isTextTracks){t("TextTracks supported.");for(var l=0;lf(X.captions[X.subcount][0])&&X.media.currentTime.toFixed(1)v(X.captions[X.subcount][0])&&X.subcount=7){t("Safari 7+ detected; removing track from DOM."),i=X.media.getElementsByTagName("track");for(var m=0;mt?0:t,X.isTextTracks||"video"!==X.type||u(X)}function L(e){"undefined"==typeof e&&(e=b.seekInterval);var t=X.media.currentTime+e;X.media.currentTime=t>X.media.duration?X.media.duration:t,X.isTextTracks||"video"!==X.type||u(X)}function A(){var e=m.supportsFullScreen;event.type===m.fullScreenEventName?b.fullscreen.active=m.isFullScreen():e?(m.isFullScreen()?m.cancelFullScreen():m.requestFullScreen(X.container),b.fullscreen.active=m.isFullScreen()):(b.fullscreen.active=!b.fullscreen.active,b.fullscreen.active?(o(document,"keyup",V),document.body.style.overflow="hidden"):(i(document,"keyup",V),document.body.style.overflow="")),a(X.container,b.classes.fullscreen.active,b.fullscreen.active)}function V(e){27===(e.which||e.charCode||e.keyCode)&&b.fullscreen.active&&A()}function O(e){"undefined"==typeof e&&(e=b.storage.enabled&&b.storage.supported?window.localStorage.plyr_volume||b.volume:b.volume),e>10&&(e=10),X.volume.value=e,X.media.volume=parseFloat(e/10),H(),b.storage.enabled&&b.storage.supported&&(window.localStorage.plyr_volume=e)}function j(e){"undefined"==typeof active&&(e=!X.media.muted,X.buttons.mute.checked=e),X.media.muted=e,H()}function q(e){"undefined"==typeof e&&(e=-1===X.container.className.indexOf(b.classes.captions.active),X.buttons.captions.checked=e),e?a(X.container,b.classes.captions.active,!0):a(X.container,b.classes.captions.active)}function H(){a(X.container,b.classes.muted,0===X.media.volume||X.media.muted)}function B(e){var t,n,r=0;switch(e.type){case"timeupdate":t=X.progress.played.bar,n=X.progress.played.text,r=c(X.media.currentTime,X.media.duration);break;case"playing":case"progress":t=X.progress.buffer.bar,n=X.progress.buffer.text,r=function(){var e=X.media.buffered;return e.length?c(e.end(0),X.media.duration):0}()}t&&r>0&&(t.value=r,n.innerHTML=r)}function R(){X.secs=parseInt(X.media.currentTime%60),X.mins=parseInt(X.media.currentTime/60%60),X.secs=("0"+X.secs).slice(-2),X.mins=("0"+X.mins).slice(-2),X.duration.innerHTML=X.mins+":"+X.secs}function P(){o(X.buttons.play,"click",function(){C(),X.buttons.pause.focus()}),o(X.buttons.pause,"click",function(){I(),X.buttons.play.focus()}),o(X.buttons.restart,"click",M),o(X.buttons.rewind,"click",function(){E(b.seekInterval)}),o(X.buttons.forward,"click",function(){L(b.seekInterval)}),o(X.volume,"change",function(){O(this.value)}),o(X.buttons.mute,"change",function(){j(this.checked)}),o(X.buttons.fullscreen,"click",A),o(document,m.fullScreenEventName,A),"video"===X.type&&b.click&&o(X.videoContainer,"click",function(){X.media.paused?C():X.media.ended?M():I()}),o(X.media,"timeupdate",R),o(X.media,"timeupdate",B),o(X.progress.played.bar,"click",function(e){X.pos=l(e).x/this.offsetWidth,X.media.currentTime=X.pos*X.media.duration,X.isTextTracks||"video"!==X.type||u(X)}),o(X.buttons.captions,"click",function(){q(this.checked)}),o(X.media,"ended",function(){"video"===X.type&&(X.captionsContainer.innerHTML=""),a(X.container,b.classes.stopped,!0),a(X.container,b.classes.playing)}),o(X.media,"progress",B),o(X.media,"playing",B)}function W(){return m=d(),X.browserInfo=n(),X.browserName=X.browserInfo[0],X.browserMajorVersion=X.browserInfo[1],t(X.browserName+" "+X.browserMajorVersion),"IE"!==X.browserName||8!==X.browserMajorVersion&&9!==X.browserMajorVersion?(b.playAriaLabel="undefined"!=typeof b.title&&b.title.length?"Play "+b.title:"Play",T(),X.random=Math.floor(1e4*Math.random()),k(),w()?(S(),O(),N(),F(),P(),void 0):!1):(t("Browser not suppported.",!0),!1)}var X=this;return X.container=e,W(),{media:X.media,play:C,pause:I,restart:M,rewind:E,forward:L,setVolume:O,toggleMute:j,toggleCaptions:q}}var m,b,v={enabled:!0,debug:!1,seekInterval:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{video:"player-video",videoWrapper:"player-video-wrapper",audio:"player-audio",stopped:"stopped",playing:"playing",muted:"muted",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0,supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}}};e.setup=function(e){if(b=p(v,e),!b.enabled)return!1;for(var t=document.querySelectorAll(b.selectors.container),n=[],r=t.length-1;r>=0;r--){var s=t[r];"undefined"==typeof s.plyr&&(s.plyr=new f(s)),n.push(s.plyr)}return n}}(this.plyr=this.plyr||{}); \ No newline at end of file diff --git a/dist/sprite.svg b/dist/sprite.svg new file mode 100644 index 00000000..1c3e7031 --- /dev/null +++ b/dist/sprite.svg @@ -0,0 +1 @@ +collapseexpandmutedpauserewind \ No newline at end of file diff --git a/dist/svg/sprite.svg b/dist/svg/sprite.svg deleted file mode 100644 index 1c3e7031..00000000 --- a/dist/svg/sprite.svg +++ /dev/null @@ -1 +0,0 @@ -collapseexpandmutedpauserewind \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 71dad55f..0d1cf8fb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,23 +17,21 @@ var fs = require("fs"), svgmin = require("gulp-svgmin"), hogan = require("gulp-hogan-compile"); -var projectPath = __dirname; -var paths = { - project: projectPath, - +var root = __dirname, + paths = { // Watch paths - watchless: path.join(projectPath, "assets/less/**/*"), - watchjs: path.join(projectPath, "assets/js/**/*"), - watchicons: path.join(projectPath, "assets/icons/**/*"), - watchtemplates: path.join(projectPath, "assets/templates/**/*"), - - // SVG Icons - svg: path.join(projectPath, "assets/icons/*.svg"), - + watch: { + less: path.join(root, "src/less/**/*"), + js: path.join(root, "src/js/**/*"), + sprite: path.join(root, "src/sprite/*.svg"), + templates: path.join(root, "src/templates/*.html"), + }, // Output paths - js: path.join(projectPath, "dist/js/"), - css: path.join(projectPath, "dist/css/"), - icons: path.join(projectPath, "dist/svg/") + output: { + js: path.join(root, "dist/js/"), + css: path.join(root, "dist/css/"), + sprite: path.join(root, "dist/") + } }, // Task names @@ -41,7 +39,7 @@ taskNames = { jsAll: "js-all", lessBuild: "less-", jsBuild: "js-", - iconBuild: "icon-build", + sprite: "sprite-build", templates: "templates" }, // Task arrays @@ -49,7 +47,7 @@ lessBuildTasks = [], jsBuildTasks = [], // Fetch bundles from JSON -bundles = loadJSON(path.join(paths.project, "bundles.json")); +bundles = loadJSON(path.join(root, "bundles.json")); // Load json function loadJSON(path) { @@ -59,14 +57,14 @@ function loadJSON(path) { // Build templates gulp.task(taskNames.templates, function () { return gulp - .src(paths.watchtemplates) + .src(paths.watch.templates) .pipe(hogan("templates.js", { wrapper: false, templateName: function (file) { return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); } })) - .pipe(gulp.dest(paths.js)); + .pipe(gulp.dest(paths.output.js)); }); // Process JS @@ -80,7 +78,7 @@ for (var key in bundles.js) { .src(bundles.js[key]) .pipe(concat(key)) .pipe(uglify()) - .pipe(gulp.dest(paths.js)); + .pipe(gulp.dest(paths.output.js)); }); })(key); } @@ -97,32 +95,29 @@ for (var key in bundles.less) { .pipe(less()) .on("error", gutil.log) .pipe(concat(key)) - .pipe(prefix(["last 2 versions", "> 1%", "ie 9"], { cascade: true })) + .pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(minifyCss()) - .pipe(gulp.dest(paths.css)); + .pipe(gulp.dest(paths.output.css)); }); })(key); } // Process Icons -gulp.task(taskNames.iconBuild, function () { +gulp.task(taskNames.sprite, function () { return gulp - .src(paths.svg) + .src(paths.watch.sprite) .pipe(svgmin({ plugins: [{ removeDesc: true }] })) - .pipe(svgstore({ - prefix: "icon-", - fileName: "sprite.svg" - })) - .pipe(gulp.dest(paths.icons)); + .pipe(svgstore()) + .pipe(gulp.dest(paths.output.sprite)); }); // Default gulp task gulp.task("default", function(){ - runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.iconBuild, "watch")); + runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch")); }); // Build all JS (inc. templates) @@ -132,8 +127,8 @@ gulp.task(taskNames.jsAll, function(){ // Watch for file changes gulp.task("watch", function () { - //gulp.watch(paths.watchtemplates, [taskNames.jsAll]); - //gulp.watch(paths.watchjs, [taskNames.jsAll]); - gulp.watch(paths.watchless, lessBuildTasks); - gulp.watch(paths.watchicons, [taskNames.iconBuild]); + //gulp.watch(paths.watch.templates, [taskNames.jsAll]); + //gulp.watch(paths.watch.js, [taskNames.jsAll]); + gulp.watch(paths.watch.less, lessBuildTasks); + gulp.watch(paths.watch.sprite, [taskNames.iconBuild]); }); \ No newline at end of file diff --git a/index.html b/index.html index 5593c392..2021cfc5 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ - +
@@ -55,7 +55,7 @@ diff --git a/package.json b/package.json index 938dc402..8d3b7b7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.0.0", + "version": "1.0.10", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", @@ -13,7 +13,7 @@ "gulp-less": "~1.3.1", "gulp-minify-css": "~0.3.6", "gulp-svgmin": "^1.0.0", - "gulp-svgstore": "^4.0.1", + "gulp-svgstore": "^5.0.0", "gulp-uglify": "~0.3.1", "gulp-util": "~2.2.20", "run-sequence": "^0.3.6" diff --git a/src/fonts/AvenirLTStd-Heavy.ttf b/src/fonts/AvenirLTStd-Heavy.ttf new file mode 100644 index 00000000..7bee7997 Binary files /dev/null and b/src/fonts/AvenirLTStd-Heavy.ttf differ diff --git a/src/fonts/AvenirLTStd-Heavy.woff b/src/fonts/AvenirLTStd-Heavy.woff new file mode 100644 index 00000000..771c45a1 Binary files /dev/null and b/src/fonts/AvenirLTStd-Heavy.woff differ diff --git a/src/fonts/AvenirLTStd-Heavy.woff2 b/src/fonts/AvenirLTStd-Heavy.woff2 new file mode 100755 index 00000000..b889b061 Binary files /dev/null and b/src/fonts/AvenirLTStd-Heavy.woff2 differ diff --git a/src/fonts/AvenirLTStd-Medium.ttf b/src/fonts/AvenirLTStd-Medium.ttf new file mode 100644 index 00000000..73ec1e54 Binary files /dev/null and b/src/fonts/AvenirLTStd-Medium.ttf differ diff --git a/src/fonts/AvenirLTStd-Medium.woff b/src/fonts/AvenirLTStd-Medium.woff new file mode 100644 index 00000000..bc2a778e Binary files /dev/null and b/src/fonts/AvenirLTStd-Medium.woff differ diff --git a/src/fonts/AvenirLTStd-Medium.woff2 b/src/fonts/AvenirLTStd-Medium.woff2 new file mode 100755 index 00000000..bcf4649b Binary files /dev/null and b/src/fonts/AvenirLTStd-Medium.woff2 differ diff --git a/src/js/docs.js b/src/js/docs.js new file mode 100644 index 00000000..89803ee2 --- /dev/null +++ b/src/js/docs.js @@ -0,0 +1,15 @@ +// ========================================================================== +// Docs example +// ========================================================================== + +/*global plyr, templates */ + +// Setup the player +plyr.setup({ + debug: true, + title: "Video demo", + html: templates.controls.render({}), + captions: { + defaultActive: true + } +}); \ No newline at end of file diff --git a/src/js/lib/hogan-3.0.2.mustache.js b/src/js/lib/hogan-3.0.2.mustache.js new file mode 100644 index 00000000..f1300c46 --- /dev/null +++ b/src/js/lib/hogan-3.0.2.mustache.js @@ -0,0 +1,802 @@ +/*! + * Copyright 2011 Twitter, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// A wrapper for compatibility with Mustache.js, quirks and all + + + +var Hogan = {}; + +(function (Hogan) { + Hogan.Template = function (codeObj, text, compiler, options) { + codeObj = codeObj || {}; + this.r = codeObj.code || this.r; + this.c = compiler; + this.options = options || {}; + this.text = text || ''; + this.partials = codeObj.partials || {}; + this.subs = codeObj.subs || {}; + this.buf = ''; + } + + Hogan.Template.prototype = { + // render: replaced by generated code. + r: function (context, partials, indent) { return ''; }, + + // variable escaping + v: hoganEscape, + + // triple stache + t: coerceToString, + + render: function render(context, partials, indent) { + return this.ri([context], partials || {}, indent); + }, + + // render internal -- a hook for overrides that catches partials too + ri: function (context, partials, indent) { + return this.r(context, partials, indent); + }, + + // ensurePartial + ep: function(symbol, partials) { + var partial = this.partials[symbol]; + + // check to see that if we've instantiated this partial before + var template = partials[partial.name]; + if (partial.instance && partial.base == template) { + return partial.instance; + } + + if (typeof template == 'string') { + if (!this.c) { + throw new Error("No compiler available."); + } + template = this.c.compile(template, this.options); + } + + if (!template) { + return null; + } + + // We use this to check whether the partials dictionary has changed + this.partials[symbol].base = template; + + if (partial.subs) { + // Make sure we consider parent template now + if (!partials.stackText) partials.stackText = {}; + for (key in partial.subs) { + if (!partials.stackText[key]) { + partials.stackText[key] = (this.activeSub !== undefined && partials.stackText[this.activeSub]) ? partials.stackText[this.activeSub] : this.text; + } + } + template = createSpecializedPartial(template, partial.subs, partial.partials, + this.stackSubs, this.stackPartials, partials.stackText); + } + this.partials[symbol].instance = template; + + return template; + }, + + // tries to find a partial in the current scope and render it + rp: function(symbol, context, partials, indent) { + var partial = this.ep(symbol, partials); + if (!partial) { + return ''; + } + + return partial.ri(context, partials, indent); + }, + + // render a section + rs: function(context, partials, section) { + var tail = context[context.length - 1]; + + if (!isArray(tail)) { + section(context, partials, this); + return; + } + + for (var i = 0; i < tail.length; i++) { + context.push(tail[i]); + section(context, partials, this); + context.pop(); + } + }, + + // maybe start a section + s: function(val, ctx, partials, inverted, start, end, tags) { + var pass; + + if (isArray(val) && val.length === 0) { + return false; + } + + if (typeof val == 'function') { + val = this.ms(val, ctx, partials, inverted, start, end, tags); + } + + pass = !!val; + + if (!inverted && pass && ctx) { + ctx.push((typeof val == 'object') ? val : ctx[ctx.length - 1]); + } + + return pass; + }, + + // find values with dotted names + d: function(key, ctx, partials, returnFound) { + var found, + names = key.split('.'), + val = this.f(names[0], ctx, partials, returnFound), + doModelGet = this.options.modelGet, + cx = null; + + if (key === '.' && isArray(ctx[ctx.length - 2])) { + val = ctx[ctx.length - 1]; + } else { + for (var i = 1; i < names.length; i++) { + found = findInScope(names[i], val, doModelGet); + if (found !== undefined) { + cx = val; + val = found; + } else { + val = ''; + } + } + } + + if (returnFound && !val) { + return false; + } + + if (!returnFound && typeof val == 'function') { + ctx.push(cx); + val = this.mv(val, ctx, partials); + ctx.pop(); + } + + return val; + }, + + // find values with normal names + f: function(key, ctx, partials, returnFound) { + var val = false, + v = null, + found = false, + doModelGet = this.options.modelGet; + + for (var i = ctx.length - 1; i >= 0; i--) { + v = ctx[i]; + val = findInScope(key, v, doModelGet); + if (val !== undefined) { + found = true; + break; + } + } + + if (!found) { + return (returnFound) ? false : ""; + } + + if (!returnFound && typeof val == 'function') { + val = this.mv(val, ctx, partials); + } + + return val; + }, + + // higher order templates + ls: function(func, cx, partials, text, tags) { + var oldTags = this.options.delimiters; + + this.options.delimiters = tags; + this.b(this.ct(coerceToString(func.call(cx, text)), cx, partials)); + this.options.delimiters = oldTags; + + return false; + }, + + // compile text + ct: function(text, cx, partials) { + if (this.options.disableLambda) { + throw new Error('Lambda features disabled.'); + } + return this.c.compile(text, this.options).render(cx, partials); + }, + + // template result buffering + b: function(s) { this.buf += s; }, + + fl: function() { var r = this.buf; this.buf = ''; return r; }, + + // method replace section + ms: function(func, ctx, partials, inverted, start, end, tags) { + var textSource, + cx = ctx[ctx.length - 1], + result = func.call(cx); + + if (typeof result == 'function') { + if (inverted) { + return true; + } else { + textSource = (this.activeSub && this.subsText && this.subsText[this.activeSub]) ? this.subsText[this.activeSub] : this.text; + return this.ls(result, cx, partials, textSource.substring(start, end), tags); + } + } + + return result; + }, + + // method replace variable + mv: function(func, ctx, partials) { + var cx = ctx[ctx.length - 1]; + var result = func.call(cx); + + if (typeof result == 'function') { + return this.ct(coerceToString(result.call(cx)), cx, partials); + } + + return result; + }, + + sub: function(name, context, partials, indent) { + var f = this.subs[name]; + if (f) { + this.activeSub = name; + f(context, partials, this, indent); + this.activeSub = false; + } + } + + }; + + //Find a key in an object + function findInScope(key, scope, doModelGet) { + var val; + + if (scope && typeof scope == 'object') { + + if (scope[key] !== undefined) { + val = scope[key]; + + // try lookup with get for backbone or similar model data + } else if (doModelGet && scope.get && typeof scope.get == 'function') { + val = scope.get(key); + } + } + + return val; + } + + function createSpecializedPartial(instance, subs, partials, stackSubs, stackPartials, stackText) { + function PartialTemplate() {}; + PartialTemplate.prototype = instance; + function Substitutions() {}; + Substitutions.prototype = instance.subs; + var key; + var partial = new PartialTemplate(); + partial.subs = new Substitutions(); + partial.subsText = {}; //hehe. substext. + partial.buf = ''; + + stackSubs = stackSubs || {}; + partial.stackSubs = stackSubs; + partial.subsText = stackText; + for (key in subs) { + if (!stackSubs[key]) stackSubs[key] = subs[key]; + } + for (key in stackSubs) { + partial.subs[key] = stackSubs[key]; + } + + stackPartials = stackPartials || {}; + partial.stackPartials = stackPartials; + for (key in partials) { + if (!stackPartials[key]) stackPartials[key] = partials[key]; + } + for (key in stackPartials) { + partial.partials[key] = stackPartials[key]; + } + + return partial; + } + + var rAmp = /&/g, + rLt = //g, + rApos = /\'/g, + rQuot = /\"/g, + hChars = /[&<>\"\']/; + + function coerceToString(val) { + return String((val === null || val === undefined) ? '' : val); + } + + function hoganEscape(str) { + str = coerceToString(str); + return hChars.test(str) ? + str + .replace(rAmp, '&') + .replace(rLt, '<') + .replace(rGt, '>') + .replace(rApos, ''') + .replace(rQuot, '"') : + str; + } + + var isArray = Array.isArray || function(a) { + return Object.prototype.toString.call(a) === '[object Array]'; + }; + +})(typeof exports !== 'undefined' ? exports : Hogan); + + + +(function (Hogan) { + // Setup regex assignments + // remove whitespace according to Mustache spec + var rIsWhitespace = /\S/, + rQuot = /\"/g, + rNewline = /\n/g, + rCr = /\r/g, + rSlash = /\\/g, + rLineSep = /\u2028/, + rParagraphSep = /\u2029/; + + Hogan.tags = { + '#': 1, '^': 2, '<': 3, '$': 4, + '/': 5, '!': 6, '>': 7, '=': 8, '_v': 9, + '{': 10, '&': 11, '_t': 12 + }; + + Hogan.scan = function scan(text, delimiters) { + var len = text.length, + IN_TEXT = 0, + IN_TAG_TYPE = 1, + IN_TAG = 2, + state = IN_TEXT, + tagType = null, + tag = null, + buf = '', + tokens = [], + seenTag = false, + i = 0, + lineStart = 0, + otag = '{{', + ctag = '}}'; + + function addBuf() { + if (buf.length > 0) { + tokens.push({tag: '_t', text: new String(buf)}); + buf = ''; + } + } + + function lineIsWhitespace() { + var isAllWhitespace = true; + for (var j = lineStart; j < tokens.length; j++) { + isAllWhitespace = + (Hogan.tags[tokens[j].tag] < Hogan.tags['_v']) || + (tokens[j].tag == '_t' && tokens[j].text.match(rIsWhitespace) === null); + if (!isAllWhitespace) { + return false; + } + } + + return isAllWhitespace; + } + + function filterLine(haveSeenTag, noNewLine) { + addBuf(); + + if (haveSeenTag && lineIsWhitespace()) { + for (var j = lineStart, next; j < tokens.length; j++) { + if (tokens[j].text) { + if ((next = tokens[j+1]) && next.tag == '>') { + // set indent to token value + next.indent = tokens[j].text.toString() + } + tokens.splice(j, 1); + } + } + } else if (!noNewLine) { + tokens.push({tag:'\n'}); + } + + seenTag = false; + lineStart = tokens.length; + } + + function changeDelimiters(text, index) { + var close = '=' + ctag, + closeIndex = text.indexOf(close, index), + delimiters = trim( + text.substring(text.indexOf('=', index) + 1, closeIndex) + ).split(' '); + + otag = delimiters[0]; + ctag = delimiters[delimiters.length - 1]; + + return closeIndex + close.length - 1; + } + + if (delimiters) { + delimiters = delimiters.split(' '); + otag = delimiters[0]; + ctag = delimiters[1]; + } + + for (i = 0; i < len; i++) { + if (state == IN_TEXT) { + if (tagChange(otag, text, i)) { + --i; + addBuf(); + state = IN_TAG_TYPE; + } else { + if (text.charAt(i) == '\n') { + filterLine(seenTag); + } else { + buf += text.charAt(i); + } + } + } else if (state == IN_TAG_TYPE) { + i += otag.length - 1; + tag = Hogan.tags[text.charAt(i + 1)]; + tagType = tag ? text.charAt(i + 1) : '_v'; + if (tagType == '=') { + i = changeDelimiters(text, i); + state = IN_TEXT; + } else { + if (tag) { + i++; + } + state = IN_TAG; + } + seenTag = i; + } else { + if (tagChange(ctag, text, i)) { + tokens.push({tag: tagType, n: trim(buf), otag: otag, ctag: ctag, + i: (tagType == '/') ? seenTag - otag.length : i + ctag.length}); + buf = ''; + i += ctag.length - 1; + state = IN_TEXT; + if (tagType == '{') { + if (ctag == '}}') { + i++; + } else { + cleanTripleStache(tokens[tokens.length - 1]); + } + } + } else { + buf += text.charAt(i); + } + } + } + + filterLine(seenTag, true); + + return tokens; + } + + function cleanTripleStache(token) { + if (token.n.substr(token.n.length - 1) === '}') { + token.n = token.n.substring(0, token.n.length - 1); + } + } + + function trim(s) { + if (s.trim) { + return s.trim(); + } + + return s.replace(/^\s*|\s*$/g, ''); + } + + function tagChange(tag, text, index) { + if (text.charAt(index) != tag.charAt(0)) { + return false; + } + + for (var i = 1, l = tag.length; i < l; i++) { + if (text.charAt(index + i) != tag.charAt(i)) { + return false; + } + } + + return true; + } + + // the tags allowed inside super templates + var allowedInSuper = {'_t': true, '\n': true, '$': true, '/': true}; + + function buildTree(tokens, kind, stack, customTags) { + var instructions = [], + opener = null, + tail = null, + token = null; + + tail = stack[stack.length - 1]; + + while (tokens.length > 0) { + token = tokens.shift(); + + if (tail && tail.tag == '<' && !(token.tag in allowedInSuper)) { + throw new Error('Illegal content in < super tag.'); + } + + if (Hogan.tags[token.tag] <= Hogan.tags['$'] || isOpener(token, customTags)) { + stack.push(token); + token.nodes = buildTree(tokens, token.tag, stack, customTags); + } else if (token.tag == '/') { + if (stack.length === 0) { + throw new Error('Closing tag without opener: /' + token.n); + } + opener = stack.pop(); + if (token.n != opener.n && !isCloser(token.n, opener.n, customTags)) { + throw new Error('Nesting error: ' + opener.n + ' vs. ' + token.n); + } + opener.end = token.i; + return instructions; + } else if (token.tag == '\n') { + token.last = (tokens.length == 0) || (tokens[0].tag == '\n'); + } + + instructions.push(token); + } + + if (stack.length > 0) { + throw new Error('missing closing tag: ' + stack.pop().n); + } + + return instructions; + } + + function isOpener(token, tags) { + for (var i = 0, l = tags.length; i < l; i++) { + if (tags[i].o == token.n) { + token.tag = '#'; + return true; + } + } + } + + function isCloser(close, open, tags) { + for (var i = 0, l = tags.length; i < l; i++) { + if (tags[i].c == close && tags[i].o == open) { + return true; + } + } + } + + function stringifySubstitutions(obj) { + var items = []; + for (var key in obj) { + items.push('"' + esc(key) + '": function(c,p,t,i) {' + obj[key] + '}'); + } + return "{ " + items.join(",") + " }"; + } + + function stringifyPartials(codeObj) { + var partials = []; + for (var key in codeObj.partials) { + partials.push('"' + esc(key) + '":{name:"' + esc(codeObj.partials[key].name) + '", ' + stringifyPartials(codeObj.partials[key]) + "}"); + } + return "partials: {" + partials.join(",") + "}, subs: " + stringifySubstitutions(codeObj.subs); + } + + Hogan.stringify = function(codeObj, text, options) { + return "{code: function (c,p,i) { " + Hogan.wrapMain(codeObj.code) + " }," + stringifyPartials(codeObj) + "}"; + } + + var serialNo = 0; + Hogan.generate = function(tree, text, options) { + serialNo = 0; + var context = { code: '', subs: {}, partials: {} }; + Hogan.walk(tree, context); + + if (options.asString) { + return this.stringify(context, text, options); + } + + return this.makeTemplate(context, text, options); + } + + Hogan.wrapMain = function(code) { + return 'var t=this;t.b(i=i||"");' + code + 'return t.fl();'; + } + + Hogan.template = Hogan.Template; + + Hogan.makeTemplate = function(codeObj, text, options) { + var template = this.makePartials(codeObj); + template.code = new Function('c', 'p', 'i', this.wrapMain(codeObj.code)); + return new this.template(template, text, this, options); + } + + Hogan.makePartials = function(codeObj) { + var key, template = {subs: {}, partials: codeObj.partials, name: codeObj.name}; + for (key in template.partials) { + template.partials[key] = this.makePartials(template.partials[key]); + } + for (key in codeObj.subs) { + template.subs[key] = new Function('c', 'p', 't', 'i', codeObj.subs[key]); + } + return template; + } + + function esc(s) { + return s.replace(rSlash, '\\\\') + .replace(rQuot, '\\\"') + .replace(rNewline, '\\n') + .replace(rCr, '\\r') + .replace(rLineSep, '\\u2028') + .replace(rParagraphSep, '\\u2029'); + } + + function chooseMethod(s) { + return (~s.indexOf('.')) ? 'd' : 'f'; + } + + function createPartial(node, context) { + var prefix = "<" + (context.prefix || ""); + var sym = prefix + node.n + serialNo++; + context.partials[sym] = {name: node.n, partials: {}}; + context.code += 't.b(t.rp("' + esc(sym) + '",c,p,"' + (node.indent || '') + '"));'; + return sym; + } + + Hogan.codegen = { + '#': function(node, context) { + context.code += 'if(t.s(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,1),' + + 'c,p,0,' + node.i + ',' + node.end + ',"' + node.otag + " " + node.ctag + '")){' + + 't.rs(c,p,' + 'function(c,p,t){'; + Hogan.walk(node.nodes, context); + context.code += '});c.pop();}'; + }, + + '^': function(node, context) { + context.code += 'if(!t.s(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,1),c,p,1,0,0,"")){'; + Hogan.walk(node.nodes, context); + context.code += '};'; + }, + + '>': createPartial, + '<': function(node, context) { + var ctx = {partials: {}, code: '', subs: {}, inPartial: true}; + Hogan.walk(node.nodes, ctx); + var template = context.partials[createPartial(node, context)]; + template.subs = ctx.subs; + template.partials = ctx.partials; + }, + + '$': function(node, context) { + var ctx = {subs: {}, code: '', partials: context.partials, prefix: node.n}; + Hogan.walk(node.nodes, ctx); + context.subs[node.n] = ctx.code; + if (!context.inPartial) { + context.code += 't.sub("' + esc(node.n) + '",c,p,i);'; + } + }, + + '\n': function(node, context) { + context.code += write('"\\n"' + (node.last ? '' : ' + i')); + }, + + '_v': function(node, context) { + context.code += 't.b(t.v(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,0)));'; + }, + + '_t': function(node, context) { + context.code += write('"' + esc(node.text) + '"'); + }, + + '{': tripleStache, + + '&': tripleStache + } + + function tripleStache(node, context) { + context.code += 't.b(t.t(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,0)));'; + } + + function write(s) { + return 't.b(' + s + ');'; + } + + Hogan.walk = function(nodelist, context) { + var func; + for (var i = 0, l = nodelist.length; i < l; i++) { + func = Hogan.codegen[nodelist[i].tag]; + func && func(nodelist[i], context); + } + return context; + } + + Hogan.parse = function(tokens, text, options) { + options = options || {}; + return buildTree(tokens, '', [], options.sectionTags || []); + } + + Hogan.cache = {}; + + Hogan.cacheKey = function(text, options) { + return [text, !!options.asString, !!options.disableLambda, options.delimiters, !!options.modelGet].join('||'); + } + + Hogan.compile = function(text, options) { + options = options || {}; + var key = Hogan.cacheKey(text, options); + var template = this.cache[key]; + + if (template) { + var partials = template.partials; + for (var name in partials) { + delete partials[name].instance; + } + return template; + } + + template = this.generate(this.parse(this.scan(text, options.delimiters), text, options), text, options); + return this.cache[key] = template; + } +})(typeof exports !== 'undefined' ? exports : Hogan); + + +var Mustache = (function (Hogan) { + + // Mustache.js has non-spec partial context behavior + function mustachePartial(name, context, partials, indent) { + var partialScope = this.f(name, context, partials, 0); + var cx = context; + if (partialScope) { + cx = cx.concat(partialScope); + } + + return Hogan.Template.prototype.rp.call(this, name, cx, partials, indent); + } + + var HoganTemplateWrapper = function(renderFunc, text, compiler){ + this.rp = mustachePartial; + Hogan.Template.call(this, renderFunc, text, compiler); + }; + HoganTemplateWrapper.prototype = Hogan.Template.prototype; + + // Add a wrapper for Hogan's generate method. Mustache and Hogan keep + // separate caches, and Mustache returns wrapped templates. + var wrapper; + var HoganWrapper = function(){ + this.cache = {}; + this.generate = function(code, text, options) { + return new HoganTemplateWrapper(new Function('c', 'p', 'i', code), text, wrapper); + } + }; + HoganWrapper.prototype = Hogan; + wrapper = new HoganWrapper(); + + return { + to_html: function(text, data, partials, sendFun) { + var template = wrapper.compile(text); + var result = template.render(data, partials); + if (!sendFun) { + return result; + } + + sendFun(result); + } + } + +})(Hogan); diff --git a/src/js/plyr.js b/src/js/plyr.js new file mode 100644 index 00000000..c3055a12 --- /dev/null +++ b/src/js/plyr.js @@ -0,0 +1,1123 @@ +// ========================================================================== +// Plyr +// plyr.js v1.0.10 +// https://github.com/sampotts/plyr +// ========================================================================== +// Credits: http://paypal.github.io/accessible-html5-video-player/ +// ========================================================================== + +(function (api) { + "use strict"; + + // Globals + var fullscreen, config; + + // Default config + var defaults = { + enabled: true, + debug: false, + seekInterval: 10, + volume: 5, + click: true, + selectors: { + container: ".player", + controls: ".player-controls", + buttons: { + play: "[data-player='play']", + pause: "[data-player='pause']", + restart: "[data-player='restart']", + rewind: "[data-player='rewind']", + forward: "[data-player='fast-forward']", + mute: "[data-player='mute']", + volume: "[data-player='volume']", + captions: "[data-player='captions']", + fullscreen: "[data-player='fullscreen']" + }, + progress: { + container: ".player-progress", + buffer: ".player-progress-buffer", + played: ".player-progress-played" + }, + captions: ".player-captions", + duration: ".player-duration", + seekTime: ".player-seek-time" + }, + classes: { + video: "player-video", + videoWrapper: "player-video-wrapper", + audio: "player-audio", + stopped: "stopped", + playing: "playing", + muted: "muted", + captions: { + enabled: "captions-enabled", + active: "captions-active" + }, + fullscreen: { + enabled: "fullscreen-enabled", + active: "fullscreen-active" + } + }, + captions: { + defaultActive: false + }, + fullscreen: { + enabled: true, + fallback: true + }, + storage: { + enabled: true, + supported: function() { + try { + return "localStorage" in window && window.localStorage !== null; + } + catch(e) { + return false; + } + } + } + }; + + // Debugging + function _log(text, error) { + if(config.debug && window.console) { + console[(error ? "error" : "log")](text); + } + } + + // Credits: http://paypal.github.io/accessible-html5-video-player/ + // Unfortunately, due to scattered support, browser sniffing is required + function _browserSniff() { + var nAgt = navigator.userAgent, + browserName = navigator.appName, + fullVersion = ""+parseFloat(navigator.appVersion), + majorVersion = parseInt(navigator.appVersion,10), + nameOffset, + verOffset, + ix; + + // MSIE 11 + if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) { + browserName = "IE"; + fullVersion = "11;"; + } + // MSIE + else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) { + browserName = "IE"; + fullVersion = nAgt.substring(verOffset+5); + } + // Chrome + else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) { + browserName = "Chrome"; + fullVersion = nAgt.substring(verOffset+7); + } + // Safari + else if ((verOffset=nAgt.indexOf("Safari")) !== -1) { + browserName = "Safari"; + fullVersion = nAgt.substring(verOffset+7); + if ((verOffset=nAgt.indexOf("Version")) !== -1) { + fullVersion = nAgt.substring(verOffset+8); + } + } + // Firefox + else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) { + browserName = "Firefox"; + fullVersion = nAgt.substring(verOffset+8); + } + // In most other browsers, "name/version" is at the end of userAgent + else if ( (nameOffset=nAgt.lastIndexOf(" ")+1) < (verOffset=nAgt.lastIndexOf("/")) ) { + browserName = nAgt.substring(nameOffset,verOffset); + fullVersion = nAgt.substring(verOffset+1); + if (browserName.toLowerCase()==browserName.toUpperCase()) { + browserName = navigator.appName; + } + } + // Trim the fullVersion string at semicolon/space if present + if ((ix=fullVersion.indexOf(";")) !== -1) { + fullVersion=fullVersion.substring(0,ix); + } + if ((ix=fullVersion.indexOf(" ")) !== -1) { + fullVersion=fullVersion.substring(0,ix); + } + // Get major version + majorVersion = parseInt(""+fullVersion,10); + if (isNaN(majorVersion)) { + fullVersion = ""+parseFloat(navigator.appVersion); + majorVersion = parseInt(navigator.appVersion,10); + } + // Return data + return [browserName, majorVersion]; + } + + // Replace all + function _replaceAll(string, find, replace) { + return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); + } + + // Wrap an element + function _wrap(elements, wrapper) { + // Convert `elms` to an array, if necessary. + if (!elements.length) { + elements = [elements]; + } + + // Loops backwards to prevent having to clone the wrapper on the + // first element (see `child` below). + for (var i = elements.length - 1; i >= 0; i--) { + var child = (i > 0) ? wrapper.cloneNode(true) : wrapper; + var el = elements[i]; + + // Cache the current parent and sibling. + var parent = el.parentNode; + var sibling = el.nextSibling; + + // Wrap the element (is automatically removed from its current + // parent). + child.appendChild(el); + + // If the element had a sibling, insert the wrapper before + // the sibling to maintain the HTML structure; otherwise, just + // append it to the parent. + if (sibling) { + parent.insertBefore(child, sibling); + } else { + parent.appendChild(child); + } + } + } + + // Toggle class on an element + function _toggleClass(element, name, state) { + if(element){ + if(element.classList) { + element.classList[state ? "add" : "remove"](name); + } + else { + var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", ""); + element.className = className + (state ? " " + name : ""); + } + } + } + + // Bind event + function _on(element, event, callback) { + element.addEventListener(event, callback, false); + } + + // Unbind event + function _off(element, event, callback) { + element.removeEventListener(event, callback, false); + } + + // Get percentage + function _getPercentage(current, max) { + return Math.floor((current / max) * 100); + } + + // Get click position relative to parent + // http://www.kirupa.com/html5/getting_mouse_click_position.htm + function _getClickPosition(event) { + var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget); + + return { + x: event.clientX - parentPosition.x, + y: event.clientY - parentPosition.y + }; + } + // Get element position + 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 + }; + } + + // Deep extend/merge two Objects + // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ + // Removed call to arguments.callee (used explicit function name instead) + function _extend(destination, source) { + for (var property in source) { + if (source[property] && source[property].constructor && source[property].constructor === Object) { + destination[property] = destination[property] || {}; + _extend(destination[property], source[property]); + } + else { + destination[property] = source[property]; + } + } + return destination; + } + + // Fullscreen API + function _fullscreen() { + 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; + } + // Special case for MS (when isn't it?) + else if (typeof document.msExitFullscreen != "undefined" && document.msFullscreenEnabled) { + fullscreen.prefix = "ms"; + 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) { + // Yet again Microsoft awesomeness, + // Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes + fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange"); + + fullscreen.isFullScreen = function() { + switch (this.prefix) { + case "": + return document.fullScreen; + case "webkit": + return document.webkitIsFullScreen; + case "ms": + // Docs say document.msFullScreenElement returns undefined + // if no element is full screem but it returns null, cheers + // https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx + return (document.msFullscreenElement !== null); + default: + return document[this.prefix + "FullScreen"]; + } + }; + fullscreen.requestFullScreen = function(element) { + return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null); + }; + fullscreen.cancelFullScreen = function() { + return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")](); + }; + fullscreen.element = function() { + return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"]; + }; + } + + return fullscreen; + } + + // Player instance + function Plyr(container) { + var player = this; + player.container = container; + + // Captions functions + // Credits: http://paypal.github.io/accessible-html5-video-player/ + + // For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.) + function _adjustManualCaptions() { + player.subcount = 0; + while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) { + player.subcount++; + if (player.subcount > player.captions.length-1) { + player.subcount = player.captions.length-1; + break; + } + } + } + // Display captions container and button (for initialization) + function _showCaptions() { + _toggleClass(player.container, config.classes.captions.enabled, true); + + if (config.captions.defaultActive) { + _toggleClass(player.container, config.classes.captions.active, true); + player.buttons.captions.setAttribute("checked", "checked"); + } + } + // Utilities for caption time codes + function _timecodeMin(tc) { + var tcpair = []; + tcpair = tc.split(" --> "); + return _subTcSecs(tcpair[0]); + } + function _timecodeMax(tc) { + var tcpair = []; + tcpair = tc.split(" --> "); + return _subTcSecs(tcpair[1]); + } + function _subTcSecs(tc) { + if (tc === null || tc === undefined) { + return 0; + } + else { + var tc1 = [], + tc2 = [], + seconds; + tc1 = tc.split(","); + tc2 = tc1[0].split(":"); + seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); + return seconds; + } + } + + // Find all elements + function _getElements(selector) { + return player.container.querySelectorAll(selector); + } + + // Find a single element + function _getElement(selector) { + return _getElements(selector)[0]; + } + + // Determine if we're in an iframe + function _inFrame() { + try { + return window.self !== window.top; + } + catch (e) { + return true; + } + } + + // Insert controls + function _injectControls() { + // Insert custom video controls + _log("Injecting custom controls."); + + // Use specified html + // Need to do a default? + var html = config.html; + + // Replace aria label instances + html = _replaceAll(html, "{aria-label}", config.playAriaLabel); + + // Replace all id references + html = _replaceAll(html, "{id}", player.random); + + // Inject into the container + player.container.insertAdjacentHTML("beforeend", html); + } + + // Find the UI controls and store references + function _findElements() { + try { + player.controls = _getElement(config.selectors.controls); + + // Buttons + player.buttons = {}; + player.buttons.play = _getElement(config.selectors.buttons.play); + player.buttons.pause = _getElement(config.selectors.buttons.pause); + player.buttons.restart = _getElement(config.selectors.buttons.restart); + player.buttons.rewind = _getElement(config.selectors.buttons.rewind); + player.buttons.forward = _getElement(config.selectors.buttons.forward); + player.buttons.mute = _getElement(config.selectors.buttons.mute); + player.buttons.captions = _getElement(config.selectors.buttons.captions); + player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); + + // Progress + player.progress = {}; + player.progress.container = _getElement(config.selectors.progress.container); + + // Progress - Buffering + player.progress.buffer = {}; + player.progress.buffer.bar = _getElement(config.selectors.progress.buffer); + player.progress.buffer.text = player.progress.buffer.bar.getElementsByTagName("span")[0]; + + // Progress - Played + player.progress.played = {}; + player.progress.played.bar = _getElement(config.selectors.progress.played); + player.progress.played.text = player.progress.played.bar.getElementsByTagName("span")[0]; + + // Volume + player.volume = _getElement(config.selectors.buttons.volume); + + // Timing + player.duration = _getElement(config.selectors.duration); + player.seekTime = _getElements(config.selectors.seekTime); + + return true; + } + catch(e) { + _log("It looks like there's a problem with your controls html. Bailing.", true); + return false; + } + } + + // Setup media + function _setupMedia() { + player.media = player.container.querySelectorAll("audio, video")[0]; + + // If there's no media, bail + if(!player.media) { + _log("No audio or video element found!", true); + return false; + } + + // Remove native video controls + player.media.removeAttribute("controls"); + + // Set media type + player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio"); + + // Add type class + _toggleClass(player.container, config.classes[player.type], true); + + // If there's no autoplay attribute, assume the video is stopped and add state class + _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null)); + + // Inject the player wrapper + if(player.type === "video") { + // Create the wrapper div + var wrapper = document.createElement("div"); + wrapper.setAttribute("class", config.classes.videoWrapper); + + // Wrap the video in a container + _wrap(player.media, wrapper); + + // Cache the container + player.videoContainer = wrapper; + } + } + + // Setup captions + function _setupCaptions() { + if(player.type === "video") { + // Inject the container + player.videoContainer.insertAdjacentHTML("afterbegin", "
"); + + // Cache selector + player.captionsContainer = _getElement(config.selectors.captions); + + // Determine if HTML5 textTracks is supported + player.isTextTracks = false; + if (player.media.textTracks) { + player.isTextTracks = true; + } + + // Get URL of caption file if exists + var captionSrc = "", + kind, + children = player.media.childNodes; + + for (var i = 0; i < children.length; i++) { + if (children[i].nodeName.toLowerCase() === "track") { + kind = children[i].getAttribute("kind"); + if (kind === "captions") { + captionSrc = children[i].getAttribute("src"); + } + } + } + + // Record if caption file exists or not + player.captionExists = true; + if (captionSrc === "") { + player.captionExists = false; + _log("No caption track found."); + } + else { + _log("Caption track found; URI: " + captionSrc); + } + + // If no caption file exists, hide container for caption text + if (!player.captionExists) { + _toggleClass(player.container, config.classes.captions.enabled); + } + // If caption file exists, process captions + else { + // Turn off native caption rendering to avoid double captions + // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below + var tracks = player.media.textTracks; + for (var x=0; x < tracks.length; x++) { + tracks[x].mode = "hidden"; + } + + // Enable UI + _showCaptions(player); + + // If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported) + if ((player.browserName === "IE" && player.browserMajorVersion === 10) || + (player.browserName === "IE" && player.browserMajorVersion === 11) || + (player.browserName === "Firefox" && player.browserMajorVersion >= 31) || + (player.browserName === "Safari" && player.browserMajorVersion >= 7)) { + // Debugging + _log("Detected IE 10/11 or Firefox 31+ or Safari 7+."); + + // Set to false so skips to "manual" captioning + player.isTextTracks = false; + } + + // Rendering caption tracks + // Native support required - http://caniuse.com/webvtt + if (player.isTextTracks) { + _log("TextTracks supported."); + + for (var y=0; y < tracks.length; y++) { + var track = tracks[y]; + + if (track.kind === "captions") { + _on(track, "cuechange", function() { + if (this.activeCues[0]) { + if (this.activeCues[0].hasOwnProperty("text")) { + player.captionsContainer.innerHTML = this.activeCues[0].text; + } + } + }); + } + } + } + // Caption tracks not natively supported + else { + _log("TextTracks not supported so rendering captions manually."); + + // Render captions from array at appropriate time + player.currentCaption = ""; + player.subcount = 0; + player.captions = []; + + _on(player.media, "timeupdate", function() { + // Check if the next caption is in the current time range + if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) && + player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) { + player.currentCaption = player.captions[player.subcount][1]; + } + // Is there a next timecode? + if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && + player.subcount < (player.captions.length-1)) { + player.subcount++; + } + // Render the caption + player.captionsContainer.innerHTML = player.currentCaption; + }); + + if (captionSrc !== "") { + // Create XMLHttpRequest Object + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + var records = [], + record, + req = xhr.responseText; + + records = req.split("\n\n"); + + for (var r=0; r < records.length; r++) { + record = records[r]; + player.captions[r] = []; + player.captions[r] = record.split("\n"); + } + + // Remove first element ("VTT") + player.captions.shift(); + + _log("Successfully loaded the caption file via AJAX."); + } + else { + _log("There was a problem loading the caption file via AJAX.", true); + } + } + } + + xhr.open("get", captionSrc, true); + + xhr.send(); + } + } + + // If Safari 7+, removing track from DOM [see "turn off native caption rendering" above] + if (player.browserName === "Safari" && player.browserMajorVersion >= 7) { + _log("Safari 7+ detected; removing track from DOM."); + + // Find all elements + tracks = player.media.getElementsByTagName("track"); + + // Loop through and remove one by one + for (var t=0; t < tracks.length; t++) { + player.media.removeChild(tracks[t]); + } + } + } + } + } + + // Setup seeking + function _setupSeeking() { + // Update number of seconds in rewind and fast forward buttons + player.seekTime[0].innerHTML = config.seekInterval; + player.seekTime[1].innerHTML = config.seekInterval; + } + + // Setup fullscreen + function _setupFullscreen() { + if(player.type === "video" && config.fullscreen.enabled) { + // Check for native support + var nativeSupport = fullscreen.supportsFullScreen; + + if(nativeSupport || (config.fullscreen.fallback && !_inFrame())) { + _log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled."); + + // Add styling hook + _toggleClass(player.container, config.classes.fullscreen.enabled, true); + } + else { + _log("Fullscreen not supported and fallback disabled."); + } + } + } + + // Play media + function _play() { + player.media.play(); + + _toggleClass(player.container, config.classes.stopped); + _toggleClass(player.container, config.classes.playing, true); + } + + // Pause media + function _pause() { + player.media.pause(); + + _toggleClass(player.container, config.classes.playing); + _toggleClass(player.container, config.classes.stopped, true); + } + + // Restart playback + function _restart() { + // Move to beginning + player.media.currentTime = 0; + + // Special handling for "manual" captions + if (!player.isTextTracks) { + player.subcount = 0; + } + + // Play and ensure the play button is in correct state + _play(); + } + + // Rewind + function _rewind(seekInterval) { + // Use default if needed + if(typeof seekInterval === "undefined") { + seekInterval = config.seekInterval; + } + + var targetTime = player.media.currentTime - seekInterval; + + if (targetTime < 0) { + player.media.currentTime = 0; + } + else { + player.media.currentTime = targetTime; + } + // Special handling for "manual" captions + if (!player.isTextTracks && player.type === "video") { + _adjustManualCaptions(player); + } + } + + // Fast forward + function _forward(seekInterval) { + // Use default if needed + if(typeof seekInterval === "undefined") { + seekInterval = config.seekInterval; + } + + var targetTime = player.media.currentTime + seekInterval; + + if (targetTime > player.media.duration) { + player.media.currentTime = player.media.duration; + } + else { + player.media.currentTime = targetTime; + } + // Special handling for "manual" captions + if (!player.isTextTracks && player.type === "video") { + _adjustManualCaptions(player); + } + } + + // Toggle fullscreen + function _toggleFullscreen() { + // Check for native support + var nativeSupport = fullscreen.supportsFullScreen; + + // If it's a fullscreen change event, it's probably a native close + if(event.type === fullscreen.fullScreenEventName) { + config.fullscreen.active = fullscreen.isFullScreen(); + } + // If there's native support, use it + else if(nativeSupport) { + // Request fullscreen + if(!fullscreen.isFullScreen()) { + fullscreen.requestFullScreen(player.container); + } + // Bail from fullscreen + else { + fullscreen.cancelFullScreen(); + } + + // Check if we're actually full screen (it could fail) + config.fullscreen.active = fullscreen.isFullScreen(); + } + else { + // Otherwise, it's a simple toggle + config.fullscreen.active = !config.fullscreen.active; + + // Bind/unbind escape key + if(config.fullscreen.active) { + _on(document, "keyup", _handleEscapeFullscreen); + document.body.style.overflow = "hidden"; + } + else { + _off(document, "keyup", _handleEscapeFullscreen); + document.body.style.overflow = ""; + } + } + + // Set class hook + _toggleClass(player.container, config.classes.fullscreen.active, config.fullscreen.active); + } + + // Bail from faux-fullscreen + function _handleEscapeFullscreen(event) { + // If it's a keypress and not escape, bail + if((event.which || event.charCode || event.keyCode) === 27 && config.fullscreen.active) { + _toggleFullscreen(); + } + } + + // Set volume + function _setVolume(volume) { + // Use default if needed + if(typeof volume === "undefined") { + if(config.storage.enabled && config.storage.supported) { + volume = window.localStorage.plyr_volume || config.volume; + } + else { + volume = config.volume; + } + } + // Maximum is 10 + if(volume > 10) { + volume = 10; + } + + player.volume.value = volume; + player.media.volume = parseFloat(volume / 10); + _checkMute(); + + // Store the volume in storage + if(config.storage.enabled && config.storage.supported) { + window.localStorage.plyr_volume = volume; + } + } + + // Mute + function _toggleMute(muted) { + // If the method is called without parameter, toggle based on current value + if(typeof active === "undefined") { + muted = !player.media.muted; + player.buttons.mute.checked = muted; + } + + player.media.muted = muted; + _checkMute(); + } + + // Toggle captions + function _toggleCaptions(active) { + // If the method is called without parameter, toggle based on current value + if(typeof active === "undefined") { + active = (player.container.className.indexOf(config.classes.captions.active) === -1); + player.buttons.captions.checked = active; + } + + if (active) { + _toggleClass(player.container, config.classes.captions.active, true); + } + else { + _toggleClass(player.container, config.classes.captions.active); + } + } + + // Check mute state + function _checkMute() { + _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted)); + } + + // Update elements + function _updateProgress(event) { + var progress, text, value = 0; + + switch(event.type) { + // Video playing + case "timeupdate": + progress = player.progress.played.bar; + text = player.progress.played.text; + value = _getPercentage(player.media.currentTime, player.media.duration); + break; + + // Check buffer status + case "playing": + case "progress": + progress = player.progress.buffer.bar; + text = player.progress.buffer.text; + value = (function() { + var buffered = player.media.buffered; + + if(buffered.length) { + return _getPercentage(buffered.end(0), player.media.duration); + } + + return 0; + })(); + break; + } + + if (progress && value > 0) { + progress.value = value; + text.innerHTML = value; + } + } + + // Update the displayed play time + function _updateTimeDisplay() { + player.secs = parseInt(player.media.currentTime % 60); + player.mins = parseInt((player.media.currentTime / 60) % 60); + + // Ensure it"s two digits. For example, 03 rather than 3. + player.secs = ("0" + player.secs).slice(-2); + player.mins = ("0" + player.mins).slice(-2); + + // Render + player.duration.innerHTML = player.mins + ":" + player.secs; + } + + // Listen for events + function _listeners() { + // Play + _on(player.buttons.play, "click", function() { + _play(); + player.buttons.pause.focus(); + }); + + // Pause + _on(player.buttons.pause, "click", function() { + _pause(); + player.buttons.play.focus(); + }); + + // Restart + _on(player.buttons.restart, "click", _restart); + + // Rewind + _on(player.buttons.rewind, "click", function() { + _rewind(config.seekInterval); + }); + + // Fast forward + _on(player.buttons.forward, "click", function() { + _forward(config.seekInterval); + }); + + // Get the HTML5 range input element and append audio volume adjustment on change + _on(player.volume, "change", function() { + _setVolume(this.value); + }); + + // Mute + _on(player.buttons.mute, "change", function() { + _toggleMute(this.checked); + }); + + // Fullscreen + _on(player.buttons.fullscreen, "click", _toggleFullscreen); + + // Handle user exiting fullscreen by escaping etc + _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); + + // Click video + if(player.type === "video" && config.click) { + _on(player.videoContainer, "click", function() { + if(player.media.paused) { + _play(); + } + else if(player.media.ended) { + _restart(); + } + else { + _pause(); + } + }); + } + + // Duration + _on(player.media, "timeupdate", _updateTimeDisplay); + + // Playing progress + _on(player.media, "timeupdate", _updateProgress); + + // Skip when clicking progress bar + _on(player.progress.played.bar, "click", function(event) { + player.pos = _getClickPosition(event).x / this.offsetWidth; + player.media.currentTime = player.pos * player.media.duration; + + // Special handling for "manual" captions + if (!player.isTextTracks && player.type === "video") { + _adjustManualCaptions(player); + } + }); + + // Captions + _on(player.buttons.captions, "click", function() { + _toggleCaptions(this.checked); + }); + + // Clear captions at end of video + _on(player.media, "ended", function() { + if(player.type === "video") { + player.captionsContainer.innerHTML = ""; + } + _toggleClass(player.container, config.classes.stopped, true); + _toggleClass(player.container, config.classes.playing); + }); + + // Check for buffer progress + _on(player.media, "progress", _updateProgress); + // Also check on start of playing + _on(player.media, "playing", _updateProgress); + } + + function _init() { + // Setup the fullscreen api + fullscreen = _fullscreen(); + + // Sniff + player.browserInfo = _browserSniff(); + player.browserName = player.browserInfo[0]; + player.browserMajorVersion = player.browserInfo[1]; + + // Debug info + _log(player.browserName + " " + player.browserMajorVersion); + + // If IE8, stop customization (use fallback) + // If IE9, stop customization (use native controls) + if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) { + _log("Browser not suppported.", true); + return false; + } + + // Set up aria-label for Play button with the title option + if (typeof(config.title) === "undefined" || !config.title.length) { + config.playAriaLabel = "Play"; + } + else { + config.playAriaLabel = "Play " + config.title; + } + + // Setup media + _setupMedia(); + + // Generate random number for id/for attribute values for controls + player.random = Math.floor(Math.random() * (10000)); + + // Inject custom controls + _injectControls(); + + // Find the elements + if(!_findElements()) { + return false; + } + + // Captions + _setupCaptions(); + + // Set volume + _setVolume(); + + // Setup fullscreen + _setupFullscreen(); + + // Seeking + _setupSeeking(); + + // Listeners + _listeners(); + } + + _init(); + + return { + media: player.media, + play: _play, + pause: _pause, + restart: _restart, + rewind: _rewind, + forward: _forward, + setVolume: _setVolume, + toggleMute: _toggleMute, + toggleCaptions: _toggleCaptions + } + } + + // Expose setup function + api.setup = function(options){ + // Extend the default options with user specified + config = _extend(defaults, options); + + // If enabled carry on + // You may want to disable certain UAs etc + if(!config.enabled) { + return false; + } + + // Get the players + var elements = document.querySelectorAll(config.selectors.container), players = []; + + // Create a player instance for each element + for (var i = elements.length - 1; i >= 0; i--) { + // Get the current element + var element = elements[i]; + + // Setup a player instance and add to the element + if(typeof element.plyr === "undefined") { + element.plyr = new Plyr(element); + } + + // Add to return array + players.push(element.plyr); + } + + return players; + } +}(this.plyr = this.plyr || {})); \ No newline at end of file diff --git a/src/less/docs.less b/src/less/docs.less new file mode 100644 index 00000000..65639769 --- /dev/null +++ b/src/less/docs.less @@ -0,0 +1,140 @@ +// ========================================================================== +// HTML5 Video Player Demo Page +// ========================================================================== + +// Reset +@import "docs/normalize.less"; +// Mixins +@import "docs/mixins.less"; + +// Variables +// --------------------------------------- +// Colors +@blue: #3498DB; +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #cbd0d3; + +// Elements +@link-color: @blue; +@padding-base: 20px; + +// Breakpoints +@screen-md: 768px; + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, *::after, *::before { + box-sizing: border-box; +} + +// Base +html { + //font-size: 62.5%; +} +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: #fff; + line-height: 1.5; + text-align: center; + color: #6D797F; +} + +// Type +h1, +h2 { + letter-spacing: -.025em; + color: #2E3C44; + margin: 0 0 (@padding-base / 2); + line-height: 1.2; + .font-smoothing(); +} +h1 { + .font-size(64); + color: #3498DB; +} +p, +small { + margin: 0 0 @padding-base; +} +small { + display: block; + padding: 0 (@padding-base / 2); + .font-size(14); +} + +// Header +header { + padding: @padding-base; + margin-bottom: @padding-base; + + p { + .font-size(18); + } + @media (min-width: 560px) { + padding-top: (@padding-base * 3); + padding-bottom: (@padding-base * 3); + } +} + +// Sections +section { + padding-bottom: @padding-base; + + @media (min-width: 560px) { + padding-bottom: (@padding-base * 2); + } +} + +// Links & Buttons +a { + text-decoration: none; + color: @link-color; + border-bottom: 1px solid currentColor; + transition: all .3s ease; + + &:hover, + &:focus { + color: #000; + } + &:focus { + .tab-focus(); + } +} +.btn { + display: inline-block; + padding: (@padding-base / 2) (@padding-base * 1.5); + background: @link-color; + border: 0; + color: #fff; + .font-smoothing(on); + font-weight: 600; + border-radius: 3px; + + &:hover, + &:focus { + color: #fff; + background: darken(@link-color, 5%); + } +} + +// Players +.example-audio .player { + max-width: 480px; +} +.example-video .player { + max-width: 1200px; +} +.example-audio .player, +.example-video .player { + margin: 0 auto @padding-base; + + &-fullscreen, + &.fullscreen-active { + max-width: none; + } +} + +// Fonts +// Last to not block rendering +@import "docs/fontface.less"; \ No newline at end of file diff --git a/src/less/docs/fontface.less b/src/less/docs/fontface.less new file mode 100644 index 00000000..d4df4756 --- /dev/null +++ b/src/less/docs/fontface.less @@ -0,0 +1,16 @@ +@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; +} \ No newline at end of file diff --git a/src/less/docs/mixins.less b/src/less/docs/mixins.less new file mode 100644 index 00000000..b3a1f63b --- /dev/null +++ b/src/less/docs/mixins.less @@ -0,0 +1,42 @@ +// ========================================================================== +// Mixins +// ========================================================================== + +// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ +// --------------------------------------- +.clearfix() { + zoom: 1; + &:before, + &:after { content: ""; display: table; } + &:after { clear: both; } +} + +// Webkit-style focus +// --------------------------------------- +.tab-focus() { + // Default + outline: thin dotted @gray-dark; + // Webkit + //outline: 5px auto -webkit-focus-ring-color; + outline-offset: 1px; +} + +// Use rems for font sizing +// Leave at 100%/16px +// --------------------------------------- +.font-size(@font-size: 16){ + @rem: round((@font-size / 16), 1); + font-size: (@font-size * 1px); + font-size: ~"@{rem}rem"; +} + +// Font smoothing +// --------------------------------------- +.font-smoothing(@mode: on) when (@mode = on) { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.font-smoothing(@mode: on) when (@mode = off) { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; +} \ No newline at end of file diff --git a/src/less/docs/normalize.less b/src/less/docs/normalize.less new file mode 100644 index 00000000..562891ab --- /dev/null +++ b/src/less/docs/normalize.less @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less new file mode 100644 index 00000000..c1facb67 --- /dev/null +++ b/src/less/plyr.less @@ -0,0 +1,431 @@ +// ========================================================================== +// HTML5 Media Player +// ========================================================================== + +// Variables +// ------------------------------- +// Colors +@blue: #3498DB; +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #cbd0d3; + +// Controls +@controls-bg: @gray-dark; +@control-color: @gray-light; +@control-color-active: @blue; +@control-color-inactive: @gray; +@control-spacing: 10px; + +// Progress +@progress-bg: lighten(@gray, 10%); +@progress-playing-bg: @blue; +@progress-buffered-bg: @gray; + +// Range +@range-track-height: 6px; +@range-track-bg: @gray; +@range-thumb-height: (@range-track-height * 2); +@range-thumb-width: (@range-track-height * 2); +@range-thumb-bg: @control-color; +@range-thumb-bg-focus: @control-color-active; + +// Breakpoints +@bp-control-split: 560px; // When controls split into left/right +@bg-captions-large: 768px; // When captions jump to the larger font size + +// Utility classes & mixins +// ------------------------------- +// Screen reader only +.sr-only { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; +} +// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ +.clearfix() { + zoom: 1; + &:before, + &:after { content: ""; display: table; } + &:after { clear: both; } +} + +// Tab focus styles +.tab-focus() { + outline: thin dotted #000; + outline-offset: 1px; +} + +// Range styling +// --------------------------------------- +.range-thumb() { + height: @range-thumb-height; + width: @range-thumb-width; + background: @range-thumb-bg; + border: 0; + border-radius: (@range-thumb-height / 2); + transition: background .3s ease; + cursor: ew-resize; +} +.range-track() { + height: @range-track-height; + background: @range-track-bg; + border: 0; + border-radius: (@range-track-height / 2); +} + +// 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; + max-width: 100%; + min-width: 290px; + overflow: hidden; // For the controls + + // border-box everything + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; + } + + // For video + &-video-wrapper { + position: relative; + } + video { + width: 100%; + height: auto; + vertical-align: middle; + } + + // Captions + &-captions { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 20px; + min-height: 2.5em; + color: #fff; + font-size: 16px; + font-weight: 600; + text-shadow: + -1px -1px 0 @gray, + 1px -1px 0 @gray, + -1px 1px 0 @gray, + 1px 1px 0 @gray; + text-align: center; + .font-smoothing(); + + @media (min-width: @bg-captions-large) { + font-size: 24px; + } + } + &.captions-active &-captions { + display: block; + } + + // Player controls + &-controls { + .clearfix(); + .font-smoothing(); + position: relative; + padding: (@control-spacing * 2) @control-spacing @control-spacing; + background: @controls-bg; + line-height: 1; + text-align: center; + + // Layout + &-sound { + display: block; + margin: @control-spacing auto 0; + } + @media (min-width: @bp-control-split) { + &-playback { + float: left; + } + &-sound { + float: right; + margin-top: 0; + } + } + + input + label, + button { + display: inline-block; + vertical-align: middle; + margin: 0 2px; + padding: (@control-spacing / 2) @control-spacing; + + transition: background .3s ease; + border-radius: 3px; + cursor: pointer; + + svg { + width: 18px; + height: 18px; + display: block; + fill: currentColor; + transition: fill .3s ease; + } + } + input + label, + 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; + } + input:focus + label, + button:focus { + .tab-focus(); + color: #fff; + } + button:hover, + input + label:hover { + background: @control-color-active; + color: #fff; + } + .icon-exit-fullscreen, + .icon-muted { + display: none; + } + .player-time { + display: inline-block; + vertical-align: middle; + margin-left: @control-spacing; + color: #fff; + font-weight: 600; + font-size: 14px; + .font-smoothing(); + } + } + + // Player progress + // element + &-progress { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: @control-spacing; + background: @progress-bg; + + &-buffer, + &-played { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0; + vertical-align: top; + + &[value] { + -webkit-appearance: none; + border: none; + background: transparent; + + + &::-webkit-progress-bar { + background: transparent; + } + + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + transition: width .1s ease; + } + &::-moz-progress-bar { + background: currentColor; + transition: width .1s ease; + } + } + } + &-played { + z-index: 2; + } + &-played[value] { + cursor: pointer; + color: @progress-playing-bg; + } + &-buffer[value] { + color: @progress-buffered-bg; + } + } + + // States + &-controls [data-player='pause'], + &.playing .player-controls [data-player='play'] { + display: none; + } + &.playing .player-controls [data-player='pause'] { + display: inline-block; + } + + // Muted + &.muted .player-controls .icon-muted { + display: block; + + & + svg { + display: none; + } + } + + // Volume control + // element + &-volume { + vertical-align: middle; + -webkit-appearance: none; + -moz-appearance: none; + //height: 6px; + width: 100px; + margin: 0 @control-spacing 0 0; + padding: 0; + cursor: pointer; + background: none; + + // Webkit + &::-webkit-slider-runnable-track { + .range-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -((@range-thumb-height - @range-track-height) / 2); + .range-thumb(); + } + + // Mozilla + &::-moz-range-track { + .range-track(); + } + &::-moz-range-thumb { + .range-thumb(); + } + + // Microsoft + &::-ms-track { + height: @range-track-height; + background: transparent; + border-color: transparent; + border-width: ((@range-thumb-height - @range-track-height) / 2) 0; + color: transparent; + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .range-track(); + } + &::-ms-thumb { + .range-thumb(); + } + + &:focus { + outline: 0; + + &::-webkit-slider-thumb { + background: @range-thumb-bg-focus; + } + &::-moz-range-thumb { + background: @range-thumb-bg-focus; + } + &::-ms-thumb { + background: @range-thumb-bg-focus; + } + } + } + + // Full screen mode + &-fullscreen, + &.fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + z-index: 10000000; + + .player-video-wrapper { + height: 100%; + width: 100%; + + video { + height: 100%; + } + .player-captions { + top: auto; + bottom: 90px; + + @media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) { + bottom: 60px; + } + @media (min-width: @bg-captions-large) { + bottom: 80px; + } + } + } + .player-controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + + .icon-exit-fullscreen { + display: block; + + & + svg { + display: none; + } + } + } + } + + // Some options are hidden by default + [data-player='captions'], + [data-player='captions'] + label, + [data-player='fullscreen'], + [data-player='fullscreen'] + label { + display: none; + } + &.captions-enabled [data-player='captions'], + &.captions-enabled [data-player='captions'] + label, + &.fullscreen-enabled [data-player='fullscreen'], + &.fullscreen-enabled [data-player='fullscreen'] + label { + display: inline-block; + } + + // Full browser view hides toggle + &-fullscreen [data-player='fullscreen'], + &-fullscreen [data-player='fullscreen'] + label { + display: none !important; + } +} \ No newline at end of file diff --git a/src/sprite/icon-bubble.svg b/src/sprite/icon-bubble.svg new file mode 100755 index 00000000..7090121a --- /dev/null +++ b/src/sprite/icon-bubble.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/sprite/icon-collapse.svg b/src/sprite/icon-collapse.svg new file mode 100644 index 00000000..d41e0402 --- /dev/null +++ b/src/sprite/icon-collapse.svg @@ -0,0 +1,13 @@ + + + + collapse + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-expand.svg b/src/sprite/icon-expand.svg new file mode 100644 index 00000000..5fd651bd --- /dev/null +++ b/src/sprite/icon-expand.svg @@ -0,0 +1,13 @@ + + + + expand + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg new file mode 100755 index 00000000..cc4ee6d1 --- /dev/null +++ b/src/sprite/icon-fast-forward.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/sprite/icon-muted.svg b/src/sprite/icon-muted.svg new file mode 100644 index 00000000..031da8d1 --- /dev/null +++ b/src/sprite/icon-muted.svg @@ -0,0 +1,14 @@ + + + + muted + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg new file mode 100644 index 00000000..ea2efe98 --- /dev/null +++ b/src/sprite/icon-pause.svg @@ -0,0 +1,13 @@ + + + + pause + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg new file mode 100755 index 00000000..ebe9ff57 --- /dev/null +++ b/src/sprite/icon-play.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/sprite/icon-refresh.svg b/src/sprite/icon-refresh.svg new file mode 100755 index 00000000..10ffb198 --- /dev/null +++ b/src/sprite/icon-refresh.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg new file mode 100644 index 00000000..7be18d37 --- /dev/null +++ b/src/sprite/icon-rewind.svg @@ -0,0 +1,10 @@ + + + + rewind + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/sprite/icon-sound.svg b/src/sprite/icon-sound.svg new file mode 100755 index 00000000..6c6ca54d --- /dev/null +++ b/src/sprite/icon-sound.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/templates/controls.html b/src/templates/controls.html new file mode 100644 index 00000000..3ae8d8c4 --- /dev/null +++ b/src/templates/controls.html @@ -0,0 +1,59 @@ +
+
+ + 0% played + + + 0% buffered + +
+ + + + + + + + Time + 00:00 + + + + + + + + + + + + + + +
\ No newline at end of file -- cgit v1.2.3