Playlist videos component

6 files changed, 16 insertions, 7 deletions

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 114b1d71f..6999474d6 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -3,7 +3,7 @@
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
     ngbDropdownToggle role="button"
   >
-    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
+    <my-global-icon *ngIf="!label" class="more-icon" iconName="more-horizontal"></my-global-icon>
     <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 3fda7ee4d..093e88033 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -23,7 +23,8 @@ const icons = {
   'dislike': require('../../../assets/images/video/dislike.html'),
   'heart': require('../../../assets/images/video/heart.html'),
   'like': require('../../../assets/images/video/like.html'),
-  'more': require('../../../assets/images/video/more.html'),
+  'more-horizontal': require('../../../assets/images/global/more-horizontal.html'),
+  'more-vertical': require('../../../assets/images/global/more-vertical.html'),
   'share': require('../../../assets/images/video/share.html'),
   'upload': require('../../../assets/images/video/upload.html'),
   'playlist-add': require('../../../assets/images/video/playlist-add.html')
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index ed3cd8dc5..f85e50d6d 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -2,10 +2,10 @@
   <div class="first-row">
     <div i18n class="title">Save to</div>
 
-    <div i18n class="options" (click)="displayOptions = !displayOptions">
+    <div class="options" (click)="displayOptions = !displayOptions">
       <my-global-icon iconName="cog"></my-global-icon>
 
-      Options
+      <span i18n>Options</span>
     </div>
   </div>
 
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index 68dcda1eb..bc0d55912 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -18,6 +18,8 @@
     }
 
     .options {
+      display: flex;
+      align-items: center;
       font-size: 14px;
       cursor: pointer;
 
@@ -25,7 +27,8 @@
         @include apply-svg-color(#333);
 
         width: 16px;
-        height: 16px;
+        height: 23px;
+        margin-right: 3px;
       }
     }
   }
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index f8cd47f73..72158eb10 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -29,7 +29,8 @@
       padding: 0 10px;
       display: flex;
       align-items: center;
-      font-size: 15px;
+      font-size: 14px;
+      font-weight: $font-semibold;
     }
   }
 
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index c936a8207..95b5e3671 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,5 +1,5 @@
 import { User } from '../'
-import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
+import { PlaylistElement, Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
 import { durationToString, getAbsoluteAPIUrl } from '../misc/utils'
@@ -47,6 +47,8 @@ export class Video implements VideoServerModel {
   blacklisted?: boolean
   blacklistedReason?: string
 
+  playlistElement?: PlaylistElement
+
   account: {
     id: number
     uuid: string
@@ -125,6 +127,8 @@ export class Video implements VideoServerModel {
     this.blacklistedReason = hash.blacklistedReason
 
     this.userHistory = hash.userHistory
+
+    this.playlistElement = hash.playlistElement
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {