Force live type specification in first step

4 files changed, 56 insertions, 4 deletions

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 fddb08e0b..fce5a1ee5 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
@@ -16,7 +16,24 @@
       ></my-select-options>
     </div>
 
+    <div class="form-group live-type">
+      <div class="peertube-radio-container">
+        <input type="radio" id="permanentLiveFalse" [(ngModel)]="firstStepPermanentLive" [value]="false">
+        <label i18n for="permanentLiveFalse" class="radio">Normal live</label>
+
+        <span class="form-group-description">{{ getNormalLiveDescription() }}</span>
+      </div>
+
+      <div class="peertube-radio-container">
+        <input type="radio" id="permanentLiveTrue" [(ngModel)]="firstStepPermanentLive" [value]="true">
+        <label i18n for="permanentLiveTrue" class="radio">Permanent/recurring live</label>
+
+        <span class="form-group-description" i18n>{{ getPermanentLiveDescription() }}</span>
+      </div>
+    </div>
+
     <input
+      [disabled]="firstStepPermanentLive !== true && firstStepPermanentLive !== false"
       type="button" i18n-value value="Go Live" (click)="goLive()"
     />
   </div>
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.scss
new file mode 100644
index 000000000..09b71018f
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.scss
@@ -0,0 +1,12 @@
+.live-type {
+  margin-top: 15px;
+}
+
+.peertube-radio-container {
+  width: 250px;
+
+  .form-group-description {
+    white-space: nowrap;
+  }
+}
+
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 ee7011b4c..01eabb0d7 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
@@ -1,4 +1,3 @@
-
 import { forkJoin } from 'rxjs'
 import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
@@ -16,6 +15,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,6 +23,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
 
+  firstStepPermanentLive: boolean
+
   isInUpdateForm = false
 
   liveVideo: LiveVideo
@@ -70,8 +72,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       waitTranscoding: true,
       commentsEnabled: true,
       downloadEnabled: true,
-      permanentLive: false,
-      saveReplay: false,
+      permanentLive: this.firstStepPermanentLive,
+      saveReplay: this.firstStepPermanentLive === false && this.isReplayAllowed(),
       channelId: this.firstStepChannelId
     }
 
@@ -154,6 +156,26 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
     return this.form.value['saveReplay'] === true
   }
 
+  getNormalLiveDescription () {
+    if (this.isReplayAllowed()) {
+      return $localize`Stream only once and save a replay of your live`
+    }
+
+    return $localize`Stream only once`
+  }
+
+  getPermanentLiveDescription () {
+    if (this.isReplayAllowed()) {
+      return $localize`Stream multiple times, replays can't be saved`
+    }
+
+    return $localize`Stream multiple times using the same URL`
+  }
+
+  private isReplayAllowed () {
+    return this.serverConfig.live.allowReplay
+  }
+
   private fetchVideoLive () {
     this.liveVideoService.getVideoLive(this.videoId)
       .subscribe({
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index e601c3dff..7284ad00f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$width-size: 190px;
+$width-size: 250px;
 
 .alert.alert-danger {
   text-align: center;
@@ -29,6 +29,7 @@ $width-size: 190px;
   my-select-options ::ng-deep ng-select,
   my-select-channel ::ng-deep ng-select {
     width: $width-size;
+
     @media screen and (max-width: $width-size) {
       width: 100%;
     }