pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
update whole season watched overlay and styles
+26
-78
-57
src/components/overlays/details/ConfirmOverlay.tsx
-57
src/components/overlays/details/ConfirmOverlay.tsx
···
1
-
import { Button } from "@/components/buttons/Button";
2
-
import {
3
-
OverlayDisplay,
4
-
OverlayPortal,
5
-
} from "@/components/overlays/OverlayDisplay";
6
-
7
-
interface ConfirmOverlayProps {
8
-
isOpen: boolean;
9
-
message: string;
10
-
onConfirm: (event: React.MouseEvent) => void;
11
-
onCancel: () => void;
12
-
confirmButtonTheme?: "white" | "purple" | "secondary" | "danger" | "glass";
13
-
cancelButtonTheme?: "white" | "purple" | "secondary" | "danger" | "glass";
14
-
backdropOpacity?: number;
15
-
backdropColor?: string;
16
-
}
17
-
18
-
export function ConfirmOverlay({
19
-
isOpen,
20
-
message,
21
-
onConfirm,
22
-
onCancel,
23
-
confirmButtonTheme = "purple",
24
-
cancelButtonTheme = "secondary",
25
-
backdropOpacity = 0.5,
26
-
backdropColor = "black",
27
-
}: ConfirmOverlayProps) {
28
-
return (
29
-
<OverlayPortal show={isOpen}>
30
-
<div
31
-
className={`fixed inset-0 bg-${backdropColor} bg-opacity-${backdropOpacity * 100} flex items-center justify-center z-50`}
32
-
>
33
-
<OverlayDisplay>
34
-
<div className="bg-background-main text-white p-4 rounded-lg shadow-md flex flex-col items-center pointer-events-auto gap-3">
35
-
<p className="mb-4, text-center">{message}</p>
36
-
<div className="flex space-x-2">
37
-
<Button
38
-
theme={confirmButtonTheme}
39
-
onClick={onConfirm}
40
-
padding="px-3 py-1"
41
-
>
42
-
Confirm
43
-
</Button>
44
-
<Button
45
-
theme={cancelButtonTheme}
46
-
onClick={onCancel}
47
-
padding="px-3 py-1"
48
-
>
49
-
Cancel
50
-
</Button>
51
-
</div>
52
-
</div>
53
-
</OverlayDisplay>
54
-
</div>
55
-
</OverlayPortal>
56
-
);
57
-
}
+26
-21
src/components/overlays/details/EpisodeCarousel.tsx
+26
-21
src/components/overlays/details/EpisodeCarousel.tsx
···
6
6
import { Button } from "@/components/buttons/Button";
7
7
import { Dropdown } from "@/components/form/Dropdown";
8
8
import { Icon, Icons } from "@/components/Icon";
9
-
import { ConfirmOverlay } from "@/components/overlays/details/ConfirmOverlay";
9
+
import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
10
10
import { hasAired } from "@/components/player/utils/aired";
11
11
import { useProgressStore } from "@/stores/progress";
12
12
···
27
27
const [customSeason, setCustomSeason] = useState("");
28
28
const [customEpisode, setCustomEpisode] = useState("");
29
29
const [SeasonWatched, setSeasonWatched] = useState(false);
30
-
const [isConfirmOpen, setIsConfirmOpen] = useState(false);
31
30
const [expandedEpisodes, setExpandedEpisodes] = useState<{
32
31
[key: number]: boolean;
33
32
}>({});
···
41
40
[key: number]: HTMLParagraphElement | null;
42
41
}>({});
43
42
const updateItem = useProgressStore((s) => s.updateItem);
43
+
const confirmModal = useModal("season-watch-confirm");
44
44
45
45
const handleScroll = (direction: "left" | "right") => {
46
46
if (!carouselRef.current) return;
···
211
211
event.preventDefault();
212
212
event.stopPropagation();
213
213
214
-
setIsConfirmOpen(true);
214
+
confirmModal.show();
215
215
};
216
216
217
217
const handleCancel = () => {
218
-
setIsConfirmOpen(false);
218
+
confirmModal.hide();
219
219
};
220
220
221
221
const currentSeasonEpisodes = episodes.filter(
···
259
259
}
260
260
});
261
261
262
-
setIsConfirmOpen(false);
262
+
confirmModal.hide();
263
263
} catch (error) {
264
264
console.error("Error in handleConfirm:", error);
265
-
setIsConfirmOpen(false);
265
+
confirmModal.hide();
266
266
}
267
267
};
268
268
···
337
337
}
338
338
});
339
339
340
-
let toggle: boolean;
341
-
342
340
if (episodeWatchedStatus.length >= 1) {
343
341
setSeasonWatched(true); // If no episodes are watched, we want to mark all as watched
344
342
} else {
···
410
408
)}
411
409
</div>
412
410
</div>
411
+
412
+
{/* Season Watched Confirmation */}
413
413
<div className="flex items-center justify-between gap-2">
414
-
{isConfirmOpen && (
415
-
<ConfirmOverlay
416
-
isOpen={isConfirmOpen}
417
-
message={
418
-
SeasonWatched
419
-
? "Are you sure you want to mark the season as watched?"
420
-
: "Are you sure you want to mark the season as unwatched?"
421
-
}
422
-
onConfirm={handleConfirm}
423
-
onCancel={handleCancel}
424
-
/>
425
-
)}
414
+
<Modal id={confirmModal.id}>
415
+
<ModalCard>
416
+
<h3 className="text-lg font-semibold text-white mb-4">
417
+
{SeasonWatched
418
+
? t("media.seasonWatched")
419
+
: t("media.seasonUnwatched")}
420
+
</h3>
421
+
<div className="flex justify-end gap-2">
422
+
<Button theme="secondary" onClick={handleCancel}>
423
+
{t("actions.cancel")}
424
+
</Button>
425
+
<Button theme="purple" onClick={handleConfirm}>
426
+
{t("actions.confirm")}
427
+
</Button>
428
+
</div>
429
+
</ModalCard>
430
+
</Modal>
426
431
<button
427
432
type="button"
428
433
onClick={(e) => toggleSeasonWatchStatus(e)}
429
-
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
434
+
className="p-1.5 bg-dropdown-background hover:bg-dropdown-hoverBackground transition-colors rounded-full"
430
435
title={t("Mark season as watched")}
431
436
>
432
437
<Icon