etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-26 21:23:02 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #92 from 404-Program-not-found/main

Browse source 
Backend + Rudimentary front end for home page recommendation Completed
This commit is contained in:
Kenny 2022-03-18 08:05:06 -04:00 committed by GitHub
commit 9850b058b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 166 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -4,3 +4,4 @@ dist
package-lock.json
temp.js
temp.json
.vscode/settings.json

68
NUXT/pages/home.vue
View file

@ -1,24 +1,68 @@
// Buttons and methods for testing and demonstration purposes only. Uncomment them to see how it works. Remove to actually implement a implementation
<template>
<center>
<v-img contain 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"
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-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>
<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}`" />
</v-card-text>
</v-card>
</v-list-item>
</center>
</div>
</template>
<script>
export default {
data() {
return {
recommends: null
}
},
// 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() {
const vm = this;
this.$youtube.recommend().then(
result => {
const videoList = []
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)
videoList.push(video)
})
})
vm.recommends = videoList;
}
).catch ((error) => {
this.$logger("Home Page", error, true)
})
},
methods: {
// debugRecommend () {
// console.log(this.$youtube.recommend("test", false))
// },
// debugVideo () {
// console.log(this.$youtube.getVid("WhWc3b3KhnY"))
// }
getThumbnail(id, resolution) {
return this.$youtube.getThumbnail(id, resolution)
}
}
}
</script>

5
NUXT/pages/index.vue
View file

@ -11,8 +11,9 @@
<script>
export default {
layout: "empty",
mounted() {
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
async mounted() {
await this.$youtube.getAPI()
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
}
}
</script>

49
NUXT/plugins/innertube.js
View file

@ -18,37 +18,37 @@ class Innertube {
return typeof this.ErrorCallback === "function"
}
init() {
Http.get({ url: constants.URLS.YT_URL, params: { hl: "en" } })
.then(result => {
if (result instanceof Error && this.checkErrorCallback) this.ErrorCallback(result.message, true);
async initAsync() {
const html = await Http.get({ url: constants.URLS.YT_URL, params: { hl: "en" } }).catch((error) => error);
try {
const data = JSON.parse(getBetweenStrings(result.data, 'ytcfg.set(', ');'));
if (html instanceof Error && this.checkErrorCallback) this.ErrorCallback(html.message, true);
try {
const data = JSON.parse(getBetweenStrings(html.data, 'ytcfg.set(', ');'));
if (data.INNERTUBE_CONTEXT) {
this.key = data.INNERTUBE_API_KEY;
this.context = data.INNERTUBE_CONTEXT;
this.context.client.clientName = "ANDROID";
this.context.client.clientVersion = "16.25";
this.context.client = constants.INNERTUBE_CLIENT(this.context.client)
}
} catch (err) {
console.log(err)
if (this.checkErrorCallback) this.ErrorCallback(err, true)
if (this.retry_count >= 10) { this.init() } else { if (this.checkErrorCallback) this.ErrorCallback("Failed to retrieve Innertube session", true); }
if (this.retry_count >= 10) { this.initAsync() } else { if (this.checkErrorCallback) this.ErrorCallback("Failed to retrieve Innertube session", true); }
}
})
.catch((error) => error);
} catch (error) {
this.ErrorCallback(error, true)
};
};
static create(ErrorCallback) {
static async createAsync(ErrorCallback) {
const created = new Innertube(ErrorCallback);
created.init();
await created.initAsync();
return created;
}
//--- API Calls ---//
async browse(action_type) {
async browseAsync(action_type) {
let data = { context: this.context }
switch (action_type) {
@ -69,7 +69,7 @@ class Innertube {
headers: { "Content-Type": "application/json" }
}).catch((error) => error);
if (response instanceof Error) return { success: false, status_code: response.response.status, message: response.message };
if (response instanceof Error) return { success: false, status_code: response.status, message: response.message };
return {
success: true,
@ -78,13 +78,24 @@ class Innertube {
};
}
async getVidInfo(id) {
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 }
const response = await Http.post({
url: `${constants.URLS.YT_BASE_API}/player?key=${this.key}`,
data: data,
headers: { "Content-Type": "application/json" }
headers: constants.INNERTUBE_HEADER(this.context)
}).catch((error) => error);
if (response instanceof Error) return { success: false, status_code: response.response.status, message: response.message };
@ -97,8 +108,10 @@ class Innertube {
}
// Simple Wrappers
async getRecommendations() {
return await this.browse("recommendations")
async getRecommendationsAsync() {
const rec = await this.browseAsync("recommendations");
console.log(rec.data)
return rec.data;
}

22
NUXT/plugins/youtube.js
View file

@ -128,23 +128,33 @@ const searchModule = {
//--- Recommendations --//
// Immediately create an Innertube object. This will be the object used in all future Inntertube API calls
let InnertubeAPI;
// Lazy loads Innertube object. This will be the object used in all future Innertube API calls. Code provided by Lightfire228 (https://github.com/Lightfire228)
// These are just a way for the backend Javascript to communicate with the front end Vue scripts. Essentially a wrapper inside a wrapper
const recommendationModule = {
recommendAPI: Innertube.create((message, isError) => { logger("Innertube", message, isError); }), // There's definitely a better way to do this, but it's 2 am and I just can't anymore
async getAPI() {
if (!InnertubeAPI) {
InnertubeAPI = await Innertube.createAsync((message, isError) => { logger("Innertube", message, isError); })
}
return InnertubeAPI;
},
async getVid(id) {
console.log(this.recommendAPI)
return this.recommendAPI.getVidInfo(id);
return InnertubeAPI.getVidInfoAsync(id).data;
},
async recommend() {
return this.recommendAPI.getRecommendations();
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");

46
NUXT/static/constants.js
View file

@ -1,11 +1,53 @@
// To centeralize certain values and URLs as for easier debugging and refactoring
module.exports = {
URLS: {
const url = {
YT_URL: 'https://www.youtube.com',
YT_MUSIC_URL: 'https://music.youtube.com',
YT_BASE_API: 'https://www.youtube.com/youtubei/v1',
YT_SUGGESTIONS: "https://suggestqueries.google.com/complete",
VT_GITHUB: "https://api.github.com/repos/Frontesque/VueTube",
}
const ytApiVal = {
VERSION: "16.25",
CLIENTNAME: "ANDROID",
}
module.exports = {
URLS: url,
YT_API_VALUES: ytApiVal,
INNERTUBE_HEADER: (info) => {
let headers = {
'accept': '*/*',
'user-agent': info.client.userAgent,
'content-type': 'application/json',
'x-goog-authuser': 0,
'x-youtube-client-name': 2,
'x-youtube-client-version': info.client.clientVersion,
'x-youtube-chrome-connected': 'source=Chrome,mode=0,enable_account_consistency=true,supervised=false,consistency_enabled_by_default=false',
};
return headers
},
INNERTUBE_CLIENT: (info) => {
let client = {
"gl": info.gl,
"hl": info.hl,
"deviceMake": info.deviceMake,
"deviceModel": info.deviceModel,
"userAgent": info.userAgent,
"clientName": ytApiVal.CLIENTNAME,
"clientVersion": ytApiVal.VERSION,
"osName": info.osName,
"osVersion": info.osVersion,
"platform": "MOBILE",
"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
}
}