feat: hide certain control buttons/sliders

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