diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx
index d26744e8..d17d8494 100644
--- a/src/components/player/AndroidVideoPlayer.tsx
+++ b/src/components/player/AndroidVideoPlayer.tsx
@@ -2488,6 +2488,7 @@ const AndroidVideoPlayer: React.FC = () => {
left: 0,
right: 0,
bottom: 0,
+ zIndex: 30,
}}
>
{
{
const [brightness, setBrightness] = useState(1.0);
const [showVolumeOverlay, setShowVolumeOverlay] = useState(false);
const [showBrightnessOverlay, setShowBrightnessOverlay] = useState(false);
+ const [showVlcVolumeWarning, setShowVlcVolumeWarning] = useState(false);
+ const [hasShownVlcWarning, setHasShownVlcWarning] = useState(false);
+
+ // Load VLC warning state from storage
+ useEffect(() => {
+ const loadWarningState = async () => {
+ try {
+ const warningShown = await AsyncStorage.getItem('vlc_volume_warning_shown');
+ if (warningShown === 'true') {
+ setHasShownVlcWarning(true);
+ }
+ } catch (error) {
+ // Ignore storage errors
+ }
+ };
+ loadWarningState();
+ }, []);
const volumeOverlayOpacity = useRef(new Animated.Value(0)).current;
const brightnessOverlayOpacity = useRef(new Animated.Value(0)).current;
const volumeOverlayTimeout = useRef(null);
@@ -379,57 +396,20 @@ const VideoPlayer: React.FC = () => {
// Volume gesture handler (right side of screen)
const onVolumeGestureEvent = async (event: PanGestureHandlerGestureEvent) => {
const { translationY, state } = event.nativeEvent;
- const screenHeight = screenDimensions.height;
- const sensitivity = 0.2; // Reduced for finer control (VLC 0-100 range)
-
+
if (state === State.ACTIVE) {
- const deltaY = -translationY; // Invert for natural feel (up = increase)
- const volumeChange = deltaY * sensitivity;
- const newVolume = Math.max(0, Math.min(100, volume + volumeChange));
-
- if (Math.abs(newVolume - volume) > 0.5) { // Reduced threshold for smoother updates
- setVolume(newVolume);
- lastVolumeChange.current = Date.now();
-
- if (DEBUG_MODE) {
- logger.log(`[VideoPlayer] Volume set to: ${newVolume}`);
- }
-
- // Set VLC volume as well
- if (vlcRef.current) {
- try {
- vlcRef.current.setVolume(newVolume);
- } catch (error) {
- logger.warn('[VideoPlayer] Error setting VLC volume:', error);
- }
- }
-
- // Show overlay with smoother animation
- if (!showVolumeOverlay) {
- setShowVolumeOverlay(true);
- Animated.spring(volumeOverlayOpacity, {
- toValue: 1,
- tension: 100,
- friction: 8,
- useNativeDriver: true,
- }).start();
- }
-
- // Clear existing timeout
- if (volumeOverlayTimeout.current) {
- clearTimeout(volumeOverlayTimeout.current);
- }
-
- // Hide overlay after 1.5 seconds (reduced from 2 seconds)
- volumeOverlayTimeout.current = setTimeout(() => {
- Animated.timing(volumeOverlayOpacity, {
- toValue: 0,
- duration: 250,
- useNativeDriver: true,
- }).start(() => {
- setShowVolumeOverlay(false);
- });
- }, 1500);
+ // Show VLC volume warning only once per session
+ if (!showVlcVolumeWarning && !hasShownVlcWarning) {
+ setShowVlcVolumeWarning(true);
+ setHasShownVlcWarning(true);
+
+ // Save to storage that warning has been shown
+ AsyncStorage.setItem('vlc_volume_warning_shown', 'true').catch(() => {});
+
+ // Hide warning after 4 seconds
+ setTimeout(() => {
+ setShowVlcVolumeWarning(false);
+ }, 4000);
}
}
};
@@ -2214,6 +2194,7 @@ const VideoPlayer: React.FC = () => {
audioTrack={selectedAudioTrack ?? undefined}
textTrack={useCustomSubtitles ? -1 : (selectedTextTrack ?? undefined)}
autoAspectRatio
+ volume={volume / 100}
/>
@@ -2262,6 +2243,7 @@ const VideoPlayer: React.FC = () => {
left: 0,
right: 0,
bottom: 0,
+ zIndex: 30,
}}
>
{
{
fontWeight: '600',
letterSpacing: 0.5,
}}>
- {volume}%
+ {Math.round(volume)}%
@@ -2821,6 +2803,74 @@ const VideoPlayer: React.FC = () => {
)}
+ {/* VLC Volume Warning Overlay */}
+ {showVlcVolumeWarning && (
+
+
+
+
+
+ Volume Control Not Available
+
+
+
+ VLC player doesn't support volume gestures.{'\n'}Use your device volume buttons instead.
+
+
+
+ This message won't be shown again
+
+
+
+ )}
+
{/* Resume overlay removed when AlwaysResume is enabled; overlay component omitted */}
diff --git a/src/components/player/subtitles/CustomSubtitles.tsx b/src/components/player/subtitles/CustomSubtitles.tsx
index 5a6fd592..86c9813f 100644
--- a/src/components/player/subtitles/CustomSubtitles.tsx
+++ b/src/components/player/subtitles/CustomSubtitles.tsx
@@ -90,14 +90,13 @@ export const CustomSubtitles: React.FC = ({
{
backgroundColor: bgColor,
position: 'relative',
- width: '100%',
alignItems: 'center',
}
]}>
{useCrispSvgOutline ? (
// Crisp outline using react-native-svg (stroke under, fill on top)