diff options
author | Chocobozzz <me@florianbigard.com> | 2019-03-13 14:18:58 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2019-03-18 11:17:59 +0100 |
commit | e2f01c47e08d26a30ad47068d195b3d21d0df8a1 (patch) | |
tree | 21f18ed462d313bfb4ba7a1b5221fdb6b2c35bc1 /client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts | |
parent | 15e9d5ca39e0b792f61453fbf3885a0fc446afa7 (diff) | |
download | PeerTube-e2f01c47e08d26a30ad47068d195b3d21d0df8a1.tar.gz PeerTube-e2f01c47e08d26a30ad47068d195b3d21d0df8a1.tar.zst PeerTube-e2f01c47e08d26a30ad47068d195b3d21d0df8a1.zip |
Playlist support in watch page
Diffstat (limited to 'client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts')
-rw-r--r-- | client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts new file mode 100644 index 000000000..c0cfd855d --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts | |||
@@ -0,0 +1,149 @@ | |||
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 | } | ||