Refactor SpeedActivatedOverlay component props and styles

This commit is contained in:
AdityasahuX07 2025-12-31 18:48:10 +05:30 committed by GitHub
parent af96d30122
commit d3041f99cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,35 +1,57 @@
/**
* Shared Speed Activated Overlay Component
* Used by both Android (VLC) and iOS (KSPlayer) players
*/
import React from 'react';
import { View, Text, Animated } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { styles } from '../utils/playerStyles';
interface SpeedActivatedOverlayProps {
visible: boolean;
opacity: Animated.Value;
opacity: Animated.Value | number;
speed: number;
screenDimensions: { width: number; height: number };
}
export const SpeedActivatedOverlay: React.FC<SpeedActivatedOverlayProps> = ({
visible,
opacity,
speed
speed,
screenDimensions
}) => {
if (!visible) return null;
// Safety check to prevent the 'height' of undefined error
if (!visible || !screenDimensions) return null;
return (
<Animated.View
style={[
styles.speedActivatedOverlay,
{ opacity: opacity }
]}
style={{
position: 'absolute',
top: screenDimensions.height * 0.06,
left: 0,
right: 0,
alignItems: 'center',
opacity: opacity,
zIndex: 1000,
}}
>
<View style={styles.speedActivatedContainer}>
<MaterialIcons name="fast-forward" size={32} color="#FFFFFF" />
<Text style={styles.speedActivatedText}>{speed}x Speed</Text>
<View style={{
flexDirection: 'row',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: 35,
paddingHorizontal: 16,
paddingVertical: 10,
alignItems: 'center',
elevation: 5,
}}>
<MaterialIcons
name="fast-forward"
size={20}
color="white"
style={{ marginRight: 6 }}
/>
<Text style={{
color: 'white',
fontSize: 15,
fontWeight: '600',
}}>
{speed}x
</Text>
</View>
</Animated.View>
);