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

   1 <div 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         alt="Avatar"
   8       />
   9     </a>
  10
  11     <div class="vertical-border"></div>
  12   </div>
  13
  14   <div class="right">
  15     <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
  16
  17     <div class="comment">
  18       <ng-container *ngIf="!comment.isDeleted">
  19         <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
  20
  21         <div class="comment-account-date">
  22           <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a>
  23           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  24              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
  25         </div>
  26         <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
  27
  28         <div class="comment-actions">
  29           <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
  30           <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
  31         </div>
  32       </ng-container>
  33
  34       <ng-container *ngIf="comment.isDeleted">
  35         <div class="comment-account-date">
  36           <span class="comment-account" i18n>Deleted</span>
  37           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  38              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
  39         </div>
  40
  41         <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
  42           <i i18n>This comment has been deleted</i>
  43         </div>
  44       </ng-container>
  45
  46       <my-video-comment-add
  47         *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
  48         [user]="user"
  49         [video]="video"
  50         [parentComment]="comment"
  51         [parentComments]="newParentComments"
  52         [focusOnInit]="true"
  53         (commentCreated)="onCommentReplyCreated($event)"
  54         (cancel)="onResetReply()"
  55       ></my-video-comment-add>
  56
  57       <div *ngIf="commentTree" class="children">
  58         <div *ngFor="let commentChild of commentTree.children">
  59           <my-video-comment
  60             [comment]="commentChild.comment"
  61             [video]="video"
  62             [inReplyToCommentId]="inReplyToCommentId"
  63             [commentTree]="commentChild"
  64             [parentComments]="newParentComments"
  65             (wantedToReply)="onWantToReply($event)"
  66             (wantedToDelete)="onWantToDelete($event)"
  67             (resetReply)="onResetReply()"
  68           ></my-video-comment>
  69         </div>
  70       </div>
  71     </div>
  72   </div>
  73 </div>