Merge pull request #580 from VueTubeApp/revert-562-remove-code-duplication-for-thumbnails

Revert "Remove code duplication for thumbnails loading"

Author: Frontesque

NUXT/components/Player/index.vue

@@ -54,7 +54,7 @@
               }rem 0rem 0rem !important`
             : '0',
       }"
-      :poster="getThumbnail($route.query.v)"
+      :poster="$youtube.getThumbnail($route.query.v, 'max', [])"
       @loadedmetadata="checkDimensions()"
       @click="controlsHandler()"
     />
@@ -352,7 +352,6 @@ import progressbar from "~/components/Player/progressbar.vue";
 import sponsorblock from "~/components/Player/sponsorblock.vue";
 
 import backType from "~/plugins/classes/backType";
-import Thumbnail from "~/plugins/thumbnail";
 
 export default {
   components: {
@@ -624,11 +623,6 @@ export default {
       this.$refs.player.playbackRate = speed;
       this.$refs.audio.playbackRate = speed;
     },
-    getThumbnail(query) {
-      const thumbnail = new Thumbnail();
-
-      return thumbnail.getThumbnail(query, "max", []);
-    },
     checkDimensions() {
       if (this.$refs.player.videoHeight > this.$refs.player.videoWidth) {
         this.isVerticalVideo = true;

NUXT/plugins/innertube.js

@@ -262,6 +262,20 @@ class Innertube {
     });
   }
 
+  // Static methods
+
+  static getThumbnail(id, resolution) {
+    if (resolution == "max") {
+      const url = `https://img.youtube.com/vi/${id}/maxresdefault.jpg`;
+      let img = new Image();
+      img.src = url;
+      img.onload = function () {
+        if (img.height !== 120) return url;
+      };
+    }
+    return `https://img.youtube.com/vi/${id}/mqdefault.jpg`;
+  }
+
   // Simple Wrappers
   async getRecommendationsAsync() {
     const rec = await this.browseAsync("recommendations");

NUXT/plugins/thumbnail.js

@@ -91,14 +91,30 @@ const innertubeModule = {
   async getVid(id) {
     try {
       return await InnertubeAPI.VidInfoAsync(id);
-    } catch (error) {}
+    } catch (error) {
+    }
+  },
+
+  getThumbnail(id, resolution, backupThumbnail) {
+    if (resolution == "max") {
+      const url = `https://img.youtube.com/vi/${id}/maxresdefault.jpg`;
+      let img = new Image();
+      img.src = url;
+      img.onload = function () {
+        if (img.height !== 120) return url;
+      };
+    }
+    if (backupThumbnail[backupThumbnail.length - 1])
+      return backupThumbnail[backupThumbnail.length - 1].url;
+    else return `https://img.youtube.com/vi/${id}/mqdefault.jpg`;
   },
 
   async getChannel(url) {
     try {
       const response = await InnertubeAPI.getChannelAsync(url);
       return response.data;
-    } catch (error) {}
+    } catch (error) {
+    }
   },
 
   // It just works™
@@ -161,7 +177,8 @@ const innertubeModule = {
     try {
       const response = await InnertubeAPI.getSearchAsync(query);
       return response.contents.sectionListRenderer;
-    } catch (err) {}
+    } catch (err) {
+    }
   },
 
   async saveApiStats(query, url) {