add unreleased popup

src/components/player/atoms/UnreleasedEpisodeOverlay.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from "react-i18next";
+
+import { Icon, Icons } from "@/components/Icon";
+import { Flare } from "@/components/utils/Flare";
+import { Transition } from "@/components/utils/Transition";
+import { usePlayerStore } from "@/stores/player/store";
+
+import { hasAired } from "../utils/aired";
+
+export function UnreleasedEpisodeOverlay() {
+  const { t } = useTranslation();
+  const meta = usePlayerStore((s) => s.meta);
+  const status = usePlayerStore((s) => s.status);
+
+  if (
+    status !== "scraping" ||
+    !meta?.episode?.air_date ||
+    hasAired(meta.episode.air_date)
+  ) {
+    return null;
+  }
+
+  return (
+    <Transition
+      animation="slide-down"
+      show
+      className="absolute inset-x-0 top-4 flex justify-center pointer-events-none"
+    >
+      <Flare.Base className="hover:flare-enabled pointer-events-auto bg-video-context-background pl-4 pr-6 py-3 group w-72 h-full rounded-lg transition-colors text-video-context-type-main">
+        <Flare.Light
+          enabled
+          flareSize={200}
+          cssColorVar="--colors-video-context-light"
+          backgroundClass="bg-video-context-background duration-100"
+          className="rounded-lg"
+        />
+        <Flare.Child className="grid grid-cols-[auto,1fr] gap-3 pointer-events-auto relative transition-transform">
+          <Icon className="text-2xl" icon={Icons.FILM} />
+          <div className="w-full flex items-center justify-between">
+            <span className="text-sm">{t("media.unreleased")}</span>
+          </div>
+        </Flare.Child>
+      </Flare.Base>
+    </Transition>
+  );
+}

src/pages/parts/player/PlayerPart.tsx

@@ -4,6 +4,7 @@ import IosPwaLimitations from "@/components/buttons/IosPwaLimitations";
 import { BrandPill } from "@/components/layout/BrandPill";
 import { Player } from "@/components/player";
 import { SkipIntroButton } from "@/components/player/atoms/SkipIntroButton";
+import { UnreleasedEpisodeOverlay } from "@/components/player/atoms/UnreleasedEpisodeOverlay";
 import { Widescreen } from "@/components/player/atoms/Widescreen";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
 import { useSkipTime } from "@/components/player/hooks/useSkipTime";
@@ -183,6 +184,7 @@ export function PlayerPart(props: PlayerPartProps) {
 
       <Player.VolumeChangedPopout />
       <Player.SubtitleDelayPopout />
+      <UnreleasedEpisodeOverlay />
 
       <Player.NextEpisodeButton
         controlsShowing={showTargets}