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

episode modal init

Browse source
This commit is contained in:
tapframe 2025-10-26 21:02:39 +05:30
parent 09e25738a8
commit 85cb950fa8
11 changed files with 1338 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ios/Nuvio.xcodeproj/project.pbxproj
View file

@ -459,7 +459,7 @@
);
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
PRODUCT_BUNDLE_IDENTIFIER = com.nuvio.app;
PRODUCT_NAME = Nuvio;
PRODUCT_NAME = "Nuvio";
SWIFT_OBJC_BRIDGING_HEADER = "Nuvio/Nuvio-Bridging-Header.h";
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0;
@ -490,8 +490,8 @@
"-lc++",
);
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
PRODUCT_BUNDLE_IDENTIFIER = com.nuviohub.app;
PRODUCT_NAME = Nuvio;
PRODUCT_BUNDLE_IDENTIFIER = "com.nuvio.app";
PRODUCT_NAME = "Nuvio";
SWIFT_OBJC_BRIDGING_HEADER = "Nuvio/Nuvio-Bridging-Header.h";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";

194
ios/Nuvio/Info.plist
View file

@ -1,99 +1,101 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>$(DEVELOPMENT_LANGUAGE)</string>
<key>CFBundleDisplayName</key>
<string>Nuvio</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
<key>CFBundleShortVersionString</key>
<string>1.2.7</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>nuvio</string>
<string>com.nuvio.app</string>
</array>
</dict>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>exp+nuvio</string>
</array>
</dict>
</array>
<key>CFBundleVersion</key>
<string>22</string>
<key>LSMinimumSystemVersion</key>
<string>12.0</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
<key>NSBonjourServices</key>
<array>
<string>_http._tcp</string>
</array>
<key>NSLocalNetworkUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your local network</string>
<key>RCTNewArchEnabled</key>
<true/>
<key>RCTRootViewBackgroundColor</key>
<integer>4278322180</integer>
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
</array>
<key>UIFileSharingEnabled</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>SplashScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>arm64</string>
</array>
<key>UIRequiresFullScreen</key>
<false/>
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleDefault</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIUserInterfaceStyle</key>
<string>Dark</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>
<dict>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>$(DEVELOPMENT_LANGUAGE)</string>
<key>CFBundleDisplayName</key>
<string>Nuvio</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
<key>CFBundleShortVersionString</key>
<string>1.2.7</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>nuvio</string>
<string>com.nuvio.app</string>
</array>
</dict>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>exp+nuvio</string>
</array>
</dict>
</array>
<key>CFBundleVersion</key>
<string>22</string>
<key>LSMinimumSystemVersion</key>
<string>12.0</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
<key>NSBonjourServices</key>
<array>
<string>_http._tcp</string>
</array>
<key>NSLocalNetworkUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your local network</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app does not require microphone access.</string>
<key>RCTNewArchEnabled</key>
<true/>
<key>RCTRootViewBackgroundColor</key>
<integer>4278322180</integer>
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
</array>
<key>UIFileSharingEnabled</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>SplashScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>arm64</string>
</array>
<key>UIRequiresFullScreen</key>
<true/>
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleDefault</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIUserInterfaceStyle</key>
<string>Dark</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>

9
ios/Nuvio/NuvioRelease.entitlements
View file

@ -1,5 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict/>
</plist>
<dict>
<key>aps-environment</key>
<string>development</string>
<key>com.apple.developer.associated-domains</key>
<array/>
</dict>
</plist>

83
src/components/player/AndroidVideoPlayer.tsx
View file

@ -43,8 +43,11 @@ import SpeedModal from './modals/SpeedModal';
import PlayerControls from './controls/PlayerControls';
import CustomSubtitles from './subtitles/CustomSubtitles';
import { SourcesModal } from './modals/SourcesModal';
import { EpisodesModal } from './modals/EpisodesModal';
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
import VlcVideoPlayer, { VlcPlayerRef } from './VlcVideoPlayer';
import { stremioService } from '../../services/stremioService';
import { Episode } from '../../types/metadata';
import { shouldUseKSPlayer } from '../../utils/playerSelection';
import axios from 'axios';
import * as Brightness from 'expo-brightness';
@ -81,7 +84,8 @@ const AndroidVideoPlayer: React.FC = () => {
episodeId,
imdbId,
availableStreams: passedAvailableStreams,
backdrop
backdrop,
groupedEpisodes
} = route.params;
// Opt-in flag to use VLC backend
@ -469,6 +473,9 @@ const AndroidVideoPlayer: React.FC = () => {
const [showSubtitleLanguageModal, setShowSubtitleLanguageModal] = useState<boolean>(false);
const [isLoadingSubtitleList, setIsLoadingSubtitleList] = useState<boolean>(false);
const [showSourcesModal, setShowSourcesModal] = useState<boolean>(false);
const [showEpisodesModal, setShowEpisodesModal] = useState(false);
const [showEpisodeStreamsModal, setShowEpisodeStreamsModal] = useState(false);
const [selectedEpisodeForStreams, setSelectedEpisodeForStreams] = useState<Episode | null>(null);
const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: any[]; addonName: string } }>(passedAvailableStreams || {});
const [currentStreamUrl, setCurrentStreamUrl] = useState<string>(uri);
const [currentVideoType, setCurrentVideoType] = useState<string | undefined>(videoType);
@ -620,7 +627,7 @@ const AndroidVideoPlayer: React.FC = () => {
const shouldLoadMetadata = Boolean(id && type);
const metadataResult = useMetadata({ id: id || 'placeholder', type: (type as any) });
const { settings: appSettings } = useSettings();
const { metadata, loading: metadataLoading, groupedEpisodes, cast, loadCast } = shouldLoadMetadata ? (metadataResult as any) : { metadata: null, loading: false, groupedEpisodes: {}, cast: [], loadCast: () => {} };
const { metadata, loading: metadataLoading, groupedEpisodes: metadataGroupedEpisodes, cast, loadCast } = shouldLoadMetadata ? (metadataResult as any) : { metadata: null, loading: false, groupedEpisodes: {}, cast: [], loadCast: () => {} };
// Logo animation values
const logoScaleAnim = useRef(new Animated.Value(0.8)).current;
@ -2984,6 +2991,56 @@ const AndroidVideoPlayer: React.FC = () => {
}, 100);
};
const handleEpisodeSelect = (episode: Episode) => {
logger.log('[AndroidVideoPlayer] Episode selected:', episode.name);
setSelectedEpisodeForStreams(episode);
setShowEpisodesModal(false);
setShowEpisodeStreamsModal(true);
};
// Debug: Log when modal state changes
useEffect(() => {
if (showEpisodesModal) {
logger.log('[AndroidVideoPlayer] Episodes modal opened, groupedEpisodes:', groupedEpisodes);
logger.log('[AndroidVideoPlayer] type:', type, 'season:', season, 'episode:', episode);
}
}, [showEpisodesModal, groupedEpisodes, type]);
const handleEpisodeStreamSelect = async (stream: any) => {
if (!selectedEpisodeForStreams) return;
setShowEpisodeStreamsModal(false);
const newQuality = stream.quality || (stream.title?.match(/(\d+)p/)?.[0]);
const newProvider = stream.addonName || stream.name || stream.addon || 'Unknown';
const newStreamName = stream.name || stream.title || 'Unknown Stream';
setPaused(true);
setTimeout(() => {
(navigation as any).replace('PlayerAndroid', {
uri: stream.url,
title: title,
episodeTitle: selectedEpisodeForStreams.name,
season: selectedEpisodeForStreams.season_number,
episode: selectedEpisodeForStreams.episode_number,
quality: newQuality,
year: year,
streamProvider: newProvider,
streamName: newStreamName,
headers: stream.headers || undefined,
forceVlc: false,
id,
type: 'series',
episodeId: selectedEpisodeForStreams.stremioId || `${id}:${selectedEpisodeForStreams.season_number}:${selectedEpisodeForStreams.episode_number}`,
imdbId: imdbId ?? undefined,
backdrop: backdrop || undefined,
availableStreams: {},
groupedEpisodes: groupedEpisodes,
});
}, 100);
};
useEffect(() => {
if (isVideoLoaded && initialPosition && !isInitialSeekComplete && duration > 0) {
logger.log(`[AndroidVideoPlayer] Post-load initial seek to: ${initialPosition}s`);
@ -3377,6 +3434,7 @@ const AndroidVideoPlayer: React.FC = () => {
setShowSpeedModal={setShowSpeedModal}
isSubtitleModalOpen={showSubtitleModal}
setShowSourcesModal={setShowSourcesModal}
setShowEpisodesModal={type === 'series' ? setShowEpisodesModal : undefined}
onSliderValueChange={handleSliderValueChange}
onSlidingStart={handleSlidingStart}
onSlidingComplete={handleSlidingComplete}
@ -4070,6 +4128,27 @@ const AndroidVideoPlayer: React.FC = () => {
currentStreamUrl={currentStreamUrl}
onSelectStream={handleSelectStream}
/>
{type === 'series' && (
<>
<EpisodesModal
showEpisodesModal={showEpisodesModal}
setShowEpisodesModal={setShowEpisodesModal}
groupedEpisodes={groupedEpisodes || metadataGroupedEpisodes || {}}
currentEpisode={season && episode ? { season, episode } : undefined}
metadata={metadata ? { poster: metadata.poster, id: metadata.id } : undefined}
onSelectEpisode={handleEpisodeSelect}
/>
<EpisodeStreamsModal
visible={showEpisodeStreamsModal}
episode={selectedEpisodeForStreams}
onClose={() => setShowEpisodeStreamsModal(false)}
onSelectStream={handleEpisodeStreamSelect}
metadata={metadata ? { id: metadata.id, name: metadata.name } : undefined}
/>
</>
)}
{/* Error Modal */}
{isMounted.current && (

88
src/components/player/KSPlayerCore.tsx
View file

@ -44,6 +44,9 @@ import { SpeedModal } from './modals/SpeedModal';
import PlayerControls from './controls/PlayerControls';
import CustomSubtitles from './subtitles/CustomSubtitles';
import { SourcesModal } from './modals/SourcesModal';
import { EpisodesModal } from './modals/EpisodesModal';
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
import { Episode } from '../../types/metadata';
import axios from 'axios';
import { stremioService } from '../../services/stremioService';
import * as Brightness from 'expo-brightness';
@ -53,12 +56,6 @@ const KSPlayerCore: React.FC = () => {
const route = useRoute<RouteProp<RootStackParamList, 'PlayerIOS'>>();
const { uri, headers, streamProvider } = route.params as any;
console.log('[KSPlayerCore] Received navigation params:', {
uri,
headers,
headersKeys: headers ? Object.keys(headers) : [],
streamProvider
});
const navigation = useNavigation<RootStackNavigationProp>();
@ -78,7 +75,8 @@ const KSPlayerCore: React.FC = () => {
episodeId,
imdbId,
availableStreams: passedAvailableStreams,
backdrop
backdrop,
groupedEpisodes
} = route.params;
// Initialize Trakt autosync
@ -201,6 +199,9 @@ const KSPlayerCore: React.FC = () => {
const [showSubtitleLanguageModal, setShowSubtitleLanguageModal] = useState<boolean>(false);
const [isLoadingSubtitleList, setIsLoadingSubtitleList] = useState<boolean>(false);
const [showSourcesModal, setShowSourcesModal] = useState<boolean>(false);
const [showEpisodesModal, setShowEpisodesModal] = useState(false);
const [showEpisodeStreamsModal, setShowEpisodeStreamsModal] = useState(false);
const [selectedEpisodeForStreams, setSelectedEpisodeForStreams] = useState<Episode | null>(null);
const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: any[]; addonName: string } }>(passedAvailableStreams || {});
// Playback speed controls required by PlayerControls
const speedOptions = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
@ -326,7 +327,7 @@ const KSPlayerCore: React.FC = () => {
id: id || 'placeholder',
type: type || 'movie'
});
const { metadata, loading: metadataLoading, groupedEpisodes, cast, loadCast } = shouldLoadMetadata ? (metadataResult as any) : { metadata: null, loading: false, groupedEpisodes: {}, cast: [], loadCast: () => {} };
const { metadata, loading: metadataLoading, groupedEpisodes: metadataGroupedEpisodes, cast, loadCast } = shouldLoadMetadata ? (metadataResult as any) : { metadata: null, loading: false, groupedEpisodes: {}, cast: [], loadCast: () => {} };
const { settings } = useSettings();
// Logo animation values
@ -2368,6 +2369,55 @@ const KSPlayerCore: React.FC = () => {
}, 100);
};
const handleEpisodeSelect = (episode: Episode) => {
logger.log('[KSPlayerCore] Episode selected:', episode.name);
setSelectedEpisodeForStreams(episode);
setShowEpisodesModal(false);
setShowEpisodeStreamsModal(true);
};
// Debug: Log when modal state changes
useEffect(() => {
if (showEpisodesModal) {
logger.log('[KSPlayerCore] Episodes modal opened, groupedEpisodes:', groupedEpisodes);
logger.log('[KSPlayerCore] type:', type, 'season:', season, 'episode:', episode);
}
}, [showEpisodesModal, groupedEpisodes, type]);
const handleEpisodeStreamSelect = async (stream: any) => {
if (!selectedEpisodeForStreams) return;
setShowEpisodeStreamsModal(false);
const newQuality = stream.quality || (stream.title?.match(/(\d+)p/)?.[0]);
const newProvider = stream.addonName || stream.name || stream.addon || 'Unknown';
const newStreamName = stream.name || stream.title || 'Unknown Stream';
setPaused(true);
setTimeout(() => {
navigation.replace('PlayerIOS', {
uri: stream.url,
title: title,
episodeTitle: selectedEpisodeForStreams.name,
season: selectedEpisodeForStreams.season_number,
episode: selectedEpisodeForStreams.episode_number,
quality: newQuality,
year: year,
streamProvider: newProvider,
streamName: newStreamName,
headers: stream.headers || undefined,
id,
type: 'series',
episodeId: selectedEpisodeForStreams.stremioId || `${id}:${selectedEpisodeForStreams.season_number}:${selectedEpisodeForStreams.episode_number}`,
imdbId: imdbId ?? undefined,
backdrop: backdrop || undefined,
availableStreams: {},
groupedEpisodes: groupedEpisodes,
});
}, 100);
};
useEffect(() => {
if (isVideoLoaded && initialPosition && !isInitialSeekComplete && duration > 0) {
logger.log(`[VideoPlayer] Post-load initial seek to: ${initialPosition}s`);
@ -2676,6 +2726,7 @@ const KSPlayerCore: React.FC = () => {
setShowSpeedModal={setShowSpeedModal}
isSubtitleModalOpen={showSubtitleModal}
setShowSourcesModal={setShowSourcesModal}
setShowEpisodesModal={type === 'series' ? setShowEpisodesModal : undefined}
onSliderValueChange={handleSliderValueChange}
onSlidingStart={handleSlidingStart}
onSlidingComplete={handleSlidingComplete}
@ -3370,6 +3421,27 @@ const KSPlayerCore: React.FC = () => {
currentStreamUrl={currentStreamUrl}
onSelectStream={handleSelectStream}
/>
{type === 'series' && (
<>
<EpisodesModal
showEpisodesModal={showEpisodesModal}
setShowEpisodesModal={setShowEpisodesModal}
groupedEpisodes={groupedEpisodes || metadataGroupedEpisodes || {}}
currentEpisode={season && episode ? { season, episode } : undefined}
metadata={metadata ? { poster: metadata.poster, id: metadata.id } : undefined}
onSelectEpisode={handleEpisodeSelect}
/>
<EpisodeStreamsModal
visible={showEpisodeStreamsModal}
episode={selectedEpisodeForStreams}
onClose={() => setShowEpisodeStreamsModal(false)}
onSelectStream={handleEpisodeStreamSelect}
metadata={metadata ? { id: metadata.id, name: metadata.name } : undefined}
/>
</>
)}
{/* Error Modal */}
<Modal

313
src/components/player/cards/EpisodeCard.tsx Normal file
View file

@ -0,0 +1,313 @@
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import FastImage from '@d11/react-native-fast-image';
import { MaterialIcons } from '@expo/vector-icons';
import { Episode } from '../../../types/metadata';
const TMDB_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Tmdb.new.logo.svg/512px-Tmdb.new.logo.svg.png?20200406190906';
const EPISODE_PLACEHOLDER = 'https://via.placeholder.com/500x280/1a1a1a/666666?text=No+Preview';
interface EpisodeCardProps {
episode: Episode;
metadata?: { poster?: string; id?: string };
tmdbEpisodeOverrides?: { [key: string]: { vote_average?: number; runtime?: number; still_path?: string } };
episodeProgress?: { [key: string]: { currentTime: number; duration: number; lastUpdated: number } };
onPress: () => void;
currentTheme: any;
isCurrent?: boolean;
}
export const EpisodeCard: React.FC<EpisodeCardProps> = ({
episode,
metadata,
tmdbEpisodeOverrides,
episodeProgress,
onPress,
currentTheme,
isCurrent = false,
}) => {
const { width } = Dimensions.get('window');
const isTablet = width >= 768;
// Get episode image
let episodeImage = EPISODE_PLACEHOLDER;
if (episode.still_path) {
if (episode.still_path.startsWith('http')) {
episodeImage = episode.still_path;
} else {
const { tmdbService } = require('../../../services/tmdbService');
const tmdbUrl = tmdbService.getImageUrl(episode.still_path, 'w500');
if (tmdbUrl) episodeImage = tmdbUrl;
}
} else if (metadata?.poster) {
episodeImage = metadata.poster;
}
const episodeNumber = typeof episode.episode_number === 'number' ? episode.episode_number.toString() : '';
const seasonNumber = typeof episode.season_number === 'number' ? episode.season_number.toString() : '';
const episodeString = seasonNumber && episodeNumber ? `S${seasonNumber.padStart(2, '0')}E${episodeNumber.padStart(2, '0')}` : '';
// Get episode progress
const episodeId = episode.stremioId || `${metadata?.id}:${episode.season_number}:${episode.episode_number}`;
const tmdbOverride = tmdbEpisodeOverrides?.[`${metadata?.id}:${episode.season_number}:${episode.episode_number}`];
const effectiveVote = (tmdbOverride?.vote_average ?? episode.vote_average) || 0;
const effectiveRuntime = tmdbOverride?.runtime ?? (episode as any).runtime;
if (!episode.still_path && tmdbOverride?.still_path) {
const { tmdbService } = require('../../../services/tmdbService');
const tmdbUrl = tmdbService.getImageUrl(tmdbOverride.still_path, 'w500');
if (tmdbUrl) episodeImage = tmdbUrl;
}
const progress = episodeProgress?.[episodeId];
const progressPercent = progress ? (progress.currentTime / progress.duration) * 100 : 0;
const showProgress = progress && progressPercent < 85;
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`;
};
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
};
return (
<TouchableOpacity
key={episode.id}
style={[
styles.episodeCard,
isCurrent && { borderWidth: 2, borderColor: currentTheme.colors.primary }
]}
onPress={onPress}
activeOpacity={0.7}
>
<View style={styles.episodeImageContainer}>
<FastImage
source={{ uri: episodeImage }}
style={styles.episodeImage}
resizeMode={FastImage.resizeMode.cover}
/>
{isCurrent && (
<View style={styles.currentBadge}>
<MaterialIcons name="visibility" size={14} color={currentTheme.colors.primary} />
</View>
)}
<View style={styles.episodeNumberBadge}>
<Text style={styles.episodeNumberText}>{episodeString}</Text>
</View>
{showProgress && (
<View style={styles.progressBarContainer}>
<View
style={[
styles.progressBar,
{ width: `${progressPercent}%`, backgroundColor: currentTheme.colors.primary }
]}
/>
</View>
)}
{progressPercent >= 85 && (
<View style={[
styles.completedBadge,
{ backgroundColor: currentTheme.colors.primary }
]}>
<MaterialIcons name="check" size={12} color={currentTheme.colors.white} />
</View>
)}
{(!progress || progressPercent === 0) && (
<View style={styles.unwatchedBadge} />
)}
</View>
<View style={styles.episodeInfo}>
<View style={styles.episodeHeader}>
<Text style={[styles.episodeTitle, { color: currentTheme.colors.text }]} numberOfLines={2}>
{episode.name}
</Text>
<View style={styles.episodeMetadata}>
{effectiveVote > 0 && (
<View style={styles.ratingContainer}>
<FastImage
source={{ uri: TMDB_LOGO }}
style={styles.tmdbLogo}
resizeMode={FastImage.resizeMode.contain}
/>
<Text style={[styles.ratingText, { color: currentTheme.colors.textMuted }]}>
{effectiveVote.toFixed(1)}
</Text>
</View>
)}
{effectiveRuntime && (
<View style={styles.runtimeContainer}>
<MaterialIcons name="schedule" size={14} color={currentTheme.colors.textMuted} />
<Text style={[styles.runtimeText, { color: currentTheme.colors.textMuted }]}>
{formatRuntime(effectiveRuntime)}
</Text>
</View>
)}
{episode.air_date && (
<Text style={[styles.airDateText, { color: currentTheme.colors.textMuted }]}>
{formatDate(episode.air_date)}
</Text>
)}
</View>
</View>
<Text style={[styles.episodeOverview, { color: currentTheme.colors.mediumEmphasis }]} numberOfLines={2}>
{episode.overview || 'No description available'}
</Text>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
episodeCard: {
flexDirection: 'row',
borderRadius: 16,
marginBottom: 16,
overflow: 'hidden',
elevation: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.25,
shadowRadius: 8,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
height: 120,
},
episodeImageContainer: {
position: 'relative',
width: 120,
height: 120,
},
episodeImage: {
width: '100%',
height: '100%',
transform: [{ scale: 1.02 }],
},
episodeNumberBadge: {
position: 'absolute',
bottom: 8,
right: 4,
backgroundColor: 'rgba(0,0,0,0.85)',
paddingHorizontal: 6,
paddingVertical: 2,
borderRadius: 4,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.2)',
zIndex: 1,
},
episodeNumberText: {
color: '#fff',
fontSize: 11,
fontWeight: '600',
letterSpacing: 0.3,
},
episodeInfo: {
flex: 1,
padding: 12,
justifyContent: 'center',
},
episodeHeader: {
marginBottom: 4,
},
episodeTitle: {
fontSize: 15,
fontWeight: '700',
letterSpacing: 0.3,
marginBottom: 2,
},
episodeMetadata: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
ratingContainer: {
flexDirection: 'row',
alignItems: 'center',
},
tmdbLogo: {
width: 20,
height: 14,
},
ratingText: {
fontSize: 13,
fontWeight: '700',
marginLeft: 4,
},
runtimeContainer: {
flexDirection: 'row',
alignItems: 'center',
},
runtimeText: {
fontSize: 13,
fontWeight: '600',
marginLeft: 4,
},
airDateText: {
fontSize: 12,
opacity: 0.8,
},
episodeOverview: {
fontSize: 13,
lineHeight: 18,
},
progressBarContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 3,
backgroundColor: 'rgba(0,0,0,0.5)',
},
progressBar: {
height: '100%',
},
completedBadge: {
position: 'absolute',
top: 8,
left: 8,
width: 20,
height: 20,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.3)',
zIndex: 2,
},
unwatchedBadge: {
position: 'absolute',
top: 8,
left: 8,
width: 20,
height: 20,
borderRadius: 10,
borderWidth: 2,
borderStyle: 'dashed',
opacity: 0.85,
},
currentBadge: {
position: 'absolute',
top: 8,
left: 8,
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: 'rgba(0, 0, 0, 0.85)',
alignItems: 'center',
justifyContent: 'center',
zIndex: 2,
borderWidth: 1.5,
borderColor: 'rgba(59, 130, 246, 0.3)',
},
});

15
src/components/player/controls/PlayerControls.tsx
View file

@ -38,6 +38,7 @@ interface PlayerControlsProps {
setShowSpeedModal: (show: boolean) => void;
isSubtitleModalOpen?: boolean;
setShowSourcesModal?: (show: boolean) => void;
setShowEpisodesModal?: (show: boolean) => void;
// Slider-specific props
onSliderValueChange: (value: number) => void;
onSlidingStart: () => void;
@ -81,6 +82,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
setShowSpeedModal,
isSubtitleModalOpen,
setShowSourcesModal,
setShowEpisodesModal,
onSliderValueChange,
onSlidingStart,
onSlidingComplete,
@ -587,6 +589,19 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
</Text>
</TouchableOpacity>
)}
{/* Episodes Button */}
{setShowEpisodesModal && (
<TouchableOpacity
style={styles.bottomButton}
onPress={() => setShowEpisodesModal(true)}
>
<Ionicons name="list" size={20} color="white" />
<Text style={styles.bottomButtonText}>
Episodes
</Text>
</TouchableOpacity>
)}
</View>
</View>
</LinearGradient>

431
src/components/player/modals/EpisodeStreamsModal.tsx Normal file
View file

@ -0,0 +1,431 @@
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import Animated, {
FadeIn,
FadeOut,
SlideInRight,
SlideOutRight,
} from 'react-native-reanimated';
import { Episode } from '../../../types/metadata';
import { Stream } from '../../../types/streams';
import { stremioService } from '../../../services/stremioService';
import { logger } from '../../../utils/logger';
interface EpisodeStreamsModalProps {
visible: boolean;
episode: Episode | null;
onClose: () => void;
onSelectStream: (stream: Stream) => void;
metadata?: { id?: string; name?: string };
}
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
const QualityBadge = ({ quality }: { quality: string | null }) => {
if (!quality) return null;
const qualityNum = parseInt(quality);
let color = '#8B5CF6';
let label = `${quality}p`;
if (qualityNum >= 2160) {
color = '#F59E0B';
label = '4K';
} else if (qualityNum >= 1080) {
color = '#EF4444';
label = 'FHD';
} else if (qualityNum >= 720) {
color = '#10B981';
label = 'HD';
}
return (
<View
style={{
backgroundColor: `${color}20`,
borderColor: `${color}60`,
borderWidth: 1,
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 8,
flexDirection: 'row',
alignItems: 'center',
}}
>
<Text style={{
color: color,
fontSize: 12,
fontWeight: '700',
letterSpacing: 0.5,
}}>
{label}
</Text>
</View>
);
};
export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
visible,
episode,
onClose,
onSelectStream,
metadata,
}) => {
const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: Stream[]; addonName: string } }>({});
const [isLoading, setIsLoading] = useState(false);
const [hasErrors, setHasErrors] = useState<string[]>([]);
useEffect(() => {
if (visible && episode && metadata?.id) {
fetchStreams();
} else {
setAvailableStreams({});
setIsLoading(false);
setHasErrors([]);
}
}, [visible, episode, metadata?.id]);
const fetchStreams = async () => {
if (!episode || !metadata?.id) return;
setIsLoading(true);
setHasErrors([]);
setAvailableStreams({});
try {
const episodeId = episode.stremioId || `${metadata.id}:${episode.season_number}:${episode.episode_number}`;
const allStreams: { [providerId: string]: { streams: Stream[]; addonName: string } } = {};
let completedProviders = 0;
const expectedProviders = new Set<string>();
const installedAddons = stremioService.getInstalledAddons();
const streamAddons = installedAddons.filter((addon: any) =>
addon.resources && addon.resources.includes('stream')
);
streamAddons.forEach((addon: any) => expectedProviders.add(addon.id));
await stremioService.getStreams('series', episodeId, (streams: any, addonId: any, addonName: any, error: any) => {
completedProviders++;
if (error) {
logger.warn(`[EpisodeStreamsModal] Error from ${addonName}:`, error);
setHasErrors(prev => [...prev, `${addonName || addonId}: ${error.message || 'Unknown error'}`]);
return;
}
if (streams && streams.length > 0) {
allStreams[addonId] = {
streams: streams,
addonName: addonName || addonId
};
}
if (completedProviders >= expectedProviders.size) {
setAvailableStreams(allStreams);
setIsLoading(false);
}
});
// Fallback timeout
setTimeout(() => {
if (Object.keys(allStreams).length === 0 && !isLoading) {
setHasErrors(prev => [...prev, 'Timeout: No providers responded']);
}
}, 8000);
} catch (error) {
logger.error('[EpisodeStreamsModal] Error fetching streams:', error);
setHasErrors(prev => [...prev, `Failed to fetch streams: ${error}`]);
setIsLoading(false);
}
};
const getQualityFromTitle = (title?: string): string | null => {
if (!title) return null;
const match = title.match(/(\d+)p/);
return match ? match[1] : null;
};
const handleClose = () => {
onClose();
};
if (!visible) return null;
const sortedProviders = Object.entries(availableStreams);
return (
<>
{/* Backdrop */}
<Animated.View
entering={FadeIn.duration(200)}
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
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
width: MENU_WIDTH,
backgroundColor: '#1A1A1A',
zIndex: 9999,
elevation: 20,
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)',
}}>
<View style={{ flex: 1 }}>
<Text style={{
color: '#FFFFFF',
fontSize: 18,
fontWeight: '700',
}}>
{episode?.name || 'Select Stream'}
</Text>
{episode && (
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 12,
marginTop: 4,
}}>
S{episode.season_number}E{episode.episode_number}
</Text>
)}
</View>
<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}
>
{isLoading && (
<View style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 20,
alignItems: 'center',
}}>
<ActivityIndicator size="large" color="#3B82F6" />
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 14,
marginTop: 12,
textAlign: 'center',
}}>
Finding available streams...
</Text>
</View>
)}
{!isLoading && sortedProviders.length > 0 && (
sortedProviders.map(([providerId, providerData]) => (
<View key={providerId} style={{ marginBottom: 30 }}>
<Text style={{
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 14,
fontWeight: '600',
marginBottom: 15,
textTransform: 'uppercase',
letterSpacing: 0.5,
}}>
{providerData.addonName} ({providerData.streams.length})
</Text>
<View style={{ gap: 8 }}>
{providerData.streams.map((stream, index) => {
const quality = getQualityFromTitle(stream.title) || stream.quality;
return (
<TouchableOpacity
key={`${providerId}-${index}`}
style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 16,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
}}
onPress={() => onSelectStream(stream)}
activeOpacity={0.7}
>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<View style={{ flex: 1 }}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8,
gap: 8,
}}>
<Text style={{
color: '#FFFFFF',
fontSize: 15,
fontWeight: '500',
flex: 1,
}}>
{stream.title || stream.name || `Stream ${index + 1}`}
</Text>
{quality && <QualityBadge quality={quality} />}
</View>
{(stream.size || stream.lang) && (
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
{stream.size && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="storage" size={14} color="rgba(107, 114, 128, 0.8)" />
<Text style={{
color: 'rgba(107, 114, 128, 0.8)',
fontSize: 12,
fontWeight: '600',
marginLeft: 4,
}}>
{(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
</Text>
</View>
)}
{stream.lang && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="language" size={14} color="rgba(59, 130, 246, 0.8)" />
<Text style={{
color: 'rgba(59, 130, 246, 0.8)',
fontSize: 12,
fontWeight: '600',
marginLeft: 4,
}}>
{stream.lang.toUpperCase()}
</Text>
</View>
)}
</View>
)}
</View>
<View style={{
marginLeft: 12,
alignItems: 'center',
}}>
<MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.4)" />
</View>
</View>
</TouchableOpacity>
);
})}
</View>
</View>
))
)}
{!isLoading && sortedProviders.length === 0 && hasErrors.length === 0 && (
<View style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 20,
alignItems: 'center',
}}>
<MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" />
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 16,
marginTop: 16,
textAlign: 'center',
}}>
No sources available
</Text>
<Text style={{
color: 'rgba(255, 255, 255, 0.4)',
fontSize: 14,
marginTop: 8,
textAlign: 'center',
}}>
Try searching for different content
</Text>
</View>
)}
{!isLoading && hasErrors.length > 0 && (
<View style={{
backgroundColor: 'rgba(239, 68, 68, 0.1)',
borderRadius: 16,
padding: 16,
marginBottom: 20,
}}>
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
<MaterialIcons name="error" size={20} color="#EF4444" />
<Text style={{
color: '#EF4444',
fontSize: 14,
fontWeight: '600',
marginLeft: 8,
}}>
Errors occurred
</Text>
</View>
{hasErrors.map((error, index) => (
<Text key={index} style={{
color: '#EF4444',
fontSize: 12,
marginTop: 4,
}}>
{error}
</Text>
))}
</View>
)}
</ScrollView>
</Animated.View>
</>
);
};

308
src/components/player/modals/EpisodesModal.tsx Normal file
View file

@ -0,0 +1,308 @@
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import Animated, {
FadeIn,
FadeOut,
SlideInRight,
SlideOutRight,
} from 'react-native-reanimated';
import { Episode } from '../../../types/metadata';
import { EpisodeCard } from '../cards/EpisodeCard';
import { storageService } from '../../../services/storageService';
import { TraktService } from '../../../services/traktService';
import { logger } from '../../../utils/logger';
interface EpisodesModalProps {
showEpisodesModal: boolean;
setShowEpisodesModal: (show: boolean) => void;
groupedEpisodes: { [seasonNumber: number]: Episode[] };
currentEpisode?: { season: number; episode: number };
metadata?: { poster?: string; id?: string };
onSelectEpisode: (episode: Episode) => void;
}
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
export const EpisodesModal: React.FC<EpisodesModalProps> = ({
showEpisodesModal,
setShowEpisodesModal,
groupedEpisodes,
currentEpisode,
metadata,
onSelectEpisode,
}) => {
const [selectedSeason, setSelectedSeason] = useState<number>(currentEpisode?.season || 1);
const [episodeProgress, setEpisodeProgress] = useState<{ [key: string]: { currentTime: number; duration: number; lastUpdated: number } }>({});
const [tmdbEpisodeOverrides, setTmdbEpisodeOverrides] = useState<{ [epKey: string]: { vote_average?: number; runtime?: number; still_path?: string } }>({});
const [currentTheme, setCurrentTheme] = useState({
colors: {
text: '#FFFFFF',
textMuted: 'rgba(255,255,255,0.6)',
mediumEmphasis: 'rgba(255,255,255,0.7)',
primary: '#3B82F6',
white: '#FFFFFF',
elevation2: 'rgba(255,255,255,0.05)'
}
});
useEffect(() => {
if (currentEpisode?.season) {
setSelectedSeason(currentEpisode.season);
}
}, [currentEpisode]);
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;
const seasons = Object.keys(groupedEpisodes).map(Number).sort((a, b) => a - b);
const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || [];
const isEpisodeCurrent = (episode: Episode) => {
return currentEpisode &&
episode.season_number === currentEpisode.season &&
episode.episode_number === currentEpisode.episode;
};
return (
<>
{/* Backdrop */}
<Animated.View
entering={FadeIn.duration(200)}
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
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
width: MENU_WIDTH,
backgroundColor: '#1A1A1A',
zIndex: 9999,
elevation: 20,
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',
}}>
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 */}
<View
style={{
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
paddingVertical: 6,
}}
>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
paddingHorizontal: 20,
}}
>
{seasons.map((season) => (
<TouchableOpacity
key={season}
style={{
paddingHorizontal: 16,
paddingVertical: 6,
borderRadius: 6,
marginRight: 8,
backgroundColor: selectedSeason === season ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderWidth: 1,
borderColor: selectedSeason === season ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)',
}}
onPress={() => setSelectedSeason(season)}
activeOpacity={0.7}
>
<Text style={{
color: selectedSeason === season ? '#3B82F6' : '#FFFFFF',
fontSize: 13,
fontWeight: selectedSeason === season ? '700' : '500',
}}>
Season {season}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
{/* Episodes List */}
<ScrollView
style={{ flex: 1 }}
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={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 20,
alignItems: 'center',
}}>
<MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" />
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 16,
marginTop: 16,
textAlign: 'center',
}}>
No episodes available for Season {selectedSeason}
</Text>
</View>
)}
</ScrollView>
</Animated.View>
</>
);
};

2
src/navigation/AppNavigator.tsx
View file

@ -114,6 +114,7 @@ export type RootStackParamList = {
availableStreams?: { [providerId: string]: { streams: any[]; addonName: string } };
backdrop?: string;
videoType?: string;
groupedEpisodes?: { [seasonNumber: number]: any[] };
};
PlayerAndroid: {
uri: string;
@ -134,6 +135,7 @@ export type RootStackParamList = {
availableStreams?: { [providerId: string]: { streams: any[]; addonName: string } };
backdrop?: string;
videoType?: string;
groupedEpisodes?: { [seasonNumber: number]: any[] };
};
Catalog: { id: string; type: string; addonId?: string; name?: string; genreFilter?: string };
Credits: { mediaId: string; mediaType: string };

5
src/services/localScraperService.ts
View file

@ -1132,11 +1132,6 @@ class LocalScraperService {
hasBody: !!axiosConfig.data
});
const response = await axios(axiosConfig);
logger.log(`[Sandbox] Axios response received:`, {
status: response.status,
statusText: response.statusText,
dataType: typeof response.data
});
return {
ok: response.status >= 200 && response.status < 300,