Merge pull request #6 from PlayEdu/dev

Dev

src/compenents/header/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
-import { Modal, Button, Dropdown } from "antd";
+import { Modal, Button, Dropdown, Image } from "antd";
 import type { MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useLocation } from "react-router-dom";
@@ -217,9 +217,11 @@ export const Header: React.FC = () => {
               <div className="d-flex" style={{ cursor: "pointer" }}>
                 {user && user.name && (
                   <>
-                    <img
+                    <Image
+                      loading="lazy"
                       style={{ width: 36, height: 36, borderRadius: "50%" }}
                       src={user.avatar}
+                      preview={false}
                     />
                     <span className="ml-8 c-admin">{user.name}</span>
                   </>

src/compenents/user-info/index.tsx

@@ -101,6 +101,7 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
               <div className="d-flex">
                 {avatar && (
                   <Image
+                    loading="lazy"
                     width={60}
                     height={60}
                     style={{ borderRadius: "50%" }}

src/pages/course/video.tsx

@@ -181,6 +181,7 @@ const CoursePalyPage = () => {
       setPlayingTime(0);
       setPlayendedStatus(true);
       playTimeUpdate(parseInt(window.player.video.currentTime), true);
+      exitFullscreen();
       window.player && window.player.destroy();
     });
     setLoading(false);
@@ -214,6 +215,18 @@ const CoursePalyPage = () => {
     }
   };
 
+  const exitFullscreen = () => {
+    let de: any;
+    de = document;
+    if (de.fullscreenElement !== null) {
+      de.exitFullscreen();
+    } else if (de.mozCancelFullScreen) {
+      de.mozCancelFullScreen();
+    } else if (de.webkitCancelFullScreen) {
+      de.webkitCancelFullScreen();
+    }
+  };
+
   return (
     <div className={styles["video-mask"]}>
       <div className={styles["top-cont"]}>

src/pages/index/compenents/courses-model.tsx

@@ -29,6 +29,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
     >
       <div className={styles["top-content"]}>
         <Image
+          loading="lazy"
           width={120}
           height={90}
           style={{ borderRadius: 10 }}
@@ -65,7 +66,13 @@ export const CoursesModel: React.FC<PropInterface> = ({
         )}
         {progress >= 100 && (
           <div className={styles["success"]}>
-            <Image width={24} height={24} src={mediaIcon} preview={false} />
+            <Image
+              loading="lazy"
+              width={24}
+              height={24}
+              src={mediaIcon}
+              preview={false}
+            />
             <span className="ml-8">恭喜你学完此课程!</span>
           </div>
         )}

src/pages/init/index.tsx

@@ -22,65 +22,70 @@ export const InitPage = (props: Props) => {
   const [showHeader, setShowHeader] = useState<boolean>(true);
   const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
   const [showFooter, setShowFooter] = useState<boolean>(true);
-  if (props.loginData) {
+  const [init, setInit] = useState<boolean>(false);
-    dispatch(loginAction(props.loginData));
-  }
-  if (props.configData) {
-    let config: SystemConfigStoreInterface = {
-      //系统配置
-      systemApiUrl: props.configData["system-api-url"],
-      systemH5Url: props.configData["system-h5-url"],
-      systemLogo: props.configData["system-logo"],
-      systemName: props.configData["system-name"],
-      systemPcUrl: props.configData["system-pc-url"],
-      pcIndexFooterMsg: props.configData["system-pc-index-footer-msg"],
-      //播放器配置
-      playerPoster: props.configData["player-poster"],
-      playerIsEnabledBulletSecret:
-        props.configData["player-is-enabled-bullet-secret"] &&
-        props.configData["player-is-enabled-bullet-secret"] === "1"
-          ? true
-          : false,
-      playerIsDisabledDrag:
-        props.configData["player-disabled-drag"] &&
-        props.configData["player-disabled-drag"] === "1"
-          ? true
-          : false,
-      playerBulletSecretText: props.configData["player-bullet-secret-text"],
-      playerBulletSecretColor: props.configData["player-bullet-secret-color"],
-      playerBulletSecretOpacity:
-        props.configData["player-bullet-secret-opacity"],
-    };
-    dispatch(saveConfigAction(config));
-  }
-
   useEffect(() => {
-    setShowHeader(true);
+    if (pathname) {
-    setShowNoHeader(false);
+      if (pathname === "/login") {
-    setShowFooter(true);
+        setShowNoHeader(true);
-    if (pathname === "/login") {
+        setShowHeader(false);
-      setShowNoHeader(true);
+        setShowFooter(false);
-      setShowHeader(false);
+      } else if (!params.hourId) {
-      setShowFooter(false);
+        setShowNoHeader(false);
-    } else if (!params.hourId) {
+        setShowHeader(true);
-      setShowNoHeader(false);
+        setShowFooter(true);
-      setShowHeader(true);
+      } else {
-      setShowFooter(true);
+        setShowNoHeader(false);
-    } else {
+        setShowHeader(false);
-      setShowNoHeader(false);
+        setShowFooter(false);
-      setShowHeader(false);
+      }
-      setShowFooter(false);
     }
   }, [pathname, params]);
 
+  useEffect(() => {
+    if (props.loginData) {
+      dispatch(loginAction(props.loginData));
+    }
+    if (props.configData) {
+      let config: SystemConfigStoreInterface = {
+        //系统配置
+        systemApiUrl: props.configData["system-api-url"],
+        systemH5Url: props.configData["system-h5-url"],
+        systemLogo: props.configData["system-logo"],
+        systemName: props.configData["system-name"],
+        systemPcUrl: props.configData["system-pc-url"],
+        pcIndexFooterMsg: props.configData["system-pc-index-footer-msg"],
+        //播放器配置
+        playerPoster: props.configData["player-poster"],
+        playerIsEnabledBulletSecret:
+          props.configData["player-is-enabled-bullet-secret"] &&
+          props.configData["player-is-enabled-bullet-secret"] === "1"
+            ? true
+            : false,
+        playerIsDisabledDrag:
+          props.configData["player-disabled-drag"] &&
+          props.configData["player-disabled-drag"] === "1"
+            ? true
+            : false,
+        playerBulletSecretText: props.configData["player-bullet-secret-text"],
+        playerBulletSecretColor: props.configData["player-bullet-secret-color"],
+        playerBulletSecretOpacity:
+          props.configData["player-bullet-secret-opacity"],
+      };
+      dispatch(saveConfigAction(config));
+    }
+    setInit(true);
+  }, [props]);
+
   return (
     <>
-      <div>
+      {init && (
-        {showNoHeader && <NoHeader></NoHeader>}
+        <div>
-        {showHeader && <Header></Header>}
+          {showNoHeader && <NoHeader></NoHeader>}
-        <Outlet />
+          {showHeader && <Header></Header>}
-        {showFooter && <Footer></Footer>}
+          <Outlet />
-      </div>
+          {showFooter && <Footer></Footer>}
+        </div>
+      )}
     </>
   );
 };

src/pages/latest-learn/index.tsx

@@ -56,6 +56,7 @@ const LatestLearnPage = () => {
                 >
                   <div style={{ width: 120 }}>
                     <Image
+                      loading="lazy"
                       src={item.course.thumb}
                       width={120}
                       height={90}
@@ -91,6 +92,7 @@ const LatestLearnPage = () => {
                           {item.record.progress >= 10000 && (
                             <>
                               <Image
+                                loading="lazy"
                                 width={24}
                                 height={24}
                                 src={mediaIcon}