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

   1 <div>
   2   <div class="title-block">
   3     <div class="title-page title-page-single">
   4       Comments
   5     </div>
   6     <my-help
   7       *ngIf="video.commentsEnabled === true" helpType="custom" i18n-customHtml
   8       customHtml="You can either comment on the page of your instance where this video is federated with your PeerTube account, or via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.displayName}}@{{video.account.host}}</strong> and find back the video. Direct commenting capabilities are being worked on in <a href='https://github.com/Chocobozzz/PeerTube/issues/224'>#224</a>."
   9     ></my-help>
  10   </div>
  11
  12   <ng-template [ngIf]="video.commentsEnabled === true">
  13     <my-video-comment-add
  14       *ngIf="isUserLoggedIn()"
  15       [video]="video"
  16       [user]="user"
  17       (commentCreated)="onCommentThreadCreated($event)"
  18     ></my-video-comment-add>
  19
  20     <div *ngIf="componentPagination.totalItems === 0 && comments.length === 0" i18n>No comments.</div>
  21
  22     <div
  23       class="comment-threads"
  24       myInfiniteScroller
  25       [autoLoading]="true"
  26       (nearOfBottom)="onNearOfBottom()"
  27     >
  28       <div *ngIf="highlightedThread" id="highlighted-comment">
  29         <my-video-comment
  30           [comment]="highlightedThread"
  31           [video]="video"
  32           [inReplyToCommentId]="inReplyToCommentId"
  33           [commentTree]="threadComments[highlightedThread.id]"
  34           [highlightedComment]="true"
  35           (wantedToReply)="onWantedToReply($event)"
  36           (wantedToDelete)="onWantedToDelete($event)"
  37           (threadCreated)="onThreadCreated($event)"
  38           (resetReply)="onResetReply()"
  39         ></my-video-comment>
  40       </div>
  41
  42       <div *ngFor="let comment of comments">
  43         <my-video-comment
  44           *ngIf="!highlightedThread || comment.id !== highlightedThread.id"
  45           [comment]="comment"
  46           [video]="video"
  47           [inReplyToCommentId]="inReplyToCommentId"
  48           [commentTree]="threadComments[comment.id]"
  49           (wantedToReply)="onWantedToReply($event)"
  50           (wantedToDelete)="onWantedToDelete($event)"
  51           (threadCreated)="onThreadCreated($event)"
  52           (resetReply)="onResetReply()"
  53         ></my-video-comment>
  54
  55         <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies">
  56           <ng-container i18n>View all {{ comment.totalReplies }} replies</ng-container>
  57
  58           <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
  59           <my-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-loader>
  60         </div>
  61       </div>
  62     </div>
  63   </ng-template>
  64
  65   <div *ngIf="video.commentsEnabled === false" i18n>
  66     Comments are disabled.
  67   </div>
  68 </div>