Show custom lesson cover as video poster overlay

Kinescope React player ignores the poster prop. Replace with a
click-to-dismiss overlay rendered above the player: shows the
lesson coverImage, a play button, and on click hides itself
and calls player.play() via ref.

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

src/components/player/kinescope-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import KinescopeReactPlayer from "@kinescope/react-kinescope-player";
 
 interface Props {
@@ -10,18 +10,57 @@ interface Props {
 
 export function KinescopePlayer({ videoId, poster }: Props) {
   const [mounted, setMounted] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(!!poster);
+  const playerRef = useRef<KinescopeReactPlayer>(null);
+
   useEffect(() => setMounted(true), []);
 
+  function handleOverlayClick() {
+    setShowOverlay(false);
+    playerRef.current?.play();
+  }
+
   return (
-    <div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}>
+    <div className="w-full aspect-video relative" style={{ border: "2px solid var(--border)" }}>
       {mounted && (
         <KinescopeReactPlayer
+          ref={playerRef}
           videoId={videoId}
           width="100%"
           height="100%"
-          poster={poster}
         />
       )}
+
+      {showOverlay && poster && (
+        <div
+          className="absolute inset-0 z-10 cursor-pointer"
+          onClick={handleOverlayClick}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={poster}
+            alt=""
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div
+              style={{
+                width: 68,
+                height: 68,
+                borderRadius: "50%",
+                background: "rgba(0,0,0,0.65)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <svg viewBox="0 0 24 24" fill="white" width="28" height="28">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }