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/video-player/controls/CenterControls.tsx

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

translations/en.json

@@ -113,6 +113,15 @@
         "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",

utils/atoms/settings.ts

@@ -180,6 +180,10 @@ export type Settings = {
   enableRightSideVolumeSwipe: boolean;
   usePopularPlugin: boolean;
   showLargeHomeCarousel: boolean;
+  // Controls
+  showVolumeSlider: boolean;
+  showBrightnessSlider: boolean;
+  showSeekButtons: boolean;
 };
 
 export interface Lockable<T> {
@@ -244,6 +248,10 @@ export const defaultValues: Settings = {
   enableRightSideVolumeSwipe: true,
   usePopularPlugin: true,
   showLargeHomeCarousel: false,
+  // Controls
+  showVolumeSlider: true,
+  showBrightnessSlider: true,
+  showSeekButtons: true,
 };
 
 const loadSettings = (): Partial<Settings> => {