From 70646ca90798823932573f209eb30f6a8e82694f Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 7 Jun 2016 12:34:36 +0100 Subject: See changelog (fixes #265, #253, #257) --- demo/src/js/lib/classlist.js | 237 +++++++++++++++++++++++++++++++++++++++++++ demo/src/js/main.js | 184 +++++++++++++++++++++++++++++++++ 2 files changed, 421 insertions(+) create mode 100644 demo/src/js/lib/classlist.js create mode 100644 demo/src/js/main.js (limited to 'demo/src/js') diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js new file mode 100644 index 00000000..eac1e99e --- /dev/null +++ b/demo/src/js/lib/classlist.js @@ -0,0 +1,237 @@ +/* + * classList.js: Cross-browser full element.classList implementation. + * 1.1.20150312 + * + * By Eli Grey, http://eligrey.com + * License: Dedicated to the public domain. + * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md + */ + +/*global self, document, DOMException */ + +/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ + +if ("document" in self) { + +// Full polyfill for browsers with no classList support +if (!("classList" in document.createElement("_"))) { + +(function (view) { + +"use strict"; + +if (!('Element' in view)) return; + +var + classListProp = "classList" + , protoProp = "prototype" + , elemCtrProto = view.Element[protoProp] + , objCtr = Object + , strTrim = String[protoProp].trim || function () { + return this.replace(/^\s+|\s+$/g, ""); + } + , arrIndexOf = Array[protoProp].indexOf || function (item) { + var + i = 0 + , len = this.length + ; + for (; i < len; i++) { + if (i in this && this[i] === item) { + return i; + } + } + return -1; + } + // Vendors: please allow content code to instantiate DOMExceptions + , DOMEx = function (type, message) { + this.name = type; + this.code = DOMException[type]; + this.message = message; + } + , checkTokenAndGetIndex = function (classList, token) { + if (token === "") { + throw new DOMEx( + "SYNTAX_ERR" + , "An invalid or illegal string was specified" + ); + } + if (/\s/.test(token)) { + throw new DOMEx( + "INVALID_CHARACTER_ERR" + , "String contains an invalid character" + ); + } + return arrIndexOf.call(classList, token); + } + , ClassList = function (elem) { + var + trimmedClasses = strTrim.call(elem.getAttribute("class") || "") + , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] + , i = 0 + , len = classes.length + ; + for (; i < len; i++) { + this.push(classes[i]); + } + this._updateClassName = function () { + elem.setAttribute("class", this.toString()); + }; + } + , classListProto = ClassList[protoProp] = [] + , classListGetter = function () { + return new ClassList(this); + } +; +// Most DOMException implementations don't allow calling DOMException's toString() +// on non-DOMExceptions. Error's toString() is sufficient here. +DOMEx[protoProp] = Error[protoProp]; +classListProto.item = function (i) { + return this[i] || null; +}; +classListProto.contains = function (token) { + token += ""; + return checkTokenAndGetIndex(this, token) !== -1; +}; +classListProto.add = function () { + var + tokens = arguments + , i = 0 + , l = tokens.length + , token + , updated = false + ; + do { + token = tokens[i] + ""; + if (checkTokenAndGetIndex(this, token) === -1) { + this.push(token); + updated = true; + } + } + while (++i < l); + + if (updated) { + this._updateClassName(); + } +}; +classListProto.remove = function () { + var + tokens = arguments + , i = 0 + , l = tokens.length + , token + , updated = false + , index + ; + do { + token = tokens[i] + ""; + index = checkTokenAndGetIndex(this, token); + while (index !== -1) { + this.splice(index, 1); + updated = true; + index = checkTokenAndGetIndex(this, token); + } + } + while (++i < l); + + if (updated) { + this._updateClassName(); + } +}; +classListProto.toggle = function (token, force) { + token += ""; + + var + result = this.contains(token) + , method = result ? + force !== true && "remove" + : + force !== false && "add" + ; + + if (method) { + this[method](token); + } + + if (force === true || force === false) { + return force; + } else { + return !result; + } +}; +classListProto.toString = function () { + return this.join(" "); +}; + +if (objCtr.defineProperty) { + var classListPropDesc = { + get: classListGetter + , enumerable: true + , configurable: true + }; + try { + objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); + } catch (ex) { // IE 8 doesn't support enumerable:true + if (ex.number === -0x7FF5EC54) { + classListPropDesc.enumerable = false; + objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); + } + } +} else if (objCtr[protoProp].__defineGetter__) { + elemCtrProto.__defineGetter__(classListProp, classListGetter); +} + +}(self)); + +} else { +// There is full or partial native classList support, so just check if we need +// to normalize the add/remove and toggle APIs. + +(function () { + "use strict"; + + var testElement = document.createElement("_"); + + testElement.classList.add("c1", "c2"); + + // Polyfill for IE 10/11 and Firefox <26, where classList.add and + // classList.remove exist but support only one argument at a time. + if (!testElement.classList.contains("c2")) { + var createMethod = function(method) { + var original = DOMTokenList.prototype[method]; + + DOMTokenList.prototype[method] = function(token) { + var i, len = arguments.length; + + for (i = 0; i < len; i++) { + token = arguments[i]; + original.call(this, token); + } + }; + }; + createMethod('add'); + createMethod('remove'); + } + + testElement.classList.toggle("c3", false); + + // Polyfill for IE 10 and Firefox <24, where classList.toggle does not + // support the second argument. + if (testElement.classList.contains("c3")) { + var _toggle = DOMTokenList.prototype.toggle; + + DOMTokenList.prototype.toggle = function(token, force) { + if (1 in arguments && !this.contains(token) === !force) { + return force; + } else { + return _toggle.call(this, token); + } + }; + + } + + testElement = null; +}()); + +} + +} \ No newline at end of file diff --git a/demo/src/js/main.js b/demo/src/js/main.js new file mode 100644 index 00000000..719672bd --- /dev/null +++ b/demo/src/js/main.js @@ -0,0 +1,184 @@ +// ========================================================================== +// Plyr.io demo +// This code is purely for the plyr.io website +// Please see readme.md in the root or github.com/selz/plyr +// ========================================================================== + +/*global plyr*/ + + +// General functions +;(function() { + // Setup the player + var instances = plyr.setup({ + debug: true, + title: 'Video demo', + iconUrl: '../dist/plyr.svg', + tooltips: { + controls: true + }, + captions: { + defaultActive: true + } + }); + plyr.loadSprite('dist/demo.svg'); + + // Plyr returns an array regardless + var player = instances[0]; + + // Setup type toggle + var buttons = document.querySelectorAll('[data-source]'), + types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo' + }, + currentType = window.location.hash.replace('#', ''), + historySupport = (window.history && window.history.pushState); + + // Bind to each button + for (var i = buttons.length - 1; i >= 0; i--) { + buttons[i].addEventListener('click', function() { + var type = this.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + history.pushState({ 'type': type }, '', '#' + type); + } + }); + } + + // List for backwards/forwards + window.addEventListener('popstate', function(event) { + if(event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if(historySupport) { + var video = !currentType.length; + + // If there's no current type set, assume video + if(video) { + currentType = types.video; + } + + // Replace current history state + if(currentType in types) { + history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); + } + + // If it's not video, load the source + if(currentType !== types.video) { + newSource(currentType, true); + } + } + + // Toggle class on an element + function toggleClass(element, className, state) { + if (element) { + if (element.classList) { + element.classList[state ? 'add' : 'remove'](className); + } + else { + var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); + element.className = name + (state ? ' ' + className : ''); + } + } + } + + // Set a new source + function newSource(type, init) { + // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video + if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) { + return; + } + + switch(type) { + case types.video: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4' + }, + { + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', + type: 'video/webm' + }], + poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [{ + kind: 'captions', + label: 'English', + srclang:'en', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true + }] + }); + break; + + case types.audio: + player.source({ + type: 'audio', + title: 'Kishi Bashi – “It All Began With A Burst”', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + type: 'audio/mp3' + }, + { + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + type: 'audio/ogg' + }] + }); + break; + + case types.youtube: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'bTqVqk7FSmY', + type: 'youtube' + }] + }); + break; + + case types.vimeo: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: '143418951', + type: 'vimeo' + }] + }); + break; + } + + // Set the current type for next time + currentType = type; + + // Remove active classes + for (var x = buttons.length - 1; x >= 0; x--) { + toggleClass(buttons[x].parentElement, 'active', false); + } + + // Set active on parent + toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); + } +})(); + +// Google analytics +// For demo site (http://[www.]plyr.io) only +if(document.domain.indexOf('plyr.io') > -1) { + (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-40881672-11', 'auto'); + ga('send', 'pageview'); +} -- cgit v1.2.3 From 98792168e4d76ab126f3fb643b9cc7d462b5d1b2 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 9 Jun 2016 09:49:01 +0100 Subject: Changes to setup return value, SVG bug fix (fixes #269) --- demo/src/js/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 719672bd..093d35d3 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -6,7 +6,6 @@ /*global plyr*/ - // General functions ;(function() { // Setup the player @@ -24,7 +23,7 @@ plyr.loadSprite('dist/demo.svg'); // Plyr returns an array regardless - var player = instances[0]; + var player = instances[0].plyr; // Setup type toggle var buttons = document.querySelectorAll('[data-source]'), -- cgit v1.2.3 From c7d28b09c0acd79fa6370023f0c1f1938b033d24 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 9 Jun 2016 11:05:07 +0100 Subject: Fixed event bubbling --- demo/src/js/main.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 093d35d3..1eeab54d 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -8,6 +8,8 @@ // General functions ;(function() { + document.body.addEventListener('ready', function(event) { console.log(event); }); + // Setup the player var instances = plyr.setup({ debug: true, -- cgit v1.2.3 From 9b75436380bade755a7d54347dd85885b8230dd5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:39:00 +1000 Subject: v1.8.3 - Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback - Fixed IE11 icon loading (fixes #269) - Updated screenshot (fixes #281) - Added WordPress plugin (fixes #239) - Added Neos plugin - Added HLS, Shaka and dash.js examples (see #235 for more) - Improvements for controls hiding and showing on touch devices --- demo/src/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 1eeab54d..f4abc7b7 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -15,7 +15,7 @@ debug: true, title: 'Video demo', iconUrl: '../dist/plyr.svg', - tooltips: { + tooltips: { controls: true }, captions: { -- cgit v1.2.3 From bf9de231d8046cd6a5ec90e22bf8585019cbd1d0 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 10 Jul 2016 20:45:54 +1000 Subject: Styling minor tweaks --- demo/src/js/main.js | 316 ++++++++++++++++++++++++++-------------------------- 1 file changed, 158 insertions(+), 158 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index f4abc7b7..bdd7febe 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -8,78 +8,78 @@ // General functions ;(function() { - document.body.addEventListener('ready', function(event) { console.log(event); }); - - // Setup the player - var instances = plyr.setup({ - debug: true, - title: 'Video demo', - iconUrl: '../dist/plyr.svg', - tooltips: { - controls: true - }, - captions: { - defaultActive: true - } - }); - plyr.loadSprite('dist/demo.svg'); - - // Plyr returns an array regardless - var player = instances[0].plyr; - - // Setup type toggle - var buttons = document.querySelectorAll('[data-source]'), - types = { - video: 'video', - audio: 'audio', - youtube: 'youtube', - vimeo: 'vimeo' - }, - currentType = window.location.hash.replace('#', ''), - historySupport = (window.history && window.history.pushState); - - // Bind to each button - for (var i = buttons.length - 1; i >= 0; i--) { - buttons[i].addEventListener('click', function() { - var type = this.getAttribute('data-source'); - - newSource(type); - - if (historySupport) { - history.pushState({ 'type': type }, '', '#' + type); - } - }); - } - - // List for backwards/forwards - window.addEventListener('popstate', function(event) { - if(event.state && 'type' in event.state) { - newSource(event.state.type); - } - }); - - // On load - if(historySupport) { - var video = !currentType.length; - - // If there's no current type set, assume video - if(video) { - currentType = types.video; - } - - // Replace current history state - if(currentType in types) { - history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); - } - - // If it's not video, load the source - if(currentType !== types.video) { - newSource(currentType, true); - } - } - - // Toggle class on an element - function toggleClass(element, className, state) { + document.body.addEventListener('ready', function(event) { console.log(event); }); + + // Setup the player + var instances = plyr.setup({ + debug: true, + title: 'Video demo', + iconUrl: '../dist/plyr.svg', + tooltips: { + controls: true + }, + captions: { + defaultActive: true + } + }); + plyr.loadSprite('dist/demo.svg'); + + // Plyr returns an array regardless + var player = instances[0].plyr; + + // Setup type toggle + var buttons = document.querySelectorAll('[data-source]'), + types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo' + }, + currentType = window.location.hash.replace('#', ''), + historySupport = (window.history && window.history.pushState); + + // Bind to each button + for (var i = buttons.length - 1; i >= 0; i--) { + buttons[i].addEventListener('click', function() { + var type = this.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + history.pushState({ 'type': type }, '', '#' + type); + } + }); + } + + // List for backwards/forwards + window.addEventListener('popstate', function(event) { + if(event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if(historySupport) { + var video = !currentType.length; + + // If there's no current type set, assume video + if(video) { + currentType = types.video; + } + + // Replace current history state + if(currentType in types) { + history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); + } + + // If it's not video, load the source + if(currentType !== types.video) { + newSource(currentType, true); + } + } + + // Toggle class on an element + function toggleClass(element, className, state) { if (element) { if (element.classList) { element.classList[state ? 'add' : 'remove'](className); @@ -91,95 +91,95 @@ } } - // Set a new source - function newSource(type, init) { - // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video - if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) { - return; - } - - switch(type) { - case types.video: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [{ - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', - type: 'video/mp4' - }, - { - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', - type: 'video/webm' - }], - poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', - tracks: [{ - kind: 'captions', - label: 'English', - srclang:'en', - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true - }] - }); - break; - - case types.audio: - player.source({ - type: 'audio', - title: 'Kishi Bashi – “It All Began With A Burst”', - sources: [{ - src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', - type: 'audio/mp3' - }, - { - src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', - type: 'audio/ogg' - }] - }); - break; - - case types.youtube: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [{ - src: 'bTqVqk7FSmY', - type: 'youtube' - }] - }); - break; - - case types.vimeo: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [{ - src: '143418951', - type: 'vimeo' - }] - }); - break; - } - - // Set the current type for next time - currentType = type; - - // Remove active classes - for (var x = buttons.length - 1; x >= 0; x--) { - toggleClass(buttons[x].parentElement, 'active', false); - } - - // Set active on parent - toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); - } + // Set a new source + function newSource(type, init) { + // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video + if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) { + return; + } + + switch(type) { + case types.video: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4' + }, + { + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', + type: 'video/webm' + }], + poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [{ + kind: 'captions', + label: 'English', + srclang:'en', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true + }] + }); + break; + + case types.audio: + player.source({ + type: 'audio', + title: 'Kishi Bashi – “It All Began With A Burst”', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + type: 'audio/mp3' + }, + { + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + type: 'audio/ogg' + }] + }); + break; + + case types.youtube: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'bTqVqk7FSmY', + type: 'youtube' + }] + }); + break; + + case types.vimeo: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: '143418951', + type: 'vimeo' + }] + }); + break; + } + + // Set the current type for next time + currentType = type; + + // Remove active classes + for (var x = buttons.length - 1; x >= 0; x--) { + toggleClass(buttons[x].parentElement, 'active', false); + } + + // Set active on parent + toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); + } })(); // Google analytics // For demo site (http://[www.]plyr.io) only if(document.domain.indexOf('plyr.io') > -1) { - (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-40881672-11', 'auto'); - ga('send', 'pageview'); + (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-40881672-11', 'auto'); + ga('send', 'pageview'); } -- cgit v1.2.3