video add to playlist component -> onpush strategy

5 files changed, 11 insertions, 4 deletions

diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 2bb5d6d37..dd01c1388 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -9,7 +9,7 @@
       <div class="input-group input-group-sm">
         <div class="input-group-prepend peertube-select-container">
           <select [(ngModel)]="resolutionId">
-            <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
+            <option *ngFor="let file of video?.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
           </select>
         </div>
         <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index 64aaeb3c8..d6d10d29e 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -15,7 +15,7 @@ export class VideoDownloadComponent {
   downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
   resolutionId: number | string = -1
 
-  private video: VideoDetails
+  video: VideoDetails
 
   constructor (
     private notifier: Notifier,
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index 90bdf7df8..787ef1188 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -46,7 +46,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
     delete: true,
     report: true
   }
-  @Input() placement: string = 'left'
+  @Input() placement = 'left'
 
   @Input() label: string
 
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 0d4e59c2a..fa2739f00 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -99,6 +99,7 @@
 
     .video-miniature-information {
       width: auto;
+      min-width: 500px;
 
       .video-miniature-name {
         @include ellipsis-multiline(1.3em, 2);
@@ -111,6 +112,7 @@
       .video-miniature-account,
       .video-miniature-channel {
         font-size: 14px;
+        width: fit-content;
       }
 
       .video-info-privacy {
@@ -134,6 +136,10 @@
       my-video-thumbnail {
         margin-right: 0;
       }
+
+      .video-miniature-information {
+        min-width: initial;
+      }
     }
   }
 }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index e3552abba..e32b8cbc5 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -72,7 +72,8 @@ export class VideoMiniatureComponent implements OnInit {
   ngOnInit () {
     this.setUpBy()
 
-    if (this.screenService.isInSmallView()) {
+    // We rely on mouseenter to lazy load actions
+    if (this.screenService.isInTouchScreen()) {
       this.showActions = true
     }
   }