mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-26 05:05:23 +00:00
channel global state setup
This commit is contained in:
Nikita Krupin
parent
b6eb64ebf6
commit
20a7641119
5 changed files with 76 additions and 57 deletions
|
|
@ -2,14 +2,14 @@
|
|||
<div class="d-flex flex-column align-center">
|
||||
<v-img
|
||||
height="120"
|
||||
:src="banner"
|
||||
:src="$store.state.channel.banner"
|
||||
class="background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
></v-img>
|
||||
<v-avatar size="60" class="mt-2 primary">
|
||||
<img :src="avatar" />
|
||||
<img :src="$store.state.channel.avatar" />
|
||||
</v-avatar>
|
||||
<h2 class="mt-2">{{ title }}</h2>
|
||||
<h2 class="mt-2">{{ $store.state.channel.title }}</h2>
|
||||
<v-btn
|
||||
:aria-label="subscribeAlt"
|
||||
class="mt-2"
|
||||
|
|
@ -17,67 +17,31 @@
|
|||
color="primary"
|
||||
style="height: 1rem"
|
||||
>
|
||||
{{ subscribe }}
|
||||
{{ $store.state.channel.subscribe }}
|
||||
</v-btn>
|
||||
<div style="font-size: 0.75rem" class="mt-2">
|
||||
{{ subscribers }} · {{ videos }}
|
||||
{{ $store.state.channel.subscribers }} ·
|
||||
{{ $store.state.channel.videos }}
|
||||
</div>
|
||||
<div
|
||||
style="font-size: 0.75rem"
|
||||
class="background--text text-center px-4"
|
||||
<v-card
|
||||
flat
|
||||
to="/channel/about?text=AboutDescription"
|
||||
style="
|
||||
font-size: 0.75rem;
|
||||
height: 2rem;
|
||||
text-oveflow: ellipsis;
|
||||
overflow: hidden;
|
||||
"
|
||||
class="background background--text text-center px-4"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
{{ descriptionPreview }}
|
||||
{{ $store.state.channel.descriptionPreview }}
|
||||
<v-icon
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
mdi-chevron-right
|
||||
</v-icon>
|
||||
</div>
|
||||
</v-card>
|
||||
</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.videos =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<b>Description</b>
|
||||
<p>{{ $store.state.channel.descriptionPreview }}</p>
|
||||
<br />
|
||||
<br />
|
||||
<b>Links</b>
|
||||
<br />
|
||||
<b>More Info</b>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@
|
|||
: 'background darken-1'
|
||||
: ''
|
||||
"
|
||||
:to="video.channelUrl"
|
||||
to="/channel"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundWatch
|
||||
? `${$store.state.tweaks.roundTweak / 2}rem`
|
||||
|
|
@ -144,6 +144,7 @@
|
|||
? '1rem'
|
||||
: '0',
|
||||
}"
|
||||
@click="$store.dispatch('channel/fetchChannel', video.channelUrl)"
|
||||
>
|
||||
<div id="details">
|
||||
<div class="avatar-link mr-3">
|
||||
|
|
|
|||
46
NUXT/store/channel/index.js
Normal file
46
NUXT/store/channel/index.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
export const state = () => ({
|
||||
avatar: null,
|
||||
banner: null,
|
||||
title: null,
|
||||
subscribe: null,
|
||||
subscribeAlt: null,
|
||||
descriptionPreview: null,
|
||||
subscribers: null,
|
||||
videos: null,
|
||||
});
|
||||
export const actions = {
|
||||
fetchChannel({ state }, channelUrl) {
|
||||
// console.log(
|
||||
// "%c getChannel ",
|
||||
// "color: black; font-weight: bold; background: #f00; padding: .5rem .25rem; border-radius: .25rem;"
|
||||
// );
|
||||
// console.log(
|
||||
// `%c${id}`,
|
||||
// "color: black; font-weight: bold; background: #0f0; padding: .5rem .25rem; border-radius: .25rem;"
|
||||
// );
|
||||
this.$youtube
|
||||
.getChannel(`https://youtube.com/${channelUrl}`)
|
||||
.then((channel) => {
|
||||
// console.log(channel);
|
||||
state.banner =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner.image.sources[0].url;
|
||||
state.avatar =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.avatarData.avatar.image.sources[0].url;
|
||||
state.title =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.title;
|
||||
state.subscribe =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.buttonText;
|
||||
state.subscribeAlt =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.subscribeButton.subscribeButtonContent.accessibilityText;
|
||||
state.descriptionPreview =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.descriptionPreview.description;
|
||||
state.subscribers =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.subscriberCountText;
|
||||
state.videos =
|
||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
@ -12,6 +12,6 @@
|
|||
</deviceKey>
|
||||
</Target>
|
||||
</targetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-05-13T01:27:37.098564Z" />
|
||||
<timeTargetWasSelectedWithDropDown value="2022-05-14T02:50:17.689302Z" />
|
||||
</component>
|
||||
</project>
|
||||
Loading…
Reference in a new issue