Add miniature quick actions to add video to Watch later playlist

9 files changed, 148 insertions, 9 deletions

diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts
index d371a923f..55a5a6dde 100644
--- a/client/src/app/core/auth/auth-user.model.ts
+++ b/client/src/app/core/auth/auth-user.model.ts
@@ -5,6 +5,7 @@ import { User as ServerUserModel } from '../../../../../shared/models/users/user
 import { hasUserRight, UserRole } from '../../../../../shared/models/users/user-role'
 import { User } from '../../shared/users/user.model'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 
 export type TokenOptions = {
   accessToken: string
@@ -79,6 +80,7 @@ export class AuthUser extends User {
   }
 
   tokens: Tokens
+  specialPlaylists: Partial<VideoPlaylist>[]
 
   static load () {
     const usernameLocalStorage = peertubeLocalStorage.getItem(this.KEYS.USERNAME)
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index d601cadf5..9ae008e39 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -4,7 +4,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier } from '@app/core/notification/notifier.service'
-import { OAuthClientLocal, User as UserServerModel, UserRefreshToken } from '../../../../../shared'
+import { OAuthClientLocal, MyUser as UserServerModel, UserRefreshToken } from '../../../../../shared'
 import { User } from '../../../../../shared/models/users'
 import { UserLogin } from '../../../../../shared/models/users/user-login.model'
 import { environment } from '../../../environments/environment'
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index cf923492a..ffadc9aa4 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -28,13 +28,11 @@ export class LoginComponent extends FormReactive implements OnInit {
 
   constructor (
     protected formValidatorService: FormValidatorService,
-    private router: Router,
     private route: ActivatedRoute,
     private modalService: NgbModal,
     private loginValidatorsService: LoginValidatorsService,
     private authService: AuthService,
     private userService: UserService,
-    private serverService: ServerService,
     private redirectService: RedirectService,
     private notifier: Notifier,
     private i18n: I18n
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 8a4965926..17186cff4 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -10,6 +10,7 @@ const icons = {
   'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg'),
   'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg'),
   'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg'),
+  'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg'),
   'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg'),
   'no': require('!!raw-loader?!../../../assets/images/global/no.svg'),
   'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg'),
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 5f74dcd4c..fc3b77b2a 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -30,6 +30,7 @@ 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,
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index b302ebd0f..df15698c0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,9 +1,23 @@
 <a
   [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
   class="video-thumbnail"
+  (mouseenter)="load()"
 >
   <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
+  <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">
+        <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">
+        <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
+      </div>
+    </ng-container>
+  </div>
+
   <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
 
   <div class="play-overlay">
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index e48629778..aac50fd1b 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -18,16 +18,50 @@
     }
   }
 
+  .video-thumbnail-watch-later-overlay,
   .video-thumbnail-duration-overlay {
     @include static-thumbnail-overlay;
 
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    padding: 0 5px;
     border-radius: 3px;
     font-size: 12px;
     font-weight: $font-bold;
     z-index: 1;
   }
+
+  .video-thumbnail-duration-overlay {
+    position: absolute;
+    padding: 0 5px;
+    right: 5px;
+    bottom: 5px;
+  }
+
+  &:hover {
+    .video-thumbnail-actions-overlay {
+      opacity: 1;
+    }
+  }
+
+  .video-thumbnail-actions-overlay {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    right: 5px;
+    top: 5px;
+    opacity: 0;
+
+    div:not(:first-child) {
+      margin-top: 2px;
+    }
+
+    .video-thumbnail-watch-later-overlay {
+      padding: 3px;
+
+      my-global-icon {
+        width: 22px;
+        height: 22px;
+
+        @include apply-svg-color(#fff);
+      }
+    }
+  }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index fe65ade94..0f605e425 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -1,6 +1,14 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit, ChangeDetectorRef } 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 { VideoPlaylistType } from '@shared/models'
+import { forkJoin } from 'rxjs'
+import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
+import { VideoPlaylist } from '../video-playlist/video-playlist.model'
+import { VideoPlaylistElementCreate } from '../../../../../shared'
+import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
 
 @Component({
   selector: 'my-video-thumbnail',
@@ -13,7 +21,44 @@ export class VideoThumbnailComponent {
   @Input() routerLink: any[]
   @Input() queryParams: any[]
 
-  constructor (private screenService: ScreenService) {
+  addToWatchLaterText = 'Add to watch later'
+  addedToWatchLaterText = 'Added to watch later'
+  addedToWatchLater: boolean
+
+  watchLaterPlaylist: any
+
+  constructor (
+    private screenService: ScreenService,
+    private authService: AuthService,
+    private videoPlaylistService: VideoPlaylistService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  load () {
+    if (this.addedToWatchLater !== undefined) 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()
+          }
+        }
+      )
   }
 
   getImageUrl () {
@@ -39,4 +84,37 @@ 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
+
+    this.videoPlaylistService.removeVideoFromPlaylist(
+      this.watchLaterPlaylist.playlistId,
+      this.watchLaterPlaylist.playlistElementId
+    ).subscribe(
+      _ => {
+        this.addedToWatchLater = false
+      }
+    )
+  }
 }
diff --git a/client/src/assets/images/global/clock.svg b/client/src/assets/images/global/clock.svg
new file mode 100644
index 000000000..f2d4f0397
--- /dev/null
+++ b/client/src/assets/images/global/clock.svg
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-488.000000, -159.000000)" stroke="#000000" stroke-width="2">
+            <g id="31" transform="translate(488.000000, 159.000000)">
+                <path d="M12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 Z" id="Base"/>
+                <path d="M12,12 L16,12" id="Path-18" stroke-linecap="round"/>
+                <path d="M12,12 L12,7" id="Path-40" stroke-linecap="round" stroke-linejoin="round"/>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file