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

35
src/components/WatchVideo.vue
View file

@ -14,7 +14,7 @@
<div v-if="video && !isEmbed" class="uk-container uk-container-xlarge">
<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
ref="videoPlayer"
:video="video"
@ -121,13 +121,15 @@
<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-for="comment in comments.comments"
:key="comment.commentId"
class="uk-tile-default uk-align-left uk-width-expand"
:style="[{ background: backgroundColor }]"
>
<Comment :comment="comment" :uploader="video.uploader" />
<div id="videos-comments-container">
<div
v-for="comment in comments.comments"
:key="comment.commentId"
class="uk-tile-default uk-width-expand"
:style="[{ background: backgroundColor, textAlign: 'left', marginBottom: '30px' }]"
>
<Comment :comment="comment" :uploader="video.uploader" />
</div>
</div>
</div>
@ -241,14 +243,17 @@ export default {
document.title = this.video.title + " - Piped";
this.$refs.videoPlayer.loadVideo();
}
window.addEventListener("scroll", this.handleScroll);
var mainElem = document.getElementsByTagName("main")[0];
mainElem.addEventListener("scroll", this.handleScroll);
},
deactivated() {
this.active = false;
window.removeEventListener("scroll", this.handleScroll);
var mainElem = document.getElementsByTagName("main")[0];
mainElem.removeEventListener("scroll", this.handleScroll);
},
unmounted() {
window.removeEventListener("scroll", this.handleScroll);
var mainElem = document.getElementsByTagName("main")[0];
mainElem.removeEventListener("scroll", this.handleScroll);
},
methods: {
fetchVideo() {
@ -340,7 +345,13 @@ export default {
},
handleScroll() {
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.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
nextpage: this.comments.nextpage,