89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
/**
|
|
* 视频处理组件
|
|
* 处理视频播放、旁白、提示框的展示逻辑
|
|
*/
|
|
import { Video, Narration } from "@/components";
|
|
import Alert from "@/components/layout/alert/title-alert";
|
|
import type { FileType } from "./types";
|
|
import { YINYUAN_VIDEO_CONFIG } from "../constants/yinyuan";
|
|
import { MIMIAN_VIDEO_CONFIG } from "../constants/mimian";
|
|
|
|
export interface VideoHandlerProps {
|
|
/** 当前播放的视频类型 */
|
|
playingVideo: FileType | null;
|
|
/** 旁白文本 */
|
|
narrationText: string;
|
|
/** 是否显示旁白 */
|
|
showNarration: boolean;
|
|
/** 是否显示提示框 */
|
|
showAlert: boolean;
|
|
/** 提示框配置 */
|
|
alertConfig: { title: string; subtitle: string };
|
|
/** 视频结束回调 */
|
|
onVideoEnd: () => void;
|
|
/** 旁白关闭回调 */
|
|
onNarrationClose: () => void;
|
|
/** 提示框关闭回调 */
|
|
onAlertClose: () => void;
|
|
}
|
|
|
|
/**
|
|
* 视频处理组件
|
|
* 根据 playingVideo 显示对应的视频，处理视频结束后的旁白和提示框
|
|
*/
|
|
export const VideoHandler = ({
|
|
playingVideo,
|
|
narrationText,
|
|
showNarration,
|
|
showAlert,
|
|
alertConfig,
|
|
onVideoEnd,
|
|
onNarrationClose,
|
|
onAlertClose,
|
|
}: VideoHandlerProps) => {
|
|
// 获取当前视频配置
|
|
const getVideoConfig = () => {
|
|
if (playingVideo === "yinyuan") return YINYUAN_VIDEO_CONFIG;
|
|
if (playingVideo === "mimian") return MIMIAN_VIDEO_CONFIG;
|
|
return null;
|
|
};
|
|
|
|
const videoConfig = getVideoConfig();
|
|
|
|
return (
|
|
<>
|
|
{/* 视频播放层 */}
|
|
{playingVideo && videoConfig && (
|
|
<div className="absolute inset-0 z-40">
|
|
<Video
|
|
src={videoConfig.src}
|
|
autoPlay
|
|
showSkipButton
|
|
onEnded={onVideoEnd}
|
|
className="w-full h-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 旁白层（仅用于视频后的旁白，不再包含欢迎语） */}
|
|
<Narration
|
|
text={narrationText}
|
|
visible={showNarration}
|
|
onClose={onNarrationClose}
|
|
enableAnimation={playingVideo === "yinyuan"}
|
|
/>
|
|
|
|
{/* 提示框 */}
|
|
{showAlert && (
|
|
<Alert
|
|
visible={showAlert}
|
|
title={alertConfig.title}
|
|
subtitle={alertConfig.subtitle}
|
|
onClose={onAlertClose}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|