From cfd36819794888123cc5967b22533f7e55442236 Mon Sep 17 00:00:00 2001
From: dmitriylaukhin <laukhin@dementiy.com>
Date: Tue, 26 May 2026 15:40:23 +0500
Subject: [PATCH] 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 | 74 +++++++++-------------
 1 file changed, 30 insertions(+), 44 deletions(-)

diff --git a/src/components/player/kinescope-player.tsx b/src/components/player/kinescope-player.tsx
index a3c2ed3..bbc3d14 100644
--- a/src/components/player/kinescope-player.tsx
+++ b/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,56 +10,42 @@ interface Props {
 
 export function KinescopePlayer({ videoId, poster }: Props) {
   const [mounted, setMounted] = useState(false);
-  const [showOverlay, setShowOverlay] = useState(!!poster);
-  const playerRef = useRef<KinescopeReactPlayer>(null);
+  const [showPoster, setShowPoster] = useState(!!poster);
 
   useEffect(() => setMounted(true), []);
 
-  function handleOverlayClick() {
-    setShowOverlay(false);
-    playerRef.current?.play();
+  const containerStyle = { border: "2px solid var(--border)" };
+
+  if (showPoster && poster) {
+    return (
+      <div className="w-full aspect-video relative cursor-pointer" style={containerStyle} onClick={() => setShowPoster(false)}>
+        {/* 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>
+    );
   }
 
   return (
-    <div className="w-full aspect-video relative" style={{ border: "2px solid var(--border)" }}>
+    <div className="w-full aspect-video" style={containerStyle}>
       {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
-            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>
+        <KinescopeReactPlayer videoId={videoId} width="100%" height="100%" />
       )}
     </div>
   );