Add live info in watch page

12 files changed, 150 insertions, 6 deletions

diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 3816cab19..be0630395 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -30,7 +30,7 @@ import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
 import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
-import { LiveVideoService, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
+import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
 import { VideoChannelService } from './video-channel'
 
@@ -152,7 +152,6 @@ import { VideoChannelService } from './video-channel'
     RedundancyService,
     VideoImportService,
     VideoOwnershipService,
-    LiveVideoService,
     VideoService,
 
     VideoCaptionService,
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
index f69089517..3053df4ef 100644
--- a/client/src/app/shared/shared-main/video/index.ts
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -1,4 +1,3 @@
-export * from './live-video.service'
 export * from './redundancy.service'
 export * from './video-details.model'
 export * from './video-edit.model'
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index e3a52af3d..92f5bc0c0 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -193,6 +193,11 @@ export class Video implements VideoServerModel {
     return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
   }
 
+  isLiveInfoAvailableBy (user: AuthUser) {
+    return this.isLive &&
+      user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.GET_ANY_LIVE))
+  }
+
   canBeDuplicatedBy (user: AuthUser) {
     return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES)
   }
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-main/video/live-video.service.ts b/client/src/app/shared/shared-video-live/live-video.service.ts
index 093d65e83..b02442eae 100644
--- a/client/src/app/shared/shared-main/video/live-video.service.ts
+++ b/client/src/app/shared/shared-video-live/live-video.service.ts
@@ -3,7 +3,7 @@ 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'
+import { environment } from '../../../environments/environment'
 
 @Injectable()
 export class LiveVideoService {
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 { }
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 666144864..08c8da3dd 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -5,6 +5,7 @@ import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { SharedModerationModule } from '../shared-moderation'
 import { SharedThumbnailModule } from '../shared-thumbnail'
+import { SharedVideoLiveModule } from '../shared-video-live'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist/shared-video-playlist.module'
 import { VideoActionsDropdownComponent } from './video-actions-dropdown.component'
 import { VideoDownloadComponent } from './video-download.component'
@@ -18,7 +19,8 @@ import { VideosSelectionComponent } from './videos-selection.component'
     SharedModerationModule,
     SharedVideoPlaylistModule,
     SharedThumbnailModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedVideoLiveModule
   ],
 
   declarations: [
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
index 3c8271b65..00ee196ac 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
@@ -18,4 +18,5 @@
   <my-video-download #videoDownloadModal></my-video-download>
   <my-video-report #videoReportModal [video]="video"></my-video-report>
   <my-video-block #videoBlockModal [video]="video" (videoBlocked)="onVideoBlocked()"></my-video-block>
+  <my-live-stream-information #liveStreamInformationModal *ngIf="displayOptions.liveInfo"></my-live-stream-information>
 </ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index 8f4c129a5..18b4a2f3c 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -13,6 +13,7 @@ import {
   VideoDetails,
   VideoService
 } from '../shared-main'
+import { LiveStreamInformationComponent } from '../shared-video-live'
 import { VideoAddToPlaylistComponent } from '../shared-video-playlist'
 import { VideoDownloadComponent } from './video-download.component'
 
@@ -25,6 +26,7 @@ export type VideoActionsDisplayType = {
   report?: boolean
   duplicate?: boolean
   mute?: boolean
+  liveInfo?: boolean
 }
 
 @Component({
@@ -39,6 +41,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
   @ViewChild('videoBlockModal') videoBlockModal: VideoBlockComponent
+  @ViewChild('liveStreamInformationModal') liveStreamInformationModal: LiveStreamInformationComponent
 
   @Input() video: Video | VideoDetails
   @Input() videoCaptions: VideoCaption[] = []
@@ -51,7 +54,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
     delete: true,
     report: true,
     duplicate: true,
-    mute: true
+    mute: true,
+    liveInfo: false
   }
   @Input() placement = 'left'
 
@@ -127,6 +131,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
     this.videoBlockModal.show()
   }
 
+  showLiveInfoModal (video: Video) {
+    this.modalOpened.emit()
+
+    this.liveStreamInformationModal.show(video)
+  }
+
   /* Actions checker */
 
   isVideoUpdatable () {
@@ -145,6 +155,10 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.video.isUnblockableBy(this.user)
   }
 
+  isVideoLiveInfoAvailable () {
+    return this.video.isLiveInfoAvailableBy(this.user)
+  }
+
   isVideoDownloadable () {
     return this.video &&
       this.video.isLive !== true &&
@@ -261,6 +275,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
           iconName: 'download'
         },
         {
+          label: $localize`Display live information`,
+          handler: ({ video }) => this.showLiveInfoModal(video),
+          isDisplayed: () => this.isVideoLiveInfoAvailable(),
+          iconName: 'live'
+        },
+        {
           label: $localize`Update`,
           linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
           iconName: 'edit',