mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Implement comment replies.
This commit is contained in:
parent
4b35b6925d
commit
8ea56aa0b9
@ -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 @@
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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,
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user