From 24b30f24bb4e092b56cddb8770594f0460e98d94 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 10 Feb 2025 23:06:09 -0700
Subject: [PATCH] add preview to captions settings atoms

---
 .../positions/OverlayMobilePosition.tsx       | 67 +++++++++++++------
 .../atoms/settings/CaptionSettingsView.tsx    |  4 +-
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/components/overlays/positions/OverlayMobilePosition.tsx b/src/components/overlays/positions/OverlayMobilePosition.tsx
index 53b21000..36a3bee6 100644
--- a/src/components/overlays/positions/OverlayMobilePosition.tsx
+++ b/src/components/overlays/positions/OverlayMobilePosition.tsx
@@ -1,7 +1,8 @@
 import classNames from "classnames";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { Icon, Icons } from "@/components/Icon";
 import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
 
 interface MobilePositionProps {
@@ -10,28 +11,56 @@ interface MobilePositionProps {
 }
 
 export function OverlayMobilePosition(props: MobilePositionProps) {
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
   const router = useInternalOverlayRouter("hello world :)");
   const { t } = useTranslation();
 
-  return (
-    <div
-      className={classNames([
-        "pointer-events-auto px-4 pb-6 z-10 ml-[env(safe-area-inset-left)] mr-[env(safe-area-inset-right)] bottom-0 origin-top-left inset-x-0 absolute overflow-hidden max-h-[calc(100vh-1.5rem)] grid grid-rows-[minmax(0,1fr),auto]",
-        props.className,
-      ])}
-    >
-      {props.children}
+  const togglePreview = () => {
+    setIsPreviewMode(!isPreviewMode);
+  };
 
-      {/* Close button */}
-      <button
-        className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-closeHover 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()}
+  const isCaptionsSettings = window.location.href.endsWith(
+    "settings%2Fcaptions%2Fsettings",
+  );
+
+  return (
+    <>
+      {isCaptionsSettings ? (
+        <button
+          className="fixed top-1 right-4 w-12 h-12 text-video-context-type-main bg-video-context-background z-10 hover:bg-video-context-closeHover 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={togglePreview}
+        >
+          {isPreviewMode ? (
+            <Icon icon={Icons.EYE} className="w-4" />
+          ) : (
+            <Icon icon={Icons.EYE_SLASH} className="w-4" />
+          )}
+        </button>
+      ) : null}
+
+      {/* Main Overlay */}
+      <div
+        className={classNames([
+          "pointer-events-auto px-4 pb-6 z-10 ml-[env(safe-area-inset-left)] mr-[env(safe-area-inset-right)] bottom-0 origin-top-left inset-x-0 absolute overflow-hidden max-h-[calc(100vh-1.5rem)] grid grid-rows-[minmax(0,1fr),auto]",
+          props.className,
+          "transition-all duration-300",
+          isPreviewMode ? "opacity-50" : "opacity-100",
+        ])}
       >
-        {t("overlays.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>
+        {props.children}
+
+        {/* Close button */}
+        <button
+          className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-closeHover 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()}
+        >
+          {t("overlays.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>
+    </>
   );
 }
diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index eeaa0d48..d953fbf0 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -264,8 +264,8 @@ export function CaptionSettingsView({
       <Menu.Section className="space-y-6 pb-5">
         <CaptionSetting
           label={t("player.menus.subtitles.settings.delay")}
-          max={10}
-          min={-10}
+          max={20}
+          min={-20}
           onChange={(v) => setDelay(v)}
           value={delay}
           textTransformer={(s) => `${s}s`}