mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-29 06:33:05 +00:00
some incomplete channel stuff & more
This commit is contained in:
parent
1668db764c
commit
58eb17fee5
14 changed files with 165 additions and 45 deletions
|
@ -13,12 +13,12 @@
|
|||
:render="render.content[Object.keys(render.content)[0]]"
|
||||
></component
|
||||
></v-list-item>
|
||||
<div
|
||||
<!-- <div
|
||||
v-if="render.separator && render.separator.hasBottomSeparator"
|
||||
class="separator-bottom background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
:style="{ height: render.separator.height + 'px' }"
|
||||
></div>
|
||||
></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,17 +1,10 @@
|
|||
<template>
|
||||
<v-card
|
||||
class="entry videoRenderer background"
|
||||
class="entry videoRenderer background mb-2"
|
||||
:to="`/watch?v=${vidId}`"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
margin: $store.state.tweaks.roundTweak > 0 ? '0.5rem 1rem' : '0',
|
||||
borderRadius: `${roundTweak / 2.5}rem`,
|
||||
margin: $store.state.tweaks.roundTweak > 0 ? '1rem' : '0',
|
||||
}"
|
||||
flat
|
||||
>
|
||||
|
@ -19,6 +12,9 @@
|
|||
<v-img
|
||||
:aspect-ratio="16 / 9"
|
||||
:src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2.5}rem`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="thumbnailOverlayText && thumbnailOverlayStyle"
|
||||
|
|
|
@ -3,12 +3,12 @@
|
|||
scroll-off-screen
|
||||
style="height: 4rem !important; display: flex"
|
||||
class="rounded-0 pa-3 topNav background"
|
||||
:style="
|
||||
>
|
||||
<!-- :style="
|
||||
$vuetify.theme.dark
|
||||
? 'border-bottom: 1px solid var(--v-background-lighten1) !important;'
|
||||
: 'border-bottom: 1px solid var(--v-background-darken1) !important;'
|
||||
"
|
||||
>
|
||||
" -->
|
||||
<h3 v-show="!search" class="my-auto ml-4" v-text="page" />
|
||||
|
||||
<v-btn
|
||||
|
@ -38,7 +38,7 @@
|
|||
<v-spacer v-if="!search" />
|
||||
|
||||
<v-btn
|
||||
v-if="!search"
|
||||
v-if="!search && $route.path.includes('/home')"
|
||||
v-show="page == 'Home'"
|
||||
icon
|
||||
tile
|
||||
|
|
|
@ -9,8 +9,33 @@
|
|||
@text-changed="textChanged"
|
||||
@scroll-to-top="$refs.pgscroll.scrollTop = 0"
|
||||
/>
|
||||
<v-tabs
|
||||
v-if="$route.path.includes('/channel')"
|
||||
mobile-breakpoint="0"
|
||||
style="
|
||||
position: fixed;
|
||||
top: calc(4rem + env(safe-area-inset-top));
|
||||
z-index: 696969;
|
||||
"
|
||||
background-color="background"
|
||||
:color="$vuetify.theme.dark ? 'white' : 'black'"
|
||||
>
|
||||
<v-tab
|
||||
v-for="tab in channelTabs"
|
||||
:key="tab.name"
|
||||
:to="tab.to"
|
||||
:v-ripple="false"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<div style="height: 100%; margin-top: 4rem; padding-bottom: 4rem">
|
||||
<div
|
||||
style="height: 100%; padding-bottom: 4rem"
|
||||
:style="{
|
||||
marginTop: $route.path.includes('/channel') ? '7rem' : '4rem',
|
||||
}"
|
||||
>
|
||||
<div v-show="!search">
|
||||
<!-- class="scrollcontainer" -->
|
||||
<!-- style="overflow: hidden; height: calc(100vh - 8rem)" -->
|
||||
|
@ -67,6 +92,14 @@ export default {
|
|||
data: () => ({
|
||||
search: false,
|
||||
response: [],
|
||||
channelTabs: [
|
||||
{ name: "Home", to: "/channel" },
|
||||
{ name: "Videos", to: "/channel/videos" },
|
||||
{ name: "Playlists", to: "/channel/playlists" },
|
||||
{ name: "Community", to: "/channel/community" },
|
||||
{ name: "Channels", to: "/channel/channels" },
|
||||
{ name: "About", to: "/channel/about" },
|
||||
],
|
||||
}),
|
||||
|
||||
computed: {
|
||||
|
@ -187,6 +220,12 @@ export default {
|
|||
*:focus::before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.v-slide-group__prev {
|
||||
display: none !important;
|
||||
}
|
||||
.v-slide-group__next {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.glassy {
|
||||
backdrop-filter: blur(20px);
|
||||
|
|
76
NUXT/pages/channel/_id.vue
Normal file
76
NUXT/pages/channel/_id.vue
Normal file
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column align-center">
|
||||
<v-img
|
||||
height="120"
|
||||
:src="banner"
|
||||
class="background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
></v-img>
|
||||
<v-avatar size="60" class="mt-2 primary">
|
||||
<img :src="avatar" />
|
||||
</v-avatar>
|
||||
<h2 class="mt-2">{{ title }}</h2>
|
||||
<v-btn
|
||||
:aria-label="subscribeAlt"
|
||||
class="mt-2"
|
||||
text
|
||||
color="primary"
|
||||
style="height: 1rem"
|
||||
>
|
||||
{{ subscribe }}
|
||||
</v-btn>
|
||||
<div class="mt-2">{{ subscribers }} · {{ videos }}</div>
|
||||
<div
|
||||
style="font-size: 0.75rem"
|
||||
class="background--text text-center px-4"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
{{ descriptionPreview }}
|
||||
<v-icon>mdi-arrow-right</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
channel: null,
|
||||
avatar: null,
|
||||
banner: null,
|
||||
title: null,
|
||||
subscribe: null,
|
||||
subscribeAlt: null,
|
||||
descriptionPreview: null,
|
||||
subscribers: null,
|
||||
videos: null,
|
||||
}),
|
||||
mounted() {
|
||||
console.log(
|
||||
"%c getChannel ",
|
||||
"color: black; font-weight: bold; background: #f00; padding: .5rem .25rem; border-radius: .25rem;"
|
||||
);
|
||||
this.$youtube
|
||||
.getChannel(`https://youtube.com/channel/${this.$route.params.id}`)
|
||||
.then((channel) => {
|
||||
this.channel = channel;
|
||||
console.log(channel);
|
||||
this.banner =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner.image.sources[0].url;
|
||||
this.avatar =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.avatarData.avatar.image.sources[0].url;
|
||||
this.title =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.title;
|
||||
this.subscribe =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.buttonText;
|
||||
this.subscribeAlt =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.accessibilityText;
|
||||
this.descriptionPreview =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.descriptionPreview.description;
|
||||
this.subscribers =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.subscriberCountText;
|
||||
this.subscribers =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<center>
|
||||
<img src="/channel_notice.svg" style="width: 80%; margin: 2em;" />
|
||||
<h1>Channel Pages are still being worked on</h1><br><br>
|
||||
<v-btn to="/home">Return Home</v-btn>
|
||||
</center>
|
||||
</template>
|
3
NUXT/pages/channel/about.vue
Normal file
3
NUXT/pages/channel/about.vue
Normal file
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
3
NUXT/pages/channel/channels.vue
Normal file
3
NUXT/pages/channel/channels.vue
Normal file
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
3
NUXT/pages/channel/community.vue
Normal file
3
NUXT/pages/channel/community.vue
Normal file
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
3
NUXT/pages/channel/playlists.vue
Normal file
3
NUXT/pages/channel/playlists.vue
Normal file
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
3
NUXT/pages/channel/videos.vue
Normal file
3
NUXT/pages/channel/videos.vue
Normal file
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
|
@ -55,11 +55,10 @@ export default {
|
|||
);
|
||||
|
||||
await theming;
|
||||
this.progressMsg = "Communicating with the API";
|
||||
await this.$youtube.getAPI();
|
||||
this.progressMsg = "Launching startup tasks";
|
||||
this.progressMsg = "Launching";
|
||||
await this.$vuetube.launchBackHandling();
|
||||
this.progressMsg = "Navigating to the home page";
|
||||
this.progressMsg = "Navigating";
|
||||
|
||||
this.$router.replace(`/${localStorage.getItem("startPage") || "home"}`); // Prevent user from navigating back to the splash screen
|
||||
},
|
||||
|
|
|
@ -17,18 +17,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%;
|
||||
font-size: 1.2em;
|
||||
justify-content: left !important;
|
||||
padding: 1.5em 0.5em 1.5em 0.5em !important;
|
||||
}
|
||||
.icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
@ -50,7 +38,12 @@ export default {
|
|||
to: "/mods/tweaks",
|
||||
},
|
||||
{ name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
|
||||
{ name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins", disabled: true },
|
||||
{
|
||||
name: "Plugins",
|
||||
icon: "mdi-puzzle",
|
||||
to: "/mods/plugins",
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
name: "Updates",
|
||||
icon: "mdi-cloud-download-outline",
|
||||
|
@ -71,3 +64,15 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%;
|
||||
font-size: 1.2em;
|
||||
justify-content: left !important;
|
||||
padding: 1.5em 0.5em 1.5em 0.5em !important;
|
||||
}
|
||||
.icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
||||
"
|
||||
>
|
||||
<div style="margin-bottom: 1rem">
|
||||
<div>
|
||||
<template
|
||||
v-for="text in video.metadata.contents.find(
|
||||
(content) => content.slimVideoInformationRenderer
|
||||
|
@ -131,10 +131,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="channel-buttons"
|
||||
style="color: rgb(204, 0, 0); text-transform: uppercase"
|
||||
>
|
||||
<div class="primary--text" style="text-transform: uppercase">
|
||||
subscribe
|
||||
</div>
|
||||
</v-card>
|
||||
|
|
Loading…
Reference in a new issue