10 files changed, 435 insertions, 6 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index e942e002b..a48731e7c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,7 +1,16 @@
 <h1>
-  <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My channels</ng-container>
-  <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
+  <span>
+    <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My channels</ng-container>
+    <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
+  </span>
+
+  <div>
+    <a routerLink="/my-library/video-channel-syncs" class="button-link">
+      <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
+      <ng-container i18n>My synchronizations</ng-container>
+    </a>
+  </div>
 </h1>
 
 <my-channels-setup-message [hideLink]="true"></my-channels-setup-message>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index ab80f3d01..6c5be9240 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -1,9 +1,20 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-h1 my-global-icon {
-  position: relative;
-  top: -2px;
+h1 {
+  display: flex;
+  justify-content: space-between;
+
+  my-global-icon {
+    position: relative;
+    top: -2px;
+  }
+
+  .button-link {
+    @include peertube-button-link;
+    @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
+  }
 }
 
 .create-button {
diff --git a/client/src/app/+my-library/my-library-routing.module.ts b/client/src/app/+my-library/my-library-routing.module.ts
index 73858fb82..de3ef4d96 100644
--- a/client/src/app/+my-library/my-library-routing.module.ts
+++ b/client/src/app/+my-library/my-library-routing.module.ts
@@ -6,6 +6,8 @@ import { MySubscriptionsComponent } from './my-follows/my-subscriptions.componen
 import { MyHistoryComponent } from './my-history/my-history.component'
 import { MyLibraryComponent } from './my-library.component'
 import { MyOwnershipComponent } from './my-ownership/my-ownership.component'
+import { MyVideoChannelSyncsComponent } from './my-video-channel-syncs/my-video-channel-syncs.component'
+import { VideoChannelSyncEditComponent } from './my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component'
 import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component'
 import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component'
 import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component'
@@ -131,6 +133,26 @@ const myLibraryRoutes: Routes = [
             key: 'my-videos-history-list'
           }
         }
+      },
+
+      {
+        path: 'video-channel-syncs',
+        component: MyVideoChannelSyncsComponent,
+        data: {
+          meta: {
+            title: $localize`My synchronizations`
+          }
+        }
+      },
+
+      {
+        path: 'video-channel-syncs/create',
+        component: VideoChannelSyncEditComponent,
+        data: {
+          meta: {
+            title: $localize`Create new synchronization`
+          }
+        }
       }
     ]
   }
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts
index bfafcb3e4..4acb3b75e 100644
--- a/client/src/app/+my-library/my-library.module.ts
+++ b/client/src/app/+my-library/my-library.module.ts
@@ -29,6 +29,8 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl
 import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
 import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
 import { MyVideosComponent } from './my-videos/my-videos.component'
+import { MyVideoChannelSyncsComponent } from './my-video-channel-syncs/my-video-channel-syncs.component'
+import { VideoChannelSyncEditComponent } from './my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component'
 
 @NgModule({
   imports: [
@@ -63,6 +65,8 @@ import { MyVideosComponent } from './my-videos/my-videos.component'
     MyOwnershipComponent,
     MyAcceptOwnershipComponent,
     MyVideoImportsComponent,
+    MyVideoChannelSyncsComponent,
+    VideoChannelSyncEditComponent,
     MySubscriptionsComponent,
     MyFollowersComponent,
     MyHistoryComponent,
diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
new file mode 100644
index 000000000..5141607b1
--- /dev/null
+++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
@@ -0,0 +1,83 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<h1>
+  <my-global-icon iconName="refresh" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My synchronizations</ng-container>
+</h1>
+
+<div *ngIf="!syncEnabled()">
+  <p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p>
+</div>
+
+<p-table
+  *ngIf="syncEnabled()" [value]="channelSyncs" [lazy]="true"
+  [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} synchronizations"
+  [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="left-buttons">
+        <a class="add-sync" routerLink="{{ getSyncCreateLink() }}">
+          <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
+          <ng-container i18n>Add synchronization</ng-container>
+        </a>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 10%"><my-global-icon iconName="columns"></my-global-icon></th>
+      <th style="width: 25%" i18n pSortableColumn="externalChannelUrl">External Channel <p-sortIcon field="externalChannelUrl"></p-sortIcon></th>
+      <th style="width: 25%" i18n pSortableColumn="videoChannel">Channel <p-sortIcon field="videoChannel"></p-sortIcon></th>
+      <th style="width: 10%" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th style="width: 10%" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 10%" i18n pSortableColumn="lastSyncAt">Last synchronization at <p-sortIcon field="lastSyncAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-videoChannelSync>
+    <tr>
+      <td class="action-cell">
+        <my-action-dropdown
+           container="body"
+          [actions]="videoChannelSyncActions" [entry]="videoChannelSync"
+        ></my-action-dropdown>
+      </td>
+
+      <td>
+        <a [href]="videoChannelSync.externalChannelUrl" target="_blank" rel="noopener noreferrer">{{ videoChannelSync.externalChannelUrl }}</a>
+      </td>
+
+      <td>
+        <div class="actor">
+          <my-actor-avatar
+            class="channel"
+            [actor]="videoChannelSync.channel" actorType="channel"
+            [internalHref]="[ '/c', videoChannelSync.channel.name ]"
+            size="25"
+          ></my-actor-avatar>
+
+          <div class="actor-info">
+            <a [routerLink]="[ '/c', videoChannelSync.channel.name ]" class="actor-names" i18n-title title="Channel page">
+              <div class="actor-display-name">{{ videoChannelSync.channel.displayName }}</div>
+              <div class="actor-name">{{ videoChannelSync.channel.name }}</div>
+            </a>
+          </div>
+        </div>
+      </td>
+
+      <td>
+        <span [ngClass]="getSyncStateClass(videoChannelSync.state.id)">
+          {{ videoChannelSync.state.label }}
+        </span>
+      </td>
+
+      <td>{{ videoChannelSync.createdAt | date: 'short' }}</td>
+      <td>{{ videoChannelSync.lastSyncAt | date: 'short' }}</td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss
new file mode 100644
index 000000000..88738e54d
--- /dev/null
+++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss
@@ -0,0 +1,14 @@
+@use '_mixins' as *;
+@use '_variables' as *;
+@use '_actor' as *;
+
+.add-sync {
+  @include create-button;
+}
+
+.actor {
+  @include actor-row($min-height: auto, $separator: true);
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border: 0;
+}
diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts
new file mode 100644
index 000000000..81bdaf9f2
--- /dev/null
+++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts
@@ -0,0 +1,129 @@
+import { Component, OnInit } from '@angular/core'
+import { AuthService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
+import { DropdownAction, VideoChannelService, VideoChannelSyncService } from '@app/shared/shared-main'
+import { HTMLServerConfig } from '@shared/models/server'
+import { VideoChannelSync, VideoChannelSyncState } from '@shared/models/videos'
+import { SortMeta } from 'primeng/api'
+import { mergeMap } from 'rxjs'
+
+@Component({
+  templateUrl: './my-video-channel-syncs.component.html',
+  styleUrls: [ './my-video-channel-syncs.component.scss' ]
+})
+export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
+  error: string
+
+  channelSyncs: VideoChannelSync[] = []
+  totalRecords = 0
+
+  videoChannelSyncActions: DropdownAction<VideoChannelSync>[][] = []
+  sort: SortMeta = { field: 'createdAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  private static STATE_CLASS_BY_ID = {
+    [VideoChannelSyncState.FAILED]: 'badge-red',
+    [VideoChannelSyncState.PROCESSING]: 'badge-blue',
+    [VideoChannelSyncState.SYNCED]: 'badge-green',
+    [VideoChannelSyncState.WAITING_FIRST_RUN]: 'badge-yellow'
+  }
+
+  private serverConfig: HTMLServerConfig
+
+  constructor (
+    private videoChannelsSyncService: VideoChannelSyncService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private authService: AuthService,
+    private videoChannelService: VideoChannelService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.serverConfig = this.serverService.getHTMLConfig()
+    this.initialize()
+
+    this.videoChannelSyncActions = [
+      [
+        {
+          label: $localize`Delete`,
+          iconName: 'delete',
+          handler: videoChannelSync => this.deleteSync(videoChannelSync)
+        },
+        {
+          label: $localize`Fully synchronize the channel`,
+          description: $localize`This fetches any missing videos on the local channel`,
+          iconName: 'refresh',
+          handler: videoChannelSync => this.fullySynchronize(videoChannelSync)
+        }
+      ]
+    ]
+  }
+
+  protected reloadData () {
+    this.error = undefined
+
+    this.authService.userInformationLoaded
+      .pipe(mergeMap(() => {
+        const user = this.authService.getUser()
+        return this.videoChannelsSyncService.listAccountVideoChannelsSyncs({
+          sort: this.sort,
+          account: user.account,
+          pagination: this.pagination
+        })
+      }))
+      .subscribe({
+        next: res => {
+          this.channelSyncs = res.data
+        },
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  syncEnabled () {
+    return this.serverConfig.import.videoChannelSynchronization.enabled
+  }
+
+  deleteSync (videoChannelSync: VideoChannelSync) {
+    this.videoChannelsSyncService.deleteSync(videoChannelSync.id)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Synchronization removed successfully for ${videoChannelSync.channel.displayName}.`)
+          this.reloadData()
+        },
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  fullySynchronize (videoChannelSync: VideoChannelSync) {
+    this.videoChannelService.importVideos(videoChannelSync.channel.name, videoChannelSync.externalChannelUrl)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Full synchronization requested successfully for ${videoChannelSync.channel.displayName}.`)
+        },
+        error: err => {
+          this.error = err.message
+        }
+      })
+  }
+
+  getSyncCreateLink () {
+    return '/my-library/video-channel-syncs/create'
+  }
+
+  getSyncStateClass (stateId: number) {
+    return [ 'pt-badge', MyVideoChannelSyncsComponent.STATE_CLASS_BY_ID[stateId] ]
+  }
+
+  getIdentifier () {
+    return 'MyVideoChannelsSyncComponent'
+  }
+
+  getChannelUrl (name: string) {
+    return '/c/' + name
+  }
+}
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
+        }
+      })
+  }
+}