From 7fb168f5306a9c4dffca4f4982b54ab026a7e9f2 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Fri, 20 Jun 2025 01:00:49 +0530
Subject: [PATCH] Refactor HeroSection progress display for improved
 readability and UI consistency

This update refines the WatchProgressDisplay component within the HeroSection by enhancing the layout and styling of the progress bar and related elements. Key changes include adjustments to the structure of the JSX for better readability, improved inline Trakt sync button placement, and consistent application of styles. These modifications aim to enhance user interaction and visual clarity in the progress display.
---
 src/components/metadata/HeroSection.tsx | 66 ++++++++++++-------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx
index a4822d0..2139561 100644
--- a/src/components/metadata/HeroSection.tsx
+++ b/src/components/metadata/HeroSection.tsx
@@ -440,30 +440,30 @@ const WatchProgressDisplay = React.memo(({
         
         {/* Enhanced progress bar with glow effects */}
         <Animated.View style={[styles.watchProgressBarContainer, celebrationAnimatedStyle]}>
-          <View style={styles.watchProgressBar}>
+      <View style={styles.watchProgressBar}>
             {/* Background glow for completed content */}
             {isCompleted && (
               <Animated.View style={[styles.completionGlow, glowAnimatedStyle]} />
             )}
             
             <Animated.View 
-              style={[
-                styles.watchProgressFill,
+          style={[
+            styles.watchProgressFill,
                 !isCompleted && progressPulseStyle,
-                { 
-                  width: `${progressData.progressPercent}%`,
+            { 
+              width: `${progressData.progressPercent}%`,
                   backgroundColor: isCompleted
                     ? '#00ff88' // Bright green for completed
-                    : progressData.isTraktSynced 
-                      ? '#E50914' // Netflix red for Trakt synced content
+                : progressData.isTraktSynced 
+                  ? '#E50914' // Netflix red for Trakt synced content
                       : currentTheme.colors.primary,
                   // Add gradient effect for completed content
                   ...(isCompleted && {
                     background: 'linear-gradient(90deg, #00ff88, #00cc6a)',
                   })
-                }
-              ]} 
-            />
+            }
+          ]} 
+        />
             
             {/* Shimmer effect for active progress */}
             {!isCompleted && progressData.progressPercent > 0 && (
@@ -489,9 +489,9 @@ const WatchProgressDisplay = React.memo(({
                 <Text style={styles.percentageText}>
                   {Math.round(progressData.progressPercent)}%
                 </Text>
-              </View>
-            )}
           </View>
+        )}
+      </View>
           
           <Text style={[styles.watchProgressSubText, { 
             color: isCompleted ? 'rgba(0,255,136,0.7)' : currentTheme.colors.textMuted,
@@ -510,31 +510,31 @@ const WatchProgressDisplay = React.memo(({
               <Text style={[styles.syncStatusText, {
                 color: progressData.isTraktSynced ? "#E50914" : "rgba(255,255,255,0.6)"
               }]}>
-                {progressData.syncStatus}
-              </Text>
-              
+          {progressData.syncStatus}
+        </Text>
+        
               {/* Enhanced manual Trakt sync button - moved inline */}
-              {isTraktAuthenticated && forceSyncTraktProgress && (
-                <TouchableOpacity 
+        {isTraktAuthenticated && forceSyncTraktProgress && (
+          <TouchableOpacity 
                   style={styles.traktSyncButtonInline}
-                  onPress={handleTraktSync}
-                  activeOpacity={0.7}
+            onPress={handleTraktSync}
+            activeOpacity={0.7}
                 >
                   <LinearGradient
                     colors={['#E50914', '#B8070F']}
                     style={styles.syncButtonGradientInline}
-                  >
-                    <MaterialIcons 
-                      name="refresh" 
+          >
+            <MaterialIcons 
+              name="refresh" 
                       size={12} 
                       color="#fff" 
-                    />
+            />
                   </LinearGradient>
-                </TouchableOpacity>
+          </TouchableOpacity>
               )}
             </View>
-          )}
-        </View>
+        )}
+      </View>
       </Animated.View>
     </Animated.View>
   );
@@ -637,15 +637,15 @@ const HeroSection: React.FC<HeroSectionProps> = ({
     const logoScale = hasProgress ? 0.85 : 1;
     
     return {
-      opacity: logoOpacity.value,
+    opacity: logoOpacity.value,
       transform: [
         { 
-          translateY: interpolate(
-            scrollY.value,
-            [0, 100],
-            [0, -20],
-            Extrapolate.CLAMP
-          )
+      translateY: interpolate(
+        scrollY.value,
+        [0, 100],
+        [0, -20],
+        Extrapolate.CLAMP
+      )
         },
         { scale: withTiming(logoScale, { duration: 300 }) }
       ]