mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-01-11 20:10:25 +00:00
Fix ExoPlayer subtitle styling and iOS MPV config
- Fix subtitle track selection (only first track worked) - Fix subtitle styling (background, outline, bottom offset) - Update iOS MPV to match Wayve settings (Vulkan, HDR, stability options) - Add patch-package for react-native-video fixes
This commit is contained in:
tapframe
parent
d31cd2fcdc
commit
82d0ebb714
5 changed files with 98063 additions and 92 deletions
1
MPVKit
Submodule
1
MPVKit
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 28de60c09651b8ca899d67456e02d285c92ceee2
|
||||
97928
patches/react-native-video+6.18.0.patch
Normal file
97928
patches/react-native-video+6.18.0.patch
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -339,7 +339,8 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
|
||||
if (data.audioTracks) {
|
||||
const formatted = data.audioTracks.map((t: any, i: number) => ({
|
||||
id: t.index !== undefined ? t.index : i,
|
||||
// react-native-video selectedAudioTrack {type:'index'} uses 0-based list index.
|
||||
id: i,
|
||||
name: t.title || t.name || `Track ${i + 1}`,
|
||||
language: t.language
|
||||
}));
|
||||
|
|
@ -347,7 +348,9 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
}
|
||||
if (data.textTracks) {
|
||||
const formatted = data.textTracks.map((t: any, i: number) => ({
|
||||
id: t.index !== undefined ? t.index : i,
|
||||
// react-native-video selectedTextTrack {type:'index'} uses 0-based list index.
|
||||
// Using `t.index` can be non-unique/misaligned and breaks selection/rendering.
|
||||
id: i,
|
||||
name: t.title || t.name || `Track ${i + 1}`,
|
||||
language: t.language
|
||||
}));
|
||||
|
|
@ -360,7 +363,7 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
// Auto-select audio track based on preferences
|
||||
if (data.audioTracks && data.audioTracks.length > 0 && settings?.preferredAudioLanguage) {
|
||||
const formatted = data.audioTracks.map((t: any, i: number) => ({
|
||||
id: t.index !== undefined ? t.index : i,
|
||||
id: i,
|
||||
name: t.title || t.name || `Track ${i + 1}`,
|
||||
language: t.language
|
||||
}));
|
||||
|
|
@ -380,7 +383,7 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
// Only pre-select internal if preference is internal or any
|
||||
if (sourcePreference === 'internal' || sourcePreference === 'any') {
|
||||
const formatted = data.textTracks.map((t: any, i: number) => ({
|
||||
id: t.index !== undefined ? t.index : i,
|
||||
id: i,
|
||||
name: t.title || t.name || `Track ${i + 1}`,
|
||||
language: t.language
|
||||
}));
|
||||
|
|
@ -479,11 +482,11 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
useEffect(() => {
|
||||
if (!useCustomSubtitles || customSubtitles.length === 0) return;
|
||||
|
||||
const cueNow = customSubtitles.find(
|
||||
cue => playerState.currentTime >= cue.start && playerState.currentTime <= cue.end
|
||||
);
|
||||
// Apply timing offset for custom/addon subtitles (ExoPlayer internal subtitles do not support offset)
|
||||
const adjustedTime = playerState.currentTime + (subtitleOffsetSec || 0);
|
||||
const cueNow = customSubtitles.find(cue => adjustedTime >= cue.start && adjustedTime <= cue.end);
|
||||
setCurrentSubtitle(cueNow ? cueNow.text : '');
|
||||
}, [playerState.currentTime, useCustomSubtitles, customSubtitles]);
|
||||
}, [playerState.currentTime, subtitleOffsetSec, useCustomSubtitles, customSubtitles]);
|
||||
|
||||
const toggleControls = useCallback(() => {
|
||||
playerState.setShowControls(prev => {
|
||||
|
|
@ -678,8 +681,8 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
mpvPlayerRef.current.setSubtitleTrack(-1);
|
||||
}
|
||||
|
||||
// Set initial subtitle based on current time
|
||||
const adjustedTime = playerState.currentTime;
|
||||
// Set initial subtitle based on current time (+ any timing offset)
|
||||
const adjustedTime = playerState.currentTime + (subtitleOffsetSec || 0);
|
||||
const cueNow = parsedCues.find(cue => adjustedTime >= cue.start && adjustedTime <= cue.end);
|
||||
setCurrentSubtitle(cueNow ? cueNow.text : '');
|
||||
|
||||
|
|
@ -691,7 +694,7 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
} finally {
|
||||
setIsLoadingSubtitles(false);
|
||||
}
|
||||
}, [modals, playerState.currentTime, tracksHook]);
|
||||
}, [modals, playerState.currentTime, subtitleOffsetSec, tracksHook]);
|
||||
|
||||
const disableCustomSubtitles = useCallback(() => {
|
||||
setUseCustomSubtitles(false);
|
||||
|
|
@ -817,6 +820,7 @@ const AndroidVideoPlayer: React.FC = () => {
|
|||
subtitleBorderColor={subtitleOutlineColor}
|
||||
subtitleShadowEnabled={subtitleTextShadow}
|
||||
subtitlePosition={Math.max(50, 100 - Math.floor(subtitleBottomOffset * 0.3))} // Scale offset to MPV range
|
||||
subtitleBottomOffsetPx={subtitleBottomOffset}
|
||||
subtitleDelay={subtitleOffsetSec}
|
||||
subtitleAlignment={subtitleAlign}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -77,6 +77,8 @@ interface VideoSurfaceProps {
|
|||
subtitleBorderColor?: string;
|
||||
subtitleShadowEnabled?: boolean;
|
||||
subtitlePosition?: number;
|
||||
// Raw bottom offset from UI (pixels). ExoPlayer positioning works best when driven directly from px.
|
||||
subtitleBottomOffsetPx?: number;
|
||||
subtitleDelay?: number;
|
||||
subtitleAlignment?: 'left' | 'center' | 'right';
|
||||
}
|
||||
|
|
@ -128,6 +130,7 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
|
|||
subtitleBorderColor,
|
||||
subtitleShadowEnabled,
|
||||
subtitlePosition,
|
||||
subtitleBottomOffsetPx,
|
||||
subtitleDelay,
|
||||
subtitleAlignment,
|
||||
}) => {
|
||||
|
|
@ -173,15 +176,19 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
|
|||
console.log('[VideoSurface] ExoPlayer textTracks raw:', JSON.stringify(data.textTracks, null, 2));
|
||||
|
||||
// Extract track information
|
||||
// IMPORTANT:
|
||||
// react-native-video expects selected*Track with { type: 'index', value: <0-based array index> }.
|
||||
// Some RNVideo/Exo track objects expose `index`, but it is not guaranteed to be unique or
|
||||
// aligned with the list index. Using it can cause only the first item to render/select.
|
||||
const audioTracks = data.audioTracks?.map((t: any, i: number) => ({
|
||||
id: t.index ?? i,
|
||||
id: i,
|
||||
name: t.title || t.language || `Track ${i + 1}`,
|
||||
language: t.language,
|
||||
})) ?? [];
|
||||
|
||||
const subtitleTracks = data.textTracks?.map((t: any, i: number) => {
|
||||
const track = {
|
||||
id: t.index ?? i,
|
||||
id: i,
|
||||
name: t.title || t.language || `Track ${i + 1}`,
|
||||
language: t.language,
|
||||
};
|
||||
|
|
@ -281,6 +288,11 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
const alphaHex = (opacity01: number) => {
|
||||
const a = Math.max(0, Math.min(1, opacity01));
|
||||
return Math.round(a * 255).toString(16).padStart(2, '0').toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.videoContainer, {
|
||||
width: screenDimensions.width,
|
||||
|
|
@ -314,21 +326,40 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
|
|||
automaticallyWaitsToMinimizeStalling={true}
|
||||
useTextureView={true}
|
||||
// Subtitle Styling for ExoPlayer
|
||||
// ExoPlayer supports: fontSize, paddingTop/Bottom/Left/Right, opacity, subtitlesFollowVideo
|
||||
// ExoPlayer (via our patched react-native-video) supports:
|
||||
// - fontSize, paddingTop/Bottom/Left/Right, opacity, subtitlesFollowVideo
|
||||
// - PLUS: textColor, backgroundColor, edgeType, edgeColor (outline/shadow)
|
||||
subtitleStyle={{
|
||||
// Convert MPV-scaled size back to ExoPlayer scale (~1.5x conversion was applied)
|
||||
fontSize: subtitleSize ? Math.round(subtitleSize / 1.5) : 18,
|
||||
paddingTop: 0,
|
||||
// Convert MPV position (0=top, 100=bottom) to paddingBottom
|
||||
// Higher MPV position = less padding from bottom
|
||||
paddingBottom: subtitlePosition ? Math.max(20, Math.round((100 - subtitlePosition) * 2)) : 60,
|
||||
// Drive ExoPlayer subtitle placement directly via px offset.
|
||||
// Native will convert this into bottomPaddingFraction after layout.
|
||||
paddingBottom: typeof subtitleBottomOffsetPx === 'number'
|
||||
? Math.max(0, Math.round(subtitleBottomOffsetPx))
|
||||
: 0,
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
// Opacity controls entire subtitle view visibility
|
||||
// Always keep text visible (opacity 1), background control is limited in ExoPlayer
|
||||
opacity: 1,
|
||||
subtitlesFollowVideo: false,
|
||||
}}
|
||||
// Extended styling (requires our patched RNVideo on Android)
|
||||
textColor: subtitleColor || '#FFFFFFFF',
|
||||
// Android Color.parseColor doesn't accept rgba(...). Use #AARRGGBB.
|
||||
backgroundColor:
|
||||
subtitleBackgroundOpacity && subtitleBackgroundOpacity > 0
|
||||
? `#${alphaHex(subtitleBackgroundOpacity)}000000`
|
||||
: '#00000000',
|
||||
edgeType:
|
||||
subtitleBorderSize && subtitleBorderSize > 0
|
||||
? 'outline'
|
||||
: (subtitleShadowEnabled ? 'shadow' : 'none'),
|
||||
edgeColor:
|
||||
(subtitleBorderSize && subtitleBorderSize > 0 && subtitleBorderColor)
|
||||
? subtitleBorderColor
|
||||
: (subtitleShadowEnabled ? '#FF000000' : 'transparent'),
|
||||
} as any}
|
||||
/>
|
||||
) : (
|
||||
/* MPV Player fallback */
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
|
|||
const isCompact = width < 360 || height < 640;
|
||||
// Internal subtitle is active when a built-in track is selected AND not using custom/addon subtitles
|
||||
const isUsingInternalSubtitle = selectedTextTrack >= 0 && !useCustomSubtitles;
|
||||
// ExoPlayer has limited styling support - hide unsupported options when using ExoPlayer with internal subs
|
||||
// ExoPlayer internal subtitles have limited styling support
|
||||
const isExoPlayerInternal = useExoPlayer && isUsingInternalSubtitle;
|
||||
const sectionPad = isCompact ? 12 : 16;
|
||||
const chipPadH = isCompact ? 8 : 12;
|
||||
|
|
@ -122,7 +122,9 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
|
|||
const menuMaxHeight = height * 0.95;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) fetchAvailableSubtitles();
|
||||
if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) {
|
||||
fetchAvailableSubtitles();
|
||||
}
|
||||
}, [showSubtitleModal]);
|
||||
|
||||
const handleClose = () => setShowSubtitleModal(false);
|
||||
|
|
@ -259,8 +261,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
|
|||
</View>
|
||||
</View>
|
||||
|
||||
{/* Quick Presets - Hidden for ExoPlayer internal subtitles */}
|
||||
{!isExoPlayerInternal && (
|
||||
{/* Quick Presets - only for CustomSubtitles overlay */}
|
||||
{!isUsingInternalSubtitle && (
|
||||
<View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
|
||||
<MaterialIcons name="star" size={16} color="rgba(255,255,255,0.7)" />
|
||||
|
|
@ -329,45 +331,42 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
|
|||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{/* Show Background - Not supported on ExoPlayer internal subtitles */}
|
||||
{!isExoPlayerInternal && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="layers" size={16} color="rgba(255,255,255,0.7)" />
|
||||
<Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>{t('player_ui.show_background')}</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={{ width: isCompact ? 48 : 54, height: isCompact ? 28 : 30, backgroundColor: subtitleBackground ? 'white' : 'rgba(255,255,255,0.25)', borderRadius: 15, justifyContent: 'center', alignItems: subtitleBackground ? 'flex-end' : 'flex-start', paddingHorizontal: 3 }}
|
||||
onPress={toggleSubtitleBackground}
|
||||
>
|
||||
<View style={{ width: 24, height: 24, backgroundColor: subtitleBackground ? 'black' : 'white', borderRadius: 12 }} />
|
||||
</TouchableOpacity>
|
||||
{/* Show Background */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="layers" size={16} color="rgba(255,255,255,0.7)" />
|
||||
<Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>{t('player_ui.show_background')}</Text>
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={{ width: isCompact ? 48 : 54, height: isCompact ? 28 : 30, backgroundColor: subtitleBackground ? 'white' : 'rgba(255,255,255,0.25)', borderRadius: 15, justifyContent: 'center', alignItems: subtitleBackground ? 'flex-end' : 'flex-start', paddingHorizontal: 3 }}
|
||||
onPress={toggleSubtitleBackground}
|
||||
>
|
||||
<View style={{ width: 24, height: 24, backgroundColor: subtitleBackground ? 'black' : 'white', borderRadius: 12 }} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Advanced controls - Limited for ExoPlayer */}
|
||||
{/* Advanced controls */}
|
||||
<View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad, gap: isCompact ? 10 : 14 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="build" size={16} color="rgba(255,255,255,0.7)" />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>{isExoPlayerInternal ? t('player_ui.position') : t('player_ui.advanced')}</Text>
|
||||
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>{isUsingInternalSubtitle ? t('player_ui.position') : t('player_ui.advanced')}</Text>
|
||||
</View>
|
||||
{/* Text Color - Not supported on ExoPlayer internal subtitles */}
|
||||
{!isExoPlayerInternal && (
|
||||
<View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="palette" size={16} color="rgba(255,255,255,0.7)" />
|
||||
<Text style={{ color: 'white', marginLeft: 8, fontWeight: '600' }}>{t('player_ui.text_color')}</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'flex-end' }}>
|
||||
{['#FFFFFF', '#FFD700', '#00E5FF', '#FF5C5C', '#00FF88', '#9b59b6', '#f97316'].map(c => (
|
||||
<TouchableOpacity key={c} onPress={() => setSubtitleTextColor(c)} style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: c, borderWidth: 2, borderColor: subtitleTextColor === c ? '#fff' : 'rgba(255,255,255,0.3)' }} />
|
||||
))}
|
||||
</View>
|
||||
{/* Text Color - supported for MPV built-in, and for CustomSubtitles */}
|
||||
<View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="palette" size={16} color="rgba(255,255,255,0.7)" />
|
||||
<Text style={{ color: 'white', marginLeft: 8, fontWeight: '600' }}>{t('player_ui.text_color')}</Text>
|
||||
</View>
|
||||
)}
|
||||
{/* Align - Not supported on ExoPlayer internal subtitles */}
|
||||
{!isExoPlayerInternal && (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'flex-end' }}>
|
||||
{['#FFFFFF', '#FFD700', '#00E5FF', '#FF5C5C', '#00FF88', '#9b59b6', '#f97316'].map(c => (
|
||||
<TouchableOpacity key={c} onPress={() => setSubtitleTextColor(c)} style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: c, borderWidth: 2, borderColor: subtitleTextColor === c ? '#fff' : 'rgba(255,255,255,0.3)' }} />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Align - only supported for CustomSubtitles overlay */}
|
||||
{!isUsingInternalSubtitle && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.align')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
|
|
@ -393,23 +392,21 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
|
|||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{/* Background Opacity - Not supported on ExoPlayer internal subtitles */}
|
||||
{!isExoPlayerInternal && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.background_opacity')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
|
||||
<TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.max(0, +(subtitleBgOpacity - 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="remove" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
<View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
|
||||
<Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleBgOpacity.toFixed(1)}</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.min(1, +(subtitleBgOpacity + 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="add" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
{/* Background Opacity */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.background_opacity')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
|
||||
<TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.max(0, +(subtitleBgOpacity - 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="remove" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
<View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
|
||||
<Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleBgOpacity.toFixed(1)}</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.min(1, +(subtitleBgOpacity + 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="add" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{!isUsingInternalSubtitle && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.text_shadow')}</Text>
|
||||
|
|
@ -418,31 +415,41 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
|
|||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
{!isUsingInternalSubtitle && (
|
||||
<>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white' }}>{t('player_ui.outline_color')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
{['#000000', '#FFFFFF', '#00E5FF', '#FF5C5C'].map(c => (
|
||||
<TouchableOpacity key={c} onPress={() => setSubtitleOutlineColor(c)} style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: c, borderWidth: 2, borderColor: subtitleOutlineColor === c ? '#fff' : 'rgba(255,255,255,0.3)' }} />
|
||||
))}
|
||||
</View>
|
||||
{/* Outline controls (now supported for ExoPlayer internal via native patch) */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white' }}>{t('player_ui.outline_color')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
{['#000000', '#FFFFFF', '#00E5FF', '#FF5C5C'].map(c => (
|
||||
<TouchableOpacity key={c} onPress={() => setSubtitleOutlineColor(c)} style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: c, borderWidth: 2, borderColor: subtitleOutlineColor === c ? '#fff' : 'rgba(255,255,255,0.3)' }} />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white' }}>{t('player_ui.outline_width')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
|
||||
<TouchableOpacity
|
||||
disabled={isExoPlayerInternal}
|
||||
onPress={() => setSubtitleOutlineWidth(Math.max(0, subtitleOutlineWidth - 1))}
|
||||
style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center', opacity: isExoPlayerInternal ? 0.4 : 1 }}
|
||||
>
|
||||
<MaterialIcons name="remove" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
<View style={{ minWidth: 42, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
|
||||
<Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleOutlineWidth}</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={{ color: 'white' }}>{t('player_ui.outline_width')}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
|
||||
<TouchableOpacity onPress={() => setSubtitleOutlineWidth(Math.max(0, subtitleOutlineWidth - 1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="remove" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
<View style={{ minWidth: 42, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
|
||||
<Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleOutlineWidth}</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setSubtitleOutlineWidth(subtitleOutlineWidth + 1)} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="add" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
<TouchableOpacity
|
||||
disabled={isExoPlayerInternal}
|
||||
onPress={() => setSubtitleOutlineWidth(subtitleOutlineWidth + 1)}
|
||||
style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center', opacity: isExoPlayerInternal ? 0.4 : 1 }}
|
||||
>
|
||||
<MaterialIcons name="add" color="#fff" size={18} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{isExoPlayerInternal && (
|
||||
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 11, marginTop: 6 }}>
|
||||
Outline thickness isn’t supported on Android ExoPlayer subtitles. Use outline on/off + color.
|
||||
</Text>
|
||||
)}
|
||||
{!isUsingInternalSubtitle && (
|
||||
<View style={{ flexDirection: isCompact ? 'column' : 'row', justifyContent: 'space-between', gap: 12 }}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue