m

src/components/metadata/MetadataDetails.tsx

@@ -18,12 +18,14 @@ interface MetadataDetailsProps {
   metadata: any;
   imdbId: string | null;
   type: 'movie' | 'series';
+  renderRatings?: () => React.ReactNode;
 }
 
 const MetadataDetails: React.FC<MetadataDetailsProps> = ({
   metadata,
   imdbId,
   type,
+  renderRatings,
 }) => {
   const { currentTheme } = useTheme();
   const [isFullDescriptionOpen, setIsFullDescriptionOpen] = useState(false);
@@ -53,6 +55,9 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
         )}
       </View>
 
+      {/* Ratings Section */}
+      {renderRatings && renderRatings()}
+
       {/* Creator/Director Info */}
       <Animated.View
         entering={FadeIn.duration(500).delay(200)}

src/components/metadata/RatingsSection.tsx

@@ -87,21 +87,6 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
     }
   };
 
-  useEffect(() => {
-    return () => {
-    };
-  }, [imdbId, type]);
-
-  useEffect(() => {
-    if (error) {
-    }
-  }, [error]);
-
-  useEffect(() => {
-    if (ratings) {
-    }
-  }, [ratings]);
-
   useEffect(() => {
     if (ratings && Object.keys(ratings).length > 0) {
       // Start fade-in animation when ratings are loaded
@@ -114,21 +99,9 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
   }, [ratings, fadeAnim]);
 
   // If MDBList is disabled, don't show anything
-  if (!isMDBEnabled) {
+  if (!isMDBEnabled) return null;
-    return null;
+  if (loading) return <View style={styles.loadingContainer}><ActivityIndicator size="small" color={currentTheme.colors.primary} /></View>;
-  }
+  if (error || !ratings || Object.keys(ratings).length === 0) return null;
-
-  if (loading) {
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="small" color={currentTheme.colors.primary} />
-      </View>
-    );
-  }
-
-  if (error || !ratings || Object.keys(ratings).length === 0) {
-    return null;
-  }
 
   // Define the order and icons/colors for the ratings
   const ratingConfig = {
@@ -136,56 +109,42 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
       icon: require('../../../assets/rating-icons/imdb.png'),
       isImage: true,
       color: '#F5C518',
-      prefix: '',
-      suffix: '',
       transform: (value: number) => value.toFixed(1)
     },
     tmdb: {
       icon: TMDBIcon,
       isImage: false,
       color: '#01B4E4',
-      prefix: '',
-      suffix: '',
       transform: (value: number) => value.toFixed(0)
     },
     trakt: {
       icon: TraktIcon,
       isImage: false,
       color: '#ED1C24',
-      prefix: '',
-      suffix: '',
       transform: (value: number) => value.toFixed(0)
     },
     letterboxd: {
       icon: LetterboxdIcon,
       isImage: false,
       color: '#00E054',
-      prefix: '',
-      suffix: '',
       transform: (value: number) => value.toFixed(1)
     },
     tomatoes: {
       icon: RottenTomatoesIcon,
       isImage: false,
       color: '#FA320A',
-      prefix: '',
+      transform: (value: number) => Math.round(value).toString() + '%'
-      suffix: '%',
-      transform: (value: number) => Math.round(value).toString()
     },
     audience: {
       icon: AudienceScoreIcon,
       isImage: true,
       color: '#FA320A',
-      prefix: '',
+      transform: (value: number) => Math.round(value).toString() + '%'
-      suffix: '%',
-      transform: (value: number) => Math.round(value).toString()
     },
     metacritic: {
       icon: MetacriticIcon,
       isImage: true,
       color: '#FFCC33',
-      prefix: '',
-      suffix: '',
       transform: (value: number) => Math.round(value).toString()
     }
   };
@@ -215,55 +174,30 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
         },
       ]}
     >
-      <View style={styles.header}>
+      <View style={styles.compactRatingsContainer}>
-        <Text style={[styles.title, { color: currentTheme.colors.highEmphasis }]}>Ratings</Text>
-      </View>
-      <View style={styles.ratingsContainer}>
         {displayRatings.map(([source, value]) => {
           const config = ratingConfig[source as keyof typeof ratingConfig];
           const displayValue = config.transform(parseFloat(value as string));
           
-          // Get a short display name for the rating source
-          const getSourceLabel = (src: string): string => {
-            switch(src) {
-              case 'imdb': return 'IMDb';
-              case 'tmdb': return 'TMDB';
-              case 'tomatoes': return 'RT';
-              case 'audience': return 'Aud';
-              case 'metacritic': return 'Meta';
-              case 'letterboxd': return 'LBXD';
-              case 'trakt': return 'Trakt';
-              default: return src;
-            }
-          };
-          
           return (
-            <View key={source} style={styles.ratingItem}>
+            <View key={source} style={styles.compactRatingItem}>
-              <View style={styles.ratingIconContainer}>
+              {config.isImage ? (
-                {config.isImage ? (
+                <Image 
-                  <Image 
+                  source={config.icon as any}
-                    source={config.icon as any}
+                  style={styles.compactRatingIcon}
-                    style={styles.ratingIconImage}
+                  resizeMode="contain"
-                    resizeMode="contain"
+                />
-                  />
+              ) : (
-                ) : (
+                <View style={styles.compactSvgContainer}>
-                  <View style={styles.svgContainer}>
+                  {React.createElement(config.icon as any, {
-                    {React.createElement(config.icon as any, {
+                    width: 16,
-                      width: 24,
+                    height: 16,
-                      height: 24,
+                  })}
-                    })}
+                </View>
-                  </View>
+              )}
-                )}
+              <Text style={[styles.compactRatingValue, { color: config.color }]}>
-              </View>
+                {displayValue}
-              <Text 
-                style={[
-                  styles.ratingValue,
-                  { color: config.color }
-                ]}
-              >
-                {config.prefix}{displayValue}{config.suffix}
               </Text>
-              <Text style={[styles.ratingSource, { color: currentTheme.colors.mediumEmphasis }]}>{getSourceLabel(source)}</Text>
             </View>
           );
         })}
@@ -274,69 +208,35 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 20,
+    marginTop: 2,
+    marginBottom: 8,
     paddingHorizontal: 16,
   },
   loadingContainer: {
-    height: 80,
+    height: 40,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  header: {
+  compactRatingsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    flexWrap: 'nowrap',
-    marginBottom: 12,
   },
-  title: {
+  compactRatingItem: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  ratingsContainer: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 10,
-  },
-  ratingItem: {
-    flexDirection: 'column',
     alignItems: 'center',
-    width: 55,
+    marginRight: 12,
   },
-  ratingIconContainer: {
+  compactRatingIcon: {
-    width: 32,
+    width: 16,
-    height: 32,
+    height: 16,
-    justifyContent: 'center',
+    marginRight: 4,
-    alignItems: 'center',
-    marginBottom: 4,
   },
-  ratingIconImage: {
+  compactSvgContainer: {
-    width: 32,
+    marginRight: 4,
-    height: 32,
   },
-  svgContainer: {
+  compactRatingValue: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  ratingValue: {
-    fontSize: 16,
-    fontWeight: '700',
-    marginVertical: 2,
-  },
-  ratingSource: {
-    fontSize: 11,
-    textAlign: 'center',
-  },
-  noRatingsText: {
     fontSize: 14,
-    color: 'gray',
+    fontWeight: '600',
-    fontStyle: 'italic',
-    textAlign: 'center',
-    marginVertical: 16,
-  },
-  errorText: {
-    fontSize: 12,
-    color: '#ff0000',
-    textAlign: 'center',
-    marginVertical: 8,
   },
 }); 

src/navigation/AppNavigator.tsx

@@ -389,6 +389,7 @@ const WrappedScreen: React.FC<{Screen: React.ComponentType<any>}> = ({ Screen })
 const MainTabs = () => {
   // Always use dark mode
   const isDarkMode = true;
+  const { currentTheme } = useTheme();
   
   const renderTabBar = (props: BottomTabBarProps) => {
     return (
@@ -409,9 +410,9 @@ const MainTabs = () => {
               position: 'absolute',
               height: '100%',
               width: '100%',
-              borderTopColor: 'rgba(255,255,255,0.2)',
+              borderTopColor: currentTheme.colors.border,
               borderTopWidth: 0.5,
-              shadowColor: '#000',
+              shadowColor: currentTheme.colors.black,
               shadowOffset: { width: 0, height: -2 },
               shadowOpacity: 0.1,
               shadowRadius: 3,
@@ -495,7 +496,7 @@ const MainTabs = () => {
                 >
                   <TabIcon 
                     focused={isFocused} 
-                    color={isFocused ? colors.primary : '#FFFFFF'} 
+                    color={isFocused ? currentTheme.colors.primary : currentTheme.colors.white} 
                     iconName={iconName}
                   />
                   <Text
@@ -503,7 +504,7 @@ const MainTabs = () => {
                       fontSize: 12,
                       fontWeight: '600',
                       marginTop: 4,
-                      color: isFocused ? colors.primary : '#FFFFFF',
+                      color: isFocused ? currentTheme.colors.primary : currentTheme.colors.white,
                       opacity: isFocused ? 1 : 0.7,
                     }}
                   >
@@ -519,7 +520,7 @@ const MainTabs = () => {
   };
   
   return (
-    <View style={{ flex: 1, backgroundColor: colors.darkBackground }}>
+    <View style={{ flex: 1, backgroundColor: currentTheme.colors.darkBackground }}>
       {/* Common StatusBar for all tabs */}
       <StatusBar
         translucent
@@ -550,8 +551,8 @@ const MainTabs = () => {
             
             return <TabIcon focused={focused} color={color} iconName={iconName} />;
           },
-          tabBarActiveTintColor: colors.primary,
+          tabBarActiveTintColor: currentTheme.colors.primary,
-          tabBarInactiveTintColor: '#FFFFFF',
+          tabBarInactiveTintColor: currentTheme.colors.white,
           tabBarStyle: {
             position: 'absolute',
             backgroundColor: 'transparent',
@@ -583,9 +584,9 @@ const MainTabs = () => {
                   position: 'absolute',
                   height: '100%',
                   width: '100%',
-                  borderTopColor: 'rgba(255,255,255,0.2)',
+                  borderTopColor: currentTheme.colors.border,
                   borderTopWidth: 0.5,
-                  shadowColor: '#000',
+                  shadowColor: currentTheme.colors.black,
                   shadowOffset: { width: 0, height: -2 },
                   shadowOpacity: 0.1,
                   shadowRadius: 3,
@@ -612,7 +613,7 @@ const MainTabs = () => {
           headerShown: route.name === 'Home',
           // Add fixed screen styling to help with consistency
           contentStyle: {
-            backgroundColor: colors.darkBackground,
+            backgroundColor: currentTheme.colors.darkBackground,
           },
         })}
         // Global configuration for the tab navigator

src/screens/MetadataScreen.tsx

@@ -335,16 +335,14 @@ const MetadataScreen = () => {
               metadata={metadata}
               imdbId={imdbId}
               type={type as 'movie' | 'series'}
+              renderRatings={() => imdbId ? (
+                <RatingsSection 
+                  imdbId={imdbId}
+                  type={type === 'series' ? 'show' : 'movie'} 
+                />
+              ) : null}
             />
 
-            {/* Add RatingsSection right under the main metadata */}
-            {imdbId && (
-              <RatingsSection 
-                imdbId={imdbId}
-                type={type === 'series' ? 'show' : 'movie'} 
-              />
-            )}
-
             {/* Cast Section */}
             <CastSection
               cast={cast}