From 97bd2210a8b88c2d6f47580e2bd70fea6acef2db Mon Sep 17 00:00:00 2001 From: Nayif Noushad Date: Sun, 13 Apr 2025 12:05:57 +0530 Subject: [PATCH] metadata: some fixes --- .../metadata/MoreLikeThisSection.tsx | 25 +++-- src/screens/MetadataScreen.tsx | 93 +++++++++++++------ src/styles/colors.ts | 10 +- 3 files changed, 85 insertions(+), 43 deletions(-) diff --git a/src/components/metadata/MoreLikeThisSection.tsx b/src/components/metadata/MoreLikeThisSection.tsx index 473e7342..f9c85635 100644 --- a/src/components/metadata/MoreLikeThisSection.tsx +++ b/src/components/metadata/MoreLikeThisSection.tsx @@ -7,6 +7,7 @@ import { TouchableOpacity, ActivityIndicator, Dimensions, + Alert, } from 'react-native'; import { Image } from 'expo-image'; import { useNavigation, StackActions } from '@react-navigation/native'; @@ -37,7 +38,8 @@ export const MoreLikeThisSection: React.FC = ({ // Extract TMDB ID from the tmdb:123456 format const tmdbId = item.id.replace('tmdb:', ''); - // Get Stremio ID using catalogService + // Get Stremio ID directly using catalogService + // The catalogService.getStremioId method already handles the conversion internally const stremioId = await catalogService.getStremioId(item.type, tmdbId); if (stremioId) { @@ -48,10 +50,15 @@ export const MoreLikeThisSection: React.FC = ({ }) ); } else { - console.error('Could not find Stremio ID for TMDB ID:', tmdbId); + throw new Error('Could not find Stremio ID'); } } catch (error) { console.error('Error navigating to recommendation:', error); + Alert.alert( + 'Error', + 'Unable to load this content. Please try again later.', + [{ text: 'OK' }] + ); } }; @@ -101,19 +108,21 @@ export const MoreLikeThisSection: React.FC = ({ const styles = StyleSheet.create({ container: { - marginTop: 28, + marginTop: 16, marginBottom: 16, + paddingLeft: 0, }, sectionTitle: { - fontSize: 18, - fontWeight: '600', + fontSize: 20, + fontWeight: '800', color: colors.highEmphasis, marginBottom: 12, - paddingHorizontal: 24, + marginTop: 8, + paddingHorizontal: 16, }, listContentContainer: { - paddingHorizontal: 24, - paddingRight: 48, // Ensure last item has padding + paddingHorizontal: 16, + paddingRight: 32, // Ensure last item has padding }, itemContainer: { marginRight: 12, diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx index 68595dc6..297a4f8e 100644 --- a/src/screens/MetadataScreen.tsx +++ b/src/screens/MetadataScreen.tsx @@ -87,11 +87,13 @@ const MetadataScreen = () => { const [isFullDescriptionOpen, setIsFullDescriptionOpen] = useState(false); const fullDescriptionAnimation = useSharedValue(0); const [textTruncated, setTextTruncated] = useState(false); + const descriptionHeight = useSharedValue(0); + const fullTextHeight = useSharedValue(0); // Animation values const screenScale = useSharedValue(0.8); const screenOpacity = useSharedValue(0); - const heroHeight = useSharedValue(height * 0.75); + const heroHeight = useSharedValue(height * 0.45); const contentTranslateY = useSharedValue(50); // Add state for watch progress @@ -653,7 +655,7 @@ const MetadataScreen = () => { React.useEffect(() => { screenScale.value = withSpring(1, springConfig); screenOpacity.value = withSpring(1, springConfig); - heroHeight.value = withSpring(height * 0.75, springConfig); + heroHeight.value = withSpring(height * 0.45, springConfig); contentTranslateY.value = withSpring(0, springConfig); }, []); @@ -665,6 +667,40 @@ const MetadataScreen = () => { navigation.goBack(); }, [navigation]); + const descriptionAnimatedStyle = useAnimatedStyle(() => ({ + height: descriptionHeight.value, + opacity: interpolate( + descriptionHeight.value, + [0, fullTextHeight.value], + [0, 1], + Extrapolate.CLAMP + ) + })); + + // Function to handle text layout and store full height + const handleTextLayout = ({ nativeEvent: { lines } }: { nativeEvent: { lines: any[] } }) => { + if (!showFullDescription) { + setTextTruncated(lines.length > 3); + // Calculate height for 3 lines (24 is the lineHeight) + descriptionHeight.value = 3 * 24; + } + // Store full text height + fullTextHeight.value = lines.length * 24; + }; + + // Function to toggle description expansion with animation + const toggleDescription = () => { + setShowFullDescription(!showFullDescription); + descriptionHeight.value = withSpring( + !showFullDescription ? fullTextHeight.value : 3 * 24, + { + damping: 15, + stiffness: 100, + mass: 0.8 + } + ); + }; + if (loading) { return ( { {/* Description */} {metadata.description && ( - { - if (!showFullDescription) { - setTextTruncated(lines.length > 3); - } - }} - > - {`${metadata.description}`} - + + + {`${metadata.description}`} + + {textTruncated && ( setShowFullDescription(!showFullDescription)} + onPress={toggleDescription} style={styles.showMoreButton} > @@ -1014,7 +1047,7 @@ const styles = StyleSheet.create({ }, heroSection: { width: '100%', - height: height * 0.75, + height: height * 0.45, backgroundColor: colors.black, overflow: 'hidden', }, @@ -1030,16 +1063,16 @@ const styles = StyleSheet.create({ paddingBottom: 24, }, heroContent: { - padding: 24, + padding: 16, paddingTop: 12, - paddingBottom: 16, + paddingBottom: 12, }, genreContainer: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', - marginBottom: 20, + marginBottom: 12, width: '100%', }, genreText: { @@ -1056,15 +1089,15 @@ const styles = StyleSheet.create({ }, titleLogo: { width: width * 0.65, - height: 90, + height: 70, marginBottom: 0, alignSelf: 'center', }, titleText: { color: colors.highEmphasis, - fontSize: 34, + fontSize: 28, fontWeight: '900', - marginBottom: 16, + marginBottom: 12, textShadowColor: 'rgba(0,0,0,0.75)', textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4, @@ -1073,9 +1106,9 @@ const styles = StyleSheet.create({ metaInfo: { flexDirection: 'row', alignItems: 'center', - gap: 16, - paddingHorizontal: 24, - marginBottom: 16, + gap: 12, + paddingHorizontal: 16, + marginBottom: 12, }, metaText: { color: colors.text, @@ -1106,7 +1139,7 @@ const styles = StyleSheet.create({ fontSize: 13, }, descriptionContainer: { - marginBottom: 28, + marginBottom: 16, paddingHorizontal: 16, }, description: { @@ -1132,9 +1165,9 @@ const styles = StyleSheet.create({ }, actionButtons: { flexDirection: 'row', - gap: 12, + gap: 8, alignItems: 'center', - marginBottom: -16, + marginBottom: -12, justifyContent: 'center', width: '100%', }, @@ -1142,7 +1175,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - paddingVertical: 14, + paddingVertical: 10, borderRadius: 100, elevation: 4, shadowColor: '#000', @@ -1242,8 +1275,8 @@ const styles = StyleSheet.create({ lineHeight: 20 }, watchProgressContainer: { - marginTop: 8, - marginBottom: 12, + marginTop: 6, + marginBottom: 8, width: '100%', alignItems: 'center', overflow: 'hidden' diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 6b9cf964..ec830561 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -5,7 +5,7 @@ export const colors = { secondary: '#FF6B6B', // Coral color that complements teal // Background colors - Deep dark theme - darkBackground: '#050808', // Very deep dark with subtle teal undertone + darkBackground: '#020404', // Even deeper dark with subtle teal undertone lightBackground: '#FFFFFF', // Light theme background // Text colors - Following Material Design contrast ratios @@ -18,8 +18,8 @@ export const colors = { // Basic colors with teal undertones white: '#FFFFFF', - black: '#050808', - darkGray: '#0F1414', // Darker gray with teal undertone + black: '#020404', + darkGray: '#0A0C0C', // Darker gray with teal undertone mediumGray: 'rgba(255, 255, 255, 0.6)', // Medium emphasis text lightGray: 'rgba(255, 255, 255, 0.38)', // Disabled text @@ -32,10 +32,10 @@ export const colors = { // Transparent colors transparent: 'transparent', transparentLight: 'rgba(255, 255, 255, 0.08)', // Material dark surface overlay - transparentDark: 'rgba(5, 8, 8, 0.7)', // Darker overlay with subtle teal tint + transparentDark: 'rgba(2, 4, 4, 0.7)', // Darker overlay with subtle teal tint // Additional properties - background: '#050808', // Very deep dark + background: '#020404', // Very deep dark // UI elements border: 'rgba(255, 255, 255, 0.12)', // Material dark theme divider