diff options
Diffstat (limited to 'src/js')
| -rw-r--r-- | src/js/listeners.js | 1 | ||||
| -rw-r--r-- | src/js/plugins/vimeo.js | 23 | ||||
| -rw-r--r-- | src/js/plugins/youtube.js | 9 | ||||
| -rw-r--r-- | src/js/plyr.js | 1 | ||||
| -rw-r--r-- | src/js/utils.js | 7 |
5 files changed, 31 insertions, 10 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js index 3c83038b..7a455c13 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -176,7 +176,6 @@ const listeners = { // Keyboard shortcuts if (this.config.keyboard.global) { - this.warn('bound'); utils.on(window, 'keydown keyup', handleKey, false); } else if (this.config.keyboard.focused) { utils.on(this.elements.container, 'keydown keyup', handleKey, false); 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; diff --git a/src/js/plyr.js b/src/js/plyr.js index 675ddb0c..355fe5cb 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -79,7 +79,6 @@ class Plyr { }; // Captions - // TODO: captions.enabled should be in config? this.captions = { enabled: null, tracks: null, diff --git a/src/js/utils.js b/src/js/utils.js index 70519fac..1c3d6ed8 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -631,6 +631,13 @@ const utils = { return fragment.firstChild.innerText; }, + // Get aspect ratio for dimensions + getAspectRatio(width, height) { + const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); + const ratio = getRatio(width, height); + return `${width / ratio}:${height / ratio}`; + }, + // Get the transition end event transitionEnd: (() => { const element = document.createElement('span'); |