From 6b6dedf303398e378a7608aec3510b3d4b6e2200 Mon Sep 17 00:00:00 2001
From: Alex Kim <alexkim5682@gmail.com>
Date: Tue, 10 Dec 2024 02:50:03 +1100
Subject: [PATCH] WIP

---
 .../video-player/controls/AudioSlider.tsx     | 35 +++++++++++++++----
 components/video-player/controls/Controls.tsx | 14 ++++++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/components/video-player/controls/AudioSlider.tsx b/components/video-player/controls/AudioSlider.tsx
index dfd0a87c..df1953dd 100644
--- a/components/video-player/controls/AudioSlider.tsx
+++ b/components/video-player/controls/AudioSlider.tsx
@@ -12,15 +12,20 @@ const AudioSlider = () => {
 
   useEffect(() => {
     const fetchInitialVolume = async () => {
-      const initialVolume: number = await VolumeManager.getVolume();
-      console.log("initialVolume", initialVolume);
-      volume.value = initialVolume * 100;
+      try {
+        const initialVolume = await VolumeManager.getVolume();
+        console.log("initialVolume", initialVolume);
+        volume.value = initialVolume * 100;
+      } catch (error) {
+        console.error("Error fetching initial volume:", error);
+      }
     };
     fetchInitialVolume();
   }, []);
 
   const handleValueChange = async (value: number) => {
     volume.value = value;
+    console.log("volume", value);
     await VolumeManager.setVolume(value / 100);
   };
 
@@ -30,19 +35,37 @@ const AudioSlider = () => {
         progress={volume}
         minimumValue={min}
         maximumValue={max}
+        thumbWidth={0}
         onValueChange={handleValueChange}
+        containerStyle={{
+          borderRadius: 50,
+        }}
+        theme={{
+          minimumTrackTintColor: "#FDFDFD",
+          maximumTrackTintColor: "#5A5A5A",
+          bubbleBackgroundColor: "transparent", // Hide the value bubble
+          bubbleTextColor: "transparent", // Hide the value text
+        }}
+      />
+      <Ionicons
+        name="volume-high"
+        size={20}
+        color="#FDFDFD"
+        style={{
+          marginLeft: 8,
+        }}
       />
-      <Ionicons name="volume-high" size={24} color="black" />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   sliderContainer: {
+    width: 150,
+    display: "flex",
     flexDirection: "row",
-    alignItems: "center",
     justifyContent: "center",
-    padding: 10,
+    alignItems: "center",
   },
 });
 
diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx
index 50c88ae0..b875a859 100644
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -58,6 +58,7 @@ import { BlurView } from "expo-blur";
 import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
 import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import AudioSlider from "./AudioSlider";
 
 interface Props {
   item: BaseItemDto;
@@ -554,6 +555,7 @@ export const Controls: React.FC<Props> = ({
                 position: "absolute",
                 alignItems: "center",
                 transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
+                left: 0,
                 bottom: 30,
               }}
             >
@@ -627,6 +629,18 @@ export const Controls: React.FC<Props> = ({
                 </Text>
               </View>
             </TouchableOpacity>
+
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
+                bottom: 30,
+                right: 0,
+              }}
+            >
+              <AudioSlider />
+            </View>
           </View>
 
           <View