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

Implement comment replies.

Browse source
This commit is contained in:
FireMaskterK 2021-11-01 20:23:04 +00:00
parent 4b35b6925d
commit 8ea56aa0b9
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
3 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/Comment.vue
View file

@ -3,6 +3,8 @@
<img
:src="comment.thumbnail"
class="comment-avatar uk-border-circle uk-margin-right"
height="48"
width="48"
style="width: 48px; height: 48px"
loading="lazy"
alt="Avatar"
@ -33,6 +35,28 @@
&nbsp;
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
</div>
<div v-if="comment.repliesPage && notLoading">
<div @click="loadReplies">
<a class="uk-link-text">Show Replies</a>
&nbsp;
<font-awesome-icon icon="level-down-alt"></font-awesome-icon>
</div>
</div>
<div v-if="replies" class="replies uk-width-4-5@xl uk-width-3-4@s uk-width-1">
<div
v-for="reply in replies"
:key="reply.commentId"
class="uk-tile-default uk-align-left uk-width-expand"
:style="[{ background: backgroundColor }]"
>
<Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
</div>
<div v-if="nextpage" @click="loadReplies">
<a class="uk-link-text">Load more Replies</a>
&nbsp;
<font-awesome-icon icon="level-down-alt"></font-awesome-icon>
</div>
</div>
</div>
</div>
</template>
@ -47,6 +71,25 @@ export default {
},
},
uploader: { type: String, default: null },
videoId: { type: String, default: null },
},
data() {
return {
notLoading: true,
replies: [],
nextpage: null,
};
},
methods: {
loadReplies() {
this.notLoading = false;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {
nextpage: this.nextpage || this.comment.repliesPage,
}).then(json => {
this.replies = this.replies.concat(json.comments);
this.nextpage = json.nextpage;
});
},
},
};
</script>

2
src/components/WatchVideo.vue
View file

@ -123,7 +123,7 @@
class="uk-tile-default uk-align-left uk-width-expand"
:style="[{ background: backgroundColor }]"
>
<Comment :comment="comment" :uploader="video.uploader" />
<Comment :comment="comment" :uploader="video.uploader" :video-id="getVideoId()" />
</div>
</div>

2
src/main.js
View file

@ -10,6 +10,7 @@ import {
faHeadphones,
faRss,
faChevronLeft,
faLevelDownAlt,
faTv,
} from "@fortawesome/free-solid-svg-icons";
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
@ -27,6 +28,7 @@ library.add(
faYoutube,
faRss,
faChevronLeft,
faLevelDownAlt,
faTv,
);