视频播放下一节

src/pages/course/compenents/hour.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "./hour.module.scss";
 import { durationFormat } from "../../../utils/index";
@@ -11,6 +11,7 @@ interface PropInterface {
   duration: number;
   record: any;
   progress: number;
+  totalHours: any;
   onChange: () => void;
 }
 
@@ -21,21 +22,56 @@ export const HourCompenent: React.FC<PropInterface> = ({
   duration,
   record,
   progress,
+  totalHours,
   onChange,
 }) => {
   // const navigate = useNavigate();
   const [visible, setVisible] = useState<boolean>(false);
+  const [currentId, setCurrentId] = useState(id);
+  const [currentTitle, setCurrentTitle] = useState(title);
+  const [isLastpage, setIsLastpage] = useState<boolean>(false);
+
+  useEffect(() => {
+    getData();
+  }, [totalHours]);
+
+  const getData = () => {
+    const index = totalHours.findIndex((i: any) => i.id === id);
+    if (index === totalHours.length - 1) {
+      setIsLastpage(true);
+    }
+  };
+
+  const goNextVideo = () => {
+    const index = totalHours.findIndex((i: any) => i.id === id);
+    if (index === totalHours.length - 1) {
+      setIsLastpage(true);
+    } else if (index < totalHours.length - 1) {
+      setCurrentId(totalHours[index + 1].id);
+      setCurrentTitle(totalHours[index + 1].title);
+      if (index + 1 === totalHours.length - 1) {
+        setIsLastpage(true);
+      }
+    }
+    setVisible(true);
+  };
+
   return (
     <div className={styles["item"]}>
       <VideoModel
         cid={cid}
-        id={id}
+        id={currentId}
-        title={title}
+        title={currentTitle}
         open={visible}
+        isLastpage={isLastpage}
         onCancel={() => {
           setVisible(false);
           onChange();
         }}
+        goNextVideo={() => {
+          setVisible(false);
+          goNextVideo();
+        }}
       ></VideoModel>
       <div className={styles["left-item"]}>
         <i className="iconfont icon-icon-video"></i>

src/pages/course/compenents/video.module.scss

@@ -70,6 +70,35 @@
       background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
       background-size: 400% 100%;
       animation: el-skeleton-loading 1.4s ease infinite;
+      position: relative;
+      .alert-message {
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color: white;
+        .alert-button {
+          width: 200px;
+          height: 54px;
+          background: #ff4d4f;
+          border-radius: 27px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          margin-bottom: 30px;
+          &:hover {
+            opacity: 0.8;
+          }
+          &:last-child {
+            margin-bottom: 0px;
+          }
+        }
+      }
     }
   }
 }

src/pages/course/compenents/video.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import styles from "./video.module.scss";
 import { course } from "../../../api/index";
 import { ArrowLeftOutlined } from "@ant-design/icons";
+import { useSelector } from "react-redux";
 
 declare const window: any;
 
@@ -10,7 +11,9 @@ interface PropInterface {
   cid: number;
   title: string;
   open: boolean;
+  isLastpage: boolean;
   onCancel: () => void;
+  goNextVideo: () => void;
 }
 
 export const VideoModel: React.FC<PropInterface> = ({
@@ -18,8 +21,11 @@ export const VideoModel: React.FC<PropInterface> = ({
   cid,
   title,
   open,
+  isLastpage,
   onCancel,
+  goNextVideo,
 }) => {
+  const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [playUrl, setPlayUrl] = useState<string>("");
   const [playDuration, setPlayDuration] = useState(0);
   const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
@@ -48,14 +54,15 @@ export const VideoModel: React.FC<PropInterface> = ({
       autoplay: false,
       video: {
         url: playUrl,
+        pic: systemConfig.playerPoster,
       },
       try: isTrySee === 1,
       bulletSecret: {
-        enabled: false,
+        enabled: systemConfig.playerIsEnabledBulletSecret,
-        text: "18119604035",
+        text: systemConfig.playerBulletSecretText,
         size: "15px",
-        color: "red",
+        color: systemConfig.playerBulletSecretColor || "red",
-        opacity: 0.8,
+        opacity: Number(systemConfig.playerBulletSecretOpacity),
       },
       ban_drag: false,
       last_see_pos: 0,
@@ -66,8 +73,9 @@ export const VideoModel: React.FC<PropInterface> = ({
       playTimeUpdate(parseInt(window.player.video.currentTime), false);
     });
     window.player.on("ended", () => {
+      setPlayendedStatus(true);
       playTimeUpdate(parseInt(window.player.video.currentTime), true);
-      window.player.destroy();
+      window.player && window.player.destroy();
     });
   };
 
@@ -101,6 +109,25 @@ export const VideoModel: React.FC<PropInterface> = ({
             <div className={styles["video-title"]}>{title}</div>
             <div className={styles["video-box"]}>
               <div className="play-box" id="meedu-player-container"></div>
+              {playendedStatus && (
+                <div className={styles["alert-message"]}>
+                  {isLastpage && (
+                    <div className={styles["alert-button"]}>
+                      恭喜你学完最后一节
+                    </div>
+                  )}
+                  {!isLastpage && (
+                    <div
+                      className={styles["alert-button"]}
+                      onClick={() => {
+                        setPlayendedStatus(false);
+                        goNextVideo()}}
+                    >
+                      播放下一节
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>

src/pages/course/index.tsx

@@ -15,6 +15,7 @@ const CoursePage = () => {
   const [hours, setHours] = useState<any>({});
   const [learnRecord, setLearnRecord] = useState<any>({});
   const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+  const [totalHours, setTotalHours] = useState<any>([]);
 
   useEffect(() => {
     getDetail();
@@ -32,6 +33,15 @@ const CoursePage = () => {
       if (res.data.learn_hour_records) {
         setLearnHourRecord(res.data.learn_hour_records);
       }
+      if (res.data.chapters.length === 0) {
+        setTotalHours(res.data.hours[0]);
+      } else if (res.data.chapters.length > 0) {
+        const arr: any = [];
+        chapters.map((item: any) => {
+          arr.concat(res.data.hours[item.id]);
+        });
+        setTotalHours(arr);
+      }
       setLoading(false);
     });
   };
@@ -116,7 +126,7 @@ const CoursePage = () => {
         {chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}
         {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
           <div className={styles["hours-list-box"]}>
-            {hours[0].map((item: any) => (
+            {hours[0].map((item: any, index: number) => (
               <div key={item.id} className={styles["hours-it"]}>
                 {learnHourRecord[item.id] && (
                   <HourCompenent
@@ -129,6 +139,7 @@ const CoursePage = () => {
                       (learnHourRecord[item.id].finished_duration * 100) /
                       learnHourRecord[item.id].total_duration
                     }
+                    totalHours={totalHours}
                     onChange={() => getDetail()}
                   ></HourCompenent>
                 )}
@@ -140,6 +151,7 @@ const CoursePage = () => {
                     record={null}
                     duration={item.duration}
                     progress={0}
+                    totalHours={totalHours}
                     onChange={() => getDetail()}
                   ></HourCompenent>
                 )}
@@ -149,10 +161,10 @@ const CoursePage = () => {
         )}
         {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
           <div className={styles["hours-list-box"]}>
-            {chapters.map((item: any) => (
+            {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) => (
+                {hours[item.id].map((it: any, int: number) => (
                   <div key={it.id} className={styles["hours-it"]}>
                     {learnHourRecord[it.id] && (
                       <HourCompenent
@@ -166,6 +178,7 @@ const CoursePage = () => {
                           learnHourRecord[it.id].total_duration
                         }
                         onChange={() => getDetail()}
+                        totalHours={totalHours}
                       ></HourCompenent>
                     )}
                     {!learnHourRecord[it.id] && (
@@ -176,6 +189,7 @@ const CoursePage = () => {
                         record={null}
                         duration={it.duration}
                         progress={0}
+                        totalHours={totalHours}
                         onChange={() => getDetail()}
                       ></HourCompenent>
                     )}