open avatar in lightbox

src/app/components/stream/user-profile/user-profile.component.html

@@ -2,11 +2,15 @@
     <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
 
-    <div *ngIf="displayedAccount" class="profile-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
+    <div *ngIf="displayedAccount" class="profile-header"
+        [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
         <div class="profile-header__inner">
+            <a href (click)="showAvatar(displayedAccount.avatar)" title="open avatar">
                 <img class="profile-header__avatar" src="{{displayedAccount.avatar}}" alt="header" />
+            </a>
             <h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"></h2>
-            <h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}" target="_blank">@{{displayedAccount.acct}}</a></h2>
+            <h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}"
+                    target="_blank">@{{displayedAccount.acct}}</a></h2>
 
             <div class="profile-header__follow" *ngIf="relationship">
                 <button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
@@ -38,7 +42,8 @@
         </div>
         <div class="profile-fields" *ngIf="displayedAccount && displayedAccount.fields.length > 0">
             <div class="profile-fields__field" *ngFor="let field of displayedAccount.fields">
-                <div class="profile-fields__field--value" innerHTML="{{ displayedAccount | accountEmoji:field.value}}" [ngClass]="{'profile-fields__field--validated': field.verified_at }">
+                <div class="profile-fields__field--value" innerHTML="{{ displayedAccount | accountEmoji:field.value}}"
+                    [ngClass]="{'profile-fields__field--validated': field.verified_at }">
                 </div>
                 <div class="profile-fields__field--name">
                     {{ field.name }}

src/app/components/stream/user-profile/user-profile.component.ts

@@ -5,13 +5,14 @@ import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons";
 import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngxs/store';
 
-import { Account, Status, Relationship } from "../../../services/models/mastodon.interfaces";
+import { Account, Status, Relationship, Attachment } from "../../../services/models/mastodon.interfaces";
 import { MastodonService } from '../../../services/mastodon.service';
 import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
 import { NotificationService } from '../../../services/notification.service';
 import { AccountInfo } from '../../../states/accounts.state';
 import { StatusWrapper } from '../../../models/common.model';
 import { EmojiConverter, EmojiTypeEnum } from '../../../tools/emoji.tools';
+import { NavigationService } from '../../../services/navigation.service';
 
 @Component({
     selector: 'app-user-profile',
@@ -60,6 +61,7 @@ export class UserProfileComponent implements OnInit {
 
     constructor(
         private readonly store: Store,
+        private readonly navigationService: NavigationService,
         private readonly notificationService: NotificationService,
         private readonly mastodonService: MastodonService,
         private readonly toolsService: ToolsService) {
@@ -103,7 +105,7 @@ export class UserProfileComponent implements OnInit {
 
                 this.displayedAccount = account;
                 this.hasNote = account && account.note && account.note !== '<p></p>';
-                if(this.hasNote){
+                if (this.hasNote) {
                     this.note = this.emojiConverter.applyEmojis(account.emojis, account.note, EmojiTypeEnum.medium);
                 }
 
@@ -155,6 +157,26 @@ export class UserProfileComponent implements OnInit {
             });
     }
 
+    showAvatar(avatarUrl: string): boolean {
+        const att: Attachment = {
+            id: '',
+            type: 'image',
+            remote_url: avatarUrl,
+            preview_url: avatarUrl,
+            url: avatarUrl,
+            meta: null,
+            text_url: '',
+            description: ''
+        }
+        this.navigationService.openMedia({
+            selectedIndex: 0,
+            attachments: [att],
+            iframe: null
+        });
+
+        return false;
+    }
+
     refresh(): any {
         this.load(this.lastAccountName);
     }
@@ -227,7 +249,7 @@ export class UserProfileComponent implements OnInit {
             });
     }
 
-    private loadStatus(userAccount: AccountInfo, statuses: Status[]){
+    private loadStatus(userAccount: AccountInfo, statuses: Status[]) {
         if (statuses.length === 0) {
             this.maxReached = true;
             return;