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