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 | 49 |
1 files changed, 31 insertions, 18 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 c60ca4671..d76d0bbd2 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 | |||
@@ -1,9 +1,10 @@ | |||
1 | import { Component, Input } from '@angular/core' | 1 | |
2 | import { Component, EventEmitter, Input, Output } from '@angular/core' | ||
2 | import { Router } from '@angular/router' | 3 | import { Router } from '@angular/router' |
3 | import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core' | 4 | import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core' |
4 | import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' | 5 | import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' |
5 | import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage' | 6 | import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage' |
6 | import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' | 7 | import { VideoPlaylistPrivacy } from '@shared/models' |
7 | 8 | ||
8 | @Component({ | 9 | @Component({ |
9 | selector: 'my-video-watch-playlist', | 10 | selector: 'my-video-watch-playlist', |
@@ -14,9 +15,10 @@ export class VideoWatchPlaylistComponent { | |||
14 | static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' | 15 | static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist' |
15 | static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist' | 16 | static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist' |
16 | 17 | ||
17 | @Input() video: VideoDetails | ||
18 | @Input() playlist: VideoPlaylist | 18 | @Input() playlist: VideoPlaylist |
19 | 19 | ||
20 | @Output() videoFound = new EventEmitter<string>() | ||
21 | |||
20 | playlistElements: VideoPlaylistElement[] = [] | 22 | playlistElements: VideoPlaylistElement[] = [] |
21 | playlistPagination: ComponentPagination = { | 23 | playlistPagination: ComponentPagination = { |
22 | currentPage: 1, | 24 | currentPage: 1, |
@@ -29,7 +31,8 @@ export class VideoWatchPlaylistComponent { | |||
29 | loopPlaylist: boolean | 31 | loopPlaylist: boolean |
30 | loopPlaylistSwitchText = '' | 32 | loopPlaylistSwitchText = '' |
31 | noPlaylistVideos = false | 33 | noPlaylistVideos = false |
32 | currentPlaylistPosition = 1 | 34 | |
35 | currentPlaylistPosition: number | ||
33 | 36 | ||
34 | constructor ( | 37 | constructor ( |
35 | private userService: UserService, | 38 | private userService: UserService, |
@@ -44,6 +47,7 @@ export class VideoWatchPlaylistComponent { | |||
44 | this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn() | 47 | this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn() |
45 | ? this.auth.getUser().autoPlayNextVideoPlaylist | 48 | ? this.auth.getUser().autoPlayNextVideoPlaylist |
46 | : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' | 49 | : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false' |
50 | |||
47 | this.setAutoPlayNextVideoPlaylistSwitchText() | 51 | this.setAutoPlayNextVideoPlaylistSwitchText() |
48 | 52 | ||
49 | // defaults to false | 53 | // defaults to false |
@@ -51,12 +55,12 @@ export class VideoWatchPlaylistComponent { | |||
51 | this.setLoopPlaylistSwitchText() | 55 | this.setLoopPlaylistSwitchText() |
52 | } | 56 | } |
53 | 57 | ||
54 | onPlaylistVideosNearOfBottom () { | 58 | onPlaylistVideosNearOfBottom (position?: number) { |
55 | // Last page | 59 | // Last page |
56 | if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return | 60 | if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return |
57 | 61 | ||
58 | this.playlistPagination.currentPage += 1 | 62 | this.playlistPagination.currentPage += 1 |
59 | this.loadPlaylistElements(this.playlist,false) | 63 | this.loadPlaylistElements(this.playlist, false, position) |
60 | } | 64 | } |
61 | 65 | ||
62 | onElementRemoved (playlistElement: VideoPlaylistElement) { | 66 | onElementRemoved (playlistElement: VideoPlaylistElement) { |
@@ -83,26 +87,26 @@ export class VideoWatchPlaylistComponent { | |||
83 | return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC | 87 | return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC |
84 | } | 88 | } |
85 | 89 | ||
86 | loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) { | 90 | loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) { |
87 | this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination) | 91 | this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination) |
88 | .subscribe(({ total, data }) => { | 92 | .subscribe(({ total, data }) => { |
89 | this.playlistElements = this.playlistElements.concat(data) | 93 | this.playlistElements = this.playlistElements.concat(data) |
90 | this.playlistPagination.totalItems = total | 94 | this.playlistPagination.totalItems = total |
91 | 95 | ||
92 | const firstAvailableVideos = this.playlistElements.find(e => !!e.video) | 96 | const firstAvailableVideo = this.playlistElements.find(e => !!e.video) |
93 | if (!firstAvailableVideos) { | 97 | if (!firstAvailableVideo) { |
94 | this.noPlaylistVideos = true | 98 | this.noPlaylistVideos = true |
95 | return | 99 | return |
96 | } | 100 | } |
97 | 101 | ||
98 | this.updatePlaylistIndex(this.video) | 102 | if (position) this.updatePlaylistIndex(position) |
99 | 103 | ||
100 | if (redirectToFirst) { | 104 | if (redirectToFirst) { |
101 | const extras = { | 105 | const extras = { |
102 | queryParams: { | 106 | queryParams: { |
103 | start: firstAvailableVideos.startTimestamp, | 107 | start: firstAvailableVideo.startTimestamp, |
104 | stop: firstAvailableVideos.stopTimestamp, | 108 | stop: firstAvailableVideo.stopTimestamp, |
105 | videoId: firstAvailableVideos.video.uuid | 109 | playlistPosition: firstAvailableVideo.position |
106 | }, | 110 | }, |
107 | replaceUrl: true | 111 | replaceUrl: true |
108 | } | 112 | } |
@@ -111,18 +115,26 @@ export class VideoWatchPlaylistComponent { | |||
111 | }) | 115 | }) |
112 | } | 116 | } |
113 | 117 | ||
114 | updatePlaylistIndex (video: VideoDetails) { | 118 | updatePlaylistIndex (position: number) { |
115 | if (this.playlistElements.length === 0 || !video) return | 119 | if (this.playlistElements.length === 0 || !position) return |
116 | 120 | ||
117 | for (const playlistElement of this.playlistElements) { | 121 | for (const playlistElement of this.playlistElements) { |
118 | if (playlistElement.video && playlistElement.video.id === video.id) { | 122 | // >= if the previous videos were not valid |
123 | if (playlistElement.video && playlistElement.position >= position) { | ||
119 | this.currentPlaylistPosition = playlistElement.position | 124 | this.currentPlaylistPosition = playlistElement.position |
125 | |||
126 | this.videoFound.emit(playlistElement.video.uuid) | ||
127 | |||
128 | setTimeout(() => { | ||
129 | document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false) | ||
130 | }, 0) | ||
131 | |||
120 | return | 132 | return |
121 | } | 133 | } |
122 | } | 134 | } |
123 | 135 | ||
124 | // Load more videos to find our video | 136 | // Load more videos to find our video |
125 | this.onPlaylistVideosNearOfBottom() | 137 | this.onPlaylistVideosNearOfBottom(position) |
126 | } | 138 | } |
127 | 139 | ||
128 | findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement { | 140 | findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement { |
@@ -147,9 +159,10 @@ export class VideoWatchPlaylistComponent { | |||
147 | navigateToNextPlaylistVideo () { | 159 | navigateToNextPlaylistVideo () { |
148 | const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1) | 160 | const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1) |
149 | if (!next) return | 161 | if (!next) return |
162 | |||
150 | const start = next.startTimestamp | 163 | const start = next.startTimestamp |
151 | const stop = next.stopTimestamp | 164 | const stop = next.stopTimestamp |
152 | this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) | 165 | this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } }) |
153 | } | 166 | } |
154 | 167 | ||
155 | switchAutoPlayNextVideoPlaylist () { | 168 | switchAutoPlayNextVideoPlaylist () { |