From 21c0fb4b6cbf65f85da8385fcc0308fbc0c81c1c Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Fri, 22 May 2026 10:02:17 +0200
Subject: [PATCH] feat(casting): add DEBUG_TOUCH_ZONES overlay for hit-area
 calibration

---
 .../casting/player/CastPlayerEpisodeControls.tsx | 16 ++++++++++++++++
 .../casting/player/CastPlayerProgressBar.tsx     | 15 +++++++++++++++
 utils/casting/debug.ts                           |  8 ++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 utils/casting/debug.ts

diff --git a/components/casting/player/CastPlayerEpisodeControls.tsx b/components/casting/player/CastPlayerEpisodeControls.tsx
index c0b5ee527..3ed130b68 100644
--- a/components/casting/player/CastPlayerEpisodeControls.tsx
+++ b/components/casting/player/CastPlayerEpisodeControls.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import { Pressable, View } from "react-native";
 import type { RemoteMediaClient } from "react-native-google-cast";
 import { Text } from "@/components/common/Text";
+import { DEBUG_TOUCH_ZONES } from "@/utils/casting/debug";
 
 interface CastPlayerEpisodeControlsProps {
   /** Bottom safe-area inset, used to offset the fixed control row. */
@@ -153,6 +154,21 @@ export function CastPlayerEpisodeControls({
           </Text>
         )}
       </Pressable>
+
+      {__DEV__ && DEBUG_TOUCH_ZONES && (
+        <View
+          pointerEvents='none'
+          style={{
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderWidth: 1,
+            borderColor: "lime",
+          }}
+        />
+      )}
     </View>
   );
 }
diff --git a/components/casting/player/CastPlayerProgressBar.tsx b/components/casting/player/CastPlayerProgressBar.tsx
index ea6e96729..f98a89d97 100644
--- a/components/casting/player/CastPlayerProgressBar.tsx
+++ b/components/casting/player/CastPlayerProgressBar.tsx
@@ -10,6 +10,7 @@ import type { RemoteMediaClient } from "react-native-google-cast";
 import type { SharedValue } from "react-native-reanimated";
 import { CastTrickplayBubble } from "@/components/casting/player/CastTrickplayBubble";
 import type { useTrickplay } from "@/hooks/useTrickplay";
+import { DEBUG_TOUCH_ZONES } from "@/utils/casting/debug";
 import { calculateEndingTime, formatTime } from "@/utils/casting/helpers";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 
@@ -123,6 +124,20 @@ export function CastPlayerProgressBar({
           thumbWidth={16}
           panHitSlop={{ top: 12, bottom: 12, left: 10, right: 10 }}
         />
+        {__DEV__ && DEBUG_TOUCH_ZONES && (
+          <View
+            pointerEvents='none'
+            style={{
+              position: "absolute",
+              top: -12,
+              bottom: -12,
+              left: -10,
+              right: -10,
+              borderWidth: 1,
+              borderColor: "red",
+            }}
+          />
+        )}
       </View>
 
       {/* Time display */}
diff --git a/utils/casting/debug.ts b/utils/casting/debug.ts
new file mode 100644
index 000000000..5054d061f
--- /dev/null
+++ b/utils/casting/debug.ts
@@ -0,0 +1,8 @@
+/**
+ * Developer flag for visualising touch zones in the casting player.
+ *
+ * Flip to `true` to draw outlines over the slider hit area and the control row,
+ * run the app, hand-calibrate `panHitSlop`, then flip back to `false`.
+ * Every use is gated with `__DEV__` so it can never render in a release build.
+ */
+export const DEBUG_TOUCH_ZONES = false;