Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-01-11 20:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

sub alignment changes

Browse source
This commit is contained in:
tapframe 2025-10-28 01:20:06 +05:30
parent a0a138081d
commit 4261891a35
2 changed files with 95 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/components/player/subtitles/CustomSubtitles.tsx
View file

@ -3,6 +3,7 @@ import { View, Text } from 'react-native';
import Svg, { Text as SvgText, TSpan } from 'react-native-svg';
import { styles } from '../utils/playerStyles';
import { SubtitleSegment } from '../utils/playerTypes';
import { detectRTL } from '../utils/playerUtils';
interface CustomSubtitlesProps {
useCustomSubtitles: boolean;
@ -77,20 +78,31 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
// Prepare content lines
const lines = String(currentSubtitle).split(/\r?\n/);
// Detect RTL for each line
const lineRTLStatus = lines.map(line => detectRTL(line));
const displayFontSize = subtitleSize * inverseScale;
const displayLineHeight = subtitleSize * lineHeightMultiplier * inverseScale;
const svgHeight = lines.length * displayLineHeight;
// Helper to render formatted segments
const renderFormattedText = (segments: SubtitleSegment[], lineIndex: number, keyPrefix: string) => {
const renderFormattedText = (segments: SubtitleSegment[], lineIndex: number, keyPrefix: string, isRTL?: boolean, customLetterSpacing?: number) => {
if (!segments || segments.length === 0) return null;
// For RTL, use a very small negative letter spacing to stretch words slightly
// This helps with proper diacritic spacing while maintaining ligatures
const effectiveLetterSpacing = isRTL ? (displayFontSize * -0.02) : (customLetterSpacing ?? letterSpacing);
// For RTL, adjust text alignment
const effectiveAlign = isRTL && align === 'left' ? 'right' : (isRTL && align === 'right' ? 'left' : align);
return (
<Text key={`${keyPrefix}-line-${lineIndex}`} style={{
color: textColor,
fontFamily,
textAlign: align,
letterSpacing,
textAlign: effectiveAlign,
letterSpacing: effectiveLetterSpacing,
fontSize: displayFontSize,
lineHeight: displayLineHeight,
}}>
@ -139,16 +151,33 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
preserveAspectRatio="xMidYMax meet"
>
{(() => {
const anchor = align === 'center' ? 'middle' : align === 'left' ? 'start' : 'end';
const x = align === 'center' ? 500 : (align === 'left' ? 0 : 1000);
// Determine alignment and anchor for RTL or LTR
const isRTL = lineRTLStatus[0] || lineRTLStatus.some(status => status);
let anchor: 'start' | 'middle' | 'end';
let x: number;
if (isRTL) {
// For RTL, always use 'end' anchor to position from right edge
anchor = 'end';
x = 1000;
} else {
anchor = align === 'center' ? 'middle' : align === 'left' ? 'start' : 'end';
x = align === 'center' ? 500 : (align === 'left' ? 0 : 1000);
}
const baseFontSize = displayFontSize;
const lineHeightPx = displayLineHeight;
const strokeWidth = Math.max(0.5, outlineWidth);
// For RTL, use a very small negative letter spacing to stretch words slightly
// This helps with proper diacritic spacing while maintaining ligatures
const effectiveLetterSpacing = isRTL ? (baseFontSize * -0.02) : letterSpacing;
// Position text from bottom up - last line should be at svgHeight - small margin
// Add descender buffer so letters like y/g/p/q/j aren't clipped
const descenderBuffer = baseFontSize * 0.35 + (strokeWidth * 0.5);
const lastLineBaselineY = svgHeight - descenderBuffer;
const startY = lastLineBaselineY - (lines.length - 1) * lineHeightPx;
return (
<>
{/* Stroke layer */}
@ -164,7 +193,7 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
strokeMiterlimit={2}
fontFamily={fontFamily}
fontSize={baseFontSize}
letterSpacing={letterSpacing}
letterSpacing={effectiveLetterSpacing}
>
{lines.map((line, idx) => (
<TSpan key={idx} x={x} dy={idx === 0 ? 0 : lineHeightPx}>
@ -180,7 +209,7 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
fill={textColor}
fontFamily={fontFamily}
fontSize={baseFontSize}
letterSpacing={letterSpacing}
letterSpacing={effectiveLetterSpacing}
>
{lines.map((line, idx) => (
<TSpan key={idx} x={x} dy={idx === 0 ? 0 : lineHeightPx}>
@ -196,25 +225,37 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
// No outline: use RN Text with (optional) shadow
formattedSegments && formattedSegments.length > 0 ? (
// Render formatted segments if available
formattedSegments.map((lineSegments, lineIdx) =>
renderFormattedText(lineSegments, lineIdx, 'formatted')
)
formattedSegments.map((lineSegments, lineIdx) => {
const isLineRTL = lineRTLStatus[lineIdx];
return renderFormattedText(lineSegments, lineIdx, 'formatted', isLineRTL, letterSpacing);
})
) : (
<Text style={[
styles.customSubtitleText,
{
color: textColor,
fontFamily,
textAlign: align,
letterSpacing,
fontSize: subtitleSize * inverseScale,
lineHeight: subtitleSize * lineHeightMultiplier * inverseScale,
transform: [{ scale: inverseScale }],
},
shadowStyle,
]}>
{currentSubtitle}
</Text>
(() => {
const isRTL = lineRTLStatus.some(status => status);
// For RTL, use a very small negative letter spacing to stretch words slightly
// This helps with proper diacritic spacing while maintaining ligatures
const effectiveLetterSpacing = isRTL ? (subtitleSize * inverseScale * -0.02) : letterSpacing;
// For RTL, adjust text alignment
const effectiveAlign = isRTL && align === 'left' ? 'right' : (isRTL && align === 'right' ? 'left' : align);
return (
<Text style={[
styles.customSubtitleText,
{
color: textColor,
fontFamily,
textAlign: effectiveAlign,
letterSpacing: effectiveLetterSpacing,
fontSize: subtitleSize * inverseScale,
lineHeight: subtitleSize * lineHeightMultiplier * inverseScale,
transform: [{ scale: inverseScale }],
},
shadowStyle,
]}>
{currentSubtitle}
</Text>
);
})()
)
)}
</View>

29
src/components/player/utils/playerUtils.ts
View file

@ -171,4 +171,33 @@ export const formatTime = (seconds: number) => {
export const parseSRT = (srtContent: string): SubtitleCue[] => {
// Use the new enhanced parser from subtitleParser.ts
return parseSRTEnhanced(srtContent);
};
/**
* Detect if text contains primarily RTL (right-to-left) characters
* Checks for Arabic, Hebrew, Persian, Urdu, and other RTL scripts
* Returns true if the majority of non-whitespace characters are RTL
*/
export const detectRTL = (text: string): boolean => {
if (!text || text.length === 0) return false;
// RTL character ranges
// Arabic: U+0600–U+06FF
// Arabic Supplement: U+0750–U+077F
// Arabic Extended-A: U+08A0–U+08FF
// Arabic Presentation Forms-A: U+FB50–U+FDFF
// Arabic Presentation Forms-B: U+FE70–U+FEFF
// Hebrew: U+0590–U+05FF
// Persian/Urdu use Arabic script (no separate range)
const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
// Remove whitespace and count characters
const nonWhitespace = text.replace(/\s/g, '');
if (nonWhitespace.length === 0) return false;
const rtlCount = (nonWhitespace.match(rtlRegex) || []).length;
// Consider RTL if at least 30% of non-whitespace characters are RTL
// This handles mixed-language subtitles (e.g., Arabic with English numbers)
return rtlCount / nonWhitespace.length >= 0.3;
};