mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #250 from 404-Program-not-found/main
Basic comments functionality
This commit is contained in:
Kenny
GitHub
commit
fad5fd776a
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<div id="comment">
|
||||
<a
|
||||
:href="this.$rendererUtils.getNavigationEndpoints(comment.authorEndpoint)"
|
||||
class="avatar-link pt-2"
|
||||
>
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
:src="
|
||||
comment.authorThumbnail.thumbnails[
|
||||
comment.authorThumbnail.thumbnails.length - 1
|
||||
].url
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
<v-card-text class="comment-info pt-2">
|
||||
<div
|
||||
v-for="title in comment.title.runs"
|
||||
:key="title.text"
|
||||
style="margin-top: 0.5em"
|
||||
class="vid-title"
|
||||
>
|
||||
{{ title.text }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="caption background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="parseBottom(comment)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
|
||||
.vid-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-thumbnail {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.entry {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#details {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["comment"],
|
||||
|
||||
methods: {
|
||||
parseBottom(comment) {
|
||||
const bottomText = [
|
||||
comment.subscriberCountText?.runs[0].text,
|
||||
comment.videoCountText?.runs.map((run) => run.text).join(" "),
|
||||
];
|
||||
return bottomText.join(" · ");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div class="comment-thread" v-if="commentRenderer">
|
||||
<a
|
||||
:href="
|
||||
this.$rendererUtils.getNavigationEndpoints(
|
||||
commentRenderer.authorEndpoint
|
||||
)
|
||||
"
|
||||
class="avatar-link"
|
||||
>
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
:src="
|
||||
commentRenderer.authorThumbnail.thumbnails[
|
||||
commentRenderer.authorThumbnail.thumbnails.length - 1
|
||||
].url
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
<div class="comment-content">
|
||||
<div class="comment-content--header">
|
||||
<h3 class="author-name--wrapper">
|
||||
<span class="font-weight-bold subtitle-2 pr-1 author-name" emoji>
|
||||
{{ commentRenderer.authorText.runs[0].text }}
|
||||
</span>
|
||||
</h3>
|
||||
<span
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
class="background--text subtitle-2 comment-timestamp"
|
||||
>
|
||||
{{ commentRenderer.publishedTimeText.runs[0].text }}
|
||||
</span>
|
||||
</div>
|
||||
<collapsable-text :lines="4">
|
||||
<template v-for="text in commentRenderer.contentText.runs">{{
|
||||
text.text
|
||||
}}</template>
|
||||
</collapsable-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.entry {
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
|
||||
.comment-thread {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
|
||||
.avatar-thumbnail {
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
.comment-content--header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.author-name--wrapper {
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comment-timestamp {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
|
||||
export default {
|
||||
components: { collapsableText },
|
||||
props: ["comment"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
commentRenderer: null,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.commentRenderer = this.comment?.comment?.commentRenderer;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="comment-header" v-if="boxRenderer">
|
||||
<div class="avatar-container">
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
:src="
|
||||
boxRenderer.authorThumbnail.thumbnails[
|
||||
boxRenderer.authorThumbnail.thumbnails.length - 1
|
||||
].url
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="placeholder-text background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="
|
||||
boxRenderer.placeholderText.runs[
|
||||
boxRenderer.placeholderText.runs.length - 1
|
||||
].text
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
|
||||
.avatar-thumbnail {
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: auto;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["comment"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
boxRenderer: null,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.boxRenderer = this.comment?.createRenderer?.commentSimpleboxRenderer;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<dialog-base>
|
||||
<template v-slot:header>
|
||||
<v-toolbar-title>
|
||||
<template v-for="text in commentData.headerText.runs">
|
||||
<template v-if="text.bold">
|
||||
<strong :key="text.text">{{ text.text }}</strong>
|
||||
</template>
|
||||
<template v-else>{{ text.text }}</template>
|
||||
</template>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon dark @click="$emit('changeState', false)">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<template v-for="(comment, index) in comments">
|
||||
<v-list-item :key="index">
|
||||
<component
|
||||
v-if="getComponents()[Object.keys(comment)[0]]"
|
||||
:is="Object.keys(comment)[0]"
|
||||
:comment="comment[Object.keys(comment)[0]]"
|
||||
@intersect="paginate()"
|
||||
></component>
|
||||
</v-list-item>
|
||||
<v-divider
|
||||
v-if="getComponents()[Object.keys(comment)[0]]"
|
||||
:key="index"
|
||||
></v-divider>
|
||||
</template>
|
||||
<div class="loading" v-if="loading">
|
||||
<v-sheet
|
||||
color="background"
|
||||
v-for="i in comments.length <= 0 ? 5 : 1"
|
||||
:key="i"
|
||||
>
|
||||
<v-skeleton-loader type="list-item-avatar-three-line" />
|
||||
</v-sheet>
|
||||
</div>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dialogBase from "~/components/dialogBase.vue";
|
||||
import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
|
||||
import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
|
||||
import continuationItemRenderer from "~/components/observer.vue";
|
||||
|
||||
export default {
|
||||
props: ["continuation", "commentData", "showComments"],
|
||||
|
||||
model: {
|
||||
prop: "showComments",
|
||||
event: "changeState",
|
||||
},
|
||||
|
||||
components: {
|
||||
dialogBase,
|
||||
commentsHeaderRenderer,
|
||||
commentThreadRenderer,
|
||||
continuationItemRenderer,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
loading: true,
|
||||
comments: [],
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
this.paginate();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getComponents() {
|
||||
return this.$options.components;
|
||||
},
|
||||
|
||||
paginate() {
|
||||
this.loading = true;
|
||||
const watcherIndex = this.comments.findIndex(
|
||||
(comment) => comment.continuationItemRenderer
|
||||
);
|
||||
if (watcherIndex) this.comments.splice(watcherIndex, 1);
|
||||
this.$youtube
|
||||
.getContinuation(this.continuation, "next", "web")
|
||||
.then((result) => {
|
||||
let processed;
|
||||
if (
|
||||
result.data.onResponseReceivedEndpoints.find(
|
||||
(endpoints) => endpoints.reloadContinuationItemsCommand
|
||||
)
|
||||
) {
|
||||
processed = result.data.onResponseReceivedEndpoints.map(
|
||||
(endpoints) =>
|
||||
endpoints.reloadContinuationItemsCommand.continuationItems
|
||||
);
|
||||
} else {
|
||||
processed = result.data.onResponseReceivedEndpoints.map(
|
||||
(endpoints) =>
|
||||
endpoints.appendContinuationItemsAction.continuationItems
|
||||
);
|
||||
}
|
||||
processed = processed.flat(1);
|
||||
this.comments = this.comments.concat(processed);
|
||||
this.continuation = this.findContinuation(processed);
|
||||
console.log("comments", this.comments);
|
||||
if (this.comments) this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
findContinuation(newResponses) {
|
||||
const continuationItemParent = newResponses.find(
|
||||
(item) => item.continuationItemRenderer
|
||||
);
|
||||
|
||||
const newContinuation =
|
||||
continuationItemParent.continuationItemRenderer.continuationEndpoint
|
||||
.continuationCommand.token;
|
||||
|
||||
return newContinuation;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<div class="swipeableBottomSheet" :open-state="state ? 1 : 0"></div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "~vuetify/src/styles/settings/_variables";
|
||||
$bottom-sheet-inset-width: 70% !default;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import swipeableBottomSheet from "./swipeableBottomSheet";
|
||||
|
||||
export { swipeableBottomSheet };
|
||||
export default swipeableBottomSheet;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import "./swipeableBottomSheet.sass";
|
||||
|
||||
// Extensions
|
||||
import { VDialog } from "vuetify/lib";
|
||||
|
||||
/* @vue/component */
|
||||
export default VDialog.extend({
|
||||
name: "swipeable-bottom-sheet",
|
||||
|
||||
props: {
|
||||
inset: Boolean,
|
||||
maxWidth: [String, Number],
|
||||
transition: {
|
||||
type: String,
|
||||
default: "bottom-sheet-transition",
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
...VDialog.options.computed.classes.call(this),
|
||||
"swipeable-bottom-sheet": true,
|
||||
"swipeable-bottom-sheet--inset": this.inset,
|
||||
};
|
||||
},
|
||||
contentClasses() {
|
||||
return {
|
||||
"swipeable-bottom-sheet__content": true,
|
||||
"swipeable-bottom-sheet__content--active": this.isActive,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@import './_variables.scss'
|
||||
|
||||
// Transition
|
||||
.bottom-sheet-transition
|
||||
&-enter
|
||||
transform: translateY(100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translateY(100%)
|
||||
|
||||
// Block
|
||||
|
||||
.swipeable-bottom-sheet
|
||||
|
||||
&.v-dialog
|
||||
align-self: flex-end
|
||||
border-radius: 0
|
||||
flex: 0 1 auto
|
||||
margin: 0
|
||||
overflow: visible
|
||||
|
||||
&.swipeable-bottom-sheet--inset
|
||||
max-width: $bottom-sheet-inset-width
|
||||
|
||||
@media #{map-get($display-breakpoints, 'xs-only')}
|
||||
max-width: none
|
||||
|
||||
&.v-dialog:not(.v-dialog--fullscreen)
|
||||
max-height: 100%
|
||||
height: 100%
|
||||
|
||||
.swipeable-bottom-sheet__content
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
|
||||
width: 100%
|
||||
height: 100%
|
||||
outline: none
|
||||
inset: 0
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="collapsable-text">
|
||||
<div
|
||||
class="text-content"
|
||||
ref="textContent"
|
||||
:class="expanded ? 'expanded' : 'collapsed'"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<a
|
||||
class="toggle-collapse"
|
||||
@click="expanded = !expanded"
|
||||
v-if="expandable"
|
||||
v-text="expanded ? collapseText : expandText"
|
||||
></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
lines: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
expandText: {
|
||||
type: String,
|
||||
default: "Show more",
|
||||
},
|
||||
collapseText: {
|
||||
type: String,
|
||||
default: "Show less",
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
expanded: false,
|
||||
expandable: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.checkExpandable();
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkExpandable() {
|
||||
if (
|
||||
this.$refs.textContent &&
|
||||
this.$refs.textContent.offsetHeight <
|
||||
this.$refs.textContent.scrollHeight
|
||||
) {
|
||||
this.expandable = true;
|
||||
} else {
|
||||
this.expandable = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
cssProps() {
|
||||
return {
|
||||
"--lines": this.lines,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin truncate($rows) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $rows;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.toggle-collapse {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.collapsable-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: auto;
|
||||
.text-content {
|
||||
white-space: pre-line;
|
||||
&.collapsed {
|
||||
@include truncate(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<v-card class="dialog-base">
|
||||
<div class="toolbar-container">
|
||||
<v-toolbar color="background" flat>
|
||||
<slot name="header"></slot>
|
||||
</v-toolbar>
|
||||
<v-divider></v-divider>
|
||||
</div>
|
||||
<div class="dialog-body background">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.dialog-base
|
||||
display: flex
|
||||
flex-direction: column
|
||||
height: 100%
|
||||
|
||||
.dialog-body
|
||||
overflow-y: auto
|
||||
height: 100%
|
||||
</style>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
text
|
||||
tile
|
||||
dense
|
||||
class="searchButton text-left"
|
||||
class="searchButton text-left text-none"
|
||||
@click="youtubeSearch(item)"
|
||||
>
|
||||
<v-icon class="mr-5">mdi-magnify</v-icon>
|
||||
|
|
@ -222,13 +222,13 @@ div {
|
|||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.1em;
|
||||
margin: 0 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.searchButton {
|
||||
width: 100%;
|
||||
text-transform: none !important;
|
||||
justify-content: left !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,34 @@
|
|||
<template>
|
||||
<div class="background">
|
||||
<v-btn text style="position: fixed; z-index: 69420" to="home">
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
<!-- VueTube Player V1 -->
|
||||
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
||||
<!-- Stock Player -->
|
||||
<videoPlayer
|
||||
id="player"
|
||||
ref="player"
|
||||
v-touch="{ down: () => $router.push('/home') }"
|
||||
style="position: sticky; top: 0; z-index: 42069"
|
||||
class="background"
|
||||
:vid-src="vidSrc"
|
||||
/>
|
||||
<div class="background" id="watch-body">
|
||||
<div id="player-container">
|
||||
<v-btn text style="position: fixed; z-index: 69420" to="home">
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
<!-- VueTube Player V1 -->
|
||||
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
||||
<!-- Stock Player -->
|
||||
<videoPlayer
|
||||
id="player"
|
||||
ref="player"
|
||||
v-touch="{ down: () => $router.push('/home') }"
|
||||
class="background"
|
||||
:vid-src="vidSrc"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<v-card v-if="loaded" class="background rounded-0" flat>
|
||||
<div
|
||||
v-ripple
|
||||
class="d-flex justify-space-between align-start px-3 pt-3"
|
||||
@click="showMore = !showMore"
|
||||
>
|
||||
<div
|
||||
v-bind:class="{
|
||||
'overflow-y-auto': !showComments,
|
||||
'overflow-y-hidden': showComments,
|
||||
}"
|
||||
id="content-container"
|
||||
>
|
||||
<v-card v-if="loaded" class="ml-2 mr-2 background rounded-0" flat>
|
||||
<div
|
||||
v-ripple
|
||||
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"
|
||||
|
|
@ -34,6 +41,7 @@
|
|||
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
|
||||
|
|
@ -155,9 +163,25 @@
|
|||
<v-divider />
|
||||
</div>
|
||||
|
||||
<v-card v-if="showComments">
|
||||
<v-subheader>Hello World</v-subheader>
|
||||
</v-card>
|
||||
<swipeable-bottom-sheet
|
||||
v-model="showComments"
|
||||
hide-overlay
|
||||
persistent
|
||||
no-click-animation
|
||||
attach="#content-container"
|
||||
v-if="loaded && video.commentData"
|
||||
>
|
||||
<mainCommentRenderer
|
||||
:continuation="video.commentContinuation"
|
||||
:commentData="video.commentData"
|
||||
v-model="showComments"
|
||||
></mainCommentRenderer>
|
||||
</swipeable-bottom-sheet>
|
||||
|
||||
<!-- <swipeable-bottom-sheet
|
||||
:v-model="showComments"
|
||||
style="z-index: 9999999"
|
||||
></swipeable-bottom-sheet> -->
|
||||
|
||||
<!-- Related Videos -->
|
||||
<div class="loaders" v-if="!loaded">
|
||||
|
|
@ -178,6 +202,8 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
|
|||
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
||||
import vuetubePlayer from "~/components/Player/index.vue";
|
||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||
import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
|
||||
import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -186,6 +212,8 @@ export default {
|
|||
SlimVideoDescriptionRenderer,
|
||||
vuetubePlayer,
|
||||
ItemSectionRenderer,
|
||||
SwipeableBottomSheet,
|
||||
mainCommentRenderer,
|
||||
},
|
||||
layout: "empty",
|
||||
// transition(to) { // TODO: fix layout switching
|
||||
|
|
@ -215,13 +243,15 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.mountedInit();
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
beforeDestroy() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
|
||||
methods: {
|
||||
getVideo() {
|
||||
this.loaded = false;
|
||||
|
|
@ -369,6 +399,19 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#watch-body {
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical-button span.v-btn__content {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const ytApiVal = {
|
|||
const filesystem = {
|
||||
plugins: "vuetube/plugins",
|
||||
temp: "vuetube/temp",
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
URLS: url,
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ class Innertube {
|
|||
continuation: continuation,
|
||||
};
|
||||
let url;
|
||||
switch (type) {
|
||||
switch (type.toLowerCase()) {
|
||||
case "browse":
|
||||
url = `${constants.URLS.YT_BASE_API}/browse?key=${this.key}`;
|
||||
break;
|
||||
|
|
@ -344,6 +344,19 @@ class Innertube {
|
|||
(content) => content.commentsEntryPointHeaderRenderer
|
||||
)?.commentsEntryPointHeaderRenderer,
|
||||
playbackTracking: responseInfo.playbackTracking,
|
||||
commentContinuation: responseNext.engagementPanels
|
||||
.find(
|
||||
(panel) =>
|
||||
panel.engagementPanelSectionListRenderer.panelIdentifier ==
|
||||
"engagement-panel-comments-section"
|
||||
)
|
||||
?.engagementPanelSectionListRenderer.content.sectionListRenderer.contents.find(
|
||||
(content) => content.itemSectionRenderer
|
||||
)
|
||||
?.itemSectionRenderer.contents.find(
|
||||
(content) => content.continuationItemRenderer
|
||||
)?.continuationItemRenderer.continuationEndpoint.continuationCommand
|
||||
.token,
|
||||
};
|
||||
|
||||
return vidData;
|
||||
|
|
|
|||
|
|
@ -133,15 +133,11 @@ const innertubeModule = {
|
|||
},
|
||||
|
||||
async recommendContinuation(continuation, endpoint) {
|
||||
const response = await InnertubeAPI.getContinuationsAsync(
|
||||
continuation,
|
||||
endpoint
|
||||
);
|
||||
const response = await this.getContinuation(continuation, endpoint);
|
||||
const contents =
|
||||
response.data.continuationContents.sectionListContinuation.contents;
|
||||
const final = contents.map((shelves) => {
|
||||
const video = shelves.shelfRenderer?.content?.horizontalListRenderer;
|
||||
|
||||
if (video) return video;
|
||||
});
|
||||
const continuations =
|
||||
|
|
@ -149,6 +145,26 @@ const innertubeModule = {
|
|||
return { continuations: continuations, contents: final };
|
||||
},
|
||||
|
||||
async getContinuation(continuation, endpoint, mode = "android") {
|
||||
let contextAdditional = {};
|
||||
if (mode.toLowerCase() == "web") {
|
||||
contextAdditional = {
|
||||
...contextAdditional,
|
||||
...{
|
||||
client: {
|
||||
clientName: constants.YT_API_VALUES.CLIENT_WEB,
|
||||
clientVersion: constants.YT_API_VALUES.VERSION_WEB,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return await InnertubeAPI.getContinuationsAsync(
|
||||
continuation,
|
||||
endpoint,
|
||||
contextAdditional
|
||||
);
|
||||
},
|
||||
|
||||
async search(query) {
|
||||
try {
|
||||
const response = await InnertubeAPI.getSearchAsync(query);
|
||||
|
|
|
|||
12
readme.md
12
readme.md
|
|
@ -27,15 +27,18 @@ Pronounced View Tube (<code>/ˈvjuːˌtjuːb/</code>)
|
|||
<a href="https://discord.gg/7P8KJrdd5W" alt="Discord"><img src="https://img.shields.io/discord/946587366242533377?label=Discord&style=flat&logo=discord&logoColor=white"></img></a>
|
||||
|
||||
# Features
|
||||
|
||||
- 🎨 Themes: Light, Dark, OLED, All the colors of the rainbow
|
||||
- 🖌️ Customizable UI: You can fully customize the accent color, and other parts of the UI to remove features that you don't use!
|
||||
- ⬆️ Auto Update: Be notified when an update is available & downgrade if you dislike it!
|
||||
- 👁️ Tracking Protection: No telemetry is sent from your device to YouTube
|
||||
|
||||
# Install
|
||||
|
||||
To install please visit www.vuetube.app/install
|
||||
|
||||
# Plans
|
||||
|
||||
- 🔍 Advanced Search
|
||||
- 🗞️ Locally store watch history
|
||||
- 📺 A custom video player
|
||||
|
|
@ -45,6 +48,7 @@ To install please visit www.vuetube.app/install
|
|||
- and more!
|
||||
|
||||
# Screenshots
|
||||
|
||||
View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/info/screenshots)
|
||||
|
||||
## Technologies used
|
||||
|
|
@ -52,16 +56,24 @@ View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/
|
|||
<a href="https://capacitorjs.com/solution/vue"><img src="https://cdn.discordapp.com/attachments/953538236716814356/955694368742834176/Capacitator-Dark.svg" height=40/></a> <a href="https://vuetifyjs.com/"><img src="https://cdn.discordapp.com/attachments/953538236716814356/955694368956760074/Vuetify-Dark.svg" height=40/></a> <a href="https://nuxtjs.org/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/NuxtJS-Dark.svg" height=40/></a> <a href="https://vuejs.org/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/VueJS-Dark.svg" height=40/></a> <a href="https://javascript.com/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/JavaScript.svg" height=40/></a> <a href="https://java.com/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/Java-Dark.svg" height=40/></a> <a href="https://gradle.com/"><img src="https://cdn.discordapp.com/attachments/810799100940255260/955691550560636958/Gradle.svg" height=40/></a> <a href="https://developer.apple.com/swift/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/Swift.svg" height=40/></a>
|
||||
|
||||
## Why am I doing this?
|
||||
|
||||
Well this has been thrown around on the Return Youtube Dislike discord server for quite some time, so I figured that I should probably take a crack at it!
|
||||
|
||||
Also, YouTube Vanced just shut down
|
||||
|
||||
## Want to contribute?
|
||||
|
||||
Please read our website on how to do so: https://vuetube.app/contributing
|
||||
|
||||
# Contributors
|
||||
|
||||
<a href="https://github.com/Frontesque/VueTube/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=Frontesque/VueTube" />
|
||||
</a>
|
||||
|
||||
<sub>Made with [contrib.rocks](https://contrib.rocks). </sub>
|
||||
|
||||
# Acknowledgements
|
||||
|
||||
- Emojis by the [Twemoji team](https://twemoji.twitter.com/), Licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/)
|
||||
- VueTube Logo by [@afnzmn](https://github.com/afnzmn)
|
||||
|
|
|
|||
Loading…
Reference in New Issue