mirror of https://github.com/VueTubeApp/VueTube
feat: Recommendations API fully online. There is now a home page.
This commit is contained in:
parent
c2e4036080
commit
65c1b12ed0
|
@ -1,13 +1,8 @@
|
|||
// Buttons and methods for testing and demonstration purposes only. Uncomment them to see how it works. Remove to actually implement a implementation
|
||||
|
||||
<template>
|
||||
<center>
|
||||
<img style="margin-top: 5em; max-width: 80%; max-height: 15em;" src="/dev.svg" />
|
||||
<h1 class="grey--text">Page Under Construction</h1>
|
||||
<p class="grey--text">Please read the VueTube FAQ for more information.</p>
|
||||
<!-- <button @click="debugRecommend">Test Button</button>
|
||||
<button @click="debugVideo">Test Button (Video)</button> -->
|
||||
<div>
|
||||
|
||||
<center style="padding-top: 3em;" v-if="recommends == null">
|
||||
<v-progress-circular
|
||||
size="50"
|
||||
|
@ -15,21 +10,21 @@
|
|||
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-card-text>
|
||||
<div style="position: relative;">
|
||||
<v-img :src="video.thumbnail.thumbnails[0].url" />
|
||||
<p v-text="video.lengthText.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
|
||||
<v-img :src="getThumbnail(video.videoId,'min')" />
|
||||
<p v-text="video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
|
||||
</div>
|
||||
<div v-text="video.title.runs[0].text" style="margin-top: 0.5em;" />
|
||||
<div v-text="`${video.viewCountText.runs[0].text} • ${video.publishedTimeText.runs[0].text}`" />
|
||||
<div v-text="`${video.shortViewCountText.runs[0].text} • ${video.publishedTimeText ? video.publishedTimeText.runs[0].text : video.shortViewCountText.runs[1].text}`" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -62,6 +57,12 @@ export default {
|
|||
).catch ((error) => {
|
||||
this.$logger("Home Page", error, true)
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getThumbnail(id, resolution) {
|
||||
return this.$youtube.getThumbnail(id, resolution)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -11,10 +11,9 @@
|
|||
<script>
|
||||
export default {
|
||||
layout: "empty",
|
||||
mounted() {
|
||||
this.$youtube.getAPI().then(
|
||||
async mounted() {
|
||||
await this.$youtube.getAPI()
|
||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -78,6 +78,17 @@ class Innertube {
|
|||
};
|
||||
}
|
||||
|
||||
static getThumbnail(id, resolution) {
|
||||
switch (resolution) {
|
||||
case "min":
|
||||
return `https://img.youtube.com/vi/${id}/mqdefault.jpg`
|
||||
case "mid":
|
||||
return `https://img.youtube.com/vi/${id}/hqdefault.jpg`
|
||||
default:
|
||||
return `https://img.youtube.com/vi/${id}/maxresdefault.jpg`
|
||||
}
|
||||
}
|
||||
|
||||
async getVidInfoAsync(id) {
|
||||
let data = { context: this.context, videoId: id }
|
||||
|
||||
|
|
|
@ -135,25 +135,26 @@ let InnertubeAPI;
|
|||
const recommendationModule = {
|
||||
|
||||
async getAPI() {
|
||||
if (!InnertubeAPI) {
|
||||
InnertubeAPI = await Innertube.createAsync((message, isError) => { logger("Innertube", message, isError); })
|
||||
console.log(InnertubeAPI)
|
||||
}
|
||||
return InnertubeAPI;
|
||||
},
|
||||
|
||||
async getVid(id) {
|
||||
console.log(InnertubeAPI)
|
||||
return InnertubeAPI.getVidInfoAsync(id).data;
|
||||
},
|
||||
|
||||
async recommend() {
|
||||
console.log(InnertubeAPI)
|
||||
return InnertubeAPI.getRecommendationsAsync();
|
||||
},
|
||||
|
||||
getThumbnail: (id, resolution) => Innertube.getThumbnail(id, resolution)
|
||||
}
|
||||
|
||||
//--- Start ---//
|
||||
export default ({ app }, inject) => {
|
||||
inject('youtube', {...searchModule, ...recommendationModule })
|
||||
inject('youtube', {...searchModule, ...recommendationModule, })
|
||||
inject("logger", logger)
|
||||
}
|
||||
logger("Initialize", "Program Started");
|
|
@ -42,7 +42,11 @@ module.exports = {
|
|||
"osName": info.osName,
|
||||
"osVersion": info.osVersion,
|
||||
"platform": "MOBILE",
|
||||
"originalUrl": info.originalUrl
|
||||
"originalUrl": info.originalUrl,
|
||||
"configInfo": info.configInfo,
|
||||
"remoteHost": info.remoteHost,
|
||||
"visitorData": info.visitorData,
|
||||
// This is, by all accounts, a horrible implementation, but this is currently the only solution besides
|
||||
};
|
||||
return client
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue