diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/src/standalone/videos/embed.ts | 44 | ||||
-rw-r--r-- | client/src/standalone/videos/shared/live-manager.ts | 15 |
2 files changed, 44 insertions, 15 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 356f149c0..2b826b9a2 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -3,12 +3,12 @@ import '../../assets/player/shared/dock/peertube-dock-component' | |||
3 | import '../../assets/player/shared/dock/peertube-dock-plugin' | 3 | import '../../assets/player/shared/dock/peertube-dock-plugin' |
4 | import videojs from 'video.js' | 4 | import videojs from 'video.js' |
5 | import { peertubeTranslate } from '../../../../shared/core-utils/i18n' | 5 | import { peertubeTranslate } from '../../../../shared/core-utils/i18n' |
6 | import { HTMLServerConfig, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement } from '../../../../shared/models' | 6 | import { HTMLServerConfig, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement, VideoState } from '../../../../shared/models' |
7 | import { PeertubePlayerManager } from '../../assets/player' | 7 | import { PeertubePlayerManager } from '../../assets/player' |
8 | import { TranslationsManager } from '../../assets/player/translations-manager' | 8 | import { TranslationsManager } from '../../assets/player/translations-manager' |
9 | import { getParamString, logger, videoRequiresAuth } from '../../root-helpers' | 9 | import { getParamString, logger, videoRequiresAuth } from '../../root-helpers' |
10 | import { PeerTubeEmbedApi } from './embed-api' | 10 | import { PeerTubeEmbedApi } from './embed-api' |
11 | import { AuthHTTP, LiveManager, PeerTubePlugin, PlayerManagerOptions, PlaylistFetcher, PlaylistTracker, VideoFetcher } from './shared' | 11 | import { AuthHTTP, LiveManager, PeerTubePlugin, PlayerManagerOptions, PlaylistFetcher, PlaylistTracker, Translations, VideoFetcher } from './shared' |
12 | import { PlayerHTML } from './shared/player-html' | 12 | import { PlayerHTML } from './shared/player-html' |
13 | 13 | ||
14 | export class PeerTubeEmbed { | 14 | export class PeerTubeEmbed { |
@@ -251,18 +251,25 @@ export class PeerTubeEmbed { | |||
251 | }) | 251 | }) |
252 | } | 252 | } |
253 | 253 | ||
254 | this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video }) | ||
255 | |||
256 | if (video.isLive) { | 254 | if (video.isLive) { |
257 | this.liveManager.displayInfoAndListenForChanges({ | 255 | this.liveManager.listenForChanges({ |
258 | video, | 256 | video, |
259 | translations, | ||
260 | onPublishedVideo: () => { | 257 | onPublishedVideo: () => { |
261 | this.liveManager.stopListeningForChanges(video) | 258 | this.liveManager.stopListeningForChanges(video) |
262 | this.loadVideoAndBuildPlayer(video.uuid) | 259 | this.loadVideoAndBuildPlayer(video.uuid) |
263 | } | 260 | } |
264 | }) | 261 | }) |
262 | |||
263 | if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) { | ||
264 | this.liveManager.displayInfo({ state: video.state.id, translations }) | ||
265 | |||
266 | this.disablePlayer() | ||
267 | } else { | ||
268 | this.correctlyHandleLiveEnding(translations) | ||
269 | } | ||
265 | } | 270 | } |
271 | |||
272 | this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video }) | ||
266 | } | 273 | } |
267 | 274 | ||
268 | private resetPlayerElement () { | 275 | private resetPlayerElement () { |
@@ -351,6 +358,31 @@ export class PeerTubeEmbed { | |||
351 | private isPlaylistEmbed () { | 358 | private isPlaylistEmbed () { |
352 | return window.location.pathname.split('/')[1] === 'video-playlists' | 359 | return window.location.pathname.split('/')[1] === 'video-playlists' |
353 | } | 360 | } |
361 | |||
362 | // --------------------------------------------------------------------------- | ||
363 | |||
364 | private correctlyHandleLiveEnding (translations: Translations) { | ||
365 | this.player.one('ended', () => { | ||
366 | // Display the live ended information | ||
367 | this.liveManager.displayInfo({ state: VideoState.LIVE_ENDED, translations }) | ||
368 | |||
369 | this.disablePlayer() | ||
370 | }) | ||
371 | } | ||
372 | |||
373 | private disablePlayer () { | ||
374 | if (this.player.isFullscreen()) { | ||
375 | this.player.exitFullscreen() | ||
376 | } | ||
377 | |||
378 | // Disable player | ||
379 | this.player.hasStarted(false) | ||
380 | this.player.removeClass('vjs-has-autoplay') | ||
381 | this.player.bigPlayButton.hide(); | ||
382 | |||
383 | (this.player.el() as HTMLElement).style.pointerEvents = 'none' | ||
384 | } | ||
385 | |||
354 | } | 386 | } |
355 | 387 | ||
356 | PeerTubeEmbed.main() | 388 | PeerTubeEmbed.main() |
diff --git a/client/src/standalone/videos/shared/live-manager.ts b/client/src/standalone/videos/shared/live-manager.ts index ec11d0b61..5fac229ba 100644 --- a/client/src/standalone/videos/shared/live-manager.ts +++ b/client/src/standalone/videos/shared/live-manager.ts | |||
@@ -14,15 +14,12 @@ export class LiveManager { | |||
14 | 14 | ||
15 | } | 15 | } |
16 | 16 | ||
17 | async displayInfoAndListenForChanges (options: { | 17 | async listenForChanges (options: { |
18 | video: VideoDetails | 18 | video: VideoDetails |
19 | translations: Translations | ||
20 | onPublishedVideo: () => any | 19 | onPublishedVideo: () => any |
21 | }) { | 20 | }) { |
22 | const { video, onPublishedVideo } = options | 21 | const { video, onPublishedVideo } = options |
23 | 22 | ||
24 | this.displayAppropriateInfo(options) | ||
25 | |||
26 | if (!this.liveSocket) { | 23 | if (!this.liveSocket) { |
27 | const io = (await import('socket.io-client')).io | 24 | const io = (await import('socket.io-client')).io |
28 | this.liveSocket = io(window.location.origin + '/live-videos') | 25 | this.liveSocket = io(window.location.origin + '/live-videos') |
@@ -51,18 +48,18 @@ export class LiveManager { | |||
51 | this.liveSocket.emit('unsubscribe', { videoId: video.id }) | 48 | this.liveSocket.emit('unsubscribe', { videoId: video.id }) |
52 | } | 49 | } |
53 | 50 | ||
54 | private displayAppropriateInfo (options: { | 51 | displayInfo (options: { |
55 | video: VideoDetails | 52 | state: VideoState |
56 | translations: Translations | 53 | translations: Translations |
57 | }) { | 54 | }) { |
58 | const { video, translations } = options | 55 | const { state, translations } = options |
59 | 56 | ||
60 | if (video.state.id === VideoState.WAITING_FOR_LIVE) { | 57 | if (state === VideoState.WAITING_FOR_LIVE) { |
61 | this.displayWaitingForLiveInfo(translations) | 58 | this.displayWaitingForLiveInfo(translations) |
62 | return | 59 | return |
63 | } | 60 | } |
64 | 61 | ||
65 | if (video.state.id === VideoState.LIVE_ENDED) { | 62 | if (state === VideoState.LIVE_ENDED) { |
66 | this.displayEndedLiveInfo(translations) | 63 | this.displayEndedLiveInfo(translations) |
67 | return | 64 | return |
68 | } | 65 | } |