mirror of https://github.com/VueTubeApp/VueTube
refactor: made recommendation functions more stable and working
This commit is contained in:
Alex
parent
eb1aca2627
commit
f09f104254
|
|
@ -2,24 +2,27 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<center style="padding-top: 3em;" v-if="recommends == null">
|
||||
<v-progress-circular
|
||||
size="50"
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
<center style="padding-top: 3em" v-if="recommends == null">
|
||||
<v-progress-circular size="50" indeterminate color="primary" />
|
||||
</center>
|
||||
<center>
|
||||
<v-list-item v-for="(video, index) in recommends" :key="index">
|
||||
<v-card class="entry" :to="`/watch?v=${video.videoId}`">
|
||||
<v-list-item v-for="(video, index) in recommends[0]" :key="index">
|
||||
<v-card class="entry" :to="`/watch?v=${video.id}`">
|
||||
<v-card-text>
|
||||
<div style="position: relative;">
|
||||
<v-img :src="getThumbnail(video.videoId,'min')" />
|
||||
<p v-text="video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
|
||||
<div style="position: relative">
|
||||
<v-img :src="video.thumbnail" />
|
||||
<p
|
||||
v-text="video.metadata.overlay[0]"
|
||||
class="videoRuntimeFloat"
|
||||
style="color: #fff"
|
||||
/>
|
||||
</div>
|
||||
<div v-text="video.title.runs[0].text" style="margin-top: 0.5em;" />
|
||||
<div v-text="`${video.shortViewCountText.runs[0].text} • ${video.publishedTimeText ? video.publishedTimeText.runs[0].text : video.shortViewCountText.runs[1].text}`" />
|
||||
<div v-text="video.title" style="margin-top: 0.5em" />
|
||||
<div
|
||||
v-text="
|
||||
`${video.channel} • ${video.metadata.view} • ${video.metadata.published}`
|
||||
"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-list-item>
|
||||
|
|
@ -31,36 +34,20 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
recommends: []
|
||||
}
|
||||
recommends: [],
|
||||
};
|
||||
},
|
||||
|
||||
// The following code is only a demo for debugging purposes, note that each "shelfRenderer" has a "title" value that seems to align to the categories at the top of the vanilla yt app
|
||||
|
||||
mounted() {
|
||||
try {
|
||||
this.$youtube.recommend().then(
|
||||
result => {
|
||||
console.log(result)
|
||||
const recommendContent = result.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents // I feel like I've committed programming sin
|
||||
recommendContent.forEach(function (contents, index) {
|
||||
contents.shelfRenderer.content.horizontalListRenderer.items.forEach(function (item, index) {
|
||||
const video = item.gridVideoRenderer
|
||||
console.log(video)
|
||||
console.log(video.onTap)
|
||||
this.recommends.push(video)
|
||||
})
|
||||
})}
|
||||
)
|
||||
} catch (error) {
|
||||
this.$logger("Home Page", error, true)
|
||||
}
|
||||
this.$youtube
|
||||
.recommend()
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
if (result) this.recommends = result;
|
||||
})
|
||||
.catch((error) => this.$logger("Home Page", error, true));
|
||||
},
|
||||
|
||||
methods: {
|
||||
getThumbnail(id, resolution) {
|
||||
return this.$youtube.getThumbnail(id, resolution)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -142,16 +142,59 @@ const recommendationModule = {
|
|||
},
|
||||
|
||||
async getVid(id) {
|
||||
|
||||
// temporary test
|
||||
|
||||
const html = await Http.get({
|
||||
url: "https://m.youtube.com/watch?v=U-9M-BjFYMc&t=8s&pbj=1",
|
||||
params: {},
|
||||
headers: {
|
||||
accept: '*/*',
|
||||
'user-agent': 'Mozilla/5.0 (Linux; Android 10; WP7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.101 Mobile Safari/537.36',
|
||||
'content-type': 'application/json',
|
||||
'accept-language': 'en-US,en;q=0.9',
|
||||
'x-goog-authuser': 0,
|
||||
'x-goog-visitor-id': 'CgtsaVdQdGhfbVNOMCiC0taRBg%3D%3D',
|
||||
'x-youtube-client-name': 2,
|
||||
'x-youtube-client-version': '2.20220318.00.00',
|
||||
'x-youtube-chrome-connected': 'source=Chrome,mode=0,enable_account_consistency=true,supervised=false,consistency_enabled_by_default=false',
|
||||
'x-origin': 'https://m.youtube.com',
|
||||
origin: 'https://m.youtube.com',
|
||||
referer: 'https://m.youtube.com/watch?v=U-9M-BjFYMc'
|
||||
}
|
||||
}).catch((error) => error);
|
||||
console.log(html.data)
|
||||
return InnertubeAPI.getVidInfoAsync(id).data;
|
||||
},
|
||||
|
||||
// It just works™
|
||||
async recommend() {
|
||||
const response = InnertubeAPI.getRecommendationsAsync();
|
||||
if (!response.success) {
|
||||
logger(constants.LOGGER_NAMES.recommendations, "An error occurred and innertube failed to respond", true)
|
||||
return
|
||||
}
|
||||
return
|
||||
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 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: this.getThumbnail(item.videoId),
|
||||
channel: item.shortBylineText.runs[0] ? item.shortBylineText.runs[0] : item.longBylineText.runs[0],
|
||||
channelThumbnail: item.channelThumbnail?.thumbnails[0],
|
||||
metadata: {
|
||||
published: item.publishedTimeText?.runs[0].text,
|
||||
views: item.shortViewCountText?.runs[0].text,
|
||||
length: item.publishedTimeText?.runs[0].text,
|
||||
overlay: item.thumbnailOverlays?.map((overlay) =>{overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].runs}),
|
||||
},
|
||||
};
|
||||
else return undefined
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
getThumbnail: (id, resolution) => Innertube.getThumbnail(id, resolution)
|
||||
|
|
|
|||
Loading…
Reference in New Issue