aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-library/my-video-channel-syncs
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-library/my-video-channel-syncs')
-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
6 files changed, 383 insertions, 0 deletions
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}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-14 03:25:12 +0000