etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

some incomplete channel stuff & more

This commit is contained in:
Nikita Krupin 2022-05-05 19:09:28 -04:00
parent 1668db764c
commit 58eb17fee5
14 changed files with 165 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
NUXT/components/SectionRenderers/shelfRenderer.vue
View File

@ -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>

16
NUXT/components/UtilRenderers/baseVideoRenderer.vue
View File

@ -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"

8
NUXT/components/topNavigation.vue
View File

@ -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

41
NUXT/layouts/default.vue
View File

@ -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
View 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 }} &middot; {{ 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>

7
NUXT/pages/channel/_notice_.vue
View File

@ -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
View File

@ -0,0 +1,3 @@
<template>
<div></div>
</template>

3
NUXT/pages/channel/channels.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div></div>
</template>

3
NUXT/pages/channel/community.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div></div>
</template>

3
NUXT/pages/channel/playlists.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div></div>
</template>

3
NUXT/pages/channel/videos.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div></div>
</template>

5
NUXT/pages/index.vue
View File

@ -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
},

31
NUXT/pages/settings.vue
View File

@ -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>

7
NUXT/pages/watch.vue
View File

@ -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>