From ac7e1ab2997c667fb578bd1a1a639e35275dcd77 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Mon, 5 Sep 2016 18:00:11 +0800 Subject: test: add `speed-up` button --- demo/src/js/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 3337df88..80dab906 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -20,7 +20,8 @@ }, captions: { defaultActive: true - } + }, + controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); -- cgit v1.2.3 From 37840c384414401a914eb43aa7a93eb0e17ee68e Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 6 Sep 2016 23:48:09 +1000 Subject: Working on settings menu --- demo/src/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 80dab906..158736ae 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -21,7 +21,7 @@ captions: { defaultActive: true }, - controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] + controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); @@ -95,7 +95,7 @@ // 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)) { + if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { return; } -- cgit v1.2.3 From 801ed63be5e415e76d989ee96cf18e95a86ef82f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 23 Oct 2016 21:21:42 +1100 Subject: Work on PiP --- 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 158736ae..5302604b 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -21,7 +21,7 @@ captions: { defaultActive: true }, - controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] + //controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); -- cgit v1.2.3 From cc5f37392f8c33cd4e343d76d509d2082cdc3133 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 11 Jan 2017 20:14:41 +1100 Subject: ToDo notes, code tidy up --- demo/src/js/main.js | 124 ++++++++++++++++++++++++++++------------------------ 1 file changed, 67 insertions(+), 57 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 5302604b..d7c5f42a 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -7,21 +7,21 @@ /*global plyr*/ // General functions -;(function() { +(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', + debug: true, + title: 'Video demo', + iconUrl: '../dist/plyr.svg', tooltips: { - controls: true + controls: true }, captions: { - defaultActive: true + defaultActive: true }, - //controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] + controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); @@ -31,10 +31,10 @@ // Setup type toggle var buttons = document.querySelectorAll('[data-source]'), types = { - video: 'video', - audio: 'audio', - youtube: 'youtube', - vimeo: 'vimeo' + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo' }, currentType = window.location.hash.replace('#', ''), historySupport = (window.history && window.history.pushState); @@ -47,34 +47,38 @@ newSource(type); if (historySupport) { - history.pushState({ 'type': type }, '', '#' + type); + history.pushState({ + 'type': type + }, '', '#' + type); } }); } // List for backwards/forwards window.addEventListener('popstate', function(event) { - if(event.state && 'type' in event.state) { + if (event.state && 'type' in event.state) { newSource(event.state.type); } }); // On load - if(historySupport) { + if (historySupport) { var video = !currentType.length; // If there's no current type set, assume video - if(video) { + if (video) { currentType = types.video; } // Replace current history state - if(currentType in types) { - history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); + if (currentType in types) { + history.replaceState({ + 'type': currentType + }, '', (video ? '' : '#' + currentType)); } // If it's not video, load the source - if(currentType !== types.video) { + if (currentType !== types.video) { newSource(currentType, true); } } @@ -84,8 +88,7 @@ if (element) { if (element.classList) { element.classList[state ? 'add' : 'remove'](className); - } - else { + } else { var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); element.className = name + (state ? ' ' + className : ''); } @@ -95,29 +98,29 @@ // 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)) { + if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { return; } - switch(type) { + switch (type) { case types.video: player.source({ - type: 'video', - title: 'View From A Blue Moon', + 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.mp4', + type: 'video/mp4' }, - { - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', - type: 'video/webm' + { + 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', + 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 }] }); @@ -125,37 +128,37 @@ case types.audio: player.source({ - type: 'audio', - title: 'Kishi Bashi – “It All Began With A Burst”', + 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.mp3', + type: 'audio/mp3' }, - { - src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', - type: 'audio/ogg' + { + 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', + type: 'video', + title: 'View From A Blue Moon', sources: [{ - src: 'bTqVqk7FSmY', - type: 'youtube' + src: 'bTqVqk7FSmY', + type: 'youtube' }] }); break; case types.vimeo: player.source({ - type: 'video', - title: 'View From A Blue Moon', + type: 'video', + title: 'View From A Blue Moon', sources: [{ - src: '143418951', - type: 'vimeo' + src: '143418951', + type: 'vimeo' }] }); break; @@ -170,17 +173,24 @@ } // Set active on parent - toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); + 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'); +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 13973125fbc18768400c55b7eece1ac4649b5386 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Mar 2017 10:08:39 +1100 Subject: Loop variable naming --- 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 d7c5f42a..2b8deb91 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -21,7 +21,7 @@ captions: { defaultActive: true }, - controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); -- cgit v1.2.3 From 18bf4d84b9dc087540aa0de633e1e6eb107e2b42 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 28 Mar 2017 00:12:33 +1100 Subject: Menu creation (WIP) --- demo/src/js/main.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2b8deb91..2dfdeb20 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -108,12 +108,8 @@ 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' + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4' }], poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [{ -- cgit v1.2.3 From ff2d27f8e5bacdc26792b7d7aed46a3377c0ea89 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 16 Apr 2017 13:00:57 +1000 Subject: Cleanup events and references --- demo/src/js/main.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2dfdeb20..b1d689f6 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -21,7 +21,17 @@ captions: { defaultActive: true }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] + controls: [ + 'play-large', + 'play', + 'progress', + 'current-time', + 'mute', + 'volume', + 'captions', + 'settings', + 'fullscreen' + ] }); plyr.loadSprite('dist/demo.svg'); -- cgit v1.2.3 From 9b2396f5ff266284bb6c526413d14b075e131d3d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 17 Apr 2017 01:28:52 +1000 Subject: Airplay and PiP --- demo/src/js/main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index b1d689f6..7b62baf7 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -30,7 +30,9 @@ 'volume', 'captions', 'settings', - 'fullscreen' + 'fullscreen', + 'pip', + 'airplay' ] }); plyr.loadSprite('dist/demo.svg'); -- cgit v1.2.3 From 04b8d0bac87287a55ecd1548ae21c2343f2b2071 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 25 Apr 2017 19:31:34 +1000 Subject: Tweaks --- demo/src/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 7b62baf7..fa2797b9 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -154,7 +154,7 @@ type: 'video', title: 'View From A Blue Moon', sources: [{ - src: 'bTqVqk7FSmY', + src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', type: 'youtube' }] }); @@ -165,7 +165,7 @@ type: 'video', title: 'View From A Blue Moon', sources: [{ - src: '143418951', + src: 'https://vimeo.com/147860358', type: 'vimeo' }] }); -- cgit v1.2.3 From b499622eb8f9b45c674bb8393f9297f5f9906ff7 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 25 Apr 2017 20:45:25 +1000 Subject: Started on Vimeo captions --- 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 fa2797b9..b3b6f517 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -165,7 +165,7 @@ type: 'video', title: 'View From A Blue Moon', sources: [{ - src: 'https://vimeo.com/147860358', + src: 'https://vimeo.com/76979871', type: 'vimeo' }] }); -- cgit v1.2.3 From 966c3d875d68a096b6aaa5b86e3b9ae4d93696b5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 16 May 2017 09:58:53 +1000 Subject: Single instance only --- demo/src/js/lib/sprite.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++ demo/src/js/main.js | 43 +++++++++++------------ 2 files changed, 110 insertions(+), 22 deletions(-) create mode 100644 demo/src/js/lib/sprite.js (limited to 'demo/src/js') diff --git a/demo/src/js/lib/sprite.js b/demo/src/js/lib/sprite.js new file mode 100644 index 00000000..bcd8a0b7 --- /dev/null +++ b/demo/src/js/lib/sprite.js @@ -0,0 +1,89 @@ +// ========================================================================== +// SVG sprite loading and caching +// This file should be at the top of the body to avoid a flash +// Usage: loadSprite('https://cdn.com/path/to/sprite.svg', 'sprite-id'); +// The second argument is optional but prevents loading twice +// ========================================================================== + +(function() { + window.loadSprite = function(url, id) { + if (typeof url !== "string") { + return; + } + + var body = document.body; + var prefix = "cache-"; + var hasId = typeof id === "string"; + var isCached = false; + + // Check for *actual* storage support + var cacheSupported = (function() { + if (!hasId) { + return false; + } + var test = '___test'; + try { + localStorage.setItem(test, test); + localStorage.removeItem(test); + return true; + } catch (e) { + return false; + } + })(); + + function updateSprite(container, data) { + // Inject content + container.innerHTML = data; + + // Inject the SVG to the body + body.insertBefore(container, body.childNodes[0]); + } + + // Only load once + if (!hasId || document.querySelectorAll("#" + id).length === 0) { + // Create container + var container = document.createElement("div"); + container.setAttribute("hidden", ""); + + if (hasId) { + container.setAttribute("id", id); + } + + // Check in cache + if (cacheSupported) { + var cached = localStorage.getItem(prefix + id); + isCached = cached !== null; + + if (isCached) { + var data = JSON.parse(cached); + updateSprite(container, data.content); + } + } + + // ReSharper disable once InconsistentNaming + var xhr = new XMLHttpRequest(); + + // XHR for Chrome/Firefox/Opera/Safari + if ("withCredentials" in xhr) { + xhr.open("GET", url, true); + } + // Not supported + else { + return; + } + + // Once loaded, inject to container and body + xhr.onload = function() { + if (cacheSupported) { + localStorage.setItem(prefix + id, JSON.stringify({ + content: xhr.responseText + })); + } + + updateSprite(container, xhr.responseText); + }; + + xhr.send(); + } + } +})(); diff --git a/demo/src/js/main.js b/demo/src/js/main.js index b3b6f517..b5d5ad15 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -4,16 +4,18 @@ // Please see readme.md in the root or github.com/selz/plyr // ========================================================================== -/*global plyr*/ +/*global Plyr*/ // General functions (function() { - //document.body.addEventListener('ready', function(event) { console.log(event); }); + document.body.addEventListener('ready', function(event) { + console.log(event); + }); // Setup the player - var instances = plyr.setup({ + var player = new Plyr('#player', { debug: true, - title: 'Video demo', + title: 'View From A Blue Moon', iconUrl: '../dist/plyr.svg', tooltips: { controls: true @@ -35,25 +37,22 @@ 'airplay' ] }); - plyr.loadSprite('dist/demo.svg'); - - // Plyr returns an array regardless - var player = instances[0]; + window.loadSprite('dist/demo.svg', 'demo-sprite'); // 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); + var buttons = document.querySelectorAll('[data-source]'); + var types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo' + }; + var currentType = window.location.hash.replace('#', ''); + var historySupport = (window.history && window.history.pushState); // Bind to each button - for (var i = buttons.length - 1; i >= 0; i--) { - buttons[i].addEventListener('click', function() { + [].forEach.call(buttons, function(button) { + button.addEventListener('click', function() { var type = this.getAttribute('data-source'); newSource(type); @@ -64,7 +63,7 @@ }, '', '#' + type); } }); - } + }); // List for backwards/forwards window.addEventListener('popstate', function(event) { @@ -199,6 +198,6 @@ if (document.domain.indexOf('plyr.io') > -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'); + window.ga('create', 'UA-40881672-11', 'auto'); + window.ga('send', 'pageview'); } -- cgit v1.2.3 From e1a19faf268c7b49218c2f29e20bb8e4b0cbc03e Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 16 May 2017 10:20:58 +1000 Subject: URL updates --- demo/src/js/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index b5d5ad15..d8586685 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -1,16 +1,16 @@ // ========================================================================== // Plyr.io demo // This code is purely for the plyr.io website -// Please see readme.md in the root or github.com/selz/plyr +// Please see readme.md in the root or github.com/sampotts/plyr // ========================================================================== /*global Plyr*/ // General functions (function() { - document.body.addEventListener('ready', function(event) { + /*document.body.addEventListener('ready', function(event) { console.log(event); - }); + });*/ // Setup the player var player = new Plyr('#player', { -- cgit v1.2.3 From 857dfe838c8b977abbb9ca9189f840852f42ec52 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 21 May 2017 17:50:07 +1000 Subject: Menu toggle --- demo/src/js/main.js | 1 + 1 file changed, 1 insertion(+) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index d8586685..2a94195d 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -37,6 +37,7 @@ 'airplay' ] }); + window.loadSprite('dist/demo.svg', 'demo-sprite'); // Setup type toggle -- cgit v1.2.3 From 86c900418322353239a40fe2e061a3f2fbc786dc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 22 May 2017 08:55:45 +1000 Subject: More work on the menu --- demo/src/js/main.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2a94195d..87c71756 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -1,12 +1,11 @@ // ========================================================================== // Plyr.io demo -// This code is purely for the plyr.io website +// This code is purely for the https://plyr.io website // Please see readme.md in the root or github.com/sampotts/plyr // ========================================================================== /*global Plyr*/ -// General functions (function() { /*document.body.addEventListener('ready', function(event) { console.log(event); @@ -186,15 +185,16 @@ })(); // Google analytics -// For demo site (http://[www.]plyr.io) only -if (document.domain.indexOf('plyr.io') > -1) { +// For demo site (https://plyr.io) only +if (window.location.host === 'plyr.io') { (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]; + }; + 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) -- cgit v1.2.3 From 7daa08c32f9a85512e4ff946fcbb572bf4bb1c7b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 4 Jun 2017 15:27:37 +1000 Subject: Change to proper constructor + prototypes --- demo/src/js/main.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 87c71756..ee45d118 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -37,6 +37,10 @@ ] }); + // Expose for testing + window.player = player; + + // Load demo sprite window.loadSprite('dist/demo.svg', 'demo-sprite'); // Setup type toggle -- cgit v1.2.3 From bc61dac4c5aee29c3e2a366deaa569a4b62e28cd Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 4 Jun 2017 18:30:37 +1000 Subject: Tidy up, fixing destroy --- demo/src/js/main.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index ee45d118..3d44b94f 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -185,6 +185,12 @@ // Set active on parent toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true); + + // Show cite + [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { + cite.setAttribute('hidden', ''); + }); + document.querySelector('.plyr__cite--' + type).removeAttribute('hidden'); } })(); -- cgit v1.2.3 From 0148c76c30d87dc6df79a8ef7264d0efd29988a3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 16 Aug 2017 00:36:23 +1000 Subject: ESLint, comments, quality and speed menus --- demo/src/js/main.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 3d44b94f..2ff94121 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -142,12 +142,11 @@ 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' + 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; @@ -200,15 +199,15 @@ if (window.location.host === 'plyr.io') { (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].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) + m.parentNode.insertBefore(a, m); })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); window.ga('create', 'UA-40881672-11', 'auto'); window.ga('send', 'pageview'); -} +} \ No newline at end of file -- cgit v1.2.3 From 2bba1f30e28f402ef96b5f5181dd75788b0e25c9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 3 Sep 2017 14:36:55 +1000 Subject: Fixing Vimeo captions, WIP on settings menu, prettier and VS code settings --- demo/src/js/main.js | 101 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 64 insertions(+), 37 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2ff94121..fb84957a 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -52,7 +52,7 @@ vimeo: 'vimeo' }; var currentType = window.location.hash.replace('#', ''); - var historySupport = (window.history && window.history.pushState); + var historySupport = window.history && window.history.pushState; // Bind to each button [].forEach.call(buttons, function(button) { @@ -62,9 +62,13 @@ newSource(type); if (historySupport) { - history.pushState({ - 'type': type - }, '', '#' + type); + history.pushState( + { + type: type + }, + '', + '#' + type + ); } }); }); @@ -87,9 +91,13 @@ // Replace current history state if (currentType in types) { - history.replaceState({ - 'type': currentType - }, '', (video ? '' : '#' + currentType)); + history.replaceState( + { + type: currentType + }, + '', + video ? '' : '#' + currentType + ); } // If it's not video, load the source @@ -122,18 +130,28 @@ 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' - }], + sources: [ + { + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4' + } + ], 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 - }] + 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 + }, + { + kind: 'captions', + label: 'French', + srclang: 'fr', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.fr.vtt' + } + ] }); break; @@ -141,13 +159,16 @@ 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' - }] + 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; @@ -155,10 +176,12 @@ player.source({ type: 'video', title: 'View From A Blue Moon', - sources: [{ - src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', - type: 'youtube' - }] + sources: [ + { + src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', + type: 'youtube' + } + ] }); break; @@ -166,10 +189,12 @@ player.source({ type: 'video', title: 'View From A Blue Moon', - sources: [{ - src: 'https://vimeo.com/76979871', - type: 'vimeo' - }] + sources: [ + { + src: 'https://vimeo.com/76979871', + type: 'vimeo' + } + ] }); break; } @@ -198,9 +223,11 @@ if (window.location.host === 'plyr.io') { (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] = + 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]; @@ -210,4 +237,4 @@ if (window.location.host === 'plyr.io') { })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); window.ga('create', 'UA-40881672-11', 'auto'); window.ga('send', 'pageview'); -} \ No newline at end of file +} -- cgit v1.2.3 From 15cffad89e05a66c999eca2e9e8df60a1a2e7ecf Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 2 Oct 2017 14:54:35 +1100 Subject: CDN URLs --- demo/src/js/main.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index fb84957a..2442b01f 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -132,24 +132,24 @@ title: 'View From A Blue Moon', sources: [ { - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', type: 'video/mp4' } ], - poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', + poster: 'https://cdn.plyr.io/static/demo/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', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', default: true }, { kind: 'captions', label: 'French', srclang: 'fr', - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.fr.vtt' + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt' } ] }); @@ -161,11 +161,11 @@ 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', + src: 'https://cdn.plyr.io/static/demo/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', + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', type: 'audio/ogg' } ] -- cgit v1.2.3 From 378aa159b8d91b2d9950575141a6ee67e7db350c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 25 Oct 2017 23:59:53 +1100 Subject: Docs/demo refresh --- demo/src/js/lib/tab-focus.js | 26 ++++++++++++++++++ demo/src/js/main.js | 63 +++++++++++++++++++++++--------------------- 2 files changed, 59 insertions(+), 30 deletions(-) create mode 100644 demo/src/js/lib/tab-focus.js (limited to 'demo/src/js') diff --git a/demo/src/js/lib/tab-focus.js b/demo/src/js/lib/tab-focus.js new file mode 100644 index 00000000..06e51203 --- /dev/null +++ b/demo/src/js/lib/tab-focus.js @@ -0,0 +1,26 @@ +// ========================================================================== +// tab-focus.js +// Detect keyboard tabbing +// ========================================================================== + +(function() { + var className = 'tab-focus'; + + // Remove class on blur + document.addEventListener('focusout', function(event) { + event.target.classList.remove(className); + }); + + // Add classname to tabbed elements + document.addEventListener('keydown', function(event) { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + window.setTimeout(function() { + document.activeElement.classList.add(className); + }, 0); + }); +})(); diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2442b01f..16c31f1c 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -7,6 +7,14 @@ /*global Plyr*/ (function() { + if (window.shr) { + window.shr.setup({ + count: { + classname: 'button__count', + }, + }); + } + /*document.body.addEventListener('ready', function(event) { console.log(event); });*/ @@ -17,10 +25,10 @@ title: 'View From A Blue Moon', iconUrl: '../dist/plyr.svg', tooltips: { - controls: true + controls: true, }, captions: { - defaultActive: true + defaultActive: true, }, controls: [ 'play-large', @@ -33,8 +41,8 @@ 'settings', 'fullscreen', 'pip', - 'airplay' - ] + 'airplay', + ], }); // Expose for testing @@ -49,7 +57,7 @@ video: 'video', audio: 'audio', youtube: 'youtube', - vimeo: 'vimeo' + vimeo: 'vimeo', }; var currentType = window.location.hash.replace('#', ''); var historySupport = window.history && window.history.pushState; @@ -64,7 +72,7 @@ if (historySupport) { history.pushState( { - type: type + type: type, }, '', '#' + type @@ -93,7 +101,7 @@ if (currentType in types) { history.replaceState( { - type: currentType + type: currentType, }, '', video ? '' : '#' + currentType @@ -109,12 +117,7 @@ // 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 : ''); - } + element.classList[state ? 'add' : 'remove'](className); } } @@ -133,8 +136,8 @@ sources: [ { src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', - type: 'video/mp4' - } + type: 'video/mp4', + }, ], poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ @@ -143,15 +146,15 @@ label: 'English', srclang: 'en', src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true + default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt' - } - ] + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + }, + ], }); break; @@ -162,13 +165,13 @@ sources: [ { src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', - type: 'audio/mp3' + type: 'audio/mp3', }, { src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', - type: 'audio/ogg' - } - ] + type: 'audio/ogg', + }, + ], }); break; @@ -179,9 +182,9 @@ sources: [ { src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', - type: 'youtube' - } - ] + type: 'youtube', + }, + ], }); break; @@ -192,9 +195,9 @@ sources: [ { src: 'https://vimeo.com/76979871', - type: 'vimeo' - } - ] + type: 'vimeo', + }, + ], }); break; } @@ -208,7 +211,7 @@ } // Set active on parent - toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true); + toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true); // Show cite [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { -- cgit v1.2.3 From 959b5a20e39c2ba4a05c6e417c02184ca24804cd Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 26 Oct 2017 00:10:56 +1100 Subject: Inlined SVGs, fixed build --- demo/src/js/lib/sprite.js | 89 ----------------------------------------------- demo/src/js/main.js | 3 -- 2 files changed, 92 deletions(-) delete mode 100644 demo/src/js/lib/sprite.js (limited to 'demo/src/js') diff --git a/demo/src/js/lib/sprite.js b/demo/src/js/lib/sprite.js deleted file mode 100644 index bcd8a0b7..00000000 --- a/demo/src/js/lib/sprite.js +++ /dev/null @@ -1,89 +0,0 @@ -// ========================================================================== -// SVG sprite loading and caching -// This file should be at the top of the body to avoid a flash -// Usage: loadSprite('https://cdn.com/path/to/sprite.svg', 'sprite-id'); -// The second argument is optional but prevents loading twice -// ========================================================================== - -(function() { - window.loadSprite = function(url, id) { - if (typeof url !== "string") { - return; - } - - var body = document.body; - var prefix = "cache-"; - var hasId = typeof id === "string"; - var isCached = false; - - // Check for *actual* storage support - var cacheSupported = (function() { - if (!hasId) { - return false; - } - var test = '___test'; - try { - localStorage.setItem(test, test); - localStorage.removeItem(test); - return true; - } catch (e) { - return false; - } - })(); - - function updateSprite(container, data) { - // Inject content - container.innerHTML = data; - - // Inject the SVG to the body - body.insertBefore(container, body.childNodes[0]); - } - - // Only load once - if (!hasId || document.querySelectorAll("#" + id).length === 0) { - // Create container - var container = document.createElement("div"); - container.setAttribute("hidden", ""); - - if (hasId) { - container.setAttribute("id", id); - } - - // Check in cache - if (cacheSupported) { - var cached = localStorage.getItem(prefix + id); - isCached = cached !== null; - - if (isCached) { - var data = JSON.parse(cached); - updateSprite(container, data.content); - } - } - - // ReSharper disable once InconsistentNaming - var xhr = new XMLHttpRequest(); - - // XHR for Chrome/Firefox/Opera/Safari - if ("withCredentials" in xhr) { - xhr.open("GET", url, true); - } - // Not supported - else { - return; - } - - // Once loaded, inject to container and body - xhr.onload = function() { - if (cacheSupported) { - localStorage.setItem(prefix + id, JSON.stringify({ - content: xhr.responseText - })); - } - - updateSprite(container, xhr.responseText); - }; - - xhr.send(); - } - } -})(); diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 16c31f1c..981f691a 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -48,9 +48,6 @@ // Expose for testing window.player = player; - // Load demo sprite - window.loadSprite('dist/demo.svg', 'demo-sprite'); - // Setup type toggle var buttons = document.querySelectorAll('[data-source]'); var types = { -- cgit v1.2.3 From dd9d5c8898bd5e58c6faec13d6213b8fe079446a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 27 Oct 2017 15:06:16 +1100 Subject: Linting and minor changes --- demo/src/js/main.js | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 981f691a..bc2ea0aa 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -30,19 +30,7 @@ captions: { defaultActive: true, }, - controls: [ - 'play-large', - 'play', - 'progress', - 'current-time', - 'mute', - 'volume', - 'captions', - 'settings', - 'fullscreen', - 'pip', - 'airplay', - ], + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'], }); // Expose for testing @@ -67,13 +55,7 @@ newSource(type); if (historySupport) { - history.pushState( - { - type: type, - }, - '', - '#' + type - ); + history.pushState({ type: type }, '', '#' + type); } }); }); -- cgit v1.2.3 From 1cc2930dc0b81183bc47442f5ad9b5d8df94cc5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 14:25:28 +1100 Subject: ES6-ified --- demo/src/js/demo.js | 260 +++++++++++++++++++++++++++++++++++++++++++ demo/src/js/lib/classlist.js | 237 --------------------------------------- demo/src/js/lib/tab-focus.js | 26 ----- demo/src/js/main.js | 222 ------------------------------------ 4 files changed, 260 insertions(+), 485 deletions(-) create mode 100644 demo/src/js/demo.js delete mode 100644 demo/src/js/lib/classlist.js delete mode 100644 demo/src/js/lib/tab-focus.js delete mode 100644 demo/src/js/main.js (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js new file mode 100644 index 00000000..eef49596 --- /dev/null +++ b/demo/src/js/demo.js @@ -0,0 +1,260 @@ +// ========================================================================== +// Plyr.io demo +// This code is purely for the https://plyr.io website +// Please see readme.md in the root or github.com/sampotts/plyr +// ========================================================================== + +document.addEventListener('DOMContentLoaded', () => { + if (window.shr) { + window.shr.setup({ + count: { + classname: 'button__count', + }, + }); + } + + // Setup tab focus + const tabClassName = 'tab-focus'; + + // Remove class on blur + document.addEventListener('focusout', event => { + event.target.classList.remove(tabClassName); + }); + + // Add classname to tabbed elements + document.addEventListener('keydown', event => { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + window.setTimeout(() => { + document.activeElement.classList.add(tabClassName); + }, 0); + }); + + /* document.body.addEventListener('ready', function(event) { + console.log(event); + }); */ + + // Setup the player + const player = new window.Plyr('#player', { + debug: true, + title: 'View From A Blue Moon', + iconUrl: '../dist/plyr.svg', + tooltips: { + controls: true, + }, + captions: { + active: true, + }, + controls: [ + 'play-large', + 'play', + 'progress', + 'current-time', + 'mute', + 'volume', + 'captions', + 'settings', + 'fullscreen', + 'pip', + 'airplay', + ], + }); + + // Expose for testing + window.player = player; + + // Setup type toggle + const buttons = document.querySelectorAll('[data-source]'); + const types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo', + }; + let currentType = window.location.hash.replace('#', ''); + const historySupport = window.history && window.history.pushState; + + // Toggle class on an element + function toggleClass(element, className, state) { + if (element) { + element.classList[state ? 'add' : 'remove'](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.src = { + type: 'video', + title: 'View From A Blue Moon', + sources: [ + { + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4', + }, + ], + poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [ + { + kind: 'captions', + label: 'English', + srclang: 'en', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true, + }, + { + kind: 'captions', + label: 'French', + srclang: 'fr', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + }, + ], + }; + + break; + + case types.audio: + player.src = { + type: 'audio', + title: 'Kishi Bashi – “It All Began With A Burst”', + sources: [ + { + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + type: 'audio/mp3', + }, + { + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + type: 'audio/ogg', + }, + ], + }; + + break; + + case types.youtube: + player.src = { + type: 'video', + title: 'View From A Blue Moon', + sources: [ + { + src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', + type: 'youtube', + }, + ], + }; + + break; + + case types.vimeo: + player.src = { + type: 'video', + title: 'View From A Blue Moon', + sources: [ + { + src: 'https://vimeo.com/76979871', + type: 'vimeo', + }, + ], + }; + + break; + + default: + break; + } + + // Set the current type for next time + currentType = type; + + // Remove active classes + Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); + + // Set active on parent + toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); + + // Show cite + Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { + cite.setAttribute('hidden', ''); + }); + document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden'); + } + + // Bind to each button + Array.from(buttons).forEach(button => { + button.addEventListener('click', () => { + const type = button.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + window.history.pushState({ type }, '', `#${type}`); + } + }); + }); + + // List for backwards/forwards + window.addEventListener('popstate', event => { + if (event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if (historySupport) { + const 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) { + window.history.replaceState( + { + type: currentType, + }, + '', + video ? '' : `#${currentType}` + ); + } + + // If it's not video, load the source + if (currentType !== types.video) { + newSource(currentType, true); + } + } +}); + +// Google analytics +// For demo site (https://plyr.io) only +/* eslint-disable */ +if (window.location.host === 'plyr.io') { + (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'); + window.ga('create', 'UA-40881672-11', 'auto'); + window.ga('send', 'pageview'); +} +/* eslint-enable */ diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js deleted file mode 100644 index eac1e99e..00000000 --- a/demo/src/js/lib/classlist.js +++ /dev/null @@ -1,237 +0,0 @@ -/* - * 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/lib/tab-focus.js b/demo/src/js/lib/tab-focus.js deleted file mode 100644 index 06e51203..00000000 --- a/demo/src/js/lib/tab-focus.js +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// tab-focus.js -// Detect keyboard tabbing -// ========================================================================== - -(function() { - var className = 'tab-focus'; - - // Remove class on blur - document.addEventListener('focusout', function(event) { - event.target.classList.remove(className); - }); - - // Add classname to tabbed elements - document.addEventListener('keydown', function(event) { - if (event.keyCode !== 9) { - return; - } - - // Delay the adding of classname until the focus has changed - // This event fires before the focusin event - window.setTimeout(function() { - document.activeElement.classList.add(className); - }, 0); - }); -})(); diff --git a/demo/src/js/main.js b/demo/src/js/main.js deleted file mode 100644 index bc2ea0aa..00000000 --- a/demo/src/js/main.js +++ /dev/null @@ -1,222 +0,0 @@ -// ========================================================================== -// Plyr.io demo -// This code is purely for the https://plyr.io website -// Please see readme.md in the root or github.com/sampotts/plyr -// ========================================================================== - -/*global Plyr*/ - -(function() { - if (window.shr) { - window.shr.setup({ - count: { - classname: 'button__count', - }, - }); - } - - /*document.body.addEventListener('ready', function(event) { - console.log(event); - });*/ - - // Setup the player - var player = new Plyr('#player', { - debug: true, - title: 'View From A Blue Moon', - iconUrl: '../dist/plyr.svg', - tooltips: { - controls: true, - }, - captions: { - defaultActive: true, - }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'], - }); - - // Expose for testing - window.player = player; - - // Setup type toggle - var buttons = document.querySelectorAll('[data-source]'); - var types = { - video: 'video', - audio: 'audio', - youtube: 'youtube', - vimeo: 'vimeo', - }; - var currentType = window.location.hash.replace('#', ''); - var historySupport = window.history && window.history.pushState; - - // Bind to each button - [].forEach.call(buttons, function(button) { - button.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) { - element.classList[state ? 'add' : 'remove'](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.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', - type: 'video/mp4', - }, - ], - poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', - tracks: [ - { - kind: 'captions', - label: 'English', - srclang: 'en', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true, - }, - { - kind: 'captions', - label: 'French', - srclang: 'fr', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', - }, - ], - }); - break; - - case types.audio: - player.source({ - type: 'audio', - title: 'Kishi Bashi – “It All Began With A Burst”', - sources: [ - { - src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', - type: 'audio/mp3', - }, - { - src: 'https://cdn.plyr.io/static/demo/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: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', - type: 'youtube', - }, - ], - }); - break; - - case types.vimeo: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [ - { - src: 'https://vimeo.com/76979871', - 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 + '"]'), 'active', true); - - // Show cite - [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { - cite.setAttribute('hidden', ''); - }); - document.querySelector('.plyr__cite--' + type).removeAttribute('hidden'); - } -})(); - -// Google analytics -// For demo site (https://plyr.io) only -if (window.location.host === 'plyr.io') { - (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'); - window.ga('create', 'UA-40881672-11', 'auto'); - window.ga('send', 'pageview'); -} -- cgit v1.2.3 From 9c4b7e70948af3a1e45b63b3d36f3cae86802919 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 20:34:11 +1100 Subject: Keyboard logic --- demo/src/js/demo.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index eef49596..b8f19bdf 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -43,6 +43,9 @@ document.addEventListener('DOMContentLoaded', () => { debug: true, title: 'View From A Blue Moon', iconUrl: '../dist/plyr.svg', + keyboard: { + global: true, + }, tooltips: { controls: true, }, -- cgit v1.2.3 From 91712977643d4acc4bb83c6bb113bd564edcc5b1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 10 Nov 2017 00:06:46 +1100 Subject: More docs --- demo/src/js/demo.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index b8f19bdf..f77ca6dd 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -97,7 +97,7 @@ document.addEventListener('DOMContentLoaded', () => { switch (type) { case types.video: - player.src = { + player.source = { type: 'video', title: 'View From A Blue Moon', sources: [ @@ -127,7 +127,7 @@ document.addEventListener('DOMContentLoaded', () => { break; case types.audio: - player.src = { + player.source = { type: 'audio', title: 'Kishi Bashi – “It All Began With A Burst”', sources: [ @@ -145,7 +145,7 @@ document.addEventListener('DOMContentLoaded', () => { break; case types.youtube: - player.src = { + player.source = { type: 'video', title: 'View From A Blue Moon', sources: [ @@ -159,7 +159,7 @@ document.addEventListener('DOMContentLoaded', () => { break; case types.vimeo: - player.src = { + player.source = { type: 'video', title: 'View From A Blue Moon', sources: [ -- cgit v1.2.3 From d7a1c4428138d2dd5af09e41e998d1e08dafe76e Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 16 Nov 2017 11:38:06 +0100 Subject: Using fetch instead of xhr, grabbing title for YouTube --- demo/src/js/demo.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index f77ca6dd..a1fb7f4c 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -150,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => { title: 'View From A Blue Moon', sources: [ { - src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', type: 'youtube', }, ], @@ -161,7 +161,6 @@ document.addEventListener('DOMContentLoaded', () => { case types.vimeo: player.source = { type: 'video', - title: 'View From A Blue Moon', sources: [ { src: 'https://vimeo.com/76979871', -- cgit v1.2.3 From 6984d6fb1606a71edd35ac043ac1116b6de8e98b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 18 Nov 2017 19:30:26 +1100 Subject: Controls cleanup, work on captions bug, click to invert time --- demo/src/js/demo.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index a1fb7f4c..7284250a 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -65,6 +65,9 @@ document.addEventListener('DOMContentLoaded', () => { 'pip', 'airplay', ], + keys: { + google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', + }, }); // Expose for testing @@ -102,24 +105,24 @@ document.addEventListener('DOMContentLoaded', () => { title: 'View From A Blue Moon', sources: [ { - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', + src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4', type: 'video/mp4', }, ], - poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', + poster: 'hmedia/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ { kind: 'captions', label: 'English', srclang: 'en', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt', default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', }, ], }; -- cgit v1.2.3 From 4b62a5c74dc5f67d0f12126f554df53f02541ef7 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 19 Nov 2017 17:54:38 +1100 Subject: Captions fix --- demo/src/js/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 7284250a..7c228304 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -109,7 +109,7 @@ document.addEventListener('DOMContentLoaded', () => { type: 'video/mp4', }, ], - poster: 'hmedia/View_From_A_Blue_Moon_Trailer-HD.jpg', + poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ { kind: 'captions', -- cgit v1.2.3 From 921cefd212f65290349aa1d9d533c95cb1f6fcce Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 23 Nov 2017 17:35:35 +1100 Subject: Moved to provider + type to make it cleaner in future, fix for multiple players --- demo/src/js/demo.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 7c228304..19f98047 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,19 +52,7 @@ document.addEventListener('DOMContentLoaded', () => { captions: { active: true, }, - controls: [ - 'play-large', - 'play', - 'progress', - 'current-time', - 'mute', - 'volume', - 'captions', - 'settings', - 'fullscreen', - 'pip', - 'airplay', - ], + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'], keys: { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, @@ -154,7 +142,7 @@ document.addEventListener('DOMContentLoaded', () => { sources: [ { src: 'https://youtube.com/watch?v=bTqVqk7FSmY', - type: 'youtube', + provider: 'youtube', }, ], }; @@ -167,7 +155,7 @@ document.addEventListener('DOMContentLoaded', () => { sources: [ { src: 'https://vimeo.com/76979871', - type: 'vimeo', + provider: 'vimeo', }, ], }; -- cgit v1.2.3 From c8990bd379d97f4eb14cc35aaa90caebfb7db220 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 8 Dec 2017 10:05:38 +0000 Subject: IE & Edge fixes, Storage & Console classes --- demo/src/js/demo.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 19f98047..e032e38f 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -34,10 +34,6 @@ document.addEventListener('DOMContentLoaded', () => { }, 0); }); - /* document.body.addEventListener('ready', function(event) { - console.log(event); - }); */ - // Setup the player const player = new window.Plyr('#player', { debug: true, -- cgit v1.2.3 From 965fc0b2f5a377f16c8521b57e8667358b9ca38d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 23 Dec 2017 18:42:52 +0000 Subject: Docs, restored loadSprite and supported static methods --- demo/src/js/demo.js | 44 +++++++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 19 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index e032e38f..ee52dfd8 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -48,7 +48,19 @@ document.addEventListener('DOMContentLoaded', () => { captions: { active: true, }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'], + controls: [ + 'play-large', + 'play', + 'progress', + 'current-time', + 'mute', + 'volume', + 'captions', + 'settings', + 'fullscreen', + 'pip', + 'airplay', + ], keys: { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, @@ -87,12 +99,10 @@ document.addEventListener('DOMContentLoaded', () => { player.source = { type: 'video', title: 'View From A Blue Moon', - sources: [ - { - src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4', - type: 'video/mp4', - }, - ], + sources: [{ + src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4', + }], poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ { @@ -135,12 +145,10 @@ document.addEventListener('DOMContentLoaded', () => { player.source = { type: 'video', title: 'View From A Blue Moon', - sources: [ - { - src: 'https://youtube.com/watch?v=bTqVqk7FSmY', - provider: 'youtube', - }, - ], + sources: [{ + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', + provider: 'youtube', + }], }; break; @@ -148,12 +156,10 @@ document.addEventListener('DOMContentLoaded', () => { case types.vimeo: player.source = { type: 'video', - sources: [ - { - src: 'https://vimeo.com/76979871', - provider: 'vimeo', - }, - ], + sources: [{ + src: 'https://vimeo.com/76979871', + provider: 'vimeo', + }], }; break; -- cgit v1.2.3 From 6fd7b26bb2b0d1961a8b5844792f51adc6074cbc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 9 Jan 2018 20:25:46 +1100 Subject: Beta version up on https://plyr.io/beta and CDN --- demo/src/js/demo.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index ee52dfd8..576bfd12 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -100,23 +100,23 @@ document.addEventListener('DOMContentLoaded', () => { type: 'video', title: 'View From A Blue Moon', sources: [{ - src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', type: 'video/mp4', }], - poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg', + poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ { kind: 'captions', label: 'English', srclang: 'en', - src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', - src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', }, ], }; @@ -220,7 +220,7 @@ document.addEventListener('DOMContentLoaded', () => { type: currentType, }, '', - video ? '' : `#${currentType}` + video ? '' : `#${currentType}`, ); } -- cgit v1.2.3 From bbdf225d7b25c16d293108a9cf813c521f4d44eb Mon Sep 17 00:00:00 2001 From: ferdiemmen Date: Sun, 14 Jan 2018 08:21:35 +0100 Subject: Fix loading google ima sdk --- demo/src/js/demo.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 576bfd12..7adfa2d7 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -64,6 +64,9 @@ document.addEventListener('DOMContentLoaded', () => { keys: { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, + ads: { + adTagUrl: 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', + }, }); // Expose for testing -- cgit v1.2.3 From 5f96ec6ac2765c176645651881fa2d0ba666f58b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 14 Jan 2018 22:54:03 +1100 Subject: Minor logic tweak --- demo/src/js/demo.js | 13 ------------- 1 file changed, 13 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 576bfd12..91649b6e 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -48,19 +48,6 @@ document.addEventListener('DOMContentLoaded', () => { captions: { active: true, }, - controls: [ - 'play-large', - 'play', - 'progress', - 'current-time', - 'mute', - 'volume', - 'captions', - 'settings', - 'fullscreen', - 'pip', - 'airplay', - ], keys: { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, -- cgit v1.2.3 From 22e8892993b995f50c15d49558081e1271ac6bca Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 14 Jan 2018 23:15:33 +1100 Subject: Code tweaks --- demo/src/js/demo.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 8db7910c..d20cecdb 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,7 +52,8 @@ document.addEventListener('DOMContentLoaded', () => { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - adTagUrl: 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', + tagUrl: + 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', }, }); -- cgit v1.2.3 From 4b0005c28eaab460be1b4f5f22fa5d1f3ffae522 Mon Sep 17 00:00:00 2001 From: Arthur Hulsman Date: Mon, 15 Jan 2018 14:47:34 +0100 Subject: Added promises, missing events, new ad tag and additional logging. --- demo/src/js/demo.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index d20cecdb..b8650896 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,8 +52,12 @@ document.addEventListener('DOMContentLoaded', () => { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - tagUrl: - 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', + tagUrl: 'https://pubads.g.doubleclick.net/gampad/ads' + + '?sz=640x480&iu=/124319096/external/ad_rule_samples&' + + 'ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&' + + 'output=vmap&unviewed_position_start=1&cust_params=d' + + 'eployment%3Ddevsite%26sample_ar%3Dpremidpostoptimiz' + + 'edpod&cmsid=496&vid=short_onecue&correlator=', }, }); -- cgit v1.2.3 From ec73d34bd3061c2b512dda97765e4f38db4619c3 Mon Sep 17 00:00:00 2001 From: ferdiemmen Date: Tue, 16 Jan 2018 23:06:40 +0100 Subject: Some tweaks --- demo/src/js/demo.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index b8650896..17b0999e 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,12 +52,7 @@ document.addEventListener('DOMContentLoaded', () => { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - tagUrl: 'https://pubads.g.doubleclick.net/gampad/ads' + - '?sz=640x480&iu=/124319096/external/ad_rule_samples&' + - 'ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&' + - 'output=vmap&unviewed_position_start=1&cust_params=d' + - 'eployment%3Ddevsite%26sample_ar%3Dpremidpostoptimiz' + - 'edpod&cmsid=496&vid=short_onecue&correlator=', + tagUrl: 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', }, }); -- cgit v1.2.3 From ebf53d14b12c025b6c2f37a887a55e2bf7ab3b7d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 22 Jan 2018 23:39:09 +1100 Subject: Small tweaks --- demo/src/js/demo.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 17b0999e..fb215ed0 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,7 +52,8 @@ document.addEventListener('DOMContentLoaded', () => { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - tagUrl: 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', + tagUrl: + 'https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', }, }); -- cgit v1.2.3 From cc128e60888468a90dd73c90f05fc7ddbf104551 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 23 Jan 2018 10:31:21 +1100 Subject: Renamed property, UI tweak --- demo/src/js/demo.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index fb215ed0..164cfe7d 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,8 +52,11 @@ document.addEventListener('DOMContentLoaded', () => { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - tagUrl: + tag: 'https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', + // Test tags + // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=', + // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=', }, }); -- cgit v1.2.3 From 5e68f8c8ddd11070a2b2ee11339be8c2c37ed8a5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 25 Jan 2018 22:41:30 +1100 Subject: Attempt to fix YouTube message error, added ads references, changes to bool --- demo/src/js/demo.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 164cfe7d..0fb06a11 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -52,11 +52,7 @@ document.addEventListener('DOMContentLoaded', () => { google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - tag: - 'https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480', - // Test tags - // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=', - // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=', + enabled: true, }, }); -- cgit v1.2.3 From 1ee88cba16dbb85e7e1decb4d5e6a1191d73efad Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 5 Feb 2018 21:26:18 +1100 Subject: Testing fetch --- demo/src/js/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 0fb06a11..d608ec18 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () => { const player = new window.Plyr('#player', { debug: true, title: 'View From A Blue Moon', - iconUrl: '../dist/plyr.svg', + // iconUrl: '../dist/plyr.svg', keyboard: { global: true, }, -- cgit v1.2.3 From 2150c44036e13073c6f7f07343009b6373846bdf Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 6 Feb 2018 00:24:48 +1100 Subject: Added backwards compatibility for
embeds --- demo/src/js/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index d608ec18..a8603c0d 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -35,7 +35,7 @@ document.addEventListener('DOMContentLoaded', () => { }); // Setup the player - const player = new window.Plyr('#player', { + const player = new Plyr('#player', { debug: true, title: 'View From A Blue Moon', // iconUrl: '../dist/plyr.svg', -- cgit v1.2.3 From 317b08c703c94c5ce0e1d53603f4e1c9842df249 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 3 Mar 2018 23:06:12 +1100 Subject: Ready event fix, YouTube play event fix, docs update --- demo/src/js/demo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index a8603c0d..65b94bff 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -29,7 +29,7 @@ document.addEventListener('DOMContentLoaded', () => { // Delay the adding of classname until the focus has changed // This event fires before the focusin event - window.setTimeout(() => { + setTimeout(() => { document.activeElement.classList.add(tabClassName); }, 0); }); @@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () => { }, }); - // Expose for testing + // Expose for tinkering in the console window.player = player; // Setup type toggle -- cgit v1.2.3 From 572b8a7aca6c4b4fea1a7f7d371915cbe151be3d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 10 Mar 2018 23:32:48 +1100 Subject: Manually merged PRs --- demo/src/js/demo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 65b94bff..035f8f6d 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () => { const player = new Plyr('#player', { debug: true, title: 'View From A Blue Moon', - // iconUrl: '../dist/plyr.svg', + iconUrl: '../dist/plyr.svg', keyboard: { global: true, }, @@ -238,7 +238,7 @@ if (window.location.host === 'plyr.io') { a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); - })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); + })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); window.ga('create', 'UA-40881672-11', 'auto'); window.ga('send', 'pageview'); } -- cgit v1.2.3 From e206edc1f6a09e6c2584e83a60d2632202545733 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 11 Mar 2018 02:03:35 +1100 Subject: Event listener fixes, loadScript promise, ads tweaks --- demo/src/js/demo.js | 1 + 1 file changed, 1 insertion(+) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 035f8f6d..65d20ffd 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -53,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => { }, ads: { enabled: true, + publisherId: 'plyrio', }, }); -- cgit v1.2.3 From 1b13ddaa5479baa8100e953e5d0752e3bd8654ab Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 13 Mar 2018 21:42:01 +1100 Subject: Update ads --- demo/src/js/demo.js | 1 - 1 file changed, 1 deletion(-) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 65d20ffd..035f8f6d 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -53,7 +53,6 @@ document.addEventListener('DOMContentLoaded', () => { }, ads: { enabled: true, - publisherId: 'plyrio', }, }); -- cgit v1.2.3 From 5db73b13276bf50357cc98896421318de66ab042 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 17 Mar 2018 23:27:40 +1100 Subject: Added buffered getter --- demo/src/js/demo.js | 1 + 1 file changed, 1 insertion(+) (limited to 'demo/src/js') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 035f8f6d..5808cc7e 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -53,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => { }, ads: { enabled: true, + publisherId: '918848828995742', }, }); -- cgit v1.2.3