client/src/app/shared/video/video-miniature.component.ts

   1 import {
   2   ChangeDetectionStrategy,
   3   ChangeDetectorRef,
   4   Component,
   5   EventEmitter,
   6   Inject,
   7   Input,
   8   LOCALE_ID,
   9   OnInit,
  10   Output
  11 } from '@angular/core'
  12 import { User } from '../users'
  13 import { Video } from './video.model'
  14 import { AuthService, ServerService } from '@app/core'
  15 import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared'
  16 import { I18n } from '@ngx-translate/i18n-polyfill'
  17 import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
  18 import { ScreenService } from '@app/shared/misc/screen.service'
  19 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
  20 import { switchMap } from 'rxjs/operators'
  21
  22 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
  23 export type MiniatureDisplayOptions = {
  24   date?: boolean
  25   views?: boolean
  26   by?: boolean
  27   privacyLabel?: boolean
  28   privacyText?: boolean
  29   state?: boolean
  30   blacklistInfo?: boolean
  31   nsfw?: boolean
  32 }
  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() ownerDisplayType: OwnerDisplayType = 'account'
  45   @Input() displayOptions: MiniatureDisplayOptions = {
  46     date: true,
  47     views: true,
  48     by: true,
  49     privacyLabel: false,
  50     privacyText: false,
  51     state: false,
  52     blacklistInfo: false
  53   }
  54   @Input() displayAsRow = false
  55   @Input() displayVideoActions = true
  56
  57   @Output() videoBlacklisted = new EventEmitter()
  58   @Output() videoUnblacklisted = new EventEmitter()
  59   @Output() videoRemoved = new EventEmitter()
  60
  61   videoActionsDisplayOptions: VideoActionsDisplayType = {
  62     playlist: true,
  63     download: false,
  64     update: true,
  65     blacklist: true,
  66     delete: true,
  67     report: true,
  68     duplicate: false
  69   }
  70   showActions = false
  71   serverConfig: ServerConfig
  72
  73   addToWatchLaterText: string
  74   addedToWatchLaterText: string
  75   inWatchLaterPlaylist: boolean
  76
  77   watchLaterPlaylist: {
  78     id: number
  79     playlistElementId?: number
  80   }
  81
  82   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
  83
  84   constructor (
  85     private screenService: ScreenService,
  86     private serverService: ServerService,
  87     private i18n: I18n,
  88     private authService: AuthService,
  89     private videoPlaylistService: VideoPlaylistService,
  90     private cd: ChangeDetectorRef,
  91     @Inject(LOCALE_ID) private localeId: string
  92   ) {
  93
  94   }
  95
  96   get isVideoBlur () {
  97     return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
  98   }
  99
 100   ngOnInit () {
 101     this.serverConfig = this.serverService.getTmpConfig()
 102     this.serverService.getConfig()
 103         .subscribe(config => this.serverConfig = config)
 104
 105     this.setUpBy()
 106
 107     // We rely on mouseenter to lazy load actions
 108     if (this.screenService.isInTouchScreen()) {
 109       this.loadActions()
 110     }
 111   }
 112
 113   displayOwnerAccount () {
 114     return this.ownerDisplayTypeChosen === 'account'
 115   }
 116
 117   displayOwnerVideoChannel () {
 118     return this.ownerDisplayTypeChosen === 'videoChannel'
 119   }
 120
 121   isUnlistedVideo () {
 122     return this.video.privacy.id === VideoPrivacy.UNLISTED
 123   }
 124
 125   isPrivateVideo () {
 126     return this.video.privacy.id === VideoPrivacy.PRIVATE
 127   }
 128
 129   getStateLabel (video: Video) {
 130     if (!video.state) return ''
 131
 132     if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
 133       return this.i18n('Published')
 134     }
 135
 136     if (video.scheduledUpdate) {
 137       const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
 138       return this.i18n('Publication scheduled on ') + updateAt
 139     }
 140
 141     if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
 142       return this.i18n('Waiting transcoding')
 143     }
 144
 145     if (video.state.id === VideoState.TO_TRANSCODE) {
 146       return this.i18n('To transcode')
 147     }
 148
 149     if (video.state.id === VideoState.TO_IMPORT) {
 150       return this.i18n('To import')
 151     }
 152
 153     return ''
 154   }
 155
 156   loadActions () {
 157     if (this.displayVideoActions) this.showActions = true
 158
 159     this.loadWatchLater()
 160   }
 161
 162   onVideoBlacklisted () {
 163     this.videoBlacklisted.emit()
 164   }
 165
 166   onVideoUnblacklisted () {
 167     this.videoUnblacklisted.emit()
 168   }
 169
 170   onVideoRemoved () {
 171     this.videoRemoved.emit()
 172   }
 173
 174   isUserLoggedIn () {
 175     return this.authService.isLoggedIn()
 176   }
 177
 178   onWatchLaterClick (currentState: boolean) {
 179     if (currentState === true) this.removeFromWatchLater()
 180     else this.addToWatchLater()
 181
 182     this.inWatchLaterPlaylist = !currentState
 183   }
 184
 185   addToWatchLater () {
 186     const body = { videoId: this.video.id }
 187
 188     this.videoPlaylistService.addVideoInPlaylist(this.watchLaterPlaylist.id, body).subscribe(
 189       res => {
 190         this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
 191       }
 192     )
 193   }
 194
 195   removeFromWatchLater () {
 196     this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId, this.video.id)
 197         .subscribe(
 198           _ => { /* empty */ }
 199         )
 200   }
 201
 202   isWatchLaterPlaylistDisplayed () {
 203     return this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
 204   }
 205
 206   private setUpBy () {
 207     if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
 208       this.ownerDisplayTypeChosen = this.ownerDisplayType
 209       return
 210     }
 211
 212     // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
 213     // -> Use the account name
 214     if (
 215       this.video.channel.name === `${this.video.account.name}_channel` ||
 216       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}$/)
 217     ) {
 218       this.ownerDisplayTypeChosen = 'account'
 219     } else {
 220       this.ownerDisplayTypeChosen = 'videoChannel'
 221     }
 222   }
 223
 224   private loadWatchLater () {
 225     if (!this.isUserLoggedIn() || this.inWatchLaterPlaylist !== undefined) return
 226
 227     this.authService.userInformationLoaded
 228         .pipe(switchMap(() => this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)))
 229         .subscribe(existResult => {
 230           const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER)
 231           const existsInWatchLater = existResult.find(r => r.playlistId === watchLaterPlaylist.id)
 232           this.inWatchLaterPlaylist = false
 233
 234           this.watchLaterPlaylist = {
 235             id: watchLaterPlaylist.id
 236           }
 237
 238           if (existsInWatchLater) {
 239             this.inWatchLaterPlaylist = true
 240             this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId
 241           }
 242
 243           this.cd.markForCheck()
 244         })
 245
 246     this.videoPlaylistService.runPlaylistCheck(this.video.id)
 247   }
 248 }