mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-12-22 16:30:20 +00:00
Front's Bug Fixes pt.1
- Refactor homepage/"recommended" videos - Fix SOME theme header issues
This commit is contained in:
Front
parent
398ac8141b
commit
418682e2f6
10 changed files with 107 additions and 71 deletions
73
NUXT/components/recommended.vue
Normal file
73
NUXT/components/recommended.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
// Buttons and methods for testing and demonstration purposes only. Uncomment them to see how it works. Remove to actually implement a implementation
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!-- Video Loading Animation -->
|
||||
<center v-if="recommends.length == 0">
|
||||
<v-skeleton-loader type="card-avatar, article, actions" />
|
||||
<v-skeleton-loader type="card-avatar, article, actions" />
|
||||
</center>
|
||||
|
||||
|
||||
<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="video.thumbnail" />
|
||||
<div v-text="video.metadata.overlay[0]" class="videoRuntimeFloat" style="color: #fff" />
|
||||
</div>
|
||||
<div v-text="video.title" style="margin-top: 0.5em" />
|
||||
<div v-text="parseBottom(video)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-list-item>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
margin-top: 1em;
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
.videoRuntimeFloat {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
padding: 0 3px 0 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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() {
|
||||
this.$youtube
|
||||
.recommend()
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
if (result) this.recommends = result;
|
||||
})
|
||||
.catch((error) => this.$logger("Home Page", error, true));
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseBottom(video) {
|
||||
const bottomText = [video.channel, video.metadata.views];
|
||||
if (video.metadata.published) bottomText.push(video.metadata.published);
|
||||
return bottomText.join(" • ");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -179,11 +179,13 @@ export default {
|
|||
searchBtn() {
|
||||
const query = this.text;
|
||||
|
||||
if(query === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.search === true) {
|
||||
if(query) {
|
||||
this.$router.push(`/search?q=${query}`);
|
||||
this.search = false;
|
||||
}
|
||||
this.$router.push(`/search?q=${query}`);
|
||||
this.search = false;
|
||||
} else {
|
||||
this.search = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@ export default {
|
|||
dark: {
|
||||
primary: colors.red.darken2, //colors.blue.darken2
|
||||
primaryAlt: "#533",
|
||||
accent: "#333",
|
||||
accent2: "#333",
|
||||
accent: "#333333",
|
||||
accent2: "#33333",
|
||||
background: "#222",
|
||||
info: "#fff",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +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>
|
||||
<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[0]" :key="index">
|
||||
<v-card class="entry" :to="`/watch?v=${video.id}`">
|
||||
<v-card-text>
|
||||
<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" style="margin-top: 0.5em" />
|
||||
<div v-text="parseBottom(video)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-list-item>
|
||||
</center>
|
||||
</div>
|
||||
<!--
|
||||
* Videos are now polled from '~/components/recommended.vue'
|
||||
* This is to allow use of "recommended" videos on other pages such as /watch
|
||||
* -Front
|
||||
* -->
|
||||
<recommended />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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() {
|
||||
this.$youtube
|
||||
.recommend()
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
if (result) this.recommends = result;
|
||||
})
|
||||
.catch((error) => this.$logger("Home Page", error, true));
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseBottom(video) {
|
||||
const bottomText = [video.channel, video.metadata.views];
|
||||
if (video.metadata.published) bottomText.push(video.metadata.published);
|
||||
return bottomText.join(" • ");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -73,6 +73,7 @@ export default {
|
|||
// document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
|
||||
},
|
||||
saveTheme(isDark) {
|
||||
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.currentTheme.accent)
|
||||
localStorage.setItem("darkTheme", isDark);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<v-card-text>
|
||||
<div style="position: relative;">
|
||||
<v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
|
||||
<p v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff;" />
|
||||
<div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff;" />
|
||||
</div>
|
||||
<div v-text="video.title" style="margin-top: 0.5em;" />
|
||||
<div v-text="`${video.views} • ${video.uploaded}`" />
|
||||
|
|
@ -24,15 +24,15 @@
|
|||
<style scoped>
|
||||
.entry {
|
||||
margin-top: 1em;
|
||||
width: 100%; /* Prevent Loading Issues */
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
.videoRuntimeFloat {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 1em;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
padding: 0 3px 0 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ dependencies {
|
|||
implementation project(':capacitor-app')
|
||||
implementation project(':capacitor-browser')
|
||||
implementation project(':capacitor-device')
|
||||
implementation project(':capacitor-status-bar')
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,5 +14,9 @@
|
|||
{
|
||||
"pkg": "@capacitor/device",
|
||||
"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
|
||||
},
|
||||
{
|
||||
"pkg": "@capacitor/status-bar",
|
||||
"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -13,3 +13,6 @@ project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/
|
|||
|
||||
include ':capacitor-device'
|
||||
project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
|
||||
|
||||
include ':capacitor-status-bar'
|
||||
project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@ install! 'cocoapods', :disable_input_output_paths => true
|
|||
def capacitor_pods
|
||||
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
|
||||
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
|
||||
pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
|
||||
pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
|
||||
pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
|
||||
pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
|
||||
pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
|
||||
pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
|
||||
pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
|
||||
pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
|
||||
pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
|
||||
end
|
||||
|
||||
target 'App' do
|
||||
|
|
|
|||
Loading…
Reference in a new issue