From 08c1efbe32244c321de28b0f2a6aaa3f99f46b58 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 26 Apr 2018 16:11:38 +0200 Subject: Add video channel management --- .../edit-custom-config.component.html | 2 +- .../src/app/+admin/follows/follows.component.html | 2 +- .../src/app/+admin/follows/follows.component.scss | 2 +- .../+admin/jobs/jobs-list/jobs-list.component.html | 2 +- .../users/user-edit/user-edit.component.html | 4 +- .../users/user-edit/user-edit.component.scss | 2 +- .../users/user-list/user-list.component.html | 2 +- .../users/user-list/user-list.component.scss | 10 +- .../video-abuse-list.component.html | 2 +- .../video-blacklist-list.component.html | 2 +- .../app/my-account/my-account-routing.module.ts | 30 ++++++ .../my-account-video-channel-create.component.ts | 86 +++++++++++++++ .../my-account-video-channel-edit.component.html | 42 ++++++++ .../my-account-video-channel-edit.component.scss | 27 +++++ .../my-account-video-channel-edit.ts | 6 ++ .../my-account-video-channel-update.component.ts | 116 +++++++++++++++++++++ .../my-account-video-channels.component.html | 30 ++++++ .../my-account-video-channels.component.scss | 72 +++++++++++++ .../my-account-video-channels.component.ts | 59 +++++++++++ .../my-account-videos.component.ts | 2 - .../src/app/my-account/my-account.component.html | 2 + client/src/app/my-account/my-account.module.ts | 8 +- .../shared/forms/form-validators/video-channel.ts | 34 ++++++ .../shared/video-channel/video-channel.service.ts | 22 +++- 24 files changed, 543 insertions(+), 23 deletions(-) create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channel-create.component.ts create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.html create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss create mode 100644 client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts create mode 100644 client/src/app/shared/forms/form-validators/video-channel.ts (limited to 'client/src/app') diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index df40bba9f..021252456 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -1,4 +1,4 @@ -
Update PeerTube configuration
+
Update PeerTube configuration
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html index d3d748622..71e82059c 100644 --- a/client/src/app/+admin/follows/follows.component.html +++ b/client/src/app/+admin/follows/follows.component.html @@ -1,5 +1,5 @@
-
Manage follows
+
Manage follows
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index 385dfbb7d..08b3737f8 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -1,4 +1,4 @@ -.admin-sub-title { +.form-sub-title { flex-grow: 0; margin-right: 30px; } diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html index 2bc8ab3dd..0cc4dc3e0 100644 --- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html +++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html @@ -1,5 +1,5 @@
-
Jobs list
+
Jobs list
+
+ {{ formErrors.display-name }} +
+
+ +
+ + +
+ {{ formErrors.description }} +
+
+ +
+ + + +
+ {{ formErrors.support }} +
+
+ + + diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss new file mode 100644 index 000000000..6fbb8ae8b --- /dev/null +++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss @@ -0,0 +1,27 @@ +@import '_variables'; +@import '_mixins'; + +.form-sub-title { + margin-bottom: 20px; +} + +input[type=text] { + @include peertube-input-text(340px); + + display: block; +} + +textarea { + @include peertube-textarea(500px, 150px); + + display: block; +} + +.peertube-select-container { + @include peertube-select-container(340px); +} + +input[type=submit] { + @include peertube-button; + @include orange-button; +} \ No newline at end of file diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts new file mode 100644 index 000000000..e56f46262 --- /dev/null +++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts @@ -0,0 +1,6 @@ +import { FormReactive } from '@app/shared' + +export abstract class MyAccountVideoChannelEdit extends FormReactive { + abstract isCreation (): boolean + abstract getFormButtonTitle (): string +} diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts new file mode 100644 index 000000000..2b8415938 --- /dev/null +++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts @@ -0,0 +1,116 @@ +import { Component, OnInit, OnDestroy } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { NotificationsService } from 'angular2-notifications' +import 'rxjs/add/observable/from' +import 'rxjs/add/operator/concatAll' +import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit' +import { FormBuilder, FormGroup } from '@angular/forms' +import { VideoChannelUpdate } from '../../../../../shared/models/videos' +import { + VIDEO_CHANNEL_DESCRIPTION, + VIDEO_CHANNEL_DISPLAY_NAME, + VIDEO_CHANNEL_SUPPORT +} from '@app/shared/forms/form-validators/video-channel' +import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' +import { Subscription } from 'rxjs/Subscription' +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' + +@Component({ + selector: 'my-account-video-channel-update', + templateUrl: './my-account-video-channel-edit.component.html', + styleUrls: [ './my-account-video-channel-edit.component.scss' ] +}) +export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelEdit implements OnInit, OnDestroy { + error: string + + form: FormGroup + formErrors = { + 'display-name': '', + 'description': '', + 'support': '' + } + validationMessages = { + 'display-name': VIDEO_CHANNEL_DISPLAY_NAME.MESSAGES, + 'description': VIDEO_CHANNEL_DESCRIPTION.MESSAGES, + 'support': VIDEO_CHANNEL_SUPPORT.MESSAGES + } + + private videoChannelToUpdate: VideoChannel + private paramsSub: Subscription + + constructor ( + private notificationsService: NotificationsService, + private router: Router, + private route: ActivatedRoute, + private formBuilder: FormBuilder, + private videoChannelService: VideoChannelService + ) { + super() + } + + buildForm () { + this.form = this.formBuilder.group({ + 'display-name': [ '', VIDEO_CHANNEL_DISPLAY_NAME.VALIDATORS ], + description: [ '', VIDEO_CHANNEL_DESCRIPTION.VALIDATORS ], + support: [ '', VIDEO_CHANNEL_SUPPORT.VALIDATORS ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + ngOnInit () { + this.buildForm() + + this.paramsSub = this.route.params.subscribe(routeParams => { + const videoChannelId = routeParams['videoChannelId'] + + this.videoChannelService.getVideoChannel(videoChannelId).subscribe( + videoChannelToUpdate => { + this.videoChannelToUpdate = videoChannelToUpdate + + this.form.patchValue({ + 'display-name': videoChannelToUpdate.displayName, + description: videoChannelToUpdate.description, + support: videoChannelToUpdate.support + }) + }, + + err => this.error = err.message + ) + }) + } + + ngOnDestroy () { + if (this.paramsSub) this.paramsSub.unsubscribe() + } + + formValidated () { + this.error = undefined + + const body = this.form.value + const videoChannelUpdate: VideoChannelUpdate = { + displayName: body['display-name'], + description: body.description, + support: body.support + } + + this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.uuid, videoChannelUpdate).subscribe( + () => { + this.notificationsService.success('Success', `Video channel ${videoChannelUpdate.displayName} updated.`) + this.router.navigate([ '/my-account', 'video-channels' ]) + }, + + err => this.error = err.message + ) + } + + isCreation () { + return false + } + + getFormButtonTitle () { + return this.videoChannelToUpdate + ? 'Update ' + this.videoChannelToUpdate.displayName + ' video channel' + : 'Update' + } +} diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html new file mode 100644 index 000000000..90c401bc5 --- /dev/null +++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html @@ -0,0 +1,30 @@ +
+ + + Create another video channel + +
+ +
+
+ + Avatar + + +
+ +
{{ videoChannel.displayName }}
+ + + + +
{{ videoChannel.followersCount }} subscribers
+
+ +
+ + + +
+
+
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss new file mode 100644 index 000000000..bcb58eac2 --- /dev/null +++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -0,0 +1,72 @@ +@import '_variables'; +@import '_mixins'; + +.create-button { + @include create-button; +} + +/deep/ .action-button { + &.action-button-delete { + margin-right: 10px; + } +} + +.video-channel { + display: flex; + min-height: 130px; + padding-bottom: 20px; + margin-bottom: 20px; + border-bottom: 1px solid #C6C6C6; + + img { + @include avatar(80px); + + margin-right: 10px; + } + + .video-channel-info { + flex-grow: 1; + + a.video-channel-names { + @include disable-default-a-behaviour; + + display: flex; + color: #000; + + .video-channel-display-name { + font-weight: $font-semibold; + font-size: 18px; + } + + .video-channel-name { + font-size: 14px; + color: #777272; + } + } + } + + .video-channel-buttons { + min-width: 190px; + } +} + +.video-channels-header { + text-align: right; + margin: 20px 0 50px; +} + +@media screen and (max-width: 800px) { + .video-channel { + flex-direction: column; + height: auto; + text-align: center; + + img { + margin-right: 0; + } + + .video-channel-buttons { + margin-top: 10px; + } + } +} diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts new file mode 100644 index 000000000..eb04094e1 --- /dev/null +++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts @@ -0,0 +1,59 @@ +import { Component, OnInit } from '@angular/core' +import { NotificationsService } from 'angular2-notifications' +import 'rxjs/add/observable/from' +import 'rxjs/add/operator/concatAll' +import { AuthService } from '../../core/auth' +import { ConfirmService } from '../../core/confirm' +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' +import { User } from '@app/shared' + +@Component({ + selector: 'my-account-video-channels', + templateUrl: './my-account-video-channels.component.html', + styleUrls: [ './my-account-video-channels.component.scss' ] +}) +export class MyAccountVideoChannelsComponent implements OnInit{ + videoChannels: VideoChannel[] = [] + + private user: User + + constructor ( + private authService: AuthService, + private notificationsService: NotificationsService, + private confirmService: ConfirmService, + private videoChannelService: VideoChannelService + ) {} + + ngOnInit () { + this.user = this.authService.getUser() + + this.loadVideoChannels() + } + + async deleteVideoChannel (videoChannel: VideoChannel) { + const res = await this.confirmService.confirmWithInput( + `Do you really want to delete ${videoChannel.displayName}? It will delete all videos uploaded in this channel too.`, + 'Please type the name of the video channel to confirm', + videoChannel.displayName, + 'Delete' + ) + if (res === false) return + + this.videoChannelService.removeVideoChannel(videoChannel) + .subscribe( + status => { + this.loadVideoChannels() + this.notificationsService.success('Success', `Video channel ${videoChannel.name} deleted.`) + }, + + error => this.notificationsService.error('Error', error.message) + ) + } + + private loadVideoChannels () { + this.authService.userInformationLoaded + .flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account.id)) + .subscribe(res => this.videoChannels = res.data) + } +} diff --git a/client/src/app/my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/my-account/my-account-videos/my-account-videos.component.ts index a6cef361e..c1b53bcd5 100644 --- a/client/src/app/my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/my-account/my-account-videos/my-account-videos.component.ts @@ -43,8 +43,6 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni ngOnInit () { super.ngOnInit() - - // this.generateSyndicationList() } ngOnDestroy () { diff --git a/client/src/app/my-account/my-account.component.html b/client/src/app/my-account/my-account.component.html index 41afc1e5d..591d58cf9 100644 --- a/client/src/app/my-account/my-account.component.html +++ b/client/src/app/my-account/my-account.component.html @@ -2,6 +2,8 @@
My settings + My video channels + My videos
diff --git a/client/src/app/my-account/my-account.module.ts b/client/src/app/my-account/my-account.module.ts index 981d3c697..ba9dea71e 100644 --- a/client/src/app/my-account/my-account.module.ts +++ b/client/src/app/my-account/my-account.module.ts @@ -7,6 +7,9 @@ import { MyAccountSettingsComponent } from './my-account-settings/my-account-set import { MyAccountComponent } from './my-account.component' import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/my-account-profile/my-account-profile.component' +import { MyAccountVideoChannelsComponent } from '@app/my-account/my-account-video-channels/my-account-video-channels.component' +import { MyAccountVideoChannelCreateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-create.component' +import { MyAccountVideoChannelUpdateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-update.component' @NgModule({ imports: [ @@ -20,7 +23,10 @@ import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/m MyAccountChangePasswordComponent, MyAccountVideoSettingsComponent, MyAccountProfileComponent, - MyAccountVideosComponent + MyAccountVideosComponent, + MyAccountVideoChannelsComponent, + MyAccountVideoChannelCreateComponent, + MyAccountVideoChannelUpdateComponent ], exports: [ diff --git a/client/src/app/shared/forms/form-validators/video-channel.ts b/client/src/app/shared/forms/form-validators/video-channel.ts new file mode 100644 index 000000000..6233d17f7 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/video-channel.ts @@ -0,0 +1,34 @@ +import { Validators } from '@angular/forms' + +export const VIDEO_CHANNEL_DISPLAY_NAME = { + VALIDATORS: [ + Validators.required, + Validators.minLength(3), + Validators.maxLength(120) + ], + MESSAGES: { + 'required': 'Display name is required.', + 'minlength': 'Display name must be at least 3 characters long.', + 'maxlength': 'Display name cannot be more than 120 characters long.' + } +} +export const VIDEO_CHANNEL_DESCRIPTION = { + VALIDATORS: [ + Validators.minLength(3), + Validators.maxLength(250) + ], + MESSAGES: { + 'minlength': 'Description must be at least 3 characters long.', + 'maxlength': 'Description cannot be more than 250 characters long.' + } +} +export const VIDEO_CHANNEL_SUPPORT = { + VALIDATORS: [ + Validators.minLength(3), + Validators.maxLength(300) + ], + MESSAGES: { + 'minlength': 'Support text must be at least 3 characters long.', + 'maxlength': 'Support text cannot be more than 300 characters long.' + } +} diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts index d8efcc171..3533a0e9c 100644 --- a/client/src/app/shared/video-channel/video-channel.service.ts +++ b/client/src/app/shared/video-channel/video-channel.service.ts @@ -5,12 +5,14 @@ import { Observable } from 'rxjs/Observable' import { RestExtractor } from '../rest/rest-extractor.service' import { RestService } from '../rest/rest.service' import { HttpClient } from '@angular/common/http' -import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos' +import { VideoChannel as VideoChannelServer, VideoChannelCreate, VideoChannelUpdate } from '../../../../../shared/models/videos' import { AccountService } from '../account/account.service' import { ResultList } from '../../../../../shared' import { VideoChannel } from './video-channel.model' import { ReplaySubject } from 'rxjs/ReplaySubject' import { environment } from '../../../environments/environment' +import { UserService } from '@app/+admin/users/shared/user.service' +import { User } from '@app/shared' @Injectable() export class VideoChannelService { @@ -37,6 +39,24 @@ export class VideoChannelService { .catch((res) => this.restExtractor.handleError(res)) } + createVideoChannel (videoChannel: VideoChannelCreate) { + return this.authHttp.post(VideoChannelService.BASE_VIDEO_CHANNEL_URL, videoChannel) + .map(this.restExtractor.extractDataBool) + .catch(err => this.restExtractor.handleError(err)) + } + + updateVideoChannel (videoChannelUUID: string, videoChannel: VideoChannelUpdate) { + return this.authHttp.put(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelUUID, videoChannel) + .map(this.restExtractor.extractDataBool) + .catch(err => this.restExtractor.handleError(err)) + } + + removeVideoChannel (videoChannel: VideoChannel) { + return this.authHttp.delete(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.uuid) + .map(this.restExtractor.extractDataBool) + .catch(err => this.restExtractor.handleError(err)) + } + private extractVideoChannels (result: ResultList) { const videoChannels: VideoChannel[] = [] -- cgit v1.2.3