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