epic right? (got the modal working with some basic data)

src/components/media/MediaCard.tsx

@@ -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}

src/components/media/PopupModal.tsx

@@ -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) {
+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 (
-    <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>
   );
 }

src/components/media/WatchedMediaCard.tsx

@@ -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,
+    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 (
     <>
@@ -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}
+      />
     </>
   );
 }