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 this.redraftValue = undefined
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 () {
116 this.comment.account &&
117 this.isUserLoggedIn() &&
118 this.user.account.id === this.comment.account.id &&
119 this.comment.totalReplies === 0
123 isReportableByUser () {
125 this.comment.account &&
126 this.isUserLoggedIn() &&
127 this.comment.isDeleted === false &&
128 this.user.account.id !== this.comment.account.id
132 switchToDefaultAvatar ($event: Event) {
133 ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
136 isNotDeletedOrDeletedWithReplies () {
137 return !this.comment.isDeleted || this.comment.isDeleted && this.comment.totalReplies !== 0
140 private getUserIfNeeded (account: Account) {
141 if (!account.userId) return
142 if (!this.authService.isLoggedIn()) return
144 const user = this.authService.getUser()
145 if (user.hasRight(UserRight.MANAGE_USERS)) {
146 this.userService.getUserWithCache(account.userId)
148 user => this.commentUser = user,
150 err => this.notifier.error(err.message)
155 private async init () {
156 // Before HTML rendering restore line feed for markdown list compatibility
157 const commentText = this.comment.text.replace(/<br.?\/?>/g, '\r\n')
158 const html = await this.markdownService.textMarkdownToHTML(commentText, true, true)
159 this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
160 this.newParentComments = this.parentComments.concat([ this.comment ])
162 if (this.comment.account) {
163 this.commentAccount = new Account(this.comment.account)
164 this.getUserIfNeeded(this.commentAccount)
166 this.comment.account = null
169 this.prependModerationActions = []
171 if (this.isReportableByUser()) {
172 this.prependModerationActions.push({
173 label: $localize`Report this comment`,
175 handler: () => this.showReportModal()
179 if (this.isRemovableByUser()) {
180 this.prependModerationActions.push({
181 label: $localize`Remove`,
183 handler: () => this.onWantToDelete()
187 if (this.isRedraftableByUser()) {
188 this.prependModerationActions.push({
189 label: $localize`Remove & re-draft`,
191 handler: () => this.onWantToRedraft()
195 if (this.prependModerationActions.length === 0) {
196 this.prependModerationActions = undefined
200 private showReportModal () {
201 this.commentReportModal.show()