diff --git a/components/AndroidVideoPlayer.tsx b/components/AndroidVideoPlayer.tsx
index 416e028..33f538b 100644
--- a/components/AndroidVideoPlayer.tsx
+++ b/components/AndroidVideoPlayer.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Platform } from 'react-native';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Platform, Animated, TouchableWithoutFeedback, View } from 'react-native';
import Video, { VideoRef, SelectedTrack, BufferingStrategyType, ResizeMode } from 'react-native-video';
interface VideoPlayerProps {
diff --git a/local-scrapers-repo b/local-scrapers-repo
index c176aab..6591e3b 160000
--- a/local-scrapers-repo
+++ b/local-scrapers-repo
@@ -1 +1 @@
-Subproject commit c176aabb4edd73a709ebdc097688e780b65b651a
+Subproject commit 6591e3bc12a64a191367829d3fa5eb3783085c95
diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx
index d15522d..d6b4870 100644
--- a/src/components/player/AndroidVideoPlayer.tsx
+++ b/src/components/player/AndroidVideoPlayer.tsx
@@ -1372,6 +1372,40 @@ const AndroidVideoPlayer: React.FC = () => {
}
}, [nextEpisode, id, isLoadingNextEpisode, navigation, metadata, imdbId, backdrop]);
+ // Function to hide pause overlay and show controls
+ const hidePauseOverlay = useCallback(() => {
+ if (showPauseOverlay) {
+ Animated.parallel([
+ Animated.timing(pauseOverlayOpacity, {
+ toValue: 0,
+ duration: 220,
+ useNativeDriver: true,
+ }),
+ Animated.timing(pauseOverlayTranslateY, {
+ toValue: 8,
+ duration: 220,
+ useNativeDriver: true,
+ })
+ ]).start(() => setShowPauseOverlay(false));
+
+ // Show controls when overlay is touched
+ if (!showControls) {
+ setShowControls(true);
+ Animated.timing(fadeAnim, {
+ toValue: 1,
+ duration: 300,
+ useNativeDriver: true,
+ }).start();
+
+ // Auto-hide controls after 5 seconds
+ if (controlsTimeout.current) {
+ clearTimeout(controlsTimeout.current);
+ }
+ controlsTimeout.current = setTimeout(hideControls, 5000);
+ }
+ }
+ }, [showPauseOverlay, pauseOverlayOpacity, pauseOverlayTranslateY, showControls, fadeAnim, controlsTimeout, hideControls]);
+
// Handle paused overlay after 5 seconds of being paused
useEffect(() => {
if (paused) {
@@ -1400,20 +1434,7 @@ const AndroidVideoPlayer: React.FC = () => {
clearTimeout(pauseOverlayTimerRef.current);
pauseOverlayTimerRef.current = null;
}
- if (showPauseOverlay) {
- Animated.parallel([
- Animated.timing(pauseOverlayOpacity, {
- toValue: 0,
- duration: 220,
- useNativeDriver: true,
- }),
- Animated.timing(pauseOverlayTranslateY, {
- toValue: 8,
- duration: 220,
- useNativeDriver: true,
- })
- ]).start(() => setShowPauseOverlay(false));
- }
+ hidePauseOverlay();
}
return () => {
if (pauseOverlayTimerRef.current) {
@@ -1421,7 +1442,7 @@ const AndroidVideoPlayer: React.FC = () => {
pauseOverlayTimerRef.current = null;
}
};
- }, [paused]);
+ }, [paused, hidePauseOverlay]);
// Handle next episode button visibility based on current time and next episode availability
useEffect(() => {
@@ -1924,65 +1945,76 @@ const AndroidVideoPlayer: React.FC = () => {
/>
{showPauseOverlay && (
-
- {/* Strong horizontal fade from left side */}
-
+
+ {/* Strong horizontal fade from left side */}
+
+
+
-
-
-
- You're watching
-
- {title}
-
- {!!year && (
-
- {`${year}${type === 'series' && season && episode ? ` • S${season}E${episode}` : ''}`}
+
+ You're watching
+
+ {title}
- )}
- {!!episodeTitle && (
-
- {episodeTitle}
-
- )}
- {(currentEpisodeDescription || metadata?.description) && (
-
- {(type as any) === 'series' ? (currentEpisodeDescription || metadata?.description || '') : (metadata?.description || '')}
-
- )}
+ {!!year && (
+
+ {`${year}${type === 'series' && season && episode ? ` • S${season}E${episode}` : ''}`}
+
+ )}
+ {!!episodeTitle && (
+
+ {episodeTitle}
+
+ )}
+ {(currentEpisodeDescription || metadata?.description) && (
+
+ {(type as any) === 'series' ? (currentEpisodeDescription || metadata?.description || '') : (metadata?.description || '')}
+
+ )}
+
-
+
)}
{/* Next Episode Button */}
diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
index ee2b5a9..88d38f9 100644
--- a/src/components/player/VideoPlayer.tsx
+++ b/src/components/player/VideoPlayer.tsx
@@ -1272,6 +1272,40 @@ const VideoPlayer: React.FC = () => {
}
}, [nextEpisode, id, isLoadingNextEpisode, navigation, metadata, imdbId, backdrop]);
+ // Function to hide pause overlay and show controls
+ const hidePauseOverlay = useCallback(() => {
+ if (showPauseOverlay) {
+ Animated.parallel([
+ Animated.timing(pauseOverlayOpacity, {
+ toValue: 0,
+ duration: 220,
+ useNativeDriver: true,
+ }),
+ Animated.timing(pauseOverlayTranslateY, {
+ toValue: 8,
+ duration: 220,
+ useNativeDriver: true,
+ })
+ ]).start(() => setShowPauseOverlay(false));
+
+ // Show controls when overlay is touched
+ if (!showControls) {
+ setShowControls(true);
+ Animated.timing(fadeAnim, {
+ toValue: 1,
+ duration: 300,
+ useNativeDriver: true,
+ }).start();
+
+ // Auto-hide controls after 5 seconds
+ if (controlsTimeout.current) {
+ clearTimeout(controlsTimeout.current);
+ }
+ controlsTimeout.current = setTimeout(hideControls, 5000);
+ }
+ }
+ }, [showPauseOverlay, pauseOverlayOpacity, pauseOverlayTranslateY, showControls, fadeAnim, controlsTimeout, hideControls]);
+
// Handle paused overlay after 5 seconds of being paused
useEffect(() => {
if (paused) {
@@ -1300,20 +1334,7 @@ const VideoPlayer: React.FC = () => {
clearTimeout(pauseOverlayTimerRef.current);
pauseOverlayTimerRef.current = null;
}
- if (showPauseOverlay) {
- Animated.parallel([
- Animated.timing(pauseOverlayOpacity, {
- toValue: 0,
- duration: 220,
- useNativeDriver: true,
- }),
- Animated.timing(pauseOverlayTranslateY, {
- toValue: 8,
- duration: 220,
- useNativeDriver: true,
- })
- ]).start(() => setShowPauseOverlay(false));
- }
+ hidePauseOverlay();
}
return () => {
if (pauseOverlayTimerRef.current) {
@@ -1321,7 +1342,7 @@ const VideoPlayer: React.FC = () => {
pauseOverlayTimerRef.current = null;
}
};
- }, [paused]);
+ }, [paused, hidePauseOverlay]);
// Handle next episode button visibility based on current time and next episode availability
useEffect(() => {
@@ -1827,65 +1848,76 @@ const VideoPlayer: React.FC = () => {
/>
{showPauseOverlay && (
-
- {/* Strong horizontal fade from left side */}
-
+
+ {/* Strong horizontal fade from left side */}
+
+
+
-
-
-
- You're watching
-
- {title}
-
- {!!year && (
-
- {`${year}${type === 'series' && season && episode ? ` • S${season}E${episode}` : ''}`}
+
+ You're watching
+
+ {title}
- )}
- {!!episodeTitle && (
-
- {episodeTitle}
-
- )}
- {(currentEpisodeDescription || metadata?.description) && (
-
- {type === 'series' ? (currentEpisodeDescription || metadata?.description || '') : (metadata?.description || '')}
-
- )}
+ {!!year && (
+
+ {`${year}${type === 'series' && season && episode ? ` • S${season}E${episode}` : ''}`}
+
+ )}
+ {!!episodeTitle && (
+
+ {episodeTitle}
+
+ )}
+ {(currentEpisodeDescription || metadata?.description) && (
+
+ {type === 'series' ? (currentEpisodeDescription || metadata?.description || '') : (metadata?.description || '')}
+
+ )}
+
-
+
)}
{/* Next Episode Button */}