mirror of https://github.com/VueTubeApp/VueTube
fix: minor graphical issues
This commit is contained in:
Alex
parent
bf865f8fea
commit
041cc70cf5
|
|
@ -57,6 +57,10 @@
|
||||||
background: rgba(255, 0, 0, 0.5);
|
background: rgba(255, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.videoRuntimeFloat.style-UPCOMING {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
.vid-title {
|
.vid-title {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
paginate() {
|
paginate() {
|
||||||
if (this.recommends) {
|
if (this.recommends && !this.loading) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.$youtube
|
this.$youtube
|
||||||
.recommendContinuation(
|
.recommendContinuation(
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ export default {
|
||||||
await this.$youtube.getAPI();
|
await this.$youtube.getAPI();
|
||||||
this.progressMsg = "Launching";
|
this.progressMsg = "Launching";
|
||||||
|
|
||||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
|
this.$router.replace(`/${localStorage.getItem("startPage") || "home"}`); // Prevent user from navigating back to the splash screen
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -29,54 +29,56 @@
|
||||||
class="d-flex justify-space-between align-start px-3 pt-3"
|
class="d-flex justify-space-between align-start px-3 pt-3"
|
||||||
@click="showMore = !showMore"
|
@click="showMore = !showMore"
|
||||||
>
|
>
|
||||||
<div class="d-flex flex-column">
|
<div class="d-flex flex-column">
|
||||||
<v-card-title
|
<v-card-title
|
||||||
class="pa-0"
|
class="pa-0"
|
||||||
style="font-size: 0.95rem; line-height: 1.15rem"
|
style="font-size: 0.95rem; line-height: 1.15rem"
|
||||||
v-text="video.title"
|
v-text="video.title"
|
||||||
v-emoji
|
v-emoji
|
||||||
/>
|
/>
|
||||||
<v-card-text
|
<v-card-text
|
||||||
style="font-size: 0.75rem"
|
style="font-size: 0.75rem"
|
||||||
class="background--text pa-0"
|
class="background--text pa-0"
|
||||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
:class="
|
||||||
>
|
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
||||||
<div style="margin-bottom: 1rem">
|
"
|
||||||
<template
|
>
|
||||||
v-for="text in video.metadata.contents.find(
|
<div style="margin-bottom: 1rem">
|
||||||
(content) => content.slimVideoInformationRenderer
|
<template
|
||||||
).slimVideoInformationRenderer.collapsedSubtitle.runs"
|
v-for="text in video.metadata.contents.find(
|
||||||
>{{ text.text }}
|
(content) => content.slimVideoInformationRenderer
|
||||||
</template>
|
).slimVideoInformationRenderer.collapsedSubtitle.runs"
|
||||||
|
>{{ text.text }}
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
</div>
|
</div>
|
||||||
</v-card-text>
|
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
|
||||||
|
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
|
||||||
</div>
|
</div>
|
||||||
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
|
<div class="d-flex">
|
||||||
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
|
<v-btn
|
||||||
</div>
|
v-for="(item, index) in interactions"
|
||||||
<div class="d-flex">
|
:key="index"
|
||||||
<v-btn
|
text
|
||||||
v-for="(item, index) in interactions"
|
fab
|
||||||
:key="index"
|
class="vertical-button ma-1"
|
||||||
text
|
elevation="0"
|
||||||
fab
|
style="width: 4.2rem !important; height: 4.2rem !important"
|
||||||
class="vertical-button ma-1"
|
:disabled="item.disabled"
|
||||||
elevation="0"
|
@click="callMethodByName(item.actionName)"
|
||||||
style="width: 4.2rem !important; height: 4.2rem !important"
|
>
|
||||||
:disabled="item.disabled"
|
<v-icon v-text="item.icon" />
|
||||||
@click="callMethodByName(item.actionName)"
|
<div
|
||||||
>
|
class="mt-2"
|
||||||
<v-icon v-text="item.icon" />
|
style="font-size: 0.66rem"
|
||||||
<div
|
v-text="item.value || item.name"
|
||||||
class="mt-2"
|
/>
|
||||||
style="font-size: 0.66rem"
|
</v-btn>
|
||||||
v-text="item.value || item.name"
|
<!-- End Scrolling Div For Interactions --->
|
||||||
/>
|
<!-- <hr /> -->
|
||||||
</v-btn>
|
</div>
|
||||||
<!-- End Scrolling Div For Interactions --->
|
<!-- <v-bottom-sheet
|
||||||
<!-- <hr /> -->
|
|
||||||
</div>
|
|
||||||
<!-- <v-bottom-sheet
|
|
||||||
v-model="showMore"
|
v-model="showMore"
|
||||||
color="background"
|
color="background"
|
||||||
style="z-index: 9999999"
|
style="z-index: 9999999"
|
||||||
|
|
@ -93,106 +95,106 @@
|
||||||
</v-sheet>
|
</v-sheet>
|
||||||
</v-bottom-sheet> -->
|
</v-bottom-sheet> -->
|
||||||
|
|
||||||
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
|
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
|
||||||
<v-sheet style="padding: 1em">
|
<v-sheet style="padding: 1em">
|
||||||
<div class="scroll-y">
|
<div class="scroll-y">
|
||||||
{{ response.renderedData.description }}
|
{{ response.renderedData.description }}
|
||||||
</div>
|
</div>
|
||||||
</v-sheet>
|
</v-sheet>
|
||||||
</v-bottom-sheet> -->
|
</v-bottom-sheet> -->
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
|
|
||||||
<!-- Channel Bar -->
|
<!-- Channel Bar -->
|
||||||
<div class="channel-container" v-if="loaded">
|
<div class="channel-container" v-if="loaded">
|
||||||
<v-card
|
<v-card
|
||||||
class="channel-section background px-3 rounded-0"
|
class="channel-section background px-3 rounded-0"
|
||||||
:to="video.channelUrl"
|
:to="video.channelUrl"
|
||||||
>
|
|
||||||
<div id="details">
|
|
||||||
<div class="avatar-link mr-3">
|
|
||||||
<v-img class="avatar-thumbnail" :src="video.channelImg" />
|
|
||||||
</div>
|
|
||||||
<div class="channel-byline" v-emoji>
|
|
||||||
<div class="channel-name" v-text="video.channelName" />
|
|
||||||
<div
|
|
||||||
class="caption background--text"
|
|
||||||
:class="
|
|
||||||
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
|
||||||
"
|
|
||||||
v-text="video.channelSubs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="channel-buttons"
|
|
||||||
style="color: rgb(204, 0, 0); text-transform: uppercase"
|
|
||||||
>
|
>
|
||||||
subscribe
|
<div id="details">
|
||||||
</div>
|
<div class="avatar-link mr-3">
|
||||||
</v-card>
|
<v-img class="avatar-thumbnail" :src="video.channelImg" />
|
||||||
<v-divider />
|
</div>
|
||||||
</div>
|
<div class="channel-byline" v-emoji>
|
||||||
|
<div class="channel-name" v-text="video.channelName" />
|
||||||
<!-- Description -->
|
<div
|
||||||
<div v-if="showMore">
|
class="caption background--text"
|
||||||
<div class="scroll-y ma-4">
|
:class="
|
||||||
<slim-video-description-renderer
|
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
||||||
:render="video.renderedData.description"
|
"
|
||||||
/>
|
v-text="video.channelSubs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="channel-buttons"
|
||||||
|
style="color: rgb(204, 0, 0); text-transform: uppercase"
|
||||||
|
>
|
||||||
|
subscribe
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
<v-divider />
|
||||||
</div>
|
</div>
|
||||||
<v-divider />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Comments -->
|
<!-- Description -->
|
||||||
<div
|
<div v-if="showMore">
|
||||||
v-if="loaded && video.commentData"
|
<div class="scroll-y ma-4">
|
||||||
@click="showComments = !showComments"
|
<slim-video-description-renderer
|
||||||
>
|
:render="video.renderedData.description"
|
||||||
<v-card flat class="background comment-renderer">
|
/>
|
||||||
<v-text class="comment-count keep-spaces">
|
</div>
|
||||||
<template v-for="text in video.commentData.headerText.runs">
|
<v-divider />
|
||||||
<template v-if="text.bold">
|
</div>
|
||||||
<strong :key="text.text">{{ text.text }}</strong>
|
|
||||||
|
<!-- Comments -->
|
||||||
|
<div
|
||||||
|
v-if="loaded && video.commentData"
|
||||||
|
@click="showComments = !showComments"
|
||||||
|
>
|
||||||
|
<v-card flat class="background comment-renderer">
|
||||||
|
<v-text class="comment-count keep-spaces">
|
||||||
|
<template v-for="text in video.commentData.headerText.runs">
|
||||||
|
<template v-if="text.bold">
|
||||||
|
<strong :key="text.text">{{ text.text }}</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>{{ text.text }}</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>{{ text.text }}</template>
|
</v-text>
|
||||||
</template>
|
<v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
|
||||||
</v-text>
|
<v-icon v-else>mdi-unfold-more-horizontal</v-icon>
|
||||||
<v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
|
</v-card>
|
||||||
<v-icon v-else>mdi-unfold-more-horizontal</v-icon>
|
<v-divider />
|
||||||
</v-card>
|
</div>
|
||||||
<v-divider />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<swipeable-bottom-sheet
|
<swipeable-bottom-sheet
|
||||||
v-model="showComments"
|
|
||||||
hide-overlay
|
|
||||||
persistent
|
|
||||||
no-click-animation
|
|
||||||
attach="#content-container"
|
|
||||||
v-if="loaded && video.commentData"
|
|
||||||
>
|
|
||||||
<mainCommentRenderer
|
|
||||||
:defaultContinuation="video.commentContinuation"
|
|
||||||
:commentData="video.commentData"
|
|
||||||
v-model="showComments"
|
v-model="showComments"
|
||||||
></mainCommentRenderer>
|
hide-overlay
|
||||||
</swipeable-bottom-sheet>
|
persistent
|
||||||
|
no-click-animation
|
||||||
|
attach="#content-container"
|
||||||
|
v-if="loaded && video.commentData"
|
||||||
|
>
|
||||||
|
<mainCommentRenderer
|
||||||
|
:defaultContinuation="video.commentContinuation"
|
||||||
|
:commentData="video.commentData"
|
||||||
|
v-model="showComments"
|
||||||
|
></mainCommentRenderer>
|
||||||
|
</swipeable-bottom-sheet>
|
||||||
|
|
||||||
<!-- <swipeable-bottom-sheet
|
<!-- <swipeable-bottom-sheet
|
||||||
:v-model="showComments"
|
:v-model="showComments"
|
||||||
style="z-index: 9999999"
|
style="z-index: 9999999"
|
||||||
></swipeable-bottom-sheet> -->
|
></swipeable-bottom-sheet> -->
|
||||||
|
|
||||||
<!-- Related Videos -->
|
<!-- Related Videos -->
|
||||||
<div class="loaders" v-if="!loaded">
|
<div class="loaders" v-if="!loaded">
|
||||||
<v-skeleton-loader
|
<v-skeleton-loader
|
||||||
type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
|
type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
|
||||||
/>
|
/>
|
||||||
<vid-load-renderer :count="5" />
|
<vid-load-renderer :count="5" />
|
||||||
|
</div>
|
||||||
|
<item-section-renderer v-else :render="recommends" />
|
||||||
</div>
|
</div>
|
||||||
<item-section-renderer v-else :render="recommends" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue