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