From 951c93a070ad2b8601f5856b7e5a7237be9dd1d9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 1 Jan 2023 12:28:54 +0800
Subject: [PATCH] Add link to media in carousel modal

---
 src/app.css               |  4 ++--
 src/components/status.jsx | 27 ++++++++++++++++++++-------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/app.css b/src/app.css
index f75d8ec2..8fb5f969 100644
--- a/src/app.css
+++ b/src/app.css
@@ -525,12 +525,12 @@ a.mention span {
   opacity: 0;
 }
 
-button.carousel-button,
+:is(.button, button).carousel-button,
 button.carousel-dot {
   pointer-events: auto;
   font-weight: bold;
 }
-button.carousel-button[hidden] {
+:is(.button, button).carousel-button[hidden] {
   display: inline-block;
   opacity: 0;
   pointer-events: none;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 4673cb84..5f8df8af 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1348,13 +1348,26 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
       </div>
       <div class="carousel-top-controls" hidden={!showControls}>
         <span />
-        <button
-          type="button"
-          class="carousel-button plain2"
-          onClick={() => onClose()}
-        >
-          <Icon icon="x" />
-        </button>
+        <span>
+          <a
+            href={
+              mediaAttachments[currentIndex]?.remoteUrl ||
+              mediaAttachments[currentIndex]?.url
+            }
+            target="_blank"
+            class="button carousel-button plain2"
+            title="Open original media in new window"
+          >
+            <Icon icon="popout" alt="Open original media in new window" />
+          </a>{' '}
+          <button
+            type="button"
+            class="carousel-button plain2"
+            onClick={() => onClose()}
+          >
+            <Icon icon="x" />
+          </button>
+        </span>
       </div>
       {mediaAttachments?.length > 1 && (
         <div class="carousel-controls" hidden={!showControls}>