client: show private badge in playlists

closes #2601

3 files changed, 26 insertions, 7 deletions

diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 9cdee96b4..2400a4c25 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -15,10 +15,14 @@
 
     <div class="video-info">
       <ng-container *ngIf="playlistElement.video">
-        <a tabindex="-1" class="video-info-name"
-          [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
-          [attr.title]="playlistElement.video.name"
-        >{{ playlistElement.video.name }}</a>
+        <div class="video-info-header">
+          <a tabindex="-1" class="video-info-name"
+            [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+            [attr.title]="playlistElement.video.name"
+          >{{ playlistElement.video.name }}</a>
+
+          <span *ngIf="isVideoPrivate()" class="badge badge-yellow">Private</span>
+        </div>
 
         <span class="video-miniature-created-at-views">
           <my-date-toggle [date]="playlistElement.video.publishedAt"></my-date-toggle>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index c476b3ac1..fbf67e892 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -82,8 +82,19 @@ my-video-thumbnail,
       align-self: flex-start;
       min-width: 0;
 
-      a {
-        width: auto;
+      .video-info-header {
+        display: flex;
+        align-items: baseline;
+
+        a {
+          width: auto;
+          padding-right: 5px;
+        }
+
+        .badge {
+          @include peertube-badge;
+          margin-right: 5px;
+        }
       }
 
       .video-info-account,
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index ea58d7f76..7a2574345 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -3,7 +3,7 @@ import { AuthService, Notifier, ServerService } from '@app/core'
 import { Video } from '@app/shared/shared-main'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { secondsToTime } from '@shared/core-utils'
-import { HTMLServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
+import { HTMLServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate, VideoPrivacy } from '@shared/models'
 import { VideoPlaylistElement } from './video-playlist-element.model'
 import { VideoPlaylist } from './video-playlist.model'
 import { VideoPlaylistService } from './video-playlist.service'
@@ -51,6 +51,10 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
     this.serverConfig = this.serverService.getHTMLConfig()
   }
 
+  isVideoPrivate () {
+    return this.playlistElement.video.privacy.id === VideoPrivacy.PRIVATE
+  }
+
   isUnavailable (e: VideoPlaylistElement) {
     return e.type === VideoPlaylistElementType.UNAVAILABLE
   }