import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
import { Router } from '@angular/router'
-import { AuthService } from '@app/core'
+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, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { SessionStorageService, LocalStorageService } from '@app/shared/misc/storage.service'
@Component({
selector: 'my-video-watch-playlist',
styleUrls: [ './video-watch-playlist.component.scss' ]
})
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
totalItems: null
}
+ autoPlayNextVideoPlaylist: boolean
+ autoPlayNextVideoPlaylistSwitchText = ''
+ loopPlaylist: boolean
+ loopPlaylistSwitchText = ''
noPlaylistVideos = false
currentPlaylistPosition = 1
constructor (
+ private userService: UserService,
private auth: AuthService,
+ private notifier: Notifier,
+ private i18n: I18n,
private videoPlaylist: VideoPlaylistService,
+ private localStorageService: LocalStorageService,
+ private sessionStorageService: SessionStorageService,
private router: Router
- ) {}
+ ) {
+ // defaults to true
+ this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
+ ? this.auth.getUser().autoPlayNextVideoPlaylist
+ : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
+ this.setAutoPlayNextVideoPlaylistSwitchText()
+
+ // defaults to false
+ this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+ this.setLoopPlaylistSwitchText()
+ }
onPlaylistVideosNearOfBottom () {
// Last page
if (redirectToFirst) {
const extras = {
- queryParams: { videoId: firstAvailableVideos.video.uuid },
+ queryParams: {
+ start: firstAvailableVideos.startTimestamp,
+ stop: firstAvailableVideos.stopTimestamp,
+ videoId: firstAvailableVideos.video.uuid
+ },
replaceUrl: true
}
this.router.navigate([], extras)
this.onPlaylistVideosNearOfBottom()
}
+ 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 next = this.playlistElements.find(e => e.position === position)
+
+ if (!next || !next.video) {
+ return this.findNextPlaylistVideo(position + 1)
+ }
+
+ return next
+ }
+
navigateToNextPlaylistVideo () {
- if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
- const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
+ 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 } })
+ }
- if (!next || !next.video) {
- this.currentPlaylistPosition++
- this.navigateToNextPlaylistVideo()
- return
+ switchAutoPlayNextVideoPlaylist () {
+ this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
+ this.setAutoPlayNextVideoPlaylistSwitchText()
+
+ peertubeLocalStorage.setItem(
+ VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
+ this.autoPlayNextVideoPlaylist.toString()
+ )
+
+ if (this.auth.isLoggedIn()) {
+ const details = {
+ autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
}
- const start = next.startTimestamp
- const stop = next.stopTimestamp
- this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
+ this.userService.updateMyProfile(details).subscribe(
+ () => {
+ this.auth.refreshUserInformation()
+ },
+ err => this.notifier.error(err.message)
+ )
}
}
+
+ 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.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')
+ }
}