diff --git a/bun.lockb b/bun.lockb index 19c66a0c..ebdbe965 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/video-player/controls/AudioSlider.tsx b/components/video-player/controls/AudioSlider.tsx index df1953dd..0fe613d3 100644 --- a/components/video-player/controls/AudioSlider.tsx +++ b/components/video-player/controls/AudioSlider.tsx @@ -2,7 +2,7 @@ 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 { VolumeManager } from "react-native-volume-manager"; import { Ionicons } from "@expo/vector-icons"; const AudioSlider = () => { @@ -13,7 +13,7 @@ const AudioSlider = () => { useEffect(() => { const fetchInitialVolume = async () => { try { - const initialVolume = await VolumeManager.getVolume(); + const { volume: initialVolume } = await VolumeManager.getVolume(); console.log("initialVolume", initialVolume); volume.value = initialVolume * 100; } catch (error) { @@ -21,14 +21,36 @@ const AudioSlider = () => { } }; 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 (