diff options
Diffstat (limited to 'client/src/standalone/videos/shared/player-manager-options.ts')
-rw-r--r-- | client/src/standalone/videos/shared/player-manager-options.ts | 323 |
1 files changed, 323 insertions, 0 deletions
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts new file mode 100644 index 000000000..144d74319 --- /dev/null +++ b/client/src/standalone/videos/shared/player-manager-options.ts | |||
@@ -0,0 +1,323 @@ | |||
1 | import { peertubeTranslate } from '../../../../../shared/core-utils/i18n' | ||
2 | import { | ||
3 | HTMLServerConfig, | ||
4 | LiveVideo, | ||
5 | Video, | ||
6 | VideoCaption, | ||
7 | VideoDetails, | ||
8 | VideoPlaylistElement, | ||
9 | VideoStreamingPlaylistType | ||
10 | } from '../../../../../shared/models' | ||
11 | import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode, VideoJSCaption } from '../../../assets/player' | ||
12 | import { | ||
13 | getBoolOrDefault, | ||
14 | getParamString, | ||
15 | getParamToggle, | ||
16 | isP2PEnabled, | ||
17 | peertubeLocalStorage, | ||
18 | UserLocalStorageKeys | ||
19 | } from '../../../root-helpers' | ||
20 | import { PeerTubePlugin } from './peertube-plugin' | ||
21 | import { PlayerHTML } from './player-html' | ||
22 | import { PlaylistTracker } from './playlist-tracker' | ||
23 | import { Translations } from './translations' | ||
24 | import { VideoFetcher } from './video-fetcher' | ||
25 | |||
26 | export class PlayerManagerOptions { | ||
27 | private autoplay: boolean | ||
28 | |||
29 | private controls: boolean | ||
30 | private controlBar: boolean | ||
31 | |||
32 | private muted: boolean | ||
33 | private loop: boolean | ||
34 | private subtitle: string | ||
35 | private enableApi = false | ||
36 | private startTime: number | string = 0 | ||
37 | private stopTime: number | string | ||
38 | |||
39 | private title: boolean | ||
40 | private warningTitle: boolean | ||
41 | private peertubeLink: boolean | ||
42 | private p2pEnabled: boolean | ||
43 | private bigPlayBackgroundColor: string | ||
44 | private foregroundColor: string | ||
45 | |||
46 | private mode: PlayerMode | ||
47 | private scope = 'peertube' | ||
48 | |||
49 | constructor ( | ||
50 | private readonly playerHTML: PlayerHTML, | ||
51 | private readonly videoFetcher: VideoFetcher, | ||
52 | private readonly peertubePlugin: PeerTubePlugin | ||
53 | ) {} | ||
54 | |||
55 | hasAPIEnabled () { | ||
56 | return this.enableApi | ||
57 | } | ||
58 | |||
59 | hasAutoplay () { | ||
60 | return this.autoplay | ||
61 | } | ||
62 | |||
63 | hasControls () { | ||
64 | return this.controls | ||
65 | } | ||
66 | |||
67 | hasTitle () { | ||
68 | return this.title | ||
69 | } | ||
70 | |||
71 | hasWarningTitle () { | ||
72 | return this.warningTitle | ||
73 | } | ||
74 | |||
75 | hasP2PEnabled () { | ||
76 | return !!this.p2pEnabled | ||
77 | } | ||
78 | |||
79 | hasBigPlayBackgroundColor () { | ||
80 | return !!this.bigPlayBackgroundColor | ||
81 | } | ||
82 | |||
83 | getBigPlayBackgroundColor () { | ||
84 | return this.bigPlayBackgroundColor | ||
85 | } | ||
86 | |||
87 | hasForegroundColor () { | ||
88 | return !!this.foregroundColor | ||
89 | } | ||
90 | |||
91 | getForegroundColor () { | ||
92 | return this.foregroundColor | ||
93 | } | ||
94 | |||
95 | getMode () { | ||
96 | return this.mode | ||
97 | } | ||
98 | |||
99 | getScope () { | ||
100 | return this.scope | ||
101 | } | ||
102 | |||
103 | // --------------------------------------------------------------------------- | ||
104 | |||
105 | loadParams (config: HTMLServerConfig, video: VideoDetails) { | ||
106 | try { | ||
107 | const params = new URL(window.location.toString()).searchParams | ||
108 | |||
109 | this.autoplay = getParamToggle(params, 'autoplay', false) | ||
110 | |||
111 | this.controls = getParamToggle(params, 'controls', true) | ||
112 | this.controlBar = getParamToggle(params, 'controlBar', true) | ||
113 | |||
114 | this.muted = getParamToggle(params, 'muted', undefined) | ||
115 | this.loop = getParamToggle(params, 'loop', false) | ||
116 | this.title = getParamToggle(params, 'title', true) | ||
117 | this.enableApi = getParamToggle(params, 'api', this.enableApi) | ||
118 | this.warningTitle = getParamToggle(params, 'warningTitle', true) | ||
119 | this.peertubeLink = getParamToggle(params, 'peertubeLink', true) | ||
120 | this.p2pEnabled = getParamToggle(params, 'p2p', this.isP2PEnabled(config, video)) | ||
121 | |||
122 | this.scope = getParamString(params, 'scope', this.scope) | ||
123 | this.subtitle = getParamString(params, 'subtitle') | ||
124 | this.startTime = getParamString(params, 'start') | ||
125 | this.stopTime = getParamString(params, 'stop') | ||
126 | |||
127 | this.bigPlayBackgroundColor = getParamString(params, 'bigPlayBackgroundColor') | ||
128 | this.foregroundColor = getParamString(params, 'foregroundColor') | ||
129 | |||
130 | const modeParam = getParamString(params, 'mode') | ||
131 | |||
132 | if (modeParam) { | ||
133 | if (modeParam === 'p2p-media-loader') this.mode = 'p2p-media-loader' | ||
134 | else this.mode = 'webtorrent' | ||
135 | } else { | ||
136 | if (Array.isArray(video.streamingPlaylists) && video.streamingPlaylists.length !== 0) this.mode = 'p2p-media-loader' | ||
137 | else this.mode = 'webtorrent' | ||
138 | } | ||
139 | } catch (err) { | ||
140 | console.error('Cannot get params from URL.', err) | ||
141 | } | ||
142 | } | ||
143 | |||
144 | // --------------------------------------------------------------------------- | ||
145 | |||
146 | async getPlayerOptions (options: { | ||
147 | video: VideoDetails | ||
148 | captionsResponse: Response | ||
149 | live?: LiveVideo | ||
150 | |||
151 | alreadyHadPlayer: boolean | ||
152 | |||
153 | translations: Translations | ||
154 | |||
155 | playlistTracker?: PlaylistTracker | ||
156 | playNextPlaylistVideo?: () => any | ||
157 | playPreviousPlaylistVideo?: () => any | ||
158 | onVideoUpdate?: (uuid: string) => any | ||
159 | }) { | ||
160 | const { | ||
161 | video, | ||
162 | captionsResponse, | ||
163 | alreadyHadPlayer, | ||
164 | translations, | ||
165 | playlistTracker, | ||
166 | live | ||
167 | } = options | ||
168 | |||
169 | const videoCaptions = await this.buildCaptions(captionsResponse, translations) | ||
170 | |||
171 | const playerOptions: PeertubePlayerManagerOptions = { | ||
172 | common: { | ||
173 | // Autoplay in playlist mode | ||
174 | autoplay: alreadyHadPlayer ? true : this.autoplay, | ||
175 | |||
176 | controls: this.controls, | ||
177 | controlBar: this.controlBar, | ||
178 | |||
179 | muted: this.muted, | ||
180 | loop: this.loop, | ||
181 | |||
182 | p2pEnabled: this.p2pEnabled, | ||
183 | |||
184 | captions: videoCaptions.length !== 0, | ||
185 | subtitle: this.subtitle, | ||
186 | |||
187 | startTime: playlistTracker | ||
188 | ? playlistTracker.getCurrentElement().startTimestamp | ||
189 | : this.startTime, | ||
190 | stopTime: playlistTracker | ||
191 | ? playlistTracker.getCurrentElement().stopTimestamp | ||
192 | : this.stopTime, | ||
193 | |||
194 | videoCaptions, | ||
195 | inactivityTimeout: 2500, | ||
196 | videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid), | ||
197 | |||
198 | videoShortUUID: video.shortUUID, | ||
199 | videoUUID: video.uuid, | ||
200 | |||
201 | playerElement: this.playerHTML.getPlayerElement(), | ||
202 | onPlayerElementChange: (element: HTMLVideoElement) => { | ||
203 | this.playerHTML.setPlayerElement(element) | ||
204 | }, | ||
205 | |||
206 | videoDuration: video.duration, | ||
207 | enableHotkeys: true, | ||
208 | peertubeLink: this.peertubeLink, | ||
209 | poster: window.location.origin + video.previewPath, | ||
210 | theaterButton: false, | ||
211 | |||
212 | serverUrl: window.location.origin, | ||
213 | language: navigator.language, | ||
214 | embedUrl: window.location.origin + video.embedPath, | ||
215 | embedTitle: video.name, | ||
216 | |||
217 | errorNotifier: () => { | ||
218 | // Empty, we don't have a notifier in the embed | ||
219 | }, | ||
220 | |||
221 | ...this.buildLiveOptions(video, live), | ||
222 | |||
223 | ...this.buildPlaylistOptions(options) | ||
224 | }, | ||
225 | |||
226 | webtorrent: { | ||
227 | videoFiles: video.files | ||
228 | }, | ||
229 | |||
230 | ...this.buildP2PMediaLoaderOptions(video), | ||
231 | |||
232 | pluginsManager: this.peertubePlugin.getPluginsManager() | ||
233 | } | ||
234 | |||
235 | return playerOptions | ||
236 | } | ||
237 | |||
238 | private buildLiveOptions (video: VideoDetails, live: LiveVideo) { | ||
239 | if (!video.isLive) return { isLive: false } | ||
240 | |||
241 | return { | ||
242 | isLive: true, | ||
243 | liveOptions: { | ||
244 | latencyMode: live.latencyMode | ||
245 | } | ||
246 | } | ||
247 | } | ||
248 | |||
249 | private buildPlaylistOptions (options: { | ||
250 | playlistTracker?: PlaylistTracker | ||
251 | playNextPlaylistVideo?: () => any | ||
252 | playPreviousPlaylistVideo?: () => any | ||
253 | onVideoUpdate?: (uuid: string) => any | ||
254 | }) { | ||
255 | const { playlistTracker, playNextPlaylistVideo, playPreviousPlaylistVideo, onVideoUpdate } = options | ||
256 | |||
257 | if (!playlistTracker) return {} | ||
258 | |||
259 | return { | ||
260 | playlist: { | ||
261 | elements: playlistTracker.getPlaylistElements(), | ||
262 | playlist: playlistTracker.getPlaylist(), | ||
263 | |||
264 | getCurrentPosition: () => playlistTracker.getCurrentPosition(), | ||
265 | |||
266 | onItemClicked: (videoPlaylistElement: VideoPlaylistElement) => { | ||
267 | playlistTracker.setCurrentElement(videoPlaylistElement) | ||
268 | |||
269 | onVideoUpdate(videoPlaylistElement.video.uuid) | ||
270 | } | ||
271 | }, | ||
272 | |||
273 | nextVideo: () => playNextPlaylistVideo(), | ||
274 | hasNextVideo: () => playlistTracker.hasNextPlaylistElement(), | ||
275 | |||
276 | previousVideo: () => playPreviousPlaylistVideo(), | ||
277 | hasPreviousVideo: () => playlistTracker.hasPreviousPlaylistElement() | ||
278 | } | ||
279 | } | ||
280 | |||
281 | private buildP2PMediaLoaderOptions (video: VideoDetails) { | ||
282 | if (this.mode !== 'p2p-media-loader') return {} | ||
283 | |||
284 | const hlsPlaylist = video.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS) | ||
285 | |||
286 | return { | ||
287 | p2pMediaLoader: { | ||
288 | playlistUrl: hlsPlaylist.playlistUrl, | ||
289 | segmentsSha256Url: hlsPlaylist.segmentsSha256Url, | ||
290 | redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl), | ||
291 | trackerAnnounce: video.trackerUrls, | ||
292 | videoFiles: hlsPlaylist.files | ||
293 | } as P2PMediaLoaderOptions | ||
294 | } | ||
295 | } | ||
296 | |||
297 | // --------------------------------------------------------------------------- | ||
298 | |||
299 | private async buildCaptions (captionsResponse: Response, translations: Translations): Promise<VideoJSCaption[]> { | ||
300 | if (captionsResponse.ok) { | ||
301 | const { data } = await captionsResponse.json() | ||
302 | |||
303 | return data.map((c: VideoCaption) => ({ | ||
304 | label: peertubeTranslate(c.language.label, translations), | ||
305 | language: c.language.id, | ||
306 | src: window.location.origin + c.captionPath | ||
307 | })) | ||
308 | } | ||
309 | |||
310 | return [] | ||
311 | } | ||
312 | |||
313 | // --------------------------------------------------------------------------- | ||
314 | |||
315 | private isP2PEnabled (config: HTMLServerConfig, video: Video) { | ||
316 | const userP2PEnabled = getBoolOrDefault( | ||
317 | peertubeLocalStorage.getItem(UserLocalStorageKeys.P2P_ENABLED), | ||
318 | config.defaults.p2p.embed.enabled | ||
319 | ) | ||
320 | |||
321 | return isP2PEnabled(video, config, userP2PEnabled) | ||
322 | } | ||
323 | } | ||