From f8c00564e7e66c7c9d65ea044a4c1485df0e4c7c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 5 Nov 2020 10:56:23 +0100
Subject: Add live info in watch page

---
 .../modals/live-stream-information.component.html  | 35 ------------------
 .../modals/live-stream-information.component.scss  | 10 ------
 .../modals/live-stream-information.component.ts    | 40 ---------------------
 .../my-account-videos.component.ts                 |  2 +-
 client/src/app/+my-account/my-account.module.ts    |  8 ++---
 .../+video-edit/shared/video-edit.module.ts        |  4 ++-
 .../video-go-live.component.html                   |  3 +-
 .../video-go-live.component.ts                     |  7 ++--
 .../+videos/+video-edit/video-update.component.ts  |  5 +--
 .../+videos/+video-edit/video-update.resolver.ts   |  3 +-
 .../+video-watch/video-watch.component.html        |  2 +-
 .../+video-watch/video-watch.component.scss        |  6 ++--
 .../+videos/+video-watch/video-watch.component.ts  | 14 +++++++-
 .../app/shared/shared-main/shared-main.module.ts   |  3 +-
 client/src/app/shared/shared-main/video/index.ts   |  1 -
 .../shared/shared-main/video/live-video.service.ts | 34 ------------------
 .../app/shared/shared-main/video/video.model.ts    |  5 +++
 client/src/app/shared/shared-video-live/index.ts   |  4 +++
 .../live-stream-information.component.html         | 35 ++++++++++++++++++
 .../live-stream-information.component.scss         | 10 ++++++
 .../live-stream-information.component.ts           | 41 ++++++++++++++++++++++
 .../shared/shared-video-live/live-video.service.ts | 34 ++++++++++++++++++
 .../shared-video-live/shared-video-live.module.ts  | 28 +++++++++++++++
 .../shared-video-miniature.module.ts               |  4 ++-
 .../video-actions-dropdown.component.html          |  1 +
 .../video-actions-dropdown.component.ts            | 22 +++++++++++-
 26 files changed, 219 insertions(+), 142 deletions(-)
 delete mode 100644 client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html
 delete mode 100644 client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss
 delete mode 100644 client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts
 delete mode 100644 client/src/app/shared/shared-main/video/live-video.service.ts
 create mode 100644 client/src/app/shared/shared-video-live/index.ts
 create mode 100644 client/src/app/shared/shared-video-live/live-stream-information.component.html
 create mode 100644 client/src/app/shared/shared-video-live/live-stream-information.component.scss
 create mode 100644 client/src/app/shared/shared-video-live/live-stream-information.component.ts
 create mode 100644 client/src/app/shared/shared-video-live/live-video.service.ts
 create mode 100644 client/src/app/shared/shared-video-live/shared-video-live.module.ts

(limited to 'client/src/app')

diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html
deleted file mode 100644
index 2e65e1de9..000000000
--- a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<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/+my-account/my-account-videos/modals/live-stream-information.component.scss b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss
deleted file mode 100644
index a79fec179..000000000
--- a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@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/+my-account/my-account-videos/modals/live-stream-information.component.ts b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts
deleted file mode 100644
index a5885a8e7..000000000
--- a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component, ElementRef, ViewChild } from '@angular/core'
-import { LiveVideoService, Video } from '@app/shared/shared-main'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-
-@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/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 7a3019239..84f022ad2 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -6,10 +6,10 @@ import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenServi
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { immutableAssign } from '@app/helpers'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
 import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
 import { VideoSortField } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
-import { LiveStreamInformationComponent } from './modals/live-stream-information.component'
 
 @Component({
   selector: 'my-account-videos',
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 6b8baff52..6d21fff72 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -6,6 +6,7 @@ import { NgModule } from '@angular/core'
 import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedVideoLiveModule } from '@app/shared/shared-video-live'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedShareModal } from '@app/shared/shared-share-modal'
@@ -33,9 +34,8 @@ import { MyAccountVideoPlaylistCreateComponent } from './my-account-video-playli
 import { MyAccountVideoPlaylistElementsComponent } from './my-account-video-playlists/my-account-video-playlist-elements.component'
 import { MyAccountVideoPlaylistUpdateComponent } from './my-account-video-playlists/my-account-video-playlist-update.component'
 import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/my-account-video-playlists.component'
-import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
 import { VideoChangeOwnershipComponent } from './my-account-videos/modals/video-change-ownership.component'
-import { LiveStreamInformationComponent } from './my-account-videos/modals/live-stream-information.component'
+import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
 import { MyAccountComponent } from './my-account.component'
 
 @NgModule({
@@ -56,7 +56,8 @@ import { MyAccountComponent } from './my-account.component'
     SharedUserInterfaceSettingsModule,
     SharedGlobalIconModule,
     SharedAbuseListModule,
-    SharedShareModal
+    SharedShareModal,
+    SharedVideoLiveModule
   ],
 
   declarations: [
@@ -69,7 +70,6 @@ import { MyAccountComponent } from './my-account.component'
     MyAccountVideosComponent,
 
     VideoChangeOwnershipComponent,
-    LiveStreamInformationComponent,
 
     MyAccountOwnershipComponent,
     MyAccountAcceptOwnershipComponent,
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
index 593114181..7a3854065 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
+import { SharedVideoLiveModule } from '@app/shared/shared-video-live'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 import { VideoEditComponent } from './video-edit.component'
@@ -13,7 +14,8 @@ import { VideoEditComponent } from './video-edit.component'
 
     SharedMainModule,
     SharedFormModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedVideoLiveModule
   ],
 
   declarations: [
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
index 5657827a9..2ec825978 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
@@ -35,7 +35,8 @@
 <!-- Hidden because we want to load the component -->
 <form [hidden]="!isInUpdateForm" novalidate [formGroup]="form">
   <my-video-edit
-    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
+    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
+    [schedulePublicationPossible]="false" [waitTranscodingEnabled]="false"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels" [liveVideo]="liveVideo"
     type="go-live"
   ></my-video-edit>
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 870a70d3d..d29b2da97 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -5,7 +5,8 @@ import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { LiveVideoService, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { LiveVideo, LiveVideoCreate, LiveVideoUpdate, ServerErrorCode, VideoPrivacy } from '@shared/models'
 import { VideoSend } from './video-send'
@@ -64,8 +65,6 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon
       channelId: this.firstStepChannelId
     }
 
-    this.firstStepDone.emit(name)
-
     // Go live in private mode, but correctly fill the update form with the first user choice
     const toPatch = Object.assign({}, video, { privacy: this.firstStepPrivacyId })
     this.form.patchValue(toPatch)
@@ -76,6 +75,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon
         this.videoUUID = res.video.uuid
         this.isInUpdateForm = true
 
+        this.firstStepDone.emit(name)
+
         this.fetchVideoLive()
       },
 
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 7126ad05b..e37163ca9 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -1,13 +1,14 @@
+import { of } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
-import { LiveVideoService, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
 import { hydrateFormFromVideo } from './shared/video-edit-utils'
-import { of } from 'rxjs'
 
 @Component({
   selector: 'my-videos-update',
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 5388a64b0..276548b79 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -2,7 +2,8 @@ import { forkJoin, of } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
-import { VideoCaptionService, VideoChannelService, VideoDetails, LiveVideoService, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoChannelService, VideoDetails, VideoService } from '@app/shared/shared-main'
+import { LiveVideoService } from '@app/shared/shared-video-live'
 
 @Injectable()
 export class VideoUpdateResolver implements Resolve<any> {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 74c82fbfd..daee4be2a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -136,7 +136,7 @@
                   <ng-container *ngIf="isUserLoggedIn()">
                     <my-video-actions-dropdown
                       placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
-                      (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
+                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
                     ></my-video-actions-dropdown>
                   </ng-container>
                 </div>
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 712022141..e198a8bb0 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -27,14 +27,14 @@ $video-info-margin-left: 44px;
     flex-direction: column;
     justify-content: center;
 
+    $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+
     #videojs-wrapper {
       width: 100%;
-      height: auto;
+      height: $height;
     }
 
     ::ng-deep .video-js {
-      $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
-
       height: $height;
       width: 100%;
       max-width: initial;
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 9a3439731..48623cae0 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -21,7 +21,7 @@ import { isXPercentInViewport, scrollToTop } from '@app/helpers'
 import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { VideoShareComponent } from '@app/shared/shared-share-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
-import { VideoDownloadComponent } from '@app/shared/shared-video-miniature'
+import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { MetaService } from '@ngx-meta/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@@ -82,6 +82,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   tooltipSupport = ''
   tooltipSaveToPlaylist = ''
 
+  videoActionsOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: true,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true,
+    duplicate: true,
+    mute: true,
+    liveInfo: true
+  }
+
   private nextVideoUuid = ''
   private nextVideoTitle = ''
   private currentTime: number
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/live-video.service.ts b/client/src/app/shared/shared-main/video/live-video.service.ts
deleted file mode 100644
index 093d65e83..000000000
--- a/client/src/app/shared/shared-main/video/live-video.service.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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-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-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 { }
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 &&
@@ -260,6 +274,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
           isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
           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 ],
-- 
cgit v1.2.3