From 1cc2930dc0b81183bc47442f5ad9b5d8df94cc5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 14:25:28 +1100 Subject: ES6-ified --- src/js/source.js | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 src/js/source.js (limited to 'src/js/source.js') diff --git a/src/js/source.js b/src/js/source.js new file mode 100644 index 00000000..d2d5f61a --- /dev/null +++ b/src/js/source.js @@ -0,0 +1,162 @@ +// ========================================================================== +// Plyr source update +// ========================================================================== + +import types from './types'; +import utils from './utils'; +import media from './media'; +import ui from './ui'; +import support from './support'; + +const source = { + // Add elements to HTML5 media (source, tracks, etc) + insertElements(type, attributes) { + if (utils.is.string(attributes)) { + utils.insertElement(type, this.media, { + src: attributes, + }); + } else if (utils.is.array(attributes)) { + this.warn(attributes); + + attributes.forEach(attribute => { + utils.insertElement(type, this.media, attribute); + }); + } + }, + + // Update source + // Sources are not checked for support so be careful + change(input) { + if (!utils.is.object(input) || !('sources' in input) || !input.sources.length) { + this.warn('Invalid source format'); + return; + } + + // Cancel current network requests + media.cancelRequests.call(this); + + // Destroy instance and re-setup + this.destroy.call( + this, + () => { + // TODO: Reset menus here + + // Remove elements + utils.removeElement(this.media); + this.media = null; + + // Reset class name + if (utils.is.htmlElement(this.elements.container)) { + this.elements.container.removeAttribute('class'); + } + + // Set the type + if ('type' in input) { + this.type = input.type; + + // Get child type for video (it might be an embed) + if (this.type === 'video') { + const firstSource = input.sources[0]; + + if ('type' in firstSource && types.embed.includes(firstSource.type)) { + this.type = firstSource.type; + } + } + } + + // Check for support + this.supported = support.check(this.type, this.config.inline); + + // Create new markup + switch (this.type) { + case 'video': + this.media = utils.createElement('video'); + break; + + case 'audio': + this.media = utils.createElement('audio'); + break; + + case 'youtube': + case 'vimeo': + this.media = utils.createElement('div'); + this.embedId = input.sources[0].src; + break; + + default: + break; + } + + // Inject the new element + this.elements.container.appendChild(this.media); + + // Autoplay the new source? + if (utils.is.boolean(input.autoplay)) { + this.config.autoplay = input.autoplay; + } + + // Set attributes for audio and video + if (this.isHTML5) { + if (this.config.crossorigin) { + this.media.setAttribute('crossorigin', ''); + } + if (this.config.autoplay) { + this.media.setAttribute('autoplay', ''); + } + if ('poster' in input) { + this.media.setAttribute('poster', input.poster); + } + if (this.config.loop.active) { + this.media.setAttribute('loop', ''); + } + if (this.config.muted) { + this.media.setAttribute('muted', ''); + } + if (this.config.inline) { + this.media.setAttribute('playsinline', ''); + } + } + + // Restore class hooks + utils.toggleClass( + this.elements.container, + this.config.classNames.captions.active, + this.supported.ui && this.captions.enabled + ); + + ui.addStyleHook.call(this); + + // Set new sources for html5 + if (this.isHTML5) { + source.insertElements.call(this, 'source', input.sources); + } + + // Set video title + this.config.title = input.title; + + // Set up from scratch + media.setup.call(this); + + // HTML5 stuff + if (this.isHTML5) { + // Setup captions + if ('tracks' in input) { + source.insertElements.call(this, 'track', input.tracks); + } + + // Load HTML5 sources + this.media.load(); + } + + // If HTML5 or embed but not fully supported, setupInterface and call ready now + if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) { + // Setup interface + ui.build.call(this); + } + }, + true + ); + }, +}; + +export default source; -- cgit v1.2.3 From d920de2a25b1f9b3981671bbe9099af61e74410f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 21:19:02 +1100 Subject: Small tweaks --- src/js/source.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/js/source.js') diff --git a/src/js/source.js b/src/js/source.js index d2d5f61a..d0881675 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -16,8 +16,6 @@ const source = { src: attributes, }); } else if (utils.is.array(attributes)) { - this.warn(attributes); - attributes.forEach(attribute => { utils.insertElement(type, this.media, attribute); }); -- cgit v1.2.3 From 4879bea4a038462a2e40d91061e7d7df62deb4f6 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 9 Nov 2017 20:01:13 +1100 Subject: Moved console methods out of the root of the object --- src/js/source.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/source.js') diff --git a/src/js/source.js b/src/js/source.js index d0881675..228d8f3a 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -26,7 +26,7 @@ const source = { // Sources are not checked for support so be careful change(input) { if (!utils.is.object(input) || !('sources' in input) || !input.sources.length) { - this.warn('Invalid source format'); + this.console.warn('Invalid source format'); return; } -- cgit v1.2.3 From de6f0f1b778180f7b26f85f45053ffb97eb526af Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 23 Nov 2017 12:57:43 +1100 Subject: Updated data attributes to `data-plyr` namespace. Speed menu fixes --- src/js/source.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src/js/source.js') diff --git a/src/js/source.js b/src/js/source.js index 228d8f3a..c670ab09 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -116,11 +116,7 @@ const source = { } // Restore class hooks - utils.toggleClass( - this.elements.container, - this.config.classNames.captions.active, - this.supported.ui && this.captions.enabled - ); + utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.supported.ui && this.captions.enabled); ui.addStyleHook.call(this); -- 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 --- src/js/source.js | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) (limited to 'src/js/source.js') diff --git a/src/js/source.js b/src/js/source.js index c670ab09..cbea5433 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -2,7 +2,7 @@ // Plyr source update // ========================================================================== -import types from './types'; +import { providers } from './types'; import utils from './utils'; import media from './media'; import ui from './ui'; @@ -48,35 +48,25 @@ const source = { this.elements.container.removeAttribute('class'); } - // Set the type - if ('type' in input) { - this.type = input.type; - - // Get child type for video (it might be an embed) - if (this.type === 'video') { - const firstSource = input.sources[0]; - - if ('type' in firstSource && types.embed.includes(firstSource.type)) { - this.type = firstSource.type; - } - } - } + // Set the type and provider + this.type = input.type; + this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5; // Check for support - this.supported = support.check(this.type, this.config.inline); + this.supported = support.check(this.type, this.provider, this.config.inline); // Create new markup - switch (this.type) { - case 'video': + switch (`${this.provider}:${this.type}`) { + case 'html5:video': this.media = utils.createElement('video'); break; - case 'audio': + case 'html5:audio': this.media = utils.createElement('audio'); break; - case 'youtube': - case 'vimeo': + case 'youtube:video': + case 'vimeo:video': this.media = utils.createElement('div'); this.embedId = input.sources[0].src; break; @@ -117,7 +107,6 @@ const source = { // Restore class hooks utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.supported.ui && this.captions.enabled); - ui.addStyleHook.call(this); // Set new sources for html5 -- 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 --- src/js/source.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src/js/source.js') diff --git a/src/js/source.js b/src/js/source.js index cbea5433..80620bdf 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -26,7 +26,7 @@ const source = { // Sources are not checked for support so be careful change(input) { if (!utils.is.object(input) || !('sources' in input) || !input.sources.length) { - this.console.warn('Invalid source format'); + this.debug.warn('Invalid source format'); return; } @@ -44,7 +44,7 @@ const source = { this.media = null; // Reset class name - if (utils.is.htmlElement(this.elements.container)) { + if (utils.is.element(this.elements.container)) { this.elements.container.removeAttribute('class'); } @@ -105,8 +105,7 @@ const source = { } } - // Restore class hooks - utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.supported.ui && this.captions.enabled); + // Restore class hook ui.addStyleHook.call(this); // Set new sources for html5 -- cgit v1.2.3 From d9ec1d1b8e251cf30509e88a76132c0e04f8c00d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 12 Jan 2018 19:35:46 +1100 Subject: Progressively enhance