Refactor form reactive

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-edit / video-add-components / video-go-live.component.ts

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 1b9447e03343641effbfc2dc60aaafe1382d84e0..4f2276e8ca0c43101c99436ede5917060f544df4 100644 (file)
--- 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
@@ -1,14 +1,14 @@
-
 import { forkJoin } from 'rxjs'
 import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
-import { FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactiveService } from '@app/shared/shared-forms'
 import { Video, 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, PeerTubeProblemDocument, ServerErrorCode } from '@shared/models'
+import { logger } from '@root-helpers/logger'
+import { LiveVideo, LiveVideoCreate, LiveVideoLatencyMode, LiveVideoUpdate, PeerTubeProblemDocument, ServerErrorCode } from '@shared/models'
 import { VideoSend } from './video-send'
 
 @Component({
@@ -16,6 +16,7 @@ import { VideoSend } from './video-send'
   templateUrl: './video-go-live.component.html',
   styleUrls: [
     '../shared/video-edit.component.scss',
+    './video-go-live.component.scss',
     './video-send.scss'
   ]
 })
@@ -23,15 +24,22 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
 
+  firstStepPermanentLive: boolean
+
   isInUpdateForm = false
+  isUpdatingVideo = false
+  isOrHasGoingLive = false
 
   liveVideo: LiveVideo
+
   videoId: number
   videoUUID: string
+  videoShortUUID: string
+
   error: string
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     protected loadingBar: LoadingBarService,
     protected notifier: Notifier,
     protected authService: AuthService,
@@ -58,6 +66,9 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
   }
 
   goLive () {
+    if (this.isOrHasGoingLive) return
+    this.isOrHasGoingLive = true
+
     const name = 'Live'
 
     const video: LiveVideoCreate = {
@@ -65,13 +76,14 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       privacy: this.highestPrivacy,
       nsfw: this.serverConfig.instance.isNSFW,
       waitTranscoding: true,
-      commentsEnabled: true,
-      downloadEnabled: true,
+      permanentLive: this.firstStepPermanentLive,
+      latencyMode: LiveVideoLatencyMode.DEFAULT,
+      saveReplay: this.isReplayAllowed(),
       channelId: this.firstStepChannelId
     }
 
     // Go live in private mode, but correctly fill the update form with the first user choice
-    const toPatch = Object.assign({}, video, { privacy: this.firstStepPrivacyId })
+    const toPatch = { ...video, privacy: this.firstStepPrivacyId }
     this.form.patchValue(toPatch)
 
     this.liveVideoService.goLive(video)
@@ -79,6 +91,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
         next: res => {
           this.videoId = res.video.id
           this.videoUUID = res.video.uuid
+          this.videoShortUUID = res.video.shortUUID
           this.isInUpdateForm = true
 
           this.firstStepDone.emit(name)
@@ -104,18 +117,20 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       })
   }
 
-  updateSecondStep () {
-    if (this.checkForm() === false) {
-      return
-    }
+  async updateSecondStep () {
+    if (!await this.isFormValid()) return
+
+    this.isUpdatingVideo = true
 
     const video = new VideoEdit()
     video.patch(this.form.value)
     video.id = this.videoId
     video.uuid = this.videoUUID
+    video.shortUUID = this.videoShortUUID
 
     const liveVideoUpdate: LiveVideoUpdate = {
       saveReplay: this.form.value.saveReplay,
+      latencyMode: this.form.value.latencyMode,
       permanentLive: this.form.value.permanentLive
     }
 
@@ -126,6 +141,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       this.liveVideoService.updateLive(this.videoId, liveVideoUpdate)
     ]).subscribe({
       next: () => {
+        this.isUpdatingVideo = false
+
         this.notifier.success($localize`Live published.`)
 
         this.router.navigateByUrl(Video.buildWatchUrl(video))
@@ -134,7 +151,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       error: err => {
         this.error = err.message
         scrollToTop()
-        console.error(err)
+        logger.error(err)
       }
     })
   }
@@ -147,6 +164,26 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
     return this.form.value['saveReplay'] === true
   }
 
+  getNormalLiveDescription () {
+    if (this.isReplayAllowed()) {
+      return $localize`Stream only once, replay will replace your live`
+    }
+
+    return $localize`Stream only once`
+  }
+
+  getPermanentLiveDescription () {
+    if (this.isReplayAllowed()) {
+      return $localize`Stream multiple times, replays will be separate videos`
+    }
+
+    return $localize`Stream multiple times using the same URL`
+  }
+
+  private isReplayAllowed () {
+    return this.serverConfig.live.allowReplay
+  }
+
   private fetchVideoLive () {
     this.liveVideoService.getVideoLive(this.videoId)
       .subscribe({