From 86df9fd9f89c606314255c3f124a4e769a3f036f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 19:31:08 +0800
Subject: [PATCH] Tap media to toggle carousel controls

---
 src/app.css               |  6 ++++++
 src/components/status.jsx | 11 +++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index e611cfb0..d429974b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -505,6 +505,9 @@ a.mention span {
   text-align: center;
   pointer-events: none;
 }
+:is(.carousel-top-controls, .carousel-controls)[hidden] {
+  opacity: 0;
+}
 
 button.carousel-button,
 button.carousel-dot {
@@ -549,6 +552,9 @@ button.carousel-dot[disabled].active {
     transform: translateY(100%);
     transition: transform 0.2s ease-in-out;
   }
+  :is(.carousel-top-controls, .carousel-controls)[hidden] {
+    opacity: 1;
+  }
   .carousel:hover + .carousel-top-controls,
   .carousel:hover + .carousel-top-controls + .carousel-controls,
   .carousel-top-controls:hover,
diff --git a/src/components/status.jsx b/src/components/status.jsx
index c60db56e..4fa862d6 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1268,6 +1268,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
     }
   }, 100);
 
+  const [showControls, setShowControls] = useState(false);
+
   return (
     <>
       <div
@@ -1301,13 +1303,18 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
               root={carouselRef.current}
               threshold={1}
               onChange={(inView) => onSnap(inView, i)}
+              onClick={(e) => {
+                if (e.target !== e.currentTarget) {
+                  setShowControls(!showControls);
+                }
+              }}
             >
               <Media media={media} showOriginal />
             </InView>
           );
         })}
       </div>
-      <div class="carousel-top-controls">
+      <div class="carousel-top-controls" hidden={!showControls}>
         <span />
         <button
           type="button"
@@ -1318,7 +1325,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
         </button>
       </div>
       {mediaAttachments?.length > 1 && (
-        <div class="carousel-controls">
+        <div class="carousel-controls" hidden={!showControls}>
           <button
             type="button"
             class="carousel-button plain2"