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           <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">
  24             <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }">{{ comment.account.displayName }}</span>
  25             <span class="comment-account-fid ml-1">{{ comment.by }}</span>
  26           </a>
  27           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  28              class="comment-date" [title]="comment.createdAt">{{ comment.createdAt | myFromNow }}</a>
  29         </div>
  30         <div
  31           class="comment-html"
  32           [innerHTML]="sanitizedCommentHTML"
  33           (timestampClicked)="handleTimestampClicked($event)"
  34           timestampRouteTransformer
  35         ></div>
  36
  37         <div class="comment-actions">
  38           <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
  39           <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
  40
  41           <my-user-moderation-dropdown
  42             buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
  43           ></my-user-moderation-dropdown>
  44         </div>
  45       </ng-container>
  46
  47       <ng-container *ngIf="comment.isDeleted">
  48         <div class="comment-account-date">
  49           <span class="comment-account" i18n>Deleted</span>
  50           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
  51              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
  52         </div>
  53
  54         <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
  55           <i i18n>This comment has been deleted</i>
  56         </div>
  57       </ng-container>
  58
  59       <my-video-comment-add
  60         *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
  61         [user]="user"
  62         [video]="video"
  63         [parentComment]="comment"
  64         [parentComments]="newParentComments"
  65         [focusOnInit]="true"
  66         (commentCreated)="onCommentReplyCreated($event)"
  67         (cancel)="onResetReply()"
  68       ></my-video-comment-add>
  69
  70       <div *ngIf="commentTree" class="children">
  71         <div *ngFor="let commentChild of commentTree.children">
  72           <my-video-comment
  73             [comment]="commentChild.comment"
  74             [video]="video"
  75             [inReplyToCommentId]="inReplyToCommentId"
  76             [commentTree]="commentChild"
  77             [parentComments]="newParentComments"
  78             (wantedToReply)="onWantToReply($event)"
  79             (wantedToDelete)="onWantToDelete($event)"
  80             (resetReply)="onResetReply()"
  81             (timestampClicked)="handleTimestampClicked($event)"
  82           ></my-video-comment>
  83         </div>
  84       </div>
  85
  86       <ng-content></ng-content>
  87     </div>
  88   </div>
  89 </div>