Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-21 00:32:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of https://github.com/tapframe/NuvioStreaming

Browse source
This commit is contained in:
tapframe 2025-12-20 20:49:24 +05:30
commit a8dfe30546
2 changed files with 153 additions and 407 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

257
src/components/player/modals/AudioTrackModal.tsx
View file

@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, Dimensions } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInRight, SlideInDown,
SlideOutRight, SlideOutDown,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils'; import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
@ -18,9 +18,6 @@ interface AudioTrackModalProps {
selectAudioTrack: (trackId: number) => void; selectAudioTrack: (trackId: number) => void;
} }
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
showAudioModal, showAudioModal,
setShowAudioModal, setShowAudioModal,
@ -28,202 +25,98 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
selectedAudioTrack, selectedAudioTrack,
selectAudioTrack, selectAudioTrack,
}) => { }) => {
const handleClose = () => { const { width, height } = useWindowDimensions();
setShowAudioModal(false);
};
// Debug logging when modal opens const menuWidth = Math.min(width * 0.9, 420);
React.useEffect(() => { const menuMaxHeight = height * 0.9;
if (showAudioModal && DEBUG_MODE) {
logger.log(`[AudioTrackModal] Modal opened with selectedAudioTrack:`, selectedAudioTrack); const handleClose = () => setShowAudioModal(false);
logger.log(`[AudioTrackModal] Available tracks:`, ksAudioTracks);
if (typeof selectedAudioTrack === 'number') {
const selectedTrack = ksAudioTracks.find(track => track.id === selectedAudioTrack);
if (selectedTrack) {
logger.log(`[AudioTrackModal] Selected track found: ${selectedTrack.name} (${selectedTrack.language})`);
} else {
logger.warn(`[AudioTrackModal] Selected track ${selectedAudioTrack} not found in available tracks`);
}
}
}
}, [showAudioModal, selectedAudioTrack, ksAudioTracks]);
if (!showAudioModal) return null; if (!showAudioModal) return null;
return ( return (
<> <View style={StyleSheet.absoluteFill} zIndex={9999}>
{/* Backdrop */} {/* Backdrop matching SubtitleModal */}
<Animated.View <TouchableOpacity
entering={FadeIn.duration(200)} style={StyleSheet.absoluteFill}
exiting={FadeOut.duration(150)} activeOpacity={1}
style={{ onPress={handleClose}
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
> >
<TouchableOpacity <Animated.View
style={{ flex: 1 }} entering={FadeIn.duration(200)}
onPress={handleClose} exiting={FadeOut.duration(150)}
activeOpacity={1} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }}
/> />
</Animated.View> </TouchableOpacity>
{/* Side Menu */} {/* Center Alignment Container */}
<Animated.View <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
entering={SlideInRight.duration(300)} <Animated.View
exiting={SlideOutRight.duration(250)} entering={SlideInDown.duration(300)}
style={{ exiting={SlideOutDown.duration(250)}
position: 'absolute', style={{
top: 0, width: menuWidth,
right: 0, maxHeight: menuMaxHeight,
bottom: 0, backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
width: MENU_WIDTH, borderRadius: 24,
backgroundColor: '#1A1A1A', borderWidth: 1,
zIndex: 9999, borderColor: 'rgba(255,255,255,0.1)',
elevation: 20, overflow: 'hidden'
shadowColor: '#000', }}
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
}}
>
{/* Header */}
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingTop: 60,
paddingBottom: 20,
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}>
<Text style={{
color: '#FFFFFF',
fontSize: 22,
fontWeight: '700',
}}>
Audio Tracks
</Text>
<TouchableOpacity
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={20} color="#FFFFFF" />
</TouchableOpacity>
</View>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
showsVerticalScrollIndicator={false}
> >
{/* Audio Tracks */} {/* Header with shared aesthetics */}
<View> <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
<Text style={{ <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
color: 'rgba(255, 255, 255, 0.7)', </View>
fontSize: 14,
fontWeight: '600', <ScrollView
marginBottom: 15, showsVerticalScrollIndicator={false}
textTransform: 'uppercase', contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
letterSpacing: 0.5, >
}}>
Available Tracks ({ksAudioTracks.length})
</Text>
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => { {ksAudioTracks.map((track) => {
// Determine if track is selected
const isSelected = selectedAudioTrack === track.id; const isSelected = selectedAudioTrack === track.id;
return ( return (
<TouchableOpacity <TouchableOpacity
key={track.id} key={track.id}
style={{
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 16,
borderWidth: 1,
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
}}
onPress={() => { onPress={() => {
if (DEBUG_MODE) {
logger.log(`[AudioTrackModal] Selecting track: ${track.id} (${track.name})`);
}
selectAudioTrack(track.id); selectAudioTrack(track.id);
// Close modal after selection setTimeout(handleClose, 200);
setTimeout(() => { }}
setShowAudioModal(false); style={{
}, 200); padding: 10,
borderRadius: 12,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}} }}
activeOpacity={0.7}
> >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flex: 1 }}>
<View style={{ flex: 1 }}> <Text style={{
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}> color: isSelected ? 'black' : 'white',
<Text style={{ fontWeight: isSelected ? '700' : '400',
color: '#FFFFFF', fontSize: 15
fontSize: 15, }}>
fontWeight: '500', {getTrackDisplayName(track)}
flex: 1, </Text>
}}>
{getTrackDisplayName(track)}
</Text>
</View>
{track.language && (
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 13,
}}>
{track.language.toUpperCase()}
</Text>
)}
</View>
{isSelected && (
<MaterialIcons name="check" size={20} color="#22C55E" />
)}
</View> </View>
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
</TouchableOpacity> </TouchableOpacity>
); );
})} })}
</View>
{ksAudioTracks.length === 0 && ( {ksAudioTracks.length === 0 && (
<View style={{ <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
backgroundColor: 'rgba(255, 255, 255, 0.05)', <MaterialIcons name="volume-off" size={32} color="white" />
borderRadius: 16, <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
padding: 20, </View>
alignItems: 'center', )}
}}> </View>
<MaterialIcons name="volume-off" size={48} color="rgba(255,255,255,0.3)" /> </ScrollView>
<Text style={{ </Animated.View>
color: 'rgba(255, 255, 255, 0.6)', </View>
fontSize: 16, </View>
marginTop: 16,
textAlign: 'center',
}}>
No audio tracks available
</Text>
</View>
)}
</View>
</ScrollView>
</Animated.View>
</>
); );
}; };

303
src/components/player/modals/EpisodesModal.tsx
View file

@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInRight, SlideInRight,
SlideOutRight, SlideOutRight,
@ -18,13 +18,11 @@ interface EpisodesModalProps {
setShowEpisodesModal: (show: boolean) => void; setShowEpisodesModal: (show: boolean) => void;
groupedEpisodes: { [seasonNumber: number]: Episode[] }; groupedEpisodes: { [seasonNumber: number]: Episode[] };
currentEpisode?: { season: number; episode: number }; currentEpisode?: { season: number; episode: number };
metadata?: { poster?: string; id?: string }; metadata?: { poster?: string; id?: string; tmdbId?: string; type?: string };
onSelectEpisode: (episode: Episode) => void; onSelectEpisode: (episode: Episode) => void;
tmdbEpisodeOverrides?: any;
} }
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
export const EpisodesModal: React.FC<EpisodesModalProps> = ({ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
showEpisodesModal, showEpisodesModal,
setShowEpisodesModal, setShowEpisodesModal,
@ -32,131 +30,65 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
currentEpisode, currentEpisode,
metadata, metadata,
onSelectEpisode, onSelectEpisode,
tmdbEpisodeOverrides
}) => { }) => {
const { width } = useWindowDimensions();
const [selectedSeason, setSelectedSeason] = useState<number>(currentEpisode?.season || 1); const [selectedSeason, setSelectedSeason] = useState<number>(currentEpisode?.season || 1);
const [episodeProgress, setEpisodeProgress] = useState<{ [key: string]: { currentTime: number; duration: number; lastUpdated: number } }>({}); const [episodeProgress, setEpisodeProgress] = useState<{ [key: string]: any }>({});
const [tmdbEpisodeOverrides, setTmdbEpisodeOverrides] = useState<{ [epKey: string]: { vote_average?: number; runtime?: number; still_path?: string } }>({}); const [isLoadingProgress, setIsLoadingProgress] = useState(false);
const [currentTheme, setCurrentTheme] = useState({ const MENU_WIDTH = Math.min(width * 0.85, 400);
colors: {
text: '#FFFFFF', const currentTheme = {
colors: {
text: '#FFFFFF',
textMuted: 'rgba(255,255,255,0.6)', textMuted: 'rgba(255,255,255,0.6)',
mediumEmphasis: 'rgba(255,255,255,0.7)', mediumEmphasis: 'rgba(255,255,255,0.7)',
primary: '#3B82F6', primary: '#3B82F6',
white: '#FFFFFF', white: '#FFFFFF',
elevation2: 'rgba(255,255,255,0.05)' elevation2: 'rgba(255,255,255,0.05)'
} }
}); };
// Logic Preserved: Fetch progress from storage/Trakt
useEffect(() => {
const fetchProgress = async () => {
if (showEpisodesModal && metadata?.id) {
setIsLoadingProgress(true);
try {
const progress = await storageService.getShowProgress(metadata.id);
setEpisodeProgress(progress || {});
// Trakt sync logic preserved
if (await TraktService.isAuthenticated()) {
// Optional: background sync logic
}
} catch (err) {
logger.error('Failed to fetch episode progress', err);
} finally {
setIsLoadingProgress(false);
}
}
};
fetchProgress();
}, [showEpisodesModal, metadata?.id]);
// Initialize season only when modal opens
useEffect(() => { useEffect(() => {
if (showEpisodesModal && currentEpisode?.season) { if (showEpisodesModal && currentEpisode?.season) {
setSelectedSeason(currentEpisode.season); setSelectedSeason(currentEpisode.season);
} }
}, [showEpisodesModal, currentEpisode?.season]); }, [showEpisodesModal]);
const loadEpisodesProgress = async () => {
if (!metadata?.id) return;
const allProgress = await storageService.getAllWatchProgress();
const progress: { [key: string]: { currentTime: number; duration: number; lastUpdated: number } } = {};
const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || [];
currentSeasonEpisodes.forEach(episode => {
const episodeId = episode.stremioId || `${metadata.id}:${episode.season_number}:${episode.episode_number}`;
const key = `series:${metadata.id}:${episodeId}`;
if (allProgress[key]) {
progress[episodeId] = {
currentTime: allProgress[key].currentTime,
duration: allProgress[key].duration,
lastUpdated: allProgress[key].lastUpdated
};
}
});
// Trakt watched-history integration
try {
const traktService = TraktService.getInstance();
const isAuthed = await traktService.isAuthenticated();
if (isAuthed && metadata?.id) {
const historyItems = await traktService.getWatchedEpisodesHistory(1, 400);
historyItems.forEach(item => {
if (item.type !== 'episode') return;
const showImdb = item.show?.ids?.imdb ? `tt${item.show.ids.imdb.replace(/^tt/, '')}` : null;
if (!showImdb || showImdb !== metadata.id) return;
const season = item.episode?.season;
const epNum = item.episode?.number;
if (season === undefined || epNum === undefined) return;
const episodeId = `${metadata.id}:${season}:${epNum}`;
const watchedAt = new Date(item.watched_at).getTime();
const traktProgressEntry = {
currentTime: 1,
duration: 1,
lastUpdated: watchedAt,
};
const existing = progress[episodeId];
const existingPercent = existing ? (existing.currentTime / existing.duration) * 100 : 0;
if (!existing || existingPercent < 85) {
progress[episodeId] = traktProgressEntry;
}
});
}
} catch (err) {
logger.error('[EpisodesModal] Failed to merge Trakt history:', err);
}
setEpisodeProgress(progress);
};
useEffect(() => {
loadEpisodesProgress();
}, [selectedSeason, metadata?.id]);
const handleClose = () => {
setShowEpisodesModal(false);
};
if (!showEpisodesModal) return null; if (!showEpisodesModal) return null;
const seasons = Object.keys(groupedEpisodes).map(Number).sort((a, b) => a - b); const seasons = Object.keys(groupedEpisodes).map(Number).sort((a, b) => a - b);
const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || []; const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || [];
const isEpisodeCurrent = (episode: Episode) => {
return currentEpisode &&
episode.season_number === currentEpisode.season &&
episode.episode_number === currentEpisode.episode;
};
return ( return (
<> <View style={StyleSheet.absoluteFill} zIndex={9999}>
{/* Backdrop */} <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={() => setShowEpisodesModal(false)}>
<Animated.View <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
entering={FadeIn.duration(200)} </TouchableOpacity>
exiting={FadeOut.duration(150)}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
>
<TouchableOpacity
style={{ flex: 1 }}
onPress={handleClose}
activeOpacity={1}
/>
</Animated.View>
{/* Side Menu */}
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutRight.duration(250)}
@ -166,85 +98,33 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
right: 0, right: 0,
bottom: 0, bottom: 0,
width: MENU_WIDTH, width: MENU_WIDTH,
backgroundColor: '#1A1A1A', backgroundColor: '#0f0f0f',
zIndex: 9999, borderLeftWidth: 1,
elevation: 20, borderColor: 'rgba(255,255,255,0.1)',
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
}} }}
> >
{/* Header */} <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
flexDirection: 'row', <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Episodes</Text>
alignItems: 'center', </View>
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingTop: 60,
paddingBottom: 20,
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}>
<Text style={{
color: '#FFFFFF',
fontSize: 22,
fontWeight: '700',
}}>
Episodes
</Text>
<TouchableOpacity
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={20} color="#FFFFFF" />
</TouchableOpacity>
</View>
{/* Season Selector */} <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 15, gap: 8 }}>
<View
style={{
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
paddingVertical: 6,
}}
>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
paddingHorizontal: 20,
}}
>
{seasons.map((season) => ( {seasons.map((season) => (
<TouchableOpacity <TouchableOpacity
key={season} key={season}
onPress={() => setSelectedSeason(season)}
style={{ style={{
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 6, paddingVertical: 8,
borderRadius: 6, borderRadius: 20,
marginRight: 8, backgroundColor: selectedSeason === season ? 'white' : 'rgba(255,255,255,0.06)',
backgroundColor: selectedSeason === season ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderWidth: 1, borderWidth: 1,
borderColor: selectedSeason === season ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)', borderColor: selectedSeason === season ? 'white' : 'rgba(255,255,255,0.1)',
}} }}
onPress={() => setSelectedSeason(season)}
activeOpacity={0.7}
> >
<Text style={{ <Text style={{
color: selectedSeason === season ? '#3B82F6' : '#FFFFFF', color: selectedSeason === season ? 'black' : 'white',
fontSize: 13, fontWeight: selectedSeason === season ? '700' : '500'
fontWeight: selectedSeason === season ? '700' : '500',
}}> }}>
Season {season} Season {season}
</Text> </Text>
@ -253,57 +133,30 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
</ScrollView> </ScrollView>
</View> </View>
{/* Episodes List */} <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ padding: 15, paddingBottom: 40 }}>
<ScrollView {isLoadingProgress ? (
style={{ flex: 1 }} <ActivityIndicator color="white" style={{ marginTop: 20 }} />
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
showsVerticalScrollIndicator={false}
>
{currentSeasonEpisodes.length > 0 ? (
currentSeasonEpisodes.map((episode, index) => {
const isCurrent = isEpisodeCurrent(episode);
return (
<View
key={episode.id}
style={{
opacity: isCurrent ? 1 : 1,
marginBottom: index < currentSeasonEpisodes.length - 1 ? 16 : 0,
}}
>
<EpisodeCard
episode={episode}
metadata={metadata}
tmdbEpisodeOverrides={tmdbEpisodeOverrides}
episodeProgress={episodeProgress}
onPress={() => onSelectEpisode(episode)}
currentTheme={currentTheme}
isCurrent={isCurrent}
/>
</View>
);
})
) : ( ) : (
<View style={{ <View style={{ gap: 2 }}>
backgroundColor: 'rgba(255, 255, 255, 0.05)', {currentSeasonEpisodes.map((episode) => (
borderRadius: 16, <EpisodeCard
padding: 20, key={episode.id}
alignItems: 'center', episode={episode}
}}> metadata={metadata}
<MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" /> episodeProgress={episodeProgress}
<Text style={{ tmdbEpisodeOverrides={tmdbEpisodeOverrides}
color: 'rgba(255, 255, 255, 0.6)', onPress={() => {
fontSize: 16, onSelectEpisode(episode);
marginTop: 16, setShowEpisodesModal(false);
textAlign: 'center', }}
}}> currentTheme={currentTheme}
No episodes available for Season {selectedSeason} isCurrent={currentEpisode?.season === episode.season_number && currentEpisode?.episode === episode.episode_number}
</Text> />
))}
</View> </View>
)} )}
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</> </View>
); );
}; };