From b11a8b386d174b9ef14a28a985a99f9efc04fa9e Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 21 Mar 2022 01:20:13 +1300 Subject: [PATCH] refactor(renderer)! : changed how json rendering is handled for video types --- NUXT/pages/home.vue | 1 - NUXT/{static => plugins}/constants.js | 1 - NUXT/plugins/innertube.js | 2 +- NUXT/plugins/renderers.js | 64 +++++++++++++++++++++++++++ NUXT/plugins/vuetube.js | 2 +- NUXT/plugins/youtube.js | 41 +++++++---------- 6 files changed, 83 insertions(+), 28 deletions(-) rename NUXT/{static => plugins}/constants.js (97%) create mode 100644 NUXT/plugins/renderers.js diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue index fb7679c..362a453 100644 --- a/NUXT/pages/home.vue +++ b/NUXT/pages/home.vue @@ -21,7 +21,6 @@ export default { this.$youtube .recommend() .then((result) => { - console.log(result); if (result) this.recommends = result; }) .catch((error) => this.$logger("Home Page", error, true)); diff --git a/NUXT/static/constants.js b/NUXT/plugins/constants.js similarity index 97% rename from NUXT/static/constants.js rename to NUXT/plugins/constants.js index 47b168d..c6c240c 100644 --- a/NUXT/static/constants.js +++ b/NUXT/plugins/constants.js @@ -38,7 +38,6 @@ module.exports = { 'x-youtube-client-version': ytApiVal.VERSION, 'x-origin': info.originalUrl, origin: info.originalUrl, - referer: `${url.YT_MOBILE}/watch?v=${id}` }; return headers }, diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js index 97aaf4a..7cfefc2 100644 --- a/NUXT/plugins/innertube.js +++ b/NUXT/plugins/innertube.js @@ -3,7 +3,7 @@ import { Http } from '@capacitor-community/http'; import { getBetweenStrings } from './utils'; -import constants from '../static/constants'; +import constants from './constants'; class Innertube { diff --git a/NUXT/plugins/renderers.js b/NUXT/plugins/renderers.js new file mode 100644 index 0000000..57232ae --- /dev/null +++ b/NUXT/plugins/renderers.js @@ -0,0 +1,64 @@ +import Innertube from "./innertube"; +import constants from "./constants"; + +// Pointer object, give a key and it will return with a method +function useRender (video, renderer) { + switch(renderer) { + case "videoWithContextRenderer": + return videoWithContextRenderer(video) + case "gridVideoRenderer": + return gridVideoRenderer(video) + case "compactAutoplayRenderer": + return compactAutoplayRenderer(video) + default: + return undefined + } +} + +function gridVideoRenderer(video) { + return { + id: video.videoId, + title: video.title?.runs[0].text, + thumbnail: Innertube.getThumbnail(video.videoId, "max"), + channel: video.shortBylineText?.runs[0] ? video.shortBylineText.runs[0].text : video.longBylineText?.runs[0].text, + channelId: (video.shortBylineText?.runs[0] ? video.shortBylineText.runs[0] : video.longBylineText?.runs[0]).navigationEndpoint?.browseEndpoint?.browseId, + channelURL: `${constants.YT_URL}/${(video.shortBylineText?.runs[0] ? video.shortBylineText.runs[0] : video.longBylineText?.runs[0]).navigationEndpoint?.browseEndpoint?.canonicalBaseUrl}`, + channelThumbnail: video.channelThumbnail?.thumbnails[0], + metadata: { + published: video.publishedTimeText?.runs[0].text, + 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), + }, + }; +} + +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 + if (video) return video.map((item) => { + const itemRenderer = useRender[Object.keys(item)[0]] + if (item) return itemRenderer(item[Object.keys(item)[0]]) + else return undefined + }) +} + +export default useRender \ No newline at end of file diff --git a/NUXT/plugins/vuetube.js b/NUXT/plugins/vuetube.js index 91a61d0..285ace9 100644 --- a/NUXT/plugins/vuetube.js +++ b/NUXT/plugins/vuetube.js @@ -1,7 +1,7 @@ //--- Modules/Imports ---// import { Http } from '@capacitor-community/http'; import { StatusBar, Style } from '@capacitor/status-bar'; -import constants from '../static/constants'; +import constants from './constants'; import { hexToRgb, rgbToHex } from './utils'; const module = { diff --git a/NUXT/plugins/youtube.js b/NUXT/plugins/youtube.js index 39223a2..b56a940 100644 --- a/NUXT/plugins/youtube.js +++ b/NUXT/plugins/youtube.js @@ -1,7 +1,8 @@ //--- Modules/Imports ---// import { Http } from '@capacitor-community/http'; import Innertube from './innertube' -import constants from '../static/constants'; +import constants from './constants'; +import useRender from './renderers'; //--- Logger Function ---// function logger(func, data, isError = false) { @@ -191,45 +192,37 @@ const innertubeModule = { }, // It just works™ + // Front page recommendation async recommend() { const response = await InnertubeAPI.getRecommendationsAsync(); if (!response.success) throw new Error("An error occurred and innertube failed to respond") const contents = response.data.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents - return contents.map((shelves) => { + const final = contents.map((shelves) => { const video = shelves.shelfRenderer?.content?.horizontalListRenderer?.items if (video) return video.map((item) => { - item = item.gridVideoRenderer - if (item) return { - id: item.videoId, - title: item.title?.runs[0].text, - thumbnail: Innertube.getThumbnail(item.videoId, "max"), - channel: item.shortBylineText?.runs[0] ? item.shortBylineText.runs[0].text : item.longBylineText?.runs[0].text, - channelURL: `${constants.YT_URL}/${(item.shortBylineText?.runs[0] ? item.shortBylineText.runs[0] : item.longBylineText?.runs[0]).navigationEndpoint?.browseEndpoint?.canonicalBaseUrl}`, - channelThumbnail: item.channelThumbnail?.thumbnails[0], - metadata: { - published: item.publishedTimeText?.runs[0].text, - views: item.shortViewCountText?.runs[0].text, - length: item.publishedTimeText?.runs[0].text, - overlayStyle: item.thumbnailOverlays?.map(overlay => overlay.thumbnailOverlayTimeStatusRenderer?.style), - overlay: item.thumbnailOverlays?.map(overlay => overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].text), - }, - }; - else return undefined + 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 + }, -const viewModule = { - + // This is the recommendations that exist under videos + async viewRecommends(recommendList) { + + } } //--- Start ---// export default ({ app }, inject) => { - inject('youtube', {...searchModule, ...innertubeModule, ...viewModule }) + inject('youtube', {...searchModule, ...innertubeModule }) inject("logger", logger) } logger(constants.LOGGER_NAMES.init, "Program Started");