mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-22 13:37:23 +00:00
parent
1dbfb14230
commit
1856f45c85
47
src/components/Comment.vue
Normal file
47
src/components/Comment.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="comment uk-flex">
|
||||
<img
|
||||
:src="comment.thumbnail"
|
||||
class="comment-avatar uk-border-circle uk-margin-right"
|
||||
style="width: 48px; height: 48px;"
|
||||
loading="lazy"
|
||||
alt="Avatar"
|
||||
/>
|
||||
|
||||
<div class="comment-content">
|
||||
<div class="comment-header">
|
||||
<div v-if="comment.pinned" class="comment-pinned uk-text-meta">
|
||||
<font-awesome-icon icon="thumbtack"></font-awesome-icon> Pinned by
|
||||
{{ uploader }}
|
||||
</div>
|
||||
|
||||
<div class="comment-author">
|
||||
<router-link class="uk-text-bold uk-text-small" v-bind:to="comment.commentorUrl">
|
||||
{{ comment.author }} </router-link
|
||||
> <font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
|
||||
</div>
|
||||
<div class="comment-meta uk-text-meta uk-margin-small-bottom">
|
||||
{{ comment.commentedTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-body" style="white-space: pre-wrap">
|
||||
{{ comment.commentText }}
|
||||
</div>
|
||||
<div class="comment-footer uk-margin-small-top uk-text-meta">
|
||||
<font-awesome-icon icon="thumbs-up" style="margin-right: 4px;"></font-awesome-icon>
|
||||
<span>{{ numberFormat(comment.likeCount) }}</span>
|
||||
|
||||
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
comment: Object,
|
||||
uploader: String
|
||||
}
|
||||
}
|
||||
</script>
|
@ -80,33 +80,7 @@
|
||||
v-bind:key="comment.commentId"
|
||||
v-for="comment in comments.comments"
|
||||
>
|
||||
<div align="left">
|
||||
<div v-if="comment.pinned">
|
||||
<font-awesome-icon icon="thumbtack"></font-awesome-icon> Pinned by
|
||||
{{ video.uploader }}
|
||||
</div>
|
||||
<img
|
||||
:src="comment.thumbnail"
|
||||
style="width: 10vmin"
|
||||
height="176"
|
||||
width="176"
|
||||
loading="lazy"
|
||||
alt="avatar"
|
||||
/>
|
||||
<br />
|
||||
<router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
|
||||
{{ comment.author }} </router-link
|
||||
> <font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
|
||||
</div>
|
||||
<p style="white-space: pre-wrap">{{ comment.commentText }}</p>
|
||||
<div>
|
||||
<b>{{ numberFormat(comment.likeCount) }}</b>
|
||||
|
||||
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
|
||||
|
||||
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
|
||||
</div>
|
||||
<hr />
|
||||
<Comment :comment="comment" :uploader="video.uploader" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -128,6 +102,7 @@
|
||||
import Player from "@/components/Player.vue";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||
import Comment from "@/components/Comment.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
@ -269,6 +244,7 @@ export default {
|
||||
Player,
|
||||
VideoItem,
|
||||
ErrorHandler,
|
||||
Comment
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user