alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-04-23 17:24:42 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: hide certain control buttons/sliders

Browse Source
This commit is contained in:
Fredrik Burmester
2025-11-17 07:38:36 +01:00
parent 3c57829360
commit b127df39a7
5 changed files with 187 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/settings/ControlsSettings.tsx Normal file
View File

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

168
components/video-player/controls/CenterControls.tsx
View File

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