aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+manage/video-channel-edit
diff options
context:
space:
mode:
authorkontrollanten <6680299+kontrollanten@users.noreply.github.com>2021-12-13 15:29:13 +0100
committerGitHub <noreply@github.com>2021-12-13 15:29:13 +0100
commita37e9e74ff07b057370d1ed6c0b391a02be8a6d2 (patch)
tree30d59e12518149a309bbd10bee1485f8be523c75 /client/src/app/+manage/video-channel-edit
parent11e520b50d791a0dd48cbb2d0fc681b25eb7cd53 (diff)
downloadPeerTube-a37e9e74ff07b057370d1ed6c0b391a02be8a6d2.tar.gz
PeerTube-a37e9e74ff07b057370d1ed6c0b391a02be8a6d2.tar.zst
PeerTube-a37e9e74ff07b057370d1ed6c0b391a02be8a6d2.zip
Give moderators access to edit channels (#4608)
* give admins access to edit all channels closes #4598 * test(channels): +admin update another users channel * Fix tests * fix(server): delete another users channel Since the channel owner isn't necessary the auth user we need to check the right account whether it's the last video or not. * REMOVE_ANY_VIDEO_CHANNEL > MANAGE_ANY_VIDEO_CHANNEL Merge REMOVE_ANY_VIDEO_CHANNEL and MANY_VIDEO_CHANNELS to MANAGE_ANY_VIDEO_CHANNEL. * user-right: moderator can't manage admins channel * client: MyVideoChannelCreateComponent > VideoChannelCreateComponent * client: MyVideoChannelEdit > VideoChannelEdit * Revert "user-right: moderator can't manage admins channel" This reverts commit 2c627c154e2bfe6af2e0f45efb27faf4117572f3. * server: clean dupl validator functionality * fix ensureUserCanManageChannel usage It's not async anymore. * server: merge channel validator middleares ensureAuthUserOwnsChannelValidator & ensureUserCanManageChannel gets merged into one middleware. * client(VideoChannelEdit): redirect to prev route * fix(VideoChannels): handle anon users * client: new routes for create/update channel * Refactor channel validators Co-authored-by: Chocobozzz <me@florianbigard.com>
Diffstat (limited to 'client/src/app/+manage/video-channel-edit')
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-create.component.ts120
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.html96
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss77
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.ts18
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-update.component.ts189
5 files changed, 500 insertions, 0 deletions
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-create.component.ts b/client/src/app/+manage/video-channel-edit/video-channel-create.component.ts
new file mode 100644
index 000000000..5f8e0278e
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-create.component.ts
@@ -0,0 +1,120 @@
1import { of } from 'rxjs'
2import { switchMap } from 'rxjs/operators'
3import { Component, OnInit } from '@angular/core'
4import { Router } from '@angular/router'
5import { AuthService, Notifier } from '@app/core'
6import {
7 VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
8 VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
9 VIDEO_CHANNEL_NAME_VALIDATOR,
10 VIDEO_CHANNEL_SUPPORT_VALIDATOR
11} from '@app/shared/form-validators/video-channel-validators'
12import { FormValidatorService } from '@app/shared/shared-forms'
13import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
14import { HttpStatusCode, VideoChannelCreate } from '@shared/models'
15import { VideoChannelEdit } from './video-channel-edit'
16
17@Component({
18 templateUrl: './video-channel-edit.component.html',
19 styleUrls: [ './video-channel-edit.component.scss' ]
20})
21export class VideoChannelCreateComponent extends VideoChannelEdit implements OnInit {
22 error: string
23 videoChannel = new VideoChannel({})
24
25 private avatar: FormData
26 private banner: FormData
27
28 constructor (
29 protected formValidatorService: FormValidatorService,
30 private authService: AuthService,
31 private notifier: Notifier,
32 private router: Router,
33 private videoChannelService: VideoChannelService
34 ) {
35 super()
36 }
37
38 ngOnInit () {
39 this.buildForm({
40 name: VIDEO_CHANNEL_NAME_VALIDATOR,
41 'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
42 description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
43 support: VIDEO_CHANNEL_SUPPORT_VALIDATOR
44 })
45 }
46
47 formValidated () {
48 this.error = undefined
49
50 const body = this.form.value
51 const videoChannelCreate: VideoChannelCreate = {
52 name: body.name,
53 displayName: body['display-name'],
54 description: body.description || null,
55 support: body.support || null
56 }
57
58 this.videoChannelService.createVideoChannel(videoChannelCreate)
59 .pipe(
60 switchMap(() => this.uploadAvatar()),
61 switchMap(() => this.uploadBanner())
62 ).subscribe({
63 next: () => {
64 this.authService.refreshUserInformation()
65
66 this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
67 this.router.navigate([ '/my-library', 'video-channels' ])
68 },
69
70 error: err => {
71 if (err.status === HttpStatusCode.CONFLICT_409) {
72 this.error = $localize`This name already exists on this instance.`
73 return
74 }
75
76 this.error = err.message
77 }
78 })
79 }
80
81 onAvatarChange (formData: FormData) {
82 this.avatar = formData
83 }
84
85 onAvatarDelete () {
86 this.avatar = null
87 }
88
89 onBannerChange (formData: FormData) {
90 this.banner = formData
91 }
92
93 onBannerDelete () {
94 this.banner = null
95 }
96
97 isCreation () {
98 return true
99 }
100
101 getFormButtonTitle () {
102 return $localize`Create`
103 }
104
105 getUsername () {
106 return this.form.value.name
107 }
108
109 private uploadAvatar () {
110 if (!this.avatar) return of(undefined)
111
112 return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.avatar, 'avatar')
113 }
114
115 private uploadBanner () {
116 if (!this.banner) return of(undefined)
117
118 return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.banner, 'banner')
119 }
120}
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
new file mode 100644
index 000000000..3751747a9
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -0,0 +1,96 @@
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="form-row"> <!-- channel grid -->
7 <div class="form-group col-12 col-lg-4 col-xl-3">
8 <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
9 <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
10 </div>
11
12 <div class="form-group col-12 col-lg-8 col-xl-9">
13 <h6 i18n>Banner image of the channel</h6>
14
15 <my-actor-banner-edit
16 *ngIf="videoChannel" [previewImage]="isCreation()"
17 [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
18 ></my-actor-banner-edit>
19
20 <my-actor-avatar-edit
21 *ngIf="videoChannel" [previewImage]="isCreation()"
22 [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
23 [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
24 ></my-actor-avatar-edit>
25
26 <div class="form-group" *ngIf="isCreation()">
27 <label i18n for="name">Name</label>
28 <div class="input-group">
29 <input
30 type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
31 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
32 >
33 <div class="input-group-append">
34 <span class="input-group-text">@{{ instanceHost }}</span>
35 </div>
36 </div>
37 <div *ngIf="formErrors['name']" class="form-error">
38 {{ formErrors['name'] }}
39 </div>
40 </div>
41
42 <div class="form-group">
43 <label i18n for="display-name">Display name</label>
44 <input
45 type="text" id="display-name" class="form-control"
46 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
47 >
48 <div *ngIf="formErrors['display-name']" class="form-error">
49 {{ formErrors['display-name'] }}
50 </div>
51 </div>
52
53 <div class="form-group">
54 <label i18n for="description">Description</label>
55 <textarea
56 id="description" formControlName="description" class="form-control"
57 [ngClass]="{ 'input-error': formErrors['description'] }"
58 ></textarea>
59 <div *ngIf="formErrors.description" class="form-error">
60 {{ formErrors.description }}
61 </div>
62 </div>
63
64 <div class="form-group">
65 <label for="support">Support</label>
66 <my-help
67 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br />
68 When a video is uploaded in this channel, the video support field will be automatically filled by this text."
69 ></my-help>
70 <my-markdown-textarea
71 id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
72 [classes]="{ 'input-error': formErrors['support'] }"
73 ></my-markdown-textarea>
74 <div *ngIf="formErrors.support" class="form-error">
75 {{ formErrors.support }}
76 </div>
77 </div>
78
79 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
80 <my-peertube-checkbox
81 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
82 i18n-labelText labelText="Overwrite support field of all videos of this channel"
83 ></my-peertube-checkbox>
84 </div>
85
86 </div>
87 </div>
88
89 <div class="form-row"> <!-- submit placement block -->
90 <div class="col-md-7 col-xl-5"></div>
91 <div class="col-md-5 col-xl-5 d-inline-flex">
92 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
93 </div>
94 </div>
95 </form>
96</div> \ No newline at end of file
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
new file mode 100644
index 000000000..d010d6277
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -0,0 +1,77 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4.margin-content {
5 padding-top: 20px;
6}
7
8label {
9 font-weight: $font-regular;
10 font-size: 100%;
11}
12
13.video-channel-title {
14 @include settings-big-title;
15}
16
17my-actor-avatar-edit,
18my-actor-banner-edit {
19 display: block;
20 margin-bottom: 20px;
21}
22
23my-actor-banner-edit {
24 max-width: 500px;
25}
26
27.input-group {
28 @include peertube-input-group(fit-content);
29}
30
31.input-group-append {
32 height: 30px;
33}
34
35input {
36 &[type=text] {
37 @include peertube-input-text(340px);
38
39 display: block;
40
41 &#name {
42 width: auto;
43 flex-grow: 1;
44 }
45 }
46
47 &[type=submit] {
48 @include peertube-button;
49 @include orange-button;
50 @include margin-left(auto);
51 }
52}
53
54textarea {
55 @include peertube-textarea(500px, 150px);
56
57 display: block;
58}
59
60.peertube-select-container {
61 @include peertube-select-container(340px);
62}
63
64.breadcrumb {
65 @include breadcrumb;
66}
67
68@media screen and (max-width: $small-view) {
69 input[type=text]#name {
70 width: auto !important;
71 }
72
73 label[for=name] + div,
74 textarea {
75 width: 100%;
76 }
77}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.ts b/client/src/app/+manage/video-channel-edit/video-channel-edit.ts
new file mode 100644
index 000000000..963b4cbbe
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.ts
@@ -0,0 +1,18 @@
1import { FormReactive } from '@app/shared/shared-forms'
2import { VideoChannel } from '@app/shared/shared-main'
3
4export abstract class VideoChannelEdit extends FormReactive {
5 videoChannel: VideoChannel
6
7 abstract isCreation (): boolean
8 abstract getFormButtonTitle (): string
9
10 get instanceHost () {
11 return window.location.host
12 }
13
14 // Should be implemented by the child
15 isBulkUpdateVideosDisplayed () {
16 return false
17 }
18}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts b/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
new file mode 100644
index 000000000..21b6167b2
--- /dev/null
+++ b/client/src/app/+manage/video-channel-edit/video-channel-update.component.ts
@@ -0,0 +1,189 @@
1import { Subscription } from 'rxjs'
2import { HttpErrorResponse } from '@angular/common/http'
3import { Component, OnDestroy, OnInit } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
6import { genericUploadErrorHandler } from '@app/helpers'
7import {
8 VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
9 VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
10 VIDEO_CHANNEL_SUPPORT_VALIDATOR
11} from '@app/shared/form-validators/video-channel-validators'
12import { FormValidatorService } from '@app/shared/shared-forms'
13import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
14import { HTMLServerConfig, VideoChannelUpdate } from '@shared/models'
15import { VideoChannelEdit } from './video-channel-edit'
16
17@Component({
18 selector: 'my-video-channel-update',
19 templateUrl: './video-channel-edit.component.html',
20 styleUrls: [ './video-channel-edit.component.scss' ]
21})
22export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnInit, OnDestroy {
23 error: string
24 videoChannel: VideoChannel
25
26 private paramsSub: Subscription
27 private oldSupportField: string
28 private serverConfig: HTMLServerConfig
29
30 constructor (
31 protected formValidatorService: FormValidatorService,
32 private authService: AuthService,
33 private notifier: Notifier,
34 private router: Router,
35 private route: ActivatedRoute,
36 private videoChannelService: VideoChannelService,
37 private serverService: ServerService,
38 private redirectService: RedirectService
39 ) {
40 super()
41 }
42
43 ngOnInit () {
44 this.serverConfig = this.serverService.getHTMLConfig()
45
46 this.buildForm({
47 'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
48 description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
49 support: VIDEO_CHANNEL_SUPPORT_VALIDATOR,
50 bulkVideosSupportUpdate: null
51 })
52
53 this.paramsSub = this.route.params.subscribe(routeParams => {
54 const videoChannelName = routeParams['videoChannelName']
55
56 this.videoChannelService.getVideoChannel(videoChannelName)
57 .subscribe({
58 next: videoChannelToUpdate => {
59 this.videoChannel = videoChannelToUpdate
60
61 this.oldSupportField = videoChannelToUpdate.support
62
63 this.form.patchValue({
64 'display-name': videoChannelToUpdate.displayName,
65 description: videoChannelToUpdate.description,
66 support: videoChannelToUpdate.support
67 })
68 },
69
70 error: err => {
71 this.error = err.message
72 }
73 })
74 })
75 }
76
77 ngOnDestroy () {
78 if (this.paramsSub) this.paramsSub.unsubscribe()
79 }
80
81 formValidated () {
82 this.error = undefined
83
84 const body = this.form.value
85 const videoChannelUpdate: VideoChannelUpdate = {
86 displayName: body['display-name'],
87 description: body.description || null,
88 support: body.support || null,
89 bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
90 }
91
92 this.videoChannelService.updateVideoChannel(this.videoChannel.name, videoChannelUpdate)
93 .subscribe({
94 next: () => {
95 this.authService.refreshUserInformation()
96
97 this.notifier.success($localize`Video channel ${videoChannelUpdate.displayName} updated.`)
98
99 this.redirectService.redirectToPreviousRoute([ '/c', this.videoChannel.name ])
100 },
101
102 error: err => {
103 this.error = err.message
104 }
105 })
106 }
107
108 onAvatarChange (formData: FormData) {
109 this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'avatar')
110 .subscribe({
111 next: data => {
112 this.notifier.success($localize`Avatar changed.`)
113
114 this.videoChannel.updateAvatar(data.avatar)
115 },
116
117 error: (err: HttpErrorResponse) => genericUploadErrorHandler({
118 err,
119 name: $localize`avatar`,
120 notifier: this.notifier
121 })
122 })
123 }
124
125 onAvatarDelete () {
126 this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'avatar')
127 .subscribe({
128 next: () => {
129 this.notifier.success($localize`Avatar deleted.`)
130
131 this.videoChannel.resetAvatar()
132 },
133
134 error: err => this.notifier.error(err.message)
135 })
136 }
137
138 onBannerChange (formData: FormData) {
139 this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'banner')
140 .subscribe({
141 next: data => {
142 this.notifier.success($localize`Banner changed.`)
143
144 this.videoChannel.updateBanner(data.banner)
145 },
146
147 error: (err: HttpErrorResponse) => genericUploadErrorHandler({
148 err,
149 name: $localize`banner`,
150 notifier: this.notifier
151 })
152 })
153 }
154
155 onBannerDelete () {
156 this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'banner')
157 .subscribe({
158 next: () => {
159 this.notifier.success($localize`Banner deleted.`)
160
161 this.videoChannel.resetBanner()
162 },
163
164 error: err => this.notifier.error(err.message)
165 })
166 }
167
168 get maxAvatarSize () {
169 return this.serverConfig.avatar.file.size.max
170 }
171
172 get avatarExtensions () {
173 return this.serverConfig.avatar.file.extensions.join(',')
174 }
175
176 isCreation () {
177 return false
178 }
179
180 getFormButtonTitle () {
181 return $localize`Update`
182 }
183
184 isBulkUpdateVideosDisplayed () {
185 if (this.oldSupportField === undefined) return false
186
187 return this.oldSupportField !== this.form.value['support']
188 }
189}