mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #252 from 404-Program-not-found/main
added comments - dev branch
This commit is contained in:
commit
26463fb9ca
|
@ -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
|
text
|
||||||
tile
|
tile
|
||||||
dense
|
dense
|
||||||
class="searchButton text-left"
|
class="searchButton text-left text-none"
|
||||||
@click="youtubeSearch(item)"
|
@click="youtubeSearch(item)"
|
||||||
>
|
>
|
||||||
<v-icon class="mr-5">mdi-magnify</v-icon>
|
<v-icon class="mr-5">mdi-magnify</v-icon>
|
||||||
|
@ -222,13 +222,13 @@ div {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
vertical-align: -0.1em;
|
vertical-align: -0.1em;
|
||||||
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.searchButton {
|
.searchButton {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-transform: none !important;
|
|
||||||
justify-content: left !important;
|
justify-content: left !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="background">
|
<div class="background" id="watch-body">
|
||||||
|
<div id="player-container">
|
||||||
<v-btn text style="position: fixed; z-index: 69420" to="home">
|
<v-btn text style="position: fixed; z-index: 69420" to="home">
|
||||||
<v-icon>mdi-chevron-down</v-icon>
|
<v-icon>mdi-chevron-down</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
@ -10,13 +11,19 @@
|
||||||
id="player"
|
id="player"
|
||||||
ref="player"
|
ref="player"
|
||||||
v-touch="{ down: () => $router.push('/home') }"
|
v-touch="{ down: () => $router.push('/home') }"
|
||||||
style="position: sticky; top: 0; z-index: 42069"
|
|
||||||
class="background"
|
class="background"
|
||||||
:vid-src="vidSrc"
|
:vid-src="vidSrc"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!---->
|
<div
|
||||||
<v-card v-if="loaded" class="background rounded-0" flat>
|
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
|
<div
|
||||||
v-ripple
|
v-ripple
|
||||||
class="d-flex justify-space-between align-start px-3 pt-3"
|
class="d-flex justify-space-between align-start px-3 pt-3"
|
||||||
|
@ -34,6 +41,7 @@
|
||||||
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
|
<template
|
||||||
v-for="text in video.metadata.contents.find(
|
v-for="text in video.metadata.contents.find(
|
||||||
(content) => content.slimVideoInformationRenderer
|
(content) => content.slimVideoInformationRenderer
|
||||||
|
@ -155,9 +163,25 @@
|
||||||
<v-divider />
|
<v-divider />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-card v-if="showComments">
|
<swipeable-bottom-sheet
|
||||||
<v-subheader>Hello World</v-subheader>
|
v-model="showComments"
|
||||||
</v-card>
|
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 -->
|
<!-- Related Videos -->
|
||||||
<div class="loaders" v-if="!loaded">
|
<div class="loaders" v-if="!loaded">
|
||||||
|
@ -178,6 +202,8 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
|
||||||
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
||||||
import vuetubePlayer from "~/components/Player/index.vue";
|
import vuetubePlayer from "~/components/Player/index.vue";
|
||||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||||
|
import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
|
||||||
|
import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -186,6 +212,8 @@ export default {
|
||||||
SlimVideoDescriptionRenderer,
|
SlimVideoDescriptionRenderer,
|
||||||
vuetubePlayer,
|
vuetubePlayer,
|
||||||
ItemSectionRenderer,
|
ItemSectionRenderer,
|
||||||
|
SwipeableBottomSheet,
|
||||||
|
mainCommentRenderer,
|
||||||
},
|
},
|
||||||
layout: "empty",
|
layout: "empty",
|
||||||
// transition(to) { // TODO: fix layout switching
|
// transition(to) { // TODO: fix layout switching
|
||||||
|
@ -215,13 +243,15 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.mountedInit();
|
this.mountedInit();
|
||||||
},
|
},
|
||||||
|
|
||||||
destroyed() {
|
beforeDestroy() {
|
||||||
clearInterval(this.interval);
|
clearInterval(this.interval);
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getVideo() {
|
getVideo() {
|
||||||
this.loaded = false;
|
this.loaded = false;
|
||||||
|
@ -369,6 +399,19 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.vertical-button span.v-btn__content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
|
@ -19,7 +19,7 @@ const ytApiVal = {
|
||||||
const filesystem = {
|
const filesystem = {
|
||||||
plugins: "vuetube/plugins",
|
plugins: "vuetube/plugins",
|
||||||
temp: "vuetube/temp",
|
temp: "vuetube/temp",
|
||||||
}
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
URLS: url,
|
URLS: url,
|
||||||
|
|
|
@ -117,7 +117,7 @@ class Innertube {
|
||||||
continuation: continuation,
|
continuation: continuation,
|
||||||
};
|
};
|
||||||
let url;
|
let url;
|
||||||
switch (type) {
|
switch (type.toLowerCase()) {
|
||||||
case "browse":
|
case "browse":
|
||||||
url = `${constants.URLS.YT_BASE_API}/browse?key=${this.key}`;
|
url = `${constants.URLS.YT_BASE_API}/browse?key=${this.key}`;
|
||||||
break;
|
break;
|
||||||
|
@ -344,6 +344,19 @@ class Innertube {
|
||||||
(content) => content.commentsEntryPointHeaderRenderer
|
(content) => content.commentsEntryPointHeaderRenderer
|
||||||
)?.commentsEntryPointHeaderRenderer,
|
)?.commentsEntryPointHeaderRenderer,
|
||||||
playbackTracking: responseInfo.playbackTracking,
|
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;
|
return vidData;
|
||||||
|
|
|
@ -133,15 +133,11 @@ const innertubeModule = {
|
||||||
},
|
},
|
||||||
|
|
||||||
async recommendContinuation(continuation, endpoint) {
|
async recommendContinuation(continuation, endpoint) {
|
||||||
const response = await InnertubeAPI.getContinuationsAsync(
|
const response = await this.getContinuation(continuation, endpoint);
|
||||||
continuation,
|
|
||||||
endpoint
|
|
||||||
);
|
|
||||||
const contents =
|
const contents =
|
||||||
response.data.continuationContents.sectionListContinuation.contents;
|
response.data.continuationContents.sectionListContinuation.contents;
|
||||||
const final = contents.map((shelves) => {
|
const final = contents.map((shelves) => {
|
||||||
const video = shelves.shelfRenderer?.content?.horizontalListRenderer;
|
const video = shelves.shelfRenderer?.content?.horizontalListRenderer;
|
||||||
|
|
||||||
if (video) return video;
|
if (video) return video;
|
||||||
});
|
});
|
||||||
const continuations =
|
const continuations =
|
||||||
|
@ -149,6 +145,26 @@ const innertubeModule = {
|
||||||
return { continuations: continuations, contents: final };
|
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) {
|
async search(query) {
|
||||||
try {
|
try {
|
||||||
const response = await InnertubeAPI.getSearchAsync(query);
|
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>
|
<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
|
# Features
|
||||||
|
|
||||||
- 🎨 Themes: Light, Dark, OLED, All the colors of the rainbow
|
- 🎨 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!
|
- 🖌️ 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!
|
- ⬆️ 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
|
- 👁️ Tracking Protection: No telemetry is sent from your device to YouTube
|
||||||
|
|
||||||
# Install
|
# Install
|
||||||
|
|
||||||
To install please visit www.vuetube.app/install
|
To install please visit www.vuetube.app/install
|
||||||
|
|
||||||
# Plans
|
# Plans
|
||||||
|
|
||||||
- 🔍 Advanced Search
|
- 🔍 Advanced Search
|
||||||
- 🗞️ Locally store watch history
|
- 🗞️ Locally store watch history
|
||||||
- 📺 A custom video player
|
- 📺 A custom video player
|
||||||
|
@ -45,6 +48,7 @@ To install please visit www.vuetube.app/install
|
||||||
- and more!
|
- and more!
|
||||||
|
|
||||||
# Screenshots
|
# Screenshots
|
||||||
|
|
||||||
View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/info/screenshots)
|
View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/info/screenshots)
|
||||||
|
|
||||||
## Technologies used
|
## 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>
|
<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?
|
## 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!
|
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
|
Also, YouTube Vanced just shut down
|
||||||
|
|
||||||
## Want to contribute?
|
## Want to contribute?
|
||||||
|
|
||||||
Please read our website on how to do so: https://vuetube.app/contributing
|
Please read our website on how to do so: https://vuetube.app/contributing
|
||||||
|
|
||||||
# Contributors
|
# Contributors
|
||||||
|
|
||||||
<a href="https://github.com/Frontesque/VueTube/graphs/contributors">
|
<a href="https://github.com/Frontesque/VueTube/graphs/contributors">
|
||||||
<img src="https://contrib.rocks/image?repo=Frontesque/VueTube" />
|
<img src="https://contrib.rocks/image?repo=Frontesque/VueTube" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<sub>Made with [contrib.rocks](https://contrib.rocks). </sub>
|
<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