Add comments feeds popover in watch page

client/src/app/videos/+video-watch/comment/video-comment.service.ts

@@ -3,7 +3,7 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { lineFeedToHtml } from '@app/shared/misc/utils'
 import { Observable } from 'rxjs'
-import { ResultList } from '../../../../../../shared/models'
+import { ResultList, FeedFormat } from '../../../../../../shared/models'
 import {
   VideoComment as VideoCommentServerModel,
   VideoCommentCreate,
@@ -18,6 +18,7 @@ import { VideoComment } from './video-comment.model'
 @Injectable()
 export class VideoCommentService {
   private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
+  private static BASE_FEEDS_URL = environment.apiUrl + '/feeds/video-comments.'
 
   constructor (
     private authHttp: HttpClient,
@@ -88,6 +89,34 @@ export class VideoCommentService {
                )
   }
 
+  getVideoCommentsFeeds (videoUUID?: string) {
+    const feeds = [
+      {
+        format: FeedFormat.RSS,
+        label: 'rss 2.0',
+        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.RSS.toLowerCase()
+      },
+      {
+        format: FeedFormat.ATOM,
+        label: 'atom 1.0',
+        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.ATOM.toLowerCase()
+      },
+      {
+        format: FeedFormat.JSON,
+        label: 'json 1.0',
+        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.JSON.toLowerCase()
+      }
+    ]
+
+    if (videoUUID !== undefined) {
+      for (const feed of feeds) {
+        feed.url += '?videoId=' + videoUUID
+      }
+    }
+
+    return feeds
+  }
+
   private extractVideoComment (videoComment: VideoCommentServerModel) {
     return new VideoComment(videoComment)
   }

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

@@ -3,9 +3,8 @@
     <div i18n class="title-page title-page-single">
       Comments
     </div>
-    <my-help
+
-      *ngIf="video.commentsEnabled === true" helpType="custom" i18n-customHtml
+    <my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
-      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.name}}@{{video.account.host}}</strong> and find back the video."></my-help>
   </div>
 
   <ng-template [ngIf]="video.commentsEnabled === true">

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

@@ -23,8 +23,9 @@
   margin-right: 0;
 }
 
-my-help {
+my-video-feed {
   display: inline-block;
+  margin-left: 5px;
 }
 
 @media screen and (max-width: 600px) {

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

@@ -35,6 +35,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
   threadLoading: { [ id: number ]: boolean } = {}
 
+  syndicationItems = []
+
   private sub: Subscription
 
   constructor (
@@ -201,6 +203,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
       this.componentPagination.currentPage = 1
       this.componentPagination.totalItems = null
 
+      this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid)
+
       this.loadMoreComments()
     }
   }