mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #263 from 404-Program-not-found/main
Bug fixes and Minor feature Additions
This commit is contained in:
Kenny
GitHub
commit
32f556b40c
|
|
@ -21,7 +21,7 @@
|
|||
v-if="getComponents()[Object.keys(comment)[0]]"
|
||||
:is="Object.keys(comment)[0]"
|
||||
:comment="comment[Object.keys(comment)[0]]"
|
||||
@intersect="paginate()"
|
||||
@intersect="paginate"
|
||||
></component>
|
||||
</v-list-item>
|
||||
<v-divider
|
||||
|
|
|
|||
|
|
@ -57,6 +57,10 @@
|
|||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.videoRuntimeFloat.style-UPCOMING {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.vid-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="observer" />
|
||||
<div class="observer" style="height: 1px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -9,7 +9,7 @@ export default {
|
|||
observer: null,
|
||||
}),
|
||||
mounted() {
|
||||
const options = this.options || {};
|
||||
const options = this.options || { threshold: 0.0 };
|
||||
this.observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry && entry.isIntersecting) {
|
||||
this.$emit("intersect");
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
v-for="(item, index) in response"
|
||||
:key="index"
|
||||
class="px-0"
|
||||
v-emoji
|
||||
>
|
||||
<v-btn
|
||||
text
|
||||
|
|
@ -41,6 +40,7 @@
|
|||
dense
|
||||
class="searchButton text-left text-none"
|
||||
@click="youtubeSearch(item)"
|
||||
v-emoji
|
||||
>
|
||||
<v-icon class="mr-5">mdi-magnify</v-icon>
|
||||
{{ item[0] || item.text }}
|
||||
|
|
@ -94,18 +94,21 @@ export default {
|
|||
|
||||
mounted() {
|
||||
//--- Back Button Listener ---//
|
||||
CapacitorApp.addListener("backButton", ({ canGoBack }) => {
|
||||
//--- Back Closes Search ---//
|
||||
if (this.search) {
|
||||
this.search = false;
|
||||
this.backHandler = CapacitorApp.addListener(
|
||||
"backButton",
|
||||
({ canGoBack }) => {
|
||||
//--- Back Closes Search ---//
|
||||
if (this.search) {
|
||||
this.search = false;
|
||||
|
||||
//--- Back Goes Back ---//
|
||||
} else if (!canGoBack) {
|
||||
CapacitorApp.exitApp();
|
||||
} else {
|
||||
window.history.back();
|
||||
//--- Back Goes Back ---//
|
||||
} else if (!canGoBack) {
|
||||
CapacitorApp.exitApp();
|
||||
} else {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
// --- External URL Handling --- //
|
||||
CapacitorApp.addListener("appUrlOpen", (event) => {
|
||||
|
|
@ -122,6 +125,10 @@ export default {
|
|||
document.head.appendChild(plugin);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.backHandler) this.backHandler.remove();
|
||||
},
|
||||
|
||||
methods: {
|
||||
textChanged(text) {
|
||||
if (text.length <= 0) {
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
Redirecting...
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: "empty",
|
||||
mounted() {
|
||||
|
||||
this.$router.push(
|
||||
"/watch?v="
|
||||
+ $nuxt.$route.params.redirect_
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
<div v-for="(section, index) in recommends" :key="index">
|
||||
<horizontal-list-renderer :render="section.contents[0]" />
|
||||
</div>
|
||||
<vid-load-renderer v-if="!loading" :count="1" />
|
||||
<observer @intersect="paginate" />
|
||||
<vid-load-renderer v-if="loading" :count="1" />
|
||||
<observer @intersect="paginate" v-else-if="recommends.length > 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -40,8 +40,12 @@ export default {
|
|||
|
||||
methods: {
|
||||
paginate() {
|
||||
if (this.recommends) {
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
const continuationCode = this.recommends[
|
||||
this.recommends.length - 1
|
||||
].continuations.find((element) => element.nextContinuationData)
|
||||
?.nextContinuationData.continuation;
|
||||
if (continuationCode) {
|
||||
this.$youtube
|
||||
.recommendContinuation(
|
||||
this.recommends[this.recommends.length - 1].continuations.find(
|
||||
|
|
@ -53,6 +57,8 @@ export default {
|
|||
this.loading = false;
|
||||
this.recommends.push(result);
|
||||
});
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export default {
|
|||
await this.$youtube.getAPI();
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -34,54 +34,56 @@
|
|||
class="d-flex justify-space-between align-start px-3 pt-3"
|
||||
@click="showMore = !showMore"
|
||||
>
|
||||
<div class="d-flex flex-column">
|
||||
<v-card-title
|
||||
class="pa-0"
|
||||
style="font-size: 0.95rem; line-height: 1.15rem"
|
||||
v-text="video.title"
|
||||
v-emoji
|
||||
/>
|
||||
<v-card-text
|
||||
style="font-size: 0.75rem"
|
||||
class="background--text pa-0"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
<div style="margin-bottom: 1rem">
|
||||
<template
|
||||
v-for="text in video.metadata.contents.find(
|
||||
(content) => content.slimVideoInformationRenderer
|
||||
).slimVideoInformationRenderer.collapsedSubtitle.runs"
|
||||
>{{ text.text }}
|
||||
</template>
|
||||
<div class="d-flex flex-column">
|
||||
<v-card-title
|
||||
class="pa-0"
|
||||
style="font-size: 0.95rem; line-height: 1.15rem"
|
||||
v-text="video.title"
|
||||
v-emoji
|
||||
/>
|
||||
<v-card-text
|
||||
style="font-size: 0.75rem"
|
||||
class="background--text pa-0"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
||||
"
|
||||
>
|
||||
<div style="margin-bottom: 1rem">
|
||||
<template
|
||||
v-for="text in video.metadata.contents.find(
|
||||
(content) => content.slimVideoInformationRenderer
|
||||
).slimVideoInformationRenderer.collapsedSubtitle.runs"
|
||||
>{{ text.text }}
|
||||
</template>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</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>
|
||||
<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 class="d-flex">
|
||||
<v-btn
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
text
|
||||
fab
|
||||
class="vertical-button ma-1"
|
||||
elevation="0"
|
||||
style="width: 4.2rem !important; height: 4.2rem !important"
|
||||
:disabled="item.disabled"
|
||||
@click="callMethodByName(item.actionName)"
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
<div
|
||||
class="mt-2"
|
||||
style="font-size: 0.66rem"
|
||||
v-text="item.value || item.name"
|
||||
/>
|
||||
</v-btn>
|
||||
<!-- End Scrolling Div For Interactions --->
|
||||
<!-- <hr /> -->
|
||||
</div>
|
||||
<!-- <v-bottom-sheet
|
||||
<div class="d-flex">
|
||||
<v-btn
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
text
|
||||
fab
|
||||
class="vertical-button ma-1"
|
||||
elevation="0"
|
||||
style="width: 4.2rem !important; height: 4.2rem !important"
|
||||
:disabled="item.disabled"
|
||||
@click="callMethodByName(item.actionName)"
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
<div
|
||||
class="mt-2"
|
||||
style="font-size: 0.66rem"
|
||||
v-text="item.value || item.name"
|
||||
/>
|
||||
</v-btn>
|
||||
<!-- End Scrolling Div For Interactions --->
|
||||
<!-- <hr /> -->
|
||||
</div>
|
||||
<!-- <v-bottom-sheet
|
||||
v-model="showMore"
|
||||
color="background"
|
||||
style="z-index: 9999999"
|
||||
|
|
@ -98,106 +100,106 @@
|
|||
</v-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">
|
||||
<div class="scroll-y">
|
||||
{{ response.renderedData.description }}
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-bottom-sheet> -->
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</v-card>
|
||||
<v-divider />
|
||||
|
||||
<!-- Channel Bar -->
|
||||
<div class="channel-container" v-if="loaded">
|
||||
<v-card
|
||||
class="channel-section background px-3 rounded-0"
|
||||
: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"
|
||||
<!-- Channel Bar -->
|
||||
<div class="channel-container" v-if="loaded">
|
||||
<v-card
|
||||
class="channel-section background px-3 rounded-0"
|
||||
:to="video.channelUrl"
|
||||
>
|
||||
subscribe
|
||||
</div>
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div v-if="showMore">
|
||||
<div class="scroll-y ma-4">
|
||||
<slim-video-description-renderer
|
||||
:render="video.renderedData.description"
|
||||
/>
|
||||
<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>
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</div>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Description -->
|
||||
<div v-if="showMore">
|
||||
<div class="scroll-y ma-4">
|
||||
<slim-video-description-renderer
|
||||
:render="video.renderedData.description"
|
||||
/>
|
||||
</div>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<!-- 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 v-else>{{ text.text }}</template>
|
||||
</template>
|
||||
</v-text>
|
||||
<v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
|
||||
<v-icon v-else>mdi-unfold-more-horizontal</v-icon>
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</div>
|
||||
</v-text>
|
||||
<v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
|
||||
<v-icon v-else>mdi-unfold-more-horizontal</v-icon>
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<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"
|
||||
<swipeable-bottom-sheet
|
||||
v-model="showComments"
|
||||
></mainCommentRenderer>
|
||||
</swipeable-bottom-sheet>
|
||||
hide-overlay
|
||||
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"
|
||||
style="z-index: 9999999"
|
||||
></swipeable-bottom-sheet> -->
|
||||
|
||||
<!-- Related Videos -->
|
||||
<div class="loaders" v-if="!loaded">
|
||||
<v-skeleton-loader
|
||||
type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
|
||||
/>
|
||||
<vid-load-renderer :count="5" />
|
||||
<!-- Related Videos -->
|
||||
<div class="loaders" v-if="!loaded">
|
||||
<v-skeleton-loader
|
||||
type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
|
||||
/>
|
||||
<vid-load-renderer :count="5" />
|
||||
</div>
|
||||
<item-section-renderer v-else :render="recommends" />
|
||||
</div>
|
||||
<item-section-renderer v-else :render="recommends" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -212,6 +214,8 @@ import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
|||
import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
|
||||
import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
|
||||
|
||||
import { App as CapacitorApp } from "@capacitor/app";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ShelfRenderer,
|
||||
|
|
@ -253,10 +257,29 @@ export default {
|
|||
|
||||
mounted() {
|
||||
this.mountedInit();
|
||||
|
||||
this.backHandler = CapacitorApp.addListener(
|
||||
"backButton",
|
||||
({ canGoBack }) => {
|
||||
//--- Back Closes Search ---//
|
||||
if (this.showComments) {
|
||||
this.showComments = false;
|
||||
|
||||
//--- Back Goes Back ---//
|
||||
} else if (!canGoBack) {
|
||||
this.$router.replace(
|
||||
`/${localStorage.getItem("startPage") || "home"}`
|
||||
);
|
||||
} else {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
clearInterval(this.interval);
|
||||
if (this.backHandler) this.backHandler.remove();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue