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

   1 import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core'
   2 import { User } from '../users'
   3 import { Video } from './video.model'
   4 import { ServerService } from '@app/core'
   5 import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared'
   6 import { I18n } from '@ngx-translate/i18n-polyfill'
   7 import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
   8 import { ScreenService } from '@app/shared/misc/screen.service'
   9 import { VideoThumbnailComponent } from './video-thumbnail.component'
  10
  11 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
  12 export type MiniatureDisplayOptions = {
  13   date?: boolean
  14   views?: boolean
  15   by?: boolean
  16   privacyLabel?: boolean
  17   privacyText?: boolean
  18   state?: boolean
  19   blacklistInfo?: boolean
  20   nsfw?: boolean
  21 }
  22
  23 @Component({
  24   selector: 'my-video-miniature',
  25   styleUrls: [ './video-miniature.component.scss' ],
  26   templateUrl: './video-miniature.component.html',
  27   changeDetection: ChangeDetectionStrategy.OnPush
  28 })
  29 export class VideoMiniatureComponent implements OnInit {
  30   @Input() user: User
  31   @Input() video: Video
  32
  33   @Input() ownerDisplayType: OwnerDisplayType = 'account'
  34   @Input() displayOptions: MiniatureDisplayOptions = {
  35     date: true,
  36     views: true,
  37     by: true,
  38     privacyLabel: false,
  39     privacyText: false,
  40     state: false,
  41     blacklistInfo: false
  42   }
  43   @Input() displayAsRow = false
  44   @Input() displayVideoActions = true
  45
  46   @Output() videoBlacklisted = new EventEmitter()
  47   @Output() videoUnblacklisted = new EventEmitter()
  48   @Output() videoRemoved = new EventEmitter()
  49
  50   @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent
  51
  52   videoActionsDisplayOptions: VideoActionsDisplayType = {
  53     playlist: true,
  54     download: false,
  55     update: true,
  56     blacklist: true,
  57     delete: true,
  58     report: true
  59   }
  60   showActions = false
  61   serverConfig: ServerConfig
  62
  63   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
  64
  65   constructor (
  66     private screenService: ScreenService,
  67     private serverService: ServerService,
  68     private i18n: I18n,
  69     @Inject(LOCALE_ID) private localeId: string
  70   ) { }
  71
  72   get isVideoBlur () {
  73     return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
  74   }
  75
  76   ngOnInit () {
  77     this.serverConfig = this.serverService.getTmpConfig()
  78     this.serverService.getConfig()
  79         .subscribe(config => this.serverConfig = config)
  80
  81     this.setUpBy()
  82
  83     // We rely on mouseenter to lazy load actions
  84     if (this.screenService.isInTouchScreen()) {
  85       this.loadActions()
  86     }
  87   }
  88
  89   displayOwnerAccount () {
  90     return this.ownerDisplayTypeChosen === 'account'
  91   }
  92
  93   displayOwnerVideoChannel () {
  94     return this.ownerDisplayTypeChosen === 'videoChannel'
  95   }
  96
  97   isUnlistedVideo () {
  98     return this.video.privacy.id === VideoPrivacy.UNLISTED
  99   }
 100
 101   isPrivateVideo () {
 102     return this.video.privacy.id === VideoPrivacy.PRIVATE
 103   }
 104
 105   getStateLabel (video: Video) {
 106     if (!video.state) return ''
 107
 108     if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
 109       return this.i18n('Published')
 110     }
 111
 112     if (video.scheduledUpdate) {
 113       const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
 114       return this.i18n('Publication scheduled on ') + updateAt
 115     }
 116
 117     if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
 118       return this.i18n('Waiting transcoding')
 119     }
 120
 121     if (video.state.id === VideoState.TO_TRANSCODE) {
 122       return this.i18n('To transcode')
 123     }
 124
 125     if (video.state.id === VideoState.TO_IMPORT) {
 126       return this.i18n('To import')
 127     }
 128
 129     return ''
 130   }
 131
 132   loadActions () {
 133     if (this.displayVideoActions) this.showActions = true
 134     this.thumbnail.load()
 135   }
 136
 137   onVideoBlacklisted () {
 138     this.videoBlacklisted.emit()
 139   }
 140
 141   onVideoUnblacklisted () {
 142     this.videoUnblacklisted.emit()
 143   }
 144
 145   onVideoRemoved () {
 146     this.videoRemoved.emit()
 147   }
 148
 149   private setUpBy () {
 150     if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
 151       this.ownerDisplayTypeChosen = this.ownerDisplayType
 152       return
 153     }
 154
 155     // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
 156     // -> Use the account name
 157     if (
 158       this.video.channel.name === `${this.video.account.name}_channel` ||
 159       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}$/)
 160     ) {
 161       this.ownerDisplayTypeChosen = 'account'
 162     } else {
 163       this.ownerDisplayTypeChosen = 'videoChannel'
 164     }
 165   }
 166 }