diff options
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch-playlist.component.ts')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch-playlist.component.ts | 39 |
1 files changed, 32 insertions, 7 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts index ed2aeda6e..c6b04fd4b 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts | |||
@@ -3,11 +3,11 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | |||
3 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | 3 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' |
4 | import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' | 4 | import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' |
5 | import { Router } from '@angular/router' | 5 | import { Router } from '@angular/router' |
6 | import { User, UserService } from '@app/shared' | 6 | import { UserService } from '@app/shared' |
7 | import { AuthService, Notifier } from '@app/core' | 7 | import { AuthService, Notifier } from '@app/core' |
8 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | 8 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' |
9 | import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' | 9 | import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' |
10 | import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' | 10 | import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' |
11 | import { I18n } from '@ngx-translate/i18n-polyfill' | 11 | import { I18n } from '@ngx-translate/i18n-polyfill' |
12 | 12 | ||
13 | @Component({ | 13 | @Component({ |
@@ -17,6 +17,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
17 | }) | 17 | }) |
18 | export class VideoWatchPlaylistComponent { | 18 | export class VideoWatchPlaylistComponent { |
19 | static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' | 19 | static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' |
20 | static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist' | ||
20 | 21 | ||
21 | @Input() video: VideoDetails | 22 | @Input() video: VideoDetails |
22 | @Input() playlist: VideoPlaylist | 23 | @Input() playlist: VideoPlaylist |
@@ -30,6 +31,8 @@ export class VideoWatchPlaylistComponent { | |||
30 | 31 | ||
31 | autoPlayNextVideoPlaylist: boolean | 32 | autoPlayNextVideoPlaylist: boolean |
32 | autoPlayNextVideoPlaylistSwitchText = '' | 33 | autoPlayNextVideoPlaylistSwitchText = '' |
34 | loopPlaylist: boolean | ||
35 | loopPlaylistSwitchText = '' | ||
33 | noPlaylistVideos = false | 36 | noPlaylistVideos = false |
34 | currentPlaylistPosition = 1 | 37 | currentPlaylistPosition = 1 |
35 | 38 | ||
@@ -45,6 +48,9 @@ export class VideoWatchPlaylistComponent { | |||
45 | ? this.auth.getUser().autoPlayNextVideoPlaylist | 48 | ? this.auth.getUser().autoPlayNextVideoPlaylist |
46 | : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' | 49 | : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' |
47 | this.setAutoPlayNextVideoPlaylistSwitchText() | 50 | this.setAutoPlayNextVideoPlaylistSwitchText() |
51 | |||
52 | this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' | ||
53 | this.setLoopPlaylistSwitchText() | ||
48 | } | 54 | } |
49 | 55 | ||
50 | onPlaylistVideosNearOfBottom () { | 56 | onPlaylistVideosNearOfBottom () { |
@@ -121,9 +127,9 @@ export class VideoWatchPlaylistComponent { | |||
121 | this.onPlaylistVideosNearOfBottom() | 127 | this.onPlaylistVideosNearOfBottom() |
122 | } | 128 | } |
123 | 129 | ||
124 | navigateToNextPlaylistVideo () { | 130 | navigateToNextPlaylistVideo (_next: VideoPlaylistElement = null) { |
125 | if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { | 131 | if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { |
126 | const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) | 132 | const next = _next || this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) |
127 | 133 | ||
128 | if (!next || !next.video) { | 134 | if (!next || !next.video) { |
129 | this.currentPlaylistPosition++ | 135 | this.currentPlaylistPosition++ |
@@ -134,6 +140,9 @@ export class VideoWatchPlaylistComponent { | |||
134 | const start = next.startTimestamp | 140 | const start = next.startTimestamp |
135 | const stop = next.stopTimestamp | 141 | const stop = next.stopTimestamp |
136 | this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) | 142 | this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) |
143 | } else if (this.loopPlaylist) { | ||
144 | this.currentPlaylistPosition = 0 | ||
145 | this.navigateToNextPlaylistVideo(this.playlistElements.find(e => e.position === this.currentPlaylistPosition)) | ||
137 | } | 146 | } |
138 | } | 147 | } |
139 | 148 | ||
@@ -160,9 +169,25 @@ export class VideoWatchPlaylistComponent { | |||
160 | } | 169 | } |
161 | } | 170 | } |
162 | 171 | ||
172 | switchLoopPlaylist () { | ||
173 | this.loopPlaylist = !this.loopPlaylist | ||
174 | this.setLoopPlaylistSwitchText() | ||
175 | |||
176 | peertubeSessionStorage.setItem( | ||
177 | VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST, | ||
178 | this.loopPlaylist.toString() | ||
179 | ) | ||
180 | } | ||
181 | |||
163 | private setAutoPlayNextVideoPlaylistSwitchText () { | 182 | private setAutoPlayNextVideoPlaylistSwitchText () { |
164 | this.autoPlayNextVideoPlaylistSwitchText = this.i18n('{{verb}} autoplay for playlists', { | 183 | this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist |
165 | verb: this.autoPlayNextVideoPlaylist ? this.i18n('Disable') : this.i18n('Enable') | 184 | ? this.i18n('Stop autoplaying next video') |
166 | }) | 185 | : this.i18n('Autoplay next video') |
186 | } | ||
187 | |||
188 | private setLoopPlaylistSwitchText () { | ||
189 | this.loopPlaylistSwitchText = this.loopPlaylist | ||
190 | ? this.i18n('Stop looping playlist videos') | ||
191 | : this.i18n('Loop playlist videos') | ||
167 | } | 192 | } |
168 | } | 193 | } |