From eed6223a8a740ef1e5e46b25b141dabd8ebb3ccb Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 25 Mar 2022 00:47:13 +1300 Subject: [PATCH] fix: search function fully functional --- .../compactChannelRenderer.vue | 76 ++-------- .../ListRenderers/horizontalListRenderer.vue | 39 +++++ .../ListRenderers/sectionListRenderer.vue | 35 +++++ .../ListRenderers/verticalListRenderer.vue | 35 +++++ .../SectionRenderers/itemSectionRenderer.vue | 55 +++++++ .../SectionRenderers/shelfRenderer.vue | 46 ++++++ .../gridRenderers/gridVideoRenderer.vue | 4 + NUXT/components/horizontalListRenderer.vue | 45 ------ NUXT/components/vidLoadRenderer.vue | 7 + NUXT/pages/home.vue | 14 +- NUXT/pages/search.vue | 22 +-- NUXT/pages/watch.vue | 13 +- NUXT/plugins/innertube.js | 6 +- NUXT/plugins/youtube.js | 142 +----------------- 14 files changed, 265 insertions(+), 274 deletions(-) create mode 100644 NUXT/components/ListRenderers/horizontalListRenderer.vue create mode 100644 NUXT/components/ListRenderers/sectionListRenderer.vue create mode 100644 NUXT/components/ListRenderers/verticalListRenderer.vue create mode 100644 NUXT/components/SectionRenderers/itemSectionRenderer.vue create mode 100644 NUXT/components/SectionRenderers/shelfRenderer.vue delete mode 100644 NUXT/components/horizontalListRenderer.vue create mode 100644 NUXT/components/vidLoadRenderer.vue diff --git a/NUXT/components/CompactRenderers/compactChannelRenderer.vue b/NUXT/components/CompactRenderers/compactChannelRenderer.vue index 7566db9..81f9644 100644 --- a/NUXT/components/CompactRenderers/compactChannelRenderer.vue +++ b/NUXT/components/CompactRenderers/compactChannelRenderer.vue @@ -4,42 +4,17 @@ :to="`/watch?v=${video.videoId}`" flat > -
- - -
-
@@ -47,7 +22,7 @@ v-for="title in video.title.runs" :key="title.text" style="margin-top: 0.5em" - class="font-weight-medium vid-title" + class="vid-title" > {{ title.text }}
@@ -62,21 +37,6 @@ .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; @@ -90,36 +50,24 @@ margin-top: 0.5rem; margin-left: 0.5rem; border-radius: 50%; - width: 35px; - height: 35px; + width: 50px; + height: 50px; } #details { display: flex; flex-direction: row; flex-basis: auto; + padding: 10px; } @media screen and (orientation: landscape) { .entry { margin-bottom: 8px; } - .thumbnail-container { - width: 50vh; - float: left; - } #details { flex-direction: column-reverse; } - .avatar-thumbnail { - margin-top: 0; - margin-left: 16px; - } - .video-info { - padding-top: 0 !important; - padding-bottom: 0; - margin-top: 0; - } } @@ -130,11 +78,9 @@ export default { methods: { parseBottom(video) { const bottomText = [ - video.shortBylineText?.runs[0].text, - video.shortViewCountText?.runs[0].text, + video.subscriberCountText?.runs[0].text, + video.videoCountText?.runs.map((run) => run.text).join(" "), ]; - if (video.publishedTimeText?.runs[0].text) - bottomText.push(video.publishedTimeText?.runs[0].text); return bottomText.join(" · "); }, }, diff --git a/NUXT/components/ListRenderers/horizontalListRenderer.vue b/NUXT/components/ListRenderers/horizontalListRenderer.vue new file mode 100644 index 0000000..246faac --- /dev/null +++ b/NUXT/components/ListRenderers/horizontalListRenderer.vue @@ -0,0 +1,39 @@ + + + diff --git a/NUXT/components/ListRenderers/sectionListRenderer.vue b/NUXT/components/ListRenderers/sectionListRenderer.vue new file mode 100644 index 0000000..3888c94 --- /dev/null +++ b/NUXT/components/ListRenderers/sectionListRenderer.vue @@ -0,0 +1,35 @@ + + + diff --git a/NUXT/components/ListRenderers/verticalListRenderer.vue b/NUXT/components/ListRenderers/verticalListRenderer.vue new file mode 100644 index 0000000..89193ed --- /dev/null +++ b/NUXT/components/ListRenderers/verticalListRenderer.vue @@ -0,0 +1,35 @@ + + + diff --git a/NUXT/components/SectionRenderers/itemSectionRenderer.vue b/NUXT/components/SectionRenderers/itemSectionRenderer.vue new file mode 100644 index 0000000..07ba519 --- /dev/null +++ b/NUXT/components/SectionRenderers/itemSectionRenderer.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/NUXT/components/SectionRenderers/shelfRenderer.vue b/NUXT/components/SectionRenderers/shelfRenderer.vue new file mode 100644 index 0000000..517b87f --- /dev/null +++ b/NUXT/components/SectionRenderers/shelfRenderer.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue index ee99726..6c24581 100644 --- a/NUXT/components/gridRenderers/gridVideoRenderer.vue +++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue @@ -137,5 +137,9 @@ export default { return bottomText.join(" · "); }, }, + + mounted() { + console.log("gridVideoRenderer received: ", this.video); + }, }; diff --git a/NUXT/components/horizontalListRenderer.vue b/NUXT/components/horizontalListRenderer.vue deleted file mode 100644 index 4950993..0000000 --- a/NUXT/components/horizontalListRenderer.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - diff --git a/NUXT/components/vidLoadRenderer.vue b/NUXT/components/vidLoadRenderer.vue new file mode 100644 index 0000000..ec85465 --- /dev/null +++ b/NUXT/components/vidLoadRenderer.vue @@ -0,0 +1,7 @@ +// this is an loading animation for videos + diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue index 983b4ec..565f91c 100644 --- a/NUXT/pages/home.vue +++ b/NUXT/pages/home.vue @@ -4,16 +4,22 @@ * This is to allow use of "recommended" videos on other pages such as /watch * -Front * --> - + +
+ + + +
")[0]; - - youtubeParse(html, (data) => { - callback(data); - }); - }) - .catch((err) => { - logger(constants.LOGGER_NAMES.search, err, true); - callback(err); - }); -} - const searchModule = { logs: new Array(), @@ -111,66 +34,6 @@ const searchModule = { }); }, - // search(text, callback) { - // let results = new Array(); - // youtubeSearch(text, (videos) => { - // for (const i in videos) { - // const video = videos[i]; - - // if (video.compactVideoRenderer) { - // //--- If Entry Is A Video ---// - // results.push({ - // id: video.compactVideoRenderer.videoId, - // title: video.compactVideoRenderer.title.runs[0].text, - // runtime: video.compactVideoRenderer.lengthText.runs[0].text, - // uploaded: video.compactVideoRenderer.publishedTimeText.runs[0].text, - // views: video.compactVideoRenderer.viewCountText.runs[0].text, - // thumbnails: video.compactVideoRenderer.thumbnail.thumbnails, - // }); - // } else { - // //--- If Entry Is Not A Video ---// - // //logger(constants.LOGGER_NAMES.search, { type: "Error Caught Successfully", error: video }, true); - // } - // } - // }); - // callback(results); - // }, - - getRemainingVideoInfo(id, callback) { - String.prototype.decodeEscapeSequence = function () { - return this.replace(/\\x([0-9A-Fa-f]{2})/g, function () { - return String.fromCharCode(parseInt(arguments[1], 16)); - }); - }; - Http.request({ - method: "GET", - url: `${constants.URLS.YT_URL}/watch`, - params: { v: id }, - }) - .then((res) => { - let dataUpdated = res.data.decodeEscapeSequence(); - let likes = dataUpdated - .split( - `"defaultIcon":{"iconType":"LIKE"},"defaultText":{"runs":[{"text":"` - )[1] - .split(`"}],"accessibility":`)[0]; - let uploadDate = dataUpdated - .split(`"uploadDate":"`)[1] - .split(`}},"trackingParams":"`)[0] - .slice(0, -2); - let data = { - likes: likes, - uploadDate: uploadDate, - }; - logger("vidData", data); - callback(data); - }) - .catch((err) => { - logger("codeRun", err, true); - callback(err); - }); - }, - getReturnYoutubeDislike(id, callback) { Http.request({ method: "GET", @@ -237,8 +100,7 @@ const innertubeModule = { response.data.contents.singleColumnBrowseResultsRenderer.tabs[0] .tabRenderer.content.sectionListRenderer.contents; const final = contents.map((shelves) => { - const video = - shelves.shelfRenderer?.content?.horizontalListRenderer?.items; + const video = shelves.shelfRenderer?.content?.horizontalListRenderer; if (video) return video; }); @@ -249,7 +111,7 @@ const innertubeModule = { async search(query) { try { const response = await InnertubeAPI.getSearchAsync(query); - return response.content.verticalListRenderer; + return response.contents.sectionListRenderer; } catch (err) { logger(constants.LOGGER_NAMES.search, err, true); }