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

   1 import { 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 })
  18 export class VideoPlaylistElementMiniatureComponent {
  19   @ViewChild('moreDropdown') moreDropdown: NgbDropdown
  20
  21   @Input() playlist: VideoPlaylist
  22   @Input() video: Video
  23   @Input() owned = false
  24   @Input() playing = false
  25   @Input() rowLink = false
  26   @Input() accountLink = true
  27
  28   @Output() elementRemoved = new EventEmitter<Video>()
  29
  30   displayTimestampOptions = false
  31
  32   timestampOptions: {
  33     startTimestampEnabled: boolean
  34     startTimestamp: number
  35     stopTimestampEnabled: boolean
  36     stopTimestamp: number
  37   } = {} as any
  38
  39   constructor (
  40     private authService: AuthService,
  41     private serverService: ServerService,
  42     private notifier: Notifier,
  43     private confirmService: ConfirmService,
  44     private route: ActivatedRoute,
  45     private i18n: I18n,
  46     private videoService: VideoService,
  47     private videoPlaylistService: VideoPlaylistService
  48   ) {}
  49
  50   buildRouterLink () {
  51     if (!this.playlist) return null
  52
  53     return [ '/videos/watch/playlist', this.playlist.uuid ]
  54   }
  55
  56   buildRouterQuery () {
  57     if (!this.video) return {}
  58
  59     return {
  60       videoId: this.video.uuid,
  61       start: this.video.playlistElement.startTimestamp,
  62       stop: this.video.playlistElement.stopTimestamp
  63     }
  64   }
  65
  66   isVideoBlur (video: Video) {
  67     return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
  68   }
  69
  70   removeFromPlaylist (video: Video) {
  71     this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
  72         .subscribe(
  73           () => {
  74             this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
  75
  76             this.elementRemoved.emit(this.video)
  77           },
  78
  79           err => this.notifier.error(err.message)
  80         )
  81
  82     this.moreDropdown.close()
  83   }
  84
  85   updateTimestamps (video: Video) {
  86     const body: VideoPlaylistElementUpdate = {}
  87
  88     body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
  89     body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
  90
  91     this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
  92         .subscribe(
  93           () => {
  94             this.notifier.success(this.i18n('Timestamps updated'))
  95
  96             video.playlistElement.startTimestamp = body.startTimestamp
  97             video.playlistElement.stopTimestamp = body.stopTimestamp
  98           },
  99
 100           err => this.notifier.error(err.message)
 101         )
 102
 103     this.moreDropdown.close()
 104   }
 105
 106   formatTimestamp (video: Video) {
 107     const start = video.playlistElement.startTimestamp
 108     const stop = video.playlistElement.stopTimestamp
 109
 110     const startFormatted = secondsToTime(start, true, ':')
 111     const stopFormatted = secondsToTime(stop, true, ':')
 112
 113     if (start === null && stop === null) return ''
 114
 115     if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
 116     if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
 117
 118     return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
 119   }
 120
 121   onDropdownOpenChange () {
 122     this.displayTimestampOptions = false
 123   }
 124
 125   toggleDisplayTimestampsOptions (event: Event, video: Video) {
 126     event.preventDefault()
 127
 128     this.displayTimestampOptions = !this.displayTimestampOptions
 129
 130     if (this.displayTimestampOptions === true) {
 131       this.timestampOptions = {
 132         startTimestampEnabled: false,
 133         stopTimestampEnabled: false,
 134         startTimestamp: 0,
 135         stopTimestamp: video.duration
 136       }
 137
 138       if (video.playlistElement.startTimestamp) {
 139         this.timestampOptions.startTimestampEnabled = true
 140         this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
 141       }
 142
 143       if (video.playlistElement.stopTimestamp) {
 144         this.timestampOptions.stopTimestampEnabled = true
 145         this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
 146       }
 147     }
 148   }
 149 }