From 6782737009bec028b393dbfb8c9897cd0c6df48f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 14 Jan 2019 00:33:48 +1100 Subject: Fullscreen fixes --- src/js/plugins/vimeo.js | 49 ++++++------------------------------------------- 1 file changed, 6 insertions(+), 43 deletions(-) (limited to 'src/js/plugins/vimeo.js') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 2d9ba6e2..c0bcf8af 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -11,6 +11,7 @@ import fetch from '../utils/fetch'; import is from '../utils/is'; import loadScript from '../utils/loadScript'; import { format, stripHTML } from '../utils/strings'; +import { setAspectRatio } from '../utils/style'; import { buildUrlParams } from '../utils/urls'; // Parse Vimeo ID from URL @@ -27,13 +28,6 @@ function parseId(url) { return url.match(regex) ? RegExp.$2 : url; } -// Get aspect ratio for dimensions -function getAspectRatio(width, height) { - const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); - const ratio = getRatio(width, height); - return `${width / ratio}:${height / ratio}`; -} - // Set playback state and trigger change (only on actual change) function assurePlaybackState(play) { if (play && !this.embed.hasPlayed) { @@ -51,7 +45,7 @@ const vimeo = { toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio - vimeo.setAspectRatio.call(this); + setAspectRatio.call(this); // Load the API if not already if (!is.object(window.Vimeo)) { @@ -67,22 +61,6 @@ const vimeo = { } }, - // Set aspect ratio - // For Vimeo we have an extra 300% height
to hide the standard controls and UI - setAspectRatio(input) { - const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number); - const padding = (100 / x) * y; - vimeo.padding = padding; - this.elements.wrapper.style.paddingBottom = `${padding}%`; - - if (this.supported.ui) { - const height = 240; - const offset = (height - padding) / (height / 50); - - this.media.style.transform = `translateY(-${offset}%)`; - } - }, - // API Ready ready() { const player = this; @@ -91,7 +69,7 @@ const vimeo = { const options = { loop: player.config.loop.active, autoplay: player.autoplay, - // muted: player.muted, + muted: player.muted, byline: false, portrait: false, title: false, @@ -300,8 +278,9 @@ const vimeo = { // Set aspect ratio based on video size Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { - vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]); - vimeo.setAspectRatio.call(this, vimeo.ratio); + const [width, height] = dimensions; + player.embed.ratio = `${width}:${height}`; + setAspectRatio.call(this, player.embed.ratio); }); // Set autopause @@ -405,22 +384,6 @@ const vimeo = { triggerEvent.call(player, player.media, 'error'); }); - // Set height/width on fullscreen - player.on('enterfullscreen exitfullscreen', event => { - const { target } = player.fullscreen; - - // Ignore for iOS native - if (target !== player.elements.container) { - return; - } - - const toggle = event.type === 'enterfullscreen'; - const [x, y] = vimeo.ratio.split(':').map(Number); - const dimension = x > y ? 'width' : 'height'; - - target.style[dimension] = toggle ? `${vimeo.padding}%` : null; - }); - // Rebuild UI setTimeout(() => ui.build.call(player), 0); }, -- cgit v1.2.3 From 052e426810d504a01beb05c8bb34f83e190a0679 Mon Sep 17 00:00:00 2001 From: Christian Gambardella Date: Thu, 24 Jan 2019 12:07:01 +0100 Subject: Adds options for vimeo plugin #1316 This adds replaces hard coded vimeo options with options that can be passed to the Plyr instance when initializing. --- src/js/plugins/vimeo.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/js/plugins/vimeo.js') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index c0bcf8af..5fcd9ac8 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -70,11 +70,11 @@ const vimeo = { loop: player.config.loop.active, autoplay: player.autoplay, muted: player.muted, - byline: false, - portrait: false, - title: false, - speed: true, - transparent: 0, + byline: player.config.vimeo.byline, + portrait: player.config.vimeo.portrait, + title: player.config.vimeo.title, + speed: player.config.vimeo.speed, + transparent: player.config.vimeo.transparent === true ? 1 : 0, gesture: 'media', playsinline: !this.config.fullscreen.iosNative, }; -- cgit v1.2.3 From 1d51b287014697701b78c883f70c9963f4253d3c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 Jan 2019 22:45:47 +1100 Subject: Tweaks --- src/js/plugins/vimeo.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) (limited to 'src/js/plugins/vimeo.js') diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 5fcd9ac8..a7664e73 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -10,6 +10,7 @@ import { triggerEvent } from '../utils/events'; import fetch from '../utils/fetch'; import is from '../utils/is'; import loadScript from '../utils/loadScript'; +import { extend } from '../utils/objects'; import { format, stripHTML } from '../utils/strings'; import { setAspectRatio } from '../utils/style'; import { buildUrlParams } from '../utils/urls'; @@ -64,21 +65,22 @@ const vimeo = { // API Ready ready() { const player = this; + const config = player.config.vimeo; // Get Vimeo params for the iframe - const options = { - loop: player.config.loop.active, - autoplay: player.autoplay, - muted: player.muted, - byline: player.config.vimeo.byline, - portrait: player.config.vimeo.portrait, - title: player.config.vimeo.title, - speed: player.config.vimeo.speed, - transparent: player.config.vimeo.transparent === true ? 1 : 0, - gesture: 'media', - playsinline: !this.config.fullscreen.iosNative, - }; - const params = buildUrlParams(options); + const params = buildUrlParams( + extend( + {}, + { + loop: player.config.loop.active, + autoplay: player.autoplay, + muted: player.muted, + gesture: 'media', + playsinline: !this.config.fullscreen.iosNative, + }, + config, + ), + ); // Get the source URL or ID let source = player.media.getAttribute('src'); -- cgit v1.2.3