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'
14 selector: 'my-video-playlist-element-miniature',
15 styleUrls: [ './video-playlist-element-miniature.component.scss' ],
16 templateUrl: './video-playlist-element-miniature.component.html'
18 export class VideoPlaylistElementMiniatureComponent {
19 @ViewChild('moreDropdown') moreDropdown: NgbDropdown
21 @Input() playlist: VideoPlaylist
23 @Input() owned = false
24 @Input() playing = false
25 @Input() rowLink = false
26 @Input() accountLink = true
28 @Output() elementRemoved = new EventEmitter<Video>()
30 displayTimestampOptions = false
33 startTimestampEnabled: boolean
34 startTimestamp: number
35 stopTimestampEnabled: boolean
40 private authService: AuthService,
41 private serverService: ServerService,
42 private notifier: Notifier,
43 private confirmService: ConfirmService,
44 private route: ActivatedRoute,
46 private videoService: VideoService,
47 private videoPlaylistService: VideoPlaylistService
51 if (!this.playlist) return null
53 return [ '/videos/watch/playlist', this.playlist.uuid ]
57 if (!this.video) return {}
60 videoId: this.video.uuid,
61 start: this.video.playlistElement.startTimestamp,
62 stop: this.video.playlistElement.stopTimestamp
66 isVideoBlur (video: Video) {
67 return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
70 removeFromPlaylist (video: Video) {
71 this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
74 this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
76 this.elementRemoved.emit(this.video)
79 err => this.notifier.error(err.message)
82 this.moreDropdown.close()
85 updateTimestamps (video: Video) {
86 const body: VideoPlaylistElementUpdate = {}
88 body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
89 body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
91 this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
94 this.notifier.success(this.i18n('Timestamps updated'))
96 video.playlistElement.startTimestamp = body.startTimestamp
97 video.playlistElement.stopTimestamp = body.stopTimestamp
100 err => this.notifier.error(err.message)
103 this.moreDropdown.close()
106 formatTimestamp (video: Video) {
107 const start = video.playlistElement.startTimestamp
108 const stop = video.playlistElement.stopTimestamp
110 const startFormatted = secondsToTime(start, true, ':')
111 const stopFormatted = secondsToTime(stop, true, ':')
113 if (start === null && stop === null) return ''
115 if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
116 if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
118 return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
121 onDropdownOpenChange () {
122 this.displayTimestampOptions = false
125 toggleDisplayTimestampsOptions (event: Event, video: Video) {
126 event.preventDefault()
128 this.displayTimestampOptions = !this.displayTimestampOptions
130 if (this.displayTimestampOptions === true) {
131 this.timestampOptions = {
132 startTimestampEnabled: false,
133 stopTimestampEnabled: false,
135 stopTimestamp: video.duration
138 if (video.playlistElement.startTimestamp) {
139 this.timestampOptions.startTimestampEnabled = true
140 this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
143 if (video.playlistElement.stopTimestamp) {
144 this.timestampOptions.stopTimestampEnabled = true
145 this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp