3 files changed, 157 insertions, 0 deletions

diff --git a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
new file mode 100644
index 000000000..611146c1a
--- /dev/null
+++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
@@ -0,0 +1,64 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<div class="margin-content">
+  <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+
+    <div class="row">
+      <div class="col-12 col-lg-4 col-xl-3">
+        <div class="video-channel-sync-title" i18n>NEW SYNCHRONIZATION</div>
+      </div>
+
+      <div class="col-12 col-lg-8 col-xl-9">
+        <div class="form-group">
+          <label i18n for="externalChannelUrl">Remote channel URL</label>
+
+          <div class="input-group">
+            <input
+              type="text"
+              id="externalChannelUrl"
+              i18n-placeholder
+              placeholder="Example: https://youtube.com/channel/UC_fancy_channel"
+              formControlName="externalChannelUrl"
+              [ngClass]="{ 'input-error': formErrors['externalChannelUrl'] }"
+              class="form-control"
+            >
+          </div>
+
+          <div *ngIf="formErrors['externalChannelUrl']" class="form-error">
+            {{ formErrors['externalChannelUrl'] }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label i18n for="videoChannel">Video Channel</label>
+          <my-select-channel required [items]="userVideoChannels" formControlName="videoChannel"></my-select-channel>
+
+          <div *ngIf="formErrors['videoChannel']" class="form-error">
+            {{ formErrors['videoChannel'] }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="existingVideoStrategy" i18n>Options for existing videos on remote channel:</label>
+
+          <div class="peertube-radio-container">
+            <input type="radio" name="existingVideoStrategy" id="import" value="import" formControlName="existingVideoStrategy" required />
+            <label for="import" i18n>Import all and watch for new publications</label>
+          </div>
+
+          <div class="peertube-radio-container">
+            <input type="radio" name="existingVideoStrategy" id="doNothing" value="nothing" formControlName="existingVideoStrategy" required />
+            <label for="doNothing" i18n>Only watch for new publications</label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row"> <!-- submit placement block -->
+      <div class="col-md-7 col-xl-5"></div>
+      <div class="col-md-5 col-xl-5 d-inline-flex">
+        <input type="submit" class="peertube-button orange-button ms-auto" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      </div>
+    </div>
+  </form>
+</div>
diff --git a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.scss b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.scss
new file mode 100644
index 000000000..d0d8c2a68
--- /dev/null
+++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.scss
@@ -0,0 +1,17 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+$form-base-input-width: 480px;
+
+input[type=text] {
+  @include peertube-input-text($form-base-input-width);
+}
+
+.video-channel-sync-title {
+  @include settings-big-title;
+}
+
+my-select-channel {
+  display: block;
+  max-width: $form-base-input-width;
+}
diff --git a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts
new file mode 100644
index 000000000..836582609
--- /dev/null
+++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts
@@ -0,0 +1,76 @@
+import { mergeMap } from 'rxjs'
+import { SelectChannelItem } from 'src/types'
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { AuthService, Notifier } from '@app/core'
+import { listUserChannelsForSelect } from '@app/helpers'
+import { VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { VideoChannelService, VideoChannelSyncService } from '@app/shared/shared-main'
+import { VideoChannelSyncCreate } from '@shared/models/videos'
+
+@Component({
+  selector: 'my-video-channel-sync-edit',
+  templateUrl: './video-channel-sync-edit.component.html',
+  styleUrls: [ './video-channel-sync-edit.component.scss' ]
+})
+export class VideoChannelSyncEditComponent extends FormReactive implements OnInit {
+  error: string
+  userVideoChannels: SelectChannelItem[] = []
+  existingVideosStrategy: string
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private router: Router,
+    private notifier: Notifier,
+    private videoChannelSyncService: VideoChannelSyncService,
+    private videoChannelService: VideoChannelService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      externalChannelUrl: VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR,
+      videoChannel: null,
+      existingVideoStrategy: null
+    })
+
+    listUserChannelsForSelect(this.authService)
+      .subscribe(channels => this.userVideoChannels = channels)
+  }
+
+  getFormButtonTitle () {
+    return $localize`Create`
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoChannelSyncCreate: VideoChannelSyncCreate = {
+      externalChannelUrl: body.externalChannelUrl,
+      videoChannelId: body.videoChannel
+    }
+
+    const importExistingVideos = body['existingVideoStrategy'] === 'import'
+
+    this.videoChannelSyncService.createSync(videoChannelSyncCreate)
+      .pipe(mergeMap(({ videoChannelSync }) => {
+        return importExistingVideos
+          ? this.videoChannelService.importVideos(videoChannelSync.channel.name, videoChannelSync.externalChannelUrl)
+          : Promise.resolve(null)
+      }))
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Synchronization created successfully.`)
+          this.router.navigate([ '/my-library', 'video-channel-syncs' ])
+        },
+
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+}