movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 16:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: pretty overlays for gesture controls

Browse Source
This commit is contained in:
Adrian Castro
2024-02-14 15:08:16 +01:00
parent bd6c2409c3
commit 88da9895f9
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/expo/src/app/videoPlayer/index.tsx
View File

@@ -5,6 +5,7 @@ import {
Dimensions, Dimensions,
Platform, Platform,
StyleSheet, StyleSheet,
Text,
View, View,
} from "react-native"; } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler"; import { Gesture, GestureDetector } from "react-native-gesture-handler";
@@ -47,6 +48,8 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
const [headerData, setHeaderData] = useState<HeaderData>(); const [headerData, setHeaderData] = useState<HeaderData>();
const [resizeMode, setResizeMode] = useState(ResizeMode.CONTAIN); const [resizeMode, setResizeMode] = useState(ResizeMode.CONTAIN);
const [shouldPlay, setShouldPlay] = useState(true); const [shouldPlay, setShouldPlay] = useState(true);
const [showVolumeOverlay, setShowVolumeOverlay] = useState(false);
const [showBrightnessOverlay, setShowBrightnessOverlay] = useState(false);
const [currentVolume, setCurrentVolume] = useState(0.5); const [currentVolume, setCurrentVolume] = useState(0.5);
const router = useRouter(); const router = useRouter();
const scale = useSharedValue(1); const scale = useSharedValue(1);
@@ -88,11 +91,15 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
const handleVolumeChange = (newValue: number) => { const handleVolumeChange = (newValue: number) => {
setCurrentVolume(newValue); setCurrentVolume(newValue);
setShowVolumeOverlay(true);
setTimeout(() => setShowVolumeOverlay(false), 2000);
}; };
const handleBrightnessChange = async (newValue: number) => { const handleBrightnessChange = async (newValue: number) => {
try { try {
await Brightness.setBrightnessAsync(newValue); await Brightness.setBrightnessAsync(newValue);
setShowBrightnessOverlay(true);
setTimeout(() => setShowBrightnessOverlay(false), 2000);
} catch (error) { } catch (error) {
console.error("Failed to set brightness:", error); console.error("Failed to set brightness:", error);
} }
@@ -243,6 +250,20 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
{!isLoading && headerData && ( {!isLoading && headerData && (
<ControlsOverlay headerData={headerData} /> <ControlsOverlay headerData={headerData} />
)} )}
{showVolumeOverlay && (
<View style={styles.overlay}>
<Text style={styles.overlayText}>
Volume: {Math.round(currentVolume * 100)}%
</Text>
</View>
)}
{showBrightnessOverlay && (
<View style={styles.overlay}>
<Text style={styles.overlayText}>
Brightness: {Math.round(brightness.value * 100)}%
</Text>
</View>
)}
</View> </View>
</GestureDetector> </GestureDetector>
); );
@@ -286,4 +307,16 @@ const styles = StyleSheet.create({
left: 0, left: 0,
right: 0, right: 0,
}, },
overlay: {
position: "absolute",
bottom: 50,
alignSelf: "center",
backgroundColor: "rgba(0,0,0,0.5)",
padding: 10,
borderRadius: 5,
},
overlayText: {
color: "#fff",
fontSize: 16,
},
}); });