ui changes

node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -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();
 

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/home/ContentItem.tsx

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

src/components/home/HeroCarousel.tsx

@@ -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} />
             </>
           ) : (
             <>

src/components/metadata/MoreLikeThisSection.tsx

@@ -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

src/components/player/subtitles/CustomSubtitles.tsx

@@ -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,
                 ]}>

src/screens/LibraryScreen.tsx

@@ -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%',

src/screens/MetadataScreen.tsx

@@ -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>
         </>