Move watch later logic in miniature

6 files changed, 120 insertions, 95 deletions

diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index fc3b77b2a..d78fdc09f 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -1,4 +1,4 @@
-import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators'
+import { bufferTime, catchError, distinctUntilChanged, filter, first, map, share, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Observable, ReplaySubject, Subject } from 'rxjs'
 import { RestExtractor } from '../rest/rest-extractor.service'
@@ -30,7 +30,6 @@ export class VideoPlaylistService {
   // Use a replay subject because we "next" a value before subscribing
   private videoExistsInPlaylistSubject: Subject<number> = new ReplaySubject(1)
   private readonly videoExistsInPlaylistObservable: Observable<VideoExistInPlaylist>
-  private cachedWatchLaterPlaylists: VideoPlaylist[]
 
   constructor (
     private authHttp: HttpClient,
@@ -39,6 +38,7 @@ export class VideoPlaylistService {
     private restService: RestService
   ) {
     this.videoExistsInPlaylistObservable = this.videoExistsInPlaylistSubject.pipe(
+      distinctUntilChanged(),
       bufferTime(500),
       filter(videoIds => videoIds.length !== 0),
       switchMap(videoIds => this.doVideosExistInPlaylist(videoIds)),
@@ -224,7 +224,7 @@ export class VideoPlaylistService {
     let params = new HttpParams()
     params = this.restService.addObjectParams(params, { videoIds })
 
-    return this.authHttp.get<VideoExistInPlaylist>(url, { params })
+    return this.authHttp.get<VideoExistInPlaylist>(url, { params, headers: { ignoreLoadingBar: '' } })
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 }
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index c6fd570b7..036825e61 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,5 +1,8 @@
 <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
-  <my-video-thumbnail #thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
+  <my-video-thumbnail
+    [video]="video" [nsfw]="isVideoBlur"
+    [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
+  ></my-video-thumbnail>
 
   <div class="video-bottom">
     <div class="video-miniature-information">
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index ba65d33b6..a603f87e5 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,12 +1,24 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnInit,
+  Output
+} from '@angular/core'
 import { User } from '../users'
 import { Video } from './video.model'
-import { ServerService } from '@app/core'
-import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared'
+import { AuthService, ServerService } from '@app/core'
+import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { VideoThumbnailComponent } from './video-thumbnail.component'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { forkJoin } from 'rxjs'
+import { first } from 'rxjs/operators'
 
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 export type MiniatureDisplayOptions = {
@@ -47,8 +59,6 @@ export class VideoMiniatureComponent implements OnInit {
   @Output() videoUnblacklisted = new EventEmitter()
   @Output() videoRemoved = new EventEmitter()
 
-  @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent
-
   videoActionsDisplayOptions: VideoActionsDisplayType = {
     playlist: true,
     download: false,
@@ -60,14 +70,28 @@ export class VideoMiniatureComponent implements OnInit {
   showActions = false
   serverConfig: ServerConfig
 
+  addToWatchLaterText: string
+  addedToWatchLaterText: string
+  inWatchLaterPlaylist: boolean
+
+  watchLaterPlaylist: {
+    id: number
+    playlistElementId?: number
+  }
+
   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
 
   constructor (
     private screenService: ScreenService,
     private serverService: ServerService,
     private i18n: I18n,
+    private authService: AuthService,
+    private videoPlaylistService: VideoPlaylistService,
+    private cd: ChangeDetectorRef,
     @Inject(LOCALE_ID) private localeId: string
-  ) { }
+  ) {
+
+  }
 
   get isVideoBlur () {
     return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
@@ -131,7 +155,8 @@ export class VideoMiniatureComponent implements OnInit {
 
   loadActions () {
     if (this.displayVideoActions) this.showActions = true
-    this.thumbnail.load()
+
+    this.loadWatchLater()
   }
 
   onVideoBlacklisted () {
@@ -146,6 +171,38 @@ export class VideoMiniatureComponent implements OnInit {
     this.videoRemoved.emit()
   }
 
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  onWatchLaterClick (currentState: boolean) {
+    if (currentState === true) this.removeFromWatchLater()
+    else this.addToWatchLater()
+
+    this.inWatchLaterPlaylist = !currentState
+  }
+
+  addToWatchLater () {
+    const body = { videoId: this.video.id }
+
+    this.videoPlaylistService.addVideoInPlaylist(this.watchLaterPlaylist.id, body).subscribe(
+      res => {
+        this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
+      }
+    )
+  }
+
+  removeFromWatchLater () {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId)
+        .subscribe(
+          _ => { /* empty */ }
+        )
+  }
+
+  isWatchLaterPlaylistDisplayed () {
+    return this.inWatchLaterPlaylist !== undefined
+  }
+
   private setUpBy () {
     if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
       this.ownerDisplayTypeChosen = this.ownerDisplayType
@@ -163,4 +220,29 @@ export class VideoMiniatureComponent implements OnInit {
       this.ownerDisplayTypeChosen = 'videoChannel'
     }
   }
+
+  private loadWatchLater () {
+    if (!this.isUserLoggedIn()) return
+
+    forkJoin([
+      this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id),
+      this.authService.userInformationLoaded.pipe(first())
+    ]).subscribe(
+      ([ existResult ]) => {
+        const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER)
+        const existsInWatchLater = existResult[ this.video.id ].find(r => r.playlistId === watchLaterPlaylist.id)
+        this.inWatchLaterPlaylist = false
+
+        this.watchLaterPlaylist = {
+          id: watchLaterPlaylist.id
+        }
+
+        if (existsInWatchLater) {
+          this.inWatchLaterPlaylist = true
+          this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId
+        }
+
+        this.cd.markForCheck()
+      })
+  }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 9679dfefb..c30a43557 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,18 +1,18 @@
 <a
   [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
   class="video-thumbnail"
-  (mouseenter)="load()" (focus)="load()"
 >
-  <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
+  <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" loading="lazy" />
 
-  <div *ngIf="isUserLoggedIn()" class="video-thumbnail-actions-overlay">
-    <ng-container *ngIf="addedToWatchLater !== true">
-      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="addToWatchLater();$event.stopPropagation();false">
+  <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
+    <ng-container *ngIf="inWatchLaterPlaylist !== true">
+      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
         <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
       </div>
     </ng-container>
-    <ng-container *ngIf="addedToWatchLater === true">
-      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="removeFromWatchLater();$event.stopPropagation();false">
+
+    <ng-container *ngIf="inWatchLaterPlaylist === true">
+      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
         <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
       </div>
     </ng-container>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index ad221d6ed..573a64987 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -35,13 +35,6 @@
     bottom: 5px;
   }
 
-  &:focus,
-  &:hover {
-    .video-thumbnail-actions-overlay {
-      opacity: 1;
-    }
-  }
-
   .video-thumbnail-actions-overlay {
     position: absolute;
     display: flex;
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index 6f9292d52..2420ec715 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -1,9 +1,7 @@
-import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Video } from './video.model'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { AuthService, ThemeService } from '@app/core'
-import { VideoPlaylistService } from '../video-playlist/video-playlist.service'
-import { VideoPlaylistElementCreate } from '../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-thumbnail',
@@ -16,45 +14,20 @@ export class VideoThumbnailComponent {
   @Input() routerLink: any[]
   @Input() queryParams: any[]
 
-  addToWatchLaterText = 'Add to watch later'
-  addedToWatchLaterText = 'Added to watch later'
-  addedToWatchLater: boolean
+  @Input() displayWatchLaterPlaylist: boolean
+  @Input() inWatchLaterPlaylist: boolean
 
-  watchLaterPlaylist: any
+  @Output() watchLaterClick = new EventEmitter<boolean>()
+
+  addToWatchLaterText: string
+  addedToWatchLaterText: string
 
   constructor (
     private screenService: ScreenService,
-    private authService: AuthService,
-    private videoPlaylistService: VideoPlaylistService,
-    private cd: ChangeDetectorRef
-  ) {}
-
-  load () {
-    if (this.addedToWatchLater !== undefined) return
-    if (!this.isUserLoggedIn()) return
-
-    this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
-      .subscribe(
-        existResult => {
-          for (const playlist of this.authService.getUser().specialPlaylists) {
-            const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
-            this.addedToWatchLater = !!existingPlaylist
-
-            if (existingPlaylist) {
-              this.watchLaterPlaylist = {
-                playlistId: existingPlaylist.playlistId,
-                playlistElementId: existingPlaylist.playlistElementId
-              }
-            } else {
-              this.watchLaterPlaylist = {
-                playlistId: playlist.id
-              }
-            }
-
-            this.cd.markForCheck()
-          }
-        }
-      )
+    private i18n: I18n
+  ) {
+    this.addToWatchLaterText = this.i18n('Add to watch later')
+    this.addedToWatchLaterText = this.i18n('Remove from watch later')
   }
 
   getImageUrl () {
@@ -81,36 +54,10 @@ export class VideoThumbnailComponent {
     return [ '/videos/watch', this.video.uuid ]
   }
 
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  addToWatchLater () {
-    if (this.addedToWatchLater === undefined) return
-    this.addedToWatchLater = true
-
-    this.videoPlaylistService.addVideoInPlaylist(
-      this.watchLaterPlaylist.playlistId,
-      { videoId: this.video.id } as VideoPlaylistElementCreate
-    ).subscribe(
-      res => {
-        this.addedToWatchLater = true
-        this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
-      }
-    )
-  }
-
-  removeFromWatchLater () {
-    if (this.addedToWatchLater === undefined) return
-    this.addedToWatchLater = false
+  onWatchLaterClick (event: Event) {
+    this.watchLaterClick.emit(this.inWatchLaterPlaylist)
 
-    this.videoPlaylistService.removeVideoFromPlaylist(
-      this.watchLaterPlaylist.playlistId,
-      this.watchLaterPlaylist.playlistElementId
-    ).subscribe(
-      _ => {
-        this.addedToWatchLater = false
-      }
-    )
+    event.stopPropagation()
+    return false
   }
 }