Add watch messages if live has not started

3 files changed, 87 insertions, 45 deletions

diff --git a/client/src/app/core/notification/index.ts b/client/src/app/core/notification/index.ts
index 3e8d9ea65..cd9634c8e 100644
--- a/client/src/app/core/notification/index.ts
+++ b/client/src/app/core/notification/index.ts
@@ -1,2 +1,2 @@
 export * from './notifier.service'
-export * from './user-notification-socket.service'
+export * from './peertube-socket.service'
diff --git a/client/src/app/core/notification/peertube-socket.service.ts b/client/src/app/core/notification/peertube-socket.service.ts
new file mode 100644
index 000000000..8668c44a8
--- /dev/null
+++ b/client/src/app/core/notification/peertube-socket.service.ts
@@ -0,0 +1,86 @@
+import { Subject } from 'rxjs'
+import { Injectable, NgZone } from '@angular/core'
+import { LiveVideoEventPayload, LiveVideoEventType, UserNotification as UserNotificationServer } from '@shared/models'
+import { environment } from '../../../environments/environment'
+import { AuthService } from '../auth'
+
+export type NotificationEvent = 'new' | 'read' | 'read-all'
+
+@Injectable()
+export class PeerTubeSocket {
+  private io: typeof import ('socket.io-client')
+
+  private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
+  private liveVideosSubject = new Subject<{ type: LiveVideoEventType, payload: LiveVideoEventPayload }>()
+
+  private notificationSocket: SocketIOClient.Socket
+  private liveVideosSocket: SocketIOClient.Socket
+
+  constructor (
+    private auth: AuthService,
+    private ngZone: NgZone
+  ) {}
+
+  async getMyNotificationsSocket () {
+    await this.initNotificationSocket()
+
+    return this.notificationSubject.asObservable()
+  }
+
+  getLiveVideosObservable () {
+    return this.liveVideosSubject.asObservable()
+  }
+
+  async subscribeToLiveVideosSocket (videoId: number) {
+    await this.initLiveVideosSocket()
+
+    this.liveVideosSocket.emit('subscribe', { videoId })
+  }
+
+  async unsubscribeLiveVideos (videoId: number) {
+    if (!this.liveVideosSocket) return
+
+    this.liveVideosSocket.emit('unsubscribe', { videoId })
+  }
+
+  dispatchNotificationEvent (type: NotificationEvent, notification?: UserNotificationServer) {
+    this.notificationSubject.next({ type, notification })
+  }
+
+  private async initNotificationSocket () {
+    if (this.notificationSocket) return
+
+    await this.importIOIfNeeded()
+
+    this.ngZone.runOutsideAngular(() => {
+      this.notificationSocket = this.io(environment.apiUrl + '/user-notifications', {
+        query: { accessToken: this.auth.getAccessToken() }
+      })
+
+      this.notificationSocket.on('new-notification', (n: UserNotificationServer) => this.dispatchNotificationEvent('new', n))
+    })
+  }
+
+  private async initLiveVideosSocket () {
+    if (this.liveVideosSocket) return
+
+    await this.importIOIfNeeded()
+
+    this.ngZone.runOutsideAngular(() => {
+      this.liveVideosSocket = this.io(environment.apiUrl + '/live-videos')
+
+      const type: LiveVideoEventType = 'state-change'
+      this.liveVideosSocket.on(type, (payload: LiveVideoEventPayload) => this.dispatchLiveVideoEvent(type, payload))
+    })
+  }
+
+  private async importIOIfNeeded () {
+    if (this.io) return
+
+    this.io = (await import('socket.io-client') as any).default
+  }
+
+  private dispatchLiveVideoEvent (type: LiveVideoEventType, payload: LiveVideoEventPayload) {
+    this.liveVideosSubject.next({ type, payload })
+  }
+}
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
deleted file mode 100644
index 37f0bc32c..000000000
--- a/client/src/app/core/notification/user-notification-socket.service.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Subject } from 'rxjs'
-import { Injectable, NgZone } from '@angular/core'
-import { UserNotification as UserNotificationServer } from '@shared/models'
-import { environment } from '../../../environments/environment'
-import { AuthService } from '../auth'
-
-export type NotificationEvent = 'new' | 'read' | 'read-all'
-
-@Injectable()
-export class UserNotificationSocket {
-  private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
-
-  private socket: SocketIOClient.Socket
-
-  constructor (
-    private auth: AuthService,
-    private ngZone: NgZone
-  ) {}
-
-  dispatch (type: NotificationEvent, notification?: UserNotificationServer) {
-    this.notificationSubject.next({ type, notification })
-  }
-
-  async getMyNotificationsSocket () {
-    await this.initSocket()
-
-    return this.notificationSubject.asObservable()
-  }
-
-  private async initSocket () {
-    if (this.socket) return
-
-    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
-    const io: typeof import ('socket.io-client') = (await import('socket.io-client') as any).default
-
-    this.ngZone.runOutsideAngular(() => {
-      this.socket = io(environment.apiUrl + '/user-notifications', {
-        query: { accessToken: this.auth.getAccessToken() }
-      })
-
-      this.socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
-    })
-  }
-}