diff options
Diffstat (limited to 'client/src/app/+search')
-rw-r--r-- | client/src/app/+search/search.component.html | 11 | ||||
-rw-r--r-- | client/src/app/+search/search.component.scss | 18 | ||||
-rw-r--r-- | client/src/app/+search/search.component.ts | 26 | ||||
-rw-r--r-- | client/src/app/+search/search.module.ts | 2 |
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 @@ | |||
1 | import { NgModule } from '@angular/core' | 1 | import { NgModule } from '@angular/core' |
2 | import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module' | ||
2 | import { SharedFormModule } from '@app/shared/shared-forms' | 3 | import { SharedFormModule } from '@app/shared/shared-forms' |
3 | import { SharedMainModule } from '@app/shared/shared-main' | 4 | import { SharedMainModule } from '@app/shared/shared-main' |
4 | import { SharedSearchModule } from '@app/shared/shared-search' | 5 | import { 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 | ], |