fix(vimeo): load thumbnail using Vimeo API

src/components/LazyVimeo.vue

@@ -76,11 +76,6 @@ import VideoWrapper from "./common/Wrapper";
 export default {
 name: "LazyVimeo",
   mixins: [commonMixin, vimeoMixin],
-  data() {
-    return {
-      videoID: null
-    }
-  },
   props: {
     src: {
       type: String,
@@ -133,6 +128,9 @@ name: "LazyVimeo",
 
   },
   computed: {
+    videoID: function () {
+      return this.getVimeoID(this.src)
+    },
     aspectRatioValue: function () {
       return this.calcAspect(this.aspectRatio)
     },
@@ -159,4 +157,4 @@ name: "LazyVimeo",
 
 <style scoped>
 
-</style>
+</style>

src/mixins/commonMixin.js

@@ -17,22 +17,26 @@ export default {
       const self = this
       let url = ''
 
-      url = type === 'youtube' ? `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${this.videoID}&format=json` : `https://vimeo.com/api/oembed.json?url=${this.src}`
+      url = type === 'youtube' ? `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${this.videoID}&format=json` : `https://vimeo.com/api/v2/video/${this.videoID}.json`
       axios.get(url)
         .then(function (response) {
           // handle success
-          self.videoInfo = response.data
+          if(type === 'youtube') {
+            self.videoInfo = response.data
+          }
+
           if (type === 'vimeo') {
-            self.videoID = response.data.video_id
+            self.videoInfo = response.data[0]
           }
+
           self.isVideoFound = true
         })
         .catch(function () {
           // handle error
           self.videoInfo = null
           self.isVideoFound = false
         })
-        .then(function () {
+        .finally(function () {
           // always executed
           self.fetchingInfo = false
 

src/mixins/vimeoMixin.js

@@ -1,5 +1,10 @@
+// const axios = require('axios').default
+
 export default {
     methods: {
+        getVimeoID (url) {
+            return new URL(url).pathname.split('/').pop();
+        },
         playVideo() {
             if(!this.isPostMessageSupported) {
                 return
@@ -31,35 +36,10 @@ export default {
         },
 
         getVimeoThumbnail(video_id, quality){
-            let thumbnail;
-
-            if(video_id){
-                if(typeof quality == "undefined"){
-                    quality = 'high';
-                }
-
-                let quality_key = '960x540';
-                if(quality === 'default'){
-                    quality_key = '200x150';
-                }
-                else if(quality === 'medium'){
-                    quality_key = '295x166';
-                }
-                else if(quality === 'high'){
-                    quality_key = '640x360';
-                }
-                else if (quality === 'standard') {
-                    quality_key = '960x540';
-                }
-                else if (quality === 'maxres') {
-                    quality_key = '1280x720';
-                }
-
-                thumbnail = "https://i.vimeocdn.com/video/"+video_id+"_"+quality_key+".jpg";
-                return thumbnail;
-            }
-
-            return false;
+            if(!video_id) return false;
+
+            const _quality = ['small', 'medium', 'large'].includes(quality) ? quality: 'medium';
+            return this.videoInfo[`thumbnail_${_quality}`];
         }
     }
-};
+};

src/mixins/youtubeMixin.js

@@ -36,8 +36,6 @@ export default {
       }
     },
     getYoutubeThumbnail (video_id, quality) {
-      let thumbnail
-
       if (video_id) {
         if (typeof quality === 'undefined') {
           quality = 'high'
@@ -56,8 +54,7 @@ export default {
           quality_key = 'maxresdefault'
         }
 
-        thumbnail = 'http://img.youtube.com/vi/' + video_id + '/' + quality_key + '.jpg'
-        return thumbnail
+        return `https://img.youtube.com/vi/${video_id}/${quality_key}.jpg`;
       }
 
       return false