1 import { Socket } from 'socket.io-client'
2 import { LiveVideoEventPayload, VideoDetails, VideoState } from '../../../../../shared/models'
3 import { PlayerHTML } from './player-html'
4 import { Translations } from './translations'
6 export class LiveManager {
7 private liveSocket: Socket
10 private readonly playerHTML: PlayerHTML
15 async displayInfoAndListenForChanges (options: {
17 translations: Translations
18 onPublishedVideo: () => any
20 const { video, onPublishedVideo } = options
22 this.displayAppropriateInfo(options)
24 if (!this.liveSocket) {
25 const io = (await import('socket.io-client')).io
26 this.liveSocket = io(window.location.origin + '/live-videos')
29 this.liveSocket.on('state-change', (payload: LiveVideoEventPayload) => {
30 if (payload.state === VideoState.PUBLISHED) {
31 this.playerHTML.removeInformation()
37 this.liveSocket.emit('subscribe', { videoId: video.id })
40 stopListeningForChanges (video: VideoDetails) {
41 this.liveSocket.emit('unsubscribe', { videoId: video.id })
44 private displayAppropriateInfo (options: {
46 translations: Translations
48 const { video, translations } = options
50 if (video.state.id === VideoState.WAITING_FOR_LIVE) {
51 this.displayWaitingForLiveInfo(translations)
55 if (video.state.id === VideoState.LIVE_ENDED) {
56 this.displayEndedLiveInfo(translations)
61 private displayWaitingForLiveInfo (translations: Translations) {
62 this.playerHTML.displayInformation('This live has not started yet.', translations)
65 private displayEndedLiveInfo (translations: Translations) {
66 this.playerHTML.displayInformation('This live has ended.', translations)