ui changes

This commit is contained in:
tapframe 2025-11-08 01:27:09 +05:30
parent 91a42e6e29
commit 1756c28ed9
9 changed files with 23 additions and 27 deletions

View file

@ -726,7 +726,7 @@ public class ReactExoplayerView extends FrameLayout implements
DefaultRenderersFactory renderersFactory =
new DefaultRenderersFactory(getContext())
.setExtensionRendererMode(DefaultRenderersFactory.EXTENSION_RENDERER_MODE_OFF)
.setExtensionRendererMode(DefaultRenderersFactory.EXTENSION_RENDERER_MODE_PREFER)
.setEnableDecoderFallback(true)
.forceEnableMediaCodecAsynchronousQueueing();

2
package-lock.json generated
View file

@ -80,7 +80,7 @@
"react-native-reanimated-carousel": "^4.0.3",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-svg": "15.12.1",
"react-native-svg": "^15.12.1",
"react-native-url-polyfill": "^2.0.0",
"react-native-vector-icons": "^10.3.0",
"react-native-video": "^6.17.0",

View file

@ -80,7 +80,7 @@
"react-native-reanimated-carousel": "^4.0.3",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-svg": "15.12.1",
"react-native-svg": "^15.12.1",
"react-native-url-polyfill": "^2.0.0",
"react-native-vector-icons": "^10.3.0",
"react-native-video": "^6.17.0",

View file

@ -388,8 +388,8 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 1,
borderWidth: 0.5,
borderColor: 'rgba(255,255,255,0.12)',
borderWidth: 1.5,
borderColor: 'rgba(255,255,255,0.15)',
marginBottom: 8,
},
contentItemContainer: {

View file

@ -710,6 +710,7 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
</Text>
</ScrollView>
</View>
<TouchableOpacity activeOpacity={0.9} onPress={onPressInfo} style={StyleSheet.absoluteFillObject as any} />
</>
) : (
<>

View file

@ -185,6 +185,8 @@ const styles = StyleSheet.create({
poster: {
borderRadius: 8, // overridden responsively
marginBottom: 8,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.15)',
},
title: {
fontSize: 13, // overridden responsively

View file

@ -85,11 +85,6 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
const displayFontSize = subtitleSize * inverseScale;
const displayLineHeight = subtitleSize * lineHeightMultiplier * inverseScale;
const svgHeight = lines.length * displayLineHeight;
// Roughly estimate text width to size SVG snugly (avoids overly wide background)
const charWidthFactor = 0.48; // even tighter average width per character
const estimatedLineWidths = lines.map(line => Math.max(1, line.length * displayFontSize * charWidthFactor));
const maxEstimatedLineWidth = estimatedLineWidths.length > 0 ? Math.max(...estimatedLineWidths) : displayFontSize * 2;
const svgWidth = Math.max(displayFontSize * 2, Math.ceil(maxEstimatedLineWidth + displayFontSize * 0.25));
// Helper to render formatted segments
const renderFormattedText = (segments: SubtitleSegment[], lineIndex: number, keyPrefix: string, isRTL?: boolean, customLetterSpacing?: number) => {
@ -145,19 +140,14 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
backgroundColor: bgColor,
position: 'relative',
alignItems: 'center',
alignSelf: 'center',
maxWidth: '90%',
paddingHorizontal: 4,
paddingVertical: 4,
transform: [{ scale: inverseScale }],
}
]}>
{useCrispSvgOutline ? (
// Crisp outline using react-native-svg (stroke under, fill on top)
<Svg
width={svgWidth}
width={800}
height={svgHeight}
viewBox={`0 0 ${svgWidth} ${svgHeight}`}
viewBox={`0 0 1000 ${svgHeight}`}
preserveAspectRatio="xMidYMax meet"
>
{(() => {
@ -169,10 +159,10 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
if (isRTL) {
// For RTL, always use 'end' anchor to position from right edge
anchor = 'end';
x = svgWidth;
x = 1000;
} else {
anchor = align === 'center' ? 'middle' : align === 'left' ? 'start' : 'end';
x = align === 'center' ? svgWidth / 2 : (align === 'left' ? 0 : svgWidth);
x = align === 'center' ? 500 : (align === 'left' ? 0 : 1000);
}
const baseFontSize = displayFontSize;
@ -258,6 +248,7 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
letterSpacing: effectiveLetterSpacing,
fontSize: subtitleSize * inverseScale,
lineHeight: subtitleSize * lineHeightMultiplier * inverseScale,
transform: [{ scale: inverseScale }],
},
shadowStyle,
]}>

View file

@ -1136,6 +1136,8 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 8,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.15)',
},
poster: {
width: '100%',

View file

@ -1260,14 +1260,6 @@ const MetadataScreen: React.FC = () => {
/>
)}
{/* Recommendations Section with skeleton when loading - Lazy loaded */}
{type === 'movie' && shouldLoadSecondaryData && (
<MemoizedMoreLikeThisSection
recommendations={recommendations}
loadingRecommendations={loadingRecommendations}
/>
)}
{/* Series/Movie Content with episode skeleton when loading */}
{Object.keys(groupedEpisodes).length > 0 ? (
<MemoizedSeriesContent
@ -1394,6 +1386,14 @@ const MetadataScreen: React.FC = () => {
</TouchableOpacity>
</View>
)}
{/* Recommendations Section with skeleton when loading - Shown at bottom for shows */}
{shouldLoadSecondaryData && (
<MemoizedMoreLikeThisSection
recommendations={recommendations}
loadingRecommendations={loadingRecommendations}
/>
)}
</Animated.View>
</Animated.ScrollView>
</>