From 9a21c705b7a7105a938291a73ee2de04f77b999c Mon Sep 17 00:00:00 2001
From: Dmitriy Laukhin <laukhin@dementiy.com>
Date: Wed, 6 May 2026 11:42:01 +0000
Subject: [PATCH] Fix KinescopePlayer SSR crash on direct page load

The @kinescope/react-kinescope-player library accesses browser APIs
(window/document) during server-side rendering. In Next.js App Router,
client components are SSR-rendered on full page loads (direct URL,
refresh) but not on RSC navigations. This caused a 500 error for all
lessons with a kinescopeId when accessed directly.

Fix: defer rendering KinescopeReactPlayer until after mount with
useEffect + useState(false), so it only runs in the browser.
---
 src/components/player/kinescope-player.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/player/kinescope-player.tsx b/src/components/player/kinescope-player.tsx
index 0f7dc5a..211fc7e 100644
--- a/src/components/player/kinescope-player.tsx
+++ b/src/components/player/kinescope-player.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import KinescopeReactPlayer from "@kinescope/react-kinescope-player";
 
 interface Props {
@@ -8,14 +9,19 @@ interface Props {
 }
 
 export function KinescopePlayer({ videoId, poster }: Props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
   return (
     <div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}>
-      <KinescopeReactPlayer
-        videoId={videoId}
-        width="100%"
-        height="100%"
-        poster={poster}
-      />
+      {mounted && (
+        <KinescopeReactPlayer
+          videoId={videoId}
+          width="100%"
+          height="100%"
+          poster={poster}
+        />
+      )}
     </div>
   );
 }