diff --git a/frontend/src/pages/VODs.jsx b/frontend/src/pages/VODs.jsx
index 108947ec..5eae2580 100644
--- a/frontend/src/pages/VODs.jsx
+++ b/frontend/src/pages/VODs.jsx
@@ -17,7 +17,10 @@ import {
Stack,
SegmentedControl,
ActionIcon,
- Modal
+ Modal,
+ Tabs,
+ Table,
+ Divider
} from '@mantine/core';
import { Search, Play, Calendar, Clock, Star } from 'lucide-react';
import { useDisclosure } from '@mantine/hooks';
@@ -213,11 +216,12 @@ const SeriesCard = ({ series, onClick }) => {
};
const SeriesModal = ({ series, opened, onClose }) => {
- const { fetchSeriesInfo, loading } = useVODStore();
+ const { fetchSeriesInfo, loading, episodes } = useVODStore();
const showVideo = useVideoStore((s) => s.showVideo);
const env_mode = useSettingsStore((s) => s.environment.env_mode);
const [detailedSeries, setDetailedSeries] = useState(null);
const [loadingDetails, setLoadingDetails] = useState(false);
+ const [activeTab, setActiveTab] = useState('season-1');
useEffect(() => {
if (opened && series) {
@@ -244,14 +248,55 @@ const SeriesModal = ({ series, opened, onClose }) => {
}
}, [opened]);
- // Get episodes from the detailed series response
- const seriesEpisodes = detailedSeries?.episodes ?
- Object.values(detailedSeries.episodes).flat().sort((a, b) => {
- if (a.season_number !== b.season_number) {
- return (a.season_number || 0) - (b.season_number || 0);
+ // Get episodes from the store based on the series ID
+ const seriesEpisodes = React.useMemo(() => {
+ if (!detailedSeries) return [];
+
+ // First try to get episodes from the fetched data
+ if (detailedSeries.episodesList) {
+ return detailedSeries.episodesList.sort((a, b) => {
+ if (a.season_number !== b.season_number) {
+ return (a.season_number || 0) - (b.season_number || 0);
+ }
+ return (a.episode_number || 0) - (b.episode_number || 0);
+ });
+ }
+
+ // Otherwise, filter episodes from the global store
+ return Object.values(episodes)
+ .filter(episode => episode.series?.id === detailedSeries.id)
+ .sort((a, b) => {
+ if (a.season_number !== b.season_number) {
+ return (a.season_number || 0) - (b.season_number || 0);
+ }
+ return (a.episode_number || 0) - (b.episode_number || 0);
+ });
+ }, [detailedSeries, episodes]);
+
+ // Group episodes by season
+ const episodesBySeason = React.useMemo(() => {
+ const grouped = {};
+ seriesEpisodes.forEach(episode => {
+ const season = episode.season_number || 1;
+ if (!grouped[season]) {
+ grouped[season] = [];
}
- return (a.episode_number || 0) - (b.episode_number || 0);
- }) : [];
+ grouped[season].push(episode);
+ });
+ return grouped;
+ }, [seriesEpisodes]);
+
+ // Get available seasons sorted
+ const seasons = React.useMemo(() => {
+ return Object.keys(episodesBySeason).map(Number).sort((a, b) => a - b);
+ }, [episodesBySeason]);
+
+ // Update active tab when seasons change
+ React.useEffect(() => {
+ if (seasons.length > 0 && !seasons.includes(parseInt(activeTab.replace('season-', '')))) {
+ setActiveTab(`season-${seasons[0]}`);
+ }
+ }, [seasons, activeTab]);
const handlePlayEpisode = (episode) => {
let streamUrl = `/proxy/vod/episode/${episode.uuid}`;
@@ -263,6 +308,13 @@ const SeriesModal = ({ series, opened, onClose }) => {
showVideo(streamUrl, 'vod', episode);
};
+ const formatDuration = (minutes) => {
+ if (!minutes) return '';
+ const hours = Math.floor(minutes / 60);
+ const mins = minutes % 60;
+ return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
+ };
+
if (!series) return null;
// Use detailed data if available, otherwise use basic series data
@@ -446,20 +498,94 @@ const SeriesModal = ({ series, opened, onClose }) => {
)}
+
+
Episodes
{loadingDetails ? (
- ) : (
-
- {seriesEpisodes.map(episode => (
-
-
-
+ ) : seasons.length > 0 ? (
+
+
+ {seasons.map(season => (
+
+ Season {season}
+
+ ))}
+
+
+ {seasons.map(season => (
+
+
+
+
+ Ep
+ Title
+ Duration
+ Year
+ Action
+
+
+
+ {episodesBySeason[season].map(episode => (
+ handlePlayEpisode(episode)}
+ >
+
+
+ {episode.episode_number || '?'}
+
+
+
+
+
+ {episode.name}
+
+ {episode.genre && (
+
+ {episode.genre}
+
+ )}
+
+
+
+
+ {formatDuration(episode.duration)}
+
+
+
+
+ {episode.year}
+
+
+
+ {
+ e.stopPropagation();
+ handlePlayEpisode(episode);
+ }}
+ >
+
+
+
+
+ ))}
+
+
+
))}
-
+
+ ) : (
+
+ No episodes found for this series.
+
)}
diff --git a/frontend/src/store/useVODStore.jsx b/frontend/src/store/useVODStore.jsx
index 01b469c7..cfff5bf6 100644
--- a/frontend/src/store/useVODStore.jsx
+++ b/frontend/src/store/useVODStore.jsx
@@ -294,9 +294,10 @@ const useVODStore = create((set, get) => ({
youtube_trailer: response.youtube_trailer || '',
};
- // Also update episodes if they're included in the response
+ let episodesData = {};
+
+ // Handle episodes - check if they're in the response
if (response.episodes) {
- const episodesData = {};
Object.entries(response.episodes).forEach(([seasonNumber, seasonEpisodes]) => {
seasonEpisodes.forEach((episode) => {
const episodeData = {
@@ -315,6 +316,7 @@ const useVODStore = create((set, get) => ({
},
type: 'episode',
uuid: episode.id, // Use the stream ID as UUID for playback
+ logo: episode.movie_image ? { url: episode.movie_image } : null,
};
episodesData[episode.id] = episodeData;
});
@@ -337,7 +339,11 @@ const useVODStore = create((set, get) => ({
loading: false,
}));
- return seriesInfo;
+ // Return series info with episodes array for easy access
+ return {
+ ...seriesInfo,
+ episodesList: Object.values(episodesData)
+ };
} catch (error) {
console.error('Failed to fetch series info:', error);
set({ error: 'Failed to load series details.', loading: false });