From 7ee0efb57a39c7d5f645d5d707ae366327c0c551 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 20 Feb 2024 11:33:01 +0100 Subject: [PATCH] Add ability to set a banner to the instance --- .../about-follows.component.html | 46 +-- .../about-instance.component.html | 322 +++++++++--------- .../about-instance.component.ts | 6 + .../about-peertube.component.html | 2 +- .../about-peertube.component.scss | 5 +- client/src/app/+about/about.component.html | 4 +- client/src/app/+admin/admin.component.html | 2 +- .../edit-custom-config.component.scss | 7 +- .../edit-instance-information.component.html | 5 + .../edit-instance-information.component.ts | 61 +++- .../+admin/config/shared/config.service.ts | 16 + client/src/app/+home/home.component.html | 2 +- client/src/app/+home/home.component.scss | 10 + client/src/app/+home/home.component.ts | 3 +- .../video-channel-edit.component.html | 2 +- .../video-channel-update.component.ts | 8 - .../app/+my-account/my-account.component.html | 2 +- .../app/+my-library/my-library.component.html | 2 +- .../video-channels.component.scss | 4 - .../actor-banner-edit.component.html | 4 +- .../actor-banner-edit.component.ts | 5 +- .../custom-markup.service.ts | 16 + .../peertube-custom-tags/index.ts | 1 + .../instance-banner-markup.component.html | 3 + .../instance-banner-markup.component.ts | 37 ++ .../shared-custom-markup.module.ts | 7 +- client/src/sass/application.scss | 15 +- client/src/sass/class-helpers/_common.scss | 2 +- client/src/sass/class-helpers/_images.scss | 10 + client/src/sass/class-helpers/index.scss | 1 + .../custom-markup/custom-markup-data.model.ts | 18 +- packages/models/src/server/about.model.ts | 4 + .../src/server/config-command.ts | 36 ++ packages/tests/src/api/check-params/config.ts | 78 +++++ packages/tests/src/api/server/config.ts | 57 +++- server/core/controllers/api/config.ts | 59 +++- .../middlewares/validators/actor-image.ts | 9 +- server/core/models/actor/actor-image.ts | 13 +- support/doc/api/openapi.yaml | 54 +++ 39 files changed, 686 insertions(+), 252 deletions(-) create mode 100644 client/src/app/+home/home.component.scss create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.html create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.ts create mode 100644 client/src/sass/class-helpers/_images.scss diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html index 37571dfa4..34427452c 100644 --- a/client/src/app/+about/about-follows/about-follows.component.html +++ b/client/src/app/+about/about-follows/about-follows.component.html @@ -1,28 +1,30 @@ -
-

Follows

+
+
+

Follows

-
-

Followers of {{ instanceName }} ({{ followersPagination.totalItems }})

+
+

Followers of {{ instanceName }} ({{ followersPagination.totalItems }})

-
{{ instanceName }} does not have followers.
+
{{ instanceName }} does not have followers.
- - {{ follower.name }} - + + {{ follower.name }} + + + +
+ +
+

Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})

+ +
{{ instanceName }} does not have subscriptions.
+ + + {{ following.name }} + + + +
-
- -
-

Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})

- -
{{ instanceName }} does not have subscriptions.
- - - {{ following.name }} - - - -
-
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html index 4c7504628..876f29821 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html @@ -1,226 +1,232 @@ -
-
+ -
-

About {{ instanceName }}

+
+
+
- Contact us -
+
+

About {{ instanceName }}

-
- {{ category }} + Contact us +
- {{ language }} -
+
+ {{ category }} -
-
{{ shortDescription }}
+ {{ language }} +
-
This instance is dedicated to sensitive/NSFW content.
-
+
+
{{ shortDescription }}
-
- -

- ADMINISTRATORS & SUSTAINABILITY -

- +
This instance is dedicated to sensitive/NSFW content.
+
-
-
+
-

Who we are

- - -
-
- -
-
- -

Why we created this instance

- - -
-
- -
-
- -

How long we plan to maintain this instance

- - -
-
- -
-
- -

How we will pay for keeping our instance running

- - -
-
- -
- -

- INFORMATION -

- - -
-
- -

Description

- - - -
- -
-
- + (click)="onClickCopyLink(anchorLink)" + >

- MODERATION + ADMINISTRATORS & SUSTAINABILITY

-
-
+
+
-

Moderation information

+

Who we are

 -
+
-
-
+
+
-

Code of conduct

+

Why we created this instance

 -
+
-
-
+
+
-

Terms

+

How long we plan to maintain this instance

 -
+
-
- -
- - -
+
+ + +
-
-
+
+
- -

STATISTICS

- + +

STATISTICS

+ - + +
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts index 85e973d7b..e22352eea 100644 --- a/client/src/app/+about/about-instance/about-instance.component.ts +++ b/client/src/app/+about/about-instance/about-instance.component.ts @@ -20,6 +20,8 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked { aboutHTML: AboutHTML descriptionElement: HTMLDivElement + instanceBannerUrl: string + languages: string[] = [] categories: string[] = [] shortDescription = '' @@ -64,6 +66,10 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked { this.shortDescription = about.instance.shortDescription + this.instanceBannerUrl = about.instance.banners.length !== 0 + ? about.instance.banners[0].path + : undefined + this.serverConfig = this.serverService.getHTMLConfig() this.route.data.subscribe(data => { diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html index d1c3c678a..a066f0e46 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.html +++ b/client/src/app/+about/about-peertube/about-peertube.component.html @@ -1,4 +1,4 @@ -
+

This website is powered by PeerTube

diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss index a81bb8cfc..11a5f2df6 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube.component.scss @@ -1,9 +1,10 @@ @use '_variables' as *; @use '_mixins' as *; -.root { +.margin-content { max-width: 1200px; - margin: auto; + margin-inline-start: auto; + margin-inline-end: auto; } .card { diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html index cf302e061..149a999fa 100644 --- a/client/src/app/+about/about.component.html +++ b/client/src/app/+about/about.component.html @@ -1,5 +1,5 @@
-
+
Instance PeerTube @@ -7,7 +7,7 @@ Network
-
+
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html index f1531f3ef..9d1cd33af 100644 --- a/client/src/app/+admin/admin.component.html +++ b/client/src/app/+admin/admin.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index 764e626ec..09b816129 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -2,6 +2,7 @@ @use '_mixins' as *; $form-base-input-width: 340px; +$form-max-width: 500px; form { padding-bottom: 1.5rem; @@ -9,7 +10,7 @@ form { my-markdown-textarea { display: block; - max-width: 500px; + max-width: $form-max-width; } .homepage my-markdown-textarea { @@ -156,3 +157,7 @@ my-user-real-quota-info { margin-top: 5px; font-size: 11px; } + +my-actor-banner-edit { + max-width: $form-max-width; +} diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html index 6617f5cb7..fefe0a608 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html @@ -8,6 +8,11 @@
+ +
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts index 4185f121f..cb0f1b771 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts @@ -1,25 +1,80 @@ import { SelectOptionsItem } from 'src/types/select-options-item.model' -import { Component, Input } from '@angular/core' +import { Component, Input, OnInit } from '@angular/core' import { FormGroup } from '@angular/forms' import { CustomMarkupService } from '@app/shared/shared-custom-markup' +import { ConfigService } from '../shared/config.service' +import { Notifier } from '@app/core' +import { HttpErrorResponse } from '@angular/common/http' +import { genericUploadErrorHandler } from '@app/helpers' +import { InstanceService } from '@app/shared/shared-instance' @Component({ selector: 'my-edit-instance-information', templateUrl: './edit-instance-information.component.html', styleUrls: [ './edit-custom-config.component.scss' ] }) -export class EditInstanceInformationComponent { +export class EditInstanceInformationComponent implements OnInit { @Input() form: FormGroup @Input() formErrors: any @Input() languageItems: SelectOptionsItem[] = [] @Input() categoryItems: SelectOptionsItem[] = [] - constructor (private customMarkup: CustomMarkupService) { + instanceBannerUrl: string + constructor ( + private customMarkup: CustomMarkupService, + private configService: ConfigService, + private notifier: Notifier, + private instance: InstanceService + ) { + + } + + ngOnInit () { + this.resetBannerUrl() } getCustomMarkdownRenderer () { return this.customMarkup.getCustomMarkdownRenderer() } + + onBannerChange (formData: FormData) { + this.configService.updateInstanceBanner(formData) + .subscribe({ + next: data => { + this.notifier.success($localize`Banner changed.`) + + this.resetBannerUrl() + }, + + error: (err: HttpErrorResponse) => genericUploadErrorHandler({ err, name: $localize`banner`, notifier: this.notifier }) + }) + } + + onBannerDelete () { + this.configService.deleteInstanceBanner() + .subscribe({ + next: () => { + this.notifier.success($localize`Banner deleted.`) + + this.resetBannerUrl() + }, + + error: err => this.notifier.error(err.message) + }) + } + + private resetBannerUrl () { + this.instance.getAbout() + .subscribe(about => { + const banners = about.instance.banners + if (banners.length === 0) { + this.instanceBannerUrl = undefined + return + } + + this.instanceBannerUrl = banners[0].path + }) + } } diff --git a/client/src/app/+admin/config/shared/config.service.ts b/client/src/app/+admin/config/shared/config.service.ts index 3c3894945..3d9970eb3 100644 --- a/client/src/app/+admin/config/shared/config.service.ts +++ b/client/src/app/+admin/config/shared/config.service.ts @@ -67,4 +67,20 @@ export class ConfigService { return this.authHttp.put(ConfigService.BASE_APPLICATION_URL + '/custom', data) .pipe(catchError(res => this.restExtractor.handleError(res))) } + + // --------------------------------------------------------------------------- + + updateInstanceBanner (formData: FormData) { + const url = ConfigService.BASE_APPLICATION_URL + '/instance-banner/pick' + + return this.authHttp.post(url, formData) + .pipe(catchError(err => this.restExtractor.handleError(err))) + } + + deleteInstanceBanner () { + const url = ConfigService.BASE_APPLICATION_URL + '/instance-banner' + + return this.authHttp.delete(url) + .pipe(catchError(err => this.restExtractor.handleError(err))) + } } diff --git a/client/src/app/+home/home.component.html b/client/src/app/+home/home.component.html index 1530af4fb..41e4a9c9f 100644 --- a/client/src/app/+home/home.component.html +++ b/client/src/app/+home/home.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/client/src/app/+home/home.component.scss b/client/src/app/+home/home.component.scss new file mode 100644 index 000000000..67f73d70e --- /dev/null +++ b/client/src/app/+home/home.component.scss @@ -0,0 +1,10 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.margin-content { + padding-top: 2rem; + + ::ng-deep .revert-home-padding-top { + margin-top: -2rem; + } +} diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts index e59cde989..f966a2b02 100644 --- a/client/src/app/+home/home.component.ts +++ b/client/src/app/+home/home.component.ts @@ -2,7 +2,8 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' import { CustomPageService } from '@app/shared/shared-main/custom-page' @Component({ - templateUrl: './home.component.html' + templateUrl: './home.component.html', + styleUrls: [ './home.component.scss' ] }) export class HomeComponent implements OnInit { 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 0537f6585..0fca0deff 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 @@ -12,7 +12,7 @@
-
+
diff --git a/client/src/app/+my-library/my-library.component.html b/client/src/app/+my-library/my-library.component.html index 1c44c8472..389ad9a65 100644 --- a/client/src/app/+my-library/my-library.component.html +++ b/client/src/app/+my-library/my-library.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 182e8d845..6755e8a50 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -11,10 +11,6 @@ --myGreyOwnerFontSize: 14px; } -.banner { - @include block-ratio('img', $banner-inverted-ratio); -} - .section-label { @include section-label-responsive; } diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html index d4ddb2deb..fd7c9afd1 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html @@ -1,7 +1,7 @@ -
+
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts index 47b537b74..c4993d94e 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts @@ -1,7 +1,6 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { SafeResourceUrl } from '@angular/platform-browser' import { Notifier, ServerService } from '@app/core' -import { VideoChannel } from '@app/shared/shared-main' import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' import { getBytes } from '@root-helpers/bytes' import { imageToDataURL } from '@root-helpers/images' @@ -18,7 +17,7 @@ export class ActorBannerEditComponent implements OnInit { @ViewChild('bannerfileInput') bannerfileInput: ElementRef @ViewChild('bannerPopover') bannerPopover: NgbPopover - @Input() actor: VideoChannel + @Input() bannerUrl: string @Input() previewImage = false @Output() bannerChange = new EventEmitter() @@ -69,6 +68,6 @@ export class ActorBannerEditComponent implements OnInit { } hasBanner () { - return !!this.preview || !!this.actor.bannerUrl + return !!this.preview || !!this.bannerUrl } } diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts index 4ab78a250..efcde8120 100644 --- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts +++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts @@ -7,6 +7,7 @@ import { ChannelMiniatureMarkupData, ContainerMarkupData, EmbedMarkupData, + InstanceBannerMarkupData, PlaylistMiniatureMarkupData, VideoMiniatureMarkupData, VideosListMarkupData @@ -16,6 +17,7 @@ import { ButtonMarkupComponent, ChannelMiniatureMarkupComponent, EmbedMarkupComponent, + InstanceBannerMarkupComponent, PlaylistMiniatureMarkupComponent, VideoMiniatureMarkupComponent, VideosListMarkupComponent @@ -28,6 +30,7 @@ type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement @Injectable() export class CustomMarkupService { private angularBuilders: { [ selector: string ]: AngularBuilderFunction } = { + 'peertube-instance-banner': el => this.instanceBannerBuilder(el), 'peertube-button': el => this.buttonBuilder(el), 'peertube-video-embed': el => this.embedBuilder(el, 'video'), 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'), @@ -160,6 +163,19 @@ export class CustomMarkupService { return component } + private instanceBannerBuilder (el: HTMLElement) { + const data = el.dataset as InstanceBannerMarkupData + const component = this.dynamicElementService.createElement(InstanceBannerMarkupComponent) + + const model = { + revertHomePaddingTop: this.buildBoolean(data.revertHomePaddingTop) ?? true + } + + this.dynamicElementService.setModel(component, model) + + return component + } + private videoMiniatureBuilder (el: HTMLElement) { const data = el.dataset as VideoMiniatureMarkupData const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent) diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts index ee2a8f330..5db5d35fd 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts @@ -1,6 +1,7 @@ export * from './button-markup.component' export * from './channel-miniature-markup.component' export * from './embed-markup.component' +export * from './instance-banner-markup.component' export * from './playlist-miniature-markup.component' export * from './video-miniature-markup.component' export * from './videos-list-markup.component' diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.html new file mode 100644 index 000000000..cf9a40123 --- /dev/null +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.html @@ -0,0 +1,3 @@ + diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.ts new file mode 100644 index 000000000..5a6bbbd2b --- /dev/null +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/instance-banner-markup.component.ts @@ -0,0 +1,37 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { CustomMarkupComponent } from './shared' +import { InstanceService } from '@app/shared/shared-instance' +import { finalize } from 'rxjs' + +/* + * Markup component that creates the img HTML element containing the instance banner +*/ + +@Component({ + selector: 'my-instance-banner-markup', + templateUrl: 'instance-banner-markup.component.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class InstanceBannerMarkupComponent implements OnInit, CustomMarkupComponent { + @Input() revertHomePaddingTop: boolean + + @Output() loaded = new EventEmitter() + + instanceBannerUrl: string + + constructor ( + private cd: ChangeDetectorRef, + private instance: InstanceService + ) {} + + ngOnInit () { + this.instance.getAbout() + .pipe(finalize(() => this.loaded.emit(true))) + .subscribe(about => { + if (about.instance.banners.length === 0) return + + this.instanceBannerUrl = about.instance.banners[0].path + this.cd.markForCheck() + }) + } +} diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts index 27e976d13..4b1ba1218 100644 --- a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts +++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts @@ -14,6 +14,7 @@ import { ButtonMarkupComponent, ChannelMiniatureMarkupComponent, EmbedMarkupComponent, + InstanceBannerMarkupComponent, PlaylistMiniatureMarkupComponent, VideoMiniatureMarkupComponent, VideosListMarkupComponent @@ -39,7 +40,8 @@ import { VideosListMarkupComponent, ButtonMarkupComponent, CustomMarkupHelpComponent, - CustomMarkupContainerComponent + CustomMarkupContainerComponent, + InstanceBannerMarkupComponent ], exports: [ @@ -50,7 +52,8 @@ import { EmbedMarkupComponent, ButtonMarkupComponent, CustomMarkupHelpComponent, - CustomMarkupContainerComponent + CustomMarkupContainerComponent, + InstanceBannerMarkupComponent ], providers: [ diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index e22a9f255..2732046d5 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -140,7 +140,8 @@ code { } .main-col { - @include margin-left($menu-width); + // Don't use rfs to get exact pixels + margin-inline-start: $menu-width; width: calc(100% - #{$menu-width}); outline: none; @@ -150,6 +151,10 @@ code { flex-grow: 1; } + .revert-margin-content { + margin: 0 calc(#{pvar(--horizontalMarginContent)} * -1); + } + .sub-menu { background-color: pvar(--submenuBackgroundColor); width: 100%; @@ -168,10 +173,14 @@ code { } // Use an appropriate offset top when sub-menu fixed - .margin-content.offset-content { + .sub-menu-offset-content { padding-top: $sub-menu-height + $sub-menu-margin-bottom; } + .sub-menu.mb-0 + .sub-menu-offset-content { + padding-top: $sub-menu-height; + } + // Override some properties if the main content is expanded (no menu on the left) &.expanded { --horizontalMarginContent: #{$expanded-horizontal-margins}; @@ -271,7 +280,7 @@ my-global-icon[iconName=external-link] { } // Use an appropriate offset top when sub-menu fixed - .margin-content.offset-content { + .sub-menu-offset-content { padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; } diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss index 90fc7e299..5d926e7f6 100644 --- a/client/src/sass/class-helpers/_common.scss +++ b/client/src/sass/class-helpers/_common.scss @@ -79,7 +79,7 @@ top: #{- ($header-height + 20px)}; } -.offset-content { +.sub-menu-offset-content { // if sub-menu fixed .anchor { diff --git a/client/src/sass/class-helpers/_images.scss b/client/src/sass/class-helpers/_images.scss new file mode 100644 index 000000000..edc2e1a21 --- /dev/null +++ b/client/src/sass/class-helpers/_images.scss @@ -0,0 +1,10 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.banner { + @include block-ratio('img', $banner-inverted-ratio); +} + +.revert-margin-content.banner { + width: calc(100% + 2 * #{pvar(--horizontalMarginContent)}); +} diff --git a/client/src/sass/class-helpers/index.scss b/client/src/sass/class-helpers/index.scss index 4fe935ab1..d8fb96e50 100644 --- a/client/src/sass/class-helpers/index.scss +++ b/client/src/sass/class-helpers/index.scss @@ -2,5 +2,6 @@ @use './_common'; @use './_custom-bootstrap-helpers'; @use './_forms'; +@use './images'; @use './_menu'; @use './_text'; diff --git a/packages/models/src/custom-markup/custom-markup-data.model.ts b/packages/models/src/custom-markup/custom-markup-data.model.ts index 3e396052a..fd1897b9b 100644 --- a/packages/models/src/custom-markup/custom-markup-data.model.ts +++ b/packages/models/src/custom-markup/custom-markup-data.model.ts @@ -1,3 +1,5 @@ +type StringBoolean = 'true' | 'false' + export type EmbedMarkupData = { // Video or playlist uuid uuid: string @@ -7,7 +9,7 @@ export type VideoMiniatureMarkupData = { // Video uuid uuid: string - onlyDisplayTitle?: string // boolean + onlyDisplayTitle?: StringBoolean } export type PlaylistMiniatureMarkupData = { @@ -19,12 +21,12 @@ export type ChannelMiniatureMarkupData = { // Channel name (username) name: string - displayLatestVideo?: string // boolean - displayDescription?: string // boolean + displayLatestVideo?: StringBoolean + displayDescription?: StringBoolean } export type VideosListMarkupData = { - onlyDisplayTitle?: string // boolean + onlyDisplayTitle?: StringBoolean maxRows?: string // number sort?: string @@ -38,14 +40,14 @@ export type VideosListMarkupData = { isLive?: string // number - onlyLocal?: string // boolean + onlyLocal?: StringBoolean } export type ButtonMarkupData = { theme: 'primary' | 'secondary' href: string label: string - blankTarget?: string // boolean + blankTarget?: StringBoolean } export type ContainerMarkupData = { @@ -56,3 +58,7 @@ export type ContainerMarkupData = { justifyContent?: 'space-between' | 'normal' // default to 'space-between' } + +export type InstanceBannerMarkupData = { + revertHomePaddingTop?: StringBoolean // default to 'true' +} diff --git a/packages/models/src/server/about.model.ts b/packages/models/src/server/about.model.ts index 6d4ba63c4..903e3030c 100644 --- a/packages/models/src/server/about.model.ts +++ b/packages/models/src/server/about.model.ts @@ -1,3 +1,5 @@ +import { ActorImage } from '../index.js' + export interface About { instance: { name: string @@ -16,5 +18,7 @@ export interface About { languages: string[] categories: number[] + + banners: ActorImage[] } } diff --git a/packages/server-commands/src/server/config-command.ts b/packages/server-commands/src/server/config-command.ts index 88ae662c4..80f532df1 100644 --- a/packages/server-commands/src/server/config-command.ts +++ b/packages/server-commands/src/server/config-command.ts @@ -295,6 +295,42 @@ export class ConfigCommand extends AbstractCommand { }) } + // --------------------------------------------------------------------------- + + updateInstanceBanner (options: OverrideCommandOptions & { + fixture: string + }) { + const { fixture } = options + + const path = `/api/v1/config/instance-banner/pick` + + return this.updateImageRequest({ + ...options, + + path, + fixture, + fieldname: 'bannerfile', + + implicitToken: true, + defaultExpectedStatus: HttpStatusCode.NO_CONTENT_204 + }) + } + + deleteInstanceBanner (options: OverrideCommandOptions = {}) { + const path = `/api/v1/config/instance-banner` + + return this.deleteRequest({ + ...options, + + path, + + implicitToken: true, + defaultExpectedStatus: HttpStatusCode.NO_CONTENT_204 + }) + } + + // --------------------------------------------------------------------------- + getCustomConfig (options: OverrideCommandOptions = {}) { const path = '/api/v1/config/custom' diff --git a/packages/tests/src/api/check-params/config.ts b/packages/tests/src/api/check-params/config.ts index 7a2225eaa..b2fbd4c3e 100644 --- a/packages/tests/src/api/check-params/config.ts +++ b/packages/tests/src/api/check-params/config.ts @@ -8,9 +8,11 @@ import { makeDeleteRequest, makeGetRequest, makePutBodyRequest, + makeUploadRequest, PeerTubeServer, setAccessTokensToServers } from '@peertube/peertube-server-commands' +import { buildAbsoluteFixturePath } from '@peertube/peertube-node-utils' describe('Test config API validators', function () { const path = '/api/v1/config/custom' @@ -427,6 +429,82 @@ describe('Test config API validators', function () { }) }) + describe('Updating instance banner', function () { + const path = '/api/v1/config/instance-banner/pick' + + it('Should fail with an incorrect input file', async function () { + const attaches = { bannerfile: buildAbsoluteFixturePath('video_short.mp4') } + + await makeUploadRequest({ url: server.url, path, token: server.accessToken, fields: {}, attaches }) + }) + + it('Should fail with a big file', async function () { + const attaches = { bannerfile: buildAbsoluteFixturePath('avatar-big.png') } + + await makeUploadRequest({ + url: server.url, + path, + token: server.accessToken, + fields: {}, + attaches, + expectedStatus: HttpStatusCode.BAD_REQUEST_400 + }) + }) + + it('Should fail without token', async function () { + const attaches = { bannerfile: buildAbsoluteFixturePath('avatar.png') } + + await makeUploadRequest({ + url: server.url, + path, + fields: {}, + attaches, + expectedStatus: HttpStatusCode.UNAUTHORIZED_401 + }) + }) + + it('Should fail without the appropriate rights', async function () { + const attaches = { bannerfile: buildAbsoluteFixturePath('avatar.png') } + + await makeUploadRequest({ + url: server.url, + path, + token: userAccessToken, + fields: {}, + attaches, + expectedStatus: HttpStatusCode.FORBIDDEN_403 + }) + }) + + it('Should succeed with the correct params', async function () { + const attaches = { bannerfile: buildAbsoluteFixturePath('avatar.png') } + + await makeUploadRequest({ + url: server.url, + path, + token: server.accessToken, + fields: {}, + attaches, + expectedStatus: HttpStatusCode.NO_CONTENT_204 + }) + }) + }) + + describe('Deleting instance banner', function () { + + it('Should fail without token', async function () { + await server.config.deleteInstanceBanner({ token: null, expectedStatus: HttpStatusCode.UNAUTHORIZED_401 }) + }) + + it('Should fail without the appropriate rights', async function () { + await server.config.deleteInstanceBanner({ token: userAccessToken, expectedStatus: HttpStatusCode.FORBIDDEN_403 }) + }) + + it('Should succeed with the correct params', async function () { + await server.config.deleteInstanceBanner() + }) + }) + after(async function () { await cleanupTests([ server ]) }) diff --git a/packages/tests/src/api/server/config.ts b/packages/tests/src/api/server/config.ts index c96804751..71694b396 100644 --- a/packages/tests/src/api/server/config.ts +++ b/packages/tests/src/api/server/config.ts @@ -11,6 +11,8 @@ import { PeerTubeServer, setAccessTokensToServers } from '@peertube/peertube-server-commands' +import { testFileExistsOrNot, testImage } from '@tests/shared/checks.js' +import { basename } from 'path' function checkInitialConfig (server: PeerTubeServer, data: CustomConfig) { expect(data.instance.name).to.equal('PeerTube') @@ -496,7 +498,8 @@ describe('Test static config', function () { }) describe('Test config', function () { - let server: PeerTubeServer = null + let server: PeerTubeServer + let bannerPath: string before(async function () { this.timeout(30000) @@ -595,23 +598,47 @@ describe('Test config', function () { }) it('Should fetch the about information', async function () { - const data = await server.config.getAbout() + const { instance } = await server.config.getAbout() - expect(data.instance.name).to.equal('PeerTube updated') - expect(data.instance.shortDescription).to.equal('my short description') - expect(data.instance.description).to.equal('my super description') - expect(data.instance.terms).to.equal('my super terms') - expect(data.instance.codeOfConduct).to.equal('my super coc') + expect(instance.name).to.equal('PeerTube updated') + expect(instance.shortDescription).to.equal('my short description') + expect(instance.description).to.equal('my super description') + expect(instance.terms).to.equal('my super terms') + expect(instance.codeOfConduct).to.equal('my super coc') - expect(data.instance.creationReason).to.equal('my super creation reason') - expect(data.instance.moderationInformation).to.equal('my super moderation information') - expect(data.instance.administrator).to.equal('Kuja') - expect(data.instance.maintenanceLifetime).to.equal('forever') - expect(data.instance.businessModel).to.equal('my super business model') - expect(data.instance.hardwareInformation).to.equal('2vCore 3GB RAM') + expect(instance.creationReason).to.equal('my super creation reason') + expect(instance.moderationInformation).to.equal('my super moderation information') + expect(instance.administrator).to.equal('Kuja') + expect(instance.maintenanceLifetime).to.equal('forever') + expect(instance.businessModel).to.equal('my super business model') + expect(instance.hardwareInformation).to.equal('2vCore 3GB RAM') - expect(data.instance.languages).to.deep.equal([ 'en', 'es' ]) - expect(data.instance.categories).to.deep.equal([ 1, 2 ]) + expect(instance.languages).to.deep.equal([ 'en', 'es' ]) + expect(instance.categories).to.deep.equal([ 1, 2 ]) + + expect(instance.banners).to.have.lengthOf(0) + }) + + it('Should update instance banner', async function () { + await server.config.updateInstanceBanner({ fixture: 'banner.jpg' }) + + const { instance } = await server.config.getAbout() + + expect(instance.banners).to.have.lengthOf(1) + + bannerPath = instance.banners[0].path + await testImage(server.url, 'banner-resized', bannerPath) + await testFileExistsOrNot(server, 'avatars', basename(bannerPath), true) + }) + + it('Should remove instance banner', async function () { + await server.config.deleteInstanceBanner() + + const { instance } = await server.config.getAbout() + + expect(instance.banners).to.have.lengthOf(0) + + await testFileExistsOrNot(server, 'avatars', basename(bannerPath), false) }) it('Should remove the custom configuration', async function () { diff --git a/server/core/controllers/api/config.ts b/server/core/controllers/api/config.ts index fa6553597..86cd8d35e 100644 --- a/server/core/controllers/api/config.ts +++ b/server/core/controllers/api/config.ts @@ -3,13 +3,25 @@ import { remove, writeJSON } from 'fs-extra/esm' import snakeCase from 'lodash-es/snakeCase.js' import validator from 'validator' import { ServerConfigManager } from '@server/lib/server-config-manager.js' -import { About, CustomConfig, UserRight } from '@peertube/peertube-models' +import { About, ActorImageType, CustomConfig, HttpStatusCode, UserRight } from '@peertube/peertube-models' import { auditLoggerFactory, CustomConfigAuditView, getAuditIdFromRes } from '../../helpers/audit-logger.js' import { objectConverter } from '../../helpers/core-utils.js' import { CONFIG, reloadConfig } from '../../initializers/config.js' import { ClientHtml } from '../../lib/html/client-html.js' -import { apiRateLimiter, asyncMiddleware, authenticate, ensureUserHasRight, openapiOperationDoc } from '../../middlewares/index.js' +import { + apiRateLimiter, + asyncMiddleware, + authenticate, + ensureUserHasRight, + openapiOperationDoc, + updateBannerValidator +} from '../../middlewares/index.js' import { customConfigUpdateValidator, ensureConfigIsEditable } from '../../middlewares/validators/config.js' +import { createReqFiles } from '@server/helpers/express-utils.js' +import { MIMETYPES } from '@server/initializers/constants.js' +import { deleteLocalActorImageFile, updateLocalActorImageFiles } from '@server/lib/local-actor.js' +import { getServerActor } from '@server/models/application/application.js' +import { ActorImageModel } from '@server/models/actor/actor-image.js' const configRouter = express.Router() @@ -24,7 +36,7 @@ configRouter.get('/', configRouter.get('/about', openapiOperationDoc({ operationId: 'getAbout' }), - getAbout + asyncMiddleware(getAbout) ) configRouter.get('/custom', @@ -51,13 +63,31 @@ configRouter.delete('/custom', asyncMiddleware(deleteCustomConfig) ) +configRouter.post('/instance-banner/pick', + authenticate, + createReqFiles([ 'bannerfile' ], MIMETYPES.IMAGE.MIMETYPE_EXT), + ensureUserHasRight(UserRight.MANAGE_CONFIGURATION), + updateBannerValidator, + asyncMiddleware(updateInstanceBanner) +) + +configRouter.delete('/instance-banner', + authenticate, + ensureUserHasRight(UserRight.MANAGE_CONFIGURATION), + asyncMiddleware(deleteInstanceBanner) +) + +// --------------------------------------------------------------------------- + async function getConfig (req: express.Request, res: express.Response) { const json = await ServerConfigManager.Instance.getServerConfig(req.ip) return res.json(json) } -function getAbout (req: express.Request, res: express.Response) { +async function getAbout (req: express.Request, res: express.Response) { + const banners = await ActorImageModel.listByActor(await getServerActor(), ActorImageType.BANNER) + const about: About = { instance: { name: CONFIG.INSTANCE.NAME, @@ -75,7 +105,9 @@ function getAbout (req: express.Request, res: express.Response) { businessModel: CONFIG.INSTANCE.BUSINESS_MODEL, languages: CONFIG.INSTANCE.LANGUAGES, - categories: CONFIG.INSTANCE.CATEGORIES + categories: CONFIG.INSTANCE.CATEGORIES, + + banners: banners.map(b => b.toFormattedJSON()) } } @@ -123,6 +155,23 @@ async function updateCustomConfig (req: express.Request, res: express.Response) return res.json(data) } +async function updateInstanceBanner (req: express.Request, res: express.Response) { + const bannerPhysicalFile = req.files['bannerfile'][0] + + const accountServer = (await getServerActor()).Account + await updateLocalActorImageFiles(accountServer, bannerPhysicalFile, ActorImageType.BANNER) + + return res.sendStatus(HttpStatusCode.NO_CONTENT_204) +} + +async function deleteInstanceBanner (req: express.Request, res: express.Response) { + const accountServer = (await getServerActor()).Account + + await deleteLocalActorImageFile(accountServer, ActorImageType.BANNER) + + return res.sendStatus(HttpStatusCode.NO_CONTENT_204) +} + // --------------------------------------------------------------------------- export { diff --git a/server/core/middlewares/validators/actor-image.ts b/server/core/middlewares/validators/actor-image.ts index 807d73c52..4d742e544 100644 --- a/server/core/middlewares/validators/actor-image.ts +++ b/server/core/middlewares/validators/actor-image.ts @@ -18,10 +18,5 @@ const updateActorImageValidatorFactory = (fieldname: string) => ([ } ]) -const updateAvatarValidator = updateActorImageValidatorFactory('avatarfile') -const updateBannerValidator = updateActorImageValidatorFactory('bannerfile') - -export { - updateAvatarValidator, - updateBannerValidator -} +export const updateAvatarValidator = updateActorImageValidatorFactory('avatarfile') +export const updateBannerValidator = updateActorImageValidatorFactory('bannerfile') diff --git a/server/core/models/actor/actor-image.ts b/server/core/models/actor/actor-image.ts index 727e89f04..96a9b9bdc 100644 --- a/server/core/models/actor/actor-image.ts +++ b/server/core/models/actor/actor-image.ts @@ -1,7 +1,7 @@ import { ActivityIconObject, ActorImage, ActorImageType, type ActorImageType_Type } from '@peertube/peertube-models' import { getLowercaseExtension } from '@peertube/peertube-node-utils' import { AttributesOnly } from '@peertube/peertube-typescript-utils' -import { MActorImage, MActorImageFormattable } from '@server/types/models/index.js' +import { MActorId, MActorImage, MActorImageFormattable } from '@server/types/models/index.js' import { remove } from 'fs-extra/esm' import { join } from 'path' import { @@ -115,6 +115,17 @@ export class ActorImageModel extends Model