2020-02-16 19:30:00 +01:00
|
|
|
<template>
|
|
|
|
<ft-card>
|
|
|
|
<ft-loader
|
|
|
|
v-if="isLoading"
|
|
|
|
/>
|
|
|
|
<h4
|
|
|
|
v-if="commentData.length === 0 && !isLoading"
|
|
|
|
class="getCommentsTitle"
|
|
|
|
@click="getCommentData"
|
|
|
|
>
|
|
|
|
Click to view comments
|
|
|
|
</h4>
|
2020-02-18 21:59:01 +01:00
|
|
|
<h4
|
|
|
|
v-if="commentData.length > 0 && !isLoading && !showComments"
|
|
|
|
class="getCommentsTitle"
|
|
|
|
@click="showComments = true"
|
|
|
|
>
|
|
|
|
Click to view comments
|
|
|
|
</h4>
|
2020-02-16 19:30:00 +01:00
|
|
|
<h3
|
2020-02-18 21:59:01 +01:00
|
|
|
v-if="commentData.length > 0 && !isLoading && showComments"
|
2020-02-16 19:30:00 +01:00
|
|
|
>
|
|
|
|
Comments
|
2020-02-18 21:59:01 +01:00
|
|
|
<span
|
|
|
|
class="hideComments"
|
|
|
|
@click="showComments = false"
|
|
|
|
>
|
|
|
|
Hide Comments
|
|
|
|
</span>
|
2020-02-16 19:30:00 +01:00
|
|
|
</h3>
|
|
|
|
<div
|
2020-02-18 21:59:01 +01:00
|
|
|
v-if="commentData.length > 0 && showComments"
|
2020-02-16 19:30:00 +01:00
|
|
|
>
|
|
|
|
<div
|
|
|
|
v-for="(comment, index) in commentData"
|
|
|
|
:key="index"
|
|
|
|
class="comment"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
:src="comment.authorThumb"
|
|
|
|
class="commentThumbnail"
|
|
|
|
>
|
|
|
|
<p class="commentAuthor">
|
|
|
|
{{ comment.author }}
|
|
|
|
<span class="commentDate">
|
|
|
|
{{ comment.time }}
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
<p class="commentText">
|
|
|
|
{{ comment.text }}
|
|
|
|
</p>
|
|
|
|
<p class="commentLikeCount">
|
|
|
|
<font-awesome-icon
|
|
|
|
icon="thumbs-up"
|
|
|
|
/>
|
|
|
|
{{ comment.likes }}
|
|
|
|
</p>
|
|
|
|
<p
|
|
|
|
v-if="comment.numReplies > 0"
|
|
|
|
class="commentMoreReplies"
|
|
|
|
@click="getCommentReplies(index)"
|
|
|
|
>
|
2020-06-25 03:41:46 +02:00
|
|
|
<span v-if="!comment.showReplies">View</span>
|
|
|
|
<span v-else>Hide</span>
|
|
|
|
{{ comment.numReplies }} replies
|
2020-02-16 19:30:00 +01:00
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
v-if="comment.showReplies"
|
|
|
|
class="commentReplies"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
v-for="(reply, replyIndex) in comment.replies"
|
|
|
|
:key="replyIndex"
|
|
|
|
class="comment"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
:src="reply.authorThumb"
|
|
|
|
class="commentThumbnail"
|
|
|
|
>
|
|
|
|
<p class="commentAuthor">
|
|
|
|
{{ reply.author }}
|
|
|
|
<span class="commentDate">
|
|
|
|
{{ reply.time }}
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
<p class="commentText">
|
|
|
|
{{ reply.text }}
|
|
|
|
</p>
|
|
|
|
<p class="commentLikeCount">
|
|
|
|
<font-awesome-icon
|
|
|
|
icon="thumbs-up"
|
|
|
|
/>
|
|
|
|
{{ reply.likes }}
|
|
|
|
</p>
|
|
|
|
<p
|
|
|
|
v-if="reply.numReplies > 0"
|
|
|
|
class="commentMoreReplies"
|
|
|
|
>
|
|
|
|
View {{ reply.numReplies }} replies
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-02-18 21:59:01 +01:00
|
|
|
<div
|
|
|
|
v-else-if="showComments && !isLoading"
|
|
|
|
>
|
|
|
|
<h3 class="center">
|
|
|
|
There are no comments available for this video.
|
|
|
|
</h3>
|
|
|
|
</div>
|
2020-02-16 19:30:00 +01:00
|
|
|
<h4
|
2020-02-18 21:59:01 +01:00
|
|
|
v-if="commentData.length > 0 && !isLoading && showComments"
|
2020-02-16 19:30:00 +01:00
|
|
|
class="getMoreComments"
|
|
|
|
@click="getCommentData"
|
|
|
|
>
|
|
|
|
Load More Comments
|
|
|
|
</h4>
|
|
|
|
</ft-card>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./watch-video-comments.js" />
|
|
|
|
<style scoped src="./watch-video-comments.css" />
|