From b3f471bfa65dd147951a50559ea214cdb9db42cd Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Fri, 6 Dec 2024 01:17:24 +1100 Subject: [PATCH] Added brightness slider --- .../controls/BrightnessSlider.tsx | 67 ++ components/video-player/controls/Controls.tsx | 653 +++++++++--------- 2 files changed, 385 insertions(+), 335 deletions(-) create mode 100644 components/video-player/controls/BrightnessSlider.tsx 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")} + - + ); };