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 (
|
return (
|
||||||
<div
|
<div
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
className={classNames("tabbable", props.closable ? "hover:cursor-default" : "")}
|
className={classNames(
|
||||||
|
"tabbable",
|
||||||
|
props.closable ? "hover:cursor-default" : "",
|
||||||
|
)}
|
||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
>
|
>
|
||||||
{content}
|
{content}
|
||||||
|
|
|
@ -1,17 +1,77 @@
|
||||||
import React from 'react';
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
import { MediaItem } from "@/utils/mediaTypes";
|
||||||
|
|
||||||
interface PopupModalProps {
|
interface PopupModalProps {
|
||||||
isVisible: boolean;
|
isVisible: boolean;
|
||||||
onClose: () => void;
|
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) {
|
export function PopupModal({
|
||||||
if (!isVisible) return null;
|
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 (
|
return (
|
||||||
<div className="popup-overlay">
|
<div
|
||||||
<button onClick={onClose}>Close</button>
|
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>
|
</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 { usePlayerStore } from "@/stores/player/store";
|
||||||
import { useProgressStore } from "@/stores/progress";
|
import { useProgressStore } from "@/stores/progress";
|
||||||
|
@ -7,9 +7,9 @@ import {
|
||||||
shouldShowProgress,
|
shouldShowProgress,
|
||||||
} from "@/stores/progress/utils";
|
} from "@/stores/progress/utils";
|
||||||
import { MediaItem } from "@/utils/mediaTypes";
|
import { MediaItem } from "@/utils/mediaTypes";
|
||||||
import { PopupModal } from "./PopupModal";
|
|
||||||
|
|
||||||
import { MediaCard } from "./MediaCard";
|
import { MediaCard } from "./MediaCard";
|
||||||
|
import { PopupModal } from "./PopupModal";
|
||||||
|
|
||||||
function formatSeries(series?: ShowProgressResult | null) {
|
function formatSeries(series?: ShowProgressResult | null) {
|
||||||
if (!series || !series.episode || !series.season) return undefined;
|
if (!series || !series.episode || !series.season) return undefined;
|
||||||
|
@ -39,19 +39,27 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
|
||||||
const percentage = itemToDisplay?.show
|
const percentage = itemToDisplay?.show
|
||||||
? (itemToDisplay.progress.watched / itemToDisplay.progress.duration) * 100
|
? (itemToDisplay.progress.watched / itemToDisplay.progress.duration) * 100
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
|
const currentTitle = usePlayerStore((state) => state.playingTitle);
|
||||||
|
const [playingTitle, setPlayingTitleState] = useState(currentTitle);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setPlayingTitleState(currentTitle);
|
||||||
|
}, [currentTitle]);
|
||||||
|
|
||||||
const setPlayingTitle = usePlayerStore((state) => state.setPlayingTitle);
|
const setPlayingTitle = usePlayerStore((state) => state.setPlayingTitle);
|
||||||
const [isPopupVisible, setIsPopupVisible] = useState(false);
|
const [isPopupVisible, setIsPopupVisible] = useState(false);
|
||||||
|
|
||||||
const handleClick = useCallback(() => {
|
const handleClick = useCallback(() => {
|
||||||
setPlayingTitle(props.media.id, props.media.title, props.media.type);
|
setPlayingTitle(props.media.id, props.media.title, props.media.type);
|
||||||
setIsPopupVisible(!isPopupVisible);
|
setIsPopupVisible(!isPopupVisible);
|
||||||
console.log(
|
}, [
|
||||||
usePlayerStore.getState().playingTitle.title,
|
setPlayingTitle,
|
||||||
usePlayerStore.getState().playingTitle.id,
|
isPopupVisible,
|
||||||
usePlayerStore.getState().playingTitle.type,
|
props.media.id,
|
||||||
);
|
props.media.title,
|
||||||
}, [setPlayingTitle, props.media.id, props.media.title, props.media.type]);
|
props.media.type,
|
||||||
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -64,7 +72,12 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
|
||||||
closable={props.closable}
|
closable={props.closable}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
/>
|
/>
|
||||||
<PopupModal isVisible={isPopupVisible} onClose={() => setIsPopupVisible(false)} />
|
<PopupModal
|
||||||
|
isVisible={isPopupVisible}
|
||||||
|
onClose={() => setIsPopupVisible(false)}
|
||||||
|
playingTitle={currentTitle}
|
||||||
|
media={props.media}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue