From 060b0b927bf539de383817a0cff31da563fb60ea Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Thu, 23 Oct 2025 13:26:31 +0530
Subject: [PATCH] episode poster fix

---
 src/components/TabletStreamsLayout.tsx | 50 ++++++++++++++++++++------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/TabletStreamsLayout.tsx b/src/components/TabletStreamsLayout.tsx
index 6bfbb50..f94d2d1 100644
--- a/src/components/TabletStreamsLayout.tsx
+++ b/src/components/TabletStreamsLayout.tsx
@@ -177,9 +177,10 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
     return undefined;
   }, [episodeImage, bannerImage, metadata?.poster, backdropError]);
   
-  // Animate backdrop when it loads
+  // Animate backdrop when it loads, or animate content immediately if no backdrop
   useEffect(() => {
     if (backdropSource?.uri && backdropLoaded) {
+      // Animate backdrop first
       backdropOpacity.value = withTiming(1, {
         duration: 800,
         easing: Easing.out(Easing.cubic)
@@ -207,6 +208,25 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         duration: 600,
         easing: Easing.out(Easing.cubic)
       }));
+    } else if (!backdropSource?.uri) {
+      // No backdrop available, animate content panels immediately
+      leftPanelOpacity.value = withTiming(1, {
+        duration: 600,
+        easing: Easing.out(Easing.cubic)
+      });
+      leftPanelTranslateX.value = withTiming(0, {
+        duration: 600,
+        easing: Easing.out(Easing.cubic)
+      });
+      
+      rightPanelOpacity.value = withDelay(200, withTiming(1, {
+        duration: 600,
+        easing: Easing.out(Easing.cubic)
+      }));
+      rightPanelTranslateX.value = withDelay(200, withTiming(0, {
+        duration: 600,
+        easing: Easing.out(Easing.cubic)
+      }));
     }
   }, [backdropSource?.uri, backdropLoaded]);
   
@@ -368,15 +388,21 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
   return (
     <View style={styles.tabletLayout}>
       {/* Full Screen Background with Entrance Animation */}
-      <Animated.View style={[styles.tabletFullScreenBackground, backdropAnimatedStyle]}>
-        <FastImage
-          source={backdropSource}
-          style={StyleSheet.absoluteFillObject}
-          resizeMode={FastImage.resizeMode.cover}
-          onLoad={handleBackdropLoad}
-          onError={handleBackdropError}
-        />
-      </Animated.View>
+      {backdropSource?.uri ? (
+        <Animated.View style={[styles.tabletFullScreenBackground, backdropAnimatedStyle]}>
+          <FastImage
+            source={backdropSource}
+            style={StyleSheet.absoluteFillObject}
+            resizeMode={FastImage.resizeMode.cover}
+            onLoad={handleBackdropLoad}
+            onError={handleBackdropError}
+          />
+        </Animated.View>
+      ) : (
+        <View style={styles.tabletFullScreenBackground}>
+          <View style={styles.tabletNoBackdropBackground} />
+        </View>
+      )}
       <LinearGradient
         colors={['rgba(0,0,0,0.2)', 'rgba(0,0,0,0.4)', 'rgba(0,0,0,0.6)']}
         locations={[0, 0.5, 1]}
@@ -685,6 +711,10 @@ const createStyles = (colors: any) => StyleSheet.create({
   tabletFullScreenBackground: {
     ...StyleSheet.absoluteFillObject,
   },
+  tabletNoBackdropBackground: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: colors.darkBackground,
+  },
   tabletFullScreenGradient: {
     ...StyleSheet.absoluteFillObject,
   },