From c0f84ddc11fbb4b43ef6f561b98e6c64e5bbc012 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 7 Mar 2024 00:59:00 -0500
Subject: [PATCH] open status from image galery, fix #627

---
 .../attachement-image.component.html          |  3 +++
 .../attachement-image.component.scss          | 20 +++++++++++++++++++
 .../attachement-image.component.ts            | 16 ++++++++++++++-
 .../user-profile/user-profile.component.html  |  2 +-
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.html b/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.html
index 957bb122..72ccc2ac 100644
--- a/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.html
+++ b/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.html
@@ -1,5 +1,8 @@
 <div class="image">    
     <div class="image__alt" *ngIf="displayAltLabel">ALT</div>
+    <a *ngIf="status" href class="image__status" (click)="openStatus()" (auxclick)="openStatus()" title="open status">
+        <fa-icon class="image__status--icon" [icon]="faExternalLinkAlt"></fa-icon>
+    </a>
     <a href class="image__link" (click)="openExternal()" (auxclick)="openExternal()" title="open image">
         <fa-icon class="image__link--icon" [icon]="faLink"></fa-icon>
     </a>
diff --git a/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.scss b/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.scss
index 44a95067..267d24e5 100644
--- a/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.scss
+++ b/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.scss
@@ -25,11 +25,31 @@
         // }
     }
 
+    &__status {
+        z-index: 10;
+        position: absolute;
+        top: 0;
+        right: 25px;
+        padding: 5px 5px 8px 8px;
+        transition: all .2s;
+        opacity: 0;
+        color: white;
+
+        &--icon {  
+            filter: drop-shadow(0 0 3px rgb(78, 78, 78));        
+        }
+    }
+
     &:hover &__link {
         opacity: 1;
         cursor: pointer;
     }
 
+    &:hover &__status {
+        opacity: 1;
+        cursor: pointer;
+    }
+
     &__alt {
         display: inline;
         color: white;
diff --git a/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.ts b/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.ts
index 2568f66b..b584be61 100644
--- a/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.ts
+++ b/src/app/components/stream/status/attachements/attachement-image/attachement-image.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { faLink, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 
 import { SettingsService } from '../../../../../services/settings.service';
 import { Attachment } from '../../../../../services/models/mastodon.interfaces';
+import { StatusWrapper } from '../../../../../models/common.model';
+import { OpenThreadEvent } from '../../../../../services/tools.service';
 
 @Component({
     selector: 'app-attachement-image',
@@ -11,10 +13,13 @@ import { Attachment } from '../../../../../services/models/mastodon.interfaces';
 })
 export class AttachementImageComponent implements OnInit {
     faLink = faLink;
+    faExternalLinkAlt = faExternalLinkAlt;
     displayAltLabel: boolean;
 
     @Input() attachment: Attachment;
+    @Input() status: StatusWrapper;
     @Output() openEvent = new EventEmitter();
+    @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
 
     constructor(
         private readonly settingsService: SettingsService
@@ -34,4 +39,13 @@ export class AttachementImageComponent implements OnInit {
         window.open(this.attachment.url, '_blank');
         return false;
     }
+
+    openStatus(): boolean {
+        if(!this.status) return false;
+
+        const openThreadEvent = new OpenThreadEvent(this.status.status, this.status.provider);
+        this.browseThreadEvent.next(openThreadEvent);
+
+        return false;
+    }
 }
diff --git a/src/app/components/stream/user-profile/user-profile.component.html b/src/app/components/stream/user-profile/user-profile.component.html
index e9061ef8..c6111381 100644
--- a/src/app/components/stream/user-profile/user-profile.component.html
+++ b/src/app/components/stream/user-profile/user-profile.component.html
@@ -210,7 +210,7 @@
                         </div>
                         <div *ngIf="statusSection === 'media'" class="status-media">
                             <div *ngFor="let media of statusWrapper.status.media_attachments">
-                                <app-attachement-image *ngIf="media.type === 'image' || media.type === 'gifv'" class="status-media__image" [attachment]="media" (openEvent)="openAttachment(media)"></app-attachement-image>
+                                <app-attachement-image *ngIf="media.type === 'image' || media.type === 'gifv'" class="status-media__image" [attachment]="media" [status]="statusWrapper" (openEvent)="openAttachment(media)" (browseThreadEvent)="browseThread($event)"></app-attachement-image>
                             </div>
                         </div>
                     </div>