video add to playlist component -> onpush strategy

client/src/app/shared/forms/peertube-checkbox.component.scss

@@ -28,4 +28,4 @@
     position: relative;
     top: -2px;
   }
-}
+}

client/src/app/shared/forms/peertube-checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 
 @Component({
@@ -21,10 +21,19 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
   @Input() helpHtml: string
   @Input() disabled = false
 
+  // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
+  @Input() onPushWorkaround = false
+
+  constructor (private cdr: ChangeDetectorRef) { }
+
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (checked: boolean) {
     this.checked = checked
+
+    if (this.onPushWorkaround) {
+      this.cdr.markForCheck()
+    }
   }
 
   registerOnChange (fn: (_: any) => void) {

client/src/app/shared/misc/screen.service.ts

@@ -18,6 +18,10 @@ export class ScreenService {
     return this.getWindowInnerWidth() < 500
   }
 
+  isInTouchScreen () {
+    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+  }
+
   // Cache window inner width, because it's an expensive call
   private getWindowInnerWidth () {
     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()

client/src/app/shared/video-playlist/video-add-to-playlist.component.html

@@ -42,7 +42,7 @@
   </div>
 
   <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
-    <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist"></my-peertube-checkbox>
+    <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
 
     <div class="display-name">
       {{ playlist.displayName }}
@@ -56,7 +56,7 @@
   <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
     <my-global-icon iconName="add"></my-global-icon>
 
-    Create a new playlist
+    Create a private playlist
   </div>
 
   <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">

client/src/app/shared/video-playlist/video-add-to-playlist.component.scss

@@ -40,6 +40,7 @@
 
   .options-row {
     margin-top: 10px;
+    padding-left: 10px;
 
     > div {
       display: flex;

client/src/app/shared/video-playlist/video-add-to-playlist.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { AuthService, Notifier } from '@app/core'
 import { forkJoin } from 'rxjs'
@@ -19,7 +19,8 @@ type PlaylistSummary = {
 @Component({
   selector: 'my-video-add-to-playlist',
   styleUrls: [ './video-add-to-playlist.component.scss' ],
-  templateUrl: './video-add-to-playlist.component.html'
+  templateUrl: './video-add-to-playlist.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
   @Input() video: Video
@@ -42,7 +43,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
     private notifier: Notifier,
     private i18n: I18n,
     private videoPlaylistService: VideoPlaylistService,
-    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private cd: ChangeDetectorRef
   ) {
     super()
   }
@@ -79,6 +81,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
               stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
             })
           }
+
+          this.cd.markForCheck()
         }
       )
   }
@@ -107,6 +111,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
 
     playlist.inPlaylist = !playlist.inPlaylist
     this.resetOptions()
+
+    this.cd.markForCheck()
   }
 
   createPlaylist () {
@@ -126,6 +132,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
         })
 
         this.isNewPlaylistBlockOpened = false
+
+        this.cd.markForCheck()
       },
 
       err => this.notifier.error(err.message)
@@ -165,7 +173,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
             this.notifier.error(err.message)
 
             playlist.inPlaylist = true
-          }
+          },
+
+          () => this.cd.markForCheck()
         )
   }
 
@@ -194,7 +204,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
           this.notifier.error(err.message)
 
           playlist.inPlaylist = false
-        }
+        },
+
+        () => this.cd.markForCheck()
       )
   }
 }

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()" />

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,

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
 

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;
+      }
     }
   }
 }

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
     }
   }