mirror of https://github.com/VueTubeApp/VueTube
77 lines
3.1 KiB
Vue
77 lines
3.1 KiB
Vue
|
<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>
|