feat(casting): add DEBUG_TOUCH_ZONES overlay for hit-area calibration

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>
   );
 }

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 */}

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;