X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch-playlist.component.ts;h=c5ed36000130b2964387601d942b5f606b1eb1b6;hb=31174a272a65c83c8d3e10e9d5d59786bd05682a;hp=ed2aeda6e67015a5dec94e6477e0dcc434e22619;hpb=bee29df8a9ba3090be3daa8ff806dd9a26d7a5cf;p=github%2FChocobozzz%2FPeerTube.git 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..c5ed36000 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' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' import { Router } from '@angular/router' -import { User, UserService } from '@app/shared' +import { UserService } from '@app/shared' import { AuthService, Notifier } from '@app/core' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' -import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' +import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ @@ -17,6 +17,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' }) export class VideoWatchPlaylistComponent { static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' + static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist' @Input() video: VideoDetails @Input() playlist: VideoPlaylist @@ -30,6 +31,8 @@ export class VideoWatchPlaylistComponent { autoPlayNextVideoPlaylist: boolean autoPlayNextVideoPlaylistSwitchText = '' + loopPlaylist: boolean + loopPlaylistSwitchText = '' noPlaylistVideos = false currentPlaylistPosition = 1 @@ -41,10 +44,15 @@ export class VideoWatchPlaylistComponent { private videoPlaylist: VideoPlaylistService, private router: Router ) { + // defaults to true this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn() ? this.auth.getUser().autoPlayNextVideoPlaylist : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' this.setAutoPlayNextVideoPlaylistSwitchText() + + // defaults to false + this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + this.setLoopPlaylistSwitchText() } onPlaylistVideosNearOfBottom () { @@ -121,20 +129,31 @@ export class VideoWatchPlaylistComponent { this.onPlaylistVideosNearOfBottom() } - navigateToNextPlaylistVideo () { - if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { - const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) - - if (!next || !next.video) { - this.currentPlaylistPosition++ - this.navigateToNextPlaylistVideo() + findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement { + if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) { + // we have reached the end of the playlist: either loop or stop + if (this.loopPlaylist) { + this.currentPlaylistPosition = position = 0 + } else { return } + } - const start = next.startTimestamp - const stop = next.stopTimestamp - this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) + const next = this.playlistElements.find(e => e.position === position) + + if (!next || !next.video) { + return this.findNextPlaylistVideo(position + 1) } + + return next + } + + navigateToNextPlaylistVideo () { + const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1) + if (!next) return + const start = next.startTimestamp + const stop = next.stopTimestamp + this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) } switchAutoPlayNextVideoPlaylist () { @@ -160,9 +179,25 @@ export class VideoWatchPlaylistComponent { } } + switchLoopPlaylist () { + this.loopPlaylist = !this.loopPlaylist + this.setLoopPlaylistSwitchText() + + peertubeSessionStorage.setItem( + VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST, + this.loopPlaylist.toString() + ) + } + private setAutoPlayNextVideoPlaylistSwitchText () { - this.autoPlayNextVideoPlaylistSwitchText = this.i18n('{{verb}} autoplay for playlists', { - verb: this.autoPlayNextVideoPlaylist ? this.i18n('Disable') : this.i18n('Enable') - }) + this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist + ? this.i18n('Stop autoplaying next video') + : this.i18n('Autoplay next video') + } + + private setLoopPlaylistSwitchText () { + this.loopPlaylistSwitchText = this.loopPlaylist + ? this.i18n('Stop looping playlist videos') + : this.i18n('Loop playlist videos') } }