Add session informations in live modal

4 files changed, 52 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 35e894a55..01e305938 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -31,6 +31,19 @@
 
       <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
     </div>
+
+    <div class="journal">
+      <label i18n>Latest live sessions</label>
+
+      <div class="journal-session" *ngFor="let session of latestLiveSessions">
+        <span i18n class="badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
+        <span class="badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
+
+        <span i18n>Started on {{ session.startDate | date:'medium' }}</span>
+        <span i18n *ngIf="session.endDate">Ended on {{ session.endDate | date:'medium' }}</span>
+        <a i18n *ngIf="session.replayVideo" [routerLink]="getVideoUrl(session.replayVideo)" target="_blank">Go to replay</a>
+      </div>
+    </div>
   </div>
 
   <div class="modal-footer">
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
index 7cd53478f..9c8ad12bd 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -17,3 +17,12 @@ p-autocomplete {
   font-size: 13px;
   margin-right: 5px;
 }
+
+.journal-session {
+  margin-bottom: 5px;
+
+  span:not(.badge, :last-child)::after {
+    margin: 3px;
+    content: '•';
+  }
+}
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 9a5d2809b..1cf6f8528 100644
--- 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,7 +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 } from '@shared/models'
+import { LiveVideo, LiveVideoError, LiveVideoSession } from '@shared/models'
 import { LiveVideoService } from './live-video.service'
 
 @Component({
@@ -14,6 +14,7 @@ export class LiveStreamInformationComponent {
 
   video: Video
   live: LiveVideo
+  latestLiveSessions: LiveVideoSession[] = []
 
   constructor (
     private modalService: NgbModal,
@@ -30,8 +31,29 @@ 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]
+  }
+
   private loadLiveInfo (video: Video) {
     this.liveVideoService.getVideoLive(video.id)
       .subscribe(live => this.live = live)
+
+    this.liveVideoService.listSessions(video.id)
+      .subscribe(({ data }) => this.latestLiveSessions = data.slice(0, 5))
   }
 }
diff --git a/client/src/app/shared/shared-video-live/live-video.service.ts b/client/src/app/shared/shared-video-live/live-video.service.ts
index 0d166e91d..11b9dd739 100644
--- a/client/src/app/shared/shared-video-live/live-video.service.ts
+++ b/client/src/app/shared/shared-video-live/live-video.service.ts
@@ -2,7 +2,7 @@ import { catchError } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor } from '@app/core'
-import { LiveVideo, LiveVideoCreate, LiveVideoUpdate, VideoCreateResult } from '@shared/models'
+import { LiveVideo, LiveVideoCreate, LiveVideoSession, LiveVideoUpdate, ResultList, VideoCreateResult } from '@shared/models'
 import { environment } from '../../../environments/environment'
 
 @Injectable()
@@ -26,6 +26,12 @@ export class LiveVideoService {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
+  listSessions (videoId: number | string) {
+    return this.authHttp
+               .get<ResultList<LiveVideoSession>>(LiveVideoService.BASE_VIDEO_LIVE_URL + videoId + '/sessions')
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
   updateLive (videoId: number | string, liveUpdate: LiveVideoUpdate) {
     return this.authHttp
       .put(LiveVideoService.BASE_VIDEO_LIVE_URL + videoId, liveUpdate)