视频播放以及播放记录上传优化

src/pages/course/compenents/hour.tsx

@@ -11,6 +11,7 @@ interface PropInterface {
   duration: number;
   record: any;
   progress: number;
+  onChange: () => void;
 }
 
 export const HourCompenent: React.FC<PropInterface> = ({
@@ -20,6 +21,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
   duration,
   record,
   progress,
+  onChange,
 }) => {
   // const navigate = useNavigate();
   const [visible, setVisible] = useState<boolean>(false);
@@ -30,7 +32,10 @@ export const HourCompenent: React.FC<PropInterface> = ({
         id={id}
         title={title}
         open={visible}
-        onCancel={() => setVisible(false)}
+        onCancel={() => {
+          setVisible(false);
+          onChange();
+        }}
       ></VideoModel>
       <div className={styles["left-item"]}>
         <i className="iconfont icon-icon-video"></i>
@@ -54,7 +59,8 @@ export const HourCompenent: React.FC<PropInterface> = ({
             {progress !== 0 && (
               <>
                 <div className={styles["record"]}>
-                  上次学习到{durationFormat(Number(record.duration || 0))}
+                  上次学习到
+                  {durationFormat(Number(record.finished_duration || 0))}
                 </div>
                 <div
                   className={styles["link"]}

src/pages/course/index.tsx

@@ -70,15 +70,42 @@ const CoursePage = () => {
               </div>
             </div>
           </div>
-          <Progress
+          {JSON.stringify(learnRecord) === "{}" &&
-            type="circle"
+            JSON.stringify(learnHourRecord) === "{}" && (
-            strokeColor="#FF4D4F"
+              <Progress
-            trailColor="#F6F6F6"
+                type="circle"
-            size={90}
+                strokeColor="#FF4D4F"
-            strokeWidth={8}
+                trailColor="#F6F6F6"
-            percent={learnRecord.progress}
+                size={90}
-            format={(percent) => `${percent}%`}
+                strokeWidth={8}
-          />
+                percent={0}
+                format={(percent) => `${percent}%`}
+              />
+            )}
+          {JSON.stringify(learnRecord) === "{}" &&
+            JSON.stringify(learnHourRecord) !== "{}" && (
+              <Progress
+                type="circle"
+                strokeColor="#FF4D4F"
+                trailColor="#F6F6F6"
+                size={90}
+                strokeWidth={8}
+                percent={1}
+                format={(percent) => `${percent}%`}
+              />
+            )}
+          {JSON.stringify(learnRecord) !== "{}" &&
+            JSON.stringify(learnHourRecord) !== "{}" && (
+              <Progress
+                type="circle"
+                strokeColor="#FF4D4F"
+                trailColor="#F6F6F6"
+                size={90}
+                strokeWidth={8}
+                percent={learnRecord.progress}
+                format={(percent) => `${percent}%`}
+              />
+            )}
         </div>
         {course.short_desc && (
           <div className={styles["desc"]}>{course.short_desc}</div>
@@ -99,7 +126,11 @@ const CoursePage = () => {
                     title={item.title}
                     record={learnHourRecord[item.id]}
                     duration={item.duration}
-                    progress={learnHourRecord[item.id].progress}
+                    progress={
+                      (learnHourRecord[item.id].finished_duration * 100) /
+                      learnHourRecord[item.id].total_duration
+                    }
+                    onChange={() => getDetail()}
                   ></HourCompenent>
                 )}
                 {!learnHourRecord[item.id] && (
@@ -110,6 +141,7 @@ const CoursePage = () => {
                     record={null}
                     duration={item.duration}
                     progress={0}
+                    onChange={() => getDetail()}
                   ></HourCompenent>
                 )}
               </div>