mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-26 13:13:03 +00:00
refactor(watch.vue)! : made watch.vue compatable with the new innertube return
This commit is contained in:
Alex
parent
9932b697e9
commit
607951eb66
5 changed files with 90 additions and 89 deletions
|
|
@ -1,12 +1,8 @@
|
|||
<template>
|
||||
<center class="container">
|
||||
<v-img src="/icon.svg" width="10em" style="margin-bottom: 1em;" />
|
||||
<v-progress-circular
|
||||
size="50"
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
</center>
|
||||
<center class="container">
|
||||
<v-img src="/icon.svg" width="10em" style="margin-bottom: 1em" />
|
||||
<v-progress-circular size="50" indeterminate color="primary" />
|
||||
</center>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -22,45 +18,49 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import { Plugins } from '@capacitor/core';
|
||||
import { Plugins } from "@capacitor/core";
|
||||
const { SplashScreen } = Plugins;
|
||||
|
||||
export default {
|
||||
layout: "empty",
|
||||
async mounted() {
|
||||
layout: "empty",
|
||||
async mounted() {
|
||||
//--- Hide Splash Screen ---//
|
||||
// SplashScreen.hide(); This causes an infinite loading for some reason.
|
||||
//-------------------------------//
|
||||
|
||||
//--- Hide Splash Screen ---//
|
||||
SplashScreen.hide();
|
||||
//-------------------------------//
|
||||
//--- Theme Loader Moved From '~/layouts/default.vue' (because this only needs to be run once) -Front ---//
|
||||
setTimeout(() => {
|
||||
//Set timeout is required to make it load properly... dont ask me why -Front
|
||||
const darkTheme = localStorage.getItem("darkTheme");
|
||||
if (darkTheme == "true") {
|
||||
this.$vuetify.theme.dark = darkTheme;
|
||||
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.themes.dark.accent
|
||||
);
|
||||
|
||||
//--- Theme Loader Moved From '~/layouts/default.vue' (because this only needs to be run once) -Front ---//
|
||||
setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
|
||||
const darkTheme = localStorage.getItem('darkTheme');
|
||||
if (darkTheme == "true") {
|
||||
this.$vuetify.theme.dark = darkTheme;
|
||||
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
|
||||
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.dark.accent)
|
||||
const isOled = localStorage.getItem("isOled");
|
||||
|
||||
const isOled = localStorage.getItem('isOled')
|
||||
|
||||
if(isOled == "true") {
|
||||
this.$vuetify.theme.themes.dark.accent = '#000',
|
||||
this.$vuetify.theme.themes.dark.accent2 = '#000',
|
||||
this.$vuetify.theme.themes.dark.background = '#000'
|
||||
} else {
|
||||
this.$vuetify.theme.themes.dark.accent = '#222',
|
||||
this.$vuetify.theme.themes.dark.accent2 = '#222',
|
||||
this.$vuetify.theme.themes.dark.background = '#333'
|
||||
}
|
||||
if (isOled == "true") {
|
||||
(this.$vuetify.theme.themes.dark.accent = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.accent2 = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000");
|
||||
} else {
|
||||
//this.$vuetube.statusBar.setLight() //Looks weird -Front
|
||||
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.light.accent);
|
||||
(this.$vuetify.theme.themes.dark.accent = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.accent2 = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#333");
|
||||
}
|
||||
}, 0);
|
||||
//-----------------------------------------------------------------------------------------------------------//
|
||||
} else {
|
||||
//this.$vuetube.statusBar.setLight() //Looks weird -Front
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.themes.light.accent
|
||||
);
|
||||
}
|
||||
}, 0);
|
||||
//-----------------------------------------------------------------------------------------------------------//
|
||||
|
||||
await this.$youtube.getAPI()
|
||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
|
||||
}
|
||||
}
|
||||
await this.$youtube.getAPI();
|
||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div>
|
||||
<video controls autoplay :src="vidSrc" width="100%" height="300vh" />
|
||||
<v-card class="ml-2 mr-2 flat light" flat>
|
||||
<v-card-title style="padding-top: 0;">{{ title }}</v-card-title>
|
||||
<v-card-title style="padding-top: 0">{{ title }}</v-card-title>
|
||||
<v-card-text>
|
||||
<span>{{ views }} views • {{uploaded}}</span><br />
|
||||
<span>{{ views }} views • {{ uploaded }}</span
|
||||
><br />
|
||||
|
||||
<!-- Scrolling Div For Interactions --->
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex">
|
||||
<v-list-item v-for="(item, index) in interactions" :key="index">
|
||||
|
||||
|
||||
<button class="vertical-button" style="padding: 0; margin: 0;" elevation=0 :disabled="item.disabled">
|
||||
<button
|
||||
class="vertical-button"
|
||||
style="padding: 0; margin: 0"
|
||||
elevation="0"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
<div v-text="item.value || item.name" />
|
||||
</button>
|
||||
|
||||
|
||||
</v-list-item>
|
||||
</div>
|
||||
<!-- End Scrolling Div For Interactions --->
|
||||
|
||||
</v-card-text>
|
||||
<p>{{ description }}</p>
|
||||
</v-card>
|
||||
|
||||
<recommended />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -39,15 +39,26 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import recommended from '../components/recommended.vue';
|
||||
import recommended from "../components/recommended.vue";
|
||||
export default {
|
||||
components: { recommended },
|
||||
data() {
|
||||
return {
|
||||
|
||||
interactions: [
|
||||
{ name: "Likes", icon: "mdi-thumb-up", action: null, value: this.likes, disabled: true },
|
||||
{ name: "Dislikes", icon: "mdi-thumb-down", action: null, value: this.dislikes, disabled: true },
|
||||
{
|
||||
name: "Likes",
|
||||
icon: "mdi-thumb-up",
|
||||
action: null,
|
||||
value: this.likes,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
name: "Dislikes",
|
||||
icon: "mdi-thumb-down",
|
||||
action: null,
|
||||
value: this.dislikes,
|
||||
disabled: true,
|
||||
},
|
||||
{ name: "Share", icon: "mdi-share", action: null, disabled: true },
|
||||
],
|
||||
|
||||
|
|
@ -58,39 +69,27 @@ export default {
|
|||
vidSrc: null,
|
||||
description: null,
|
||||
views: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.likes = 100;
|
||||
|
||||
this.likes = 100
|
||||
|
||||
this.$youtube.getVid(this.$route.query.v).then(result => {
|
||||
console.log('Video info data', result)
|
||||
result = result.data;
|
||||
console.log(result.streamingData.formats)
|
||||
this.vidSrc = result.streamingData.formats[result.streamingData.formats.length-1].url
|
||||
this.title = result.videoDetails.title
|
||||
this.description = result.videoDetails.shortDescription;
|
||||
this.views = result.videoDetails.viewCount.toLocaleString();
|
||||
});
|
||||
|
||||
|
||||
this.$youtube.getRemainingVideoInfo(this.$route.query.v, (data) => {
|
||||
this.likes = data.likes.toLocaleString();
|
||||
this.uploaded = data.uploadDate;
|
||||
|
||||
this.interactions[0].value = data.likes;
|
||||
this.$youtube.getVid(this.$route.query.v).then((result) => {
|
||||
console.log("Video info data", result);
|
||||
console.log(result.availableResolutions);
|
||||
this.vidSrc = result.availableResolutions[1].url;
|
||||
this.title = result.title;
|
||||
this.description = result.metadata.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
|
||||
this.views = result.metadata.viewCount.toLocaleString();
|
||||
this.likes = result.metadata.likes.toLocaleString();
|
||||
this.uploaded = result.metadata.uploadDate;
|
||||
this.interactions[0].value = result.metadata.likes;
|
||||
});
|
||||
|
||||
this.$youtube.getReturnYoutubeDislike(this.$route.query.v, (data) => {
|
||||
|
||||
|
||||
|
||||
this.dislikes = data.dislikes.toLocaleString();
|
||||
this.interactions[1].value = data.dislikes.toLocaleString();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -136,10 +136,10 @@ class Innertube {
|
|||
|
||||
async VidInfoAsync(id) {
|
||||
let response = await this.getVidAsync(id)
|
||||
response = response.data
|
||||
if (response[2].playerResponse?.playabilityStatus?.status == ("ERROR" || undefined))
|
||||
throw new Error(`Could not get information for video: ${response[2].playerResponse?.playabilityStatus?.status} - ${response[2].playerResponse?.playabilityStatus?.reason}`)
|
||||
|
||||
if (response.success && (response.data[2].playerResponse?.playabilityStatus?.status == ("ERROR" || undefined)))
|
||||
throw new Error(`Could not get information for video: ${response[2].playerResponse?.playabilityStatus?.status} - ${response[2].playerResponse?.playabilityStatus?.reason}`)
|
||||
response = response.data
|
||||
const details = response[2].playerResponse?.videoDetails
|
||||
const microformat = response[2].playerResponse?.microformat?.playerMicroformatRenderer
|
||||
const renderedPanels = response[3].response?.engagementPanels
|
||||
|
|
|
|||
|
|
@ -183,9 +183,11 @@ const recommendationModule = {
|
|||
},
|
||||
|
||||
async getVid(id) {
|
||||
|
||||
// temporary test
|
||||
console.log(await InnertubeAPI.VidInfoAsync(id))
|
||||
try {
|
||||
return await InnertubeAPI.VidInfoAsync(id)
|
||||
} catch (error) {
|
||||
logger(constants.LOGGER_NAMES.watch, error, true)
|
||||
}
|
||||
},
|
||||
|
||||
// It just works™
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ module.exports = {
|
|||
LOGGER_NAMES: {
|
||||
search: "Search",
|
||||
autoComplete: "AutoComplete",
|
||||
watch: "Watch",
|
||||
recommendations: "Recommendations",
|
||||
init: "Initialize",
|
||||
innertube: "Innertube"
|
||||
|
|
@ -31,14 +32,13 @@ module.exports = {
|
|||
accept: '*/*',
|
||||
'user-agent': info.userAgent,
|
||||
'content-type': 'application/json',
|
||||
'accept-language': `${info.hl}-${info.gl},${info.hl};q=0.9`,
|
||||
'x-goog-authuser': 0,
|
||||
'x-goog-visitor-id': info.visitorData,
|
||||
'x-youtube-client-name': ytApiVal.CLIENTNAME,
|
||||
'x-youtube-client-version': ytApiVal.VERSION,
|
||||
'x-origin': info.originalUrl,
|
||||
origin: info.originalUrl,
|
||||
// referer: 'https://m.youtube.com/watch?v=U-9M-BjFYMc'
|
||||
referer: `${url.YT_MOBILE}/watch?v=${id}`
|
||||
};
|
||||
return headers
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue