From cdeddff142fd20f8cb8bb346625909d61c596603 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 7 Apr 2021 17:01:29 +0200 Subject: Add ability to update the banner --- .../my-video-channel-edit.component.html | 11 +++++-- .../my-video-channel-edit.component.scss | 7 +++- .../+my-video-channels/my-video-channel-edit.ts | 2 ++ .../my-video-channel-update.component.ts | 38 +++++++++++++++++++--- .../+my-video-channels/my-video-channels.module.ts | 4 ++- 5 files changed, 54 insertions(+), 8 deletions(-) (limited to 'client/src/app/+my-library/+my-video-channels') diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html index 735f9e3ba..7b8928907 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html @@ -44,10 +44,17 @@ - Banner image of your channel + + + + + >
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss index 8f8af655c..22de103d1 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss @@ -10,11 +10,16 @@ label { @include settings-big-title; } -my-actor-avatar-info { +my-actor-avatar-edit, +my-actor-banner-edit { display: block; margin-bottom: 20px; } +my-actor-banner-edit { + max-width: 500px; +} + .input-group { @include peertube-input-group(fit-content); } diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts index 3e20a27ee..0cdf2fe34 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts @@ -15,6 +15,8 @@ export abstract class MyVideoChannelEdit extends FormReactive { // We need this method so angular does not complain in child template that doesn't need this onAvatarChange (formData: FormData) { /* empty */ } onAvatarDelete () { /* empty */ } + onBannerChange (formData: FormData) { /* empty */ } + onBannerDelete () { /* empty */ } // Should be implemented by the child isBulkUpdateVideosDisplayed () { diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts index 6cd1ff503..22935a87a 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts @@ -1,7 +1,9 @@ import { Subscription } from 'rxjs' +import { HttpErrorResponse } from '@angular/common/http' import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { AuthService, Notifier, ServerService } from '@app/core' +import { uploadErrorHandler } from '@app/helpers' import { VIDEO_CHANNEL_DESCRIPTION_VALIDATOR, VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, @@ -11,8 +13,6 @@ import { FormValidatorService } from '@app/shared/shared-forms' import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' import { ServerConfig, VideoChannelUpdate } from '@shared/models' import { MyVideoChannelEdit } from './my-video-channel-edit' -import { HttpErrorResponse } from '@angular/common/http' -import { uploadErrorHandler } from '@app/helpers' @Component({ selector: 'my-video-channel-update', @@ -101,7 +101,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements } onAvatarChange (formData: FormData) { - this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData) + this.videoChannelService.changeVideoChannelImage(this.videoChannelToUpdate.name, formData, 'avatar') .subscribe( data => { this.notifier.success($localize`Avatar changed.`) @@ -118,7 +118,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements } onAvatarDelete () { - this.videoChannelService.deleteVideoChannelAvatar(this.videoChannelToUpdate.name) + this.videoChannelService.deleteVideoChannelImage(this.videoChannelToUpdate.name, 'avatar') .subscribe( data => { this.notifier.success($localize`Avatar deleted.`) @@ -130,6 +130,36 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements ) } + onBannerChange (formData: FormData) { + this.videoChannelService.changeVideoChannelImage(this.videoChannelToUpdate.name, formData, 'banner') + .subscribe( + data => { + this.notifier.success($localize`Banner changed.`) + + this.videoChannelToUpdate.updateBanner(data.banner) + }, + + (err: HttpErrorResponse) => uploadErrorHandler({ + err, + name: $localize`banner`, + notifier: this.notifier + }) + ) + } + + onBannerDelete () { + this.videoChannelService.deleteVideoChannelImage(this.videoChannelToUpdate.name, 'banner') + .subscribe( + data => { + this.notifier.success($localize`Banner deleted.`) + + this.videoChannelToUpdate.resetBanner() + }, + + err => this.notifier.error(err.message) + ) + } + get maxAvatarSize () { return this.serverConfig.avatar.file.size.max } diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts index 92b56db49..53557ca02 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts @@ -1,5 +1,6 @@ import { ChartModule } from 'primeng/chart' import { NgModule } from '@angular/core' +import { SharedActorImageModule } from '@app/shared/shared-actor-image' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' @@ -16,7 +17,8 @@ import { MyVideoChannelsComponent } from './my-video-channels.component' SharedMainModule, SharedFormModule, - SharedGlobalIconModule + SharedGlobalIconModule, + SharedActorImageModule ], declarations: [ -- cgit v1.2.3