Add live info in watch page

6 files changed, 152 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-video-live/index.ts b/client/src/app/shared/shared-video-live/index.ts
new file mode 100644
index 000000000..c4048e7c5
--- /dev/null
+++ b/client/src/app/shared/shared-video-live/index.ts
@@ -0,0 +1,4 @@
+export * from './live-video.service'
+export * from './live-stream-information.component'
+
+export * from './shared-video-live.module'
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
new file mode 100644
index 000000000..2e65e1de9
--- /dev/null
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -0,0 +1,35 @@
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Live information</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-group">
+      <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
+      <my-input-readonly-copy id="liveVideoRTMPUrl" [value]="rtmpUrl"></my-input-readonly-copy>
+    </div>
+
+    <div class="form-group">
+      <label for="liveVideoStreamKey" i18n>Live stream key</label>
+      <my-input-readonly-copy id="liveVideoStreamKey" [value]="streamKey"></my-input-readonly-copy>
+
+      <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <div class="form-group inputs">
+      <input
+        type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
+        (click)="dismiss()"
+      >
+
+      <my-edit-button
+        i18n-label label="Update live settings"
+        [routerLink]="[ '/videos', 'update', video.uuid ]" (click)="dismiss()"
+      ></my-edit-button>
+    </div>
+  </div>
+</ng-template>
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
new file mode 100644
index 000000000..a79fec179
--- /dev/null
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+
+p-autocomplete {
+  display: block;
+}
+
+.form-group {
+  margin: 20px 0;
+}
\ No newline at end of file
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
new file mode 100644
index 000000000..e6142eb2e
--- /dev/null
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.ts
@@ -0,0 +1,41 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Video } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { LiveVideoService } from './live-video.service'
+
+@Component({
+  selector: 'my-live-stream-information',
+  templateUrl: './live-stream-information.component.html',
+  styleUrls: [ './live-stream-information.component.scss' ]
+})
+export class LiveStreamInformationComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  video: Video
+  rtmpUrl = ''
+  streamKey = ''
+
+  constructor (
+    private modalService: NgbModal,
+    private liveVideoService: LiveVideoService
+  ) { }
+
+  show (video: Video) {
+    this.video = video
+    this.rtmpUrl = ''
+    this.streamKey = ''
+
+    this.loadLiveInfo(video)
+
+    this.modalService
+      .open(this.modal, { centered: true })
+  }
+
+  private loadLiveInfo (video: Video) {
+    this.liveVideoService.getVideoLive(video.id)
+      .subscribe(live => {
+        this.rtmpUrl = live.rtmpUrl
+        this.streamKey = live.streamKey
+      })
+  }
+}
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
new file mode 100644
index 000000000..b02442eae
--- /dev/null
+++ b/client/src/app/shared/shared-video-live/live-video.service.ts
@@ -0,0 +1,34 @@
+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 } from '@shared/models'
+import { environment } from '../../../environments/environment'
+
+@Injectable()
+export class LiveVideoService {
+  static BASE_VIDEO_LIVE_URL = environment.apiUrl + '/api/v1/videos/live/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+
+  goLive (video: LiveVideoCreate) {
+    return this.authHttp
+               .post<{ video: { id: number, uuid: string } }>(LiveVideoService.BASE_VIDEO_LIVE_URL, video)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  getVideoLive (videoId: number | string) {
+    return this.authHttp
+               .get<LiveVideo>(LiveVideoService.BASE_VIDEO_LIVE_URL + videoId)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  updateLive (videoId: number | string, liveUpdate: LiveVideoUpdate) {
+    return this.authHttp
+      .put(LiveVideoService.BASE_VIDEO_LIVE_URL + videoId, liveUpdate)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}
diff --git a/client/src/app/shared/shared-video-live/shared-video-live.module.ts b/client/src/app/shared/shared-video-live/shared-video-live.module.ts
new file mode 100644
index 000000000..c35c2caa3
--- /dev/null
+++ b/client/src/app/shared/shared-video-live/shared-video-live.module.ts
@@ -0,0 +1,28 @@
+
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { LiveStreamInformationComponent } from './live-stream-information.component'
+import { LiveVideoService } from './live-video.service'
+
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    LiveStreamInformationComponent
+  ],
+
+  exports: [
+    LiveStreamInformationComponent
+  ],
+
+  providers: [
+    LiveVideoService
+  ]
+})
+export class SharedVideoLiveModule { }