From 13b04e021227b0b3114ec4ab28c7a4c6224b425e Mon Sep 17 00:00:00 2001
From: lgf <18827634408@163.com>
Date: Fri, 6 Aug 2021 18:10:39 +0800
Subject: [PATCH] Fix bug

---
 src/appComponent.tsx          | 10 ++++++----
 src/core/context/index.ts     | 17 ++++++++++++++++-
 src/core/controller/index.tsx |  3 +++
 src/core/progress/index.tsx   |  1 +
 src/core/useVideo.ts          | 18 ++++++++++++++++--
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/appComponent.tsx b/src/appComponent.tsx
index f27f088..e2a7e2b 100644
--- a/src/appComponent.tsx
+++ b/src/appComponent.tsx
@@ -5,7 +5,6 @@ import '@/icons/';
 const AppComponent = memo(function AppComponent(props) {
   const videoRef = useRef<HTMLVideoElement>(null!);
   const xx = useRef(false);
-  useEffect(() => {}, [videoRef.current]);
   const { isPlay, handleChangePlayState, currentTime } = useVideo({
     videoElement:
       videoRef.current &&
@@ -16,12 +15,15 @@ const AppComponent = memo(function AppComponent(props) {
     // onPlay: (val: any) => {
     //   console.log(val, xx.current);
     // },
-    onTimeChange: (val: any) => {
-      console.log(val);
-    },
+    // onTimeChange: (val: any) => {
+    //   console.log(val);
+    // },
     // onEndEd: (val: any) => {
     //   console.log('结束', val);
     // },
+    onProgressSlide(val: any) {
+      console.log(`童东风`, val);
+    },
   });
 
   return (
diff --git a/src/core/context/index.ts b/src/core/context/index.ts
index 412ac09..4a110ff 100644
--- a/src/core/context/index.ts
+++ b/src/core/context/index.ts
@@ -13,6 +13,10 @@ export interface VideoStateType<K = boolean, T = number> {
    * @description 是否播放
    */
   isPlay: K;
+  /**
+   * @description onProgressSlider事件的变化数据，用来区分是onProgressSlider事件触发的
+   */
+  progressSliderChangeVal: T;
 }
 /**
  * @description 永不变的数据
@@ -31,6 +35,7 @@ export const initialState = {
   isControl: false,
   currentTime: 0,
   isPlay: false,
+  progressSliderChangeVal: 0,
 };
 
 export const defaultValue = {
@@ -53,7 +58,15 @@ export interface isPlayActionType {
   type: 'isPlay';
   data: VideoStateType['isPlay'];
 }
-export type mergeAction = isControlActionType | currentTimeActionType | isPlayActionType;
+export interface progressSliderChangeValActionType {
+  type: 'progressSliderChangeVal';
+  data: VideoStateType['progressSliderChangeVal'];
+}
+export type mergeAction =
+  | isControlActionType
+  | currentTimeActionType
+  | isPlayActionType
+  | progressSliderChangeValActionType;
 
 export const useVideoFlow = () => {
   const reducer = (state: VideoStateType, action: mergeAction) => {
@@ -64,6 +77,8 @@ export const useVideoFlow = () => {
         return { ...state, currentTime: action.data };
       case 'isPlay':
         return { ...state, isPlay: action.data };
+      case 'progressSliderChangeVal':
+        return { ...state, progressSliderChangeVal: action.data };
       default:
         return state;
     }
diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx
index f5517f8..a49284d 100644
--- a/src/core/controller/index.tsx
+++ b/src/core/controller/index.tsx
@@ -29,6 +29,9 @@ const Index = memo(function Index(props) {
     // onEndEd: (val: any) => {
     //   console.log('结束', val);
     // },
+    // onProgressSlide: (val: any) => {
+    //   console.log(`童东风`, val);
+    // },
   });
   const timer = useRef<NodeJS.Timeout | null>(null!);
 
diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx
index 8e9417f..b7d8cdc 100644
--- a/src/core/progress/index.tsx
+++ b/src/core/progress/index.tsx
@@ -128,6 +128,7 @@ const Index = memo(function Index(props) {
       const seekPositionX =
         clientXdistance.current - progressSeekMaskRef.current.getBoundingClientRect().left + 1;
       updateCurrentTime(seekPositionX, progressSeekMaskRefOffsetWidth);
+      reviceProps.dispatch!({ type: 'progressSliderChangeVal', data: Date.now() });
     }, 1);
   };
   /**
diff --git a/src/core/useVideo.ts b/src/core/useVideo.ts
index 78465b7..5dc2699 100644
--- a/src/core/useVideo.ts
+++ b/src/core/useVideo.ts
@@ -3,7 +3,7 @@ import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
 import { FlowContext } from '@/core/context';
 
 export const useVideo = (
-  { videoElement, onPause, onPlay, onTimeChange, onEndEd }: any,
+  { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide }: any,
   dep?: any,
 ) => {
   const forceUpdate = useMandatoryUpdate();
@@ -63,7 +63,6 @@ export const useVideo = (
          * 强制更新
          */
         forceUpdate();
-
         torture({
           currentTime: videoRef.current.currentTime,
           isPlay: videoRef.current.paused ? false : true,
@@ -81,6 +80,20 @@ export const useVideo = (
     };
   }, [videoRef.current, dep, videoElement]);
 
+  const ProgressSlideChange = useCallback(
+    (onProgressSlide: any) => {
+      // console.log(`onProgressSlide`, onProgressSlide);
+      onProgressSlide && onProgressSlide(videoParameter.current);
+    },
+    [videoFlow.progressSliderChangeVal],
+  );
+
+  useEffect(() => {
+    if (videoFlow.progressSliderChangeVal) {
+      ProgressSlideChange(onProgressSlide);
+    }
+  }, [ProgressSlideChange]);
+
   const torture = (val: any) => {
     videoParameter.current = { ...videoParameter.current, ...val };
   };
@@ -106,6 +119,7 @@ export const useVideo = (
       videoRef.current.play();
     }
   };
+
   return useMemo(
     () => ({
       handleChangePlayState,