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

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