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') 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') 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 d3bbf09d124344fd065e17707f008e4c2282e038 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 25 Sep 2016 20:01:58 +1000 Subject: More menu work --- demo/src/less/lib/fontface.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index a7da5ad9..ff03f75e 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,15 +4,15 @@ @font-face { font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); + src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); font-style: normal; font-weight: @font-weight-base; } @font-face { font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); + src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: @font-weight-bold; } \ No newline at end of file -- cgit v1.2.3 From ca37b4c9ac24b840a9e8e5930012c33da9a44682 Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 25 Sep 2016 23:54:49 +1000 Subject: Menu --- demo/src/less/lib/fontface.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index ff03f75e..a7da5ad9 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,15 +4,15 @@ @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); + src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), + url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); font-style: normal; font-weight: @font-weight-base; } @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); + src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), + url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: @font-weight-bold; } \ No newline at end of file -- 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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 + demo/src/less/components/base.less | 16 +- demo/src/less/components/buttons.less | 262 ++++++++++++++++----------------- demo/src/less/components/examples.less | 12 -- demo/src/less/components/type.less | 12 +- demo/src/less/variables.less | 6 +- 6 files changed, 150 insertions(+), 164 deletions(-) (limited to 'demo/src') 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'); } })(); diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less index 502196cf..7f71dbb4 100644 --- a/demo/src/less/components/base.less +++ b/demo/src/less/components/base.less @@ -2,10 +2,10 @@ // Base layout // ========================================================================== -// BORDER-BOX ALL THE THINGS! +// BORDER-BOX ALL THE THINGS! // http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; +*, *::after, *::before { + box-sizing: border-box; } // Hidden @@ -15,11 +15,11 @@ // Base html { - height: 100%; - background: @body-background fixed; + background: @body-background; } body { - margin: 0; + max-width: @container-width; + margin: auto; padding: (@padding-base / 2); } @@ -31,6 +31,7 @@ header { p { .font-size(18); } + @media (min-width: @screen-sm) { padding-top: (@padding-base * 3); padding-bottom: (@padding-base * 3); @@ -39,8 +40,7 @@ header { // Sections section { - max-width: @example-width-video; - margin: 0 auto @padding-base; + margin-bottom: @padding-base; @media (min-width: @screen-sm) { margin-bottom: (@padding-base * 2); diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..23cc3e7f 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -3,170 +3,162 @@ // ========================================================================== nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } } // Tabs .btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } + position: relative; + margin: 0 auto @padding-base; + white-space: nowrap; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @off-white; + } + + ul { + position: relative; + z-index: 1; + display: inline-block; + } + li { + margin: 0; + + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } + + &.active .btn { + &:extend(.btn--primary); + position: relative; + z-index: 1; + + .icon { + color: inherit; + } + } + &.active + li .btn:hover { + z-index: 0; + } + } + .btn { + position: relative; + display: block; + border-radius: 0; + + &:hover, + &:focus { + z-index: 1; + } + } + + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } } // Shared .btn, .btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + user-select: none; + font-weight: @font-weight-bold; } // Buttons .btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } + padding: (@padding-base / 2) ((@padding-base / 2) + 2); + background: #fff; + border: 1px solid @gray-lighter; + color: @gray; + transition: all .2s ease; + .font-size(@font-size-small); + + &:hover, + &:focus { + border-color: @gray-light; + } } // Sizes .btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); + padding: (@padding-base / 2) @padding-base; + .font-size(); } // Styles .btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } + @border-color: darken(@link-color, 5%); + background-image: linear-gradient(@link-color, @border-color); + background-color: @link-color; + border-color: @border-color; + color: #fff; + + &:hover, + &:focus { + color: #fff; + border-color: darken(@border-color, 5%); + } } .btn--youtube .icon { - color: @color-youtube; + color: @color-youtube; } .btn--vimeo .icon { - color: @color-vimeo; + color: @color-vimeo; } .btn--twitter .icon { - color: @color-twitter; + color: @color-twitter; } // Count bubble .btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } + position: relative; + margin-left: (@padding-base / 2); + padding: (@padding-base / 2) (@padding-base * .75); + background: #fff; + border: 1px solid @gray-lighter; + + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less index a9e72d21..ff22e37b 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/less/components/examples.less @@ -30,17 +30,5 @@ video { // Style full supported player .plyr__cite { - display: none; margin-top: @padding-base; - - .icon { - margin-right: (@padding-base / 4); - } -} - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; } diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less index 951be36d..1f16161a 100644 --- a/demo/src/less/components/type.less +++ b/demo/src/less/components/type.less @@ -51,22 +51,22 @@ li { a { text-decoration: none; color: @link-color; - border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; + transition: color .3s ease; &:hover, &:focus { color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); - } - &:focus { - .tab-focus(); } &.logo { border: 0; } } +a:focus, +button:focus { + .tab-focus(); +} + .color--vimeo { color: @color-vimeo; } diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 4768cdd6..7f684ba1 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -9,7 +9,7 @@ @gray-lighter: #dbe3e8; @off-white: #f2f5f7; -@brand-primary: #3498db; +@brand-primary: #22b5ff; @brand-secondary: #02BD9B; // Brands @@ -18,7 +18,7 @@ @color-vimeo: #19b7ed; // Base -@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); +@body-background: #fff; // Type @font-size-base: 16; @@ -45,4 +45,4 @@ // Examples @example-width-audio: 520px; -@example-width-video: 1200px; +@container-width: 800px; -- cgit v1.2.3 From 40b4f8e8404c3f191ca4d4f40ae206c9dc72c4e1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 4 Jun 2017 22:39:21 +1000 Subject: Tweaks --- demo/src/less/components/buttons.less | 6 ++---- demo/src/less/variables.less | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index 23cc3e7f..d1538967 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -116,16 +116,14 @@ nav { // Styles .btn--primary { - @border-color: darken(@link-color, 5%); - background-image: linear-gradient(@link-color, @border-color); background-color: @link-color; - border-color: @border-color; + border-color: @link-color; color: #fff; &:hover, &:focus { color: #fff; - border-color: darken(@border-color, 5%); + border-color: darken(@link-color, 5%); } } .btn--youtube .icon { diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 7f684ba1..3f7cfe87 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -9,7 +9,7 @@ @gray-lighter: #dbe3e8; @off-white: #f2f5f7; -@brand-primary: #22b5ff; +@brand-primary: #20d193; @brand-secondary: #02BD9B; // Brands -- cgit v1.2.3 From 03c3960e939c54bf3c80ebb6b9ea364286deaab5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 9 Jul 2017 17:14:42 +1000 Subject: Tweaks --- demo/src/less/variables.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 3f7cfe87..5e17d83a 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -9,7 +9,7 @@ @gray-lighter: #dbe3e8; @off-white: #f2f5f7; -@brand-primary: #20d193; +@brand-primary: #1aafff; @brand-secondary: #02BD9B; // Brands @@ -24,8 +24,8 @@ @font-size-base: 16; @font-size-small: 14; @font-size-h1: 64; -@font-weight-base: 500; -@font-weight-bold: 700; +@font-weight-base: 400; +@font-weight-bold: 500; // Elements @link-color: @brand-primary; -- cgit v1.2.3 From 7b60e473fa061906aab2f29f920526edc0246ff2 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 23 Jul 2017 21:13:11 +1000 Subject: Small tweaks --- demo/src/less/lib/fontface.less | 9 +++++---- demo/src/less/variables.less | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index a7da5ad9..5230f822 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,15 +4,16 @@ @font-face { font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); + src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); font-style: normal; font-weight: @font-weight-base; } + @font-face { font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); + src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: @font-weight-bold; } \ No newline at end of file diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 5e17d83a..25e91674 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -24,8 +24,8 @@ @font-size-base: 16; @font-size-small: 14; @font-size-h1: 64; -@font-weight-base: 400; -@font-weight-bold: 500; +@font-weight-base: 500; +@font-weight-bold: 600; // Elements @link-color: @brand-primary; -- 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 +-- demo/src/less/components/base.less | 21 +-- demo/src/less/components/buttons.less | 260 +++++++++++++++++---------------- demo/src/less/components/examples.less | 12 ++ demo/src/less/components/type.less | 12 +- demo/src/less/variables.less | 8 +- 6 files changed, 173 insertions(+), 157 deletions(-) (limited to 'demo/src') 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 diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less index 7f71dbb4..7e5f97c6 100644 --- a/demo/src/less/components/base.less +++ b/demo/src/less/components/base.less @@ -15,12 +15,17 @@ // Base html { - background: @body-background; + height: 100%; + background: @body-background fixed; } body { - max-width: @container-width; - margin: auto; + margin: 0 auto @padding-base; padding: (@padding-base / 2); + max-width: @example-width-video; + + @media (min-width: @screen-sm) { + margin-bottom: (@padding-base * 2); + } } // Header @@ -31,18 +36,8 @@ header { p { .font-size(18); } - @media (min-width: @screen-sm) { padding-top: (@padding-base * 3); padding-bottom: (@padding-base * 3); } -} - -// Sections -section { - margin-bottom: @padding-base; - - @media (min-width: @screen-sm) { - margin-bottom: (@padding-base * 2); - } } \ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index d1538967..c99a0836 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -3,160 +3,170 @@ // ========================================================================== nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } } // Tabs .btn__bar { - position: relative; - margin: 0 auto @padding-base; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @off-white; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } + position: relative; + margin: 0 auto @padding-base; + max-width: @example-width-video; + white-space: nowrap; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @gray-lighter; + } + + ul { + position: relative; + z-index: 1; + display: inline-block; + user-select: none; + } + li { + margin: 0; + + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } + + &.active .btn { + &:extend(.btn--primary); + box-shadow: inset 0 1px 1px rgba(0,0,0, .2); + position: relative; + z-index: 1; + + .icon { + color: inherit; + } + } + &.active + li .btn:hover { + z-index: 0; + } + } + .btn { + position: relative; + display: block; + border-radius: 0; + + &:hover, + &:focus { + z-index: 1; + } + } + + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } } // Shared .btn, .btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + user-select: none; + font-weight: @font-weight-bold; } // Buttons .btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: #fff; - border: 1px solid @gray-lighter; - color: @gray; - transition: all .2s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: @gray-light; - } + padding: (@padding-base / 2) ((@padding-base / 2) + 2); + background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); + border: 1px solid @gray-light; + box-shadow: 0 1px 1px rgba(0,0,0, .05); + text-shadow: 0 1px 1px #fff; + color: @gray; + transition: background .1s ease, color .1s ease; + .font-size(@font-size-small); + + &:hover, + &:focus { + border-color: darken(@gray-light, 8%); + color: @gray; + outline: 0; + } } // Sizes .btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); + padding: (@padding-base / 2) @padding-base; + .font-size(); } // Styles .btn--primary { - background-color: @link-color; - border-color: @link-color; - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 5%); - } + background-image: linear-gradient(@link-color, darken(@link-color, 5%)); + background-color: @link-color; + border-color: darken(@link-color, 10%); + box-shadow: 0 1px 1px rgba(0,0,0, .15); + text-shadow: 0 1px 1px rgba(0,0,0, .1); + color: #fff; + + &:hover, + &:focus { + color: #fff; + border-color: darken(@link-color, 20%); + } } .btn--youtube .icon { - color: @color-youtube; + color: @color-youtube; } .btn--vimeo .icon { - color: @color-vimeo; + color: @color-vimeo; } .btn--twitter .icon { - color: @color-twitter; + color: @color-twitter; } // Count bubble .btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-lighter; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } + position: relative; + margin-left: (@padding-base / 2); + padding: (@padding-base / 2) (@padding-base * .75); + background: #fff; + border: 1px solid @gray-light; + + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less index ff22e37b..a9e72d21 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/less/components/examples.less @@ -30,5 +30,17 @@ video { // Style full supported player .plyr__cite { + display: none; margin-top: @padding-base; + + .icon { + margin-right: (@padding-base / 4); + } +} + +.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, +.plyr--audio ~ ul .plyr__cite--audio, +.plyr--youtube ~ ul .plyr__cite--youtube, +.plyr--vimeo ~ ul .plyr__cite--vimeo { + display: block; } diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less index 1f16161a..951be36d 100644 --- a/demo/src/less/components/type.less +++ b/demo/src/less/components/type.less @@ -51,22 +51,22 @@ li { a { text-decoration: none; color: @link-color; - transition: color .3s ease; + border-bottom: 1px dotted currentColor; + transition: background .3s ease, color .3s ease, border .3s ease; &:hover, &:focus { color: @gray-dark; + border-bottom-color: rgba(0,0,0,0); + } + &:focus { + .tab-focus(); } &.logo { border: 0; } } -a:focus, -button:focus { - .tab-focus(); -} - .color--vimeo { color: @color-vimeo; } diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 25e91674..4768cdd6 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -9,7 +9,7 @@ @gray-lighter: #dbe3e8; @off-white: #f2f5f7; -@brand-primary: #1aafff; +@brand-primary: #3498db; @brand-secondary: #02BD9B; // Brands @@ -18,14 +18,14 @@ @color-vimeo: #19b7ed; // Base -@body-background: #fff; +@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); // Type @font-size-base: 16; @font-size-small: 14; @font-size-h1: 64; @font-weight-base: 500; -@font-weight-bold: 600; +@font-weight-bold: 700; // Elements @link-color: @brand-primary; @@ -45,4 +45,4 @@ // Examples @example-width-audio: 520px; -@container-width: 800px; +@example-width-video: 1200px; -- 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') 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 6dd010ea34bc4e8385e2a20807031f20e5a52e37 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 2 Oct 2017 13:55:03 +1100 Subject: Comments, small tweaks --- demo/src/less/components/type.less | 4 +-- demo/src/less/lib/fontface.less | 20 ++++++++------- demo/src/less/variables.less | 52 +++++++++++++++++++------------------- 3 files changed, 39 insertions(+), 37 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less index 951be36d..8e621700 100644 --- a/demo/src/less/components/type.less +++ b/demo/src/less/components/type.less @@ -52,12 +52,12 @@ a { text-decoration: none; color: @link-color; border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; + transition: background 0.3s ease, color 0.3s ease, border 0.3s ease; &:hover, &:focus { color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); + border-bottom-color: rgba(0, 0, 0, 0); } &:focus { .tab-focus(); diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index 5230f822..b3316f9c 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,16 +4,18 @@ @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); - font-style: normal; - font-weight: @font-weight-base; + src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); + font-style: normal; + font-weight: @font-weight-base; + font-display: swap; } @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); - font-style: normal; - font-weight: @font-weight-bold; -} \ No newline at end of file + src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); + font-style: normal; + font-weight: @font-weight-bold; + font-display: swap; +} diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 4768cdd6..939232e5 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -3,46 +3,46 @@ // ========================================================================== // Colors -@gray-dark: #343f4a; -@gray: #55646b; -@gray-light: #cbd0d3; -@gray-lighter: #dbe3e8; -@off-white: #f2f5f7; +@gray-dark: #343f4a; +@gray: #55646b; +@gray-light: #cbd0d3; +@gray-lighter: #dbe3e8; +@off-white: #f2f5f7; -@brand-primary: #3498db; -@brand-secondary: #02BD9B; +@brand-primary: #3498db; +@brand-secondary: #02bd9b; // Brands -@color-twitter: #4BAAF4; -@color-youtube: #cc181e; -@color-vimeo: #19b7ed; +@color-twitter: #4baaf4; +@color-youtube: #cc181e; +@color-vimeo: #19b7ed; // Base -@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); +@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); // Type -@font-size-base: 16; -@font-size-small: 14; -@font-size-h1: 64; -@font-weight-base: 500; -@font-weight-bold: 700; +@font-size-base: 16; +@font-size-small: 14; +@font-size-h1: 64; +@font-weight-base: 500; +@font-weight-bold: 700; // Elements -@link-color: @brand-primary; -@padding-base: 20px; -@arrow-size: 8px; +@link-color: @brand-primary; +@padding-base: 20px; +@arrow-size: 8px; // Icons -@icon-size: 18px; +@icon-size: 18px; // Breakpoints -@screen-sm: 480px; -@screen-md: 768px; +@screen-sm: 480px; +@screen-md: 768px; // Radii -@border-radius-base: 4px; -@border-radius-large: 6px; +@border-radius-base: 4px; +@border-radius-large: 6px; // Examples -@example-width-audio: 520px; -@example-width-video: 1200px; +@example-width-audio: 520px; +@example-width-video: 1200px; -- cgit v1.2.3 From 0d96601d1af8c75f99f750225ccfef25b5117b0d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 2 Oct 2017 14:48:15 +1100 Subject: CDN URLs --- demo/src/less/lib/fontface.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'demo/src') diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index b3316f9c..bd5f9feb 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,8 +4,8 @@ @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); + src: url("https://cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"), + url("https://cdn.plyr.io/static/fonts/avenir-medium.woff") format("woff"); font-style: normal; font-weight: @font-weight-base; font-display: swap; @@ -13,8 +13,8 @@ @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); + src: url("https://cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"), + url("https://cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: @font-weight-bold; font-display: swap; -- 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') 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 ++++----- demo/src/less/bundle.less | 35 +++++ demo/src/less/components/base.less | 43 ------- demo/src/less/components/buttons.less | 214 ++++++++----------------------- demo/src/less/components/error.less | 19 --- demo/src/less/components/examples.less | 46 ------- demo/src/less/components/header.less | 24 ++++ demo/src/less/components/icons.less | 16 +-- demo/src/less/components/links.less | 46 +++++++ demo/src/less/components/lists.less | 11 ++ demo/src/less/components/navigation.less | 9 ++ demo/src/less/components/players.less | 44 +++++++ demo/src/less/components/type.less | 75 ----------- demo/src/less/demo.less | 26 ---- demo/src/less/layout/core.less | 44 +++++++ demo/src/less/layout/error.less | 21 +++ demo/src/less/layout/grid.less | 19 +++ demo/src/less/lib/animation.less | 12 +- demo/src/less/lib/fontface.less | 9 ++ demo/src/less/lib/mixins.less | 38 +++--- demo/src/less/lib/reset.less | 11 ++ demo/src/less/settings/breakpoints.less | 9 ++ demo/src/less/settings/colors.less | 27 ++++ demo/src/less/settings/cosmetic.less | 12 ++ demo/src/less/settings/icons.less | 5 + demo/src/less/settings/layout.less | 5 + demo/src/less/settings/spacing.less | 5 + demo/src/less/settings/type.less | 17 +++ demo/src/less/type/base.less | 33 +++++ demo/src/less/type/headings.less | 10 ++ demo/src/less/utilities/color.less | 10 ++ demo/src/less/utilities/hidden.less | 7 + demo/src/less/variables.less | 48 ------- 34 files changed, 563 insertions(+), 476 deletions(-) create mode 100644 demo/src/js/lib/tab-focus.js create mode 100644 demo/src/less/bundle.less delete mode 100644 demo/src/less/components/base.less delete mode 100644 demo/src/less/components/error.less delete mode 100644 demo/src/less/components/examples.less create mode 100644 demo/src/less/components/header.less create mode 100644 demo/src/less/components/links.less create mode 100644 demo/src/less/components/lists.less create mode 100644 demo/src/less/components/navigation.less create mode 100644 demo/src/less/components/players.less delete mode 100644 demo/src/less/components/type.less delete mode 100644 demo/src/less/demo.less create mode 100644 demo/src/less/layout/core.less create mode 100644 demo/src/less/layout/error.less create mode 100644 demo/src/less/layout/grid.less create mode 100644 demo/src/less/lib/reset.less create mode 100644 demo/src/less/settings/breakpoints.less create mode 100644 demo/src/less/settings/colors.less create mode 100644 demo/src/less/settings/cosmetic.less create mode 100644 demo/src/less/settings/icons.less create mode 100644 demo/src/less/settings/layout.less create mode 100644 demo/src/less/settings/spacing.less create mode 100644 demo/src/less/settings/type.less create mode 100644 demo/src/less/type/base.less create mode 100644 demo/src/less/type/headings.less create mode 100644 demo/src/less/utilities/color.less create mode 100644 demo/src/less/utilities/hidden.less delete mode 100644 demo/src/less/variables.less (limited to 'demo/src') 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) { diff --git a/demo/src/less/bundle.less b/demo/src/less/bundle.less new file mode 100644 index 00000000..2645d653 --- /dev/null +++ b/demo/src/less/bundle.less @@ -0,0 +1,35 @@ +// ========================================================================== +// Plyr.io Demo Page +// ========================================================================== + +// Libs +@import 'lib/animation'; +@import 'lib/fontface'; +@import 'lib/mixins'; +@import 'lib/normalize'; + +// Settings +@import 'settings/breakpoints'; +@import 'settings/colors'; +@import 'settings/cosmetic'; +@import 'settings/icons'; +@import 'settings/layout'; +@import 'settings/spacing'; +@import 'settings/type'; + +// Layout +@import 'layout/core'; +@import 'layout/grid'; + +// Type +@import 'type/base'; +@import 'type/headings'; + +// Components +@import 'components/buttons'; +@import 'components/header'; +@import 'components/icons'; +@import 'components/links'; +@import 'components/lists'; +@import 'components/navigation'; +@import 'components/players'; diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less deleted file mode 100644 index 7e5f97c6..00000000 --- a/demo/src/less/components/base.less +++ /dev/null @@ -1,43 +0,0 @@ -// ========================================================================== -// Base layout -// ========================================================================== - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Hidden -[hidden] { - display: none; -} - -// Base -html { - height: 100%; - background: @body-background fixed; -} -body { - margin: 0 auto @padding-base; - padding: (@padding-base / 2); - max-width: @example-width-video; - - @media (min-width: @screen-sm) { - margin-bottom: (@padding-base * 2); - } -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: @screen-sm) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} \ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..ed605086 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -2,171 +2,65 @@ // Buttons // ========================================================================== -nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} - -// Tabs -.btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } -} - // Shared -.btn, -.btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; +.button, +.button__count { + position: relative; + display: inline-flex; + vertical-align: middle; + align-items: center; + padding: (@spacing-base * 0.75); + + border-radius: @border-radius-base; + box-shadow: 0 1px 1px fade(#000, 10%); + background: #fff; + border: 0; + + color: @gray; + user-select: none; + font-weight: @font-weight-bold; + text-shadow: none; } // Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// Sizes -.btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); -} - -// Styles -.btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } -} -.btn--youtube .icon { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; +.button { + padding-left: @spacing-base; + padding-right: @spacing-base; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: @gray-dark; + outline: 0; + + &::after { + display: none; + } + } + + &.tab-focus { + .tab-focus(); + } } // Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } +.button__count { + margin-left: (@spacing-base / 2); + animation: fadein 0.2s ease; + + &::before { + content: ''; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } diff --git a/demo/src/less/components/error.less b/demo/src/less/components/error.less deleted file mode 100644 index b1427173..00000000 --- a/demo/src/less/components/error.less +++ /dev/null @@ -1,19 +0,0 @@ -// ========================================================================== -// Errors (AWS pages) -// ========================================================================== - -// Error page -html.error, -.error body { - height: 100%; -} -.error body { - width: 100%; - display: table; - table-layout: fixed; -} -.error main { - display: table-cell; - width: 100%; - vertical-align: middle; -} \ No newline at end of file diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less deleted file mode 100644 index a9e72d21..00000000 --- a/demo/src/less/components/examples.less +++ /dev/null @@ -1,46 +0,0 @@ -// ========================================================================== -// Examples -// ========================================================================== - -// For non supported browsers -video { - max-width: 100%; - vertical-align: middle; -} - -// Example players -.plyr { - margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; -} -.plyr__video-wrapper::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: 1px solid fade(#000, 15%); - border-radius: inherit; -} - -// Style full supported player -.plyr__cite { - display: none; - margin-top: @padding-base; - - .icon { - margin-right: (@padding-base / 4); - } -} - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; -} diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less new file mode 100644 index 00000000..c5f8b1fe --- /dev/null +++ b/demo/src/less/components/header.less @@ -0,0 +1,24 @@ +// ========================================================================== +// Header +// ========================================================================== + +header { + padding: @spacing-base; + text-align: center; + + p { + .font-size(18); + margin-bottom: @spacing-base * 1.5; + } + + @media @mq-sm { + padding-top: (@spacing-base * 3); + padding-bottom: (@spacing-base * 3); + } + + @media @mq-md { + max-width: 400px; + margin-right: (@spacing-base * 2); + text-align: left; + } +} diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less index 9530b601..29f185bd 100644 --- a/demo/src/less/components/icons.less +++ b/demo/src/less/components/icons.less @@ -4,23 +4,19 @@ // Base size icon styles .icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; + fill: currentColor; + width: @icon-size; + height: @icon-size; } // Within elements a svg, button svg, label svg { - pointer-events: none; + pointer-events: none; } + a .icon, .btn .icon { - margin-right: (@padding-base / 2); -} -.btn:not(.btn-large) .icon { - width: (@icon-size - 2); - height: (@icon-size - 2); + margin-right: (@spacing-base / 2); } diff --git a/demo/src/less/components/links.less b/demo/src/less/components/links.less new file mode 100644 index 00000000..7a62ab40 --- /dev/null +++ b/demo/src/less/components/links.less @@ -0,0 +1,46 @@ +// ========================================================================== +// Links +// ========================================================================== + +// Make a