-import { Component, Input } from '@angular/core'
+
+import { Component, EventEmitter, Input, Output } from '@angular/core'
import { Router } from '@angular/router'
import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
-import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
+import { VideoPlaylistPrivacy } from '@shared/models'
@Component({
selector: 'my-video-watch-playlist',
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
+ @Output() videoFound = new EventEmitter<string>()
+
playlistElements: VideoPlaylistElement[] = []
playlistPagination: ComponentPagination = {
currentPage: 1,
loopPlaylist: boolean
loopPlaylistSwitchText = ''
noPlaylistVideos = false
- currentPlaylistPosition = 1
+
+ currentPlaylistPosition: number
constructor (
private userService: UserService,
private auth: AuthService,
private notifier: Notifier,
- private i18n: I18n,
private videoPlaylist: VideoPlaylistService,
private localStorageService: LocalStorageService,
private sessionStorageService: SessionStorageService,
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.setLoopPlaylistSwitchText()
}
- onPlaylistVideosNearOfBottom () {
+ onPlaylistVideosNearOfBottom (position?: number) {
// Last page
if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
this.playlistPagination.currentPage += 1
- this.loadPlaylistElements(this.playlist,false)
+ this.loadPlaylistElements(this.playlist, false, position)
}
onElementRemoved (playlistElement: VideoPlaylistElement) {
return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
}
- loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
+ loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
.subscribe(({ total, data }) => {
this.playlistElements = this.playlistElements.concat(data)
this.playlistPagination.totalItems = total
- const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
- if (!firstAvailableVideos) {
+ const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
+ if (!firstAvailableVideo) {
this.noPlaylistVideos = true
return
}
- this.updatePlaylistIndex(this.video)
+ if (position) this.updatePlaylistIndex(position)
if (redirectToFirst) {
const extras = {
queryParams: {
- start: firstAvailableVideos.startTimestamp,
- stop: firstAvailableVideos.stopTimestamp,
- videoId: firstAvailableVideos.video.uuid
+ start: firstAvailableVideo.startTimestamp,
+ stop: firstAvailableVideo.stopTimestamp,
+ playlistPosition: firstAvailableVideo.position
},
replaceUrl: true
}
})
}
- updatePlaylistIndex (video: VideoDetails) {
- if (this.playlistElements.length === 0 || !video) return
+ updatePlaylistIndex (position: number) {
+ if (this.playlistElements.length === 0 || !position) return
for (const playlistElement of this.playlistElements) {
- if (playlistElement.video && playlistElement.video.id === video.id) {
+ // >= if the previous videos were not valid
+ if (playlistElement.video && playlistElement.position >= position) {
this.currentPlaylistPosition = playlistElement.position
+
+ this.videoFound.emit(playlistElement.video.uuid)
+
+ setTimeout(() => {
+ document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
+ }, 0)
+
return
}
}
// Load more videos to find our video
- this.onPlaylistVideosNearOfBottom()
+ this.onPlaylistVideosNearOfBottom(position)
}
findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
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 } })
+ this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
}
switchAutoPlayNextVideoPlaylist () {
private setAutoPlayNextVideoPlaylistSwitchText () {
this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
- ? this.i18n('Stop autoplaying next video')
- : this.i18n('Autoplay next video')
+ ? $localize`Stop autoplaying next video`
+ : $localize`Autoplay next video`
}
private setLoopPlaylistSwitchText () {
this.loopPlaylistSwitchText = this.loopPlaylist
- ? this.i18n('Stop looping playlist videos')
- : this.i18n('Loop playlist videos')
+ ? $localize`Stop looping playlist videos`
+ : $localize`Loop playlist videos`
}
}