some elements

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "Stremio Expo",
-    "slug": "stremio-expo",
+    "name": "Nuvio",
+    "slug": "nuvio",
     "version": "1.0.0",
     "orientation": "default",
     "icon": "./assets/icon.png",
@@ -30,15 +30,17 @@
         "INTERNET",
         "WAKE_LOCK"
       ],
-      "package": "com.nuvio.app"
+      "package": "com.nuvio.app",
+      "enableSplitAPKs": true
     },
     "web": {
       "favicon": "./assets/favicon.png"
     },
     "extra": {
       "eas": {
-        "projectId": "7a199ed7-d3dc-46df-b39e-2ddf68089981"
+        "projectId": "909107b8-fe61-45ce-b02f-b02510d306a6"
       }
-    }
+    },
+    "owner": "nayifleo"
   }
 }

src/components/metadata/CastSection.tsx

@@ -64,13 +64,15 @@ export const CastSection: React.FC<CastSectionProps> = ({
               ) : (
                 <MaterialIcons 
                   name="person" 
-                  size={40} 
+                  size={32} 
                   color={colors.textMuted} 
                 />
               )}
             </View>
-            <Text style={styles.castName} numberOfLines={1}>{member.name}</Text>
-            <Text style={styles.castCharacter} numberOfLines={2}>{member.character}</Text>
+            <View style={styles.castTextContainer}>
+              <Text style={styles.castName} numberOfLines={1}>{member.name}</Text>
+              <Text style={styles.castCharacter} numberOfLines={1}>{member.character}</Text>
+            </View>
           </TouchableOpacity>
         ))}
       </ScrollView>
@@ -82,7 +84,7 @@ const styles = StyleSheet.create({
   loadingContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 20,
+    padding: 12,
   },
   castSection: {
     marginTop: 0,
@@ -90,43 +92,47 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     color: colors.highEmphasis,
-    fontSize: 20,
-    fontWeight: '800',
-    marginBottom: 12,
-    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
     paddingHorizontal: 16,
   },
   castScrollContainer: {
-    marginTop: 8,
+    marginTop: 4,
   },
   castContainer: {
-    marginVertical: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 4,
   },
   castMember: {
-    width: 100,
-    marginRight: 16,
+    width: 80,
+    marginRight: 12,
     alignItems: 'center',
   },
   castImageContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
+    width: 64,
+    height: 64,
+    borderRadius: 32,
     backgroundColor: colors.elevation2,
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
-    marginBottom: 8,
+    marginBottom: 6,
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.1)',
   },
   castImage: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+  },
+  castTextContainer: {
+    width: '100%',
+    alignItems: 'center',
   },
   castName: {
     color: colors.highEmphasis,
-    fontSize: 14,
+    fontSize: 13,
     fontWeight: '600',
     textAlign: 'center',
   },
@@ -134,6 +140,7 @@ const styles = StyleSheet.create({
     color: colors.mediumEmphasis,
     fontSize: 12,
     textAlign: 'center',
-    marginTop: 4,
+    marginTop: 2,
+    opacity: 0.8,
   },
 }); 

src/screens/StreamScreen.tsx

@@ -1 +0,0 @@
- 

src/screens/StreamsScreen.tsx

@@ -11,7 +11,8 @@ import {
   ImageBackground,
   ScrollView,
   StatusBar,
-  Alert
+  Alert,
+  Dimensions
 } from 'react-native';
 import { useRoute, useNavigation } from '@react-navigation/native';
 import { RouteProp } from '@react-navigation/native';
@@ -50,6 +51,8 @@ const TMDB_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Tmd
 const HDR_ICON = 'https://uxwing.com/wp-content/themes/uxwing/download/video-photography-multimedia/hdr-icon.png';
 const DOLBY_ICON = 'https://upload.wikimedia.org/wikipedia/en/thumb/3/3f/Dolby_Vision_%28logo%29.svg/512px-Dolby_Vision_%28logo%29.svg.png?20220908042900';
 
+const { width, height } = Dimensions.get('window');
+
 // Extracted Components
 const StreamCard = memo(({ stream, onPress, index, torrentProgress, isLoading, statusMessage }: { 
   stream: Stream; 
@@ -927,6 +930,41 @@ export const StreamsScreen = () => {
         </TouchableOpacity>
       </Animated.View>
 
+      {type === 'movie' && metadata && (
+        <Animated.View style={[styles.movieTitleContainer, heroStyle]}>
+          <ImageBackground
+            source={{ uri: metadata.banner || metadata.poster }}
+            style={styles.movieTitleBackground}
+            resizeMode="cover"
+          >
+            <LinearGradient
+              colors={[
+                'rgba(0,0,0,0.4)',
+                'rgba(0,0,0,0.6)',
+                'rgba(0,0,0,0.8)',
+                colors.darkBackground
+              ]}
+              locations={[0, 0.3, 0.7, 1]}
+              style={styles.movieTitleGradient}
+            >
+              <View style={styles.movieTitleContent}>
+                {metadata.logo ? (
+                  <Image
+                    source={{ uri: metadata.logo }}
+                    style={styles.movieLogo}
+                    contentFit="contain"
+                  />
+                ) : (
+                  <Text style={styles.movieTitle} numberOfLines={2}>
+                    {metadata.name}
+                  </Text>
+                )}
+              </View>
+            </LinearGradient>
+          </ImageBackground>
+        </Animated.View>
+      )}
+
       {type === 'series' && currentEpisode && (
         <Animated.View style={[styles.streamsHeroContainer, heroStyle]}>
           <Animated.View
@@ -1408,6 +1446,41 @@ const styles = StyleSheet.create({
     marginLeft: 8,
     fontWeight: '500',
   },
+  movieTitleContainer: {
+    width: '100%',
+    height: 180,
+    backgroundColor: colors.black,
+  },
+  movieTitleBackground: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: colors.black,
+  },
+  movieTitleGradient: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 16,
+  },
+  movieTitleContent: {
+    width: '100%',
+    alignItems: 'center',
+    marginTop: Platform.OS === 'android' ? 35 : 45,
+  },
+  movieLogo: {
+    width: width * 0.6,
+    height: 70,
+    marginBottom: 8,
+  },
+  movieTitle: {
+    color: colors.highEmphasis,
+    fontSize: 28,
+    fontWeight: '900',
+    textAlign: 'center',
+    textShadowColor: 'rgba(0,0,0,0.75)',
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 4,
+    letterSpacing: -0.5,
+  },
 });
 
 export default memo(StreamsScreen);