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
|
// Buttons and methods for testing and demonstration purposes only. Uncomment them to see how it works. Remove to actually implement a implementation
|
||||||
|
|
||||||
<template>
|
<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>
|
<div>
|
||||||
|
|
||||||
<center style="padding-top: 3em;" v-if="recommends == null">
|
<center style="padding-top: 3em;" v-if="recommends == null">
|
||||||
<v-progress-circular
|
<v-progress-circular
|
||||||
size="50"
|
size="50"
|
||||||
|
@ -15,21 +10,21 @@
|
||||||
color="primary"
|
color="primary"
|
||||||
/>
|
/>
|
||||||
</center>
|
</center>
|
||||||
|
<center>
|
||||||
<v-list-item v-for="(video, index) in recommends" :key="index">
|
<v-list-item v-for="(video, index) in recommends" :key="index">
|
||||||
<v-card class="entry" :to="`/watch?v=${video.videoId}`">
|
<v-card class="entry" :to="`/watch?v=${video.videoId}`">
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<div style="position: relative;">
|
<div style="position: relative;">
|
||||||
<v-img :src="video.thumbnail.thumbnails[0].url" />
|
<v-img :src="getThumbnail(video.videoId,'min')" />
|
||||||
<p v-text="video.lengthText.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
|
<p v-text="video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
|
||||||
</div>
|
</div>
|
||||||
<div v-text="video.title.runs[0].text" style="margin-top: 0.5em;" />
|
<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-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
</center>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -62,6 +57,12 @@ export default {
|
||||||
).catch ((error) => {
|
).catch ((error) => {
|
||||||
this.$logger("Home Page", error, true)
|
this.$logger("Home Page", error, true)
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getThumbnail(id, resolution) {
|
||||||
|
return this.$youtube.getThumbnail(id, resolution)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -11,10 +11,9 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
layout: "empty",
|
layout: "empty",
|
||||||
mounted() {
|
async mounted() {
|
||||||
this.$youtube.getAPI().then(
|
await this.$youtube.getAPI()
|
||||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
|
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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) {
|
async getVidInfoAsync(id) {
|
||||||
let data = { context: this.context, videoId: id }
|
let data = { context: this.context, videoId: id }
|
||||||
|
|
||||||
|
|
|
@ -135,25 +135,26 @@ let InnertubeAPI;
|
||||||
const recommendationModule = {
|
const recommendationModule = {
|
||||||
|
|
||||||
async getAPI() {
|
async getAPI() {
|
||||||
InnertubeAPI = await Innertube.createAsync((message, isError) => { logger("Innertube", message, isError); })
|
if (!InnertubeAPI) {
|
||||||
console.log(InnertubeAPI)
|
InnertubeAPI = await Innertube.createAsync((message, isError) => { logger("Innertube", message, isError); })
|
||||||
|
}
|
||||||
return InnertubeAPI;
|
return InnertubeAPI;
|
||||||
},
|
},
|
||||||
|
|
||||||
async getVid(id) {
|
async getVid(id) {
|
||||||
console.log(InnertubeAPI)
|
|
||||||
return InnertubeAPI.getVidInfoAsync(id).data;
|
return InnertubeAPI.getVidInfoAsync(id).data;
|
||||||
},
|
},
|
||||||
|
|
||||||
async recommend() {
|
async recommend() {
|
||||||
console.log(InnertubeAPI)
|
|
||||||
return InnertubeAPI.getRecommendationsAsync();
|
return InnertubeAPI.getRecommendationsAsync();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getThumbnail: (id, resolution) => Innertube.getThumbnail(id, resolution)
|
||||||
}
|
}
|
||||||
|
|
||||||
//--- Start ---//
|
//--- Start ---//
|
||||||
export default ({ app }, inject) => {
|
export default ({ app }, inject) => {
|
||||||
inject('youtube', {...searchModule, ...recommendationModule })
|
inject('youtube', {...searchModule, ...recommendationModule, })
|
||||||
inject("logger", logger)
|
inject("logger", logger)
|
||||||
}
|
}
|
||||||
logger("Initialize", "Program Started");
|
logger("Initialize", "Program Started");
|
|
@ -42,7 +42,11 @@ module.exports = {
|
||||||
"osName": info.osName,
|
"osName": info.osName,
|
||||||
"osVersion": info.osVersion,
|
"osVersion": info.osVersion,
|
||||||
"platform": "MOBILE",
|
"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
|
return client
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue