Live streaming implementation first step

15 files changed, 318 insertions, 100 deletions

diff --git a/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts b/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts
new file mode 100644
index 000000000..3a7dbed36
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts
@@ -0,0 +1,35 @@
+import { FormGroup } from '@angular/forms'
+import { VideoEdit } from '@app/shared/shared-main'
+
+function hydrateFormFromVideo (formGroup: FormGroup, video: VideoEdit, thumbnailFiles: boolean) {
+  formGroup.patchValue(video.toFormPatch())
+
+  if (thumbnailFiles === false) return
+
+  const objects = [
+    {
+      url: 'thumbnailUrl',
+      name: 'thumbnailfile'
+    },
+    {
+      url: 'previewUrl',
+      name: 'previewfile'
+    }
+  ]
+
+  for (const obj of objects) {
+    if (!video[obj.url]) continue
+
+    fetch(video[obj.url])
+      .then(response => response.blob())
+      .then(data => {
+        formGroup.patchValue({
+          [ obj.name ]: data
+        })
+      })
+  }
+}
+
+export {
+  hydrateFormFromVideo
+}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index 842997b20..c444dd8d3 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -195,6 +195,29 @@
       </ng-template>
     </ng-container>
 
+    <ng-container ngbNavItem *ngIf="videoLive">
+      <a ngbNavLink i18n>Live settings</a>
+
+      <ng-template ngbNavContent>
+        <div class="row live-settings">
+          <div class="col-md-12">
+
+            <div class="form-group">
+              <label for="videoLiveRTMPUrl" i18n>Live RTMP Url</label>
+              <my-input-readonly-copy id="videoLiveRTMPUrl" [value]="videoLive.rtmpUrl"></my-input-readonly-copy>
+            </div>
+
+            <div class="form-group">
+              <label for="videoLiveStreamKey" i18n>Live stream key</label>
+              <my-input-readonly-copy id="videoLiveStreamKey" [value]="videoLive.streamKey"></my-input-readonly-copy>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+
+    </ng-container>
+
+
     <ng-container ngbNavItem>
       <a ngbNavLink i18n>Advanced settings</a>
 
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index f04111e69..bee65184b 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -20,10 +20,11 @@ import {
 import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
+import { ServerConfig, VideoConstant, VideoLive, VideoPrivacy } from '@shared/models'
 import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
+import { VideoEditType } from './video-edit.type'
 
 type VideoLanguages = VideoConstant<string> & { group?: string }
 
@@ -40,7 +41,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() schedulePublicationPossible = true
   @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
   @Input() waitTranscodingEnabled = true
-  @Input() type: 'import-url' | 'import-torrent' | 'upload' | 'update'
+  @Input() type: VideoEditType
+  @Input() videoLive: VideoLive
 
   @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent
 
@@ -124,7 +126,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       previewfile: null,
       support: VIDEO_SUPPORT_VALIDATOR,
       schedulePublicationAt: VIDEO_SCHEDULE_PUBLICATION_AT_VALIDATOR,
-      originallyPublishedAt: VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR
+      originallyPublishedAt: VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR,
+      liveStreamKey: null
     }
 
     this.formValidatorService.updateForm(
@@ -320,7 +323,12 @@ export class VideoEditComponent implements OnInit, OnDestroy {
             const currentSupport = this.form.value[ 'support' ]
 
             // First time we set the channel?
-            if (isNaN(oldChannelId) && !currentSupport) return this.updateSupportField(newChannel.support)
+            if (isNaN(oldChannelId)) {
+              // Fill support if it's empty
+              if (!currentSupport) this.updateSupportField(newChannel.support)
+
+              return
+            }
 
             const oldChannel = this.userVideoChannels.find(c => c.id === oldChannelId)
             if (!newChannel || !oldChannel) {
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.type.ts b/client/src/app/+videos/+video-edit/shared/video-edit.type.ts
new file mode 100644
index 000000000..fdbe9505c
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.type.ts
@@ -0,0 +1 @@
+export type VideoEditType = 'update' | 'upload' | 'import-url' | 'import-torrent' | 'go-live'
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
new file mode 100644
index 000000000..6997f5388
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
@@ -0,0 +1,47 @@
+<div *ngIf="!isInUpdateForm" class="upload-video-container">
+  <div class="first-step-block">
+    <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
+
+    <div class="form-group">
+      <label i18n for="first-step-channel">Channel</label>
+      <my-select-channel
+        labelForId="first-step-channel" [items]="userVideoChannels" [(ngModel)]="firstStepChannelId"
+      ></my-select-channel>
+    </div>
+
+    <div class="form-group">
+      <label i18n for="first-step-privacy">Privacy</label>
+      <my-select-options
+        labelForId="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId"
+      ></my-select-options>
+    </div>
+
+    <input
+      type="button" i18n-value value="Go Live" (click)="goLive()"
+    />
+  </div>
+</div>
+
+<div *ngIf="error" class="alert alert-danger">
+  <div i18n>Sorry, but something went wrong</div>
+  {{ error }}
+</div>
+
+<!-- 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"
+    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels" [videoLive]="videoLive"
+    type="go-live"
+  ></my-video-edit>
+
+  <div class="submit-container">
+    <div class="submit-button"
+       (click)="updateSecondStep()"
+       [ngClass]="{ disabled: !form.valid }"
+    >
+      <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
+      <input type="button" i18n-value value="Update" />
+    </div>
+  </div>
+</form>
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
new file mode 100644
index 000000000..64fd4c4d4
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -0,0 +1,129 @@
+
+import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+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 { VideoCaptionService, VideoEdit, VideoService, VideoLiveService } from '@app/shared/shared-main'
+import { LoadingBarService } from '@ngx-loading-bar/core'
+import { VideoCreate, VideoLive, VideoPrivacy } from '@shared/models'
+import { VideoSend } from './video-send'
+
+@Component({
+  selector: 'my-video-go-live',
+  templateUrl: './video-go-live.component.html',
+  styleUrls: [
+    '../shared/video-edit.component.scss',
+    './video-send.scss'
+  ]
+})
+export class VideoGoLiveComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+  @Output() firstStepDone = new EventEmitter<string>()
+  @Output() firstStepError = new EventEmitter<void>()
+
+  isInUpdateForm = false
+
+  videoLive: VideoLive
+  videoId: number
+  videoUUID: string
+  error: string
+
+  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    protected loadingBar: LoadingBarService,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected serverService: ServerService,
+    protected videoService: VideoService,
+    protected videoCaptionService: VideoCaptionService,
+    private videoLiveService: VideoLiveService,
+    private router: Router
+    ) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  canDeactivate () {
+    return { canDeactivate: true }
+  }
+
+  goLive () {
+    const video: VideoCreate = {
+      name: 'Live',
+      privacy: VideoPrivacy.PRIVATE,
+      nsfw: this.serverConfig.instance.isNSFW,
+      waitTranscoding: true,
+      commentsEnabled: true,
+      downloadEnabled: true,
+      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)
+
+    this.videoLiveService.goLive(video).subscribe(
+      res => {
+        this.videoId = res.video.id
+        this.videoUUID = res.video.uuid
+        this.isInUpdateForm = true
+
+        this.fetchVideoLive()
+      },
+
+      err => {
+        this.firstStepError.emit()
+        this.notifier.error(err.message)
+      }
+    )
+  }
+
+  updateSecondStep () {
+    if (this.checkForm() === false) {
+      return
+    }
+
+    const video = new VideoEdit()
+    video.patch(this.form.value)
+    video.id = this.videoId
+    video.uuid = this.videoUUID
+
+    // Update the video
+    this.updateVideoAndCaptions(video)
+        .subscribe(
+          () => {
+            this.notifier.success($localize`Live published.`)
+
+            this.router.navigate([ '/videos/watch', video.uuid ])
+          },
+
+          err => {
+            this.error = err.message
+            scrollToTop()
+            console.error(err)
+          }
+        )
+
+  }
+
+  private fetchVideoLive () {
+    this.videoLiveService.getVideoLive(this.videoId)
+      .subscribe(
+        videoLive => {
+          this.videoLive = videoLive
+        },
+
+        err => {
+          this.firstStepError.emit()
+          this.notifier.error(err.message)
+        }
+      )
+  }
+}
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index e9ad8af7a..64e887987 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -6,6 +6,7 @@ import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { VideoPrivacy, VideoUpdate } from '@shared/models'
+import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
 
 @Component({
@@ -99,7 +100,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
           previewUrl: null
         }))
 
-        this.hydrateFormFromVideo()
+        hydrateFormFromVideo(this.form, this.video, false)
       },
 
       err => {
@@ -136,10 +137,5 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
             console.error(err)
           }
         )
-
-  }
-
-  private hydrateFormFromVideo () {
-    this.form.patchValue(this.video.toFormPatch())
   }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index 8bad81097..47f59a5d0 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -7,6 +7,7 @@ import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { VideoPrivacy, VideoUpdate } from '@shared/models'
+import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
 
 @Component({
@@ -109,7 +110,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
 
             this.videoCaptions = videoCaptions
 
-            this.hydrateFormFromVideo()
+            hydrateFormFromVideo(this.form, this.video, true)
           },
 
           err => {
@@ -146,31 +147,5 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
             console.error(err)
           }
         )
-
-  }
-
-  private hydrateFormFromVideo () {
-    this.form.patchValue(this.video.toFormPatch())
-
-    const objects = [
-      {
-        url: 'thumbnailUrl',
-        name: 'thumbnailfile'
-      },
-      {
-        url: 'previewUrl',
-        name: 'previewfile'
-      }
-    ]
-
-    for (const obj of objects) {
-      fetch(this.video[obj.url])
-        .then(response => response.blob())
-        .then(data => {
-          this.form.patchValue({
-            [ obj.name ]: data
-          })
-        })
-    }
   }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index 32a17052a..258f5c7a0 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -157,7 +157,6 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       this.waitTranscodingEnabled = false
     }
 
-    const privacy = this.firstStepPrivacyId.toString()
     const nsfw = this.serverConfig.instance.isNSFW
     const waitTranscoding = true
     const commentsEnabled = true
diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html
index 14d41f95b..bf2cc9c83 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -50,7 +50,17 @@
         <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
       </ng-template>
     </ng-container>
+
+    <ng-container ngbNavItem *ngIf="isVideoLiveEnabled()">
+      <a ngbNavLink>
+        <span i18n>Go live</span>
+      </a>
+
+      <ng-template ngbNavContent>
+        <my-video-go-live #videoGoLive (firstStepDone)="onFirstStepDone('go-live', $event)" (firstStepError)="onError()"></my-video-go-live>
+      </ng-template>
+    </ng-container>
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/+videos/+video-edit/video-add.component.ts b/client/src/app/+videos/+video-edit/video-add.component.ts
index 94e85efc1..441d5a3db 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add.component.ts
@@ -1,6 +1,8 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
 import { AuthService, AuthUser, CanComponentDeactivate, ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { VideoEditType } from './shared/video-edit.type'
+import { VideoGoLiveComponent } from './video-add-components/video-go-live.component'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
 import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
 import { VideoUploadComponent } from './video-add-components/video-upload.component'
@@ -14,10 +16,11 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   @ViewChild('videoUpload') videoUpload: VideoUploadComponent
   @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
   @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoGoLive') videoGoLive: VideoGoLiveComponent
 
   user: AuthUser = null
 
-  secondStepType: 'upload' | 'import-url' | 'import-torrent'
+  secondStepType: VideoEditType
   videoName: string
   serverConfig: ServerConfig
 
@@ -41,7 +44,7 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
     this.user = this.auth.getUser()
   }
 
-  onFirstStepDone (type: 'upload' | 'import-url' | 'import-torrent', videoName: string) {
+  onFirstStepDone (type: VideoEditType, videoName: string) {
     this.secondStepType = type
     this.videoName = videoName
   }
@@ -62,9 +65,9 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   }
 
   canDeactivate (): { canDeactivate: boolean, text?: string} {
-    if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate()
     if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate()
     if (this.secondStepType === 'import-torrent') return this.videoImportTorrent.canDeactivate()
+    if (this.secondStepType === 'go-live') return this.videoGoLive.canDeactivate()
 
     return { canDeactivate: true }
   }
@@ -77,6 +80,10 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
     return this.serverConfig.import.videos.torrent.enabled
   }
 
+  isVideoLiveEnabled () {
+    return this.serverConfig.live.enabled
+  }
+
   isInSecondStep () {
     return !!this.secondStepType
   }
diff --git a/client/src/app/+videos/+video-edit/video-add.module.ts b/client/src/app/+videos/+video-edit/video-add.module.ts
index 477c1cf5e..da651119b 100644
--- a/client/src/app/+videos/+video-edit/video-add.module.ts
+++ b/client/src/app/+videos/+video-edit/video-add.module.ts
@@ -4,6 +4,7 @@ import { VideoEditModule } from './shared/video-edit.module'
 import { DragDropDirective } from './video-add-components/drag-drop.directive'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
 import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
+import { VideoGoLiveComponent } from './video-add-components/video-go-live.component'
 import { VideoUploadComponent } from './video-add-components/video-upload.component'
 import { VideoAddRoutingModule } from './video-add-routing.module'
 import { VideoAddComponent } from './video-add.component'
@@ -20,7 +21,8 @@ import { VideoAddComponent } from './video-add.component'
     VideoUploadComponent,
     VideoImportUrlComponent,
     VideoImportTorrentComponent,
-    DragDropDirective
+    DragDropDirective,
+    VideoGoLiveComponent
   ],
 
   exports: [ ],
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index b37596399..5f50ddc74 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -11,6 +11,7 @@
       [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
       [videoCaptions]="videoCaptions" [waitTranscodingEnabled]="waitTranscodingEnabled"
       type="update" (pluginFieldsAdded)="hydratePluginFieldsFromVideo()"
+      [videoLive]="videoLive"
     ></my-video-edit>
 
     <div class="submit-container">
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 20438a2d3..c0f46acd2 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -5,7 +5,8 @@ import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { VideoPrivacy } from '@shared/models'
+import { VideoPrivacy, VideoLive } from '@shared/models'
+import { hydrateFormFromVideo } from './shared/video-edit-utils'
 
 @Component({
   selector: 'my-videos-update',
@@ -14,11 +15,12 @@ import { VideoPrivacy } from '@shared/models'
 })
 export class VideoUpdateComponent extends FormReactive implements OnInit {
   video: VideoEdit
+  userVideoChannels: SelectChannelItem[] = []
+  videoCaptions: VideoCaptionEdit[] = []
+  videoLive: VideoLive
 
   isUpdatingVideo = false
-  userVideoChannels: SelectChannelItem[] = []
   schedulePublicationPossible = false
-  videoCaptions: VideoCaptionEdit[] = []
   waitTranscodingEnabled = true
 
   private updateDone = false
@@ -40,10 +42,11 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
 
     this.route.data
         .pipe(map(data => data.videoData))
-        .subscribe(({ video, videoChannels, videoCaptions }) => {
+        .subscribe(({ video, videoChannels, videoCaptions, videoLive }) => {
           this.video = new VideoEdit(video)
           this.userVideoChannels = videoChannels
           this.videoCaptions = videoCaptions
+          this.videoLive = videoLive
 
           this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
 
@@ -53,7 +56,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
           }
 
           // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
-          setTimeout(() => this.hydrateFormFromVideo())
+          setTimeout(() => hydrateFormFromVideo(this.form, this.video, true))
         },
 
         err => {
@@ -133,29 +136,4 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
       pluginData: this.video.pluginData
     })
   }
-
-  private hydrateFormFromVideo () {
-    this.form.patchValue(this.video.toFormPatch())
-
-    const objects = [
-      {
-        url: 'thumbnailUrl',
-        name: 'thumbnailfile'
-      },
-      {
-        url: 'previewUrl',
-        name: 'previewfile'
-      }
-    ]
-
-    for (const obj of objects) {
-      fetch(this.video[obj.url])
-        .then(response => response.blob())
-        .then(data => {
-          this.form.patchValue({
-            [ obj.name ]: data
-          })
-        })
-    }
-  }
 }
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 a391913d8..3a82324c3 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -1,13 +1,14 @@
-import { forkJoin } from 'rxjs'
+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, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoChannelService, VideoDetails, VideoLiveService, VideoService } from '@app/shared/shared-main'
 
 @Injectable()
 export class VideoUpdateResolver implements Resolve<any> {
   constructor (
     private videoService: VideoService,
+    private videoLiveService: VideoLiveService,
     private videoChannelService: VideoChannelService,
     private videoCaptionService: VideoCaptionService
   ) {
@@ -18,32 +19,38 @@ export class VideoUpdateResolver implements Resolve<any> {
 
     return this.videoService.getVideo({ videoId: uuid })
                .pipe(
-                 switchMap(video => {
-                   return forkJoin([
-                     this.videoService
-                         .loadCompleteDescription(video.descriptionPath)
-                         .pipe(map(description => Object.assign(video, { description }))),
+                 switchMap(video => forkJoin(this.buildVideoObservables(video))),
+                 map(([ video, videoChannels, videoCaptions, videoLive ]) => ({ video, videoChannels, videoCaptions, videoLive }))
+               )
+  }
 
-                     this.videoChannelService
-                         .listAccountVideoChannels(video.account)
-                         .pipe(
-                           map(result => result.data),
-                           map(videoChannels => videoChannels.map(c => ({
-                             id: c.id,
-                             label: c.displayName,
-                             support: c.support,
-                             avatarPath: c.avatar?.path
-                           })))
-                         ),
+  private buildVideoObservables (video: VideoDetails) {
+    return [
+      this.videoService
+        .loadCompleteDescription(video.descriptionPath)
+        .pipe(map(description => Object.assign(video, { description }))),
 
-                     this.videoCaptionService
-                         .listCaptions(video.id)
-                         .pipe(
-                           map(result => result.data)
-                         )
-                   ])
-                 }),
-                 map(([ video, videoChannels, videoCaptions ]) => ({ video, videoChannels, videoCaptions }))
-               )
+      this.videoChannelService
+        .listAccountVideoChannels(video.account)
+        .pipe(
+          map(result => result.data),
+          map(videoChannels => videoChannels.map(c => ({
+            id: c.id,
+            label: c.displayName,
+            support: c.support,
+            avatarPath: c.avatar?.path
+          })))
+        ),
+
+      this.videoCaptionService
+        .listCaptions(video.id)
+        .pipe(
+          map(result => result.data)
+        ),
+
+      video.isLive
+          ? this.videoLiveService.getVideoLive(video.id)
+          : of(undefined)
+    ]
   }
 }