1 import { Component, Input } from '@angular/core'
2 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
3 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
4 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
5 import { Router } from '@angular/router'
6 import { UserService } from '@app/shared'
7 import { AuthService, Notifier } from '@app/core'
8 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
9 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
10 import { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
11 import { I18n } from '@ngx-translate/i18n-polyfill'
14 selector: 'my-video-watch-playlist',
15 templateUrl: './video-watch-playlist.component.html',
16 styleUrls: [ './video-watch-playlist.component.scss' ]
18 export class VideoWatchPlaylistComponent {
19 static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
20 static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
22 @Input() video: VideoDetails
23 @Input() playlist: VideoPlaylist
25 playlistElements: VideoPlaylistElement[] = []
26 playlistPagination: ComponentPagination = {
32 autoPlayNextVideoPlaylist: boolean
33 autoPlayNextVideoPlaylistSwitchText = ''
35 loopPlaylistSwitchText = ''
36 noPlaylistVideos = false
37 currentPlaylistPosition = 1
40 private userService: UserService,
41 private auth: AuthService,
42 private notifier: Notifier,
44 private videoPlaylist: VideoPlaylistService,
45 private router: Router
48 this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
49 ? this.auth.getUser().autoPlayNextVideoPlaylist
50 : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
51 this.setAutoPlayNextVideoPlaylistSwitchText()
54 this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
55 this.setLoopPlaylistSwitchText()
58 onPlaylistVideosNearOfBottom () {
60 if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
62 this.playlistPagination.currentPage += 1
63 this.loadPlaylistElements(this.playlist,false)
66 onElementRemoved (playlistElement: VideoPlaylistElement) {
67 this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
69 this.playlistPagination.totalItems--
73 return this.playlist.isLocal === true &&
74 this.auth.isLoggedIn() &&
75 this.playlist.ownerAccount.name === this.auth.getUser().username
78 isUnlistedPlaylist () {
79 return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
82 isPrivatePlaylist () {
83 return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
87 return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
90 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
91 this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
92 .subscribe(({ total, data }) => {
93 this.playlistElements = this.playlistElements.concat(data)
94 this.playlistPagination.totalItems = total
96 const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
97 if (!firstAvailableVideos) {
98 this.noPlaylistVideos = true
102 this.updatePlaylistIndex(this.video)
104 if (redirectToFirst) {
107 start: firstAvailableVideos.startTimestamp,
108 stop: firstAvailableVideos.stopTimestamp,
109 videoId: firstAvailableVideos.video.uuid
113 this.router.navigate([], extras)
118 updatePlaylistIndex (video: VideoDetails) {
119 if (this.playlistElements.length === 0 || !video) return
121 for (const playlistElement of this.playlistElements) {
122 if (playlistElement.video && playlistElement.video.id === video.id) {
123 this.currentPlaylistPosition = playlistElement.position
128 // Load more videos to find our video
129 this.onPlaylistVideosNearOfBottom()
132 findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
133 if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) {
134 // we have reached the end of the playlist: either loop or stop
135 if (this.loopPlaylist) {
136 this.currentPlaylistPosition = position = 0
142 const next = this.playlistElements.find(e => e.position === position)
144 if (!next || !next.video) {
145 return this.findNextPlaylistVideo(position + 1)
151 navigateToNextPlaylistVideo () {
152 const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1)
154 const start = next.startTimestamp
155 const stop = next.stopTimestamp
156 this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
159 switchAutoPlayNextVideoPlaylist () {
160 this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
161 this.setAutoPlayNextVideoPlaylistSwitchText()
163 peertubeLocalStorage.setItem(
164 VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
165 this.autoPlayNextVideoPlaylist.toString()
168 if (this.auth.isLoggedIn()) {
170 autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
173 this.userService.updateMyProfile(details).subscribe(
175 this.auth.refreshUserInformation()
177 err => this.notifier.error(err.message)
182 switchLoopPlaylist () {
183 this.loopPlaylist = !this.loopPlaylist
184 this.setLoopPlaylistSwitchText()
186 peertubeSessionStorage.setItem(
187 VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
188 this.loopPlaylist.toString()
192 private setAutoPlayNextVideoPlaylistSwitchText () {
193 this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
194 ? this.i18n('Stop autoplaying next video')
195 : this.i18n('Autoplay next video')
198 private setLoopPlaylistSwitchText () {
199 this.loopPlaylistSwitchText = this.loopPlaylist
200 ? this.i18n('Stop looping playlist videos')
201 : this.i18n('Loop playlist videos')