diff options
8 files changed, 39 insertions, 31 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index c0d8c7db4..9308d5bb6 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html | |||
@@ -23,8 +23,8 @@ | |||
23 | <div class="section-label" i18n>OWNER ACCOUNT</div> | 23 | <div class="section-label" i18n>OWNER ACCOUNT</div> |
24 | 24 | ||
25 | <div class="avatar-row"> | 25 | <div class="avatar-row"> |
26 | <my-account-avatar [account]="videoChannel.ownerAccount" size="120"></my-account-avatar> | 26 | <my-account-avatar [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()" size="120"></my-account-avatar> |
27 | 27 | ||
28 | <div class="actor-info"> | 28 | <div class="actor-info"> |
29 | <h4> | 29 | <h4> |
30 | <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a> | 30 | <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a> |
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html index f13b12b25..eeae55d9b 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div *ngIf="isCommentDisplayed()" class="root-comment"> | 1 | <div *ngIf="isCommentDisplayed()" class="root-comment"> |
2 | <div class="left"> | 2 | <div class="left"> |
3 | <my-account-avatar *ngIf="!comment.isDeleted" [account]="comment.account"></my-account-avatar> | 3 | <my-account-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-account-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/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html index 545ecb1d5..a02373f2d 100644 --- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html +++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html | |||
@@ -4,11 +4,11 @@ | |||
4 | <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> | 4 | <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> |
5 | </a> | 5 | </a> |
6 | 6 | ||
7 | <my-account-avatar [account]="video.account"></my-account-avatar> | 7 | <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar> |
8 | </ng-container> | 8 | </ng-container> |
9 | 9 | ||
10 | <ng-container *ngIf="!isChannelAvatarNull() && genericChannel"> | 10 | <ng-container *ngIf="!isChannelAvatarNull() && genericChannel"> |
11 | <my-account-avatar [account]="video.account"></my-account-avatar> | 11 | <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar> |
12 | 12 | ||
13 | <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> | 13 | <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> |
14 | <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> | 14 | <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> |
@@ -16,6 +16,6 @@ | |||
16 | </ng-container> | 16 | </ng-container> |
17 | 17 | ||
18 | <ng-container *ngIf="isChannelAvatarNull()"> | 18 | <ng-container *ngIf="isChannelAvatarNull()"> |
19 | <my-account-avatar [account]="video.account"></my-account-avatar> | 19 | <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar> |
20 | </ng-container> | 20 | </ng-container> |
21 | </div> | 21 | </div> |
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.html b/client/src/app/shared/shared-account-avatar/account-avatar.component.html index 6bec0b5f3..ca4ceb12f 100644 --- a/client/src/app/shared/shared-account-avatar/account-avatar.component.html +++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html | |||
@@ -1,8 +1,15 @@ | |||
1 | <a *ngIf="account" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title"> | 1 | <ng-template #img> |
2 | <img | 2 | <img [class]="class" [src]="avatarUrl" i18n-alt alt="Account avatar" /> |
3 | [class]="class" | 3 | </ng-template> |
4 | [src]="avatarUrl" | 4 | |
5 | i18n-alt | 5 | <a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title"> |
6 | alt="Account avatar" | 6 | <ng-template *ngTemplateOutlet="img"></ng-template> |
7 | /> | ||
8 | </a> | 7 | </a> |
8 | |||
9 | <a *ngIf="account && internalHref" [routerLink]="internalHref" [title]="title"> | ||
10 | <ng-template *ngTemplateOutlet="img"></ng-template> | ||
11 | </a> | ||
12 | |||
13 | <ng-container *ngIf="!account || (!href && !internalHref)"> | ||
14 | <ng-template *ngTemplateOutlet="img"></ng-template> | ||
15 | </ng-container> | ||
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts index d5533d459..02a0a18bf 100644 --- a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts +++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts | |||
@@ -1,5 +1,4 @@ | |||
1 | import { Component, Input } from '@angular/core' | 1 | import { Component, Input } from '@angular/core' |
2 | import { Account as AccountInterface } from '@shared/models' | ||
3 | import { Account } from '../shared-main/account/account.model' | 2 | import { Account } from '../shared-main/account/account.model' |
4 | 3 | ||
5 | @Component({ | 4 | @Component({ |
@@ -8,21 +7,23 @@ import { Account } from '../shared-main/account/account.model' | |||
8 | templateUrl: './account-avatar.component.html' | 7 | templateUrl: './account-avatar.component.html' |
9 | }) | 8 | }) |
10 | export class AccountAvatarComponent { | 9 | export class AccountAvatarComponent { |
11 | _href: string | 10 | @Input() account: { |
12 | _title: string | 11 | name: string |
13 | 12 | avatar?: { url?: string, path: string } | |
14 | @Input() account: { name: string, avatar?: { url?: string }, url: string } | 13 | url: string |
15 | @Input() size = '36' | ||
16 | @Input() set href (value) { | ||
17 | this._href = value | ||
18 | } | 14 | } |
15 | @Input() size: '25' | '34' | '36' | '40' | '120' = '36' | ||
16 | |||
17 | // Use an external link | ||
18 | @Input() href: string | ||
19 | // Use routerLink | ||
20 | @Input() internalHref: string | string[] | ||
21 | |||
19 | @Input() set title (value) { | 22 | @Input() set title (value) { |
20 | this._title = value | 23 | this._title = value |
21 | } | 24 | } |
22 | 25 | ||
23 | get href () { | 26 | private _title: string |
24 | return this._href || this.account?.url | ||
25 | } | ||
26 | 27 | ||
27 | get title () { | 28 | get title () { |
28 | return this._title || $localize`${this.account.name} (account page)` | 29 | return this._title || $localize`${this.account.name} (account page)` |
@@ -33,6 +34,6 @@ export class AccountAvatarComponent { | |||
33 | } | 34 | } |
34 | 35 | ||
35 | get avatarUrl () { | 36 | get avatarUrl () { |
36 | return this.account?.avatar ? this.account.avatar.url : Account.GET_DEFAULT_AVATAR_URL() | 37 | return Account.GET_ACTOR_AVATAR_URL(this.account) |
37 | } | 38 | } |
38 | } | 39 | } |
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts index 17fddff09..65e6798d4 100644 --- a/client/src/app/shared/shared-main/account/account.model.ts +++ b/client/src/app/shared/shared-main/account/account.model.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Account as ServerAccount, ActorImage } from '@shared/models' | 1 | import { Account as ServerAccount, Actor as ServerActor, ActorImage } from '@shared/models' |
2 | import { Actor } from './actor.model' | 2 | import { Actor } from './actor.model' |
3 | 3 | ||
4 | export class Account extends Actor implements ServerAccount { | 4 | export class Account extends Actor implements ServerAccount { |
@@ -13,7 +13,7 @@ export class Account extends Actor implements ServerAccount { | |||
13 | 13 | ||
14 | userId?: number | 14 | userId?: number |
15 | 15 | ||
16 | static GET_ACTOR_AVATAR_URL (actor: object) { | 16 | static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) { |
17 | return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL() | 17 | return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL() |
18 | } | 18 | } |
19 | 19 | ||
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts index 1ee0c297e..4b036341f 100644 --- a/client/src/app/shared/shared-main/account/actor.model.ts +++ b/client/src/app/shared/shared-main/account/actor.model.ts | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Actor as ActorServer, ActorImage } from '@shared/models' | ||
2 | import { getAbsoluteAPIUrl } from '@app/helpers' | 1 | import { getAbsoluteAPIUrl } from '@app/helpers' |
2 | import { Actor as ServerActor, ActorImage } from '@shared/models' | ||
3 | 3 | ||
4 | export abstract class Actor implements ActorServer { | 4 | export abstract class Actor implements ServerActor { |
5 | id: number | 5 | id: number |
6 | name: string | 6 | name: string |
7 | 7 | ||
@@ -47,7 +47,7 @@ export abstract class Actor implements ActorServer { | |||
47 | return host.trim() === thisHost | 47 | return host.trim() === thisHost |
48 | } | 48 | } |
49 | 49 | ||
50 | protected constructor (hash: Partial<ActorServer>) { | 50 | protected constructor (hash: Partial<ServerActor>) { |
51 | this.id = hash.id | 51 | this.id = hash.id |
52 | this.url = hash.url ?? '' | 52 | this.url = hash.url ?? '' |
53 | this.name = hash.name ?? '' | 53 | this.name = hash.name ?? '' |
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 4e61c27b3..9c11e7609 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html | |||
@@ -13,7 +13,7 @@ | |||
13 | <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> | 13 | <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> |
14 | <img [src]="getAvatarUrl()" alt="" class="channel" /> | 14 | <img [src]="getAvatarUrl()" alt="" class="channel" /> |
15 | </a> | 15 | </a> |
16 | <my-account-avatar *ngIf="displayOptions.avatar && displayOwnerAccount()" [account]="video.account" size="40" [href]="'/video-channels/' + video.byVideoChannel" [title]="channelLinkTitle"></my-account-avatar> | 16 | <my-account-avatar *ngIf="displayOptions.avatar && displayOwnerAccount()" [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel" [title]="channelLinkTitle"></my-account-avatar> |
17 | 17 | ||
18 | <div class="w-100 d-flex flex-column"> | 18 | <div class="w-100 d-flex flex-column"> |
19 | <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name" | 19 | <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name" |