etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-22 19:25:16 +00:00
Code Issues Projects Releases Wiki Activity

fix: minor graphical issues

Browse source
This commit is contained in:
Alex 2022-04-24 16:01:52 +12:00
parent bf865f8fea
commit 041cc70cf5
4 changed files with 135 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
NUXT/components/UtilRenderers/baseVideoRenderer.vue
View file

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

2
NUXT/pages/home.vue
View file

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

2
NUXT/pages/index.vue
View file

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

256
NUXT/pages/watch.vue
View file

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