16 files changed, 127 insertions, 57 deletions

diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index d543ab7c1..1f97bc389 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,8 +1,21 @@
 <div [ngClass]="{ 'margin-content': marginContent }">
-  <div *ngIf="titlePage" class="title-page title-page-single">
-    {{ titlePage }}
+  <div class="videos-header">
+    <div *ngIf="titlePage" class="title-page title-page-single">
+      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+        {{ titlePage }}
+      </div>
+    </div>
+
+    <my-feed [syndicationItems]="syndicationItems"></my-feed>
+
+    <div class="moderation-block" *ngIf="displayModerationBlock">
+      <my-peertube-checkbox
+        (change)="toggleModerationDisplay()"
+        inputName="display-unlisted-private"  i18n-labelText labelText="Display unlisted and private videos"
+      >
+      </my-peertube-checkbox>
+    </div>
   </div>
-  <my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
 
   <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
   <div
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 3f9c73a29..292ede698 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -8,12 +8,27 @@
   }
 }
 
-.title-page.title-page-single {
-  margin-right: 5px;
-}
+.videos-header {
+  display: flex;
+  height: 80px;
+  align-items: center;
+
+  .title-page.title-page-single {
+    margin: 0 5px 0 0;
+  }
 
-my-video-feed {
-  display: inline-block;
+  my-feed {
+    display: inline-block;
+    top: 1px;
+    min-width: 60px;
+  }
+
+  .moderation-block {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    align-items: center;
+  }
 }
 
 @media screen and (max-width: 500px) {
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 763791165..b0633be4a 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -3,7 +3,6 @@ import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Location } from '@angular/common'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { NotificationsService } from 'angular2-notifications'
 import { fromEvent, Observable, Subscription } from 'rxjs'
 import { AuthService } from '../../core/auth'
 import { ComponentPagination } from '../rest/component-pagination.model'
@@ -12,6 +11,8 @@ import { Video } from './video.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
+import { Syndication } from '@app/shared/video/syndication.model'
+import { Notifier } from '@app/core'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
   private static LINES_PER_PAGE = 4
@@ -27,7 +28,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   sort: VideoSortField = '-publishedAt'
   categoryOneOf?: number
   defaultSort: VideoSortField = '-publishedAt'
-  syndicationItems = []
+  syndicationItems: Syndication[] = []
 
   loadOnInit = true
   marginContent = true
@@ -37,11 +38,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   videoPages: Video[][] = []
   ownerDisplayType: OwnerDisplayType = 'account'
   firstLoadedPage: number
+  displayModerationBlock = false
+  titleTooltip: string
 
   protected baseVideoWidth = 215
   protected baseVideoHeight = 205
 
-  protected abstract notificationsService: NotificationsService
+  protected abstract notifier: Notifier
   protected abstract authService: AuthService
   protected abstract router: Router
   protected abstract route: ActivatedRoute
@@ -58,7 +61,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   private resizeSubscription: Subscription
 
   abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}>
-  abstract generateSyndicationList ()
+  abstract generateSyndicationList (): void
 
   get user () {
     return this.authService.getUser()
@@ -155,11 +158,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
       },
       error => {
         this.loadingPage[page] = false
-        this.notificationsService.error(this.i18n('Error'), error.message)
+        this.notifier.error(error.message)
       }
     )
   }
 
+  toggleModerationDisplay () {
+    throw new Error('toggleModerationDisplay is not implemented')
+  }
+
   protected hasMoreVideos () {
     // No results
     if (this.pagination.totalItems === 0) return false
@@ -206,7 +213,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   protected setNewRouteParams () {
     const paramsObject = this.buildRouteParams()
 
-    const queryParams = Object.keys(paramsObject).map(p => p + '=' + paramsObject[p]).join('&')
+    const queryParams = Object.keys(paramsObject)
+                              .map(p => p + '=' + paramsObject[p])
+                              .join('&')
     this.location.replaceState(this.currentRoute, queryParams)
   }
 
diff --git a/client/src/app/shared/video/video-feed.component.html b/client/src/app/shared/video/feed.component.html
index 16116ba88..f7624ec01 100644
--- a/client/src/app/shared/video/video-feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,10 +1,11 @@
 <div class="video-feed">
-  <span
+  <my-global-icon
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
-    class="icon icon-syndication" role="button"
-  ></span>
+    class="icon-syndication" role="button" iconName="syndication"
+  >
+  </my-global-icon>
 
   <ng-template #feedsList>
     <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
   </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
new file mode 100644
index 000000000..ed1dc17d3
--- /dev/null
+++ b/client/src/app/shared/video/feed.component.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+@import '_mixins';
+
+.video-feed {
+  a {
+    color: black;
+    display: block;
+  }
+
+  my-global-icon {
+    cursor: pointer;
+    width: 12px;
+    position: relative;
+    top: -2px;
+
+    @include apply-svg-color(var(--mainForegroundColor))
+  }
+}
diff --git a/client/src/app/shared/video/feed.component.ts b/client/src/app/shared/video/feed.component.ts
new file mode 100644
index 000000000..12507458f
--- /dev/null
+++ b/client/src/app/shared/video/feed.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { Syndication } from '@app/shared/video/syndication.model'
+
+@Component({
+  selector: 'my-feed',
+  styleUrls: [ './feed.component.scss' ],
+  templateUrl: './feed.component.html'
+})
+export class FeedComponent {
+  @Input() syndicationItems: Syndication[]
+}
diff --git a/client/src/app/shared/video/syndication.model.ts b/client/src/app/shared/video/syndication.model.ts
new file mode 100644
index 000000000..c59ab01e8
--- /dev/null
+++ b/client/src/app/shared/video/syndication.model.ts
@@ -0,0 +1,7 @@
+import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum'
+
+export interface Syndication {
+  format: FeedFormat,
+  label: string,
+  url: string
+}
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 5ff3926c4..388357343 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -20,6 +22,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   likesPercent: number
   dislikesPercent: number
 
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
   constructor (hash: VideoDetailsServerModel, translations = {}) {
     super(hash, translations)
 
@@ -32,6 +38,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.commentsEnabled = hash.commentsEnabled
     this.downloadEnabled = hash.downloadEnabled
 
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
+
     this.buildLikeAndDislikePercents()
   }
 
@@ -55,4 +64,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
     this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
   }
+
+  getHlsPlaylist () {
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+  }
 }
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 5bb0510f9..18c62a1f9 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -59,14 +59,14 @@ export class VideoEdit implements VideoUpdate {
     }
   }
 
-  patch (values: Object) {
+  patch (values: { [ id: string ]: string }) {
     Object.keys(values).forEach((key) => {
       this[ key ] = values[ key ]
     })
 
     // If schedule publication, the video is private and will be changed to public privacy
     if (parseInt(values['privacy'], 10) === VideoEdit.SPECIAL_SCHEDULED_PRIVACY) {
-      const updateAt = (values['schedulePublicationAt'] as Date)
+      const updateAt = new Date(values['schedulePublicationAt'])
       updateAt.setSeconds(0)
 
       this.privacy = VideoPrivacy.PRIVATE
diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss
deleted file mode 100644
index 385764be0..000000000
--- a/client/src/app/shared/video/video-feed.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import '_mixins';
-
-.video-feed {
-  a {
-    color: black;
-    display: block;
-  }
-
-  .icon {
-    @include icon(12px);
-
-    &.icon-syndication {
-      position: relative;
-      top: -2px;
-      background-color: var(--mainForegroundColor);
-      mask-image: url('../../../assets/images/global/syndication.svg');
-    }
-  }
-}
\ No newline at end of file
diff --git a/client/src/app/shared/video/video-feed.component.ts b/client/src/app/shared/video/video-feed.component.ts
deleted file mode 100644
index 6922153c0..000000000
--- a/client/src/app/shared/video/video-feed.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-video-feed',
-  styleUrls: [ './video-feed.component.scss' ],
-  templateUrl: './video-feed.component.html'
-})
-export class VideoFeedComponent {
-  @Input() syndicationItems
-}
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index cfc483018..2c635fa2f 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -7,6 +7,9 @@
       class="video-miniature-name"
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
     >
+      <span *ngIf="isUnlistedVideo()" class="badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivateVideo()" class="badge badge-danger" i18n>Private</span>
+
       {{ video.name }}
     </a>
 
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 895879adc..f44bdf9a9 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -50,10 +50,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 13px;
-      color: #585858;
+      color: $grey-foreground-color;
 
       &:hover {
-        color: #303030;
+        color: $grey-foreground-hover-color;
       }
     }
   }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 7e8692b0b..2f951a1f1 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
+import { VideoPrivacy } from '../../../../../shared'
 
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 
@@ -49,4 +50,12 @@ export class VideoMiniatureComponent implements OnInit {
   displayOwnerVideoChannel () {
     return this.ownerDisplayTypeChosen === 'videoChannel'
   }
+
+  isUnlistedVideo () {
+    return this.video.privacy.id === VideoPrivacy.UNLISTED
+  }
+
+  isPrivateVideo () {
+    return this.video.privacy.id === VideoPrivacy.PRIVATE
+  }
 }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index b92c96450..6ea83d13b 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -53,7 +53,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   channel: {
@@ -63,7 +63,7 @@ export class Video implements VideoServerModel {
     displayName: string
     url: string
     host: string
-    avatar: Avatar
+    avatar?: Avatar
   }
 
   userHistory?: {
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index c9d6da7a4..565aad93b 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -6,11 +6,11 @@ import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } fr
 import { ResultList } from '../../../../../shared/models/result-list.model'
 import {
   UserVideoRate,
+  UserVideoRateType,
   UserVideoRateUpdate,
   VideoConstant,
   VideoFilter,
   VideoPrivacy,
-  VideoRateType,
   VideoUpdate
 } from '../../../../../shared/models/videos'
 import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum'
@@ -275,9 +275,9 @@ export class VideoService implements VideosProvider {
 
   loadCompleteDescription (descriptionPath: string) {
     return this.authHttp
-               .get(environment.apiUrl + descriptionPath)
+               .get<{ description: string }>(environment.apiUrl + descriptionPath)
                .pipe(
-                 map(res => res[ 'description' ]),
+                 map(res => res.description),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -333,7 +333,7 @@ export class VideoService implements VideosProvider {
     return privacies
   }
 
-  private setVideoRate (id: number, rateType: VideoRateType) {
+  private setVideoRate (id: number, rateType: UserVideoRateType) {
     const url = VideoService.BASE_VIDEO_URL + id + '/rate'
     const body: UserVideoRateUpdate = {
       rating: rateType