Merge pull request #5 from PlayEdu/dev

Dev

src/api/user.ts

@@ -13,9 +13,13 @@ export function password(oldPassword: string, newPassword: string) {
 }
 
 // 学员课程
-export function courses(depId: number) {
+export function coursesCategories() {
+  return client.get("/api/v1/category/all", {});
+}
+export function courses(depId: number, categoryId: number) {
   return client.get("/api/v1/user/courses", {
     dep_id: depId,
+    category_id: categoryId,
   });
 }
 

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3943555 */
-  src: url('iconfont.woff2?t=1679564530649') format('woff2'),
-       url('iconfont.woff?t=1679564530649') format('woff'),
-       url('iconfont.ttf?t=1679564530649') format('truetype');
+  src: url('iconfont.woff2?t=1683529422487') format('woff2'),
+       url('iconfont.woff?t=1683529422487') format('woff'),
+       url('iconfont.ttf?t=1683529422487') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon-xiala:before {
+  content: "\e752";
+}
+
+.icon-close:before {
+  content: "\e751";
+}
+
+.icon-fullscreen:before {
+  content: "\e74b";
+}
+
+.icon-speed:before {
+  content: "\e74c";
+}
+
+.icon-mute:before {
+  content: "\e74d";
+}
+
+.icon-play:before {
+  content: "\e74e";
+}
+
+.icon-pause:before {
+  content: "\e74f";
+}
+
+.icon-unmute:before {
+  content: "\e750";
+}
+
 .icon-icon-tips:before {
   content: "\e74a";
 }

src/compenents/private-route/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { getToken } from "../../utils/index";
+import { Navigate } from "react-router-dom";
+
+interface PropInterface {
+  Component: any;
+}
+
+const PrivateRoute: React.FC<PropInterface> = ({ Component }) => {
+  return getToken() ? Component : <Navigate to="/login" replace={true} />;
+};
+export default PrivateRoute;

src/index.scss

@@ -291,7 +291,95 @@ h1 {
 }
 
 #meedu-player-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   width: 100%;
-  height: auto;
-  position: relative;
+  height: 100%;
+}
+
+.ant-tree-switcher {
+  display: none !important;
+}
+
+.ant-tree-node-selected {
+  .ant-tree-title {
+    color: #ff4d4f;
+  }
+}
+
+.ant-tree-treenode {
+  min-width: 150px;
+  width: 100% !important;
+  height: 40px !important;
+  padding: 0 !important;
+  display: flex;
+  align-items: center !important;
+  &.ant-tree-treenode-selected {
+    background-color: #fff2f0 !important;
+    border-radius: 0px !important;
+    overflow: hidden;
+    .ant-tree-node-content-wrapper {
+      background-color: transparent !important;
+    }
+    .ant-tree-node-content-wrapper-normal {
+      background-color: transparent !important;
+    }
+  }
+  .ant-tree-node-content-wrapper {
+    width: 100% !important;
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+  &:hover {
+    background-color: #fff2f0 !important;
+    border-radius: 0px !important;
+    overflow: hidden;
+    .ant-tree-node-content-wrapper {
+      background-color: transparent !important;
+    }
+    .ant-tree-node-content-wrapper-normal {
+      background-color: transparent !important;
+    }
+  }
+  .ant-tree-node-content-wrapper-normal {
+    width: 100% !important;
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-tree-switcher {
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ant-tree-title {
+  flex: 1;
+
+  padding-left: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .iconfont {
+    color: rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.ant-popover-inner {
+  padding: 8px 0px !important;
+}
+
+.dplayer-notice {
+  opacity: 0 !important;
 }

src/pages/course/index.tsx

@@ -124,7 +124,7 @@ const CoursePage = () => {
                     trailColor="#F6F6F6"
                     size={90}
                     strokeWidth={8}
-                    percent={learnRecord.progress / 100}
+                    percent={Math.floor(learnRecord.progress / 100)}
                     format={(percent) => `${percent}%`}
                   />
                 )}

src/pages/course/video.module.scss

@@ -2,9 +2,11 @@
   width: 100%;
   height: 100%;
   min-height: 100vh;
+  max-height: 900px;
   background-color: #0e0e1e;
   display: flex;
   justify-content: center;
+  overflow: hidden;
   .top-cont {
     position: fixed;
     top: 0;
@@ -12,7 +14,8 @@
     right: 0;
     width: 100%;
     height: 60px;
-    background: rgba(255, 255, 255, 0.1);
+    background: #262634;
+    z-index: 100;
     .box {
       width: 62.5%;
       height: 60px;
@@ -37,12 +40,13 @@
   }
   .video-body {
     width: 62.5%;
-    height: auto;
+    height: 100%;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding-top: 30px;
     margin-top: 60px;
+    overflow-y: auto;
     .video-title {
       width: 100%;
       height: 36px;

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,14 +150,35 @@ 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", () => {
-      playTimeUpdate(parseInt(window.player.video.currentTime), false);
+      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);
       window.player && window.player.destroy();
@@ -165,6 +222,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);
             }}
           >
@@ -176,7 +238,11 @@ const CoursePalyPage = () => {
       <div className={styles["video-body"]}>
         <div className={styles["video-title"]}>{hour.title}</div>
         <div className={styles["video-box"]}>
-          <div className="play-box" id="meedu-player-container"></div>
+          <div
+            className="play-box"
+            id="meedu-player-container"
+            style={{ borderRadius: 8 }}
+          ></div>
           {playendedStatus && (
             <div className={styles["alert-message"]}>
               {isLastpage && (

src/pages/index/index.module.scss

@@ -64,6 +64,7 @@
   margin-top: 50px;
   display: flex;
   align-items: center;
+  position: relative;
   .tab-item {
     width: 64px;
     height: 48px;
@@ -108,6 +109,19 @@
       animation: scaleTransX 0.3s;
     }
   }
+  .dropButton {
+    height: 40px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+  }
 }
 
 @keyframes scaleTransX {

src/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Spin, Image } from "antd";
-import type { TabsProps } from "antd";
+import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
+import type { MenuProps } from "antd";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
@@ -13,9 +13,14 @@ import { studyTimeFormat } from "../../utils/index";
 
 const IndexPage = () => {
   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 [coursesList, setCoursesList] = useState<any>([]);
+  const [categories, setCategories] = useState<any>([]);
+  const [categoryId, setCategoryId] = useState<number>(0);
+  const [categoryText, setCategoryText] = useState<string>("所有分类");
+  const [selectKey, setSelectKey] = useState<any>([0]);
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const [stats, setStats] = useState<any>({});
@@ -27,20 +32,28 @@ const IndexPage = () => {
     (state: any) => state.loginUser.value.currentDepId
   );
 
+  useEffect(() => {
+    getParams();
+  }, []);
+
   useEffect(() => {
     if (currentDepId === 0) {
       return;
     }
     getData();
-  }, [tabKey, currentDepId]);
+  }, [tabKey, currentDepId, categoryId]);
 
   useEffect(() => {
     document.title = systemConfig.systemName || "首页";
   }, [systemConfig]);
 
+  const hide = () => {
+    setOpen(false);
+  };
+
   const getData = () => {
     setLoading(true);
-    user.courses(currentDepId).then((res: any) => {
+    user.courses(currentDepId, categoryId).then((res: any) => {
       const records = res.data.learn_course_records;
       setStats(res.data.stats);
       setLearnCourseRecords(records);
@@ -87,6 +100,44 @@ const IndexPage = () => {
     });
   };
 
+  const getParams = () => {
+    user.coursesCategories().then((res: any) => {
+      const categories = res.data.categories;
+      if (JSON.stringify(categories) !== "{}") {
+        const new_arr: any[] = checkArr(categories, 0);
+        new_arr.unshift({
+          key: 0,
+          title: "所有分类",
+        });
+        setCategories(new_arr);
+      }
+    });
+  };
+
+  const checkArr = (categories: any[], id: number) => {
+    const arr = [];
+    for (let i = 0; i < categories[id].length; i++) {
+      if (!categories[categories[id][i].id]) {
+        arr.push({
+          title: (
+            <span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
+          ),
+          key: categories[id][i].id,
+        });
+      } else {
+        const new_arr: any[] = checkArr(categories, categories[id][i].id);
+        arr.push({
+          title: (
+            <span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
+          ),
+          key: categories[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
   const items = [
     {
       key: 0,
@@ -114,6 +165,40 @@ const IndexPage = () => {
     setTabKey(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();
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+  };
+
+  const dropItem = (
+    <div
+      style={{
+        maxHeight: 600,
+        overflowX: "hidden",
+        overflowY: "auto",
+      }}
+    >
+      <Tree
+        selectedKeys={selectKey}
+        switcherIcon={null}
+        onSelect={onSelect}
+        treeData={categories}
+        blockNode
+        defaultExpandAll={true}
+      />
+    </div>
+  );
+
   return (
     <div className="main-body">
       <div className="content">
@@ -238,6 +323,21 @@ const IndexPage = () => {
               )}
             </div>
           ))}
+          <Popover
+            content={dropItem}
+            placement="bottomRight"
+            open={open}
+            trigger="click"
+            onOpenChange={handleOpenChange}
+          >
+            <Space className={styles["dropButton"]}>
+              {categoryText}
+              <i
+                className="iconfont icon-icon-xiala"
+                style={{ fontSize: 16 }}
+              />
+            </Space>
+          </Popover>
         </div>
         {loading && (
           <Row
@@ -278,7 +378,9 @@ const IndexPage = () => {
                     title={item.title}
                     thumb={item.thumb}
                     isRequired={item.is_required}
-                    progress={learnCourseRecords[item.id].progress / 100}
+                    progress={Math.floor(
+                      learnCourseRecords[item.id].progress / 100
+                    )}
                   ></CoursesModel>
                 )}
 

src/pages/init/index.tsx

@@ -41,6 +41,11 @@ 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:

src/pages/latest-learn/index.tsx

@@ -83,7 +83,7 @@ const LatestLearnPage = () => {
                         <div className={styles["progress"]}>
                           {item.record.progress < 10000 && (
                             <Progress
-                              percent={item.record.progress / 100}
+                              percent={Math.floor(item.record.progress / 100)}
                               strokeColor="#FF4D4F"
                               trailColor="#F6F6F6"
                             />

src/routes/index.tsx

@@ -10,6 +10,7 @@ import CoursePlayPage from "../pages/course/video";
 import IndexPage from "../pages/index";
 import LatestLearnPage from "../pages/latest-learn";
 import LoginPage from "../pages/login";
+import PrivateRoute from "../compenents/private-route";
 
 let RootPage: any = null;
 if (getToken()) {
@@ -29,9 +30,6 @@ if (getToken()) {
     });
   });
 } else {
-  if (window.location.pathname !== "/login") {
-    window.location.href = "/login";
-  }
   RootPage = <InitPage />;
 }
 
@@ -48,7 +46,7 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <IndexPage />,
+        element: <PrivateRoute Component={<IndexPage />} />,
       },
       {
         path: "/login",
@@ -56,15 +54,15 @@ const routes: RouteObject[] = [
       },
       {
         path: "/course/:courseId",
-        element: <CoursePage />,
+        element: <PrivateRoute Component={<CoursePage />} />,
       },
       {
         path: "/course/:courseId/hour/:hourId",
-        element: <CoursePlayPage />,
+        element: <PrivateRoute Component={<CoursePlayPage />} />,
       },
       {
         path: "/latest-learn",
-        element: <LatestLearnPage />,
+        element: <PrivateRoute Component={<LatestLearnPage />} />,
       },
     ],
   },

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: "",