Merge pull request #5 from PlayEdu/dev

Dev

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;
-  position: relative;
+  height: 100%;
 }
 
 .ant-tree-switcher {
@@ -375,3 +379,7 @@ h1 {
 .ant-popover-inner {
   padding: 8px 0px !important;
 }
+
+.dplayer-notice {
+  opacity: 0 !important;
+}

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);
             }}
           >

src/pages/index/index.tsx

@@ -187,8 +187,6 @@ const IndexPage = () => {
         overflowX: "hidden",
         overflowY: "auto",
       }}
-      onMouseOut={() => setOpen(false)}
-      onMouseOver={() => setOpen(true)}
     >
       <Tree
         selectedKeys={selectKey}
@@ -332,10 +330,7 @@ const IndexPage = () => {
             trigger="click"
             onOpenChange={handleOpenChange}
           >
-            <Space
-              className={styles["dropButton"]}
-              onMouseOver={() => setOpen(true)}
-            >
+            <Space className={styles["dropButton"]}>
               {categoryText}
               <i
                 className="iconfont icon-icon-xiala"

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