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