diff --git a/components/video-player/controls/BrightnessSlider.tsx b/components/video-player/controls/BrightnessSlider.tsx
new file mode 100644
index 00000000..e5ff2579
--- /dev/null
+++ b/components/video-player/controls/BrightnessSlider.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { Slider } from "react-native-awesome-slider";
+import * as Brightness from "expo-brightness";
+import { Ionicons } from "@expo/vector-icons";
+
+const BrightnessSlider = () => {
+ const brightness = useSharedValue(50);
+ const min = useSharedValue(0);
+ const max = useSharedValue(100);
+
+ useEffect(() => {
+ const fetchInitialBrightness = async () => {
+ const initialBrightness = await Brightness.getBrightnessAsync();
+ brightness.value = initialBrightness * 100;
+ };
+ fetchInitialBrightness();
+ }, [brightness]);
+
+ const handleValueChange = async (value: number) => {
+ brightness.value = value;
+ console.log(value);
+ await Brightness.setBrightnessAsync(value / 100);
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ sliderContainer: {
+ width: 150,
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+});
+
+export default BrightnessSlider;
diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx
index b8af9f90..9572894e 100644
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -32,7 +32,6 @@ import {
Pressable,
TouchableOpacity,
View,
- StyleSheet,
} from "react-native";
import { Slider } from "react-native-awesome-slider";
import {
@@ -51,7 +50,7 @@ import { VideoProvider } from "./contexts/VideoContext";
import * as Haptics from "expo-haptics";
import DropdownViewDirect from "./dropdown/DropdownViewDirect";
import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
-import * as Brightness from "expo-brightness";
+import BrightnessSlider from "./BrightnessSlider";
interface Props {
item: BaseItemDto;
@@ -136,22 +135,6 @@ export const Controls: React.FC = ({
isVlc
);
- const [brightness, setBrightness] = useState(useSharedValue(0.5));
-
- useEffect(() => {
- const getBrightness = async () => {
- const currentBrightness = await Brightness.getBrightnessAsync();
- setBrightness(useSharedValue(currentBrightness));
- };
-
- getBrightness();
- }, []);
-
- const handleBrightnessChange = async (value) => {
- setBrightness(value);
- await Brightness.setBrightnessAsync(value);
- };
-
const { showSkipCreditButton, skipCredit } = useCreditSkipper(
offline ? undefined : item.Id,
currentTime,
@@ -342,356 +325,356 @@ export const Controls: React.FC = ({
mediaSource={mediaSource}
isVideoLoaded={isVideoLoaded}
>
-
-
- {!mediaSource?.TranscodingUrl ? (
-
- ) : (
-
- )}
-
+ {!mediaSource?.TranscodingUrl ? (
+
+ ) : (
+
+ )}
+
-
-
- Skip Intro
-
-
-
-
+
-
- Skip Credits
-
-
+ Skip Intro
+
+
- {
- toggleControls();
- }}
- style={{
+
+
+ Skip Credits
+
+
+
+ {
+ toggleControls();
+ }}
+ style={{
+ position: "absolute",
+ width: Dimensions.get("window").width,
+ height: Dimensions.get("window").height,
+ }}
+ >
+
+
-
-
- {previousItem && (
-
-
-
- )}
-
- {nextItem && (
-
-
-
- )}
-
- {Platform.OS !== "ios" && (
-
-
-
- )}
+ top: 0,
+ right: 0,
+ opacity: showControls ? 1 : 0,
+ },
+ ]}
+ pointerEvents={showControls ? "auto" : "none"}
+ className={`flex flex-row items-center space-x-2 z-10 p-4 `}
+ >
+ {previousItem && (
{
- if (stop) await stop();
- router.back();
- }}
+ onPress={goToPreviousItem}
className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
>
-
+
-
+ )}
+ {nextItem && (
+
+
+
+ )}
+
+ {mediaSource?.TranscodingUrl && (
+
+
+
+ )}
+ {
+ if (stop) await stop();
+ router.back();
+ }}
+ className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+ >
+
+
+
+
+
-
-
-
-
- {settings?.rewindSkipTime}
-
-
-
-
- {!isBuffering ? (
- {
- togglePlay(progress.value);
- }}
- >
-
-
- ) : (
-
- )}
-
-
-
-
-
- {settings?.forwardSkipTime}
-
-
-
+
-
-
-
- {item?.Name}
- {item?.Type === "Episode" && (
- {item.SeriesName}
- )}
- {item?.Type === "Movie" && (
- {item?.ProductionYear}
- )}
- {item?.Type === "Audio" && (
- {item?.Album}
- )}
-
+
-
- (
+
+
+ {settings?.rewindSkipTime}
+
+
+
+
+ {
+ togglePlay(progress.value);
+ }}
+ >
+ {!isBuffering ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {settings?.forwardSkipTime}
+
+
+
+
+
+
+
+ {item?.Name}
+ {item?.Type === "Episode" && (
+ {item.SeriesName}
+ )}
+ {item?.Type === "Movie" && (
+ {item?.ProductionYear}
+ )}
+ {item?.Type === "Audio" && (
+ {item?.Album}
+ )}
+
+
+
+ (
+
+ )}
+ cache={cacheProgress}
+ onSlidingStart={handleSliderStart}
+ onSlidingComplete={handleSliderComplete}
+ onValueChange={handleSliderChange}
+ containerStyle={{
+ borderRadius: 100,
+ }}
+ renderBubble={() => {
+ if (!trickPlayUrl || !trickplayInfo) {
+ return null;
+ }
+ const { x, y, url } = trickPlayUrl;
+ const tileWidth = 150;
+ const tileHeight = 150 / trickplayInfo.aspectRatio!;
+ return (
- )}
- cache={cacheProgress}
- onSlidingStart={handleSliderStart}
- onSlidingComplete={handleSliderComplete}
- onValueChange={handleSliderChange}
- containerStyle={{
- borderRadius: 100,
- }}
- renderBubble={() => {
- if (!trickPlayUrl || !trickplayInfo) {
- return null;
- }
- const { x, y, url } = trickPlayUrl;
- const tileWidth = 150;
- const tileHeight = 150 / trickplayInfo.aspectRatio!;
- return (
+ >
+
+
+
-
-
-
-
- {`${time.hours > 0 ? `${time.hours}:` : ""}${
- time.minutes < 10 ? `0${time.minutes}` : time.minutes
- }:${
- time.seconds < 10 ? `0${time.seconds}` : time.seconds
- }`}
-
-
- );
- }}
- sliderHeight={10}
- thumbWidth={0}
- progress={progress}
- minimumValue={min}
- maximumValue={max}
- />
-
-
- {formatTimeString(currentTime, isVlc ? "ms" : "s")}
-
-
- -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
-
-
+ {`${time.hours > 0 ? `${time.hours}:` : ""}${
+ time.minutes < 10 ? `0${time.minutes}` : time.minutes
+ }:${
+ time.seconds < 10 ? `0${time.seconds}` : time.seconds
+ }`}
+
+
+ );
+ }}
+ sliderHeight={10}
+ thumbWidth={0}
+ progress={progress}
+ minimumValue={min}
+ maximumValue={max}
+ />
+
+
+ {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+
+
+ -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+
-
+
);
};