diff --git a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx b/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx index 370247c1..012de4a1 100644 --- a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx +++ b/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() { + diff --git a/components/settings/ControlsSettings.tsx b/components/settings/ControlsSettings.tsx new file mode 100644 index 00000000..f7f4776b --- /dev/null +++ b/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 }) => { + 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 ( + + + + + updateSettings({ showVolumeSlider }) + } + /> + + + + + updateSettings({ showBrightnessSlider }) + } + /> + + + + + updateSettings({ showSeekButtons }) + } + /> + + + + ); +}; diff --git a/components/video-player/controls/CenterControls.tsx b/components/video-player/controls/CenterControls.tsx index 47659746..aaa63274 100644 --- a/components/video-player/controls/CenterControls.tsx +++ b/components/video-player/controls/CenterControls.tsx @@ -48,49 +48,57 @@ export const CenterControls: FC = ({ }} pointerEvents={showControls ? "box-none" : "none"} > - - - + {settings?.showBrightnessSlider && ( + + + + )} - {!Platform.isTV && ( - - - + - - {settings?.rewindSkipTime} - - - - )} + + + {settings?.rewindSkipTime} + + + + ) : ( + + ) + ) : null} @@ -106,47 +114,55 @@ export const CenterControls: FC = ({ - {!Platform.isTV && ( - - - - + - {settings?.forwardSkipTime} - - - - )} + + + {settings?.forwardSkipTime} + + + + ) : ( + + ) + ) : null} - - - + {settings?.showVolumeSlider && ( + + + + )} ); }; diff --git a/translations/en.json b/translations/en.json index e1596030..67d61ed7 100644 --- a/translations/en.json +++ b/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", diff --git a/utils/atoms/settings.ts b/utils/atoms/settings.ts index ee0e8625..91ea89f4 100644 --- a/utils/atoms/settings.ts +++ b/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 { @@ -244,6 +248,10 @@ export const defaultValues: Settings = { enableRightSideVolumeSwipe: true, usePopularPlugin: true, showLargeHomeCarousel: false, + // Controls + showVolumeSlider: true, + showBrightnessSlider: true, + showSeekButtons: true, }; const loadSettings = (): Partial => {