2 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
3 import { MarkdownService, Notifier, UserService } from '@app/core'
4 import { AuthService } from '@app/core/auth'
5 import { Account, Actor, DropdownAction, Video } from '@app/shared/shared-main'
6 import { CommentReportComponent } from '@app/shared/shared-moderation/report-modals/comment-report.component'
7 import { VideoComment, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
8 import { User, UserRight } from '@shared/models'
11 selector: 'my-video-comment',
12 templateUrl: './video-comment.component.html',
13 styleUrls: ['./video-comment.component.scss']
15 export class VideoCommentComponent implements OnInit, OnChanges {
16 @ViewChild('commentReportModal') commentReportModal: CommentReportComponent
19 @Input() comment: VideoComment
20 @Input() parentComments: VideoComment[] = []
21 @Input() commentTree: VideoCommentThreadTree
22 @Input() inReplyToCommentId: number
23 @Input() highlightedComment = false
24 @Input() firstInThread = false
25 @Input() redraftValue?: string
27 @Output() wantedToReply = new EventEmitter<VideoComment>()
28 @Output() wantedToDelete = new EventEmitter<VideoComment>()
29 @Output() wantedToRedraft = new EventEmitter<VideoComment>()
30 @Output() threadCreated = new EventEmitter<VideoCommentThreadTree>()
31 @Output() resetReply = new EventEmitter()
32 @Output() timestampClicked = new EventEmitter<number>()
34 prependModerationActions: DropdownAction<any>[]
36 sanitizedCommentHTML = ''
37 newParentComments: VideoComment[] = []
39 commentAccount: Account
43 private markdownService: MarkdownService,
44 private authService: AuthService,
45 private userService: UserService,
46 private notifier: Notifier
50 return this.authService.getUser()
61 onCommentReplyCreated (createdComment: VideoComment) {
62 if (!this.commentTree) {
64 comment: this.comment,
68 this.threadCreated.emit(this.commentTree)
71 this.commentTree.children.unshift({
72 comment: createdComment,
76 this.resetReply.emit()
78 delete this.redraftValue
81 onWantToReply (comment?: VideoComment) {
82 this.wantedToReply.emit(comment || this.comment)
85 onWantToDelete (comment?: VideoComment) {
86 this.wantedToDelete.emit(comment || this.comment)
89 onWantToRedraft (comment?: VideoComment) {
90 this.wantedToRedraft.emit(comment || this.comment)
94 return this.authService.isLoggedIn()
98 this.resetReply.emit()
101 handleTimestampClicked (timestamp: number) {
102 this.timestampClicked.emit(timestamp)
105 isRemovableByUser () {
106 return this.comment.account && this.isUserLoggedIn() &&
108 this.user.account.id === this.comment.account.id ||
109 this.user.account.id === this.video.account.id ||
110 this.user.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
114 isRedraftableByUser () {
115 return this.comment.account && this.isUserLoggedIn() && this.user.account.id === this.comment.account.id && this.comment.totalReplies === 0
118 switchToDefaultAvatar ($event: Event) {
119 ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
122 private getUserIfNeeded (account: Account) {
123 if (!account.userId) return
124 if (!this.authService.isLoggedIn()) return
126 const user = this.authService.getUser()
127 if (user.hasRight(UserRight.MANAGE_USERS)) {
128 this.userService.getUserWithCache(account.userId)
130 user => this.commentUser = user,
132 err => this.notifier.error(err.message)
137 private async init () {
138 const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true)
139 this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
140 this.newParentComments = this.parentComments.concat([ this.comment ])
142 if (this.comment.account) {
143 this.commentAccount = new Account(this.comment.account)
144 this.getUserIfNeeded(this.commentAccount)
146 this.comment.account = null
149 if (this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id) {
150 this.prependModerationActions = [
152 label: $localize`Report comment`,
153 handler: () => this.showReportModal()
157 this.prependModerationActions = undefined
161 private showReportModal () {
162 this.commentReportModal.show()