视频弹窗答题

src/components/topic/single.module.scss

@@ -1,4 +1,5 @@
-.single-cover {
+
+.singleCover {
   position: absolute;
   bottom: 0;
   top: 0;
@@ -28,10 +29,12 @@
 }
 
 
-.correct{
-
+.correct {
+  background: #bdf6c1 !important;
+  color: #fff !important;
 }
 
-.mistake{
-
+.mistake {
+  background: #e7abab !important;
+  color: #fff !important;
 }

src/components/topic/single.tsx

@@ -12,8 +12,6 @@ interface Props {
 type AnswerType = "true" | 'false'
 
 export const Single: FC<Props> = (props) => {
-  if (!props.topic) return (<></>)
-
   let timer: NodeJS.Timeout
   const [lastState, setLastState] = useState<0 | 1>(0) // 0为竖屏，1为横屏
   const [result, setResult] = useState<AnswerType | undefined>(undefined)
@@ -58,18 +56,19 @@ export const Single: FC<Props> = (props) => {
   })
 
   useEffect(() => {
-    // timer = setTimeout(() => {
-    //   props.examination(false)
-    // }, 4000)
+    timer = setTimeout(() => {
+      props.examination(false)
+    }, 4000)
   }, [props.topic])
 
   const style: React.CSSProperties = useMemo(() => ({
-    transform: lastState === 0 && props.full ? "rotate(-90deg)" : 'none'
-  }), [lastState])
+    transform: lastState === 1 && props.full ? "rotate(90deg)" : 'none'
+  }), [lastState, props.full])
 
-  function examination(result: AnswerType) {
+  function examination(answer: AnswerType) {
+    if (result) return;
     clearTimeout(timer)
-    setResult(result)
+    setResult(answer)
 
     setTimeout(() => {
       props.examination(props.topic?.right_value === result)
@@ -78,24 +77,29 @@ export const Single: FC<Props> = (props) => {
   }
 
   function judgment(answer: AnswerType): string {
-    if (props.topic?.right_value === answer && result === answer) {
+    if (result !== answer) return ''
+    if (props.topic?.right_answer === answer && result === answer) {
       return styles.correct
     }
     return styles.mistake
   }
 
   return (
-    <View className={styles.singleCover} style={style}>
-      <View>{props.topic.question}</View>
-      <View className={judgment("true")}
-            onClick={() => examination("true")}>
-        {props.topic.right_value}
-      </View>
-      <View className={judgment("false")}
-            onClick={() => examination("false")}>
-        {props.topic.error_value}
-      </View>
-    </View>
+    <>
+      {
+        props.topic && <View className={styles.singleCover} style={style}>
+          <View>{props.topic.question}</View>
+          <View className={judgment("true")}
+                onClick={() => examination("true")}>
+            {props.topic.right_value}
+          </View>
+          <View className={judgment("false")}
+                onClick={() => examination("false")}>
+            {props.topic.error_value}
+          </View>
+        </View>
+      }
+    </>
   )
 }
 

src/components/video/video.tsx

@@ -49,13 +49,6 @@ const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => {
     })
   }
 
-  // opt.setTime((time?: number) => {
-  //   if (typeof time === 'number') {
-  //     video?.seek(time)
-  //   }
-  //   video?.play()
-  // })
-
   function onEnded() {
     if (currentTime + 1 > opt.duration) {
       opt.onEnded()

src/pages/business/videoInfo/components/course.tsx

@@ -1,4 +1,4 @@
-import {FC, useEffect, useState} from "react";
+import {FC, useCallback, useEffect, useState} from "react";
 import HVideo from "@/components/video/video";
 import {curriculum, HourPlayData} from "@/api";
 import {Profile} from '@/store'
@@ -13,11 +13,9 @@ interface Props {
   curEnd: (test?: boolean) => void
 }
 
-
 const Course: FC<Props> = ({id, courseId, preview, curEnd}) => {
   const [breakpoints, setBreakpoints] = useState<number[]>([])                // 断点
   const [isFull, setIsFull] = useState(false)
-
   const [examAll, setExamAll] = useState<Record<number, ShareSubject[]>>([])  // 题库
   const [data, setData] = useState<HourPlayData | null>(null)
   const [time, setTime] = useState<number>(0) // 进入断点的时间
@@ -67,7 +65,8 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}) => {
     getData()
   }, [id])
 
-  function examination(result: boolean) {
+  const examination = useCallback((result: boolean) => {
+    if (!time) return
     const {id: question_id, question_type} = examAll?.[time]?.[0]
     curriculum.answerRecord(id, {
       is_pass: result,
@@ -77,8 +76,7 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}) => {
       question_id
     })
     setTime(0)
-  }
-
+  }, [time])
 
   return (
     <>
@@ -88,9 +86,10 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}) => {
         src={data?.url || ''}
         onEnded={onEnded}
         breakpoint={breakpoints}
-        onBreakpoint={(time) => setTime(time)}
         fullChange={(fullScreen) => setIsFull(fullScreen)}
-      >
+        onBreakpoint={(now) => {
+          time !== now && setTime(now)
+        }}>
         <Single
           full={isFull}
           examination={examination}

src/pages/business/videoInfo/videoInfo.scss

@@ -106,4 +106,3 @@
   filter: saturate(0);
 }
 
-