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

# Conflicts:
#	dist/plyr.js
#	dist/plyr.js.map
#	src/js/controls.js

2 files changed, 99 insertions, 25 deletions

diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 18ef1d38..10c0fc62 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}%)`;
     },
@@ -55,6 +56,7 @@ const vimeo = {
             title: false,
             speed: true,
             transparent: 0,
+            gesture: 'media',
         };
         const params = utils.buildUrlParameters(options);
         const id = utils.parseVimeoId(player.embedId);
@@ -70,23 +72,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 +127,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 +141,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 +156,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 +171,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;
+                });
             },
         });
 
@@ -191,6 +204,7 @@ const vimeo = {
         // Get title
         player.embed.getVideoTitle().then(title => {
             player.config.title = title;
+            ui.setTitle.call(this);
         });
 
         // Get current time
@@ -269,6 +283,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 da127bed..a46773a0 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -23,6 +23,22 @@ 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);
@@ -81,10 +97,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
@@ -207,7 +260,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) {