mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-03-11 17:45:38 +00:00
metadata: some fixes
This commit is contained in:
Nayif Noushad
parent
1575bdd86f
commit
97bd2210a8
3 changed files with 85 additions and 43 deletions
|
|
@ -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<MoreLikeThisSectionProps> = ({
|
|||
// 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<MoreLikeThisSectionProps> = ({
|
|||
})
|
||||
);
|
||||
} 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<MoreLikeThisSectionProps> = ({
|
|||
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<SafeAreaView
|
||||
|
|
@ -863,20 +899,17 @@ const MetadataScreen = () => {
|
|||
{/* Description */}
|
||||
{metadata.description && (
|
||||
<View style={styles.descriptionContainer}>
|
||||
<Text
|
||||
style={styles.description}
|
||||
numberOfLines={showFullDescription ? undefined : 3}
|
||||
onTextLayout={({ nativeEvent: { lines } }) => {
|
||||
if (!showFullDescription) {
|
||||
setTextTruncated(lines.length > 3);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{`${metadata.description}`}
|
||||
</Text>
|
||||
<Animated.View style={descriptionAnimatedStyle}>
|
||||
<Text
|
||||
style={styles.description}
|
||||
onTextLayout={handleTextLayout}
|
||||
>
|
||||
{`${metadata.description}`}
|
||||
</Text>
|
||||
</Animated.View>
|
||||
{textTruncated && (
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowFullDescription(!showFullDescription)}
|
||||
onPress={toggleDescription}
|
||||
style={styles.showMoreButton}
|
||||
>
|
||||
<Text style={styles.showMoreText}>
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue