Apply lesson cover as poster for embedded kinescopeVideo nodes

src/app/(student)/courses/[slug]/lessons/[lessonId]/page.tsx

@@ -122,9 +122,6 @@ export default async function LessonPage({ params }: Props) {
       {/* Title */}
       <h1 className="text-2xl font-bold mb-6 leading-snug">{lesson.title}</h1>
 
-      {/* DEBUG: remove after fix */}
-      <div style={{background:"red",color:"white",padding:"4px 8px",fontSize:12,marginBottom:8}}>DEBUG lessonId: {lessonId} | kinescopeId: {String(lesson.kinescopeId ?? "NULL")} | coverImage: {String(lesson.coverImage ?? "NULL")} | isAdmin: {String(isAdmin)}</div>
-
       {/* Video */}
       {lesson.kinescopeId && (
         <div className="mb-8">
@@ -135,7 +132,7 @@ export default async function LessonPage({ params }: Props) {
       {/* Text content */}
       {hasContent && (
         <div className="mb-8">
-          <LessonContent content={lesson.content as object} />
+          <LessonContent content={lesson.content as object} coverImage={lesson.coverImage} />
         </div>
       )}
 

src/components/student/lesson-content.tsx

@@ -8,23 +8,33 @@ import Link from "@tiptap/extension-link";
 import Underline from "@tiptap/extension-underline";
 import { KinescopePlayer } from "@/components/player/kinescope-player";
 
-function KinescopeVideoStudentView({ node }: { node: { attrs: Record<string, unknown> } }) {
+function KinescopeVideoStudentView({
+  node,
+  extension,
+}: {
+  node: { attrs: Record<string, unknown> };
+  extension: { options: { poster?: string } };
+}) {
   const videoId = node.attrs.videoId as string;
   if (!videoId) return null;
   return (
     <NodeViewWrapper>
       <div className="my-6">
-        <KinescopePlayer videoId={videoId} />
+        <KinescopePlayer videoId={videoId} poster={extension.options.poster} />
       </div>
     </NodeViewWrapper>
   );
 }
 
-const KinescopeVideoExtension = Node.create({
+const KinescopeVideoExtension = Node.create<{ poster?: string }>({
   name: "kinescopeVideo",
   group: "block",
   atom: true,
 
+  addOptions() {
+    return { poster: undefined };
+  },
+
   addAttributes() {
     return { videoId: { default: "" } };
   },
@@ -43,14 +53,14 @@ const KinescopeVideoExtension = Node.create({
   },
 });
 
-export function LessonContent({ content }: { content: object }) {
+export function LessonContent({ content, coverImage }: { content: object; coverImage?: string | null }) {
   const editor = useEditor({
     extensions: [
       StarterKit,
       Underline,
       Image.configure({ inline: false }),
       Link.configure({ openOnClick: true }),
-      KinescopeVideoExtension,
+      KinescopeVideoExtension.configure({ poster: coverImage ?? undefined }),
     ],
     content,
     editable: false,