diff --git a/package.json b/package.json index 2d56ee7..5edb50f 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,11 @@ "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", + "@vitejs/plugin-legacy": "^4.1.1", "@vitejs/plugin-react-swc": "^3.0.0", "rollup-plugin-gzip": "^3.1.0", "sass": "^1.59.3", + "terser": "^5.20.0", "typescript": "^4.9.3", "vite": "^4.2.0" } diff --git a/src/index.scss b/src/index.scss index 96b296f..cbc9dca 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,5 +1,3 @@ -@import "./assets/iconfont/iconfont.css"; - $primaryColor: #ff4d4f; :root { diff --git a/src/main.tsx b/src/main.tsx index fb65939..6ac745c 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,6 +4,7 @@ import store from "./store"; import { BrowserRouter } from "react-router-dom"; import { ConfigProvider } from "antd"; import zhCN from "antd/locale/zh_CN"; +import "./assets/iconfont/iconfont.css"; import App from "./App"; import "./index.scss"; //全局样式 import AutoScorllTop from "./AutoTop"; @@ -21,4 +22,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -); \ No newline at end of file +); diff --git a/src/pages/course/video.module.scss b/src/pages/course/video.module.scss index b9b23f2..17071fd 100644 --- a/src/pages/course/video.module.scss +++ b/src/pages/course/video.module.scss @@ -64,6 +64,7 @@ margin: 0 auto; border-radius: 8px; position: relative; + .alert-message { position: absolute; top: 0; @@ -80,6 +81,12 @@ font-size: 18px; color: white; z-index: 100; + .des-video { + font-size: 15px; + font-weight: 400; + color: #ffffff; + line-height: 15px; + } .alert-button { width: 200px; height: 54px; diff --git a/src/pages/course/video.tsx b/src/pages/course/video.tsx index c49117b..844f29a 100644 --- a/src/pages/course/video.tsx +++ b/src/pages/course/video.tsx @@ -5,8 +5,10 @@ import { useSelector } from "react-redux"; import { course as Course } from "../../api/index"; import { ArrowLeftOutlined } from "@ant-design/icons"; import { message } from "antd"; +import { getPlayId, savePlayId } from "../../utils"; declare const window: any; +var timer: any = null; const CoursePalyPage = () => { const navigate = useNavigate(); @@ -28,8 +30,10 @@ const CoursePalyPage = () => { const playRef = useRef(0); const watchRef = useRef(0); const totalRef = useRef(0); + const [checkPlayerStatus, setCheckPlayerStatus] = useState(false); useEffect(() => { + timer && clearInterval(timer); getCourse(); getDetail(); document.oncontextmenu = function (e) { @@ -37,7 +41,9 @@ const CoursePalyPage = () => { e = e || window.event; return false; }; + return () => { + timer && clearInterval(timer); document.oncontextmenu = function (e) { /*恢复浏览器默认右键事件*/ e = e || window.event; @@ -123,6 +129,7 @@ const CoursePalyPage = () => { (res: any) => { setPlayUrl(res.data.url); initDPlayer(res.data.url, 0, data); + savePlayId(String(params.courseId) + "-" + String(params.hourId)); } ); }; @@ -185,6 +192,7 @@ const CoursePalyPage = () => { window.player && window.player.destroy(); }); setLoading(false); + checkPlayer(); }; const playTimeUpdate = (duration: number, isEnd: boolean) => { @@ -201,6 +209,22 @@ const CoursePalyPage = () => { } }; + const checkPlayer = () => { + timer = setInterval(() => { + let playId = getPlayId(); + if ( + playId && + playId !== String(params.courseId) + "-" + String(params.hourId) + ) { + timer && clearInterval(timer); + window.player && window.player.destroy(); + setCheckPlayerStatus(true); + } else { + setCheckPlayerStatus(false); + } + }, 5000); + }; + const goNextVideo = () => { const index = totalHours.findIndex( (i: any) => i.id === Number(params.hourId) @@ -234,6 +258,7 @@ const CoursePalyPage = () => {