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

   1 import { switchMap } from 'rxjs/operators'
   2 import {
   3   ChangeDetectionStrategy,
   4   ChangeDetectorRef,
   5   Component,
   6   EventEmitter,
   7   Inject,
   8   Input,
   9   LOCALE_ID,
  10   OnInit,
  11   Output
  12 } from '@angular/core'
  13 import { AuthService, ScreenService, ServerService, User } from '@app/core'
  14 import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
  15 import { Video } from '../shared-main'
  16 import { VideoPlaylistService } from '../shared-video-playlist'
  17 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
  18
  19 export type MiniatureDisplayOptions = {
  20   date?: boolean
  21   views?: boolean
  22   by?: boolean
  23   avatar?: boolean
  24   privacyLabel?: boolean
  25   privacyText?: boolean
  26   state?: boolean
  27   blacklistInfo?: boolean
  28   nsfw?: boolean
  29 }
  30 export type VideoLinkType = 'internal' | 'lazy-load' | 'external'
  31
  32 @Component({
  33   selector: 'my-video-miniature',
  34   styleUrls: [ './video-miniature.component.scss' ],
  35   templateUrl: './video-miniature.component.html',
  36   changeDetection: ChangeDetectionStrategy.OnPush
  37 })
  38 export class VideoMiniatureComponent implements OnInit {
  39   @Input() user: User
  40   @Input() video: Video
  41
  42   @Input() displayOptions: MiniatureDisplayOptions = {
  43     date: true,
  44     views: true,
  45     by: true,
  46     avatar: false,
  47     privacyLabel: false,
  48     privacyText: false,
  49     state: false,
  50     blacklistInfo: false
  51   }
  52   @Input() displayVideoActions = true
  53
  54   @Input() displayAsRow = false
  55
  56   @Input() videoLinkType: VideoLinkType = 'internal'
  57
  58   @Output() videoBlocked = new EventEmitter()
  59   @Output() videoUnblocked = new EventEmitter()
  60   @Output() videoRemoved = new EventEmitter()
  61   @Output() videoAccountMuted = new EventEmitter()
  62
  63   videoActionsDisplayOptions: VideoActionsDisplayType = {
  64     playlist: true,
  65     download: false,
  66     update: true,
  67     blacklist: true,
  68     delete: true,
  69     report: true,
  70     duplicate: true,
  71     mute: true
  72   }
  73   showActions = false
  74   serverConfig: ServerConfig
  75
  76   addToWatchLaterText: string
  77   addedToWatchLaterText: string
  78   inWatchLaterPlaylist: boolean
  79   channelLinkTitle = ''
  80
  81   watchLaterPlaylist: {
  82     id: number
  83     playlistElementId?: number
  84   }
  85
  86   videoRouterLink: any[] = []
  87   videoHref: string
  88   videoTarget: string
  89
  90   private ownerDisplayType: 'account' | 'videoChannel'
  91
  92   constructor (
  93     private screenService: ScreenService,
  94     private serverService: ServerService,
  95     private authService: AuthService,
  96     private videoPlaylistService: VideoPlaylistService,
  97     private cd: ChangeDetectorRef,
  98     @Inject(LOCALE_ID) private localeId: string
  99   ) {}
 100
 101   get isVideoBlur () {
 102     return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
 103   }
 104
 105   ngOnInit () {
 106     this.serverConfig = this.serverService.getTmpConfig()
 107     this.serverService.getConfig()
 108         .subscribe(config => {
 109           this.serverConfig = config
 110           this.buildVideoLink()
 111         })
 112
 113     this.setUpBy()
 114
 115     this.channelLinkTitle = $localize`${this.video.channel.name} (channel page)`
 116
 117     // We rely on mouseenter to lazy load actions
 118     if (this.screenService.isInTouchScreen()) {
 119       this.loadActions()
 120     }
 121   }
 122
 123   buildVideoLink () {
 124     if (this.videoLinkType === 'internal' || !this.video.url) {
 125       this.videoRouterLink = [ '/videos/watch', this.video.uuid ]
 126       return
 127     }
 128
 129     if (this.videoLinkType === 'external') {
 130       this.videoRouterLink = null
 131       this.videoHref = this.video.url
 132       this.videoTarget = '_blank'
 133       return
 134     }
 135
 136     // Lazy load
 137     this.videoRouterLink = [ '/search/lazy-load-video', { url: this.video.url } ]
 138   }
 139
 140   displayOwnerAccount () {
 141     return this.ownerDisplayType === 'account'
 142   }
 143
 144   displayOwnerVideoChannel () {
 145     return this.ownerDisplayType === 'videoChannel'
 146   }
 147
 148   isUnlistedVideo () {
 149     return this.video.privacy.id === VideoPrivacy.UNLISTED
 150   }
 151
 152   isPrivateVideo () {
 153     return this.video.privacy.id === VideoPrivacy.PRIVATE
 154   }
 155
 156   getStateLabel (video: Video) {
 157     if (!video.state) return ''
 158
 159     if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
 160       return $localize`Published`
 161     }
 162
 163     if (video.scheduledUpdate) {
 164       const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
 165       return $localize`Publication scheduled on ` + updateAt
 166     }
 167
 168     if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
 169       return $localize`Waiting transcoding`
 170     }
 171
 172     if (video.state.id === VideoState.TO_TRANSCODE) {
 173       return $localize`To transcode`
 174     }
 175
 176     if (video.state.id === VideoState.TO_IMPORT) {
 177       return $localize`To import`
 178     }
 179
 180     return ''
 181   }
 182
 183   loadActions () {
 184     if (this.displayVideoActions) this.showActions = true
 185
 186     this.loadWatchLater()
 187   }
 188
 189   onVideoBlocked () {
 190     this.videoBlocked.emit()
 191   }
 192
 193   onVideoUnblocked () {
 194     this.videoUnblocked.emit()
 195   }
 196
 197   onVideoRemoved () {
 198     this.videoRemoved.emit()
 199   }
 200
 201   onVideoAccountMuted () {
 202     this.videoAccountMuted.emit()
 203   }
 204
 205   isUserLoggedIn () {
 206     return this.authService.isLoggedIn()
 207   }
 208
 209   onWatchLaterClick (currentState: boolean) {
 210     if (currentState === true) this.removeFromWatchLater()
 211     else this.addToWatchLater()
 212
 213     this.inWatchLaterPlaylist = !currentState
 214   }
 215
 216   addToWatchLater () {
 217     const body = { videoId: this.video.id }
 218
 219     this.videoPlaylistService.addVideoInPlaylist(this.watchLaterPlaylist.id, body).subscribe(
 220       res => {
 221         this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
 222       }
 223     )
 224   }
 225
 226   removeFromWatchLater () {
 227     this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId, this.video.id)
 228         .subscribe(
 229           _ => { /* empty */ }
 230         )
 231   }
 232
 233   isWatchLaterPlaylistDisplayed () {
 234     return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
 235   }
 236
 237   getClasses () {
 238     return {
 239       'display-as-row': this.displayAsRow
 240     }
 241   }
 242
 243   private setUpBy () {
 244     const accountName = this.video.account.name
 245
 246     // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
 247     // Or has not been customized (default created channel display name)
 248     // -> Use the account name
 249     if (
 250       this.video.channel.displayName === `Default ${accountName} channel` ||
 251       this.video.channel.displayName === `Main ${accountName} channel` ||
 252       this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
 253     ) {
 254       this.ownerDisplayType = 'account'
 255     } else {
 256       this.ownerDisplayType = 'videoChannel'
 257     }
 258   }
 259
 260   private loadWatchLater () {
 261     if (!this.isUserLoggedIn() || this.inWatchLaterPlaylist !== undefined) return
 262
 263     this.authService.userInformationLoaded
 264         .pipe(switchMap(() => this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)))
 265         .subscribe(existResult => {
 266           const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER)
 267           const existsInWatchLater = existResult.find(r => r.playlistId === watchLaterPlaylist.id)
 268           this.inWatchLaterPlaylist = false
 269
 270           this.watchLaterPlaylist = {
 271             id: watchLaterPlaylist.id
 272           }
 273
 274           if (existsInWatchLater) {
 275             this.inWatchLaterPlaylist = true
 276             this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId
 277           }
 278
 279           this.cd.markForCheck()
 280         })
 281
 282     this.videoPlaylistService.runPlaylistCheck(this.video.id)
 283   }
 284 }