feat: ✨ player displays channel icon while loading (work in progress to display the video thumbnail)

NUXT/components/Player/index.vue

@@ -25,7 +25,7 @@
             ? `${$store.state.tweaks.roundTweak / 3}rem ${$store.state.tweaks.roundTweak / 3}rem 0rem 0rem !important`
             : '0',
       }"
-      poster="/LoadingPoster.jpg"
+      :poster="thumbnails[thumbnails.length - 1].url"
       @click="controlsHandler()"
       @loadedmetadata="checkDimensions()"
     />
@@ -284,6 +284,10 @@ export default {
       type: Array,
       required: true,
     },
+    thumbnails: {
+      type: Object,
+      required: true,
+    },
     video: {
       type: Object,
       required: true,

NUXT/pages/watch.vue

@@ -8,6 +8,7 @@
         ref="player"
         :video="video"
         :sources="sources"
+        :thumbnails="thumbnails"
       />
     </div>
 
@@ -330,6 +331,9 @@ export default {
         console.log("Video info data", result);
         this.video = result;
 
+        //---   Set Thumbnails   ---//
+        this.thumbnails = result.metadata.contents[2].slimOwnerRenderer.thumbnail.thumbnails;
+
         //---   Content Stuff   ---//
         this.likes = result.metadata.likes.toLocaleString();
         this.interactions[0].value = result.metadata.likes.toLocaleString();

NUXT/pages/watch_debug.vue

@@ -1,21 +0,0 @@
-<template>
-  <div>
-
-    <player :sources="sources" v-if="sources.length > 0" />
-
-  </div>
-</template>
-
-<script>
-import player from "~/components/Player/index.vue"
-export default {
-  data() {
-    return {
-      sources: [],
-    };
-  },
-  mounted() {
-    this.sources = [{"itag":17,"url":"https://api.celeste.photos/squish.mp4","mimeType":"video/3gpp; codecs=\"mp4v.20.3, mp4a.40.2\"","bitrate":86688,"width":176,"height":144,"lastModified":"1645932929087816","contentLength":"159084","quality":"small","fps":12,"qualityLabel":"144p","projectionType":"RECTANGULAR","averageBitrate":85910,"audioQuality":"AUDIO_QUALITY_LOW","approxDurationMs":"14814","audioSampleRate":"22050","audioChannels":1}]
-  },
-};
-</script>