69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import { useLocation } from "react-router-dom";
|
||
import { PlayCircleOutlined } from "@ant-design/icons";
|
||
import VideoPlayer from "./VideoPlayer";
|
||
import { getVideoUrlByRoute } from "./videoConfig";
|
||
import styles from "./index.module.scss";
|
||
|
||
interface FloatingVideoHelpProps {
|
||
/** 是否显示悬浮窗，默认为 true */
|
||
visible?: boolean;
|
||
/** 自定义样式类名 */
|
||
className?: string;
|
||
}
|
||
|
||
const FloatingVideoHelp: React.FC<FloatingVideoHelpProps> = ({
|
||
visible = true,
|
||
className,
|
||
}) => {
|
||
const location = useLocation();
|
||
const [showPlayer, setShowPlayer] = useState(false);
|
||
const [currentVideoUrl, setCurrentVideoUrl] = useState<string | null>(null);
|
||
|
||
// 根据当前路由获取视频URL
|
||
useEffect(() => {
|
||
const videoUrl = getVideoUrlByRoute(location.pathname);
|
||
setCurrentVideoUrl(videoUrl);
|
||
}, [location.pathname]);
|
||
|
||
const handleClick = () => {
|
||
if (currentVideoUrl) {
|
||
setShowPlayer(true);
|
||
} else {
|
||
// 如果没有对应的视频，可以显示提示
|
||
console.warn("当前路由没有对应的操作视频");
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
setShowPlayer(false);
|
||
};
|
||
|
||
// 如果没有视频URL，不显示悬浮窗
|
||
if (!visible || !currentVideoUrl) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
className={`${styles.floatingButton} ${className || ""}`}
|
||
onClick={handleClick}
|
||
title="查看操作视频"
|
||
>
|
||
<PlayCircleOutlined className={styles.icon} />
|
||
</div>
|
||
|
||
{showPlayer && currentVideoUrl && (
|
||
<VideoPlayer
|
||
videoUrl={currentVideoUrl}
|
||
visible={showPlayer}
|
||
onClose={handleClose}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default FloatingVideoHelp;
|