client/src/app/+videos/+video-watch/comment/video-comment.component.html

   1 <div *ngIf="!comment.isDeleted || comment.isDeleted && comment.totalReplies !== 0" class="root-comment">
   2   <div class="left">
   3     <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer">
   4       <img
   5         class="comment-avatar"
   6         [src]="comment.accountAvatarUrl"
   7         (error)="switchToDefaultAvatar($event)"
   8         alt="Avatar"
   9       />
  10     </a>
  11
  12     <div class="vertical-border"></div>
  13   </div>
  14
  15   <div class="right" [ngClass]="{ 'mb-3': firstInThread }">
  16     <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
  17
  18     <div class="comment">
  19       <ng-container *ngIf="!comment.isDeleted">
  20         <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
  21
  22         <div class="comment-account-date">
  23           <div class="comment-account">
  24             <a
  25               [routerLink]="[ '/accounts', comment.by ]"
  26               class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }"
  27             >
  28               {{ comment.account.displayName }}
  29             </a>
  30
  31             <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account-fid ml-1">{{ comment.by }}</a>
  32           </div>
  33           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  34              class="comment-date" [title]="comment.createdAt">{{ comment.createdAt | myFromNow }}</a>
  35         </div>
  36         <div
  37           class="comment-html"
  38           [innerHTML]="sanitizedCommentHTML"
  39           (timestampClicked)="handleTimestampClicked($event)"
  40           timestampRouteTransformer
  41         ></div>
  42
  43         <div class="comment-actions">
  44           <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
  45           <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
  46
  47           <my-user-moderation-dropdown
  48             [prependActions]="prependModerationActions"
  49             buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
  50           ></my-user-moderation-dropdown>
  51         </div>
  52       </ng-container>
  53
  54       <ng-container *ngIf="comment.isDeleted">
  55         <div class="comment-account-date">
  56           <span class="comment-account" i18n>Deleted</span>
  57           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  58              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
  59         </div>
  60
  61         <div class="comment-html comment-html-deleted">
  62           <i i18n>This comment has been deleted</i>
  63         </div>
  64       </ng-container>
  65
  66       <my-video-comment-add
  67         *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
  68         [user]="user"
  69         [video]="video"
  70         [parentComment]="comment"
  71         [parentComments]="newParentComments"
  72         [focusOnInit]="true"
  73         (commentCreated)="onCommentReplyCreated($event)"
  74         (cancel)="onResetReply()"
  75       ></my-video-comment-add>
  76
  77       <div *ngIf="commentTree" class="children">
  78         <div *ngFor="let commentChild of commentTree.children">
  79           <my-video-comment
  80             [comment]="commentChild.comment"
  81             [video]="video"
  82             [inReplyToCommentId]="inReplyToCommentId"
  83             [commentTree]="commentChild"
  84             [parentComments]="newParentComments"
  85             (wantedToReply)="onWantToReply($event)"
  86             (wantedToDelete)="onWantToDelete($event)"
  87             (resetReply)="onResetReply()"
  88             (timestampClicked)="handleTimestampClicked($event)"
  89           ></my-video-comment>
  90         </div>
  91       </div>
  92
  93       <ng-content></ng-content>
  94     </div>
  95   </div>
  96 </div>
  97
  98 <ng-container *ngIf="prependModerationActions">
  99   <my-comment-report #commentReportModal [comment]="comment"></my-comment-report>
 100 </ng-container>