Add coverImage poster to player, fix TipTap v3 editor reset, quiz admin preview
- Add coverImage field to Lesson model (prisma) - Pass coverImage as poster prop to KinescopePlayer - Show quiz in read-only preview mode for admin on lesson page - Fix TipTap v3 editor reset on save: pass [lesson.id] as deps to useEditor to prevent setOptions() from reinitializing content on every re-render - Replace saveLesson Server Action call with fetch PATCH /api/admin/lessons/[id] to avoid Next.js 16 automatic RSC refresh after Server Actions - Simplify revalidatePath: only revalidate module page, not lesson editor page
This commit is contained in:
@@ -130,6 +130,7 @@ model Lesson {
|
|||||||
title String
|
title String
|
||||||
content Json?
|
content Json?
|
||||||
kinescopeId String?
|
kinescopeId String?
|
||||||
|
coverImage String?
|
||||||
order Int @default(0)
|
order Int @default(0)
|
||||||
published Boolean @default(false)
|
published Boolean @default(false)
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
|
|||||||
@@ -113,7 +113,7 @@ export default async function LessonPage({ params }: Props) {
|
|||||||
{/* Video */}
|
{/* Video */}
|
||||||
{lesson.kinescopeId && (
|
{lesson.kinescopeId && (
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<KinescopePlayer videoId={lesson.kinescopeId} />
|
<KinescopePlayer videoId={lesson.kinescopeId} poster={lesson.coverImage ?? undefined} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -180,17 +180,30 @@ export default async function LessonPage({ params }: Props) {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Quiz */}
|
{/* Quiz */}
|
||||||
{lesson.quiz && !isAdmin && (
|
{lesson.quiz && (
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
|
<p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
|
||||||
Тест
|
Тест{isAdmin && <span className="ml-2 opacity-50">(предпросмотр)</span>}
|
||||||
</p>
|
</p>
|
||||||
|
{isAdmin ? (
|
||||||
|
<div className="space-y-4 opacity-70">
|
||||||
|
{lesson.quiz.questions.map((q, idx) => (
|
||||||
|
<div key={q.id} className="space-y-1">
|
||||||
|
<p className="text-sm font-medium">{idx + 1}. {q.text}</p>
|
||||||
|
<div className="px-4 py-3 text-sm" style={{ border: "2px solid var(--border)", color: "var(--muted-foreground)" }}>
|
||||||
|
Поле для ответа студента
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
<QuizSection
|
<QuizSection
|
||||||
quiz={lesson.quiz}
|
quiz={lesson.quiz}
|
||||||
attempt={quizAttempt ? { answers: quizAttempt.answers as Record<string, string> } : null}
|
attempt={quizAttempt ? { answers: quizAttempt.answers as Record<string, string> } : null}
|
||||||
slug={slug}
|
slug={slug}
|
||||||
lessonId={lessonId}
|
lessonId={lessonId}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { headers } from "next/headers";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import { prisma } from "@/lib/prisma";
|
||||||
|
|
||||||
|
export async function PATCH(
|
||||||
|
req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ lessonId: string }> }
|
||||||
|
) {
|
||||||
|
const session = await auth.api.getSession({ headers: await headers() });
|
||||||
|
if (!session || session.user.role !== "admin") {
|
||||||
|
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { lessonId } = await params;
|
||||||
|
const body = await req.json() as {
|
||||||
|
title: string;
|
||||||
|
kinescopeId: string;
|
||||||
|
content: object;
|
||||||
|
published: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
await prisma.lesson.update({
|
||||||
|
where: { id: lessonId },
|
||||||
|
data: {
|
||||||
|
title: body.title,
|
||||||
|
kinescopeId: body.kinescopeId || null,
|
||||||
|
content: body.content,
|
||||||
|
published: body.published,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useCallback, useTransition } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { useEditor, EditorContent } from "@tiptap/react";
|
import { useEditor, EditorContent } from "@tiptap/react";
|
||||||
import StarterKit from "@tiptap/starter-kit";
|
import StarterKit from "@tiptap/starter-kit";
|
||||||
import Image from "@tiptap/extension-image";
|
import Image from "@tiptap/extension-image";
|
||||||
@@ -9,7 +9,6 @@ import Underline from "@tiptap/extension-underline";
|
|||||||
import Placeholder from "@tiptap/extension-placeholder";
|
import Placeholder from "@tiptap/extension-placeholder";
|
||||||
import { Save, Eye, FileUp, ChevronLeft, ChevronRight } from "lucide-react";
|
import { Save, Eye, FileUp, ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { saveLesson } from "@/lib/actions/lesson-actions";
|
|
||||||
|
|
||||||
interface LessonData {
|
interface LessonData {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -47,7 +46,8 @@ export function LessonEditor({
|
|||||||
const [importing, setImporting] = useState(false);
|
const [importing, setImporting] = useState(false);
|
||||||
const [importError, setImportError] = useState<string | null>(null);
|
const [importError, setImportError] = useState<string | null>(null);
|
||||||
const [saved, setSaved] = useState(false);
|
const [saved, setSaved] = useState(false);
|
||||||
const [pending, startTransition] = useTransition();
|
const [saveError, setSaveError] = useState<string | null>(null);
|
||||||
|
const [pending, setPending] = useState(false);
|
||||||
|
|
||||||
const inputStyle = {
|
const inputStyle = {
|
||||||
border: "2px solid var(--border)",
|
border: "2px solid var(--border)",
|
||||||
@@ -73,7 +73,7 @@ export function LessonEditor({
|
|||||||
class: "prose prose-slate max-w-none min-h-[300px] focus:outline-none p-4",
|
class: "prose prose-slate max-w-none min-h-[300px] focus:outline-none p-4",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
}, [lesson.id]);
|
||||||
|
|
||||||
const uploadImage = useCallback(async () => {
|
const uploadImage = useCallback(async () => {
|
||||||
const input = document.createElement("input");
|
const input = document.createElement("input");
|
||||||
@@ -133,18 +133,27 @@ export function LessonEditor({
|
|||||||
}
|
}
|
||||||
}, [editor]);
|
}, [editor]);
|
||||||
|
|
||||||
function handleSave() {
|
async function handleSave() {
|
||||||
if (!editor) return;
|
if (!editor) return;
|
||||||
startTransition(async () => {
|
setPending(true);
|
||||||
await saveLesson(lesson.id, courseId, moduleId, {
|
setSaveError(null);
|
||||||
title,
|
try {
|
||||||
kinescopeId,
|
const res = await fetch(`/api/admin/lessons/${lesson.id}`, {
|
||||||
content: editor.getJSON(),
|
method: "PATCH",
|
||||||
published,
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ title, kinescopeId, content: editor.getJSON(), published }),
|
||||||
});
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const data = await res.json().catch(() => ({}));
|
||||||
|
throw new Error((data as { error?: string }).error ?? `HTTP ${res.status}`);
|
||||||
|
}
|
||||||
setSaved(true);
|
setSaved(true);
|
||||||
setTimeout(() => setSaved(false), 2000);
|
setTimeout(() => setSaved(false), 2000);
|
||||||
});
|
} catch (err) {
|
||||||
|
setSaveError(err instanceof Error ? err.message : "Ошибка сохранения");
|
||||||
|
} finally {
|
||||||
|
setPending(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function navigateTo(lessonId: string) {
|
function navigateTo(lessonId: string) {
|
||||||
@@ -266,6 +275,12 @@ export function LessonEditor({
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{saveError && (
|
||||||
|
<p className="text-xs px-3 py-2" style={{ background: "oklch(0.577 0.245 27.325 / 0.1)", color: "oklch(0.577 0.245 27.325)", border: "1px solid oklch(0.577 0.245 27.325 / 0.3)" }}>
|
||||||
|
Ошибка сохранения: {saveError}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Title */}
|
{/* Title */}
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
|
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
|
||||||
|
|||||||
@@ -4,15 +4,17 @@ import KinescopeReactPlayer from "@kinescope/react-kinescope-player";
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
videoId: string;
|
videoId: string;
|
||||||
|
poster?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function KinescopePlayer({ videoId }: Props) {
|
export function KinescopePlayer({ videoId, poster }: Props) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}>
|
<div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}>
|
||||||
<KinescopeReactPlayer
|
<KinescopeReactPlayer
|
||||||
videoId={videoId}
|
videoId={videoId}
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
|
poster={poster}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,15 @@ export async function saveLesson(
|
|||||||
published: boolean;
|
published: boolean;
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
|
console.log("[saveLesson] start", lessonId);
|
||||||
|
try {
|
||||||
await requireAdmin();
|
await requireAdmin();
|
||||||
|
console.log("[saveLesson] auth ok");
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[saveLesson] auth failed:", e);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
try {
|
||||||
await prisma.lesson.update({
|
await prisma.lesson.update({
|
||||||
where: { id: lessonId },
|
where: { id: lessonId },
|
||||||
data: {
|
data: {
|
||||||
@@ -31,6 +39,11 @@ export async function saveLesson(
|
|||||||
published: data.published,
|
published: data.published,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
console.log("[saveLesson] db update ok");
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[saveLesson] db update failed:", e);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
|
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
|
||||||
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lessonId}`);
|
console.log("[saveLesson] done");
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user