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         (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             buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
  49           ></my-user-moderation-dropdown>
  50         </div>
  51       </ng-container>
  52
  53       <ng-container *ngIf="comment.isDeleted">
  54         <div class="comment-account-date">
  55           <span class="comment-account" i18n>Deleted</span>
  56           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  57              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
  58         </div>
  59
  60         <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
  61           <i i18n>This comment has been deleted</i>
  62         </div>
  63       </ng-container>
  64
  65       <my-video-comment-add
  66         *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
  67         [user]="user"
  68         [video]="video"
  69         [parentComment]="comment"
  70         [parentComments]="newParentComments"
  71         [focusOnInit]="true"
  72         (commentCreated)="onCommentReplyCreated($event)"
  73         (cancel)="onResetReply()"
  74       ></my-video-comment-add>
  75
  76       <div *ngIf="commentTree" class="children">
  77         <div *ngFor="let commentChild of commentTree.children">
  78           <my-video-comment
  79             [comment]="commentChild.comment"
  80             [video]="video"
  81             [inReplyToCommentId]="inReplyToCommentId"
  82             [commentTree]="commentChild"
  83             [parentComments]="newParentComments"
  84             (wantedToReply)="onWantToReply($event)"
  85             (wantedToDelete)="onWantToDelete($event)"
  86             (resetReply)="onResetReply()"
  87             (timestampClicked)="handleTimestampClicked($event)"
  88           ></my-video-comment>
  89         </div>
  90       </div>
  91
  92       <ng-content></ng-content>
  93     </div>
  94   </div>
  95 </div>