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