Zhengen
4bbd6947da
- types/wagtail.ts 新增对应 6 个 Block 值类型接口及 StreamFieldBlock 联合类型分支 - 新建 6 个渲染组件：ProductCardGrid/Pricing/Timeline/Team/TechStack/Video，风格与既有 Block 一致 - BlockRenderer.tsx 映射表接入新组件，key 与后端 COMMON_BLOCKS 保持一致 - lint/build 均验证通过
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import type { VideoBlockValue } from "@/types/wagtail";
|
|
|
|
const DIRECT_VIDEO_EXTENSIONS = [".mp4", ".webm", ".ogg"];
|
|
|
|
export default function Video({ value }: { value: VideoBlockValue }) {
|
|
if (!value.video_url) {
|
|
return null;
|
|
}
|
|
|
|
const isDirectFile = DIRECT_VIDEO_EXTENSIONS.some((ext) =>
|
|
value.video_url.toLowerCase().includes(ext)
|
|
);
|
|
|
|
return (
|
|
<section className="py-24">
|
|
<div className="mx-auto max-w-5xl px-6">
|
|
{value.heading && (
|
|
<h2 className="mb-8 text-center text-4xl font-bold text-slate-900">
|
|
{value.heading}
|
|
</h2>
|
|
)}
|
|
<div className="overflow-hidden rounded-3xl bg-black shadow-lg">
|
|
{isDirectFile ? (
|
|
<video
|
|
src={value.video_url}
|
|
poster={value.poster?.url}
|
|
controls
|
|
className="aspect-video w-full"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={value.video_url}
|
|
allow="autoplay; fullscreen"
|
|
allowFullScreen
|
|
className="aspect-video w-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|