From f13266b1fc3a31ceab42c16147e4ee2041e2d830 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Tue, 28 Oct 2025 00:26:40 +0530
Subject: [PATCH] ui fix

---
 src/components/player/AndroidVideoPlayer.tsx  |  91 +++----------
 src/components/player/KSPlayerCore.tsx        |  89 +++----------
 .../player/modals/LoadingOverlay.tsx          | 120 ++++++++++++++++++
 3 files changed, 152 insertions(+), 148 deletions(-)
 create mode 100644 src/components/player/modals/LoadingOverlay.tsx

diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx
index 67ee6bb..fdb8f83 100644
--- a/src/components/player/AndroidVideoPlayer.tsx
+++ b/src/components/player/AndroidVideoPlayer.tsx
@@ -39,6 +39,7 @@ import { safeDebugLog, parseSRT, DEBUG_MODE, formatTime } from './utils/playerUt
 import { styles } from './utils/playerStyles';
 import { SubtitleModals } from './modals/SubtitleModals';
 import { AudioTrackModal } from './modals/AudioTrackModal';
+import LoadingOverlay from './modals/LoadingOverlay';
 import SpeedModal from './modals/SpeedModal';
 // Removed ResumeOverlay usage when alwaysResume is enabled
 import PlayerControls from './controls/PlayerControls';
@@ -3115,81 +3116,21 @@ const AndroidVideoPlayer: React.FC = () => {
       top: 0,
       left: 0,
     }]}> 
-      {!shouldHideOpeningOverlay && (
-      <Animated.View 
-        style={[
-          styles.openingOverlay,
-          {
-            opacity: backgroundFadeAnim,
-            zIndex: 3000,
-            width: screenDimensions.width,
-            height: screenDimensions.height,
-          }
-        ]}
-      >
-        {backdrop && (
-          <Animated.View style={[
-              StyleSheet.absoluteFill,
-              {
-                width: screenDimensions.width,
-                height: screenDimensions.height,
-                opacity: backdropImageOpacityAnim
-              }
-            ]}>
-            <Image
-              source={{ uri: backdrop }}
-              style={StyleSheet.absoluteFillObject}
-              resizeMode="cover"
-            />
-          </Animated.View>
-        )}
-        <LinearGradient
-          colors={[
-            'rgba(0,0,0,0.3)',
-            'rgba(0,0,0,0.6)',
-            'rgba(0,0,0,0.8)',
-            'rgba(0,0,0,0.9)'
-          ]}
-          locations={[0, 0.3, 0.7, 1]}
-          style={StyleSheet.absoluteFill}
-        />
-        
-        <TouchableOpacity 
-          style={styles.loadingCloseButton}
-          onPress={handleClose}
-          activeOpacity={0.7}
-        >
-          <MaterialIcons name="close" size={24} color="#ffffff" />
-        </TouchableOpacity>
-        
-        <View style={styles.openingContent}>
-          {hasLogo ? (
-            <>
-            <Animated.View style={{
-              transform: [
-                { scale: Animated.multiply(logoScaleAnim, pulseAnim) }
-              ],
-              opacity: logoOpacityAnim,
-              alignItems: 'center',
-            }}>
-              <FastImage
-                source={{ uri: metadata.logo }}
-                style={{
-                  width: 300,
-                  height: 180,
-                }}
-                resizeMode={FastImage.resizeMode.contain}
-              />
-            </Animated.View>
-            </>
-          ) : (
-            <>
-          <ActivityIndicator size="large" color="#E50914" />
-            </>
-          )}
-        </View>
-      </Animated.View>
-      )}
+      <LoadingOverlay
+        visible={!shouldHideOpeningOverlay}
+        backdrop={backdrop || null}
+        hasLogo={hasLogo}
+        logo={metadata?.logo}
+        backgroundFadeAnim={backgroundFadeAnim}
+        backdropImageOpacityAnim={backdropImageOpacityAnim}
+        logoScaleAnim={logoScaleAnim}
+        logoOpacityAnim={logoOpacityAnim}
+        pulseAnim={pulseAnim}
+        onClose={handleClose}
+        width={screenDimensions.width}
+        height={screenDimensions.height}
+        useFastImage={false}
+      />
 
       <Animated.View 
         style={[
diff --git a/src/components/player/KSPlayerCore.tsx b/src/components/player/KSPlayerCore.tsx
index e5f0cf0..258deb0 100644
--- a/src/components/player/KSPlayerCore.tsx
+++ b/src/components/player/KSPlayerCore.tsx
@@ -46,6 +46,7 @@ import PlayerControls from './controls/PlayerControls';
 import CustomSubtitles from './subtitles/CustomSubtitles';
 import { SourcesModal } from './modals/SourcesModal';
 import { EpisodesModal } from './modals/EpisodesModal';
+import LoadingOverlay from './modals/LoadingOverlay';
 import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
 import { Episode } from '../../types/metadata';
 import axios from 'axios';
@@ -2501,80 +2502,22 @@ const KSPlayerCore: React.FC = () => {
         top: 0,
         left: 0,
       }]}>
-      {!DISABLE_OPENING_OVERLAY && !shouldHideOpeningOverlay && (
-      <Animated.View
-        style={[
-          styles.openingOverlay,
-          {
-            opacity: backgroundFadeAnim,
-            zIndex: 3000,
-            width: shouldUseFullscreen ? '100%' : screenDimensions.width,
-            height: shouldUseFullscreen ? '100%' : screenDimensions.height,
-          }
-        ]}
-      >
-        {backdrop && (
-          <Animated.View style={[
-              StyleSheet.absoluteFill,
-              {
-                width: shouldUseFullscreen ? '100%' : screenDimensions.width,
-                height: shouldUseFullscreen ? '100%' : screenDimensions.height,
-                opacity: backdropImageOpacityAnim
-              }
-            ]}>
-            <FastImage
-              source={{ uri: backdrop }}
-              style={StyleSheet.absoluteFillObject}
-              resizeMode={FastImage.resizeMode.cover}
-            />
-          </Animated.View>
-        )}
-        <LinearGradient
-          colors={[
-            'rgba(0,0,0,0.3)',
-            'rgba(0,0,0,0.6)',
-            'rgba(0,0,0,0.8)',
-            'rgba(0,0,0,0.9)'
-          ]}
-          locations={[0, 0.3, 0.7, 1]}
-          style={StyleSheet.absoluteFill}
+      {!DISABLE_OPENING_OVERLAY && (
+        <LoadingOverlay
+          visible={!shouldHideOpeningOverlay}
+          backdrop={backdrop || null}
+          hasLogo={hasLogo}
+          logo={metadata?.logo}
+          backgroundFadeAnim={backgroundFadeAnim}
+          backdropImageOpacityAnim={backdropImageOpacityAnim}
+          logoScaleAnim={logoScaleAnim}
+          logoOpacityAnim={logoOpacityAnim}
+          pulseAnim={pulseAnim}
+          onClose={handleClose}
+          width={shouldUseFullscreen ? effectiveDimensions.width : screenDimensions.width}
+          height={shouldUseFullscreen ? effectiveDimensions.height : screenDimensions.height}
+          useFastImage={true}
         />
-
-        <TouchableOpacity
-          style={styles.loadingCloseButton}
-          onPress={handleClose}
-          activeOpacity={0.7}
-        >
-          <MaterialIcons name="close" size={24} color="#ffffff" />
-        </TouchableOpacity>
-
-        <View style={styles.openingContent}>
-          {hasLogo ? (
-            <>
-            <Animated.View style={{
-              transform: [
-                { scale: Animated.multiply(logoScaleAnim, pulseAnim) }
-              ],
-              opacity: logoOpacityAnim,
-              alignItems: 'center',
-            }}>
-              <FastImage
-                source={{ uri: metadata.logo }}
-                style={{
-                  width: 300,
-                  height: 180,
-                }}
-                resizeMode={FastImage.resizeMode.contain}
-              />
-            </Animated.View>
-            </>
-          ) : (
-            <>
-              <ActivityIndicator size="large" color="#E50914" />
-            </>
-          )}
-        </View>
-      </Animated.View>
       )}
 
       <Animated.View
diff --git a/src/components/player/modals/LoadingOverlay.tsx b/src/components/player/modals/LoadingOverlay.tsx
new file mode 100644
index 0000000..5f9075c
--- /dev/null
+++ b/src/components/player/modals/LoadingOverlay.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { View, TouchableOpacity, Animated, ActivityIndicator, StyleSheet, Image } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import FastImage from '@d11/react-native-fast-image';
+import { styles } from '../utils/playerStyles';
+
+interface LoadingOverlayProps {
+  visible: boolean;
+  backdrop: string | null | undefined;
+  hasLogo: boolean;
+  logo: string | null | undefined;
+  backgroundFadeAnim: Animated.Value;
+  backdropImageOpacityAnim: Animated.Value;
+  logoScaleAnim: Animated.Value;
+  logoOpacityAnim: Animated.Value;
+  pulseAnim: Animated.Value;
+  onClose: () => void;
+  width: number | string;
+  height: number | string;
+  useFastImage?: boolean; // Platform-specific: iOS uses FastImage, Android uses Image
+}
+
+const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
+  visible,
+  backdrop,
+  hasLogo,
+  logo,
+  backgroundFadeAnim,
+  backdropImageOpacityAnim,
+  logoScaleAnim,
+  logoOpacityAnim,
+  pulseAnim,
+  onClose,
+  width,
+  height,
+  useFastImage = false,
+}) => {
+  if (!visible) return null;
+
+  return (
+    <Animated.View 
+      style={[
+        styles.openingOverlay,
+        {
+          opacity: backgroundFadeAnim,
+          zIndex: 3000,
+        },
+        // Cast to any to support both number and string dimensions
+        { width, height } as any,
+      ]}
+    >
+      {backdrop && (
+        <Animated.View style={[
+            StyleSheet.absoluteFill,
+            {
+              opacity: backdropImageOpacityAnim
+            }
+          ]}>
+          {useFastImage ? (
+            <FastImage
+              source={{ uri: backdrop }}
+              style={StyleSheet.absoluteFillObject}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          ) : (
+            <Image
+              source={{ uri: backdrop }}
+              style={StyleSheet.absoluteFillObject}
+              resizeMode="cover"
+            />
+          )}
+        </Animated.View>
+      )}
+      <LinearGradient
+        colors={[
+          'rgba(0,0,0,0.3)',
+          'rgba(0,0,0,0.6)',
+          'rgba(0,0,0,0.8)',
+          'rgba(0,0,0,0.9)'
+        ]}
+        locations={[0, 0.3, 0.7, 1]}
+        style={StyleSheet.absoluteFill}
+      />
+      
+      <TouchableOpacity 
+        style={styles.loadingCloseButton}
+        onPress={onClose}
+        activeOpacity={0.7}
+      >
+        <MaterialIcons name="close" size={24} color="#ffffff" />
+      </TouchableOpacity>
+      
+      <View style={styles.openingContent}>
+        {hasLogo && logo ? (
+          <Animated.View style={{
+            transform: [
+              { scale: Animated.multiply(logoScaleAnim, pulseAnim) }
+            ],
+            opacity: logoOpacityAnim,
+            alignItems: 'center',
+          }}>
+            <FastImage
+              source={{ uri: logo }}
+              style={{
+                width: 300,
+                height: 180,
+              }}
+              resizeMode={FastImage.resizeMode.contain}
+            />
+          </Animated.View>
+        ) : (
+          <ActivityIndicator size="large" color="#E50914" />
+        )}
+      </View>
+    </Animated.View>
+  );
+};
+
+export default LoadingOverlay;