From 1d1bb1de6136ec50e34b176b848f7cc80289e479 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 28 Mar 2023 15:59:20 +0800
Subject: [PATCH] Hide open media file in More button

---
 src/app.css                                   |  3 ++
 src/components/media-modal.jsx                | 40 +++++++++++++------
 .../{MenuLink.jsx => menu-link.jsx}           |  0
 src/components/menu.jsx                       |  2 +-
 src/components/shortcuts.jsx                  |  2 +-
 src/components/status.jsx                     |  2 +-
 6 files changed, 34 insertions(+), 15 deletions(-)
 rename src/components/{MenuLink.jsx => menu-link.jsx} (100%)

diff --git a/src/app.css b/src/app.css
index 3f83031f..3e59e53f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -900,6 +900,9 @@ button.carousel-dot {
   pointer-events: auto;
   font-weight: bold;
 }
+.carousel-top-controls .szh-menu-container {
+  pointer-events: auto;
+}
 :is(.button, button).carousel-button[hidden] {
   display: inline-block;
   opacity: 0;
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 9b850714..38802d28 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -6,6 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import Icon from './icon';
 import Link from './link';
 import Media from './media';
+import MenuLink from './menu-link';
 import Modal from './modal';
 import TranslationBlock from './translation-block';
 
@@ -178,6 +179,32 @@ function MediaModal({
           <span />
         )}
         <span>
+          <Menu
+            overflow="auto"
+            align="end"
+            position="anchor"
+            boundingBoxPadding="8 8 8 8"
+            offsetY={4}
+            menuClassName="glass-menu"
+            menuButton={
+              <button type="button" class="carousel-button plain3">
+                <Icon icon="more" alt="More" />
+              </button>
+            }
+          >
+            <MenuLink
+              href={
+                mediaAttachments[currentIndex]?.remoteUrl ||
+                mediaAttachments[currentIndex]?.url
+              }
+              class="carousel-button plain3"
+              target="_blank"
+              title="Open original media in new window"
+            >
+              <Icon icon="popout" />
+              <span>Open original media</span>
+            </MenuLink>
+          </Menu>{' '}
           <Link
             to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
             class="button carousel-button media-post-link plain3"
@@ -191,18 +218,7 @@ function MediaModal({
             }}
           >
             <span class="button-label">See post </span>&raquo;
-          </Link>{' '}
-          <a
-            href={
-              mediaAttachments[currentIndex]?.remoteUrl ||
-              mediaAttachments[currentIndex]?.url
-            }
-            target="_blank"
-            class="button carousel-button plain3"
-            title="Open original media in new window"
-          >
-            <Icon icon="popout" alt="Open original media in new window" />
-          </a>{' '}
+          </Link>
         </span>
       </div>
       {mediaAttachments?.length > 1 && (
diff --git a/src/components/MenuLink.jsx b/src/components/menu-link.jsx
similarity index 100%
rename from src/components/MenuLink.jsx
rename to src/components/menu-link.jsx
diff --git a/src/components/menu.jsx b/src/components/menu.jsx
index c3420417..ffe5ea9f 100644
--- a/src/components/menu.jsx
+++ b/src/components/menu.jsx
@@ -8,7 +8,7 @@ import store from '../utils/store';
 
 import Avatar from './avatar';
 import Icon from './icon';
-import MenuLink from './MenuLink';
+import MenuLink from './menu-link';
 
 function NavMenu(props) {
   const snapStates = useSnapshot(states);
diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
index c0832415..c495bfd1 100644
--- a/src/components/shortcuts.jsx
+++ b/src/components/shortcuts.jsx
@@ -12,7 +12,7 @@ import states from '../utils/states';
 import AsyncText from './AsyncText';
 import Icon from './icon';
 import Link from './link';
-import MenuLink from './MenuLink';
+import MenuLink from './menu-link';
 
 function Shortcuts() {
   const snapStates = useSnapshot(states);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 9e2658a4..628e203d 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -39,7 +39,7 @@ import Avatar from './avatar';
 import Icon from './icon';
 import Link from './link';
 import Media from './media';
-import MenuLink from './MenuLink';
+import MenuLink from './menu-link';
 import RelativeTime from './relative-time';
 import TranslationBlock from './translation-block';