Merge pull request #272 from Alexk2309/feature/audio-slider-in-controls

Feature/audio slider in controls

components/video-player/controls/AudioSlider.tsx

@@ -0,0 +1,94 @@
+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 { VolumeManager } from "react-native-volume-manager";
+import { Ionicons } from "@expo/vector-icons";
+
+const AudioSlider = () => {
+  const volume = useSharedValue<number>(50); // Explicitly type as number
+  const min = useSharedValue<number>(0); // Explicitly type as number
+  const max = useSharedValue<number>(100); // Explicitly type as number
+
+  useEffect(() => {
+    const fetchInitialVolume = async () => {
+      try {
+        const { volume: initialVolume } = await VolumeManager.getVolume();
+        console.log("initialVolume", initialVolume);
+        volume.value = initialVolume * 100;
+      } catch (error) {
+        console.error("Error fetching initial volume:", error);
+      }
+    };
+    fetchInitialVolume();
+
+    // Disable the native volume UI when the component mounts
+    VolumeManager.showNativeVolumeUI({ enabled: false });
+
+    return () => {
+      // Re-enable the native volume UI when the component unmounts
+      VolumeManager.showNativeVolumeUI({ enabled: true });
+    };
+  }, []);
+
+  const handleValueChange = async (value: number) => {
+    volume.value = value;
+    console.log("volume", value);
+    await VolumeManager.setVolume(value / 100);
+
+    // Re-call showNativeVolumeUI to ensure the setting is applied on iOS
+    VolumeManager.showNativeVolumeUI({ enabled: false });
+  };
+
+  useEffect(() => {
+    const volumeListener = VolumeManager.addVolumeListener((result) => {
+      console.log("Volume changed:", result.volume);
+      volume.value = result.volume * 100;
+    });
+
+    return () => {
+      volumeListener.remove();
+    };
+  }, []);
+
+  return (
+    <View style={styles.sliderContainer}>
+      <Slider
+        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,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    width: 150,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default AudioSlider;

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

package.json

@@ -71,7 +71,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-awesome-slider": "^2.5.6",
-    "react-native-bottom-tabs": "^0.7.3",
+    "react-native-bottom-tabs": "0.7.1",
     "react-native-circular-progress": "^1.4.1",
     "react-native-compressor": "^1.9.0",
     "react-native-device-info": "^14.0.1",
@@ -95,6 +95,7 @@
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.2",
     "react-native-video": "^6.7.0",
+    "react-native-volume-manager": "^1.10.0",
     "react-native-web": "~0.19.13",
     "sonner-native": "^0.14.2",
     "tailwindcss": "3.3.2",