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