aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos
diff options
context:
space:
mode:
authorkontrollanten <6680299+kontrollanten@users.noreply.github.com>2022-02-28 08:34:43 +0100
committerGitHub <noreply@github.com>2022-02-28 08:34:43 +0100
commitd0800f7661f13fabe7bb6f4aa0ea50764f106405 (patch)
treed43e6b0b6f4a5a32e03487e6464edbcaf288be2a /client/src/app/+videos
parent5cad2ca9db9b9d138f8a33058d10b94a9fd50c69 (diff)
downloadPeerTube-d0800f7661f13fabe7bb6f4aa0ea50764f106405.tar.gz
PeerTube-d0800f7661f13fabe7bb6f4aa0ea50764f106405.tar.zst
PeerTube-d0800f7661f13fabe7bb6f4aa0ea50764f106405.zip
Implement avatar miniatures (#4639)
* client: remove unused file * refactor(client/my-actor-avatar): size from input Read size from component input instead of scss, to make it possible to use smaller avatar images when implemented. * implement avatar miniatures close #4560 * fix(test): max file size * fix(search-index): normalize res acc to avatarMini * refactor avatars to an array * client/search: resize channel avatar to 120 * refactor(client/videos): remove unused function * client(actor-avatar): set default size * fix tests and avatars full result When findOne is used only an array containting one avatar is returned. * update migration version and version notations * server/search: harmonize normalizing * Cleanup avatar miniature PR Co-authored-by: Chocobozzz <me@florianbigard.com>
Diffstat (limited to 'client/src/app/+videos')
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-send.ts4
-rw-r--r--client/src/app/+videos/+video-edit/video-update.resolver.ts4
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss9
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html6
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss9
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts4
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.html2
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss1
9 files changed, 9 insertions, 32 deletions
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index 3d0e1bf2a..9de373cd3 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -2,7 +2,7 @@ import { catchError, switchMap, tap } from 'rxjs/operators'
2import { SelectChannelItem } from 'src/types/select-options-item.model' 2import { SelectChannelItem } from 'src/types/select-options-item.model'
3import { Directive, EventEmitter, OnInit } from '@angular/core' 3import { Directive, EventEmitter, OnInit } from '@angular/core'
4import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core' 4import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
5import { listUserChannels } from '@app/helpers' 5import { listUserChannelsForSelect } from '@app/helpers'
6import { FormReactive } from '@app/shared/shared-forms' 6import { FormReactive } from '@app/shared/shared-forms'
7import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main' 7import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
8import { LoadingBarService } from '@ngx-loading-bar/core' 8import { LoadingBarService } from '@ngx-loading-bar/core'
@@ -38,7 +38,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
38 ngOnInit () { 38 ngOnInit () {
39 this.buildForm({}) 39 this.buildForm({})
40 40
41 listUserChannels(this.authService) 41 listUserChannelsForSelect(this.authService)
42 .subscribe(channels => { 42 .subscribe(channels => {
43 this.userVideoChannels = channels 43 this.userVideoChannels = channels
44 this.firstStepChannelId = this.userVideoChannels[0].id 44 this.firstStepChannelId = this.userVideoChannels[0].id
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 91e76b7fe..82dae5c1c 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -3,7 +3,7 @@ import { map, switchMap } from 'rxjs/operators'
3import { Injectable } from '@angular/core' 3import { Injectable } from '@angular/core'
4import { ActivatedRouteSnapshot, Resolve } from '@angular/router' 4import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
5import { AuthService } from '@app/core' 5import { AuthService } from '@app/core'
6import { listUserChannels } from '@app/helpers' 6import { listUserChannelsForSelect } from '@app/helpers'
7import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' 7import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
8import { LiveVideoService } from '@app/shared/shared-video-live' 8import { LiveVideoService } from '@app/shared/shared-video-live'
9 9
@@ -33,7 +33,7 @@ export class VideoUpdateResolver implements Resolve<any> {
33 .loadCompleteDescription(video.descriptionPath) 33 .loadCompleteDescription(video.descriptionPath)
34 .pipe(map(description => Object.assign(video, { description }))), 34 .pipe(map(description => Object.assign(video, { description }))),
35 35
36 listUserChannels(this.authService), 36 listUserChannelsForSelect(this.authService),
37 37
38 this.videoCaptionService 38 this.videoCaptionService
39 .listCaptions(video.id) 39 .listCaptions(video.id)
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index d0e9bcd29..5014b9692 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -1,6 +1,6 @@
1<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }"> 1<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
2 <div class="left"> 2 <div class="left">
3 <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar> 3 <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account" [size]="isChild() ? '25' : '36'"></my-actor-avatar>
4 <div class="vertical-border"></div> 4 <div class="vertical-border"></div>
5 </div> 5 </div>
6 6
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 87e313d41..54f828014 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -25,10 +25,6 @@
25 } 25 }
26} 26}
27 27
28my-actor-avatar {
29 @include actor-avatar-size(36px);
30}
31
32.comment { 28.comment {
33 flex-grow: 1; 29 flex-grow: 1;
34 // Fix word-wrap with flex 30 // Fix word-wrap with flex
@@ -160,11 +156,6 @@ my-video-comment-add {
160} 156}
161 157
162.is-child { 158.is-child {
163 // Reduce avatars size for replies
164 my-actor-avatar {
165 @include actor-avatar-size(25px);
166 }
167
168 .left { 159 .left {
169 @include margin-right(6px); 160 @include margin-right(6px);
170 } 161 }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
index d433c7aba..a23152b67 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
@@ -2,19 +2,19 @@
2 <my-actor-avatar 2 <my-actor-avatar
3 *ngIf="showChannel" 3 *ngIf="showChannel"
4 class="channel" 4 class="channel"
5 [class.main-avatar]="showChannel"
6 [channel]="video.channel" 5 [channel]="video.channel"
7 [internalHref]="[ '/c', video.byVideoChannel ]" 6 [internalHref]="[ '/c', video.byVideoChannel ]"
8 [title]="channelLinkTitle" 7 [title]="channelLinkTitle"
8 size="35"
9 ></my-actor-avatar> 9 ></my-actor-avatar>
10 10
11 <my-actor-avatar 11 <my-actor-avatar
12 *ngIf="showAccount" 12 *ngIf="showAccount"
13 class="account" 13 class="account"
14 [class.main-avatar]="!showChannel"
15 [class.second-avatar]="showChannel" 14 [class.second-avatar]="showChannel"
16 [account]="video.account" 15 [account]="video.account"
17 [internalHref]="[ '/a', video.byAccount ]" 16 [internalHref]="[ '/a', video.byAccount ]"
18 [title]="accountLinkTitle"> 17 [title]="accountLinkTitle"
18 size="35">
19 </my-actor-avatar> 19 </my-actor-avatar>
20</div> 20</div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
index 71c5e4b5a..80711ff32 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
@@ -1,9 +1,5 @@
1@use '_mixins' as *; 1@use '_mixins' as *;
2 2
3@mixin main {
4 @include actor-avatar-size(35px);
5}
6
7@mixin secondary { 3@mixin secondary {
8 height: 60%; 4 height: 60%;
9 width: 60%; 5 width: 60%;
@@ -14,16 +10,11 @@
14} 10}
15 11
16.wrapper { 12.wrapper {
17 @include actor-avatar-size(35px);
18 @include margin-right(5px); 13 @include margin-right(5px);
19 14
20 position: relative; 15 position: relative;
21 margin-bottom: 5px; 16 margin-bottom: 5px;
22 17
23 .main-avatar {
24 @include main();
25 }
26
27 .second-avatar { 18 .second-avatar {
28 @include secondary(); 19 @include secondary();
29 } 20 }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
index 146c440b3..4bfc7bd9d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
@@ -20,8 +20,4 @@ export class VideoAvatarChannelComponent implements OnInit {
20 this.channelLinkTitle = $localize`${this.video.account.name} (channel page)` 20 this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
21 this.accountLinkTitle = $localize`${this.video.byAccount} (account page)` 21 this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
22 } 22 }
23
24 isChannelAvatarNull () {
25 return this.video.channel.avatar === null
26 }
27} 23}
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index 1a715560c..f250c2407 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -33,7 +33,7 @@
33 <div class="section channel videos" *ngFor="let object of overview.channels"> 33 <div class="section channel videos" *ngFor="let object of overview.channels">
34 <div class="section-title"> 34 <div class="section-title">
35 <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]"> 35 <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
36 <my-actor-avatar [channel]="buildVideoChannel(object)"></my-actor-avatar> 36 <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
37 37
38 <h2 class="section-title">{{ object.channel.displayName }}</h2> 38 <h2 class="section-title">{{ object.channel.displayName }}</h2>
39 </a> 39 </a>
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 2239d1913..8b2aa88f2 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
@@ -52,7 +52,6 @@
52 align-items: center; 52 align-items: center;
53 53
54 my-actor-avatar { 54 my-actor-avatar {
55 @include actor-avatar-size(28px);
56 @include margin-right(8px); 55 @include margin-right(8px);
57 56
58 font-size: initial; 57 font-size: initial;