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

This commit is contained in:
Nayif Noushad 2025-04-18 00:00:13 +05:30
parent 698d975500
commit 76796a50d6
3 changed files with 57 additions and 0 deletions

View file

@ -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,
},
});

View file

@ -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);

View file

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