aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorFlorent <florent.git@zeteo.me>2022-08-10 09:53:39 +0200
committerGitHub <noreply@github.com>2022-08-10 09:53:39 +0200
commit2a491182e483b97afb1b65c908b23cb48d591807 (patch)
treeec13503216ad72a3ea8f1ce3b659899f8167fb47 /client/src
parent06ac128958c489efe1008eeca1df683819bd2f18 (diff)
downloadPeerTube-2a491182e483b97afb1b65c908b23cb48d591807.tar.gz
PeerTube-2a491182e483b97afb1b65c908b23cb48d591807.tar.zst
PeerTube-2a491182e483b97afb1b65c908b23cb48d591807.zip
Channel sync (#5135)
* Add external channel URL for channel update / creation (#754) * Disallow synchronisation if user has no video quota (#754) * More constraints serverside (#754) * Disable sync if server configuration does not allow HTTP import (#754) * Working version synchronizing videos with a job (#754) TODO: refactoring, too much code duplication * More logs and try/catch (#754) * Fix eslint error (#754) * WIP: support synchronization time change (#754) * New frontend #754 * WIP: Create sync front (#754) * Enhance UI, sync creation form (#754) * Warning message when HTTP upload is disallowed * More consistent names (#754) * Binding Front with API (#754) * Add a /me API (#754) * Improve list UI (#754) * Implement creation and deletion routes (#754) * Lint (#754) * Lint again (#754) * WIP: UI for triggering import existing videos (#754) * Implement jobs for syncing and importing channels * Don't sync videos before sync creation + avoid concurrency issue (#754) * Cleanup (#754) * Cleanup: OpenAPI + API rework (#754) * Remove dead code (#754) * Eslint (#754) * Revert the mess with whitespaces in constants.ts (#754) * Some fixes after rebase (#754) * Several fixes after PR remarks (#754) * Front + API: Rename video-channels-sync to video-channel-syncs (#754) * Allow enabling channel sync through UI (#754) * getChannelInfo (#754) * Minor fixes: openapi + model + sql (#754) * Simplified API validators (#754) * Rename MChannelSync to MChannelSyncChannel (#754) * Add command for VideoChannelSync (#754) * Use synchronization.enabled config (#754) * Check parameters test + some fixes (#754) * Fix conflict mistake (#754) * Restrict access to video channel sync list API (#754) * Start adding unit test for synchronization (#754) * Continue testing (#754) * Tests finished + convertion of job to scheduler (#754) * Add lastSyncAt field (#754) * Fix externalRemoteUrl sort + creation date not well formatted (#754) * Small fix (#754) * Factorize addYoutubeDLImport and buildVideo (#754) * Check duplicates on channel not on users (#754) * factorize thumbnail generation (#754) * Fetch error should return status 400 (#754) * Separate video-channel-import and video-channel-sync-latest (#754) * Bump DB migration version after rebase (#754) * Prettier states in UI table (#754) * Add DefaultScope in VideoChannelSyncModel (#754) * Fix audit logs (#754) * Ensure user can upload when importing channel + minor fixes (#754) * Mark synchronization as failed on exception + typos (#754) * Change REST API for importing videos into channel (#754) * Add option for fully synchronize a chnanel (#754) * Return a whole sync object on creation to avoid tricks in Front (#754) * Various remarks (#754) * Single quotes by default (#754) * Rename synchronization to video_channel_synchronization * Add check.latest_videos_count and max_per_user options (#754) * Better channel rendering in list #754 * Allow sorting with channel name and state (#754) * Add missing tests for channel imports (#754) * Prefer using a parent job for channel sync * Styling * Client styling Co-authored-by: Chocobozzz <me@florianbigard.com>
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html24
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts26
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts3
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.ts3
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.html2
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.html15
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss17
-rw-r--r--client/src/app/+my-library/my-library-routing.module.ts22
-rw-r--r--client/src/app/+my-library/my-library.module.ts4
-rw-r--r--client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html83
-rw-r--r--client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss14
-rw-r--r--client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts129
-rw-r--r--client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html64
-rw-r--r--client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.scss17
-rw-r--r--client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts76
-rw-r--r--client/src/app/shared/form-validators/video-channel-validators.ts13
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.html7
-rw-r--r--client/src/app/shared/shared-main/index.ts1
-rw-r--r--client/src/app/shared/shared-main/video-channel-sync/index.ts1
-rw-r--r--client/src/app/shared/shared-main/video-channel-sync/video-channel-sync.service.ts50
-rw-r--r--client/src/app/shared/shared-main/video-channel/video-channel.service.ts6
21 files changed, 564 insertions, 13 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 7dfe5f5f9..929ea3a90 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -267,10 +267,10 @@
267 inputName="importVideosHttpEnabled" formControlName="enabled" 267 inputName="importVideosHttpEnabled" formControlName="enabled"
268 i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)" 268 i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
269 > 269 >
270 <ng-container ngProjectAs="description"> 270 <ng-container ngProjectAs="description">
271 <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span> 271 <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
272 </ng-container> 272 </ng-container>
273 </my-peertube-checkbox> 273 </my-peertube-checkbox>
274 </div> 274 </div>
275 275
276 <div class="form-group" formGroupName="torrent"> 276 <div class="form-group" formGroupName="torrent">
@@ -285,6 +285,22 @@
285 </div> 285 </div>
286 286
287 </ng-container> 287 </ng-container>
288
289 <ng-container formGroupName="videoChannelSynchronization">
290 <div class="form-group">
291 <my-peertube-checkbox
292 inputName="importSynchronizationEnabled" formControlName="enabled"
293 i18n-labelText labelText="Allow channel synchronization with channel of other platforms like YouTube (requires allowing import with HTTP URL)"
294 >
295 <ng-container ngProjectAs="description">
296 <span i18n [hidden]="isImportVideosHttpEnabled()">
297 ⛔ You need to allow import with HTTP URL to be able to activate this feature.
298 </span>
299 </ng-container>
300 </my-peertube-checkbox>
301 </div>
302 </ng-container>
303
288 </ng-container> 304 </ng-container>
289 305
290 <ng-container formGroupName="autoBlacklist"> 306 <ng-container formGroupName="autoBlacklist">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index 29910369a..90ed58c99 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -25,11 +25,12 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
25 private configService: ConfigService, 25 private configService: ConfigService,
26 private menuService: MenuService, 26 private menuService: MenuService,
27 private themeService: ThemeService 27 private themeService: ThemeService
28 ) { } 28 ) {}
29 29
30 ngOnInit () { 30 ngOnInit () {
31 this.buildLandingPageOptions() 31 this.buildLandingPageOptions()
32 this.checkSignupField() 32 this.checkSignupField()
33 this.checkImportSyncField()
33 34
34 this.availableThemes = this.themeService.buildAvailableThemes() 35 this.availableThemes = this.themeService.buildAvailableThemes()
35 } 36 }
@@ -67,6 +68,14 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
67 return { 'disabled-checkbox-extra': !this.isSignupEnabled() } 68 return { 'disabled-checkbox-extra': !this.isSignupEnabled() }
68 } 69 }
69 70
71 isImportVideosHttpEnabled (): boolean {
72 return this.form.value['import']['videos']['http']['enabled'] === true
73 }
74
75 importSynchronizationChecked () {
76 return this.isImportVideosHttpEnabled() && this.form.value['import']['videoChannelSynchronization']['enabled']
77 }
78
70 hasUnlimitedSignup () { 79 hasUnlimitedSignup () {
71 return this.form.value['signup']['limit'] === -1 80 return this.form.value['signup']['limit'] === -1
72 } 81 }
@@ -97,6 +106,21 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
97 return this.themeService.getDefaultThemeLabel() 106 return this.themeService.getDefaultThemeLabel()
98 } 107 }
99 108
109 private checkImportSyncField () {
110 const importSyncControl = this.form.get('import.videoChannelSynchronization.enabled')
111 const importVideosHttpControl = this.form.get('import.videos.http.enabled')
112
113 importVideosHttpControl.valueChanges
114 .subscribe((httpImportEnabled) => {
115 importSyncControl.setValue(httpImportEnabled && importSyncControl.value)
116 if (httpImportEnabled) {
117 importSyncControl.enable()
118 } else {
119 importSyncControl.disable()
120 }
121 })
122 }
123
100 private checkSignupField () { 124 private checkSignupField () {
101 const signupControl = this.form.get('signup.enabled') 125 const signupControl = this.form.get('signup.enabled')
102 126
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index ce01f8b59..5cab9e9df 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -144,6 +144,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
144 torrent: { 144 torrent: {
145 enabled: null 145 enabled: null
146 } 146 }
147 },
148 videoChannelSynchronization: {
149 enabled: null
147 } 150 }
148 }, 151 },
149 trending: { 152 trending: {
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index 42f503be6..4cda63272 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -38,7 +38,8 @@ export class JobsComponent extends RestTable implements OnInit {
38 'video-redundancy', 38 'video-redundancy',
39 'video-transcoding', 39 'video-transcoding',
40 'videos-views-stats', 40 'videos-views-stats',
41 'move-to-object-storage' 41 'move-to-object-storage',
42 'video-channel-import'
42 ] 43 ]
43 44
44 jobs: Job[] = [] 45 jobs: Job[] = []
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index b557fb011..b93dc2b12 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -61,7 +61,7 @@
61 </div> 61 </div>
62 62
63 <div class="form-group"> 63 <div class="form-group">
64 <label for="support">Support</label> 64 <label i18n for="support">Support</label>
65 <my-help 65 <my-help
66 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br /> 66 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br />
67 When a video is uploaded in this channel, the video support field will be automatically filled by this text." 67 When a video is uploaded in this channel, the video support field will be automatically filled by this text."
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 @@
1<h1> 1<h1>
2 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 2 <span>
3 <ng-container i18n>My channels</ng-container> 3 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
4 <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span> 4 <ng-container i18n>My channels</ng-container>
5 <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
6 </span>
7
8 <div>
9 <a routerLink="/my-library/video-channel-syncs" class="button-link">
10 <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
11 <ng-container i18n>My synchronizations</ng-container>
12 </a>
13 </div>
5</h1> 14</h1>
6 15
7<my-channels-setup-message [hideLink]="true"></my-channels-setup-message> 16<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 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4h1 my-global-icon { 4h1 {
5 position: relative; 5 display: flex;
6 top: -2px; 6 justify-content: space-between;
7
8 my-global-icon {
9 position: relative;
10 top: -2px;
11 }
12
13 .button-link {
14 @include peertube-button-link;
15 @include grey-button;
16 @include button-with-icon(18px, 3px, -1px);
17 }
7} 18}
8 19
9.create-button { 20.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
6import { MyHistoryComponent } from './my-history/my-history.component' 6import { MyHistoryComponent } from './my-history/my-history.component'
7import { MyLibraryComponent } from './my-library.component' 7import { MyLibraryComponent } from './my-library.component'
8import { MyOwnershipComponent } from './my-ownership/my-ownership.component' 8import { MyOwnershipComponent } from './my-ownership/my-ownership.component'
9import { MyVideoChannelSyncsComponent } from './my-video-channel-syncs/my-video-channel-syncs.component'
10import { VideoChannelSyncEditComponent } from './my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component'
9import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component' 11import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component'
10import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component' 12import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component'
11import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component' 13import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component'
@@ -131,6 +133,26 @@ const myLibraryRoutes: Routes = [
131 key: 'my-videos-history-list' 133 key: 'my-videos-history-list'
132 } 134 }
133 } 135 }
136 },
137
138 {
139 path: 'video-channel-syncs',
140 component: MyVideoChannelSyncsComponent,
141 data: {
142 meta: {
143 title: $localize`My synchronizations`
144 }
145 }
146 },
147
148 {
149 path: 'video-channel-syncs/create',
150 component: VideoChannelSyncEditComponent,
151 data: {
152 meta: {
153 title: $localize`Create new synchronization`
154 }
155 }
134 } 156 }
135 ] 157 ]
136 } 158 }
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
29import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component' 29import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
30import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component' 30import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
31import { MyVideosComponent } from './my-videos/my-videos.component' 31import { MyVideosComponent } from './my-videos/my-videos.component'
32import { MyVideoChannelSyncsComponent } from './my-video-channel-syncs/my-video-channel-syncs.component'
33import { VideoChannelSyncEditComponent } from './my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component'
32 34
33@NgModule({ 35@NgModule({
34 imports: [ 36 imports: [
@@ -63,6 +65,8 @@ import { MyVideosComponent } from './my-videos/my-videos.component'
63 MyOwnershipComponent, 65 MyOwnershipComponent,
64 MyAcceptOwnershipComponent, 66 MyAcceptOwnershipComponent,
65 MyVideoImportsComponent, 67 MyVideoImportsComponent,
68 MyVideoChannelSyncsComponent,
69 VideoChannelSyncEditComponent,
66 MySubscriptionsComponent, 70 MySubscriptionsComponent,
67 MyFollowersComponent, 71 MyFollowersComponent,
68 MyHistoryComponent, 72 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 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2
3<h1>
4 <my-global-icon iconName="refresh" aria-hidden="true"></my-global-icon>
5 <ng-container i18n>My synchronizations</ng-container>
6</h1>
7
8<div *ngIf="!syncEnabled()">
9 <p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p>
10</div>
11
12<p-table
13 *ngIf="syncEnabled()" [value]="channelSyncs" [lazy]="true"
14 [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
15 [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
16 [showCurrentPageReport]="true" i18n-currentPageReportTemplate
17 currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} synchronizations"
18 [expandedRowKeys]="expandedRows"
19>
20 <ng-template pTemplate="caption">
21 <div class="caption">
22 <div class="left-buttons">
23 <a class="add-sync" routerLink="{{ getSyncCreateLink() }}">
24 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
25 <ng-container i18n>Add synchronization</ng-container>
26 </a>
27 </div>
28 </div>
29 </ng-template>
30
31 <ng-template pTemplate="header">
32 <tr>
33 <th style="width: 10%"><my-global-icon iconName="columns"></my-global-icon></th>
34 <th style="width: 25%" i18n pSortableColumn="externalChannelUrl">External Channel <p-sortIcon field="externalChannelUrl"></p-sortIcon></th>
35 <th style="width: 25%" i18n pSortableColumn="videoChannel">Channel <p-sortIcon field="videoChannel"></p-sortIcon></th>
36 <th style="width: 10%" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
37 <th style="width: 10%" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
38 <th style="width: 10%" i18n pSortableColumn="lastSyncAt">Last synchronization at <p-sortIcon field="lastSyncAt"></p-sortIcon></th>
39 </tr>
40 </ng-template>
41
42 <ng-template pTemplate="body" let-expanded="expanded" let-videoChannelSync>
43 <tr>
44 <td class="action-cell">
45 <my-action-dropdown
46 container="body"
47 [actions]="videoChannelSyncActions" [entry]="videoChannelSync"
48 ></my-action-dropdown>
49 </td>
50
51 <td>
52 <a [href]="videoChannelSync.externalChannelUrl" target="_blank" rel="noopener noreferrer">{{ videoChannelSync.externalChannelUrl }}</a>
53 </td>
54
55 <td>
56 <div class="actor">
57 <my-actor-avatar
58 class="channel"
59 [actor]="videoChannelSync.channel" actorType="channel"
60 [internalHref]="[ '/c', videoChannelSync.channel.name ]"
61 size="25"
62 ></my-actor-avatar>
63
64 <div class="actor-info">
65 <a [routerLink]="[ '/c', videoChannelSync.channel.name ]" class="actor-names" i18n-title title="Channel page">
66 <div class="actor-display-name">{{ videoChannelSync.channel.displayName }}</div>
67 <div class="actor-name">{{ videoChannelSync.channel.name }}</div>
68 </a>
69 </div>
70 </div>
71 </td>
72
73 <td>
74 <span [ngClass]="getSyncStateClass(videoChannelSync.state.id)">
75 {{ videoChannelSync.state.label }}
76 </span>
77 </td>
78
79 <td>{{ videoChannelSync.createdAt | date: 'short' }}</td>
80 <td>{{ videoChannelSync.lastSyncAt | date: 'short' }}</td>
81 </tr>
82 </ng-template>
83</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 @@
1@use '_mixins' as *;
2@use '_variables' as *;
3@use '_actor' as *;
4
5.add-sync {
6 @include create-button;
7}
8
9.actor {
10 @include actor-row($min-height: auto, $separator: true);
11 margin-bottom: 0;
12 padding-bottom: 0;
13 border: 0;
14}
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 @@
1import { Component, OnInit } from '@angular/core'
2import { AuthService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
3import { DropdownAction, VideoChannelService, VideoChannelSyncService } from '@app/shared/shared-main'
4import { HTMLServerConfig } from '@shared/models/server'
5import { VideoChannelSync, VideoChannelSyncState } from '@shared/models/videos'
6import { SortMeta } from 'primeng/api'
7import { mergeMap } from 'rxjs'
8
9@Component({
10 templateUrl: './my-video-channel-syncs.component.html',
11 styleUrls: [ './my-video-channel-syncs.component.scss' ]
12})
13export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
14 error: string
15
16 channelSyncs: VideoChannelSync[] = []
17 totalRecords = 0
18
19 videoChannelSyncActions: DropdownAction<VideoChannelSync>[][] = []
20 sort: SortMeta = { field: 'createdAt', order: 1 }
21 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
22
23 private static STATE_CLASS_BY_ID = {
24 [VideoChannelSyncState.FAILED]: 'badge-red',
25 [VideoChannelSyncState.PROCESSING]: 'badge-blue',
26 [VideoChannelSyncState.SYNCED]: 'badge-green',
27 [VideoChannelSyncState.WAITING_FIRST_RUN]: 'badge-yellow'
28 }
29
30 private serverConfig: HTMLServerConfig
31
32 constructor (
33 private videoChannelsSyncService: VideoChannelSyncService,
34 private serverService: ServerService,
35 private notifier: Notifier,
36 private authService: AuthService,
37 private videoChannelService: VideoChannelService
38 ) {
39 super()
40 }
41
42 ngOnInit () {
43 this.serverConfig = this.serverService.getHTMLConfig()
44 this.initialize()
45
46 this.videoChannelSyncActions = [
47 [
48 {
49 label: $localize`Delete`,
50 iconName: 'delete',
51 handler: videoChannelSync => this.deleteSync(videoChannelSync)
52 },
53 {
54 label: $localize`Fully synchronize the channel`,
55 description: $localize`This fetches any missing videos on the local channel`,
56 iconName: 'refresh',
57 handler: videoChannelSync => this.fullySynchronize(videoChannelSync)
58 }
59 ]
60 ]
61 }
62
63 protected reloadData () {
64 this.error = undefined
65
66 this.authService.userInformationLoaded
67 .pipe(mergeMap(() => {
68 const user = this.authService.getUser()
69 return this.videoChannelsSyncService.listAccountVideoChannelsSyncs({
70 sort: this.sort,
71 account: user.account,
72 pagination: this.pagination
73 })
74 }))
75 .subscribe({
76 next: res => {
77 this.channelSyncs = res.data
78 },
79 error: err => {
80 this.error = err.message
81 }
82 })
83 }
84
85 syncEnabled () {
86 return this.serverConfig.import.videoChannelSynchronization.enabled
87 }
88
89 deleteSync (videoChannelSync: VideoChannelSync) {
90 this.videoChannelsSyncService.deleteSync(videoChannelSync.id)
91 .subscribe({
92 next: () => {
93 this.notifier.success($localize`Synchronization removed successfully for ${videoChannelSync.channel.displayName}.`)
94 this.reloadData()
95 },
96 error: err => {
97 this.error = err.message
98 }
99 })
100 }
101
102 fullySynchronize (videoChannelSync: VideoChannelSync) {
103 this.videoChannelService.importVideos(videoChannelSync.channel.name, videoChannelSync.externalChannelUrl)
104 .subscribe({
105 next: () => {
106 this.notifier.success($localize`Full synchronization requested successfully for ${videoChannelSync.channel.displayName}.`)
107 },
108 error: err => {
109 this.error = err.message
110 }
111 })
112 }
113
114 getSyncCreateLink () {
115 return '/my-library/video-channel-syncs/create'
116 }
117
118 getSyncStateClass (stateId: number) {
119 return [ 'pt-badge', MyVideoChannelSyncsComponent.STATE_CLASS_BY_ID[stateId] ]
120 }
121
122 getIdentifier () {
123 return 'MyVideoChannelsSyncComponent'
124 }
125
126 getChannelUrl (name: string) {
127 return '/c/' + name
128 }
129}
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 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2
3<div class="margin-content">
4 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
5
6 <div class="row">
7 <div class="col-12 col-lg-4 col-xl-3">
8 <div class="video-channel-sync-title" i18n>NEW SYNCHRONIZATION</div>
9 </div>
10
11 <div class="col-12 col-lg-8 col-xl-9">
12 <div class="form-group">
13 <label i18n for="externalChannelUrl">Remote channel URL</label>
14
15 <div class="input-group">
16 <input
17 type="text"
18 id="externalChannelUrl"
19 i18n-placeholder
20 placeholder="Example: https://youtube.com/channel/UC_fancy_channel"
21 formControlName="externalChannelUrl"
22 [ngClass]="{ 'input-error': formErrors['externalChannelUrl'] }"
23 class="form-control"
24 >
25 </div>
26
27 <div *ngIf="formErrors['externalChannelUrl']" class="form-error">
28 {{ formErrors['externalChannelUrl'] }}
29 </div>
30 </div>
31
32 <div class="form-group">
33 <label i18n for="videoChannel">Video Channel</label>
34 <my-select-channel required [items]="userVideoChannels" formControlName="videoChannel"></my-select-channel>
35
36 <div *ngIf="formErrors['videoChannel']" class="form-error">
37 {{ formErrors['videoChannel'] }}
38 </div>
39 </div>
40
41 <div class="form-group">
42 <label for="existingVideoStrategy" i18n>Options for existing videos on remote channel:</label>
43
44 <div class="peertube-radio-container">
45 <input type="radio" name="existingVideoStrategy" id="import" value="import" formControlName="existingVideoStrategy" required />
46 <label for="import" i18n>Import all and watch for new publications</label>
47 </div>
48
49 <div class="peertube-radio-container">
50 <input type="radio" name="existingVideoStrategy" id="doNothing" value="nothing" formControlName="existingVideoStrategy" required />
51 <label for="doNothing" i18n>Only watch for new publications</label>
52 </div>
53 </div>
54 </div>
55 </div>
56
57 <div class="row"> <!-- submit placement block -->
58 <div class="col-md-7 col-xl-5"></div>
59 <div class="col-md-5 col-xl-5 d-inline-flex">
60 <input type="submit" class="peertube-button orange-button ms-auto" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
61 </div>
62 </div>
63 </form>
64</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 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4$form-base-input-width: 480px;
5
6input[type=text] {
7 @include peertube-input-text($form-base-input-width);
8}
9
10.video-channel-sync-title {
11 @include settings-big-title;
12}
13
14my-select-channel {
15 display: block;
16 max-width: $form-base-input-width;
17}
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 @@
1import { mergeMap } from 'rxjs'
2import { SelectChannelItem } from 'src/types'
3import { Component, OnInit } from '@angular/core'
4import { Router } from '@angular/router'
5import { AuthService, Notifier } from '@app/core'
6import { listUserChannelsForSelect } from '@app/helpers'
7import { VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
8import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
9import { VideoChannelService, VideoChannelSyncService } from '@app/shared/shared-main'
10import { VideoChannelSyncCreate } from '@shared/models/videos'
11
12@Component({
13 selector: 'my-video-channel-sync-edit',
14 templateUrl: './video-channel-sync-edit.component.html',
15 styleUrls: [ './video-channel-sync-edit.component.scss' ]
16})
17export class VideoChannelSyncEditComponent extends FormReactive implements OnInit {
18 error: string
19 userVideoChannels: SelectChannelItem[] = []
20 existingVideosStrategy: string
21
22 constructor (
23 protected formValidatorService: FormValidatorService,
24 private authService: AuthService,
25 private router: Router,
26 private notifier: Notifier,
27 private videoChannelSyncService: VideoChannelSyncService,
28 private videoChannelService: VideoChannelService
29 ) {
30 super()
31 }
32
33 ngOnInit () {
34 this.buildForm({
35 externalChannelUrl: VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR,
36 videoChannel: null,
37 existingVideoStrategy: null
38 })
39
40 listUserChannelsForSelect(this.authService)
41 .subscribe(channels => this.userVideoChannels = channels)
42 }
43
44 getFormButtonTitle () {
45 return $localize`Create`
46 }
47
48 formValidated () {
49 this.error = undefined
50
51 const body = this.form.value
52 const videoChannelSyncCreate: VideoChannelSyncCreate = {
53 externalChannelUrl: body.externalChannelUrl,
54 videoChannelId: body.videoChannel
55 }
56
57 const importExistingVideos = body['existingVideoStrategy'] === 'import'
58
59 this.videoChannelSyncService.createSync(videoChannelSyncCreate)
60 .pipe(mergeMap(({ videoChannelSync }) => {
61 return importExistingVideos
62 ? this.videoChannelService.importVideos(videoChannelSync.channel.name, videoChannelSync.externalChannelUrl)
63 : Promise.resolve(null)
64 }))
65 .subscribe({
66 next: () => {
67 this.notifier.success($localize`Synchronization created successfully.`)
68 this.router.navigate([ '/my-library', 'video-channel-syncs' ])
69 },
70
71 error: err => {
72 this.error = err.message
73 }
74 })
75 }
76}
diff --git a/client/src/app/shared/form-validators/video-channel-validators.ts b/client/src/app/shared/form-validators/video-channel-validators.ts
index 163faf270..b12b3caaf 100644
--- a/client/src/app/shared/form-validators/video-channel-validators.ts
+++ b/client/src/app/shared/form-validators/video-channel-validators.ts
@@ -48,3 +48,16 @@ export const VIDEO_CHANNEL_SUPPORT_VALIDATOR: BuildFormValidator = {
48 maxlength: $localize`Support text cannot be more than 1000 characters long.` 48 maxlength: $localize`Support text cannot be more than 1000 characters long.`
49 } 49 }
50} 50}
51
52export const VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR: BuildFormValidator = {
53 VALIDATORS: [
54 Validators.required,
55 Validators.pattern(/^https?:\/\//),
56 Validators.maxLength(1000)
57 ],
58 MESSAGES: {
59 required: $localize`Remote channel url is required.`,
60 pattern: $localize`External channel URL must begin with "https://" or "http://"`,
61 maxlength: $localize`External channel URL cannot be more than 1000 characters long`
62 }
63}
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index 761243bfe..6c05764df 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -107,6 +107,13 @@
107 </tr> 107 </tr>
108 108
109 <tr> 109 <tr>
110 <th i18n class="sub-label" scope="row">Channel synchronization with other platforms (YouTube, Vimeo, ...)</th>
111 <td>
112 <my-feature-boolean [value]="serverConfig.import.videoChannelSynchronization.enabled"></my-feature-boolean>
113 </td>
114 </tr>
115
116 <tr>
110 <th i18n class="label" colspan="2">Search</th> 117 <th i18n class="label" colspan="2">Search</th>
111 </tr> 118 </tr>
112 119
diff --git a/client/src/app/shared/shared-main/index.ts b/client/src/app/shared/shared-main/index.ts
index 3a7fd4c34..9faa28e32 100644
--- a/client/src/app/shared/shared-main/index.ts
+++ b/client/src/app/shared/shared-main/index.ts
@@ -13,3 +13,4 @@ export * from './video'
13export * from './video-caption' 13export * from './video-caption'
14export * from './video-channel' 14export * from './video-channel'
15export * from './shared-main.module' 15export * from './shared-main.module'
16export * from './video-channel-sync'
diff --git a/client/src/app/shared/shared-main/video-channel-sync/index.ts b/client/src/app/shared/shared-main/video-channel-sync/index.ts
new file mode 100644
index 000000000..7134bcd18
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-channel-sync/index.ts
@@ -0,0 +1 @@
export * from './video-channel-sync.service'
diff --git a/client/src/app/shared/shared-main/video-channel-sync/video-channel-sync.service.ts b/client/src/app/shared/shared-main/video-channel-sync/video-channel-sync.service.ts
new file mode 100644
index 000000000..a4e216869
--- /dev/null
+++ b/client/src/app/shared/shared-main/video-channel-sync/video-channel-sync.service.ts
@@ -0,0 +1,50 @@
1import { SortMeta } from 'primeng/api'
2import { catchError, Observable } from 'rxjs'
3import { environment } from 'src/environments/environment'
4import { HttpClient, HttpParams } from '@angular/common/http'
5import { Injectable } from '@angular/core'
6import { RestExtractor, RestPagination, RestService } from '@app/core'
7import { ResultList } from '@shared/models/common'
8import { VideoChannelSync, VideoChannelSyncCreate } from '@shared/models/videos'
9import { Account, AccountService } from '../account'
10
11@Injectable({
12 providedIn: 'root'
13})
14export class VideoChannelSyncService {
15 static BASE_VIDEO_CHANNEL_URL = environment.apiUrl + '/api/v1/video-channel-syncs'
16
17 constructor (
18 private authHttp: HttpClient,
19 private restExtractor: RestExtractor,
20 private restService: RestService
21 ) { }
22
23 listAccountVideoChannelsSyncs (parameters: {
24 sort: SortMeta
25 pagination: RestPagination
26 account: Account
27 }): Observable<ResultList<VideoChannelSync>> {
28 const { pagination, sort, account } = parameters
29
30 let params = new HttpParams()
31 params = this.restService.addRestGetParams(params, pagination, sort)
32
33 const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channel-syncs'
34
35 return this.authHttp.get<ResultList<VideoChannelSync>>(url, { params })
36 .pipe(catchError(err => this.restExtractor.handleError(err)))
37 }
38
39 createSync (body: VideoChannelSyncCreate) {
40 return this.authHttp.post<{ videoChannelSync: VideoChannelSync }>(VideoChannelSyncService.BASE_VIDEO_CHANNEL_URL, body)
41 .pipe(catchError(err => this.restExtractor.handleError(err)))
42 }
43
44 deleteSync (videoChannelsSyncId: number) {
45 const url = `${VideoChannelSyncService.BASE_VIDEO_CHANNEL_URL}/${videoChannelsSyncId}`
46
47 return this.authHttp.delete(url)
48 .pipe(catchError(err => this.restExtractor.handleError(err)))
49 }
50}
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index 480d250fb..fa97025ac 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -95,4 +95,10 @@ export class VideoChannelService {
95 return this.authHttp.delete(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost) 95 return this.authHttp.delete(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost)
96 .pipe(catchError(err => this.restExtractor.handleError(err))) 96 .pipe(catchError(err => this.restExtractor.handleError(err)))
97 } 97 }
98
99 importVideos (videoChannelName: string, externalChannelUrl: string) {
100 const path = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/import-videos'
101 return this.authHttp.post(path, { externalChannelUrl })
102 .pipe(catchError(err => this.restExtractor.handleError(err)))
103 }
98} 104}