feat: new render method that directly utilizes the youtube API

2022-03-24 00:21:06 +13:00 · 2022-03-24 00:21:06 +13:00 · 979691a978
parent 90708b9dac
commit 979691a978
6 changed files with 256 additions and 99 deletions
--- a/NUXT/components/VideoRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/VideoRenderers/compactVideoRenderer.vue
@ -0,0 +1,46 @@
+<template>
+  <v-card class="entry compactVideoRenderer" :to="`/watch?v=${video.id}`">
+    <v-card-text>
+      <div style="position: relative">
+        <v-img :src="video.thumbnail" />
+        <div
+          class="videoRuntimeFloat"
+          style="color: #fff"
+          v-text="video.metadata.overlay[0]"
+        />
+      </div>
+      <div style="margin-top: 0.5em" v-text="video.title" />
+      <div v-text="parseBottom(video)" />
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+.videoRuntimeFloat {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  padding: 0px 4px 0px 4px;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    video: Object,
+  },
+
+  methods: {
+    parseBottom(video) {
+      const bottomText = [video.channel, video.metadata.views];
+      if (video.metadata.published) bottomText.push(video.metadata.published);
+      return bottomText.join(" • ");
+    },
+  },
+};
+</script>
--- a/NUXT/components/VideoRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/VideoRenderers/gridVideoRenderer.vue
@ -0,0 +1,113 @@
+<template>
+  <v-card
+    class="entry gridVideoRenderer background"
+    :to="`/watch?v=${video.videoId}`"
+    flat
+  >
+    <div style="position: relative">
+      <v-img
+        :aspect-ratio="16 / 9"
+        :src="$youtube.getThumbnail(video.videoId, 'max')"
+      />
+      <div
+        class="videoRuntimeFloat"
+        :class="
+          'style-' +
+          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
+        "
+        style="color: #fff"
+        v-text="
+          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
+            .runs[0].text
+        "
+      />
+    </div>
+    <div id="details">
+      <a
+        :href="
+          video.shortBylineText.runs[0].navigationEndpoint.browseEndpoint
+            .canonicalBaseUrl
+        "
+        class="avatar-link pt-2"
+      >
+        <v-img
+          class="avatar-thumbnail"
+          :src="video.channelThumbnail.thumbnails[0].url"
+        />
+      </a>
+      <v-card-text class="pt-2">
+        <div
+          v-for="title in video.title.runs"
+          :key="title.text"
+          style="margin-top: 0.5em"
+          class="font-weight-medium vid-title"
+        >
+          {{ title.text }}
+        </div>
+
+        <div class="grey--text caption" v-text="parseBottom(video)" />
+      </v-card-text>
+    </div>
+  </v-card>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+.videoRuntimeFloat {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  border-radius: 5px;
+  padding: 0px 4px 0px 4px;
+}
+
+.videoRuntimeFloat.style-DEFAULT {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.videoRuntimeFloat.style-LIVE {
+  background: rgba(255, 0, 0, 0.5);
+}
+
+.vid-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.avatar-thumbnail {
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+}
+
+#details {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+}
+</style>
+
+<script>
+export default {
+  props: ["video"],
+
+  methods: {
+    parseBottom(video) {
+      const bottomText = [
+        video.shortBylineText?.runs[0].text,
+        video.shortViewCountText?.runs[0].text,
+      ];
+      if (video.publishedTimeText?.runs[0].text)
+        bottomText.push(video.publishedTimeText?.runs[0].text);
+      return bottomText.join(" · ");
+    },
+  },
+};
+</script>
--- a/NUXT/components/recommended.vue
+++ b/NUXT/components/recommended.vue
@ -6,42 +6,23 @@
      <v-skeleton-loader type="card-avatar, article, actions" />
    </center>

-    <v-list-item v-for="(video, index) in recommends" :key="index">
-      <v-card class="entry" :to="`/watch?v=${video.id}`">
-        <v-card-text>
-          <div style="position: relative">
-            <v-img :src="video.thumbnail" />
-            <div
-              class="videoRuntimeFloat"
-              style="color: #fff"
-              v-text="video.metadata.overlay[0]"
-            />
-          </div>
-          <div style="margin-top: 0.5em" v-text="video.title" />
-          <div v-text="parseBottom(video)" />
-        </v-card-text>
-      </v-card>
+    <v-list-item v-for="(video, index) in recommends" :key="index" class="pa-0">
+      <component
+        :is="Object.keys(video)[0]"
+        :key="video[Object.keys(video)[0]].videoId"
+        :video="video[Object.keys(video)[0]]"
+      ></component>
    </v-list-item>
  </div>
 </template>

-<style scoped>
-.entry {
-  margin-top: 1em;
-  width: 100%; /* Prevent Loading Weirdness */
-}
-.videoRuntimeFloat {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px;
-  padding: 0 3px 0 3px;
-}
-</style>
-
 <script>
+import gridVideoRenderer from "./VideoRenderers/gridVideoRenderer.vue";
+
 export default {
+  components: {
+    gridVideoRenderer,
+  },
  props: {
    recommends: Array,
  },
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@ -1,13 +1,27 @@
 <template>
  <div>
-    <video controls autoplay :src="vidSrc" width="100%" style="max-height: 50vh" />
+    <video
+      controls
+      autoplay
+      :src="vidSrc"
+      width="100%"
+      style="max-height: 50vh"
+    />
    <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
-      <v-card-title class="mt-2"
-        style="padding-top: 0; padding-bottom: 0; font-size: 0.95rem; line-height: 1rem;"
+      <v-card-title
+        class="mt-2"
+        style="
+          padding-top: 0;
+          padding-bottom: 0;
+          font-size: 0.95rem;
+          line-height: 1rem;
+        "
        v-text="title"
      />
      <v-card-text>
-        <div style="margin-bottom: 1rem;">{{ views }} views • {{ uploaded }}</div>
+        <div style="margin-bottom: 1rem">
+          {{ views }} views • {{ uploaded }}
+        </div>

        <!--   Scrolling Div For Interactions   --->
        <div style="display: flex; margin-bottom: 1em">
@ -25,7 +39,11 @@
              @click="callMethodByName(item.actionName)"
            >
              <v-icon v-text="item.icon" />
-              <div class="mt-2" style="font-size: .66rem;" v-text="item.value || item.name" />
+              <div
+                class="mt-2"
+                style="font-size: 0.66rem"
+                v-text="item.value || item.name"
+              />
            </v-btn>
          </v-list-item>

@ -131,7 +149,9 @@ export default {
        console.log("Video info data", result);
        console.log(result.availableResolutions);
        this.vidSrc =
-          result.availableResolutions[result.availableResolutions.length - 1].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
+          result.availableResolutions[
+            result.availableResolutions.length - 1
+          ].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
        this.title = result.title;
        this.description = result.metadata.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
        this.views = result.metadata.viewCount.toLocaleString();
@ -140,11 +160,7 @@ export default {
        this.interactions[0].value = result.metadata.likes;
        this.loaded = true;

-        this.recommends = this.$youtube
-          .viewRecommends(result.renderedData.recommendations)
-          .filter((element) => {
-            return element !== undefined;
-          });
+        this.recommends = result.renderedData.recommendations;
        // .catch((error) => this.$logger("Watch", error, true));
        console.log("recommendations:", this.recommends);
      });
@ -165,10 +181,10 @@ export default {
      await Share.share({
        title: this.title,
        text: this.title,
-        url: 'https://youtu.be/' + this.$route.query.v,
-        dialogTitle: 'Share video',
+        url: "https://youtu.be/" + this.$route.query.v,
+        dialogTitle: "Share video",
      });
-    }
+    },
  },
  watch: {
    // Watch for change in the route query string (in this case, ?v=xxxxxxxx to ?v=yyyyyyyy)
@ -180,8 +196,8 @@ export default {
          this.vidSrc = "";
          this.getVideo();
        }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
--- a/NUXT/plugins/renderers.js
+++ b/NUXT/plugins/renderers.js
@ -10,6 +10,8 @@ function useRender(video, renderer) {
      return gridVideoRenderer(video);
    case "compactAutoplayRenderer":
      return compactAutoplayRenderer(video);
+    case "compactVideoRenderer":
+      return compactVideoRenderer(video);
    default:
      return undefined;
  }
@ -49,35 +51,6 @@ function gridVideoRenderer(video) {
  };
 }

-function videoWithContextRenderer(video) {
-  return {
-    id: video.videoId,
-    title: video.headline?.runs[0].text,
-    thumbnail: Innertube.getThumbnail(video.videoId, "max"),
-    channel: video.shortBylineText?.runs[0].text,
-    channelURL:
-      video.channelThumbnail?.channelThumbnailWithLinkRenderer
-        ?.navigationEndpoint?.browseEndpoint?.canonicalBaseUrl,
-    channelId:
-      video.channelThumbnail?.channelThumbnailWithLinkRenderer
-        ?.navigationEndpoint?.browseEndpoint?.browseId,
-    channelThumbnail:
-      video.channelThumbnail?.channelThumbnailWithLinkRenderer?.thumbnail
-        .thumbnails[0].url,
-    metadata: {
-      views: video.shortViewCountText?.runs[0].text,
-      length: video.lengthText?.runs[0].text,
-      overlayStyle: video.thumbnailOverlays?.map(
-        (overlay) => overlay.thumbnailOverlayTimeStatusRenderer?.style
-      ),
-      overlay: video.thumbnailOverlays?.map(
-        (overlay) =>
-          overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].text
-      ),
-      isWatched: video.isWatched,
-    },
-  };
-}
 function compactAutoplayRenderer(video) {
  video = video.contents;
  let item;
@ -86,4 +59,29 @@ function compactAutoplayRenderer(video) {
  else return undefined;
 }

+function compactVideoRenderer(video) {
+  return {
+    id: video.videoId,
+    title: video.title?.runs[0].text,
+    thumbnail: Innertube.getThumbnail(video.videoId, "max"),
+    channel: video.shortBylineText?.runs[0].text,
+    channelURL:
+      video.shortBylineText?.runs[0].navigationEndpoint?.browseEndpoint
+        ?.canonicalBaseUrl,
+    channelThumbnail: video.channelThumbnail?.thumbnails[0].url,
+    metadata: {
+      views: video.viewCountText?.runs[0].text,
+      length: video.lengthText?.runs[0].text,
+      publishedTimeText: video.publishedTimeText.runs[0].text,
+      overlayStyle: video.thumbnailOverlays?.map(
+        (overlay) => overlay.thumbnailOverlayTimeStatusRenderer?.style
+      ),
+      overlay: video.thumbnailOverlays?.map(
+        (overlay) =>
+          overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].text
+      ),
+    },
+  };
+}
+
 export default useRender;
--- a/NUXT/plugins/youtube.js
+++ b/NUXT/plugins/youtube.js
@ -212,6 +212,18 @@ const innertubeModule = {
    }
  },

+  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`;
+  },
+
  // It just works™
  // Front page recommendation
  async recommend() {
@ -226,35 +238,26 @@ const innertubeModule = {
      const video =
        shelves.shelfRenderer?.content?.horizontalListRenderer?.items;

-      if (video)
-        return video.map((item) => {
-          if (item) {
-            const renderedItem = useRender(
-              item[Object.keys(item)[0]],
-              Object.keys(item)[0]
-            );
-            console.log(renderedItem);
-            return renderedItem;
-          } else {
-            return undefined;
-          }
-        });
+      if (video) return video;
+      // if (video)
+      //   return video.map((item) => {
+      //     if (item) {
+      //       const renderedItem = useRender(
+      //         item[Object.keys(item)[0]],
+      //         Object.keys(item)[0]
+      //       );
+      //       console.log(renderedItem);
+      //       return renderedItem;
+      //     } else {
+      //       return undefined;
+      //     }
+      //   });
    });
    console.log(final);
    return final;
  },

  // This is the recommendations that exist under videos
-  viewRecommends(recommendList) {
-    if (recommendList)
-      return recommendList.map((item) => {
-        if (item) {
-          return useRender(item[Object.keys(item)[0]], Object.keys(item)[0]);
-        } else {
-          return undefined;
-        }
-      });
-  },
 };

 //---   Start   ---//