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

   1 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   2 import { AuthService, Notifier, ServerService } from '@app/core'
   3 import { Video } from '@app/shared/shared-main'
   4 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
   5 import { ServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate } from '@shared/models'
   6 import { secondsToTime } from '../../../assets/player/utils'
   7 import { VideoPlaylistElement } from './video-playlist-element.model'
   8 import { VideoPlaylist } from './video-playlist.model'
   9 import { VideoPlaylistService } from './video-playlist.service'
  10
  11 @Component({
  12   selector: 'my-video-playlist-element-miniature',
  13   styleUrls: [ './video-playlist-element-miniature.component.scss' ],
  14   templateUrl: './video-playlist-element-miniature.component.html',
  15   changeDetection: ChangeDetectionStrategy.OnPush
  16 })
  17 export class VideoPlaylistElementMiniatureComponent implements OnInit {
  18   @ViewChild('moreDropdown') moreDropdown: NgbDropdown
  19
  20   @Input() playlist: VideoPlaylist
  21   @Input() playlistElement: VideoPlaylistElement
  22   @Input() owned = false
  23   @Input() playing = false
  24   @Input() rowLink = false
  25   @Input() accountLink = true
  26   @Input() position: number // Keep this property because we're in the OnPush change detection strategy
  27   @Input() touchScreenEditButton = false
  28
  29   @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
  30
  31   displayTimestampOptions = false
  32
  33   timestampOptions: {
  34     startTimestampEnabled: boolean
  35     startTimestamp: number
  36     stopTimestampEnabled: boolean
  37     stopTimestamp: number
  38   } = {} as any
  39
  40   private serverConfig: ServerConfig
  41
  42   constructor (
  43     private authService: AuthService,
  44     private serverService: ServerService,
  45     private notifier: Notifier,
  46     private videoPlaylistService: VideoPlaylistService,
  47     private cdr: ChangeDetectorRef
  48   ) {}
  49
  50   ngOnInit (): void {
  51     this.serverConfig = this.serverService.getTmpConfig()
  52     this.serverService.getConfig()
  53         .subscribe(config => {
  54           this.serverConfig = config
  55           this.cdr.detectChanges()
  56         })
  57   }
  58
  59   isUnavailable (e: VideoPlaylistElement) {
  60     return e.type === VideoPlaylistElementType.UNAVAILABLE
  61   }
  62
  63   isPrivate (e: VideoPlaylistElement) {
  64     return e.type === VideoPlaylistElementType.PRIVATE
  65   }
  66
  67   isDeleted (e: VideoPlaylistElement) {
  68     return e.type === VideoPlaylistElementType.DELETED
  69   }
  70
  71   buildRouterLink () {
  72     if (!this.playlist) return null
  73
  74     return [ '/videos/watch/playlist', this.playlist.uuid ]
  75   }
  76
  77   buildRouterQuery () {
  78     if (!this.playlistElement || !this.playlistElement.video) return {}
  79
  80     return {
  81       videoId: this.playlistElement.video.uuid,
  82       start: this.playlistElement.startTimestamp,
  83       stop: this.playlistElement.stopTimestamp,
  84       resume: true
  85     }
  86   }
  87
  88   isVideoBlur (video: Video) {
  89     return video.isVideoNSFWForUser(this.authService.getUser(), this.serverConfig)
  90   }
  91
  92   removeFromPlaylist (playlistElement: VideoPlaylistElement) {
  93     const videoId = this.playlistElement.video ? this.playlistElement.video.id : undefined
  94
  95     this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id, videoId)
  96         .subscribe(
  97           () => {
  98             this.notifier.success($localize`Video removed from ${this.playlist.displayName}`)
  99             this.elementRemoved.emit(playlistElement)
 100           },
 101
 102           err => this.notifier.error(err.message)
 103         )
 104
 105     this.moreDropdown.close()
 106   }
 107
 108   updateTimestamps (playlistElement: VideoPlaylistElement) {
 109     const body: VideoPlaylistElementUpdate = {}
 110
 111     body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
 112     body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
 113
 114     this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body, this.playlistElement.video.id)
 115         .subscribe(
 116           () => {
 117             this.notifier.success($localize`Timestamps updated`)
 118
 119             playlistElement.startTimestamp = body.startTimestamp
 120             playlistElement.stopTimestamp = body.stopTimestamp
 121
 122             this.cdr.detectChanges()
 123           },
 124
 125           err => this.notifier.error(err.message)
 126         )
 127
 128     this.moreDropdown.close()
 129   }
 130
 131   formatTimestamp (playlistElement: VideoPlaylistElement) {
 132     const start = playlistElement.startTimestamp
 133     const stop = playlistElement.stopTimestamp
 134
 135     const startFormatted = secondsToTime(start, true, ':')
 136     const stopFormatted = secondsToTime(stop, true, ':')
 137
 138     if (start === null && stop === null) return ''
 139
 140     if (start !== null && stop === null) return $localize`Starts at ` + startFormatted
 141     if (start === null && stop !== null) return $localize`Stops at ` + stopFormatted
 142
 143     return $localize`Starts at ` + startFormatted + $localize` and stops at ` + stopFormatted
 144   }
 145
 146   onDropdownOpenChange () {
 147     this.displayTimestampOptions = false
 148   }
 149
 150   toggleDisplayTimestampsOptions (event: Event, playlistElement: VideoPlaylistElement) {
 151     event.preventDefault()
 152
 153     this.displayTimestampOptions = !this.displayTimestampOptions
 154
 155     if (this.displayTimestampOptions === true) {
 156       this.timestampOptions = {
 157         startTimestampEnabled: false,
 158         stopTimestampEnabled: false,
 159         startTimestamp: 0,
 160         stopTimestamp: playlistElement.video.duration
 161       }
 162
 163       if (playlistElement.startTimestamp) {
 164         this.timestampOptions.startTimestampEnabled = true
 165         this.timestampOptions.startTimestamp = playlistElement.startTimestamp
 166       }
 167
 168       if (playlistElement.stopTimestamp) {
 169         this.timestampOptions.stopTimestampEnabled = true
 170         this.timestampOptions.stopTimestamp = playlistElement.stopTimestamp
 171       }
 172     }
 173
 174     // FIXME: why do we have to use setTimeout here?
 175     setTimeout(() => {
 176       this.cdr.detectChanges()
 177     })
 178   }
 179 }