mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
235 lines
11 KiB
React
235 lines
11 KiB
React
/* A similar strategy to BlockList.jsx so this will applies
|
|
to Client side */
|
|
|
|
import { Eye, ImageIcon, VideoIcon, ZoomIn } from "lucide-react";
|
|
import { PhotoProvider, PhotoView } from "react-photo-view";
|
|
import { VideoBlock } from "@/components/generic/Blocks/Client/VideoBlock";
|
|
import { TextVideoBlock } from "@/components/generic/Blocks/Client/TextVideoBlock";
|
|
import { TextImageBlock } from "@/components/generic/Blocks/Client/TextImageBlock";
|
|
import { ImageBlock } from "@/components/generic/Blocks/Client/ImageBlock";
|
|
import { TextBlock } from "@/components/generic/Blocks/Client/TextBlock";
|
|
import { AudioBlock } from "@/components/generic/Blocks/Client/AudioBlock";
|
|
import { CodeBlock } from "@/components/generic/Blocks/Client/CodeBlock";
|
|
import { MarkdownBlock } from "@/components/generic/Blocks/Client/MarkdownBlock";
|
|
|
|
export function LessonHeader({ lesson }) {
|
|
if (!lesson) return null;
|
|
return (
|
|
<div className="space-y-3 pb-2 sm:space-y-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold leading-tight mb-1 sm:text-3xl sm:leading-[1.2]">
|
|
{lesson.title}
|
|
</h1>
|
|
{lesson.description && (
|
|
<p className="mt-1 leading-relaxed text-sm text-muted-foreground sm:text-base sm:leading-[1.75] sm:text-justify">
|
|
{lesson.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{lesson.objectives?.length > 0 && (
|
|
<div className="rounded-lg border p-3 space-y-2 sm:p-4 sm:space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-7 w-7 rounded-md bg-green-100 flex items-center justify-center shrink-0 sm:h-8 sm:w-8">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-3.5 w-3.5 text-green-600 sm:h-4 sm:w-4"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<circle cx="12" cy="12" r="6" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-xs font-semibold sm:text-sm">Objective</p>
|
|
</div>
|
|
<ul className="space-y-1 list-disc list-inside sm:space-y-1.5">
|
|
{lesson.objectives.map((o) => (
|
|
<li key={o.objective_id} className="text-xs text-muted-foreground sm:text-sm">
|
|
{o.text}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Zoomable image wrapper ───────────────────────────────────────────────────
|
|
// Must be rendered inside a <PhotoProvider>. Shows a subtle zoom hint on hover.
|
|
|
|
export function ZoomableImage({ url, alt }) {
|
|
if (!url) return null;
|
|
return (
|
|
<PhotoView src={url}>
|
|
<div className="relative group cursor-zoom-in">
|
|
<img
|
|
src={url}
|
|
alt={alt ?? ""}
|
|
className="w-full rounded-md object-cover aspect-video"
|
|
draggable={false}
|
|
/>
|
|
{/* Zoom hint badge — fades in on hover */}
|
|
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
|
|
<div className="flex items-center gap-1 bg-secondary text-sm px-2 py-1 rounded-full border">
|
|
<ZoomIn className="size-4" />
|
|
<span>Zoom</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PhotoView>
|
|
);
|
|
}
|
|
|
|
export function PreviewImage({ url, alt }) {
|
|
if (!url) {
|
|
return (
|
|
<div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
|
|
<ImageIcon className="h-4 w-4" />
|
|
No image
|
|
</div>
|
|
);
|
|
}
|
|
return <ZoomableImage url={url} alt={alt} />;
|
|
}
|
|
|
|
export function PreviewVideo({ url, thumb }) {
|
|
if (!url) {
|
|
return (
|
|
<div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
|
|
<VideoIcon className="h-4 w-4" />
|
|
No video
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="relative rounded-md overflow-hidden aspect-video bg-muted">
|
|
{thumb ? (
|
|
<img src={thumb} alt="Video thumbnail" className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<VideoIcon className="h-8 w-8 text-muted-foreground/40 sm:h-10 sm:w-10" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<div className="h-8 w-8 rounded-full bg-black/50 flex items-center justify-center sm:h-10 sm:w-10">
|
|
<VideoIcon className="h-4 w-4 text-white sm:h-5 sm:w-5" />
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-0 inset-x-0 bg-black/60 px-2 py-1">
|
|
<p className="text-white text-[9px] truncate sm:text-[10px]">{url}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// onWatchProgress(percent, { blockId, blockType }) — only meaningful for video/audio
|
|
// blocks; optional, undefined in admin preview mode (only the client reader passes it,
|
|
// for watch_percent/watch_video/listen_audio tracking). PreviewBlock (not VideoBlock/
|
|
// AudioBlock themselves) attaches the block's own id/type to each call, since a lesson
|
|
// can have several blocks of the same type and watch_video/listen_audio need to know
|
|
// which specific one just reported progress.
|
|
export function PreviewBlock({ block, onWatchProgress, resumeMap, antiSkipEnabled }) {
|
|
const { id, type, content } = block;
|
|
const withBlockMeta = onWatchProgress
|
|
? (percent) => onWatchProgress(percent, { blockId: id, blockType: type })
|
|
: undefined;
|
|
const resumePercent = resumeMap?.[id];
|
|
|
|
switch (type) {
|
|
case "text":
|
|
return <TextBlock blockId={id} content={content} readOnly />;
|
|
case "image":
|
|
return <ImageBlock content={content} readOnly />;
|
|
case "text-image":
|
|
return <TextImageBlock blockId={id} content={content} readOnly />;
|
|
case "video":
|
|
return <VideoBlock content={content} readOnly onWatchProgress={withBlockMeta} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />;
|
|
case "text-video":
|
|
return <TextVideoBlock blockId={id} content={content} readOnly onWatchProgress={withBlockMeta} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />;
|
|
case "audio":
|
|
return <AudioBlock content={content} onWatchProgress={withBlockMeta} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />;
|
|
case "code":
|
|
return <CodeBlock content={content} />;
|
|
case "markdown":
|
|
return <MarkdownBlock content={content} />;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ─── PreviewContent ───────────────────────────────────────────────────────────
|
|
// PhotoProvider wraps ALL blocks so images across the whole lesson share
|
|
// one lightbox session — users can swipe between them naturally.
|
|
|
|
// Only these completion-requirement types gate video/audio behind the anti-skip
|
|
// seek-cap — everything else (or no requirement configured) allows free seeking.
|
|
const WATCH_TYPE_REQUIREMENTS = ["watch_percent", "watch_video", "listen_audio"];
|
|
|
|
export function PreviewContent({ lesson, blocks, empty = "No content yet.", showHeader = true, onWatchProgress }) {
|
|
const resumeMap = lesson?.resume_positions;
|
|
const antiSkipEnabled = WATCH_TYPE_REQUIREMENTS.includes(lesson?.completion?.type);
|
|
return (
|
|
<PhotoProvider
|
|
speed={() => 300}
|
|
easing={(type) => (type === 2 ? "cubic-bezier(0.36, 0, 0.66, -0.56)" : "cubic-bezier(0.34, 1.56, 0.64, 1)")}
|
|
toolbarRender={({ onScale, scale, rotate, onRotate }) => (
|
|
<div className="flex items-center gap-3 px-2">
|
|
<button
|
|
onClick={() => onScale(scale + 0.5)}
|
|
className="text-white/80 hover:text-white transition-colors"
|
|
title="Zoom in"
|
|
>
|
|
<ZoomIn className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
>
|
|
{showHeader && <LessonHeader lesson={lesson} />}
|
|
{blocks.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center gap-2 py-10 text-sm text-muted-foreground sm:py-16">
|
|
<Eye className="h-6 w-6 opacity-20 sm:h-8 sm:w-8" />
|
|
<p>{empty}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 sm:space-y-5">
|
|
{blocks.map((block) => (
|
|
<div key={block.id}>
|
|
<PreviewBlock block={block} onWatchProgress={onWatchProgress} resumeMap={resumeMap} antiSkipEnabled={antiSkipEnabled} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</PhotoProvider>
|
|
);
|
|
}
|
|
|
|
export function PreviewChrome({ title, children, showChrome = true }) {
|
|
if (!showChrome) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-xl border bg-card shadow-sm overflow-hidden">
|
|
<div className="flex items-center gap-1.5 px-3 py-2 bg-muted/60 border-b">
|
|
<span className="hidden h-2.5 w-2.5 rounded-full bg-red-400 sm:inline-block" />
|
|
<span className="hidden h-2.5 w-2.5 rounded-full bg-yellow-400 sm:inline-block" />
|
|
<span className="hidden h-2.5 w-2.5 rounded-full bg-green-400 sm:inline-block" />
|
|
<div className="flex-1 sm:mx-3 h-5 rounded bg-background/60 border text-[10px]
|
|
flex items-center px-2 text-muted-foreground/60 truncate">
|
|
{title ?? "Lesson Preview"}
|
|
</div>
|
|
<Eye className="h-3.5 w-3.5 text-muted-foreground/60 shrink-0" />
|
|
</div>
|
|
<div className="p-3 sm:p-5">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |