Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-02-03 09:29:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge master

Browse Source
This commit is contained in:
Bnyro
2022-11-03 14:45:18 +01:00
parent 11357859b2 01fb40463d
commit 7994e358fb
37 changed files with 925 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/ChannelItem.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div>
<router-link :to="props.item.url">
<div class="relative">
<img class="w-full" :src="props.item.thumbnail" loading="lazy" />
</div>
<p>
<span v-text="props.item.name" />
<font-awesome-icon class="ml-1.5" v-if="props.item.verified" icon="check" />
</p>
</router-link>
<p v-if="props.item.description" v-text="props.item.description" />
<router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
<p>
<span v-text="props.item.uploader" />
<font-awesome-icon class="ml-1.5" v-if="props.item.uploaderVerified" icon="check" />
</p>
</router-link>
<a v-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
<template v-if="props.item.videos >= 0">
<br v-if="props.item.uploaderName" />
<strong v-text="`${props.item.videos} ${$t('video.videos')}`" />
</template>
<br />
</div>
</template>
<script setup>
const props = defineProps({
item: Object,
});
</script>

122
src/components/ChannelPage.vue
View File

@@ -35,13 +35,25 @@
<font-awesome-icon icon="rss" />
</a>
<div class="flex mt-4 mb-2">
<button
v-for="(tab, index) in tabs"
:key="tab.name"
class="btn mr-2"
@click="loadTab(index)"
:class="{ active: selectedTab == index }"
>
<span v-text="tab.translatedName"></span>
</button>
</div>
<hr />
<div class="video-grid">
<VideoItem
v-for="video in channel.relatedStreams"
:key="video.url"
:video="video"
<ContentItem
v-for="item in contentItems"
:key="item.url"
:item="item"
height="94"
width="168"
hide-channel
@@ -52,17 +64,20 @@
<script>
import ErrorHandler from "./ErrorHandler.vue";
import VideoItem from "./VideoItem.vue";
import ContentItem from "./ContentItem.vue";
export default {
components: {
ErrorHandler,
VideoItem,
ContentItem,
},
data() {
return {
channel: null,
subscribed: false,
tabs: [],
selectedTab: 0,
contentItems: [],
};
},
mounted() {
@@ -111,25 +126,58 @@ export default {
.then(() => {
if (!this.channel.error) {
document.title = this.channel.name + " - Piped";
this.contentItems = this.channel.relatedStreams;
this.fetchSubscribedStatus();
this.updateWatched(this.channel.relatedStreams);
this.tabs.push({
translatedName: this.$t("video.videos"),
});
for (let i = 0; i < this.channel.tabs.length; i++) {
let tab = this.channel.tabs[i];
tab.translatedName = this.getTranslatedTabName(tab.name);
this.tabs.push(tab);
}
}
});
},
handleScroll() {
if (this.loading || !this.channel || !this.channel.nextpage) return;
if (
this.loading ||
!this.channel ||
!this.channel.nextpage ||
(this.selectedTab != 0 && !this.tabs[this.selectedTab].tabNextPage)
)
return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
this.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
nextpage: this.channel.nextpage,
}).then(json => {
this.channel.nextpage = json.nextpage;
this.loading = false;
this.updateWatched(json.relatedStreams);
json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
});
if (this.selectedTab == 0) {
this.fetchChannelNextPage();
} else {
this.fetchChannelTabNextPage();
}
}
},
fetchChannelNextPage() {
this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
nextpage: this.channel.nextpage,
}).then(json => {
this.channel.nextpage = json.nextpage;
this.loading = false;
this.updateWatched(json.relatedStreams);
json.relatedStreams.map(stream => this.contentItems.push(stream));
});
},
fetchChannelTabNextPage() {
this.fetchJson(this.apiUrl() + "/channels/tabs", {
data: this.tabs[this.selectedTab].data,
nextpage: this.tabs[this.selectedTab].tabNextPage,
}).then(json => {
this.tabs[this.selectedTab].tabNextPage = json.nextpage;
this.loading = false;
json.content.map(item => this.contentItems.push(item));
this.tabs[this.selectedTab].content = this.contentItems;
});
},
subscribeHandler() {
if (this.authenticated) {
this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
@@ -147,6 +195,50 @@ export default {
}
this.subscribed = !this.subscribed;
},
getTranslatedTabName(tabName) {
let translatedTabName = tabName;
switch (tabName) {
case "Livestreams":
translatedTabName = this.$t("titles.livestreams");
break;
case "Playlists":
translatedTabName = this.$t("titles.playlists");
break;
case "Channels":
translatedTabName = this.$t("titles.channels");
break;
case "Shorts":
translatedTabName = this.$t("video.shorts");
break;
default:
console.error(`Tab name "${tabName}" is not translated yet!`);
break;
}
return translatedTabName;
},
loadTab(index) {
this.selectedTab = index;
if (index == 0) {
this.contentItems = this.channel.relatedStreams;
return;
}
if (this.tabs[index].content) {
this.contentItems = this.tabs[index].content;
return;
}
this.fetchJson(this.apiUrl() + "/channels/tabs", {
data: this.tabs[index].data,
}).then(tab => {
this.contentItems = this.tabs[index].content = tab.content;
this.tabs[this.selectedTab].tabNextPage = tab.nextpage;
});
},
},
};
</script>
<style>
.active {
border: 0.1rem outset red;
}
</style>

5
src/components/CommentItem.vue
View File

@@ -25,6 +25,11 @@
</div>
</div>
<div class="whitespace-pre-wrap" v-html="urlify(comment.commentText)" />
<div class="comment-footer mt-1 flex items-center">
<div class="i-fa-solid:thumbs-up" />
<span class="ml-1" v-text="numberFormat(comment.likeCount)" />
<font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart" />
</div>
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
<div @click="loadReplies" class="cursor-pointer">
<a v-text="`${$t('actions.reply_count', comment.replyCount)}`" />

35
src/components/ContentItem.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<component :is="compName" :item="item" />
</template>
<script setup>
import { defineAsyncComponent } from "vue";
const props = defineProps({
item: Object,
});
const VideoItem = defineAsyncComponent(() => import("./VideoItem.vue"));
const PlaylistItem = defineAsyncComponent(() => import("./PlaylistItem.vue"));
const ChannelItem = defineAsyncComponent(() => import("./ChannelItem.vue"));
var compName;
switch (props.item?.type) {
case "stream":
compName = VideoItem;
break;
case "playlist":
compName = PlaylistItem;
break;
case "channel":
compName = ChannelItem;
break;
default:
console.error("Unexpected item type: " + props.item.type);
}
defineExpose({
compName,
});
</script>

2
src/components/FeedPage.vue
View File

@@ -16,7 +16,7 @@
<hr />
<div class="video-grid">
<VideoItem :is-feed="true" v-for="video in videos" :key="video.url" :video="video" />
<VideoItem :is-feed="true" v-for="video in videos" :key="video.url" :item="video" />
</div>
</template>

2
src/components/HistoryPage.vue
View File

@@ -14,7 +14,7 @@
<hr />
<div class="video-grid">
<VideoItem v-for="video in videos" :key="video.url" :video="video" />
<VideoItem v-for="video in videos" :key="video.url" :item="video" />
</div>
<br />

34
src/components/PlaylistItem.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div>
<router-link :to="props.item.url">
<div class="relative">
<img class="w-full" :src="props.item.thumbnail" loading="lazy" />
</div>
<p>
<span v-text="props.item.name" />
<font-awesome-icon class="ml-1.5" v-if="props.item.verified" icon="check" />
</p>
</router-link>
<p v-if="props.item.description" v-text="props.item.description" />
<router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
<p>
<span v-text="props.item.uploader" />
<font-awesome-icon class="ml-1.5" v-if="props.item.uploaderVerified" icon="check" />
</p>
</router-link>
<a v-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
<template v-if="props.item.videos >= 0">
<br v-if="props.item.uploaderName" />
<strong v-text="`${props.item.videos} ${$t('video.videos')}`" />
</template>
<br />
</div>
</template>
<script setup>
const props = defineProps({
item: Object,
});
</script>

2
src/components/PlaylistPage.vue
View File

@@ -32,7 +32,7 @@
<VideoItem
v-for="(video, index) in playlist.relatedStreams"
:key="video.url"
:video="video"
:item="video"
:index="index"
:playlist-id="$route.query.list"
:admin="admin"

2
src/components/PlaylistVideos.vue
View File

@@ -3,7 +3,7 @@
<VideoItem
v-for="(related, index) in playlist.relatedStreams"
:key="related.url"
:video="related"
:item="related"
:index="index"
:playlist-id="playlistId"
height="94"

14
src/components/PreferencesPage.vue
View File

@@ -162,11 +162,11 @@
@change="onChange($event)"
/>
</label>
<label class="pref" for="chkShowComments">
<strong v-t="'actions.show_comments'" />
<label class="pref" for="chkHideComments">
<strong v-t="'actions.minimize_comments_default'" />
<input
id="chkShowComments"
v-model="showComments"
id="chkHideComments"
v-model="hideComments"
class="checkbox"
type="checkbox"
@change="onChange($event)"
@@ -416,7 +416,7 @@ export default {
countryMap: CountryMap,
countrySelected: "US",
defaultHomepage: "trending",
showComments: true,
minimizeComments: false,
minimizeDescription: false,
minimizeRecommendations: false,
watchHistory: false,
@@ -552,7 +552,7 @@ export default {
this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
this.countrySelected = this.getPreferenceString("region", "US");
this.defaultHomepage = this.getPreferenceString("homepage", "trending");
this.showComments = this.getPreferenceBoolean("comments", true);
this.minimizeComments = this.getPreferenceBoolean("minimizeComments", false);
this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
this.minimizeRecommendations = this.getPreferenceBoolean("minimizeRecommendations", false);
this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
@@ -611,7 +611,7 @@ export default {
localStorage.setItem("bufferGoal", this.bufferingGoal);
localStorage.setItem("region", this.countrySelected);
localStorage.setItem("homepage", this.defaultHomepage);
localStorage.setItem("comments", this.showComments);
localStorage.setItem("minimizeComments", this.minimizeComments);
localStorage.setItem("minimizeDescription", this.minimizeDescription);
localStorage.setItem("minimizeRecommendations", this.minimizeRecommendations);
localStorage.setItem("watchHistory", this.watchHistory);

35
src/components/SearchResults.vue
View File

@@ -20,43 +20,17 @@
<div v-if="results" class="video-grid">
<template v-for="result in results.items" :key="result.url">
<VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
<div v-if="!shouldUseVideoItem(result)">
<router-link :to="result.url">
<div class="relative">
<img class="w-full" :src="result.thumbnail" loading="lazy" />
</div>
<p>
<span v-text="result.name" />
<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check" />
</p>
</router-link>
<p v-if="result.description" v-text="result.description" />
<router-link v-if="result.uploaderUrl" class="link" :to="result.uploaderUrl">
<p>
<span v-text="result.uploader" />
<font-awesome-icon class="ml-1.5" v-if="result.uploaderVerified" icon="check" />
</p>
</router-link>
<a v-if="result.uploaderName" class="link" v-text="result.uploaderName" />
<template v-if="result.videos >= 0">
<br v-if="result.uploaderName" />
<strong v-text="`${result.videos} ${$t('video.videos')}`" />
</template>
<br />
</div>
<ContentItem :item="result" height="94" width="168" />
</template>
</div>
</template>
<script>
import VideoItem from "./VideoItem.vue";
import ContentItem from "./ContentItem.vue";
export default {
components: {
VideoItem,
ContentItem,
},
data() {
return {
@@ -124,9 +98,6 @@ export default {
});
}
},
shouldUseVideoItem(item) {
return item.title;
},
handleRedirect() {
const query = this.$route.query.search_query;
const url =

10
src/components/ShareModal.vue
View File

@@ -3,11 +3,11 @@
<h2 v-t="'actions.share'" />
<div class="flex justify-between mt-4">
<label v-t="'actions.with_timecode'" for="withTimeCode" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
</div>
<div class="flex justify-between mt-2">
<label v-t="'actions.piped_link'" />
<input type="checkbox" v-model="pipedLink" />
<input type="checkbox" v-model="pipedLink" @change="onChange" />
</div>
<div class="flex justify-between mt-2">
<label v-t="'actions.time_code'" />
@@ -47,6 +47,8 @@ export default {
},
mounted() {
this.timeStamp = parseInt(this.currentTime);
this.withTimeCode = this.getPreferenceBoolean("shareWithTimeCode", true);
this.pipedLink = this.getPreferenceBoolean("shareAsPipedLink", true);
},
methods: {
followLink() {
@@ -63,6 +65,10 @@ export default {
alert(this.$t("info.cannot_copy"));
}
},
onChange() {
this.setPreference("shareWithTimeCode", this.withTimeCode);
this.setPreference("shareAsPipedLink", this.pipedLink);
},
},
computed: {
generatedLink() {

2
src/components/TrendingPage.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="video-grid">
<VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
<VideoItem v-for="video in videos" :key="video.url" :item="video" height="118" width="210" />
</div>
</template>

71
src/components/VideoItem.vue
View File

@@ -4,7 +4,7 @@
:to="{
path: '/watch',
query: {
v: video.url.substr(-11),
v: item.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
},
@@ -12,36 +12,36 @@
>
<img
class="w-full"
:src="video.thumbnail"
:alt="video.title"
:class="{ 'shorts-img': short }"
:src="item.thumbnail"
:alt="item.title"
:class="{ 'shorts-img': item.isShort }"
loading="lazy"
/>
<div class="relative text-sm">
<span
class="thumbnail-overlay thumbnail-right"
v-if="video.duration > 0"
v-text="timeFormat(video.duration)"
v-if="item.duration > 0"
v-text="timeFormat(item.duration)"
/>
<!-- shorts thumbnail -->
<span class="thumbnail-overlay thumbnail-left" v-if="short" v-t="'video.shorts'" />
<span class="thumbnail-overlay thumbnail-left" v-if="item.isShort" v-t="'video.shorts'" />
<span
class="thumbnail-overlay thumbnail-right"
v-else-if="video.duration >= 60"
v-text="timeFormat(video.duration)"
v-else-if="item.duration >= 0"
v-text="timeFormat(item.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right live-badge" tag="div">
<font-awesome-icon :icon="['fas', 'broadcast-tower']" />
</i18n-t>
<span v-if="video.watched" class="thumbnail-overlay thumbnail-left" v-t="'video.watched'" />
<span v-if="item.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" />
</div>
<div>
<p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
class="my-2 overflow-hidden flex link"
:title="video.title"
v-text="video.title"
:title="item.title"
v-text="item.title"
/>
</div>
</router-link>
@@ -51,14 +51,14 @@
:to="{
path: '/watch',
query: {
v: video.url.substr(-11),
v: item.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
listen: '1',
},
}"
:aria-label="'Listen to ' + video.title"
:title="'Listen to ' + video.title"
:aria-label="'Listen to ' + item.title"
:title="'Listen to ' + item.title"
>
<font-awesome-icon icon="headphones" />
</router-link>
@@ -69,20 +69,20 @@
v-if="admin"
:title="$t('actions.remove_from_playlist')"
ref="removeButton"
@click="removeVideo(video.url.substr(-11))"
@click="removeVideo(item.url.substr(-11))"
>
<font-awesome-icon icon="circle-minus" />
</button>
</div>
<div class="flex">
<router-link :to="video.uploaderUrl">
<router-link :to="item.uploaderUrl">
<img
v-if="video.uploaderAvatar"
:src="video.uploaderAvatar"
v-if="item.uploaderAvatar"
:src="item.uploaderAvatar"
loading="lazy"
:alt="video.uploaderName"
class="mr-0.5 mt-0.5 w-32px h-32px"
:alt="item.uploaderName"
class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
width="68"
height="68"
/>
@@ -90,22 +90,22 @@
<div class="w-[calc(100%-32px-1rem)]">
<router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
class="link-secondary overflow-hidden block"
:to="video.uploaderUrl"
:title="video.uploaderName"
:to="item.uploaderUrl"
:title="item.uploaderName"
>
<span v-text="video.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
<span v-text="item.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
</router-link>
<strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
<span v-if="video.views >= 0">
<strong v-if="item.views >= 0 || item.uploadedDate" class="text-sm">
<span v-if="item.views >= 0">
<font-awesome-icon icon="eye" />
<span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" />
<span class="pl-0.5" v-text="`${numberFormat(item.views)} •`" />
</span>
<span v-if="video.uploaded > 0" class="pl-0.5" v-text="timeAgo(video.uploaded)" />
<span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
<span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
<span v-else-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" />
</strong>
</div>
</div>
@@ -127,7 +127,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
export default {
props: {
video: {
item: {
type: Object,
default: () => {
return {};
@@ -177,7 +177,7 @@ export default {
if (!this.isFeed || !this.getPreferenceBoolean("hideWatched", false)) return;
const objectStore = window.db.transaction("watch_history", "readonly").objectStore("watch_history");
const request = objectStore.get(this.video.url.substr(-11));
const request = objectStore.get(this.item.url.substr(-11));
request.onsuccess = event => {
const video = event.target.result;
if (video && (video.currentTime ?? 0) > video.duration * 0.9) {
@@ -187,11 +187,6 @@ export default {
};
},
},
computed: {
short() {
return this.video.duration > 0 && this.video.duration <= 61;
},
},
components: { PlaylistAddModal },
};
</script>

40
src/components/WatchVideo.vue
View File

@@ -47,11 +47,11 @@
<!-- Likes/dilikes -->
<div class="pp-likes flex children:mr-2">
<template v-if="video.likes >= 0">
<div class="flex">
<div class="flex items-center">
<div class="i-fa-solid:thumbs-up" />
<strong class="ml-1" v-text="addCommas(video.likes)" />
</div>
<div class="flex">
<div class="flex items-center">
<div class="i-fa-solid:thumbs-down" />
<strong class="ml-1" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
</div>
@@ -154,16 +154,22 @@
</div>
<div class="grid pp-rec-vids">
<div v-if="!commentsEnabled" class="">
<div class="xl:col-span-4 sm:col-span-3">
<p class="text-center mt-8" v-t="'comment.user_disabled'"></p>
<button
class="btn mb-2"
@click="toggleComments"
v-t="`actions.${showComments ? 'minimize_comments' : 'show_comments'}`"
/>
</div>
<div v-else-if="!comments" class="">
<div v-if="!showComments" class="w-full"></div>
<div v-if="!comments" class="">
<p class="text-center mt-8" v-t="'comment.loading'"></p>
</div>
<div v-else-if="comments.disabled" class="">
<p class="text-center mt-8" v-t="'comment.disabled'"></p>
</div>
<div v-else ref="comments" class="">
<div v-else ref="comments" v-show="showComments" class="">
<CommentItem
v-for="comment in comments.comments"
:key="comment.commentId"
@@ -180,11 +186,12 @@
:playlist="playlist"
:selected-index="index"
/>
<hr v-show="showRecs" />
<div v-show="showRecs" class="pp-show-recs">
<VideoItem
<ContentItem
v-for="related in video.relatedStreams"
:key="related.url"
:video="related"
:item="related"
height="94"
width="168"
/>
@@ -196,7 +203,7 @@
<script>
import VideoPlayer from "./VideoPlayer.vue";
import VideoItem from "./VideoItem.vue";
import ContentItem from "./ContentItem.vue";
import ErrorHandler from "./ErrorHandler.vue";
import CommentItem from "./CommentItem.vue";
import ChaptersBar from "./ChaptersBar.vue";
@@ -208,7 +215,7 @@ export default {
name: "App",
components: {
VideoPlayer,
VideoItem,
ContentItem,
ErrorHandler,
CommentItem,
ChaptersBar,
@@ -228,6 +235,7 @@ export default {
sponsors: null,
selectedAutoLoop: false,
selectedAutoPlay: null,
showComments: true,
showDesc: true,
showRecs: true,
showChapters: true,
@@ -262,9 +270,6 @@ export default {
year: "numeric",
});
},
commentsEnabled() {
return this.getPreferenceBoolean("comments", true);
},
},
mounted() {
// check screen size
@@ -312,7 +317,7 @@ export default {
this.index = Number(this.$route.query.index);
this.getPlaylistData();
this.getSponsors();
if (!this.isEmbed && this.commentsEnabled) this.getComments();
if (!this.isEmbed && this.showComments) this.getComments();
window.addEventListener("resize", () => {
this.smallView = this.smallViewQuery.matches;
});
@@ -320,6 +325,7 @@ export default {
activated() {
this.active = true;
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
this.showComments = !this.getPreferenceBoolean("minimizeComments", false);
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
if (this.video.duration) {
@@ -350,6 +356,12 @@ export default {
'"]',
});
},
toggleComments() {
this.showComments = !this.showComments;
if (this.showComments && this.comments === null) {
this.fetchComments();
}
},
fetchComments() {
return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
},
@@ -462,7 +474,7 @@ export default {
},
handleScroll() {
if (this.loading || !this.comments || !this.comments.nextpage) return;
if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
if (window.innerHeight + window.scrollY >= this.$refs.comments?.offsetHeight - window.innerHeight) {
this.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
nextpage: this.comments.nextpage,