TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Comments infinite scroll

Browse source
This commit is contained in:
Karlis Cudars 2021-10-31 02:07:44 +03:00
parent e6d1144b3e
commit 2541dcc420
1 changed files with 23 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/WatchVideo.vue
View file

@ -14,7 +14,7 @@
<div v-if="video && !isEmbed" class="uk-container uk-container-xlarge"> <div v-if="video && !isEmbed" class="uk-container uk-container-xlarge">
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" /> <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
<div v-show="!video.error"> <div v-show="!video.error" id="video-and-info">
<Player <Player
ref="videoPlayer" ref="videoPlayer"
:video="video" :video="video"
@ -121,15 +121,17 @@
<div uk-grid> <div uk-grid>
<div v-if="comments" ref="comments" class="uk-width-4-5@xl uk-width-3-4@s uk-width-1"> <div v-if="comments" ref="comments" class="uk-width-4-5@xl uk-width-3-4@s uk-width-1">
<div id="videos-comments-container">
<div <div
v-for="comment in comments.comments" v-for="comment in comments.comments"
:key="comment.commentId" :key="comment.commentId"
class="uk-tile-default uk-align-left uk-width-expand" class="uk-tile-default uk-width-expand"
:style="[{ background: backgroundColor }]" :style="[{ background: backgroundColor, textAlign: 'left', marginBottom: '30px' }]"
> >
<Comment :comment="comment" :uploader="video.uploader" /> <Comment :comment="comment" :uploader="video.uploader" />
</div> </div>
</div> </div>
</div>
<div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first"> <div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
<a <a
@ -241,14 +243,17 @@ export default {
document.title = this.video.title + " - Piped"; document.title = this.video.title + " - Piped";
this.$refs.videoPlayer.loadVideo(); this.$refs.videoPlayer.loadVideo();
} }
window.addEventListener("scroll", this.handleScroll); var mainElem = document.getElementsByTagName("main")[0];
mainElem.addEventListener("scroll", this.handleScroll);
}, },
deactivated() { deactivated() {
this.active = false; this.active = false;
window.removeEventListener("scroll", this.handleScroll); var mainElem = document.getElementsByTagName("main")[0];
mainElem.removeEventListener("scroll", this.handleScroll);
}, },
unmounted() { unmounted() {
window.removeEventListener("scroll", this.handleScroll); var mainElem = document.getElementsByTagName("main")[0];
mainElem.removeEventListener("scroll", this.handleScroll);
}, },
methods: { methods: {
fetchVideo() { fetchVideo() {
@ -340,7 +345,13 @@ export default {
}, },
handleScroll() { handleScroll() {
if (this.loading || !this.comments || !this.comments.nextpage) return; if (this.loading || !this.comments || !this.comments.nextpage) return;
if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) { var mainElem = document.getElementsByTagName("main")[0];
var videosCommentsContainer = document.getElementById("videos-comments-container");
var videoAndInfo = document.getElementById("video-and-info");
if (
videoAndInfo.offsetHeight + mainElem.scrollTop >=
videosCommentsContainer.offsetHeight + videoAndInfo.offsetHeight
) {
this.loading = true; this.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), { this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
nextpage: this.comments.nextpage, nextpage: this.comments.nextpage,