mirror of https://github.com/sussy-code/smov.git
epic right? (got the modal working with some basic data)
This commit is contained in:
parent
caefbb54fc
commit
d1d1cc767f
|
@ -203,7 +203,10 @@ export function MediaCard(props: MediaCardProps) {
|
|||
return (
|
||||
<div
|
||||
tabIndex={-1}
|
||||
className={classNames("tabbable", props.closable ? "hover:cursor-default" : "")}
|
||||
className={classNames(
|
||||
"tabbable",
|
||||
props.closable ? "hover:cursor-default" : "",
|
||||
)}
|
||||
onClick={props.onClick}
|
||||
>
|
||||
{content}
|
||||
|
|
|
@ -1,17 +1,77 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { MediaItem } from "@/utils/mediaTypes";
|
||||
|
||||
interface PopupModalProps {
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
playingTitle: {
|
||||
id: string;
|
||||
title: string;
|
||||
type: string;
|
||||
};
|
||||
media: MediaItem;
|
||||
}
|
||||
|
||||
// Define the type for the style state
|
||||
type StyleState = {
|
||||
opacity: number;
|
||||
visibility: "visible" | "hidden" | undefined;
|
||||
};
|
||||
|
||||
export function PopupModal({ isVisible, onClose }: PopupModalProps) {
|
||||
if (!isVisible) return null;
|
||||
export function PopupModal({
|
||||
isVisible,
|
||||
onClose,
|
||||
playingTitle,
|
||||
media,
|
||||
}: PopupModalProps) {
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
// Use the StyleState type for the style state
|
||||
const [style, setStyle] = useState<StyleState>({
|
||||
opacity: 0,
|
||||
visibility: "hidden",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (
|
||||
modalRef.current &&
|
||||
!modalRef.current.contains(event.target as Node)
|
||||
) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
setStyle({ opacity: 1, visibility: "visible" });
|
||||
} else {
|
||||
setStyle({ opacity: 0, visibility: "hidden" });
|
||||
}
|
||||
}, [isVisible]);
|
||||
|
||||
if (!isVisible && style.visibility === "hidden") return null;
|
||||
|
||||
// In hindsight we dont need the store but lets keep it until discover
|
||||
// page works bc maybe we have to hack it into there
|
||||
return (
|
||||
<div className="popup-overlay">
|
||||
<button onClick={onClose}>Close</button>
|
||||
<div
|
||||
className="fixed inset-0 bg-opacity-50 flex justify-center items-center z-50 transition-opacity duration-100"
|
||||
style={{ opacity: style.opacity, visibility: style.visibility }}
|
||||
>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="min-w-96 min-h-64 rounded-xl bg-mediaCard-hoverBackground flex justify-center items-center transition-opacity duration-200"
|
||||
style={{ opacity: style.opacity }}
|
||||
>
|
||||
{media.title}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { usePlayerStore } from "@/stores/player/store";
|
||||
import { useProgressStore } from "@/stores/progress";
|
||||
|
@ -7,9 +7,9 @@ import {
|
|||
shouldShowProgress,
|
||||
} from "@/stores/progress/utils";
|
||||
import { MediaItem } from "@/utils/mediaTypes";
|
||||
import { PopupModal } from "./PopupModal";
|
||||
|
||||
import { MediaCard } from "./MediaCard";
|
||||
import { PopupModal } from "./PopupModal";
|
||||
|
||||
function formatSeries(series?: ShowProgressResult | null) {
|
||||
if (!series || !series.episode || !series.season) return undefined;
|
||||
|
@ -39,19 +39,27 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
|
|||
const percentage = itemToDisplay?.show
|
||||
? (itemToDisplay.progress.watched / itemToDisplay.progress.duration) * 100
|
||||
: undefined;
|
||||
|
||||
const currentTitle = usePlayerStore((state) => state.playingTitle);
|
||||
const [playingTitle, setPlayingTitleState] = useState(currentTitle);
|
||||
|
||||
useEffect(() => {
|
||||
setPlayingTitleState(currentTitle);
|
||||
}, [currentTitle]);
|
||||
|
||||
const setPlayingTitle = usePlayerStore((state) => state.setPlayingTitle);
|
||||
const [isPopupVisible, setIsPopupVisible] = useState(false);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
setPlayingTitle(props.media.id, props.media.title, props.media.type);
|
||||
setIsPopupVisible(!isPopupVisible);
|
||||
console.log(
|
||||
usePlayerStore.getState().playingTitle.title,
|
||||
usePlayerStore.getState().playingTitle.id,
|
||||
usePlayerStore.getState().playingTitle.type,
|
||||
);
|
||||
}, [setPlayingTitle, props.media.id, props.media.title, props.media.type]);
|
||||
|
||||
}, [
|
||||
setPlayingTitle,
|
||||
isPopupVisible,
|
||||
props.media.id,
|
||||
props.media.title,
|
||||
props.media.type,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -64,7 +72,12 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
|
|||
closable={props.closable}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
<PopupModal isVisible={isPopupVisible} onClose={() => setIsPopupVisible(false)} />
|
||||
<PopupModal
|
||||
isVisible={isPopupVisible}
|
||||
onClose={() => setIsPopupVisible(false)}
|
||||
playingTitle={currentTitle}
|
||||
media={props.media}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue