From 68773f79face7d26c5109f7b31e04d5932c9d204 Mon Sep 17 00:00:00 2001 From: Wicklow <123956049+wickloww@users.noreply.github.com> Date: Tue, 7 Mar 2023 09:18:08 +0000 Subject: Hotfix/channel avatars overview (#5667) * Fix channel avatar display * Improve video overview component style * Better alignment of avatar and title * Convert in rem video overview component --- .../video-list/overview/video-overview.component.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss index 5a789b66d..b1b42b517 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.scss +++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss @@ -21,9 +21,9 @@ } .section-title { - font-size: 24px; - padding-top: 20px; - margin-bottom: 30px; + @include font-size(1.5rem); + @include padding-top(1.25rem); + @include margin-bottom(2rem); &:not(h2) { border-top: 1px solid $separator-border-color; @@ -38,8 +38,8 @@ my-actor-avatar { @include margin-right(8px); - position: relative; - top: -2px; + display: inline-block; + vertical-align: text-top; } } @@ -49,8 +49,6 @@ .section-title { @include margin-left(10px); - - font-size: 17px; } } } -- cgit v1.2.3 From 464e4ed92c119c8f5d8ae561ad1d27a90d2581a0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 6 Mar 2023 11:21:52 +0100 Subject: Fix button height --- client/src/sass/include/_mixins.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e41fe9389..0f301dab2 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -155,6 +155,7 @@ @mixin orange-button-inverted { @include button-focus(pvar(--mainColorLightest)); + padding: 2px 13px; border: 2px solid pvar(--mainColor); font-weight: $font-semibold; @@ -263,6 +264,7 @@ cursor: pointer; font-size: $button-font-size; + line-height: $button-font-size + math.round(math.div($button-font-size, 2)); my-global-icon + * { @include margin-right(4px); @@ -312,6 +314,10 @@ width: $width; top: $top; } + + span { + vertical-align: middle; + } } @mixin peertube-file { -- cgit v1.2.3 From 9e401fde36bdcb4b5e8dc54262c01f1e660d81a8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 6 Mar 2023 11:39:23 +0100 Subject: Refactor my actor avatar edit --- .../video-channel-update.component.ts | 7 ++++ .../my-account-settings.component.ts | 9 ++++- .../actor-avatar-edit.component.html | 46 ++++++++++------------ .../actor-avatar-edit.component.scss | 23 +++++------ .../actor-avatar-edit.component.ts | 3 -- .../actor-banner-edit.component.html | 33 ++++++++-------- .../actor-banner-edit.component.scss | 18 ++++++++- .../shared-actor-image-edit/actor-image-edit.scss | 16 +------- .../shared-actor-image/actor-avatar.component.ts | 7 ++-- client/src/sass/bootstrap.scss | 2 +- shared/core-utils/common/object.ts | 5 +++ 11 files changed, 91 insertions(+), 78 deletions(-) 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 index 32f6d650d..3326a1505 100644 --- 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 @@ -13,6 +13,7 @@ import { FormReactiveService } from '@app/shared/shared-forms' import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' import { HTMLServerConfig, VideoChannelUpdate } from '@shared/models' import { VideoChannelEdit } from './video-channel-edit' +import { shallowCopy } from '@shared/core-utils' @Component({ selector: 'my-video-channel-update', @@ -118,6 +119,9 @@ export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnI this.notifier.success($localize`Avatar changed.`) this.videoChannel.updateAvatar(data.avatars) + + // So my-actor-avatar component detects changes + this.videoChannel = shallowCopy(this.videoChannel) }, error: (err: HttpErrorResponse) => genericUploadErrorHandler({ @@ -135,6 +139,9 @@ export class VideoChannelUpdateComponent extends VideoChannelEdit implements OnI this.notifier.success($localize`Avatar deleted.`) this.videoChannel.resetAvatar() + + // So my-actor-avatar component detects changes + this.videoChannel = shallowCopy(this.videoChannel) }, error: err => this.notifier.error(err.message) diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts index 577f4a252..a276bb126 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts @@ -3,6 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http' import { AfterViewChecked, Component, OnInit } from '@angular/core' import { AuthService, Notifier, User, UserService } from '@app/core' import { genericUploadErrorHandler } from '@app/helpers' +import { shallowCopy } from '@shared/core-utils' @Component({ selector: 'my-account-settings', @@ -44,6 +45,9 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked { this.notifier.success($localize`Avatar changed.`) this.user.updateAccountAvatar(data.avatars) + + // So my-actor-avatar component detects changes + this.user.account = shallowCopy(this.user.account) }, error: (err: HttpErrorResponse) => genericUploadErrorHandler({ @@ -57,10 +61,13 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked { onAvatarDelete () { this.userService.deleteAvatar() .subscribe({ - next: data => { + next: () => { this.notifier.success($localize`Avatar deleted.`) this.user.updateAccountAvatar() + + // So my-actor-avatar component detects changes + this.user.account = shallowCopy(this.user.account) }, error: (err: HttpErrorResponse) => this.notifier.error(err.message) diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html index 6459c5ffe..a0f65a3d9 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html @@ -1,23 +1,32 @@
-
+
-
- -
- - - -
+
+ + + +
-
+
+
+
+
+ + Upload a new avatar + +
+ +
+ + Remove avatar +
+
+
@@ -27,16 +36,3 @@
{{ actor.followersCount }} subscribers
- - -
- - Upload a new avatar - -
- -
- - Remove avatar -
- diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss index fd8cd7ffc..01e2131ba 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss @@ -5,10 +5,6 @@ display: flex; } -my-actor-avatar { - @include margin-right(15px); -} - .actor-info { display: inline-flex; flex-direction: column; @@ -16,12 +12,12 @@ my-actor-avatar { .actor-info-display-name { @include peertube-word-wrap; + @include font-size(1.25rem); - font-size: 20px; font-weight: $font-bold; @media screen and (max-width: $small-view) { - font-size: 16px; + @include font-size(18px); } } @@ -35,17 +31,18 @@ my-actor-avatar { padding-bottom: .5rem; } -.actor-img-edit-container { - position: relative; - width: 0; -} - .actor-img-edit-button { - top: 55px; - right: 45px; border-radius: 50%; + + position: absolute; + bottom: 5px; + right: 5px; } .dropdown-item { @include dropdown-with-icon-item; } + +.dropdown-toggle::after { + display: none; +} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts index b71a3c485..fc925083e 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts @@ -1,7 +1,6 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { Notifier, ServerService } from '@app/core' import { Account, 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' @@ -15,7 +14,6 @@ import { imageToDataURL } from '@root-helpers/images' }) export class ActorAvatarEditComponent implements OnInit { @ViewChild('avatarfileInput') avatarfileInput: ElementRef - @ViewChild('avatarPopover') avatarPopover: NgbPopover @Input() actor: VideoChannel | Account @Input() editable = true @@ -58,7 +56,6 @@ export class ActorAvatarEditComponent implements OnInit { const formData = new FormData() formData.append('avatarfile', avatarfile) - this.avatarPopover?.close() this.avatarChange.emit(formData) if (this.previewImage) { 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 f675371d9..d6fe37094 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 @@ -8,26 +8,25 @@
-
- - -
-
- +
+
+ + +
- -
- -
+
+
+ +
-
- - Remove banner +
+ + Remove banner +
+
+
- + diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss index ec2de2528..b2c64fff7 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss @@ -16,12 +16,28 @@ align-items: center; } -.actor-img-edit-button { +.dropdown { position: absolute; + + > .actor-img-edit-button { + position: relative; + } +} + +.actor-img-edit-button { width: auto; + position: absolute; label { font-weight: $font-semibold; margin-bottom: 0; } } + +.dropdown-item { + @include dropdown-with-icon-item; +} + +.dropdown-toggle::after { + display: none; +} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss index b054086e4..9e4ff2654 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss @@ -1,18 +1,8 @@ @use '_variables' as *; @use '_mixins' as *; -.actor ::ng-deep .popover-image-info .popover-body { - padding: 0; - - .dropdown-item { - padding: 6px 10px; - border-radius: 4px; - - &:first-child { - @include peertube-file; - display: block; - } - } +.dropdown-file { + @include peertube-file; } .actor-img-edit-button { @@ -22,8 +12,6 @@ display: flex; justify-content: center; - margin-top: 10px; - margin-bottom: 5px; cursor: pointer; input { diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts index 6036123f9..a52e68a17 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts @@ -50,15 +50,15 @@ export class ActorAvatarComponent implements OnInit, OnChanges { ngOnInit () { this.buildDefaultAvatarUrl() - this.buildClasses() this.buildAlt() this.buildAvatarUrl() + this.buildClasses() } ngOnChanges () { - this.buildClasses() this.buildAlt() this.buildAvatarUrl() + this.buildClasses() } private buildClasses () { @@ -114,12 +114,13 @@ export class ActorAvatarComponent implements OnInit, OnChanges { displayImage () { if (this.actorType === 'unlogged') return true + if (this.previewImage) return true return !!(this.actor && this.avatarUrl) } displayActorInitial () { - return this.actor && !this.avatarUrl + return !this.displayImage() && this.actor && !this.avatarUrl } displayPlaceholder () { diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 3b847c75b..4d956d652 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -30,7 +30,7 @@ @import 'bootstrap/scss/helpers'; @import 'bootstrap/scss/utilities/api'; -:root { +body { --bs-border-color-translucent: #{pvar(--inputBorderColor)}; } diff --git a/shared/core-utils/common/object.ts b/shared/core-utils/common/object.ts index 2330c9403..7f1f147f4 100644 --- a/shared/core-utils/common/object.ts +++ b/shared/core-utils/common/object.ts @@ -41,9 +41,14 @@ function sortObjectComparator (key: string, order: 'asc' | 'desc') { } } +function shallowCopy (o: T): T { + return Object.assign(Object.create(Object.getPrototypeOf(o)), o) +} + export { pick, omit, getKeys, + shallowCopy, sortObjectComparator } -- cgit v1.2.3 From 16b7ad790b7f10ddb99b08cc1345804cf27ae329 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 6 Mar 2023 14:40:39 +0100 Subject: Fix update user password confirm message --- .../app/+admin/overview/users/user-edit/user-edit.component.html | 2 +- .../app/+admin/overview/users/user-edit/user-password.component.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html index ecbcfe72f..278bd8c48 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html @@ -224,7 +224,7 @@
- +
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.ts b/client/src/app/+admin/overview/users/user-edit/user-password.component.ts index d6616e077..ec93619f5 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-password.component.ts +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.ts @@ -11,12 +11,12 @@ import { UserUpdate } from '@shared/models' styleUrls: [ './user-password.component.scss' ] }) export class UserPasswordComponent extends FormReactive implements OnInit { + @Input() userId: number + @Input() username: string + error: string - username: string showPassword = false - @Input() userId: number - constructor ( protected formReactiveService: FormReactiveService, private notifier: Notifier, -- cgit v1.2.3 From f2dbbf6a969d33464aa9024517c7a2c4a4f35e75 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 6 Mar 2023 14:49:11 +0100 Subject: Don't take db lives into account for video quota --- server/models/user/user.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/models/user/user.ts b/server/models/user/user.ts index bfc9b3049..b6b120c92 100644 --- a/server/models/user/user.ts +++ b/server/models/user/user.ts @@ -781,12 +781,12 @@ export class UserModel extends Model>> { `WHERE "account"."userId" = ${options.whereUserId} ${andWhere}` const webtorrentFiles = 'SELECT "videoFile"."size" AS "size", "video"."id" AS "videoId" FROM "videoFile" ' + - 'INNER JOIN "video" ON "videoFile"."videoId" = "video"."id" ' + + 'INNER JOIN "video" ON "videoFile"."videoId" = "video"."id" AND "video"."isLive" IS FALSE ' + videoChannelJoin const hlsFiles = 'SELECT "videoFile"."size" AS "size", "video"."id" AS "videoId" FROM "videoFile" ' + 'INNER JOIN "videoStreamingPlaylist" ON "videoFile"."videoStreamingPlaylistId" = "videoStreamingPlaylist".id ' + - 'INNER JOIN "video" ON "videoStreamingPlaylist"."videoId" = "video"."id" ' + + 'INNER JOIN "video" ON "videoStreamingPlaylist"."videoId" = "video"."id" AND "video"."isLive" IS FALSE ' + videoChannelJoin return 'SELECT COALESCE(SUM("size"), 0) AS "total" ' + -- cgit v1.2.3 From b52f50484878b17a1f3446083b9c1fcaebdc1b59 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 6 Mar 2023 15:20:12 +0100 Subject: Add test to ensure files are deleted --- server/tests/cli/create-move-video-storage-job.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/server/tests/cli/create-move-video-storage-job.ts b/server/tests/cli/create-move-video-storage-job.ts index c357f501b..4927e0309 100644 --- a/server/tests/cli/create-move-video-storage-job.ts +++ b/server/tests/cli/create-move-video-storage-job.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-unused-expressions,@typescript-eslint/require-await */ +import { join } from 'path' import { areMockObjectStorageTestsDisabled } from '@shared/core-utils' import { HttpStatusCode, VideoDetails } from '@shared/models' import { @@ -12,7 +13,7 @@ import { setAccessTokensToServers, waitJobs } from '@shared/server-commands' -import { expectStartWith } from '../shared' +import { checkDirectoryIsEmpty, expectStartWith } from '../shared' async function checkFiles (origin: PeerTubeServer, video: VideoDetails, inObjectStorage: boolean) { for (const file of video.files) { @@ -106,6 +107,14 @@ describe('Test create move video storage job', function () { } }) + it('Should not have files on disk anymore', async function () { + await checkDirectoryIsEmpty(servers[0], 'videos', [ 'private' ]) + await checkDirectoryIsEmpty(servers[0], join('videos', 'private')) + + await checkDirectoryIsEmpty(servers[0], join('streaming-playlists', 'hls'), [ 'private' ]) + await checkDirectoryIsEmpty(servers[0], join('streaming-playlists', 'hls', 'private')) + }) + after(async function () { await cleanupTests(servers) }) -- cgit v1.2.3 From 145d7da2dea7234b0be0212a998d27efea4f1320 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 6 Mar 2023 16:16:43 +0100 Subject: Don't display alt for actor images We don't need it since it's just a "cosmetic" image --- .../app/shared/shared-actor-image/actor-avatar.component.html | 2 +- .../src/app/shared/shared-actor-image/actor-avatar.component.ts | 9 --------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html index fb9efc20a..011afef27 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html @@ -1,5 +1,5 @@ - +
{{ getActorInitial() }} diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts index a52e68a17..8e6ad4015 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts @@ -43,20 +43,17 @@ export class ActorAvatarComponent implements OnInit, OnChanges { } classes: string[] = [] - alt: string defaultAvatarUrl: string avatarUrl: string ngOnInit () { this.buildDefaultAvatarUrl() - this.buildAlt() this.buildAvatarUrl() this.buildClasses() } ngOnChanges () { - this.buildAlt() this.buildAvatarUrl() this.buildClasses() } @@ -81,12 +78,6 @@ export class ActorAvatarComponent implements OnInit, OnChanges { } } - private buildAlt () { - if (this.isAccount()) this.alt = $localize`Account avatar` - else if (this.isChannel()) this.alt = $localize`Channel avatar` - else this.alt = '' - } - private buildDefaultAvatarUrl () { this.defaultAvatarUrl = this.isChannel() ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber()) -- cgit v1.2.3 From aa8478f374b375167f048bbf6703a02b0b5a89df Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 7 Mar 2023 10:29:53 +0100 Subject: Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6b0f9c97..84f9c0aae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### IMPORTANT NOTES + * If your instance has signup enabled, user registration approval is automatically enabled by the default configuration of this release. You can change this setting in your `production.yaml` or in the configuration page in the web admin * Update [web browsers support list](https://joinpeertube.org/faq#what-web-browsers-are-supported-by-peertube): * Drop support of Safari 11 on iOS * Drop support of Safari 11 on desktop -- cgit v1.2.3 From a3e5f7e732cca41267314d64307bdcfebd12e7de Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 7 Mar 2023 10:32:43 +0100 Subject: Add missing docker env for object storage config --- .../docker/production/config/custom-environment-variables.yaml | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/support/docker/production/config/custom-environment-variables.yaml b/support/docker/production/config/custom-environment-variables.yaml index 1d889fe7d..10432e6a0 100644 --- a/support/docker/production/config/custom-environment-variables.yaml +++ b/support/docker/production/config/custom-environment-variables.yaml @@ -57,6 +57,15 @@ object_storage: region: "PEERTUBE_OBJECT_STORAGE_REGION" + upload_acl: + public: "PEERTUBE_OBJECT_STORAGE_UPLOAD_ACL_PUBLIC" + private: "PEERTUBE_OBJECT_STORAGE_UPLOAD_ACL_PRIVATE" + + proxy: + proxify_private_files: + __name: "PEERTUBE_OBJECT_STORAGE_PROXY_PROXIFY_PRIVATE_FILES" + __format: "json" + credentials: access_key_id: "PEERTUBE_OBJECT_STORAGE_CREDENTIALS_ACCESS_KEY_ID" secret_access_key: 'PEERTUBE_OBJECT_STORAGE_CREDENTIALS_SECRET_ACCESS_KEY' -- cgit v1.2.3