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/plugins/vimeo.js | 165 ++++++++++++++++++++++++++++++ src/js/plugins/youtube.js | 256 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 421 insertions(+) create mode 100644 src/js/plugins/vimeo.js create mode 100644 src/js/plugins/youtube.js (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js new file mode 100644 index 00000000..99b55e32 --- /dev/null +++ b/src/js/plugins/vimeo.js @@ -0,0 +1,165 @@ +// ========================================================================== +// Vimeo plugin +// ========================================================================== + +import utils from './../utils'; +import captions from './../captions'; +import ui from './../ui'; + +const vimeo = { + // Setup YouTube + setup() { + // Remove old containers + const containers = utils.getElements.call(this, `[id^="${this.type}-"]`); + Array.from(containers).forEach(utils.removeElement); + + // Add embed class for responsive + utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + + // Set ID + this.media.setAttribute('id', utils.generateId(this.type)); + + // Load the API if not already + if (!utils.is.object(window.Vimeo)) { + utils.loadScript(this.config.urls.vimeo.api); + // Wait for load + const vimeoTimer = window.setInterval(() => { + if (utils.is.object(window.Vimeo)) { + window.clearInterval(vimeoTimer); + vimeo.ready.call(this); + } + }, 50); + } else { + vimeo.ready.call(this); + } + }, + + // Ready + ready() { + const player = this; + + // Get Vimeo params for the iframe + const options = { + loop: this.config.loop.active, + autoplay: this.config.autoplay, + byline: false, + portrait: false, + title: false, + transparent: 0, + }; + const params = utils.buildUrlParameters(options); + const id = utils.parseVimeoId(this.embedId); + + // Build an iframe + const iframe = utils.createElement('iframe'); + const src = `https://player.vimeo.com/video/${id}?${params}`; + iframe.setAttribute('src', src); + iframe.setAttribute('allowfullscreen', ''); + player.media.appendChild(iframe); + + // Setup instance + // https://github.com/vimeo/this.js + player.embed = new window.Vimeo.Player(iframe); + + // Create a faux HTML5 API using the Vimeo API + player.media.play = () => { + player.embed.play(); + player.media.paused = false; + }; + player.media.pause = () => { + player.embed.pause(); + player.media.paused = true; + }; + player.media.stop = () => { + player.embed.stop(); + player.media.paused = true; + }; + + player.media.paused = true; + player.media.currentTime = 0; + + // Rebuild UI + ui.build.call(player); + + player.embed.getCurrentTime().then(value => { + player.media.currentTime = value; + utils.dispatchEvent.call(this, this.media, 'timeupdate'); + }); + + player.embed.getDuration().then(value => { + player.media.duration = value; + utils.dispatchEvent.call(player, player.media, 'durationchange'); + }); + + // Get captions + player.embed.getTextTracks().then(tracks => { + player.captions.tracks = tracks; + + captions.setup.call(player); + }); + + player.embed.on('cuechange', data => { + let cue = null; + + if (data.cues.length) { + cue = utils.stripHTML(data.cues[0].text); + } + + captions.set.call(player, cue); + }); + + player.embed.on('loaded', () => { + if (utils.is.htmlElement(player.embed.element) && player.supported.ui) { + const frame = player.embed.element; + + // Fix Vimeo controls issue + // https://github.com/sampotts/plyr/issues/697 + // frame.src = `${frame.src}&transparent=0`; + + // Fix keyboard focus issues + // https://github.com/sampotts/plyr/issues/317 + frame.setAttribute('tabindex', -1); + } + }); + + player.embed.on('play', () => { + player.media.paused = false; + utils.dispatchEvent.call(player, player.media, 'play'); + utils.dispatchEvent.call(player, player.media, 'playing'); + }); + + player.embed.on('pause', () => { + player.media.paused = true; + utils.dispatchEvent.call(player, player.media, 'pause'); + }); + + this.embed.on('timeupdate', data => { + this.media.seeking = false; + this.media.currentTime = data.seconds; + utils.dispatchEvent.call(this, this.media, 'timeupdate'); + }); + + this.embed.on('progress', data => { + this.media.buffered = data.percent; + utils.dispatchEvent.call(this, this.media, 'progress'); + + if (parseInt(data.percent, 10) === 1) { + // Trigger event + utils.dispatchEvent.call(this, this.media, 'canplaythrough'); + } + }); + + this.embed.on('seeked', () => { + this.media.seeking = false; + utils.dispatchEvent.call(this, this.media, 'seeked'); + utils.dispatchEvent.call(this, this.media, 'play'); + }); + + this.embed.on('ended', () => { + this.media.paused = true; + utils.dispatchEvent.call(this, this.media, 'ended'); + }); + }, +}; + +export default vimeo; diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js new file mode 100644 index 00000000..61e7adce --- /dev/null +++ b/src/js/plugins/youtube.js @@ -0,0 +1,256 @@ +// ========================================================================== +// YouTube plugin +// ========================================================================== + +import utils from './../utils'; +import controls from './../controls'; +import ui from './../ui'; + +/* Object.defineProperty(input, "value", { + get: function() {return this._value;}, + set: function(v) { + // Do your stuff + this._value = v; + } +}); */ + +const youtube = { + // Setup YouTube + setup() { + const videoId = utils.parseYouTubeId(this.embedId); + + // Remove old containers + const containers = utils.getElements.call(this, `[id^="${this.type}-"]`); + Array.from(containers).forEach(utils.removeElement); + + // Add embed class for responsive + utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + + // Set ID + this.media.setAttribute('id', utils.generateId(this.type)); + + // Setup API + if (utils.is.object(window.YT)) { + youtube.ready.call(this, videoId); + } else { + // Load the API + utils.loadScript(this.config.urls.youtube.api); + + // Setup callback for the API + window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; + + // Add to queue + window.onYouTubeReadyCallbacks.push(() => { + youtube.ready.call(this, videoId); + }); + + // Set callback to process queue + window.onYouTubeIframeAPIReady = () => { + window.onYouTubeReadyCallbacks.forEach(callback => { + callback(); + }); + }; + } + }, + + // Handle YouTube API ready + ready(videoId) { + const player = this; + + // Setup instance + // https://developers.google.com/youtube/iframe_api_reference + player.embed = new window.YT.Player(player.media.id, { + videoId, + playerVars: { + autoplay: player.config.autoplay ? 1 : 0, // Autoplay + controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported + rel: 0, // No related vids + showinfo: 0, // Hide info + iv_load_policy: 3, // Hide annotations + modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused) + disablekb: 1, // Disable keyboard as we handle it + playsinline: 1, // Allow iOS inline playback + + // Tracking for stats + origin: window && window.location.hostname, + widget_referrer: window && window.location.href, + + // Captions is flaky on YouTube + // cc_load_policy: (this.captions.active ? 1 : 0), + // cc_lang_pref: 'en', + }, + events: { + onError(event) { + utils.dispatchEvent.call(player, player.media, 'error', true, { + code: event.data, + embed: event.target, + }); + }, + onPlaybackQualityChange(event) { + // Get the instance + const instance = event.target; + + // Get current quality + player.media.quality = instance.getPlaybackQuality(); + + utils.dispatchEvent.call(player, player.media, 'qualitychange'); + }, + onPlaybackRateChange(event) { + // Get the instance + const instance = event.target; + + // Get current speed + player.media.playbackRate = instance.getPlaybackRate(); + + utils.dispatchEvent.call(player, player.media, 'ratechange'); + }, + onReady(event) { + // Get the instance + const instance = event.target; + + // Create a faux HTML5 API using the YouTube API + player.media.play = () => { + instance.playVideo(); + player.media.paused = false; + }; + player.media.pause = () => { + instance.pauseVideo(); + player.media.paused = true; + }; + player.media.stop = () => { + instance.stopVideo(); + player.media.paused = true; + }; + player.media.duration = instance.getDuration(); + player.media.paused = true; + player.media.muted = instance.isMuted(); + player.media.currentTime = 0; + + // Get available speeds + if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { + controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); + } + + // Set title + player.config.title = instance.getVideoData().title; + + // Set the tabindex to avoid focus entering iframe + if (player.supported.ui) { + player.media.setAttribute('tabindex', -1); + } + + // Rebuild UI + ui.build.call(player); + + utils.dispatchEvent.call(player, player.media, 'timeupdate'); + utils.dispatchEvent.call(player, player.media, 'durationchange'); + + // Reset timer + window.clearInterval(player.timers.buffering); + + // Setup buffering + player.timers.buffering = window.setInterval(() => { + // Get loaded % from YouTube + player.media.buffered = instance.getVideoLoadedFraction(); + + // Trigger progress only when we actually buffer something + if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) { + utils.dispatchEvent.call(player, player.media, 'progress'); + } + + // Set last buffer point + player.media.lastBuffered = player.media.buffered; + + // Bail if we're at 100% + if (player.media.buffered === 1) { + window.clearInterval(player.timers.buffering); + + // Trigger event + utils.dispatchEvent.call(player, player.media, 'canplaythrough'); + } + }, 200); + }, + onStateChange(event) { + // Get the instance + const instance = event.target; + + // Reset timer + window.clearInterval(player.timers.playing); + + // Handle events + // -1 Unstarted + // 0 Ended + // 1 Playing + // 2 Paused + // 3 Buffering + // 5 Video cued + switch (event.data) { + case 0: + // YouTube doesn't support loop for a single video, so mimick it. + if (player.config.loop.active) { + // YouTube needs a call to `stopVideo` before playing again + instance.stopVideo(); + instance.playVideo(); + + break; + } + + player.media.paused = true; + + utils.dispatchEvent.call(player, player.media, 'ended'); + + break; + + case 1: + player.media.paused = false; + + // If we were seeking, fire seeked event + if (player.media.seeking) { + utils.dispatchEvent.call(player, player.media, 'seeked'); + } + + player.media.seeking = false; + + utils.dispatchEvent.call(player, player.media, 'play'); + utils.dispatchEvent.call(player, player.media, 'playing'); + + // Poll to get playback progress + player.timers.playing = window.setInterval(() => { + player.media.currentTime = instance.getCurrentTime(); + utils.dispatchEvent.call(player, player.media, 'timeupdate'); + }, 100); + + // Check duration again due to YouTube bug + // https://github.com/sampotts/plyr/issues/374 + // https://code.google.com/p/gdata-issues/issues/detail?id=8690 + if (player.media.duration !== instance.getDuration()) { + player.media.duration = instance.getDuration(); + utils.dispatchEvent.call(player, player.media, 'durationchange'); + } + + // Get quality + controls.setQualityMenu.call(player, instance.getAvailableQualityLevels()); + + break; + + case 2: + player.media.paused = true; + + utils.dispatchEvent.call(player, player.media, 'pause'); + + break; + + default: + break; + } + + utils.dispatchEvent.call(player, player.elements.container, 'statechange', false, { + code: event.data, + }); + }, + }, + }); + }, +}; + +export default youtube; -- cgit v1.2.3 From 069c8093aefec9f23f3ff38de6041f8f90edf022 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 14:45:06 +1100 Subject: Small bug fixes --- src/js/plugins/vimeo.js | 9 +++++++++ src/js/plugins/youtube.js | 18 ++++++++++-------- 2 files changed, 19 insertions(+), 8 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 99b55e32..12632f64 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -78,6 +78,15 @@ const vimeo = { player.media.paused = true; player.media.currentTime = 0; + // Playback speed + // Not currently supported in Vimeo + Object.defineProperty(player.media, 'playbackRate', { + get() { + return null; + }, + set() {}, + }); + // Rebuild UI ui.build.call(player); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 61e7adce..7d5c729c 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -6,14 +6,6 @@ import utils from './../utils'; import controls from './../controls'; import ui from './../ui'; -/* Object.defineProperty(input, "value", { - get: function() {return this._value;}, - set: function(v) { - // Do your stuff - this._value = v; - } -}); */ - const youtube = { // Setup YouTube setup() { @@ -126,6 +118,16 @@ const youtube = { player.media.muted = instance.isMuted(); player.media.currentTime = 0; + // Playback speed + Object.defineProperty(player.media, 'playbackRate', { + get() { + return instance.getPlaybackRate(); + }, + set(speed) { + instance.setPlaybackRate(speed); + }, + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); -- 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/plugins/vimeo.js | 39 +++++++++++++++++++++++++++++++-------- src/js/plugins/youtube.js | 21 +++++++++++++++++++-- 2 files changed, 50 insertions(+), 10 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 12632f64..34e326e7 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -77,6 +77,34 @@ const vimeo = { player.media.paused = true; player.media.currentTime = 0; + let { currentTime } = player.media; + + // Seeking + Object.defineProperty(player.media, 'currentTime', { + get() { + return currentTime; + }, + set(time) { + // Get current paused state + const { paused } = player.media; + + player.warn('called'); + + // Set seeking flag + player.media.seeking = true; + + // Trigger seeking + utils.dispatchEvent.call(player, player.media, 'seeking'); + + // Seek after events + player.embed.setCurrentTime(time); + + // Restore pause state + if (paused) { + this.pause(); + } + }, + }); // Playback speed // Not currently supported in Vimeo @@ -88,10 +116,10 @@ const vimeo = { }); // Rebuild UI - ui.build.call(player); + window.setTimeout(() => ui.build.call(player), 0); player.embed.getCurrentTime().then(value => { - player.media.currentTime = value; + currentTime = value; utils.dispatchEvent.call(this, this.media, 'timeupdate'); }); @@ -103,7 +131,6 @@ const vimeo = { // Get captions player.embed.getTextTracks().then(tracks => { player.captions.tracks = tracks; - captions.setup.call(player); }); @@ -121,10 +148,6 @@ const vimeo = { if (utils.is.htmlElement(player.embed.element) && player.supported.ui) { const frame = player.embed.element; - // Fix Vimeo controls issue - // https://github.com/sampotts/plyr/issues/697 - // frame.src = `${frame.src}&transparent=0`; - // Fix keyboard focus issues // https://github.com/sampotts/plyr/issues/317 frame.setAttribute('tabindex', -1); @@ -144,7 +167,7 @@ const vimeo = { this.embed.on('timeupdate', data => { this.media.seeking = false; - this.media.currentTime = data.seconds; + currentTime = data.seconds; utils.dispatchEvent.call(this, this.media, 'timeupdate'); }); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 7d5c729c..ce21433e 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -118,6 +118,23 @@ const youtube = { player.media.muted = instance.isMuted(); player.media.currentTime = 0; + // Seeking + Object.defineProperty(player.media, 'currentTime', { + get() { + return Number(instance.getCurrentTime()); + }, + set(time) { + // Set seeking flag + player.media.seeking = true; + + // Trigger seeking + utils.dispatchEvent.call(player, player.media, 'seeking'); + + // Seek after events sent + instance.seekTo(time); + }, + }); + // Playback speed Object.defineProperty(player.media, 'playbackRate', { get() { @@ -142,7 +159,7 @@ const youtube = { } // Rebuild UI - ui.build.call(player); + window.setTimeout(() => ui.build.call(player), 0); utils.dispatchEvent.call(player, player.media, 'timeupdate'); utils.dispatchEvent.call(player, player.media, 'durationchange'); @@ -218,7 +235,7 @@ const youtube = { // Poll to get playback progress player.timers.playing = window.setInterval(() => { - player.media.currentTime = instance.getCurrentTime(); + // player.media.currentTime = instance.getCurrentTime(); utils.dispatchEvent.call(player, player.media, 'timeupdate'); }, 100); -- cgit v1.2.3 From 8d80f6b05d44a3da8f3818ee5421c33569ec4b2f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 23:53:03 +1100 Subject: Removed log --- src/js/plugins/vimeo.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 34e326e7..7bcb2d01 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -86,10 +86,9 @@ const vimeo = { }, set(time) { // Get current paused state + // Vimeo will automatically play on seek const { paused } = player.media; - player.warn('called'); - // Set seeking flag player.media.seeking = true; -- cgit v1.2.3 From 3930ebb339e750f6da8d6936f78d55215414b0f9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 5 Nov 2017 01:02:10 +1100 Subject: Menu design tweaks, moved logic into plugins --- src/js/plugins/vimeo.js | 22 +++++++++++++++++++++- src/js/plugins/youtube.js | 18 ++++++++++++++---- 2 files changed, 35 insertions(+), 5 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 7bcb2d01..8c7f2b04 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -77,9 +77,9 @@ const vimeo = { player.media.paused = true; player.media.currentTime = 0; - let { currentTime } = player.media; // Seeking + let { currentTime } = player.media; Object.defineProperty(player.media, 'currentTime', { get() { return currentTime; @@ -114,14 +114,34 @@ const vimeo = { set() {}, }); + // Volume + let { volume } = player.media; + Object.defineProperty(player.media, 'volume', { + get() { + return volume; + }, + set(input) { + volume = input; + player.embed.setVolume(input); + utils.dispatchEvent.call(player, player.media, 'volumechange'); + }, + }); + // Rebuild UI window.setTimeout(() => ui.build.call(player), 0); + // Get title + player.embed.getVideoTitle().then(title => { + player.config.title = title; + }); + + // Get current time player.embed.getCurrentTime().then(value => { currentTime = value; utils.dispatchEvent.call(this, this.media, 'timeupdate'); }); + // Get duration player.embed.getDuration().then(value => { player.media.duration = value; utils.dispatchEvent.call(player, player.media, 'durationchange'); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index ce21433e..7b8447c2 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -140,8 +140,19 @@ const youtube = { get() { return instance.getPlaybackRate(); }, - set(speed) { - instance.setPlaybackRate(speed); + set(input) { + instance.setPlaybackRate(input); + }, + }); + + // Volume + Object.defineProperty(player.media, 'volume', { + get() { + return instance.getVolume() / 100; + }, + set(input) { + instance.setVolume(input * 100); + utils.dispatchEvent.call(player, player.media, 'volumechange'); }, }); @@ -235,9 +246,8 @@ const youtube = { // Poll to get playback progress player.timers.playing = window.setInterval(() => { - // player.media.currentTime = instance.getCurrentTime(); utils.dispatchEvent.call(player, player.media, 'timeupdate'); - }, 100); + }, 50); // Check duration again due to YouTube bug // https://github.com/sampotts/plyr/issues/374 -- cgit v1.2.3 From 8aaa9320505baec3575bc1e92f37225729ee88f6 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 5 Nov 2017 01:13:00 +1100 Subject: Cleanup --- src/js/plugins/vimeo.js | 3 +-- src/js/plugins/youtube.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 8c7f2b04..f75b16aa 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -7,7 +7,6 @@ import captions from './../captions'; import ui from './../ui'; const vimeo = { - // Setup YouTube setup() { // Remove old containers const containers = utils.getElements.call(this, `[id^="${this.type}-"]`); @@ -34,7 +33,7 @@ const vimeo = { } }, - // Ready + // API Ready ready() { const player = this; diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 7b8447c2..2b4c2cdc 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -7,7 +7,6 @@ import controls from './../controls'; import ui from './../ui'; const youtube = { - // Setup YouTube setup() { const videoId = utils.parseYouTubeId(this.embedId); @@ -45,7 +44,7 @@ const youtube = { } }, - // Handle YouTube API ready + // API ready ready(videoId) { const player = this; -- cgit v1.2.3 From 1c693df00b44961674a35243f5172716a3735b71 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 5 Nov 2017 11:45:02 +1100 Subject: src getter fix, local storage fix --- src/js/plugins/vimeo.js | 13 +++++++++++++ src/js/plugins/youtube.js | 7 +++++++ 2 files changed, 20 insertions(+) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index f75b16aa..b9cc92c2 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -126,6 +126,19 @@ const vimeo = { }, }); + // Source + let currentSrc; + + player.embed.getVideoUrl.then(value => { + currentSrc = value; + }); + + Object.defineProperty(player.media, 'currentSrc', { + get() { + return currentSrc; + }, + }); + // Rebuild UI window.setTimeout(() => ui.build.call(player), 0); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 2b4c2cdc..12e9d3e6 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -155,6 +155,13 @@ const youtube = { }, }); + // Source + Object.defineProperty(player.media, 'currentSrc', { + get() { + return instance.getVideoUrl(); + }, + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); -- cgit v1.2.3 From 4d417d039698b8b3e08350bf2d7bc5483ac4e76f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 5 Nov 2017 12:04:31 +1100 Subject: Vimeo fix --- src/js/plugins/vimeo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index b9cc92c2..81f96c9b 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -129,7 +129,7 @@ const vimeo = { // Source let currentSrc; - player.embed.getVideoUrl.then(value => { + player.embed.getVideoUrl().then(value => { currentSrc = value; }); -- cgit v1.2.3 From 60084a17f8de59fac9452d79dda13b124a12f2b2 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 5 Nov 2017 18:40:41 +1100 Subject: YouTube volume fix --- src/js/plugins/vimeo.js | 19 ++++++++++++++----- src/js/plugins/youtube.js | 24 +++++++++++++++++++----- 2 files changed, 33 insertions(+), 10 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 81f96c9b..0b815fa5 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -126,22 +126,28 @@ const vimeo = { }, }); + // Muted + Object.defineProperty(player.media, 'muted', { + get() { + return volume === 0; + }, + set(input) { + const toggle = utils.is.boolean(input) ? input : false; + player.volume = toggle ? 0 : player.config.volume; + }, + }); + // Source let currentSrc; - player.embed.getVideoUrl().then(value => { currentSrc = value; }); - Object.defineProperty(player.media, 'currentSrc', { get() { return currentSrc; }, }); - // Rebuild UI - window.setTimeout(() => ui.build.call(player), 0); - // Get title player.embed.getVideoTitle().then(title => { player.config.title = title; @@ -222,6 +228,9 @@ const vimeo = { this.media.paused = true; utils.dispatchEvent.call(this, this.media, 'ended'); }); + + // Rebuild UI + window.setTimeout(() => ui.build.call(player), 0); }, }; diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 12e9d3e6..38f649a5 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -145,12 +145,26 @@ const youtube = { }); // Volume + let volume = instance.getVolume() / 100; Object.defineProperty(player.media, 'volume', { get() { - return instance.getVolume() / 100; + return volume; }, set(input) { - instance.setVolume(input * 100); + volume = input; + instance.setVolume(volume * 100); + utils.dispatchEvent.call(player, player.media, 'volumechange'); + }, + }); + + // Muted + Object.defineProperty(player.media, 'muted', { + get() { + return instance.isMuted(); + }, + set(input) { + const toggle = utils.is.boolean(input) ? input : false; + instance[toggle ? 'mute' : 'unMute'](); utils.dispatchEvent.call(player, player.media, 'volumechange'); }, }); @@ -175,9 +189,6 @@ const youtube = { player.media.setAttribute('tabindex', -1); } - // Rebuild UI - window.setTimeout(() => ui.build.call(player), 0); - utils.dispatchEvent.call(player, player.media, 'timeupdate'); utils.dispatchEvent.call(player, player.media, 'durationchange'); @@ -205,6 +216,9 @@ const youtube = { utils.dispatchEvent.call(player, player.media, 'canplaythrough'); } }, 200); + + // Rebuild UI + window.setTimeout(() => ui.build.call(player), 50); }, onStateChange(event) { // Get the instance -- cgit v1.2.3 From 006871074032e5b24408fb654eb2856585c491e1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 19:38:31 +1100 Subject: Started on documentation and aspect ratio option --- src/js/plugins/vimeo.js | 7 +++++++ src/js/plugins/youtube.js | 4 ++++ 2 files changed, 11 insertions(+) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 0b815fa5..0f6aa4db 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -15,6 +15,13 @@ const vimeo = { // Add embed class for responsive utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + // Set aspect ratio + const ratio = this.config.ratio.split(':'); + const padding = 100 / ratio[0] * ratio[1]; + const offset = (100 - padding) / 2; + this.elements.wrapper.style.paddingBottom = `${padding}%`; + this.media.style.transform = `translateY(-${offset}%)`; + // Set ID this.media.setAttribute('id', utils.generateId(this.type)); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 38f649a5..2c8557dc 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -17,6 +17,10 @@ const youtube = { // Add embed class for responsive utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + // Set aspect ratio + const ratio = this.config.ratio.split(':'); + this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`; + // Set ID this.media.setAttribute('id', utils.generateId(this.type)); -- cgit v1.2.3 From f8ecea8fb700059ee6eee7e5dd05d8ed772c0d12 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 19:47:14 +1100 Subject: Added Vimeo playback speed --- src/js/plugins/vimeo.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 0f6aa4db..76846cf9 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -4,6 +4,7 @@ import utils from './../utils'; import captions from './../captions'; +import controls from './../controls'; import ui from './../ui'; const vimeo = { @@ -51,6 +52,7 @@ const vimeo = { byline: false, portrait: false, title: false, + speed: true, transparent: 0, }; const params = utils.buildUrlParameters(options); @@ -112,12 +114,16 @@ const vimeo = { }); // Playback speed - // Not currently supported in Vimeo + let { playbackRate } = player.media; Object.defineProperty(player.media, 'playbackRate', { get() { - return null; + return playbackRate; + }, + set(input) { + playbackRate = input; + player.embed.setPlaybackRate(input); + utils.dispatchEvent.call(player, player.media, 'ratechange'); }, - set() {}, }); // Volume @@ -155,6 +161,11 @@ const vimeo = { }, }); + // Get available speeds + if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { + controls.setSpeedMenu.call(player); + } + // Get title player.embed.getVideoTitle().then(title => { player.config.title = title; -- cgit v1.2.3 From 62c1b368cf254fdaba2612a308b6ce0a51ec853c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 19:53:27 +1100 Subject: Cleanup --- src/js/plugins/vimeo.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 76846cf9..dce3af03 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -47,8 +47,8 @@ const vimeo = { // Get Vimeo params for the iframe const options = { - loop: this.config.loop.active, - autoplay: this.config.autoplay, + loop: player.config.loop.active, + autoplay: player.config.autoplay, byline: false, portrait: false, title: false, @@ -56,7 +56,7 @@ const vimeo = { transparent: 0, }; const params = utils.buildUrlParameters(options); - const id = utils.parseVimeoId(this.embedId); + const id = utils.parseVimeoId(player.embedId); // Build an iframe const iframe = utils.createElement('iframe'); @@ -66,7 +66,7 @@ const vimeo = { player.media.appendChild(iframe); // Setup instance - // https://github.com/vimeo/this.js + // https://github.com/vimeo/player.js player.embed = new window.Vimeo.Player(iframe); // Create a faux HTML5 API using the Vimeo API @@ -108,7 +108,7 @@ const vimeo = { // Restore pause state if (paused) { - this.pause(); + player.pause(); } }, }); @@ -174,7 +174,7 @@ const vimeo = { // Get current time player.embed.getCurrentTime().then(value => { currentTime = value; - utils.dispatchEvent.call(this, this.media, 'timeupdate'); + utils.dispatchEvent.call(player, player.media, 'timeupdate'); }); // Get duration @@ -220,31 +220,31 @@ const vimeo = { utils.dispatchEvent.call(player, player.media, 'pause'); }); - this.embed.on('timeupdate', data => { - this.media.seeking = false; + player.embed.on('timeupdate', data => { + player.media.seeking = false; currentTime = data.seconds; - utils.dispatchEvent.call(this, this.media, 'timeupdate'); + utils.dispatchEvent.call(player, player.media, 'timeupdate'); }); - this.embed.on('progress', data => { - this.media.buffered = data.percent; - utils.dispatchEvent.call(this, this.media, 'progress'); + player.embed.on('progress', data => { + player.media.buffered = data.percent; + utils.dispatchEvent.call(player, player.media, 'progress'); if (parseInt(data.percent, 10) === 1) { // Trigger event - utils.dispatchEvent.call(this, this.media, 'canplaythrough'); + utils.dispatchEvent.call(player, player.media, 'canplaythrough'); } }); - this.embed.on('seeked', () => { - this.media.seeking = false; - utils.dispatchEvent.call(this, this.media, 'seeked'); - utils.dispatchEvent.call(this, this.media, 'play'); + player.embed.on('seeked', () => { + player.media.seeking = false; + utils.dispatchEvent.call(player, player.media, 'seeked'); + utils.dispatchEvent.call(player, player.media, 'play'); }); - this.embed.on('ended', () => { - this.media.paused = true; - utils.dispatchEvent.call(this, this.media, 'ended'); + player.embed.on('ended', () => { + player.media.paused = true; + utils.dispatchEvent.call(player, player.media, 'ended'); }); // Rebuild UI -- cgit v1.2.3 From 1578525ee38a50b31266bc9ba3ecd62705d4a5d5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 20:24:07 +1100 Subject: Finished aspect ratio setting --- src/js/plugins/vimeo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index dce3af03..6e4f34a2 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -19,7 +19,7 @@ const vimeo = { // Set aspect ratio const ratio = this.config.ratio.split(':'); const padding = 100 / ratio[0] * ratio[1]; - const offset = (100 - padding) / 2; + const offset = (400 - padding) / 8; this.elements.wrapper.style.paddingBottom = `${padding}%`; this.media.style.transform = `translateY(-${offset}%)`; -- cgit v1.2.3 From 3a9beaed59f4eaca6ce2fd3f167f5c171317bb26 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 20:27:19 +1100 Subject: Vimeo captions fix --- src/js/plugins/vimeo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 6e4f34a2..9b67bdb0 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -19,7 +19,7 @@ const vimeo = { // Set aspect ratio const ratio = this.config.ratio.split(':'); const padding = 100 / ratio[0] * ratio[1]; - const offset = (400 - padding) / 8; + const offset = (300 - padding) / 6; this.elements.wrapper.style.paddingBottom = `${padding}%`; this.media.style.transform = `translateY(-${offset}%)`; -- cgit v1.2.3 From 84505da84ba97ae1b189f9c695228d324e9dc3b8 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 6 Nov 2017 22:00:00 +1100 Subject: Automatic Vimeo aspect ratio --- src/js/plugins/vimeo.js | 23 +++++++++++++++++------ src/js/plugins/youtube.js | 9 +++++++-- 2 files changed, 24 insertions(+), 8 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 9b67bdb0..83b6d942 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -16,12 +16,8 @@ const vimeo = { // Add embed class for responsive utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); - // Set aspect ratio - const ratio = this.config.ratio.split(':'); - const padding = 100 / ratio[0] * ratio[1]; - const offset = (300 - padding) / 6; - this.elements.wrapper.style.paddingBottom = `${padding}%`; - this.media.style.transform = `translateY(-${offset}%)`; + // Set intial ratio + vimeo.setAspectRatio.call(this); // Set ID this.media.setAttribute('id', utils.generateId(this.type)); @@ -41,6 +37,15 @@ const vimeo = { } }, + // Set aspect ratio + setAspectRatio(input) { + const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':'); + const padding = 100 / ratio[0] * ratio[1]; + const offset = (300 - padding) / 6; + this.elements.wrapper.style.paddingBottom = `${padding}%`; + this.media.style.transform = `translateY(-${offset}%)`; + }, + // API Ready ready() { const player = this; @@ -161,6 +166,12 @@ const vimeo = { }, }); + // Set aspect ratio based on video size + Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { + const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); + vimeo.setAspectRatio.call(this, ratio); + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 2c8557dc..ca0f2991 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -18,8 +18,7 @@ const youtube = { utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set aspect ratio - const ratio = this.config.ratio.split(':'); - this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`; + youtube.setAspectRatio.call(this); // Set ID this.media.setAttribute('id', utils.generateId(this.type)); @@ -48,6 +47,12 @@ const youtube = { } }, + // Set aspect ratio + setAspectRatio() { + const ratio = this.config.ratio.split(':'); + this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`; + }, + // API ready ready(videoId) { const player = this; -- cgit v1.2.3 From c948e95adea876c7c43785fe904bedd22f9c307d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 8 Nov 2017 00:37:14 +1100 Subject: Looping, increase/decrease volume fix --- src/js/plugins/vimeo.js | 14 +++++++++++++- src/js/plugins/youtube.js | 13 +++++-------- 2 files changed, 18 insertions(+), 9 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 83b6d942..f35cc927 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -53,7 +53,7 @@ const vimeo = { // Get Vimeo params for the iframe const options = { loop: player.config.loop.active, - autoplay: player.config.autoplay, + autoplay: player.autoplay, byline: false, portrait: false, title: false, @@ -155,6 +155,18 @@ const vimeo = { }, }); + // Loop + let { loop } = player.media; + Object.defineProperty(player.media, 'loop', { + get() { + return loop; + }, + set(input) { + loop = utils.is.boolean(input) ? input : player.config.loop.active; + player.embed.setLoop(loop); + }, + }); + // Source let currentSrc; player.embed.getVideoUrl().then(value => { diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 84d16488..5ff45ca8 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -76,7 +76,7 @@ const youtube = { widget_referrer: window && window.location.href, // Captions are flaky on YouTube - cc_load_policy: (this.captions.active ? 1 : 0), + cc_load_policy: this.captions.active ? 1 : 0, cc_lang_pref: this.config.captions.language, }, events: { @@ -246,18 +246,15 @@ const youtube = { switch (event.data) { case 0: // YouTube doesn't support loop for a single video, so mimick it. - if (player.config.loop.active) { + if (player.media.loop) { // YouTube needs a call to `stopVideo` before playing again instance.stopVideo(); instance.playVideo(); - - break; + } else { + utils.dispatchEvent.call(player, player.media, 'ended'); + player.media.paused = true; } - player.media.paused = true; - - utils.dispatchEvent.call(player, player.media, 'ended'); - break; case 1: -- cgit v1.2.3 From bb66be98da5470e227703c4ebcfcbccba234a992 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 8 Nov 2017 23:46:20 +1100 Subject: Volume fixes and other tidy up work --- src/js/plugins/vimeo.js | 10 +++++----- src/js/plugins/youtube.js | 19 +++++++++++++++++-- 2 files changed, 22 insertions(+), 7 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index f35cc927..1ad26bf4 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -119,20 +119,20 @@ const vimeo = { }); // Playback speed - let { playbackRate } = player.media; + let speed = player.config.speed.selected; Object.defineProperty(player.media, 'playbackRate', { get() { - return playbackRate; + return speed; }, set(input) { - playbackRate = input; + speed = input; player.embed.setPlaybackRate(input); utils.dispatchEvent.call(player, player.media, 'ratechange'); }, }); // Volume - let { volume } = player.media; + let { volume } = player.config; Object.defineProperty(player.media, 'volume', { get() { return volume; @@ -156,7 +156,7 @@ const vimeo = { }); // Loop - let { loop } = player.media; + let { loop } = player.config; Object.defineProperty(player.media, 'loop', { get() { return loop; diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 5ff45ca8..440890e7 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -123,10 +123,9 @@ const youtube = { }; player.media.duration = instance.getDuration(); player.media.paused = true; - player.media.muted = instance.isMuted(); - player.media.currentTime = 0; // Seeking + player.media.currentTime = 0; Object.defineProperty(player.media, 'currentTime', { get() { return Number(instance.getCurrentTime()); @@ -153,6 +152,21 @@ const youtube = { }, }); + // Quality + Object.defineProperty(player.media, 'quality', { + get() { + return instance.getPlaybackQuality(); + }, + set(input) { + // Trigger request event + utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, { + quality: input, + }); + + instance.setPlaybackQuality(input); + }, + }); + // Volume let volume = instance.getVolume() / 100; Object.defineProperty(player.media, 'volume', { @@ -167,6 +181,7 @@ const youtube = { }); // Muted + player.media.muted = instance.isMuted(); Object.defineProperty(player.media, 'muted', { get() { return instance.isMuted(); -- cgit v1.2.3 From f9602acf611900d9f9ee27e62e3883fa9394bdee Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 9 Nov 2017 16:06:49 +1100 Subject: Callback for loadScript --- src/js/plugins/vimeo.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 1ad26bf4..9da872f7 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -25,6 +25,7 @@ const vimeo = { // Load the API if not already if (!utils.is.object(window.Vimeo)) { utils.loadScript(this.config.urls.vimeo.api); + // Wait for load const vimeoTimer = window.setInterval(() => { if (utils.is.object(window.Vimeo)) { @@ -38,6 +39,7 @@ const vimeo = { }, // Set aspect ratio + // For Vimeo we have an extra 300% height
to hide the standard controls and UI setAspectRatio(input) { const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':'); const padding = 100 / ratio[0] * ratio[1]; -- cgit v1.2.3 From f878581c8fe8c3e525722762553cf085e67d990f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 9 Nov 2017 19:40:45 +1100 Subject: UI bugs --- src/js/plugins/vimeo.js | 7 +++++-- src/js/plugins/youtube.js | 9 +++++---- 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 1ad26bf4..8ae57dd9 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -145,13 +145,16 @@ const vimeo = { }); // Muted + let { muted } = player.config; Object.defineProperty(player.media, 'muted', { get() { - return volume === 0; + return muted; }, set(input) { const toggle = utils.is.boolean(input) ? input : false; - player.volume = toggle ? 0 : player.config.volume; + muted = toggle; + player.embed.setVolume(toggle ? 0 : player.config.volume); + utils.dispatchEvent.call(player, player.media, 'volumechange'); }, }); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 440890e7..da127bed 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -168,7 +168,7 @@ const youtube = { }); // Volume - let volume = instance.getVolume() / 100; + let { volume } = player.config; Object.defineProperty(player.media, 'volume', { get() { return volume; @@ -181,13 +181,14 @@ const youtube = { }); // Muted - player.media.muted = instance.isMuted(); + let { muted } = player.config; Object.defineProperty(player.media, 'muted', { get() { - return instance.isMuted(); + return muted; }, set(input) { - const toggle = utils.is.boolean(input) ? input : false; + const toggle = utils.is.boolean(input) ? input : muted; + muted = toggle; instance[toggle ? 'mute' : 'unMute'](); utils.dispatchEvent.call(player, player.media, 'volumechange'); }, -- cgit v1.2.3 From 66917fd39bd044ed728c98d21a192273b9129bde Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 9 Nov 2017 19:44:07 +1100 Subject: Use callback for loading Vimeo API --- src/js/plugins/vimeo.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 4bca80e3..18ef1d38 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -24,15 +24,9 @@ const vimeo = { // Load the API if not already if (!utils.is.object(window.Vimeo)) { - utils.loadScript(this.config.urls.vimeo.api); - - // Wait for load - const vimeoTimer = window.setInterval(() => { - if (utils.is.object(window.Vimeo)) { - window.clearInterval(vimeoTimer); - vimeo.ready.call(this); - } - }, 50); + utils.loadScript(this.config.urls.vimeo.api, () => { + vimeo.ready.call(this); + }); } else { vimeo.ready.call(this); } -- cgit v1.2.3 From 022b436c3f51d6a1a9bdf29ff9d34325389ecc82 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 14 Nov 2017 13:22:23 +0100 Subject: YouTube fix --- src/js/plugins/youtube.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index da127bed..9cd567fe 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -207,7 +207,9 @@ const youtube = { } // Set title - player.config.title = instance.getVideoData().title; + if (utils.is.function(instance.getVideoData)) { + player.config.title = instance.getVideoData().title; + } // Set the tabindex to avoid focus entering iframe if (player.supported.ui) { -- cgit v1.2.3 From c64b8f69403b0287f55f25dc533b41cb8d34075d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 14 Nov 2017 17:27:40 +0100 Subject: Started on error handling, Safari icon fix --- src/js/plugins/vimeo.js | 59 ++++++++++++++++++++++++++++++----------------- src/js/plugins/youtube.js | 43 +++++++++++++++++++++++++++++++--- 2 files changed, 78 insertions(+), 24 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 18ef1d38..f567bc32 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -37,7 +37,8 @@ const vimeo = { setAspectRatio(input) { const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':'); const padding = 100 / ratio[0] * ratio[1]; - const offset = (300 - padding) / 6; + const height = 200; + const offset = (height - padding) / (height / 50); this.elements.wrapper.style.paddingBottom = `${padding}%`; this.media.style.transform = `translateY(-${offset}%)`; }, @@ -70,23 +71,27 @@ const vimeo = { // https://github.com/vimeo/player.js player.embed = new window.Vimeo.Player(iframe); + player.media.paused = true; + player.media.currentTime = 0; + // Create a faux HTML5 API using the Vimeo API player.media.play = () => { - player.embed.play(); - player.media.paused = false; + player.embed.play().then(() => { + player.media.paused = false; + }); }; player.media.pause = () => { - player.embed.pause(); - player.media.paused = true; + player.embed.pause().then(() => { + player.media.paused = true; + }); }; player.media.stop = () => { - player.embed.stop(); - player.media.paused = true; + player.embed.stop().then(() => { + player.media.paused = true; + player.currentTime = 0; + }); }; - player.media.paused = true; - player.media.currentTime = 0; - // Seeking let { currentTime } = player.media; Object.defineProperty(player.media, 'currentTime', { @@ -121,9 +126,10 @@ const vimeo = { return speed; }, set(input) { - speed = input; - player.embed.setPlaybackRate(input); - utils.dispatchEvent.call(player, player.media, 'ratechange'); + player.embed.setPlaybackRate(input).then(() => { + speed = input; + utils.dispatchEvent.call(player, player.media, 'ratechange'); + }); }, }); @@ -134,9 +140,10 @@ const vimeo = { return volume; }, set(input) { - volume = input; - player.embed.setVolume(input); - utils.dispatchEvent.call(player, player.media, 'volumechange'); + player.embed.setVolume(input).then(() => { + volume = input; + utils.dispatchEvent.call(player, player.media, 'volumechange'); + }); }, }); @@ -148,9 +155,11 @@ const vimeo = { }, set(input) { const toggle = utils.is.boolean(input) ? input : false; - muted = toggle; - player.embed.setVolume(toggle ? 0 : player.config.volume); - utils.dispatchEvent.call(player, player.media, 'volumechange'); + + player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => { + muted = toggle; + utils.dispatchEvent.call(player, player.media, 'volumechange'); + }); }, }); @@ -161,8 +170,11 @@ const vimeo = { return loop; }, set(input) { - loop = utils.is.boolean(input) ? input : player.config.loop.active; - player.embed.setLoop(loop); + const toggle = utils.is.boolean(input) ? input : player.config.loop.active; + + player.embed.setLoop(toggle).then(() => { + loop = toggle; + }); }, }); @@ -269,6 +281,11 @@ const vimeo = { utils.dispatchEvent.call(player, player.media, 'ended'); }); + player.embed.on('error', detail => { + player.media.error = detail; + utils.dispatchEvent.call(player, player.media, 'error'); + }); + // Rebuild UI window.setTimeout(() => ui.build.call(player), 0); }, diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 9cd567fe..aa943740 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -81,10 +81,47 @@ const youtube = { }, events: { onError(event) { - utils.dispatchEvent.call(player, player.media, 'error', true, { + // If we've already fired an error, don't do it again + // YouTube fires onError twice + if (utils.is.object(player.media.error)) { + return; + } + + const detail = { code: event.data, - embed: event.target, - }); + }; + + // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError + switch (event.data) { + case 2: + detail.message = + 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.'; + break; + + case 5: + detail.message = + 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.'; + break; + + case 100: + detail.message = + 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.'; + break; + + case 101: + case 150: + detail.message = + 'The owner of the requested video does not allow it to be played in embedded players.'; + break; + + default: + detail.message = 'An unknown error occured'; + break; + } + + player.media.error = detail; + + utils.dispatchEvent.call(player, player.media, 'error'); }, onPlaybackQualityChange(event) { // Get the instance -- 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 --- src/js/plugins/vimeo.js | 2 ++ src/js/plugins/youtube.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index f567bc32..10c0fc62 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -56,6 +56,7 @@ const vimeo = { title: false, speed: true, transparent: 0, + gesture: 'media', }; const params = utils.buildUrlParameters(options); const id = utils.parseVimeoId(player.embedId); @@ -203,6 +204,7 @@ const vimeo = { // Get title player.embed.getVideoTitle().then(title => { player.config.title = title; + ui.setTitle.call(this); }); // Get current time diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index aa943740..6b70af4c 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -23,6 +23,20 @@ const youtube = { // Set ID this.media.setAttribute('id', utils.generateId(this.type)); + // Get the title + const key = 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'; + const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&fields=items(snippet(title))&part=snippet&key=${key}`; + + fetch(url) + .then(response => response.json()) + .then(obj => { + if (utils.is.object(obj)) { + this.config.title = obj.items[0].snippet.title; + ui.setTitle.call(this); + } + }) + .catch(() => {}); + // Setup API if (utils.is.object(window.YT)) { youtube.ready.call(this, videoId); -- 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 --- src/js/plugins/youtube.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 6b70af4c..a46773a0 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -23,19 +23,21 @@ const youtube = { // Set ID this.media.setAttribute('id', utils.generateId(this.type)); - // Get the title - const key = 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'; - const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&fields=items(snippet(title))&part=snippet&key=${key}`; - - fetch(url) - .then(response => response.json()) - .then(obj => { - if (utils.is.object(obj)) { - this.config.title = obj.items[0].snippet.title; - ui.setTitle.call(this); - } - }) - .catch(() => {}); + // Get the media title via Google API + const key = this.config.keys.google; + if (utils.is.string(key) && !utils.is.empty(key)) { + const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`; + + fetch(url) + .then(response => (response.ok ? response.json() : null)) + .then(result => { + if (result !== null && utils.is.object(result)) { + this.config.title = result.items[0].snippet.title; + ui.setTitle.call(this); + } + }) + .catch(() => {}); + } // Setup API if (utils.is.object(window.YT)) { -- 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 --- src/js/plugins/vimeo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 10c0fc62..f033a969 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -221,7 +221,7 @@ const vimeo = { // Get captions player.embed.getTextTracks().then(tracks => { - player.captions.tracks = tracks; + player.media.textTracks = tracks; captions.setup.call(player); }); @@ -232,7 +232,7 @@ const vimeo = { cue = utils.stripHTML(data.cues[0].text); } - captions.set.call(player, cue); + captions.setText.call(player, cue); }); player.embed.on('loaded', () => { -- cgit v1.2.3 From 0dc9681ae8d940fe3ff174234a7e66b42aab2c3e Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 19 Nov 2017 23:35:07 +1100 Subject: YouTube title --- src/js/plugins/youtube.js | 57 ++++++++++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 21 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index a46773a0..19a5fe67 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -23,22 +23,6 @@ const youtube = { // Set ID this.media.setAttribute('id', utils.generateId(this.type)); - // Get the media title via Google API - const key = this.config.keys.google; - if (utils.is.string(key) && !utils.is.empty(key)) { - const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`; - - fetch(url) - .then(response => (response.ok ? response.json() : null)) - .then(result => { - if (result !== null && utils.is.object(result)) { - this.config.title = result.items[0].snippet.title; - ui.setTitle.call(this); - } - }) - .catch(() => {}); - } - // Setup API if (utils.is.object(window.YT)) { youtube.ready.call(this, videoId); @@ -63,6 +47,39 @@ const youtube = { } }, + // Get the media title + getTitle() { + // Try via undocumented API method first + // This method disappears now and then though... + // https://github.com/sampotts/plyr/issues/709 + if (utils.is.function(this.embed.getVideoData)) { + const { title } = this.embed.getVideoData(); + + if (utils.is.empty(title)) { + this.config.title = title; + ui.setTitle.call(this); + return; + } + } + + // Or via Google API + const key = this.config.keys.google; + const videoId = utils.parseYouTubeId(this.embedId); + if (utils.is.string(key) && !utils.is.empty(key)) { + const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`; + + fetch(url) + .then(response => (response.ok ? response.json() : null)) + .then(result => { + if (result !== null && utils.is.object(result)) { + this.config.title = result.items[0].snippet.title; + ui.setTitle.call(this); + } + }) + .catch(() => {}); + } + }, + // Set aspect ratio setAspectRatio() { const ratio = this.config.ratio.split(':'); @@ -161,6 +178,9 @@ const youtube = { // Get the instance const instance = event.target; + // Get the title + youtube.getTitle.call(player); + // Create a faux HTML5 API using the YouTube API player.media.play = () => { instance.playVideo(); @@ -259,11 +279,6 @@ const youtube = { controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); } - // Set title - if (utils.is.function(instance.getVideoData)) { - player.config.title = instance.getVideoData().title; - } - // Set the tabindex to avoid focus entering iframe if (player.supported.ui) { player.media.setAttribute('tabindex', -1); -- cgit v1.2.3 From feae00224e90c42228fb76e5b3d3075ab0532b3b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 20 Nov 2017 10:48:28 +1100 Subject: Added ended and playing getters --- src/js/plugins/vimeo.js | 7 +++++++ src/js/plugins/youtube.js | 13 ++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index f033a969..50c49748 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -190,6 +190,13 @@ const vimeo = { }, }); + // Ended + Object.defineProperty(player.media, 'ended', { + get() { + return player.currentTime === player.duration; + }, + }); + // Set aspect ratio based on video size Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index a46773a0..3e8b8079 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -254,6 +254,13 @@ const youtube = { }, }); + // Ended + Object.defineProperty(player.media, 'ended', { + get() { + return player.currentTime === player.duration; + }, + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); @@ -316,6 +323,8 @@ const youtube = { // 5 Video cued switch (event.data) { case 0: + player.media.paused = true; + // YouTube doesn't support loop for a single video, so mimick it. if (player.media.loop) { // YouTube needs a call to `stopVideo` before playing again @@ -323,21 +332,19 @@ const youtube = { instance.playVideo(); } else { utils.dispatchEvent.call(player, player.media, 'ended'); - player.media.paused = true; } break; case 1: player.media.paused = false; + player.media.seeking = false; // If we were seeking, fire seeked event if (player.media.seeking) { utils.dispatchEvent.call(player, player.media, 'seeked'); } - player.media.seeking = false; - utils.dispatchEvent.call(player, player.media, 'play'); utils.dispatchEvent.call(player, player.media, 'playing'); -- cgit v1.2.3 From f518ec108b7f3fdf5f5d1913528859c533ebb356 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 21 Nov 2017 13:33:51 +1100 Subject: Vimeo autopause option --- src/js/plugins/vimeo.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 50c49748..9b62e844 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -203,6 +203,11 @@ const vimeo = { vimeo.setAspectRatio.call(this, ratio); }); + // Set autopause + player.embed.setAutopause(player.config.autopause).then(state => { + player.config.autopause = state; + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player); -- cgit v1.2.3 From d3b31e595a323208972f9422bf458b792da8c185 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 21 Nov 2017 20:14:57 +1100 Subject: Handle no audio, more docs in code, fix for playing getter --- src/js/plugins/vimeo.js | 5 ++++- src/js/plugins/youtube.js | 11 +++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 9b62e844..5c34a7ca 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -258,8 +258,11 @@ const vimeo = { }); player.embed.on('play', () => { + // Only fire play if paused before + if (player.media.paused) { + utils.dispatchEvent.call(player, player.media, 'play'); + } player.media.paused = false; - utils.dispatchEvent.call(player, player.media, 'play'); utils.dispatchEvent.call(player, player.media, 'playing'); }); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index c39b1785..9e02bd37 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -352,15 +352,18 @@ const youtube = { break; case 1: - player.media.paused = false; - player.media.seeking = false; - // If we were seeking, fire seeked event if (player.media.seeking) { utils.dispatchEvent.call(player, player.media, 'seeked'); } + player.media.seeking = false; + + // Only fire play if paused before + if (player.media.paused) { + utils.dispatchEvent.call(player, player.media, 'play'); + } + player.media.paused = false; - utils.dispatchEvent.call(player, player.media, 'play'); utils.dispatchEvent.call(player, player.media, 'playing'); // Poll to get playback progress -- 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/plugins/vimeo.js | 5 ----- src/js/plugins/youtube.js | 7 ++----- 2 files changed, 2 insertions(+), 10 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 5c34a7ca..6c32302a 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -208,11 +208,6 @@ const vimeo = { player.config.autopause = state; }); - // Get available speeds - if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { - controls.setSpeedMenu.call(player); - } - // Get title player.embed.getVideoTitle().then(title => { player.config.title = title; diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 9e02bd37..ce5b46e1 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -143,8 +143,7 @@ const youtube = { case 101: case 150: - detail.message = - 'The owner of the requested video does not allow it to be played in embedded players.'; + detail.message = 'The owner of the requested video does not allow it to be played in embedded players.'; break; default: @@ -282,9 +281,7 @@ const youtube = { }); // Get available speeds - if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { - controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); - } + player.options.speed = instance.getAvailablePlaybackRates(); // Set the tabindex to avoid focus entering iframe if (player.supported.ui) { -- 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/plugins/vimeo.js | 5 ++--- src/js/plugins/youtube.js | 5 +++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 6c32302a..21d34beb 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -4,13 +4,12 @@ import utils from './../utils'; import captions from './../captions'; -import controls from './../controls'; import ui from './../ui'; const vimeo = { setup() { // Remove old containers - const containers = utils.getElements.call(this, `[id^="${this.type}-"]`); + const containers = utils.getElements.call(this, `[id^="${this.provider}-"]`); Array.from(containers).forEach(utils.removeElement); // Add embed class for responsive @@ -20,7 +19,7 @@ const vimeo = { vimeo.setAspectRatio.call(this); // Set ID - this.media.setAttribute('id', utils.generateId(this.type)); + this.media.setAttribute('id', utils.generateId(this.provider)); // Load the API if not already if (!utils.is.object(window.Vimeo)) { diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index ce5b46e1..cf529fba 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -11,7 +11,7 @@ const youtube = { const videoId = utils.parseYouTubeId(this.embedId); // Remove old containers - const containers = utils.getElements.call(this, `[id^="${this.type}-"]`); + const containers = utils.getElements.call(this, `[id^="${this.provider}-"]`); Array.from(containers).forEach(utils.removeElement); // Add embed class for responsive @@ -21,7 +21,7 @@ const youtube = { youtube.setAspectRatio.call(this); // Set ID - this.media.setAttribute('id', utils.generateId(this.type)); + this.media.setAttribute('id', utils.generateId(this.provider)); // Setup API if (utils.is.object(window.YT)) { @@ -31,6 +31,7 @@ const youtube = { utils.loadScript(this.config.urls.youtube.api); // Setup callback for the API + // YouTube has it's own system of course... window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; // Add to queue -- cgit v1.2.3 From fd778313030134066e02ebc66d7f0c413a71234d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Nov 2017 01:19:16 +1100 Subject: Fix display for current language on change --- src/js/plugins/vimeo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 21d34beb..4ac2ce99 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -275,8 +275,8 @@ const vimeo = { player.media.buffered = data.percent; utils.dispatchEvent.call(player, player.media, 'progress'); + // Check all loaded if (parseInt(data.percent, 10) === 1) { - // Trigger event utils.dispatchEvent.call(player, player.media, 'canplaythrough'); } }); -- 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/plugins/vimeo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 4ac2ce99..6176583b 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -242,7 +242,7 @@ const vimeo = { }); player.embed.on('loaded', () => { - if (utils.is.htmlElement(player.embed.element) && player.supported.ui) { + if (utils.is.element(player.embed.element) && player.supported.ui) { const frame = player.embed.element; // Fix keyboard focus issues -- cgit v1.2.3 From 9e0c406a4ab7afa3e1f76687c4befcad171fe5aa Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 20 Dec 2017 20:47:02 +0000 Subject: Remove chaning ability and return promise for play() --- src/js/plugins/vimeo.js | 7 ++++++- src/js/plugins/youtube.js | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) (limited to 'src/js/plugins') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 6176583b..c77ecd20 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -80,11 +80,13 @@ const vimeo = { player.media.paused = false; }); }; + player.media.pause = () => { player.embed.pause().then(() => { player.media.paused = true; }); }; + player.media.stop = () => { player.embed.stop().then(() => { player.media.paused = true; @@ -197,7 +199,10 @@ const vimeo = { }); // Set aspect ratio based on video size - Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { + Promise.all([ + player.embed.getVideoWidth(), + player.embed.getVideoHeight(), + ]).then(dimensions => { const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); vimeo.setAspectRatio.call(this, ratio); }); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index cf529fba..67f1ca95 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -186,14 +186,17 @@ const youtube = { instance.playVideo(); player.media.paused = false; }; + player.media.pause = () => { instance.pauseVideo(); player.media.paused = true; }; + player.media.stop = () => { instance.stopVideo(); player.media.paused = true; }; + player.media.duration = instance.getDuration(); player.media.paused = true; -- 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