WIP

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",
   },
 });
 

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