From 6f2ccfa38b6d91e6c527f23ba471687f10e535ae Mon Sep 17 00:00:00 2001 From: tapframe Date: Sun, 4 May 2025 02:36:17 +0530 Subject: [PATCH] m --- src/components/metadata/MetadataDetails.tsx | 5 + src/components/metadata/RatingsSection.tsx | 176 +++++--------------- src/navigation/AppNavigator.tsx | 21 +-- src/screens/MetadataScreen.tsx | 14 +- 4 files changed, 60 insertions(+), 156 deletions(-) diff --git a/src/components/metadata/MetadataDetails.tsx b/src/components/metadata/MetadataDetails.tsx index 905dc5a8..1011359c 100644 --- a/src/components/metadata/MetadataDetails.tsx +++ b/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 = ({ metadata, imdbId, type, + renderRatings, }) => { const { currentTheme } = useTheme(); const [isFullDescriptionOpen, setIsFullDescriptionOpen] = useState(false); @@ -53,6 +55,9 @@ const MetadataDetails: React.FC = ({ )} + {/* Ratings Section */} + {renderRatings && renderRatings()} + {/* Creator/Director Info */} = ({ 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 = ({ imdbId, type }) }, [ratings, fadeAnim]); // If MDBList is disabled, don't show anything - if (!isMDBEnabled) { - return null; - } - - if (loading) { - return ( - - - - ); - } - - if (error || !ratings || Object.keys(ratings).length === 0) { - return null; - } + if (!isMDBEnabled) return null; + if (loading) return ; + 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 = ({ 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: '', - suffix: '%', - transform: (value: number) => Math.round(value).toString() + transform: (value: number) => Math.round(value).toString() + '%' }, audience: { icon: AudienceScoreIcon, isImage: true, color: '#FA320A', - prefix: '', - suffix: '%', - transform: (value: number) => Math.round(value).toString() + 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 = ({ imdbId, type }) }, ]} > - - Ratings - - + {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 ( - - - {config.isImage ? ( - - ) : ( - - {React.createElement(config.icon as any, { - width: 24, - height: 24, - })} - - )} - - - {config.prefix}{displayValue}{config.suffix} + + {config.isImage ? ( + + ) : ( + + {React.createElement(config.icon as any, { + width: 16, + height: 16, + })} + + )} + + {displayValue} - {getSourceLabel(source)} ); })} @@ -274,69 +208,35 @@ export const RatingsSection: React.FC = ({ 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', - marginBottom: 12, + flexWrap: 'nowrap', }, - title: { - fontSize: 18, - fontWeight: '700', - }, - ratingsContainer: { + compactRatingItem: { flexDirection: 'row', - flexWrap: 'wrap', - gap: 10, - }, - ratingItem: { - flexDirection: 'column', alignItems: 'center', - width: 55, + marginRight: 12, }, - ratingIconContainer: { - width: 32, - height: 32, - justifyContent: 'center', - alignItems: 'center', - marginBottom: 4, + compactRatingIcon: { + width: 16, + height: 16, + marginRight: 4, }, - ratingIconImage: { - width: 32, - height: 32, + compactSvgContainer: { + marginRight: 4, }, - svgContainer: { - alignItems: 'center', - justifyContent: 'center', - }, - ratingValue: { - fontSize: 16, - fontWeight: '700', - marginVertical: 2, - }, - ratingSource: { - fontSize: 11, - textAlign: 'center', - }, - noRatingsText: { + compactRatingValue: { fontSize: 14, - color: 'gray', - fontStyle: 'italic', - textAlign: 'center', - marginVertical: 16, - }, - errorText: { - fontSize: 12, - color: '#ff0000', - textAlign: 'center', - marginVertical: 8, + fontWeight: '600', }, }); \ No newline at end of file diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index 36985f51..2ee6a77b 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -389,6 +389,7 @@ const WrappedScreen: React.FC<{Screen: React.ComponentType}> = ({ 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 = () => { > { 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 ( - + {/* Common StatusBar for all tabs */} { return ; }, - tabBarActiveTintColor: colors.primary, - tabBarInactiveTintColor: '#FFFFFF', + tabBarActiveTintColor: currentTheme.colors.primary, + 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 diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx index 76484772..2cf547e8 100644 --- a/src/screens/MetadataScreen.tsx +++ b/src/screens/MetadataScreen.tsx @@ -335,16 +335,14 @@ const MetadataScreen = () => { metadata={metadata} imdbId={imdbId} type={type as 'movie' | 'series'} + renderRatings={() => imdbId ? ( + + ) : null} /> - {/* Add RatingsSection right under the main metadata */} - {imdbId && ( - - )} - {/* Cast Section */}