diff --git a/NUXT/components/VideoRenderers/compactVideoRenderer.vue b/NUXT/components/VideoRenderers/compactVideoRenderer.vue
new file mode 100644
index 0000000..dd32c02
--- /dev/null
+++ b/NUXT/components/VideoRenderers/compactVideoRenderer.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/NUXT/components/VideoRenderers/gridVideoRenderer.vue b/NUXT/components/VideoRenderers/gridVideoRenderer.vue
new file mode 100644
index 0000000..1091e91
--- /dev/null
+++ b/NUXT/components/VideoRenderers/gridVideoRenderer.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
+
+
+ {{ title.text }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/NUXT/components/recommended.vue b/NUXT/components/recommended.vue
index 335666a..30e0744 100644
--- a/NUXT/components/recommended.vue
+++ b/NUXT/components/recommended.vue
@@ -6,42 +6,23 @@
-
-
-
-
-
-
-
-
+
+
-
-
diff --git a/NUXT/plugins/renderers.js b/NUXT/plugins/renderers.js
index c15e033..c927f1f 100644
--- 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;
diff --git a/NUXT/plugins/youtube.js b/NUXT/plugins/youtube.js
index ef35fe5..7944400 100644
--- 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 ---//