Merge pull request #6 from PlayEdu/dev

Dev
头像重复加载优化
2025-12-23 13:49:55 +08:00 · 2023-06-13 14:12:13 +08:00 · 2023-06-13 11:22:58 +08:00 · 2023-06-13 09:14:42 +08:00 · 2023-06-08 18:16:18 +08:00 · 2023-06-08 16:10:30 +08:00
9 changed files with 163 additions and 61 deletions
--- a/src/compenents/header/index.tsx
+++ b/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>
                  </>
--- a/src/compenents/user-info/index.tsx
+++ b/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%" }}
--- a/src/index.scss
+++ b/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;
+}
--- a/src/pages/course/video.tsx
+++ b/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", () => {
-      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);
+      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);
            }}
          >
--- a/src/pages/index/compenents/courses-model.tsx
+++ b/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>
        )}
--- a/src/pages/index/index.tsx
+++ b/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"
--- a/src/pages/init/index.tsx
+++ b/src/pages/init/index.tsx
@@ -22,60 +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) {
-    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,
-      playerBulletSecretText: props.configData["player-bullet-secret-text"],
-      playerBulletSecretColor: props.configData["player-bullet-secret-color"],
-      playerBulletSecretOpacity:
-        props.configData["player-bullet-secret-opacity"],
-    };
-    dispatch(saveConfigAction(config));
-  }
-
+  const [init, setInit] = useState<boolean>(false);
  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);
+    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));
+    }
+    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>
-        {showNoHeader && <NoHeader></NoHeader>}
-        {showHeader && <Header></Header>}
-        <Outlet />
-        {showFooter && <Footer></Footer>}
-      </div>
+      {init && (
+        <div>
+          {showNoHeader && <NoHeader></NoHeader>}
+          {showHeader && <Header></Header>}
+          <Outlet />
+          {showFooter && <Footer></Footer>}
+        </div>
+      )}
    </>
  );
 };
--- a/src/pages/latest-learn/index.tsx
+++ b/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}
--- a/src/store/system/systemConfigSlice.ts
+++ b/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: "",
Author	SHA1	Message	Date
Teng	25bb64a835	Merge pull request #6 from PlayEdu/dev Dev	2023-06-13 14:12:13 +08:00
禺狨	ccde01e6ff	头像重复加载优化	2023-06-13 11:22:58 +08:00
禺狨	1996340699	播放结束退出全屏	2023-06-13 09:14:42 +08:00
禺狨	c2420798d2	页面初始化优化	2023-06-08 18:16:18 +08:00
禺狨	e04d63125a	首页。最近学习页懒加载	2023-06-08 16:10:30 +08:00
禺狨	950fc74371	首页。最近学习页懒加载	2023-06-08 16:08:49 +08:00
禺狨	07cfa836a2	首页。最近学习页懒加载	2023-06-08 15:49:52 +08:00
Teng	d922bb1b0b	Merge pull request #5 from PlayEdu/dev Dev	2023-05-31 10:37:48 +08:00
禺狨	59b80c4158	播放器快进、快退toast隐藏	2023-05-31 09:37:36 +08:00
禺狨	465cc901b1	播放页面拖动进度条逻辑优化	2023-05-31 09:08:54 +08:00
禺狨	97f4abfe41	视频已学显示进度条b	2023-05-30 18:13:10 +08:00
禺狨	0075a848e3	视频第一次播放显示进度条bug修复	2023-05-30 18:05:30 +08:00
禺狨	58440be424	已看完视频显示进度条	2023-05-30 17:47:26 +08:00
禺狨	cec5251da4	已看完视频显示进度条	2023-05-30 17:47:12 +08:00
禺狨	c8e9f8cc7a	视频播放封面宽高优化	2023-05-30 17:26:14 +08:00
禺狨	1a9a20cbca	视频播放根据配置禁止拖动进度条	2023-05-30 16:40:10 +08:00
禺狨	537cac224a	视频播放页面屏蔽右键菜单	2023-05-30 10:00:43 +08:00
禺狨	29630ec1ee	视频播放页面屏蔽右键菜单	2023-05-30 09:58:37 +08:00
禺狨	01d2cf4e9b	首页分类选择栏取消悬浮显示	2023-05-30 09:54:33 +08:00