Fix poster overlay hidden behind Kinescope iframe

Kinescope renders an iframe that ignores z-index stacking.
Switch to mutually-exclusive render: show poster image OR
the player, never both. Click on poster dismisses it and
reveals the player.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/player/kinescope-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import KinescopeReactPlayer from "@kinescope/react-kinescope-player";
 
 interface Props {
@@ -10,38 +10,17 @@ interface Props {
 
 export function KinescopePlayer({ videoId, poster }: Props) {
   const [mounted, setMounted] = useState(false);
-  const [showOverlay, setShowOverlay] = useState(!!poster);
+  const [showPoster, setShowPoster] = useState(!!poster);
-  const playerRef = useRef<KinescopeReactPlayer>(null);
 
   useEffect(() => setMounted(true), []);
 
-  function handleOverlayClick() {
+  const containerStyle = { border: "2px solid var(--border)" };
-    setShowOverlay(false);
-    playerRef.current?.play();
-  }
 
+  if (showPoster && poster) {
     return (
-    <div className="w-full aspect-video relative" style={{ border: "2px solid var(--border)" }}>
+      <div className="w-full aspect-video relative cursor-pointer" style={containerStyle} onClick={() => setShowPoster(false)}>
-      {mounted && (
-        <KinescopeReactPlayer
-          ref={playerRef}
-          videoId={videoId}
-          width="100%"
-          height="100%"
-        />
-      )}
-
-      {showOverlay && poster && (
-        <div
-          className="absolute inset-0 z-10 cursor-pointer"
-          onClick={handleOverlayClick}
-        >
         {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
+        <img src={poster} alt="" className="w-full h-full object-cover" />
-            src={poster}
-            alt=""
-            className="w-full h-full object-cover"
-          />
         <div className="absolute inset-0 flex items-center justify-center">
           <div
             style={{
@@ -60,6 +39,13 @@ export function KinescopePlayer({ videoId, poster }: Props) {
           </div>
         </div>
       </div>
+    );
+  }
+
+  return (
+    <div className="w-full aspect-video" style={containerStyle}>
+      {mounted && (
+        <KinescopeReactPlayer videoId={videoId} width="100%" height="100%" />
       )}
     </div>
   );