feat: hide certain control buttons/sliders

app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx

@@ -1,5 +1,6 @@
 import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ControlsSettings } from "@/components/settings/ControlsSettings";
 import { GestureControls } from "@/components/settings/GestureControls";
 import { MediaProvider } from "@/components/settings/MediaContext";
 import { MediaToggles } from "@/components/settings/MediaToggles";
@@ -25,6 +26,7 @@ export default function PlaybackControlsPage() {
           <MediaProvider>
             <MediaToggles className='mb-4' />
             <GestureControls className='mb-4' />
+            <ControlsSettings className='mb-4' />
             <PlaybackControlsSettings />
           </MediaProvider>
         </View>

components/settings/ControlsSettings.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import type { ViewProps } from "react-native";
+import { Switch } from "react-native";
+import { ListItem } from "@/components/list/ListItem";
+import { useSettings } from "@/utils/atoms/settings";
+import { ListGroup } from "../list/ListGroup";
+import DisabledSetting from "./DisabledSetting";
+
+interface Props extends ViewProps {}
+
+export const ControlsSettings: React.FC<Props> = ({ ...props }) => {
+  const { t } = useTranslation();
+
+  const { settings, updateSettings, pluginSettings } = useSettings();
+
+  const disabled = useMemo(
+    () =>
+      pluginSettings?.showVolumeSlider?.locked === true &&
+      pluginSettings?.showBrightnessSlider?.locked === true &&
+      pluginSettings?.showSeekButtons?.locked === true,
+    [pluginSettings],
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={disabled} {...props}>
+      <ListGroup title={t("home.settings.controls.controls_title")}>
+        <ListItem
+          title={t("home.settings.controls.show_volume_slider")}
+          subtitle={t("home.settings.controls.show_volume_slider_description")}
+          disabled={pluginSettings?.showVolumeSlider?.locked}
+        >
+          <Switch
+            value={settings.showVolumeSlider}
+            disabled={pluginSettings?.showVolumeSlider?.locked}
+            onValueChange={(showVolumeSlider) =>
+              updateSettings({ showVolumeSlider })
+            }
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.controls.show_brightness_slider")}
+          subtitle={t(
+            "home.settings.controls.show_brightness_slider_description",
+          )}
+          disabled={pluginSettings?.showBrightnessSlider?.locked}
+        >
+          <Switch
+            value={settings.showBrightnessSlider}
+            disabled={pluginSettings?.showBrightnessSlider?.locked}
+            onValueChange={(showBrightnessSlider) =>
+              updateSettings({ showBrightnessSlider })
+            }
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.controls.show_seek_buttons")}
+          subtitle={t("home.settings.controls.show_seek_buttons_description")}
+          disabled={pluginSettings?.showSeekButtons?.locked}
+        >
+          <Switch
+            value={settings.showSeekButtons}
+            disabled={pluginSettings?.showSeekButtons?.locked}
+            onValueChange={(showSeekButtons) =>
+              updateSettings({ showSeekButtons })
+            }
+          />
+        </ListItem>
+      </ListGroup>
+    </DisabledSetting>
+  );
+};

components/settings/GestureControls.tsx

@@ -17,7 +17,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
 
   const disabled = useMemo(
     () =>
-      pluginSettings?.enableDoubleTapSkip?.locked === true &&
+      pluginSettings?.enableHorizontalSwipeSkip?.locked === true &&
       pluginSettings?.enableLeftSideBrightnessSwipe?.locked === true &&
       pluginSettings?.enableRightSideVolumeSwipe?.locked === true,
     [pluginSettings],
@@ -35,13 +35,13 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
           subtitle={t(
             "home.settings.gesture_controls.horizontal_swipe_skip_description",
           )}
-          disabled={pluginSettings?.enableDoubleTapSkip?.locked}
+          disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
         >
           <Switch
-            value={settings.enableDoubleTapSkip}
-            disabled={pluginSettings?.enableDoubleTapSkip?.locked}
-            onValueChange={(enableDoubleTapSkip) =>
-              updateSettings({ enableDoubleTapSkip })
+            value={settings.enableHorizontalSwipeSkip}
+            disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
+            onValueChange={(enableHorizontalSwipeSkip) =>
+              updateSettings({ enableHorizontalSwipeSkip })
             }
           />
         </ListItem>

components/video-player/controls/CenterControls.tsx

@@ -48,49 +48,57 @@ export const CenterControls: FC<CenterControlsProps> = ({
       }}
       pointerEvents={showControls ? "box-none" : "none"}
     >
-      <View
-        style={{
-          position: "absolute",
-          alignItems: "center",
-          transform: [{ rotate: "270deg" }],
-          left: 0,
-          bottom: 30,
-        }}
-      >
-        <BrightnessSlider />
-      </View>
+      {settings?.showBrightnessSlider && (
+        <View
+          style={{
+            position: "absolute",
+            alignItems: "center",
+            transform: [{ rotate: "270deg" }],
+            left: 0,
+            bottom: 30,
+          }}
+        >
+          <BrightnessSlider />
+        </View>
+      )}
 
-      {!Platform.isTV && (
-        <TouchableOpacity onPress={handleSkipBackward}>
-          <View
-            style={{
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Ionicons
-              name='refresh-outline'
-              size={ICON_SIZES.CENTER}
-              color='white'
+      {!Platform.isTV ? (
+        settings?.showSeekButtons ? (
+          <TouchableOpacity onPress={handleSkipBackward}>
+            <View
               style={{
-                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-              }}
-            />
-            <Text
-              style={{
-                position: "absolute",
-                color: "white",
-                fontSize: 16,
-                fontWeight: "bold",
-                bottom: 10,
+                position: "relative",
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
-              {settings?.rewindSkipTime}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      )}
+              <Ionicons
+                name='refresh-outline'
+                size={ICON_SIZES.CENTER}
+                color='white'
+                style={{
+                  transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+                }}
+              />
+              <Text
+                style={{
+                  position: "absolute",
+                  color: "white",
+                  fontSize: 16,
+                  fontWeight: "bold",
+                  bottom: 10,
+                }}
+              >
+                {settings?.rewindSkipTime}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ) : (
+          <View
+            style={{ width: ICON_SIZES.CENTER, height: ICON_SIZES.CENTER }}
+          />
+        )
+      ) : null}
 
       <View style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}>
         <TouchableOpacity onPress={togglePlay}>
@@ -106,47 +114,55 @@ export const CenterControls: FC<CenterControlsProps> = ({
         </TouchableOpacity>
       </View>
 
-      {!Platform.isTV && (
-        <TouchableOpacity onPress={handleSkipForward}>
-          <View
-            style={{
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Ionicons
-              name='refresh-outline'
-              size={ICON_SIZES.CENTER}
-              color='white'
-            />
-            <Text
+      {!Platform.isTV ? (
+        settings?.showSeekButtons ? (
+          <TouchableOpacity onPress={handleSkipForward}>
+            <View
               style={{
-                position: "absolute",
-                color: "white",
-                fontSize: 16,
-                fontWeight: "bold",
-                bottom: 10,
+                position: "relative",
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
-              {settings?.forwardSkipTime}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      )}
+              <Ionicons
+                name='refresh-outline'
+                size={ICON_SIZES.CENTER}
+                color='white'
+              />
+              <Text
+                style={{
+                  position: "absolute",
+                  color: "white",
+                  fontSize: 16,
+                  fontWeight: "bold",
+                  bottom: 10,
+                }}
+              >
+                {settings?.forwardSkipTime}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ) : (
+          <View
+            style={{ width: ICON_SIZES.CENTER, height: ICON_SIZES.CENTER }}
+          />
+        )
+      ) : null}
 
-      <View
-        style={{
-          position: "absolute",
-          alignItems: "center",
-          transform: [{ rotate: "270deg" }],
-          bottom: 30,
-          right: 0,
-          opacity: showAudioSlider || showControls ? 1 : 0,
-        }}
-      >
-        <AudioSlider setVisibility={setShowAudioSlider} />
-      </View>
+      {settings?.showVolumeSlider && (
+        <View
+          style={{
+            position: "absolute",
+            alignItems: "center",
+            transform: [{ rotate: "270deg" }],
+            bottom: 30,
+            right: 0,
+            opacity: showAudioSlider || showControls ? 1 : 0,
+          }}
+        >
+          <AudioSlider setVisibility={setShowAudioSlider} />
+        </View>
+      )}
     </View>
   );
 };

components/video-player/controls/GestureOverlay.tsx

@@ -145,7 +145,7 @@ export const GestureOverlay = ({
   });
 
   const handleSkipForward = useCallback(() => {
-    if (!settings.enableDoubleTapSkip) return;
+    if (!settings.enableHorizontalSwipeSkip) return;
     lightHaptic();
     // Defer all actions to avoid useInsertionEffect warning
     requestAnimationFrame(() => {
@@ -153,7 +153,7 @@ export const GestureOverlay = ({
       showFeedback("play-forward", `+${settings.forwardSkipTime}s`);
     });
   }, [
-    settings.enableDoubleTapSkip,
+    settings.enableHorizontalSwipeSkip,
     settings.forwardSkipTime,
     lightHaptic,
     onSkipForward,
@@ -161,7 +161,7 @@ export const GestureOverlay = ({
   ]);
 
   const handleSkipBackward = useCallback(() => {
-    if (!settings.enableDoubleTapSkip) return;
+    if (!settings.enableHorizontalSwipeSkip) return;
     lightHaptic();
     // Defer all actions to avoid useInsertionEffect warning
     requestAnimationFrame(() => {
@@ -169,7 +169,7 @@ export const GestureOverlay = ({
       showFeedback("play-back", `-${settings.rewindSkipTime}s`);
     });
   }, [
-    settings.enableDoubleTapSkip,
+    settings.enableHorizontalSwipeSkip,
     settings.rewindSkipTime,
     lightHaptic,
     onSkipBackward,
@@ -237,8 +237,8 @@ export const GestureOverlay = ({
 
   const { handleTouchStart, handleTouchMove, handleTouchEnd } =
     useGestureDetection({
-      onDoubleTapLeft: handleSkipBackward,
-      onDoubleTapRight: handleSkipForward,
+      onSwipeLeft: handleSkipBackward,
+      onSwipeRight: handleSkipForward,
       onVerticalDragStart: handleVerticalDragStart,
       onVerticalDragMove: handleVerticalDragMove,
       onVerticalDragEnd: handleVerticalDragEnd,
@@ -247,30 +247,29 @@ export const GestureOverlay = ({
       screenHeight,
     });
 
-  // Background overlay when controls are visible
-  const controlsOverlay = showControls && (
-    <Pressable
-      onPress={onToggleControls}
-      style={{
-        position: "absolute",
-        width: screenWidth,
-        height: screenHeight,
-        backgroundColor: "black",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        opacity: 0.75,
-      }}
-    />
-  );
+  // If controls are visible, act like the old tap overlay
+  if (showControls) {
+    return (
+      <Pressable
+        onPress={onToggleControls}
+        style={{
+          position: "absolute",
+          width: screenWidth,
+          height: screenHeight,
+          backgroundColor: "black",
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          opacity: 0.75,
+        }}
+      />
+    );
+  }
 
   return (
     <>
-      {/* Controls overlay when visible */}
-      {controlsOverlay}
-
-      {/* Gesture detection area - always present */}
+      {/* Gesture detection area */}
       <Pressable
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}

components/video-player/controls/hooks/useGestureDetection.ts

@@ -4,8 +4,8 @@ import type { GestureResponderEvent } from "react-native";
 export interface SwipeGestureOptions {
   minDistance?: number;
   maxDuration?: number;
-  onDoubleTapLeft?: () => void;
-  onDoubleTapRight?: () => void;
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
   onVerticalDragStart?: (side: "left" | "right", initialY: number) => void;
   onVerticalDragMove?: (
     side: "left" | "right",
@@ -21,8 +21,8 @@ export interface SwipeGestureOptions {
 export const useGestureDetection = ({
   minDistance = 50,
   maxDuration = 800,
-  onDoubleTapLeft,
-  onDoubleTapRight,
+  onSwipeLeft,
+  onSwipeRight,
   onVerticalDragStart,
   onVerticalDragMove,
   onVerticalDragEnd,
@@ -39,11 +39,6 @@ export const useGestureDetection = ({
   const gestureType = useRef<"none" | "horizontal" | "vertical">("none");
   const shouldIgnoreTouch = useRef(false);
 
-  // Double tap detection refs
-  const lastTapTime = useRef(0);
-  const lastTapPosition = useRef({ x: 0, y: 0 });
-  const doubleTapTimeWindow = 300; // 300ms window for double tap
-
   const handleTouchStart = useCallback(
     (event: GestureResponderEvent) => {
       const startY = event.nativeEvent.pageY;
@@ -107,6 +102,9 @@ export const useGestureDetection = ({
           isDragging.current = true;
           dragSide.current = side;
           onVerticalDragStart?.(side, touchStartPosition.current.y);
+        } else if (absX > absY && absX > 10) {
+          // Horizontal gesture - mark for discrete swipe
+          gestureType.current = "horizontal";
         }
       }
 
@@ -146,8 +144,8 @@ export const useGestureDetection = ({
       const touchDuration = touchEndTime - touchStartTime.current;
       const deltaX = touchEndPosition.x - touchStartPosition.current.x;
       const deltaY = touchEndPosition.y - touchStartPosition.current.y;
-      const _absX = Math.abs(deltaX);
-      const _absY = Math.abs(deltaY);
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
       const totalDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
 
       // End vertical drag if we were dragging
@@ -171,43 +169,25 @@ export const useGestureDetection = ({
         return;
       }
 
-      // Check if it's a tap (short duration and small movement)
+      // Handle discrete horizontal swipes (for skip) only if it was marked as horizontal
       if (
+        gestureType.current === "horizontal" &&
+        hasMovedEnough.current &&
+        absX > absY &&
+        totalDistance > minDistance
+      ) {
+        if (deltaX > 0) {
+          onSwipeRight?.();
+        } else {
+          onSwipeLeft?.();
+        }
+      } else if (
         !hasMovedEnough.current &&
         touchDuration < 300 &&
         totalDistance < 10
       ) {
-        const currentTime = Date.now();
-        const tapX = touchEndPosition.x;
-        const tapY = touchEndPosition.y;
-
-        // Check for double tap
-        const timeSinceLastTap = currentTime - lastTapTime.current;
-        const distanceFromLastTap = Math.sqrt(
-          (tapX - lastTapPosition.current.x) ** 2 +
-            (tapY - lastTapPosition.current.y) ** 2,
-        );
-
-        if (
-          timeSinceLastTap <= doubleTapTimeWindow &&
-          distanceFromLastTap < 50
-        ) {
-          // It's a double tap
-          const isLeftSide = tapX < screenWidth / 2;
-          if (isLeftSide) {
-            onDoubleTapLeft?.();
-          } else {
-            onDoubleTapRight?.();
-          }
-          // Reset last tap to prevent triple tap
-          lastTapTime.current = 0;
-          lastTapPosition.current = { x: 0, y: 0 };
-        } else {
-          // It's a single tap - execute immediately
-          onTap?.();
-          lastTapTime.current = currentTime;
-          lastTapPosition.current = { x: tapX, y: tapY };
-        }
+        // It's a tap - short duration and small movement
+        onTap?.();
       }
 
       hasMovedEnough.current = false;
@@ -216,12 +196,10 @@ export const useGestureDetection = ({
     [
       maxDuration,
       minDistance,
-      onDoubleTapLeft,
-      onDoubleTapRight,
+      onSwipeLeft,
+      onSwipeRight,
       onVerticalDragEnd,
       onTap,
-      doubleTapTimeWindow,
-      screenWidth,
     ],
   );
 

translations/ar.json

@@ -89,8 +89,8 @@
       },
       "gesture_controls": {
         "gesture_controls_title": "التحكم بالإيماءات",
-        "horizontal_swipe_skip": "النقر المزدوج للتخطي",
-        "horizontal_swipe_skip_description": "انقر نقرًا مزدوجًا على الجانب الأيسر/الأيمن عندما تكون عناصر التحكم مخفية للتخطي",
+        "horizontal_swipe_skip": "السحب الأفقي للتخطي",
+        "horizontal_swipe_skip_description": "اسحب لليسار/لليمين عندما تكون عناصر التحكم مخفية للتخطي",
         "left_side_brightness": "التحكم في السطوع من الجانب الأيسر",
         "left_side_brightness_description": "اسحب لأعلى/لأسفل على الجانب الأيسر لضبط السطوع",
         "right_side_volume": "التحكم في مستوى الصوت من الجانب الأيمن",

translations/en.json

@@ -106,13 +106,22 @@
       },
       "gesture_controls": {
         "gesture_controls_title": "Gesture Controls",
-        "horizontal_swipe_skip": "Double Tap to Skip",
-        "horizontal_swipe_skip_description": "Double tap left/right side when controls are hidden to skip",
+        "horizontal_swipe_skip": "Horizontal Swipe to Skip",
+        "horizontal_swipe_skip_description": "Swipe left/right when controls are hidden to skip",
         "left_side_brightness": "Left Side Brightness Control",
         "left_side_brightness_description": "Swipe up/down on left side to adjust brightness",
         "right_side_volume": "Right Side Volume Control",
         "right_side_volume_description": "Swipe up/down on right side to adjust volume"
       },
+      "controls": {
+        "controls_title": "Controls",
+        "show_volume_slider": "Show Volume Slider",
+        "show_volume_slider_description": "Display volume slider on the right side of video controls",
+        "show_brightness_slider": "Show Brightness Slider",
+        "show_brightness_slider_description": "Display brightness slider on the left side of video controls",
+        "show_seek_buttons": "Show Seek Buttons",
+        "show_seek_buttons_description": "Display forward/rewind buttons next to the play button"
+      },
       "audio": {
         "audio_title": "Audio",
         "set_audio_track": "Set Audio Track From Previous Item",

translations/hu.json

@@ -94,8 +94,8 @@
       },
       "gesture_controls": {
         "gesture_controls_title": "Gesztusvezérlés",
-        "horizontal_swipe_skip": "Dupla Érintés Ugráshoz",
-        "horizontal_swipe_skip_description": "Dupla érintés bal/jobb oldalon ha a vezérlők el vannak rejtve az ugráshoz.",
+        "horizontal_swipe_skip": "Vízszintes Húzás Ugráshoz",
+        "horizontal_swipe_skip_description": "Ha a vezérlők el vannak rejtve, húzd balra vagy jobbra az ugráshoz.",
         "left_side_brightness": "Fényerő a Bal Oldalon",
         "left_side_brightness_description": "Húzd felfelé vagy lefelé a bal oldalon a fényerő állításához",
         "right_side_volume": "Fényerő a Jobb Oldalon",

utils/atoms/settings.ts

@@ -175,11 +175,15 @@ export type Settings = {
   vlcOutlineOpacity?: number;
   vlcIsBold?: boolean;
   // Gesture controls
-  enableDoubleTapSkip: boolean;
+  enableHorizontalSwipeSkip: boolean;
   enableLeftSideBrightnessSwipe: boolean;
   enableRightSideVolumeSwipe: boolean;
   usePopularPlugin: boolean;
   showLargeHomeCarousel: boolean;
+  // Controls
+  showVolumeSlider: boolean;
+  showBrightnessSlider: boolean;
+  showSeekButtons: boolean;
 };
 
 export interface Lockable<T> {
@@ -239,11 +243,15 @@ export const defaultValues: Settings = {
   vlcOutlineOpacity: undefined,
   vlcIsBold: undefined,
   // Gesture controls
-  enableDoubleTapSkip: true,
+  enableHorizontalSwipeSkip: true,
   enableLeftSideBrightnessSwipe: true,
   enableRightSideVolumeSwipe: true,
   usePopularPlugin: true,
   showLargeHomeCarousel: false,
+  // Controls
+  showVolumeSlider: true,
+  showBrightnessSlider: true,
+  showSeekButtons: true,
 };
 
 const loadSettings = (): Partial<Settings> => {