Optimize video miniature dropdown

client/src/app/shared/shared-main/buttons/action-dropdown.component.html

@@ -1,4 +1,7 @@
-<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
+<div
+  *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-root"
+  ngbDropdown (openChange)="openChange.emit($event)" [placement]="placement" [container]="container"
+>
   <button
     class="action-button peertube-button"
     [ngClass]="{ 'icon-only': !label, 'peertube-button-small': buttonSize === 'small', 'secondary-button': buttonStyled && theme === 'secondary', 'primary-button': buttonStyled && theme === 'primary' }"

client/src/app/shared/shared-main/buttons/action-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'
 import { Params, RouterLink } from '@angular/router'
 import { GlobalIconName } from '@app/shared/shared-icons/global-icon.component'
 import { GlobalIconComponent } from '../../shared-icons/global-icon.component'
@@ -61,6 +61,8 @@ export class ActionDropdownComponent<T> {
   @Input() label: string
   @Input() theme: DropdownTheme = 'secondary'
 
+  @Output() openChange = new EventEmitter<boolean>()
+
   getActions (): DropdownAction<T>[][] {
     if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
 

client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html

@@ -1,21 +1,23 @@
 <ng-container *ngIf="videoActions.length !== 0">
 
   <div
+    *ngIf="isUserLoggedIn() && displayOptions.playlist"
     role="button" aria-label="Open video actions" i18n-aria-label
     class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
-    *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)"
   >
     <span class="anchor" ngbDropdownAnchor></span>
 
     <div ngbDropdownMenu>
-      <my-video-add-to-playlist #playlistAdd [video]="video" [lazyLoad]="true"></my-video-add-to-playlist>
+      @defer (when dropdownOpened) {
+        <my-video-add-to-playlist #playlistAdd [video]="video"></my-video-add-to-playlist>
+      }
     </div>
   </div>
 
   <my-action-dropdown
-    [actions]="videoActions" [label]="label" [entry]="{ video: video }" (click)="loadDropdownInformation()"
+    [actions]="videoActions" [label]="label" [entry]="{ video: video }"
     [buttonSize]="buttonSize" [placement]="placement" [buttonDirection]="buttonDirection" [buttonStyled]="buttonStyled"
-    container="body"
+    container="body" (openChange)="dropdownOpened = true"
   ></my-action-dropdown>
 
   <my-video-download #videoDownloadModal></my-video-download>

client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts

@@ -114,7 +114,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
 
   videoActions: DropdownAction<{ video: Video }>[][] = []
 
-  private loaded = false
+  dropdownOpened = false
+
   private hasMutedAccount = false
 
   constructor (
@@ -135,12 +136,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
   }
 
   ngOnChanges () {
-    console.log('on changes')
-
-    if (this.loaded) {
-      this.loaded = false
-      if (this.playlistAdd) this.playlistAdd.reload()
-    }
+    if (this.playlistAdd) this.playlistAdd.reload()
 
     this.buildActions()
   }
@@ -149,14 +145,6 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.authService.isLoggedIn()
   }
 
-  loadDropdownInformation () {
-    if (this.loaded === true) return
-
-    this.loaded = true
-
-    if (this.displayOptions.playlist) this.playlistAdd.load()
-  }
-
   // ---------------------------------------------------------------------------
   // Show modals
   // ---------------------------------------------------------------------------

client/src/app/shared/shared-video-miniature/video-miniature.component.ts

@@ -300,7 +300,10 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   isWatchLaterPlaylistDisplayed () {
-    return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
+    return !this.screenService.isInTouchScreen() &&
+      this.displayVideoActions &&
+      this.isUserLoggedIn() &&
+      this.inWatchLaterPlaylist !== undefined
   }
 
   getClasses () {
@@ -320,7 +323,7 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   private loadWatchLater () {
-    if (!this.isUserLoggedIn() || this.inWatchLaterPlaylist !== undefined) return
+    if (this.screenService.isInTouchScreen() || !this.displayVideoActions || !this.isUserLoggedIn()) return
 
     this.authService.userInformationLoaded
         .pipe(switchMap(() => this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)))

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

@@ -70,6 +70,7 @@ my-timestamp-input {
     margin: 0;
     font-weight: $font-regular;
     cursor: pointer;
+    font-size: 1rem;
   }
 
   .optional-row-icon {

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

@@ -59,7 +59,6 @@ type PlaylistSummary = {
 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges, OnDestroy, DisableForReuseHook {
   @Input() video: Video
   @Input() currentVideoTimestamp: number
-  @Input() lazyLoad = false
 
   isNewPlaylistBlockOpened = false
 
@@ -104,8 +103,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
     this.videoPlaylistSearchChanged
         .pipe(debounceTime(500))
         .subscribe(() => this.load())
-
-    if (this.lazyLoad === false) this.load()
   }
 
   ngOnChanges (simpleChanges: SimpleChanges) {
@@ -150,12 +147,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
         })
   }
 
-  openChange (opened: boolean) {
-    if (opened === false) {
-      this.isNewPlaylistBlockOpened = false
-    }
-  }
-
   openCreateBlock (event: Event) {
     event.preventDefault()