diff options
author | kontrollanten <6680299+kontrollanten@users.noreply.github.com> | 2021-10-12 13:45:55 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-12 13:45:55 +0200 |
commit | c3bb04413ec05dfe544ec74ffdf2f264975bd121 (patch) | |
tree | e7e8ca811e78ccd89009b34d5ccaae2b4b48081f /client/src | |
parent | 8d8a037e3fe9b1d2ccbc4169ce59b13000b59cb0 (diff) | |
download | PeerTube-c3bb04413ec05dfe544ec74ffdf2f264975bd121.tar.gz PeerTube-c3bb04413ec05dfe544ec74ffdf2f264975bd121.tar.zst PeerTube-c3bb04413ec05dfe544ec74ffdf2f264975bd121.zip |
add ...playlist.elements.loaded hook (#4387)
* client: add ...playlist.elements.loaded hook
closes #4385
* fix linting error
* client: add playlist metadata to video-watch hooks
* Prefer using a filter for playlist elements hook
Co-authored-by: Chocobozzz <me@florianbigard.com>
Diffstat (limited to 'client/src')
4 files changed, 55 insertions, 33 deletions
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts index d6959a50e..8fba423c3 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts | |||
@@ -155,7 +155,7 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy { | |||
155 | } | 155 | } |
156 | 156 | ||
157 | private loadElements () { | 157 | private loadElements () { |
158 | this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination) | 158 | this.videoPlaylistService.getPlaylistVideos({ videoPlaylistId: this.videoPlaylistId, componentPagination: this.pagination }) |
159 | .subscribe(({ total, data }) => { | 159 | .subscribe(({ total, data }) => { |
160 | this.playlistElements = this.playlistElements.concat(data) | 160 | this.playlistElements = this.playlistElements.concat(data) |
161 | this.pagination.totalItems = total | 161 | this.pagination.totalItems = total |
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts index 78b3af4a7..b2863fed6 100644 --- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts +++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts | |||
@@ -1,6 +1,14 @@ | |||
1 | import { Component, EventEmitter, Input, Output } from '@angular/core' | 1 | import { Component, EventEmitter, Input, Output } from '@angular/core' |
2 | import { Router } from '@angular/router' | 2 | import { Router } from '@angular/router' |
3 | import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core' | 3 | import { |
4 | AuthService, | ||
5 | ComponentPagination, | ||
6 | HooksService, | ||
7 | LocalStorageService, | ||
8 | Notifier, | ||
9 | SessionStorageService, | ||
10 | UserService | ||
11 | } from '@app/core' | ||
4 | import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' | 12 | import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' |
5 | import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage' | 13 | import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage' |
6 | import { VideoPlaylistPrivacy } from '@shared/models' | 14 | import { VideoPlaylistPrivacy } from '@shared/models' |
@@ -34,6 +42,7 @@ export class VideoWatchPlaylistComponent { | |||
34 | currentPlaylistPosition: number | 42 | currentPlaylistPosition: number |
35 | 43 | ||
36 | constructor ( | 44 | constructor ( |
45 | private hooks: HooksService, | ||
37 | private userService: UserService, | 46 | private userService: UserService, |
38 | private auth: AuthService, | 47 | private auth: AuthService, |
39 | private notifier: Notifier, | 48 | private notifier: Notifier, |
@@ -87,31 +96,38 @@ export class VideoWatchPlaylistComponent { | |||
87 | } | 96 | } |
88 | 97 | ||
89 | loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) { | 98 | loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) { |
90 | this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination) | 99 | const obs = this.hooks.wrapObsFun( |
91 | .subscribe(({ total, data }) => { | 100 | this.videoPlaylist.getPlaylistVideos.bind(this.videoPlaylist), |
92 | this.playlistElements = this.playlistElements.concat(data) | 101 | { videoPlaylistId: playlist.uuid, componentPagination: this.playlistPagination }, |
93 | this.playlistPagination.totalItems = total | 102 | 'video-watch', |
94 | 103 | 'filter:api.video-watch.video-playlist-elements.get.params', | |
95 | const firstAvailableVideo = this.playlistElements.find(e => !!e.video) | 104 | 'filter:api.video-watch.video-playlist-elements.get.result' |
96 | if (!firstAvailableVideo) { | 105 | ) |
97 | this.noPlaylistVideos = true | 106 | |
98 | return | 107 | obs.subscribe(({ total, data: playlistElements }) => { |
99 | } | 108 | this.playlistElements = this.playlistElements.concat(playlistElements) |
100 | 109 | this.playlistPagination.totalItems = total | |
101 | if (position) this.updatePlaylistIndex(position) | 110 | |
102 | 111 | const firstAvailableVideo = this.playlistElements.find(e => !!e.video) | |
103 | if (redirectToFirst) { | 112 | if (!firstAvailableVideo) { |
104 | const extras = { | 113 | this.noPlaylistVideos = true |
105 | queryParams: { | 114 | return |
106 | start: firstAvailableVideo.startTimestamp, | 115 | } |
107 | stop: firstAvailableVideo.stopTimestamp, | 116 | |
108 | playlistPosition: firstAvailableVideo.position | 117 | if (position) this.updatePlaylistIndex(position) |
109 | }, | 118 | |
110 | replaceUrl: true | 119 | if (redirectToFirst) { |
111 | } | 120 | const extras = { |
112 | this.router.navigate([], extras) | 121 | queryParams: { |
113 | } | 122 | start: firstAvailableVideo.startTimestamp, |
114 | }) | 123 | stop: firstAvailableVideo.stopTimestamp, |
124 | playlistPosition: firstAvailableVideo.position | ||
125 | }, | ||
126 | replaceUrl: true | ||
127 | } | ||
128 | this.router.navigate([], extras) | ||
129 | } | ||
130 | }) | ||
115 | } | 131 | } |
116 | 132 | ||
117 | updatePlaylistIndex (position: number) { | 133 | updatePlaylistIndex (position: number) { |
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts index acfd46a41..f0d159be3 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts | |||
@@ -455,7 +455,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
455 | this.zone.run(() => this.theaterEnabled = enabled) | 455 | this.zone.run(() => this.theaterEnabled = enabled) |
456 | }) | 456 | }) |
457 | 457 | ||
458 | this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player, videojs, video: this.video }) | 458 | this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { |
459 | player: this.player, | ||
460 | playlist: this.playlist, | ||
461 | playlistPosition: this.playlistPosition, | ||
462 | videojs, | ||
463 | video: this.video | ||
464 | }) | ||
459 | }) | 465 | }) |
460 | } | 466 | } |
461 | 467 | ||
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts index 0a01af593..76835b9fc 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts +++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts | |||
@@ -256,12 +256,12 @@ export class VideoPlaylistService { | |||
256 | ) | 256 | ) |
257 | } | 257 | } |
258 | 258 | ||
259 | getPlaylistVideos ( | 259 | getPlaylistVideos (options: { |
260 | videoPlaylistId: number | string, | 260 | videoPlaylistId: number | string |
261 | componentPagination: ComponentPaginationLight | 261 | componentPagination: ComponentPaginationLight |
262 | ): Observable<ResultList<VideoPlaylistElement>> { | 262 | }): Observable<ResultList<VideoPlaylistElement>> { |
263 | const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos' | 263 | const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + options.videoPlaylistId + '/videos' |
264 | const pagination = this.restService.componentPaginationToRestPagination(componentPagination) | 264 | const pagination = this.restService.componentPaginationToRestPagination(options.componentPagination) |
265 | 265 | ||
266 | let params = new HttpParams() | 266 | let params = new HttpParams() |
267 | params = this.restService.addRestGetParams(params, pagination) | 267 | params = this.restService.addRestGetParams(params, pagination) |