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

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