mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-29 16:07:40 +01:00
fixed modal
This commit is contained in:
Abdullah
parent
49b0a9fc00
commit
fd51162957
1 changed files with 41 additions and 51 deletions
|
|
@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { get } from "@/backend/metadata/tmdb";
|
||||
import { Flare } from "@/components/utils/Flare";
|
||||
import { conf } from "@/setup/config";
|
||||
|
||||
interface ModalEpisodeSelectorProps {
|
||||
|
|
@ -9,25 +10,16 @@ interface ModalEpisodeSelectorProps {
|
|||
mediaTitle: string;
|
||||
}
|
||||
|
||||
interface Season {
|
||||
season_number: number;
|
||||
id: number;
|
||||
}
|
||||
|
||||
interface ShowDetails {
|
||||
seasons: Season[];
|
||||
}
|
||||
|
||||
export function EpisodeSelector({
|
||||
tmdbId,
|
||||
mediaTitle,
|
||||
}: ModalEpisodeSelectorProps) {
|
||||
const [seasonsData, setSeasonsData] = useState<Season[]>([]);
|
||||
const [seasonsData, setSeasonsData] = useState<any[]>([]);
|
||||
const [selectedSeason, setSelectedSeason] = useState<any>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSeasonSelect = useCallback(
|
||||
async (season: Season) => {
|
||||
async (season: any) => {
|
||||
try {
|
||||
const seasonDetails = await get<any>(
|
||||
`/tv/${tmdbId}/season/${season.season_number}`,
|
||||
|
|
@ -36,11 +28,7 @@ export function EpisodeSelector({
|
|||
language: "en-US",
|
||||
},
|
||||
);
|
||||
setSelectedSeason({
|
||||
...seasonDetails,
|
||||
season_number: season.season_number,
|
||||
id: season.id,
|
||||
});
|
||||
setSelectedSeason(seasonDetails);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
|
@ -51,18 +39,16 @@ export function EpisodeSelector({
|
|||
useEffect(() => {
|
||||
const fetchSeasons = async () => {
|
||||
try {
|
||||
const showDetails = await get<ShowDetails>(`/tv/${tmdbId}`, {
|
||||
const showDetails = await get<any>(`/tv/${tmdbId}`, {
|
||||
api_key: conf().TMDB_READ_API_KEY,
|
||||
language: "en-US",
|
||||
});
|
||||
setSeasonsData(showDetails.seasons);
|
||||
const regularSeasons = showDetails.seasons.filter(
|
||||
(season: Season) => season.season_number > 0,
|
||||
);
|
||||
if (regularSeasons.length > 0) {
|
||||
handleSeasonSelect(regularSeasons[0]);
|
||||
} else if (showDetails.seasons.length > 0) {
|
||||
if (showDetails.seasons[0] === 0) {
|
||||
// Default to first season
|
||||
handleSeasonSelect(showDetails.seasons[0]);
|
||||
} else {
|
||||
handleSeasonSelect(showDetails.seasons[1]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
|
@ -72,14 +58,15 @@ export function EpisodeSelector({
|
|||
}, [handleSeasonSelect, tmdbId]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
|
||||
{seasonsData.map((season: Season) => (
|
||||
<div className="flex flex-row relative">
|
||||
<div className="w-24 sm:w-96 cursor-pointer overflow-y-auto overflow-x-hidden max-h-60 z-10">
|
||||
{seasonsData.map((season) => (
|
||||
<div
|
||||
key={season.id}
|
||||
key={season.season_number}
|
||||
onClick={() => handleSeasonSelect(season)}
|
||||
className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${
|
||||
selectedSeason && season.id === selectedSeason.id
|
||||
selectedSeason &&
|
||||
season.season_number === selectedSeason.season_number
|
||||
? "bg-search-background"
|
||||
: "hover:bg-search-background hover:scale-95"
|
||||
}`}
|
||||
|
|
@ -90,39 +77,42 @@ export function EpisodeSelector({
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-auto mt-4 cursor-pointer sm:mt-0 sm:ml-4 overflow-y-auto overflow-x-hidden max-h-60 order-1 sm:order-2">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="flex-auto mt-4 sm:mt-0 sm:ml-4 overflow-x-auto overflow-y-hidden sm:overflow-y-auto sm:overflow-x-hidden max-h-60 max-w-[70vw] z-0">
|
||||
<div className="flex sm:grid sm:grid-cols-3 sm:gap-2">
|
||||
{selectedSeason ? (
|
||||
selectedSeason.episodes.map(
|
||||
(episode: {
|
||||
episode_number: number;
|
||||
name: string;
|
||||
still_path: string;
|
||||
show_id: number;
|
||||
id: number;
|
||||
}) => (
|
||||
<div
|
||||
key={episode.id}
|
||||
onClick={() => {
|
||||
const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`;
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Navigating to: ${url}`);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(
|
||||
`Season ID: ${selectedSeason.id}, Episode ID: ${episode.id}`,
|
||||
);
|
||||
navigate(url);
|
||||
}}
|
||||
className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 transition-transform transition-border-color duration-[0.28s] ease-in-out transform-origin-center"
|
||||
<Flare.Base
|
||||
key={episode.episode_number}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
|
||||
)
|
||||
}
|
||||
className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-[0.28s] flex-shrink-0 w-48 sm:w-auto mr-2 sm:mr-0"
|
||||
>
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
|
||||
className="w-full h-auto rounded"
|
||||
alt={episode.name}
|
||||
<Flare.Light
|
||||
flareSize={300}
|
||||
cssColorVar="--colors-mediaCard-hoverAccent"
|
||||
backgroundClass="bg-mediaCard-hoverBackground duration-200"
|
||||
className="rounded-xl bg-background-main group-hover:opacity-100"
|
||||
/>
|
||||
<p className="text-center text-[0.95em] mt-2">
|
||||
{`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
|
||||
className="w-full h-auto rounded"
|
||||
/>
|
||||
<p className="text-center text-[0.95em] mt-2">
|
||||
{episode.name}
|
||||
</p>
|
||||
</div>
|
||||
</Flare.Base>
|
||||
),
|
||||
)
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Reference in a new issue