From 292976502588fecd19f9d62553df31f58bf8712e Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 26 Nov 2024 10:52:44 +0100
Subject: [PATCH] Optimize video miniature dropdown

---
 .../buttons/action-dropdown.component.html     |  5 ++++-
 .../buttons/action-dropdown.component.ts       |  4 +++-
 .../video-actions-dropdown.component.html      | 10 ++++++----
 .../video-actions-dropdown.component.ts        | 18 +++---------------
 .../video-miniature.component.ts               |  7 +++++--
 .../video-add-to-playlist.component.scss       |  1 +
 .../video-add-to-playlist.component.ts         |  9 ---------
 7 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index bc7a05ad3..83b7bc789 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/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' }"
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 5eaf90b5e..ab489a6a3 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/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>[][]
 
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
index 3fea2a8a4..a9fd911ac 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index 38c7c387a..8c293d97f 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/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
   // ---------------------------------------------------------------------------
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 2b220e307..3c2e8e5c2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/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)))
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index e2afee7a8..d57b6a9e5 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/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 {
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index 99dd565e6..423d5af0c 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/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()