Merge pull request #9 from PlayEdu/dev

登录页面密码框按回车键登录

src/api/login.ts

@@ -1,16 +1,9 @@
 import client from "./internal/httpClient";
 
-export function login(
+export function login(email: string, password: string) {
-  email: string,
-  password: string,
-  captchaKey: string,
-  captchaVal: string
-) {
   return client.post("/api/v1/auth/login/password", {
     email: email,
     password: password,
-    captcha_key: captchaKey,
-    captcha_val: captchaVal,
   });
 }
 

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/index.scss

@@ -291,9 +291,13 @@ h1 {
 }
 
 #meedu-player-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   width: 100%;
-  height: auto;
+  height: 100%;
-  position: relative;
 }
 
 .ant-tree-switcher {
@@ -375,3 +379,7 @@ h1 {
 .ant-popover-inner {
   padding: 8px 0px !important;
 }
+
+.dplayer-notice {
+  opacity: 0 !important;
+}

src/pages/course/index.tsx

@@ -173,7 +173,8 @@ const CoursePage = () => {
                 {chapters.map((item: any, index: number) => (
                   <div key={item.id} className={styles["chapter-it"]}>
                     <div className={styles["chapter-name"]}>{item.name}</div>
-                    {hours[item.id].map((it: any, int: number) => (
+                    {hours[item.id] &&
+                      hours[item.id].map((it: any, int: number) => (
                         <div key={it.id} className={styles["hours-it"]}>
                           {learnHourRecord[it.id] && (
                             <HourCompenent
@@ -183,7 +184,8 @@ const CoursePage = () => {
                               record={learnHourRecord[it.id]}
                               duration={it.duration}
                               progress={
-                              (learnHourRecord[it.id].finished_duration * 100) /
+                                (learnHourRecord[it.id].finished_duration *
+                                  100) /
                                 learnHourRecord[it.id].total_duration
                               }
                             ></HourCompenent>

src/pages/course/video.tsx

@@ -22,17 +22,46 @@ const CoursePalyPage = () => {
   const [loading, setLoading] = useState<Boolean>(false);
   const [isLastpage, setIsLastpage] = useState<Boolean>(false);
   const [totalHours, setTotalHours] = useState<any>([]);
+  const [playingTime, setPlayingTime] = useState(0);
+  const [watchedSeconds, setWatchedSeconds] = useState(0);
   const myRef = useRef(0);
+  const playRef = useRef(0);
+  const watchRef = useRef(0);
+  const totalRef = useRef(0);
 
   useEffect(() => {
     getCourse();
     getDetail();
+    document.oncontextmenu = function (e) {
+      /*屏蔽浏览器默认右键事件*/
+      e = e || window.event;
+      return false;
+    };
+    return () => {
+      document.oncontextmenu = function (e) {
+        /*恢复浏览器默认右键事件*/
+        e = e || window.event;
+        return true;
+      };
+    };
   }, [params.courseId, params.hourId]);
 
   useEffect(() => {
     myRef.current = playDuration;
   }, [playDuration]);
 
+  useEffect(() => {
+    playRef.current = playingTime;
+  }, [playingTime]);
+
+  useEffect(() => {
+    watchRef.current = watchedSeconds;
+  }, [watchedSeconds]);
+
+  useEffect(() => {
+    totalRef.current = hour.duration;
+  }, [hour]);
+
   const getCourse = () => {
     Course.detail(Number(params.courseId)).then((res: any) => {
       let totalHours: any = [];
@@ -77,6 +106,9 @@ const CoursePalyPage = () => {
           };
           setLastSeeValue(params);
           setLastSeeValue(params);
+          setWatchedSeconds(record.finished_duration);
+        } else if (record && record.is_finished === 1) {
+          setWatchedSeconds(res.data.hour.duration);
         }
         getVideoUrl(params);
         setLoading(false);
@@ -96,6 +128,10 @@ const CoursePalyPage = () => {
   };
 
   const initDPlayer = (playUrl: string, isTrySee: number, params: any) => {
+    let banDrag =
+      systemConfig.playerIsDisabledDrag &&
+      watchRef.current < totalRef.current &&
+      watchRef.current === 0;
     window.player = new window.DPlayer({
       container: document.getElementById("meedu-player-container"),
       autoplay: false,
@@ -114,16 +150,38 @@ const CoursePalyPage = () => {
         color: systemConfig.playerBulletSecretColor || "red",
         opacity: Number(systemConfig.playerBulletSecretOpacity),
       },
-      ban_drag: false,
+      ban_drag: banDrag,
       last_see_pos: params,
     });
     // 监听播放进度更新evt
     window.player.on("timeupdate", () => {
+      let currentTime = parseInt(window.player.video.currentTime);
+      if (
+        systemConfig.playerIsDisabledDrag &&
+        watchRef.current < totalRef.current &&
+        currentTime - playRef.current >= 2 &&
+        currentTime > watchRef.current
+      ) {
+        message.warning("首次学习禁止快进");
+        window.player.seek(watchRef.current);
+      } else {
+        setPlayingTime(currentTime);
         playTimeUpdate(parseInt(window.player.video.currentTime), false);
+      }
     });
     window.player.on("ended", () => {
+      if (
+        systemConfig.playerIsDisabledDrag &&
+        watchRef.current < totalRef.current &&
+        window.player.video.duration - playRef.current >= 2
+      ) {
+        window.player.seek(playRef.current);
+        return;
+      }
+      setPlayingTime(0);
       setPlayendedStatus(true);
       playTimeUpdate(parseInt(window.player.video.currentTime), true);
+      exitFullscreen();
       window.player && window.player.destroy();
     });
     setLoading(false);
@@ -157,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"]}>
@@ -165,6 +235,11 @@ const CoursePalyPage = () => {
             className={styles["close-btn"]}
             onClick={() => {
               window.player && window.player.destroy();
+              document.oncontextmenu = function (e) {
+                /*恢复浏览器默认右键事件*/
+                e = e || window.event;
+                return true;
+              };
               navigate(-1);
             }}
           >

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/index/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
-import type { MenuProps } from "antd";
+import { useNavigate, useLocation } from "react-router-dom";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
@@ -12,14 +12,20 @@ import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";
 
 const IndexPage = () => {
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [tabKey, setTabKey] = useState(0);
+  const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
   const [coursesList, setCoursesList] = useState<any>([]);
   const [categories, setCategories] = useState<any>([]);
-  const [categoryId, setCategoryId] = useState<number>(0);
+  const [categoryId, setCategoryId] = useState<number>(
-  const [categoryText, setCategoryText] = useState<string>("所有分类");
+    Number(result.get("cid") || 0)
+  );
+  const [categoryText, setCategoryText] = useState<string>(
+    String(result.get("catName") || "所有分类")
+  );
   const [selectKey, setSelectKey] = useState<any>([0]);
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
@@ -36,6 +42,12 @@ const IndexPage = () => {
     getParams();
   }, []);
 
+  useEffect(() => {
+    let arr = [];
+    arr.push(Number(result.get("cid") || 0));
+    setSelectKey(arr);
+  }, [result.get("cid")]);
+
   useEffect(() => {
     if (currentDepId === 0) {
       return;
@@ -163,17 +175,38 @@ const IndexPage = () => {
 
   const onChange = (key: number) => {
     setTabKey(key);
+    navigate(
+      "/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
+    );
   };
 
   const onSelect = (selectedKeys: any, info: any) => {
     setCategoryId(selectedKeys[0]);
     if (info.node.key === 0) {
       setCategoryText(info.node.title);
-    } else {
-      setCategoryText(info.node.title.props.children);
-    }
       setSelectKey(selectedKeys);
       hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title +
+          "&tab=" +
+          tabKey
+      );
+    } else {
+      setCategoryText(info.node.title.props.children);
+      setSelectKey(selectedKeys);
+      hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title.props.children +
+          "&tab=" +
+          tabKey
+      );
+    }
   };
 
   const handleOpenChange = (newOpen: boolean) => {
@@ -187,8 +220,6 @@ const IndexPage = () => {
         overflowX: "hidden",
         overflowY: "auto",
       }}
-      onMouseOut={() => setOpen(false)}
-      onMouseOver={() => setOpen(true)}
     >
       <Tree
         selectedKeys={selectKey}
@@ -332,10 +363,7 @@ const IndexPage = () => {
             trigger="click"
             onOpenChange={handleOpenChange}
           >
-            <Space
+            <Space className={styles["dropButton"]}>
-              className={styles["dropButton"]}
-              onMouseOver={() => setOpen(true)}
-            >
               {categoryText}
               <i
                 className="iconfont icon-icon-xiala"

src/pages/init/index.tsx

@@ -9,6 +9,7 @@ import {
 import { loginAction } from "../../store/user/loginUserSlice";
 import { Header, NoHeader, Footer } from "../../compenents";
 import { useParams, useLocation } from "react-router-dom";
+import { isMobile } from "../../utils/index";
 
 interface Props {
   loginData?: any;
@@ -22,6 +23,26 @@ export const InitPage = (props: Props) => {
   const [showHeader, setShowHeader] = useState<boolean>(true);
   const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
   const [showFooter, setShowFooter] = useState<boolean>(true);
+  const [init, setInit] = useState<boolean>(false);
+  useEffect(() => {
+    if (pathname) {
+      if (pathname === "/login") {
+        setShowNoHeader(true);
+        setShowHeader(false);
+        setShowFooter(false);
+      } else if (!params.hourId) {
+        setShowNoHeader(false);
+        setShowHeader(true);
+        setShowFooter(true);
+      } else {
+        setShowNoHeader(false);
+        setShowHeader(false);
+        setShowFooter(false);
+      }
+    }
+  }, [pathname, params]);
+
+  useEffect(() => {
     if (props.loginData) {
       dispatch(loginAction(props.loginData));
     }
@@ -41,41 +62,35 @@ export const InitPage = (props: Props) => {
           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));
+      if (isMobile() && props.configData["system-h5-url"] !== "") {
+        let url = props.configData["system-h5-url"];
+        window.location.href = url;
       }
-
-  useEffect(() => {
-    setShowHeader(true);
-    setShowNoHeader(false);
-    setShowFooter(true);
-    if (pathname === "/login") {
-      setShowNoHeader(true);
-      setShowHeader(false);
-      setShowFooter(false);
-    } else if (!params.hourId) {
-      setShowNoHeader(false);
-      setShowHeader(true);
-      setShowFooter(true);
-    } else {
-      setShowNoHeader(false);
-      setShowHeader(false);
-      setShowFooter(false);
     }
-  }, [pathname, params]);
+    setInit(true);
+  }, [props]);
 
   return (
     <>
+      {init && (
         <div>
           {showNoHeader && <NoHeader></NoHeader>}
           {showHeader && <Header></Header>}
           <Outlet />
           {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}

src/pages/login/index.module.scss

@@ -47,7 +47,7 @@
         height: 100%;
         box-sizing: border-box;
         border-left: 1px solid #d8d8d8;
-        padding: 0px 60px;
+        padding: 50px 60px;
         display: flex;
         flex-direction: column;
         .captcha-box {

src/pages/login/index.tsx

@@ -1,11 +1,11 @@
-import { Spin, Input, Button, message } from "antd";
+import { Input, Button, message } from "antd";
 import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
 import banner from "../../assets/images/login/banner.png";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
+import { loginAction } from "../../store/user/loginUserSlice";
-import { login, system, user } from "../../api/index";
+import { login, user } from "../../api/index";
 import { setToken } from "../../utils/index";
 import { NoFooter } from "../../compenents";
 
@@ -13,25 +13,8 @@ const LoginPage: React.FC = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(false);
-  const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
-  const [captchaVal, setCaptchaVal] = useState<string>("");
-  const [captchaKey, setCaptchaKey] = useState<string>("");
-  const [captchaLoading, setCaptchaLoading] = useState(true);
-
-  useEffect(() => {
-    fetchImageCaptcha();
-  }, []);
-
-  const fetchImageCaptcha = () => {
-    setCaptchaLoading(true);
-    system.imageCaptcha().then((res: any) => {
-      setImage(res.data.image);
-      setCaptchaKey(res.data.key);
-      setCaptchaLoading(false);
-    });
-  };
 
   const loginSubmit = (e: any) => {
     if (!email) {
@@ -42,14 +25,6 @@ const LoginPage: React.FC = () => {
       message.error("请输入密码");
       return;
     }
-    if (!captchaVal) {
-      message.error("请输入图形验证码");
-      return;
-    }
-    if (captchaVal.length < 4) {
-      message.error("图形验证码错误");
-      return;
-    }
     if (loading) {
       return;
     }
@@ -68,7 +43,7 @@ const LoginPage: React.FC = () => {
     }
     setLoading(true);
     login
-      .login(email, password, captchaKey, captchaVal)
+      .login(email, password)
       .then((res: any) => {
         const token = res.data.token;
         setToken(token);
@@ -76,8 +51,6 @@ const LoginPage: React.FC = () => {
       })
       .catch((e) => {
         setLoading(false);
-        setCaptchaVal("");
-        fetchImageCaptcha();
       });
   };
 
@@ -118,33 +91,8 @@ const LoginPage: React.FC = () => {
                 }}
                 style={{ width: 400, height: 54 }}
                 placeholder="请输入密码"
-              />
-            </div>
-            <div className="login-box d-flex mt-50">
-              <Input
-                value={captchaVal}
-                style={{ width: 260, height: 54 }}
-                placeholder="请输入图形验证码"
-                onChange={(e) => {
-                  setCaptchaVal(e.target.value);
-                }}
                 onKeyUp={(e) => keyUp(e)}
               />
-              <div className={styles["captcha-box"]}>
-                {captchaLoading && (
-                  <div className={styles["catpcha-loading-box"]}>
-                    <Spin size="small" />
-                  </div>
-                )}
-
-                {!captchaLoading && (
-                  <img
-                    className={styles["captcha"]}
-                    onClick={fetchImageCaptcha}
-                    src={image}
-                  />
-                )}
-              </div>
             </div>
             <div className="login-box d-flex mt-50">
               <Button

src/routes/index.tsx

@@ -30,7 +30,19 @@ if (getToken()) {
     });
   });
 } else {
-  RootPage = <InitPage />;
+  RootPage = lazy(async () => {
+    return new Promise<any>(async (resolve) => {
+      try {
+        let configRes: any = await system.config();
+
+        resolve({
+          default: <InitPage configData={configRes.data} />,
+        });
+      } catch (e) {
+        console.error("系统初始化失败", e);
+      }
+    });
+  });
 }
 
 // 懒加载

src/store/system/systemConfigSlice.ts

@@ -9,6 +9,7 @@ type SystemConfigStoreInterface = {
   pcIndexFooterMsg: string;
   playerPoster: string;
   playerIsEnabledBulletSecret: boolean;
+  playerIsDisabledDrag: boolean;
   playerBulletSecretText: string;
   playerBulletSecretColor: string;
   playerBulletSecretOpacity: string;
@@ -23,6 +24,7 @@ let defaultValue: SystemConfigStoreInterface = {
   pcIndexFooterMsg: "",
   playerPoster: "",
   playerIsEnabledBulletSecret: false,
+  playerIsDisabledDrag: false,
   playerBulletSecretText: "",
   playerBulletSecretColor: "",
   playerBulletSecretOpacity: "",

src/utils/index.ts

@@ -104,3 +104,10 @@ export function changeAppUrl(str: string) {
     return str + "/";
   }
 }
+
+export function isMobile() {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+  return flag;
+}