From 8b3bd97dd4a2d7d3b97163528c42ab088fa4986a Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Fri, 20 Oct 2023 16:59:07 +0200
Subject: [PATCH] mobile close button for popouts

---
 src/components/overlays/OverlayRouter.tsx       |  6 +++++-
 .../positions/OverlayMobilePosition.tsx         | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/overlays/OverlayRouter.tsx b/src/components/overlays/OverlayRouter.tsx
index ca6ff40a..4930df9d 100644
--- a/src/components/overlays/OverlayRouter.tsx
+++ b/src/components/overlays/OverlayRouter.tsx
@@ -72,7 +72,11 @@ function RouterBase(props: { id: string; children: ReactNode }) {
   }, [routeMeta?.height, routeMeta?.width, isMobile, api]);
 
   return (
-    <a.div ref={ref} style={dimensions} className="overflow-hidden">
+    <a.div
+      ref={ref}
+      style={dimensions}
+      className="overflow-hidden relative z-10"
+    >
       <Flare.Base className="group w-full bg-video-context-border h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
         <Flare.Light
           flareSize={400}
diff --git a/src/components/overlays/positions/OverlayMobilePosition.tsx b/src/components/overlays/positions/OverlayMobilePosition.tsx
index 88d5c1ab..e65cc376 100644
--- a/src/components/overlays/positions/OverlayMobilePosition.tsx
+++ b/src/components/overlays/positions/OverlayMobilePosition.tsx
@@ -1,20 +1,35 @@
 import classNames from "classnames";
 import { ReactNode } from "react";
 
+import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
+
 interface MobilePositionProps {
   children?: ReactNode;
   className?: string;
 }
 
 export function OverlayMobilePosition(props: MobilePositionProps) {
+  const router = useInternalOverlayRouter("hello world :)");
+
   return (
     <div
       className={classNames([
-        "pointer-events-auto z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
+        "pointer-events-auto px-4 pb-6 z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
         props.className,
       ])}
     >
       {props.children}
+
+      {/* Close button */}
+      <button
+        className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-border active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
+        type="button"
+        onClick={() => router.close()}
+      >
+        Close
+      </button>
+      {/* Gradient to hide the progress */}
+      <div className="pointer-events-none absolute z-0 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent" />
     </div>
   );
 }