From 74b806b13d19cdce43df8b0511560dabd046cb57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Tue, 4 Jul 2023 15:00:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=AF=A6=E6=83=85=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/course/compenents/hour.tsx      |  19 +++-
 src/pages/course/compenents/videoHour.tsx |  16 ++-
 src/pages/course/index.tsx                |  77 ++++---------
 src/pages/course/video.tsx                | 129 ++++++++--------------
 4 files changed, 91 insertions(+), 150 deletions(-)

diff --git a/src/pages/course/compenents/hour.tsx b/src/pages/course/compenents/hour.tsx
index 823e593..cf6c89e 100644
--- a/src/pages/course/compenents/hour.tsx
+++ b/src/pages/course/compenents/hour.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./hour.module.scss";
 import { durationFormat } from "../../../utils/index";
 
@@ -8,7 +8,6 @@ interface PropInterface {
   title: string;
   duration: number;
   record: any;
-  progress: number;
   onSuccess: (cid: number, id: number) => void;
 }
 
@@ -18,9 +17,17 @@ export const HourCompenent: React.FC<PropInterface> = ({
   title,
   duration,
   record,
-  progress,
   onSuccess,
 }) => {
+  const [userProgress, setUserProgress] = useState(0);
+  useEffect(() => {
+    if (record?.finished_duration && record?.total_duration) {
+      setUserProgress((record.finished_duration * 100) / record.total_duration);
+    } else {
+      setUserProgress(0);
+    }
+  }, [record]);
+
   return (
     <>
       <div
@@ -34,7 +41,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
             <i className="iconfont icon-icon-video"></i>
             <span className={styles["label"]}>视频</span>
           </div>
-          {progress > 0 && progress < 100 && (
+          {userProgress > 0 && userProgress < 100 && (
             <div className={styles["studying"]}>
               <span>
                 学习到
@@ -42,14 +49,14 @@ export const HourCompenent: React.FC<PropInterface> = ({
               </span>
             </div>
           )}
-          {progress >= 100 && (
+          {userProgress >= 100 && (
             <div className={styles["complete"]}>
               <span>已学完</span>{" "}
             </div>
           )}
         </div>
         <div className={styles["title"]}>
-          {title}{" "}({durationFormat(Number(duration))})
+          {title} ({durationFormat(Number(duration))})
         </div>
       </div>
     </>
diff --git a/src/pages/course/compenents/videoHour.tsx b/src/pages/course/compenents/videoHour.tsx
index 0855dc1..3fa208c 100644
--- a/src/pages/course/compenents/videoHour.tsx
+++ b/src/pages/course/compenents/videoHour.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./hour.module.scss";
 import { durationFormat } from "../../../utils/index";
 
@@ -9,7 +9,6 @@ interface PropInterface {
   title: string;
   duration: number;
   record: any;
-  progress: number;
   onSuccess: (cid: number, id: number) => void;
 }
 
@@ -20,9 +19,16 @@ export const HourCompenent: React.FC<PropInterface> = ({
   title,
   duration,
   record,
-  progress,
   onSuccess,
 }) => {
+  const [userProgress, setUserProgress] = useState(0);
+  useEffect(() => {
+    if (record?.finished_duration && record?.total_duration) {
+      setUserProgress((record.finished_duration * 100) / record.total_duration);
+    } else {
+      setUserProgress(0);
+    }
+  }, [record]);
   return (
     <>
       <div
@@ -41,7 +47,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
               <span>学习中</span>
             </div>
           )}
-          {vid !== id && progress > 0 && progress < 100 && (
+          {vid !== id && userProgress > 0 && userProgress < 100 && (
             <div className={styles["studying"]}>
               <span>
                 学习到
@@ -49,7 +55,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
               </span>
             </div>
           )}
-          {vid !== id && progress >= 100 && (
+          {vid !== id && userProgress >= 100 && (
             <div className={styles["complete"]}>
               <span>已学完</span>{" "}
             </div>
diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx
index 3d1fb4c..4df38e7 100644
--- a/src/pages/course/index.tsx
+++ b/src/pages/course/index.tsx
@@ -128,34 +128,16 @@ const CoursePage = () => {
             <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
               {hours[0].map((item: CourseHourModel) => (
                 <div key={item.id} className={styles["hours-it"]}>
-                  {learnHourRecord[item.id] ? (
-                    <HourCompenent
-                      id={item.id}
-                      cid={item.course_id}
-                      title={item.title}
-                      record={learnHourRecord[item.id]}
-                      duration={item.duration}
-                      progress={
-                        (learnHourRecord[item.id].finished_duration * 100) /
-                        learnHourRecord[item.id].total_duration
-                      }
-                      onSuccess={(cid: number, id: number) => {
-                        playVideo(cid, id);
-                      }}
-                    ></HourCompenent>
-                  ) : (
-                    <HourCompenent
-                      id={item.id}
-                      cid={item.course_id}
-                      title={item.title}
-                      record={null}
-                      duration={item.duration}
-                      progress={0}
-                      onSuccess={(cid: number, id: number) => {
-                        playVideo(cid, id);
-                      }}
-                    ></HourCompenent>
-                  )}
+                  <HourCompenent
+                    id={item.id}
+                    cid={item.course_id}
+                    title={item.title}
+                    record={learnHourRecord[item.id]}
+                    duration={item.duration}
+                    onSuccess={(cid: number, id: number) => {
+                      playVideo(cid, id);
+                    }}
+                  ></HourCompenent>
                 </div>
               ))}
             </div>
@@ -168,35 +150,16 @@ const CoursePage = () => {
                   <div className={styles["chapter-name"]}>{item.name}</div>
                   {hours[item.id]?.map((it: CourseHourModel) => (
                     <div key={it.id} className={styles["hours-it"]}>
-                      {learnHourRecord[it.id] && (
-                        <HourCompenent
-                          id={it.id}
-                          cid={item.course_id}
-                          title={it.title}
-                          record={learnHourRecord[it.id]}
-                          duration={it.duration}
-                          progress={
-                            (learnHourRecord[it.id].finished_duration * 100) /
-                            learnHourRecord[it.id].total_duration
-                          }
-                          onSuccess={(cid: number, id: number) => {
-                            playVideo(cid, id);
-                          }}
-                        ></HourCompenent>
-                      )}
-                      {!learnHourRecord[it.id] && (
-                        <HourCompenent
-                          id={it.id}
-                          cid={item.course_id}
-                          title={it.title}
-                          record={null}
-                          duration={it.duration}
-                          progress={0}
-                          onSuccess={(cid: number, id: number) => {
-                            playVideo(cid, id);
-                          }}
-                        ></HourCompenent>
-                      )}
+                      <HourCompenent
+                        id={it.id}
+                        cid={item.course_id}
+                        title={it.title}
+                        record={learnHourRecord[it.id]}
+                        duration={it.duration}
+                        onSuccess={(cid: number, id: number) => {
+                          playVideo(cid, id);
+                        }}
+                      ></HourCompenent>
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/course/video.tsx b/src/pages/course/video.tsx
index 8e452d1..a9defbc 100644
--- a/src/pages/course/video.tsx
+++ b/src/pages/course/video.tsx
@@ -10,6 +10,14 @@ import { HourCompenent } from "./compenents/videoHour";
 
 declare const window: any;
 
+type LocalUserLearnHourRecordModel = {
+  [key: number]: UserLearnHourRecordModel;
+};
+
+type LocalCourseHour = {
+  [key: number]: CourseHourModel[];
+};
+
 const CoursePlayPage = () => {
   const navigate = useNavigate();
   const params = useParams();
@@ -19,17 +27,17 @@ const CoursePlayPage = () => {
   const [playDuration, setPlayDuration] = useState(0);
   const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
   const [lastSeeValue, setLastSeeValue] = useState({});
-  const [course, setCourse] = useState<any>({});
+  const [course, setCourse] = useState<CourseModel | null>(null);
   const [hour, setHour] = useState<any>({});
   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 [chapters, setChapters] = useState<any>([]);
-  const [hours, setHours] = useState<any>({});
-  const [learnRecord, setLearnRecord] = useState<any>({});
-  const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+  const [chapters, setChapters] = useState<ChapterModel[]>([]);
+  const [hours, setHours] = useState<LocalCourseHour | null>(null);
+  const [learnHourRecord, setLearnHourRecord] =
+    useState<LocalUserLearnHourRecordModel>({});
   const myRef = useRef(0);
   const playRef = useRef(0);
   const watchRef = useRef(0);
@@ -61,9 +69,6 @@ const CoursePlayPage = () => {
     Course.detail(Number(params.courseId)).then((res: any) => {
       setChapters(res.data.chapters);
       setHours(res.data.hours);
-      if (res.data.learn_record) {
-        setLearnRecord(res.data.learn_record);
-      }
       if (res.data.learn_hour_records) {
         setLearnHourRecord(res.data.learn_hour_records);
       }
@@ -97,7 +102,8 @@ const CoursePlayPage = () => {
     setLoading(true);
     Course.play(Number(params.courseId), Number(params.hourId))
       .then((res: any) => {
-        setCourse(res.data.course);
+        let courseItem: CourseModel = res.data.course;
+        setCourse(courseItem);
         setHour(res.data.hour);
         document.title = res.data.hour.title;
         let record = res.data.user_hour_record;
@@ -276,87 +282,46 @@ const CoursePlayPage = () => {
         </div>
       </div>
       <div className={styles["chapters-hours-cont"]}>
-        {chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}{" "}
-        {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
-          <div className={styles["hours-list-box"]}>
-            {hours[0].map((item: any, index: number) => (
+        {chapters.length === 0 && !hours && <Empty />}
+        {chapters.length === 0 && hours && (
+          <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
+            {hours[0].map((item: CourseHourModel) => (
               <div key={item.id} className={styles["hours-it"]}>
-                {learnHourRecord[item.id] && (
-                  <HourCompenent
-                    id={item.id}
-                    cid={item.course_id}
-                    title={item.title}
-                    record={learnHourRecord[item.id]}
-                    duration={item.duration}
-                    vid={Number(params.hourId)}
-                    progress={
-                      (learnHourRecord[item.id].finished_duration * 100) /
-                      learnHourRecord[item.id].total_duration
-                    }
-                    onSuccess={(cid: number, id: number) => {
-                      playVideo(cid, id);
-                    }}
-                  ></HourCompenent>
-                )}
-                {!learnHourRecord[item.id] && (
-                  <HourCompenent
-                    id={item.id}
-                    cid={item.course_id}
-                    title={item.title}
-                    record={null}
-                    duration={item.duration}
-                    vid={Number(params.hourId)}
-                    progress={0}
-                    onSuccess={(cid: number, id: number) => {
-                      playVideo(cid, id);
-                    }}
-                  ></HourCompenent>
-                )}
+                <HourCompenent
+                  id={item.id}
+                  cid={item.course_id}
+                  title={item.title}
+                  record={learnHourRecord[item.id]}
+                  duration={item.duration}
+                  vid={Number(params.hourId)}
+                  onSuccess={(cid: number, id: number) => {
+                    playVideo(cid, id);
+                  }}
+                ></HourCompenent>
               </div>
             ))}
           </div>
         )}
-        {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
+        {chapters.length > 0 && hours && (
           <div className={styles["hours-list-box"]}>
-            {chapters.map((item: any, index: number) => (
+            {chapters.map((item: ChapterModel) => (
               <div key={item.id} className={styles["chapter-it"]}>
                 <div className={styles["chapter-name"]}>{item.name}</div>
-                {hours[item.id] &&
-                  hours[item.id].map((it: any, int: number) => (
-                    <div key={it.id} className={styles["hours-it"]}>
-                      {learnHourRecord[it.id] && (
-                        <HourCompenent
-                          id={it.id}
-                          cid={item.course_id}
-                          title={it.title}
-                          record={learnHourRecord[it.id]}
-                          duration={it.duration}
-                          vid={Number(params.hourId)}
-                          progress={
-                            (learnHourRecord[it.id].finished_duration * 100) /
-                            learnHourRecord[it.id].total_duration
-                          }
-                          onSuccess={(cid: number, id: number) => {
-                            playVideo(cid, id);
-                          }}
-                        ></HourCompenent>
-                      )}
-                      {!learnHourRecord[it.id] && (
-                        <HourCompenent
-                          id={it.id}
-                          cid={item.course_id}
-                          title={it.title}
-                          record={null}
-                          duration={it.duration}
-                          vid={Number(params.hourId)}
-                          progress={0}
-                          onSuccess={(cid: number, id: number) => {
-                            playVideo(cid, id);
-                          }}
-                        ></HourCompenent>
-                      )}
-                    </div>
-                  ))}
+                {hours[item.id]?.map((it: CourseHourModel) => (
+                  <div key={it.id} className={styles["hours-it"]}>
+                    <HourCompenent
+                      id={it.id}
+                      cid={item.course_id}
+                      title={it.title}
+                      record={learnHourRecord[it.id]}
+                      duration={it.duration}
+                      vid={Number(params.hourId)}
+                      onSuccess={(cid: number, id: number) => {
+                        playVideo(cid, id);
+                      }}
+                    ></HourCompenent>
+                  </div>
+                ))}
               </div>
             ))}
           </div>