Merge branch 'develop' of github.com:Selz/plyr into develop

# Conflicts:
#	readme.md

1 files changed, 52 insertions, 23 deletions

diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 0b815fa5..83b6d942 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 = {
@@ -15,6 +16,9 @@ const vimeo = {
         // Add embed class for responsive
         utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
 
+        // Set intial ratio
+        vimeo.setAspectRatio.call(this);
+
         // Set ID
         this.media.setAttribute('id', utils.generateId(this.type));
 
@@ -33,21 +37,31 @@ 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;
 
         // 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,
+            speed: true,
             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');
@@ -57,7 +71,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
@@ -99,18 +113,22 @@ const vimeo = {
 
                 // Restore pause state
                 if (paused) {
-                    this.pause();
+                    player.pause();
                 }
             },
         });
 
         // 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
@@ -148,6 +166,17 @@ 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);
+        }
+
         // Get title
         player.embed.getVideoTitle().then(title => {
             player.config.title = title;
@@ -156,7 +185,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
@@ -202,31 +231,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