Add runtime display to SeriesContent and StreamsScreen; update TMDBEpisode interface to include runtime property

src/components/metadata/SeriesContent.tsx

@@ -171,6 +171,16 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
       });
     };
 
+    const formatRuntime = (runtime: number) => {
+      if (!runtime) return null;
+      const hours = Math.floor(runtime / 60);
+      const minutes = runtime % 60;
+      if (hours > 0) {
+        return `${hours}h ${minutes}m`;
+      }
+      return `${minutes}m`;
+    };
+
     // Get episode progress
     const episodeId = episode.stremioId || `${metadata?.id}:${episode.season_number}:${episode.episode_number}`;
     const progress = episodeProgress[episodeId];
@@ -230,6 +240,14 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
                   </Text>
                 </View>
               )}
+              {episode.runtime && (
+                <View style={styles.runtimeContainer}>
+                  <MaterialIcons name="schedule" size={14} color={colors.textMuted} />
+                  <Text style={styles.runtimeText}>
+                    {formatRuntime(episode.runtime)}
+                  </Text>
+                </View>
+              )}
               {episode.air_date && (
                 <Text style={styles.airDateText}>
                   {formatDate(episode.air_date)}
@@ -519,4 +537,18 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.3)',
   },
+  runtimeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+  },
+  runtimeText: {
+    color: colors.textMuted,
+    fontSize: 13,
+    fontWeight: '600',
+    marginLeft: 4,
+  },
 }); 

src/screens/StreamsScreen.tsx

@@ -1016,6 +1016,16 @@ export const StreamsScreen = () => {
                             </Text>
                           </View>
                         )}
+                        {currentEpisode.runtime && (
+                          <View style={styles.streamsHeroRuntime}>
+                            <MaterialIcons name="schedule" size={16} color={colors.mediumEmphasis} />
+                            <Text style={styles.streamsHeroRuntimeText}>
+                              {currentEpisode.runtime >= 60
+                                ? `${Math.floor(currentEpisode.runtime / 60)}h ${currentEpisode.runtime % 60}m`
+                                : `${currentEpisode.runtime}m`}
+                            </Text>
+                          </View>
+                        )}
                       </View>
                     </View>
                   </View>
@@ -1469,6 +1479,20 @@ const styles = StyleSheet.create({
     textShadowRadius: 4,
     letterSpacing: -0.5,
   },
+  streamsHeroRuntime: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  streamsHeroRuntimeText: {
+    color: colors.mediumEmphasis,
+    fontSize: 13,
+    fontWeight: '600',
+  },
 });
 
 export default memo(StreamsScreen); 

src/services/tmdbService.ts

@@ -21,6 +21,7 @@ export interface TMDBEpisode {
   imdb_id?: string;
   imdb_rating?: number;
   season_poster_path?: string | null;
+  runtime?: number;
 }
 
 export interface TMDBSeason {