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

   1 import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core'
   2 import { Video } from './video.model'
   3 import { ScreenService } from '@app/shared/misc/screen.service'
   4 import { AuthService, ThemeService } from '@app/core'
   5 import { VideoPlaylistService } from '../video-playlist/video-playlist.service'
   6 import { VideoPlaylistType } from '@shared/models'
   7 import { forkJoin } from 'rxjs'
   8 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
   9 import { VideoPlaylist } from '../video-playlist/video-playlist.model'
  10 import { VideoPlaylistElementCreate } from '../../../../../shared'
  11 import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
  12
  13 @Component({
  14   selector: 'my-video-thumbnail',
  15   styleUrls: [ './video-thumbnail.component.scss' ],
  16   templateUrl: './video-thumbnail.component.html'
  17 })
  18 export class VideoThumbnailComponent {
  19   @Input() video: Video
  20   @Input() nsfw = false
  21   @Input() routerLink: any[]
  22   @Input() queryParams: any[]
  23
  24   addToWatchLaterText = 'Add to watch later'
  25   addedToWatchLaterText = 'Added to watch later'
  26   addedToWatchLater: boolean
  27
  28   watchLaterPlaylist: any
  29
  30   constructor (
  31     private screenService: ScreenService,
  32     private authService: AuthService,
  33     private videoPlaylistService: VideoPlaylistService,
  34     private cd: ChangeDetectorRef
  35   ) {}
  36
  37   load () {
  38     if (this.addedToWatchLater !== undefined) return
  39
  40     this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
  41       .subscribe(
  42         existResult => {
  43           for (const playlist of this.authService.getUser().specialPlaylists) {
  44             const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
  45             this.addedToWatchLater = !!existingPlaylist
  46
  47             if (existingPlaylist) {
  48               this.watchLaterPlaylist = {
  49                 playlistId: existingPlaylist.playlistId,
  50                 playlistElementId: existingPlaylist.playlistElementId
  51               }
  52             } else {
  53               this.watchLaterPlaylist = {
  54                 playlistId: playlist.id
  55               }
  56             }
  57
  58             this.cd.markForCheck()
  59           }
  60         }
  61       )
  62   }
  63
  64   getImageUrl () {
  65     if (!this.video) return ''
  66
  67     if (this.screenService.isInMobileView()) {
  68       return this.video.previewUrl
  69     }
  70
  71     return this.video.thumbnailUrl
  72   }
  73
  74   getProgressPercent () {
  75     if (!this.video.userHistory) return 0
  76
  77     const currentTime = this.video.userHistory.currentTime
  78
  79     return (currentTime / this.video.duration) * 100
  80   }
  81
  82   getVideoRouterLink () {
  83     if (this.routerLink) return this.routerLink
  84
  85     return [ '/videos/watch', this.video.uuid ]
  86   }
  87
  88   isUserLoggedIn () {
  89     return this.authService.isLoggedIn()
  90   }
  91
  92   addToWatchLater () {
  93     if (this.addedToWatchLater === undefined) return
  94     this.addedToWatchLater = true
  95
  96     this.videoPlaylistService.addVideoInPlaylist(
  97       this.watchLaterPlaylist.playlistId,
  98       { videoId: this.video.id } as VideoPlaylistElementCreate
  99     ).subscribe(
 100       res => {
 101         this.addedToWatchLater = true
 102         this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
 103       }
 104     )
 105   }
 106
 107   removeFromWatchLater () {
 108     if (this.addedToWatchLater === undefined) return
 109     this.addedToWatchLater = false
 110
 111     this.videoPlaylistService.removeVideoFromPlaylist(
 112       this.watchLaterPlaylist.playlistId,
 113       this.watchLaterPlaylist.playlistElementId
 114     ).subscribe(
 115       _ => {
 116         this.addedToWatchLater = false
 117       }
 118     )
 119   }
 120 }