Prevent layout shift in videos list

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-live / live-stream-information.component.ts

diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.ts b/client/src/app/shared/shared-video-live/live-stream-information.component.ts
index e6142eb2e279bfba64b92a8c1c3891d878a49bd2..3dd59bb572933badb6dbae7a58f578ca14b2b66a 100644 (file)
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.ts
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Video } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { LiveVideo, LiveVideoError, LiveVideoSession } from '@shared/models'
 import { LiveVideoService } from './live-video.service'
 
 @Component({
@@ -12,8 +13,8 @@ export class LiveStreamInformationComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
   video: Video
-  rtmpUrl = ''
-  streamKey = ''
+  live: LiveVideo
+  latestLiveSessions: LiveVideoSession[] = []
 
   constructor (
     private modalService: NgbModal,
@@ -22,8 +23,7 @@ export class LiveStreamInformationComponent {
 
   show (video: Video) {
     this.video = video
-    this.rtmpUrl = ''
-    this.streamKey = ''
+    this.live = undefined
 
     this.loadLiveInfo(video)
 
@@ -31,11 +31,36 @@ export class LiveStreamInformationComponent {
       .open(this.modal, { centered: true })
   }
 
+  getVideoUrl (video: { shortUUID: string }) {
+    return Video.buildWatchUrl(video)
+  }
+
+  getErrorLabel (session: LiveVideoSession) {
+    if (!session.error) return undefined
+
+    const errors: { [ id in LiveVideoError ]: string } = {
+      [LiveVideoError.BAD_SOCKET_HEALTH]: $localize`Server too slow`,
+      [LiveVideoError.BLACKLISTED]: $localize`Live blacklisted`,
+      [LiveVideoError.DURATION_EXCEEDED]: $localize`Max duration exceeded`,
+      [LiveVideoError.FFMPEG_ERROR]: $localize`Server error`,
+      [LiveVideoError.QUOTA_EXCEEDED]: $localize`Quota exceeded`
+    }
+
+    return errors[session.error]
+  }
+
+  isReplayBeingProcessed (session: LiveVideoSession) {
+    // Running live
+    if (!session.endDate) return false
+
+    return session.saveReplay && !session.endingProcessed
+  }
+
   private loadLiveInfo (video: Video) {
     this.liveVideoService.getVideoLive(video.id)
-      .subscribe(live => {
-        this.rtmpUrl = live.rtmpUrl
-        this.streamKey = live.streamKey
-      })
+      .subscribe(live => this.live = live)
+
+    this.liveVideoService.listSessions(video.id)
+      .subscribe(({ data }) => this.latestLiveSessions = data.reverse().slice(0, 5))
   }
 }