Update SubtitleModals to conditionally display font size and background toggle sections based on custom subtitles setting. Adjust custom subtitle container position for better alignment.

This commit is contained in:
tapframe 2025-07-08 15:54:48 +05:30
parent 897294fdfc
commit 65ece6a32a
2 changed files with 31 additions and 27 deletions

View file

@ -169,7 +169,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
contentContainerStyle={{ padding: 20, paddingBottom: 40 }} contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
> >
{/* Font Size Section */} {/* Font Size Section - Only show for custom subtitles */}
{useCustomSubtitles && (
<View style={{ marginBottom: 30 }}> <View style={{ marginBottom: 30 }}>
<Text style={{ <Text style={{
color: 'rgba(255, 255, 255, 0.7)', color: 'rgba(255, 255, 255, 0.7)',
@ -227,8 +228,10 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
)}
{/* Background Toggle Section */} {/* Background Toggle Section - Only show for custom subtitles */}
{useCustomSubtitles && (
<View style={{ marginBottom: 30 }}> <View style={{ marginBottom: 30 }}>
<Text style={{ <Text style={{
color: 'rgba(255, 255, 255, 0.7)', color: 'rgba(255, 255, 255, 0.7)',
@ -278,6 +281,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
)}
{/* Built-in Subtitles */} {/* Built-in Subtitles */}
{vlcTextTracks.length > 0 && ( {vlcTextTracks.length > 0 && (

View file

@ -530,7 +530,7 @@ export const styles = StyleSheet.create({
}, },
customSubtitleContainer: { customSubtitleContainer: {
position: 'absolute', position: 'absolute',
bottom: 40, // Position above controls and progress bar bottom: 20, // Position lower, closer to bottom
left: 20, left: 20,
right: 20, right: 20,
alignItems: 'center', alignItems: 'center',