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