aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+search
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 11:49:34 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 11:49:34 +0200
commit746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch)
tree7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/app/+search
parentec489ce2f74570f94dffb62266f4ed6f18621b3e (diff)
downloadPeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.gz
PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.zst
PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.zip
Refactor actor avatar display
Diffstat (limited to 'client/src/app/+search')
-rw-r--r--client/src/app/+search/search.component.html11
-rw-r--r--client/src/app/+search/search.component.scss18
-rw-r--r--client/src/app/+search/search.component.ts26
-rw-r--r--client/src/app/+search/search.module.ts2
4 files changed, 31 insertions, 26 deletions
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 65d4b6ecd..130be75fc 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -33,20 +33,15 @@
33 33
34 <ng-container *ngFor="let result of results"> 34 <ng-container *ngFor="let result of results">
35 <div *ngIf="isVideoChannel(result)" class="entry video-channel"> 35 <div *ngIf="isVideoChannel(result)" class="entry video-channel">
36 <a class="link-avatar" *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
37 <img [src]="result.avatarUrl" alt="Avatar" />
38 </a>
39 36
40 <a class="link-avatar" *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank"> 37 <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)"></my-actor-avatar>
41 <img [src]="result.avatarUrl" alt="Avatar" />
42 </a>
43 38
44 <div class="video-channel-info"> 39 <div class="video-channel-info">
45 <a *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)" class="video-channel-names"> 40 <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
46 <ng-container *ngTemplateOutlet="aContent"></ng-container> 41 <ng-container *ngTemplateOutlet="aContent"></ng-container>
47 </a> 42 </a>
48 43
49 <a *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank" class="video-channel-names"> 44 <a *ngIf="isExternalChannelUrl()" [href]="getExternalChannelUrl(result)" target="_blank" class="video-channel-names">
50 <ng-container *ngTemplateOutlet="aContent"></ng-container> 45 <ng-container *ngTemplateOutlet="aContent"></ng-container>
51 </a> 46 </a>
52 47
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 91c8272d7..a8002ba88 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -5,7 +5,7 @@
5 $image-size: min(130px, $video-img-width); 5 $image-size: min(130px, $video-img-width);
6 $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature 6 $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
7 7
8 @include channel-avatar($image-size); 8 @include actor-avatar-size($image-size);
9 9
10 margin: 0 $margin-size 0 $margin-size; 10 margin: 0 $margin-size 0 $margin-size;
11} 11}
@@ -53,10 +53,8 @@
53 max-width: 800px; 53 max-width: 800px;
54} 54}
55 55
56.video-channel { 56.video-channel my-actor-avatar {
57 img { 57 @include build-channel-img-size($video-thumbnail-width);
58 @include build-channel-img-size($video-thumbnail-width);
59 }
60} 58}
61 59
62.video-channel-info { 60.video-channel-info {
@@ -92,14 +90,12 @@
92 grid-template-columns: auto 1fr; 90 grid-template-columns: auto 1fr;
93 grid-template-rows: auto auto; 91 grid-template-rows: auto auto;
94 92
95 .link-avatar { 93 my-actor-avatar {
94 @include build-channel-img-size($video-thumbnail-medium-width);
95
96 grid-column: 1; 96 grid-column: 1;
97 grid-row: 1 / -1; 97 grid-row: 1 / -1;
98 } 98 }
99
100 img {
101 @include build-channel-img-size($video-thumbnail-medium-width);
102 }
103 } 99 }
104 100
105 .video-channel-info { 101 .video-channel-info {
@@ -115,7 +111,7 @@
115} 111}
116 112
117@include on-mobile-main-col { 113@include on-mobile-main-col {
118 .video-channel img { 114 .video-channel my-actor-avatar {
119 @include build-channel-img-size($video-thumbnail-small-width); 115 @include build-channel-img-size($video-thumbnail-small-width);
120 } 116 }
121} 117}
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
index 2be952e16..ecede19a3 100644
--- a/client/src/app/+search/search.component.ts
+++ b/client/src/app/+search/search.component.ts
@@ -132,10 +132,6 @@ export class SearchComponent implements OnInit, OnDestroy {
132 return 'internal' 132 return 'internal'
133 } 133 }
134 134
135 isExternalChannelUrl () {
136 return this.getVideoLinkType() === 'external'
137 }
138
139 search () { 135 search () {
140 forkJoin([ 136 forkJoin([
141 this.getVideosObs(), 137 this.getVideosObs(),
@@ -200,17 +196,33 @@ export class SearchComponent implements OnInit, OnDestroy {
200 this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id) 196 this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
201 } 197 }
202 198
203 getChannelUrl (channel: VideoChannel) { 199 isExternalChannelUrl () {
200 return this.getVideoLinkType() === 'external'
201 }
202
203 getExternalChannelUrl (channel: VideoChannel) {
204 // Same algorithm than videos 204 // Same algorithm than videos
205 if (this.getVideoLinkType() === 'external') { 205 if (this.getVideoLinkType() === 'external') {
206 return channel.url 206 return channel.url
207 } 207 }
208 208
209 if (this.getVideoLinkType() === 'internal') { 209 // lazy-load or internal
210 return undefined
211 }
212
213 getInternalChannelUrl (channel: VideoChannel) {
214 const linkType = this.getVideoLinkType()
215
216 if (linkType === 'internal') {
210 return [ '/video-channels', channel.nameWithHost ] 217 return [ '/video-channels', channel.nameWithHost ]
211 } 218 }
212 219
213 return [ '/search/lazy-load-channel', { url: channel.url } ] 220 if (linkType === 'lazy-load') {
221 return [ '/search/lazy-load-channel', { url: channel.url } ]
222 }
223
224 // external
225 return undefined
214 } 226 }
215 227
216 hideActions () { 228 hideActions () {
diff --git a/client/src/app/+search/search.module.ts b/client/src/app/+search/search.module.ts
index e85ae07d0..390833abc 100644
--- a/client/src/app/+search/search.module.ts
+++ b/client/src/app/+search/search.module.ts
@@ -1,4 +1,5 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
2import { SharedFormModule } from '@app/shared/shared-forms' 3import { SharedFormModule } from '@app/shared/shared-forms'
3import { SharedMainModule } from '@app/shared/shared-main' 4import { SharedMainModule } from '@app/shared/shared-main'
4import { SharedSearchModule } from '@app/shared/shared-search' 5import { SharedSearchModule } from '@app/shared/shared-search'
@@ -18,6 +19,7 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
18 SharedMainModule, 19 SharedMainModule,
19 SharedSearchModule, 20 SharedSearchModule,
20 SharedFormModule, 21 SharedFormModule,
22 SharedActorImageModule,
21 SharedUserSubscriptionModule, 23 SharedUserSubscriptionModule,
22 SharedVideoMiniatureModule 24 SharedVideoMiniatureModule
23 ], 25 ],