!5 优化

Merge pull request !5 from 白书科技/fix/0922

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"
   }

src/index.scss

@@ -1,5 +1,3 @@
-@import "./assets/iconfont/iconfont.css";
-
 $primaryColor: #ff4d4f;
 
 :root {

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(
       </BrowserRouter>
     </ConfigProvider>
   </Provider>
-);
+);

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;

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 = () => {
           <div
             className={styles["close-btn"]}
             onClick={() => {
+              timer && clearInterval(timer);
               window.player && window.player.destroy();
               document.oncontextmenu = function (e) {
                 /*恢复浏览器默认右键事件*/
@@ -256,6 +281,13 @@ const CoursePalyPage = () => {
             id="meedu-player-container"
             style={{ borderRadius: 8 }}
           ></div>
+          {checkPlayerStatus && (
+            <div className={styles["alert-message"]}>
+              <div className={styles["des-video"]}>
+                您已打开新视频，暂停本视频播放
+              </div>
+            </div>
+          )}
           {playendedStatus && (
             <div className={styles["alert-message"]}>
               {isLastpage && (

src/utils/index.ts

@@ -111,3 +111,15 @@ export function isMobile() {
   );
   return flag;
 }
+
+export function getPlayId(): string {
+  return window.localStorage.getItem("playedu-play-id") || "";
+}
+
+export function savePlayId(id: string) {
+  window.localStorage.setItem("playedu-play-id", id);
+}
+
+export function clearPlayId() {
+  window.localStorage.removeItem("playedu-play-id");
+}

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import gzipPlugin from "rollup-plugin-gzip";
+import legacy from "@vitejs/plugin-legacy";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -8,7 +9,15 @@ export default defineConfig({
     host: "0.0.0.0",
     port: 9797,
   },
-  plugins: [react()],
+  plugins: [
+    react(),
+    legacy({
+      targets: ["chrome 52"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+      renderLegacyChunks: true,
+      modernPolyfills: true,
+    }),
+  ],
   build: {
     rollupOptions: {
       plugins: [gzipPlugin()],