add callback handle

master
lgf 3 years ago
parent e4472c7f9f
commit 38f9458ff3
  1. 51
      src/appComponent.tsx
  2. 15
      src/core/controller/index.tsx
  3. 6
      src/core/controls/index.tsx
  4. 62
      src/core/index.tsx
  5. 37
      src/core/useVideo.ts
  6. 35
      src/core/useVideoCallback.ts

@ -5,37 +5,32 @@ import '@/icons/';
const AppComponent = memo(function AppComponent(props) {
const videoRef = useRef<HTMLVideoElement>(null!);
const { clientX } = useWindowClient();
const xx = useRef<any>();
const { isPlay, handleChangePlayState, currentTime } = useVideo(
{
videoElement:
videoRef.current &&
(videoRef.current as HTMLVideoElement & { video: HTMLVideoElement }).video,
// onPause: (val: any) => {
// console.log(val, xx.current);
// },
// onPlay: (val: any) => {
// console.log(val, xx.current);
// },
// onTimeChange: (val: any) => {
// console.log(val);
// },
// onEndEd: (val: any) => {
// console.log('结束', val);
// },
onProgressSlide: (val: any) => {
console.log(`童东风`, val);
},
},
[videoRef.current],
);
const onProgressSlide = (val: any) => {
console.log(`val`, val);
};
const onPlay = (val: any) => {
console.log(`播放`, val);
};
const onPause = (val: any) => {
console.log(`暂停`, val);
};
const onTimeChange = (val: any) => {
console.log(`onTimeChange`, val);
};
const onEndEd = (val: any) => {
console.log(`onEndEd`, val);
};
return (
<>
{isPlay ? '播放' : '暂停'}
<JoLPlayer ref={videoRef} />
<JoLPlayer
ref={videoRef}
onProgressSlide={onProgressSlide}
onPlay={onPlay}
onPause={onPause}
onTimeChange={onTimeChange}
onEndEd={onEndEd}
/>
{/* <JoLPlayer /> */}
</>
);

@ -18,21 +18,6 @@ const Index = memo(function Index(props) {
const { isPlay, handleChangePlayState, currentTime } = useVideo(
{
videoElement: reviceProps.videoRef,
// onPause: (val: any) => {
// console.log(val);
// },
// onPlay: (val: any) => {
// console.log(val);
// },
// onTimeChange: (val: any) => {
// console.log(val);
// },
// onEndEd: (val: any) => {
// console.log('结束', val);
// },
// onProgressSlide: (val: any) => {
// console.log(`童东风`, val);
// },
},
[reviceProps.videoRef],
);

@ -33,12 +33,6 @@ const Index = memo(function Index(props) {
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
{
videoElement: reviceProps.videoRef,
// onPause: (val: any) => {
// console.log(val);
// },
// onPlay: (val: any) => {
// console.log(val);
// },
},
[reviceProps.videoRef],
);

@ -12,6 +12,7 @@ import { FlowContext, useVideoFlow } from '@/core/context';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import Broadcast from '@/components/svgIcon';
import { useVideo } from '@/core/useVideo';
import useVideoCallback from '@/core/useVideoCallback';
// import videoUrl from '@/assets/haiwang.mp4';
import '@/assets/css/reset.scss';
import './index.scss';
@ -19,8 +20,18 @@ import './index.scss';
const JoLPlayer = function JoLPlayer(
{
videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
onProgressSlide,
onPlay,
onPause,
onTimeChange,
onEndEd,
}: {
videoSrc?: string;
onPause?: Function;
onPlay?: Function;
onTimeChange?: Function;
onEndEd?: Function;
onProgressSlide?: Function;
},
ref: React.Ref<unknown> | undefined,
) {
@ -65,20 +76,27 @@ const JoLPlayer = function JoLPlayer(
video: videoRef.current,
}));
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture, isEndEd } =
useVideo(
{
videoElement: videoRef.current,
// onPause: (val: any) => {
// console.log(val);
// },
// onPlay: (val: any) => {
// console.log(val);
// },
},
[videoRef.current],
);
const callBack = useVideoCallback({ isPlay, currentTime, isEndEd }, videoFlow, {
onProgressSlide,
onPlay,
onPause,
onTimeChange,
onEndEd,
});
useEffect(() => {
/**
* @description dom层
*/
forceUpdate();
/**
* @description
*/
@ -97,10 +115,6 @@ const JoLPlayer = function JoLPlayer(
videoElem.addEventListener('waiting', waitingListener);
// 当开始播放时更改waiting状态
videoElem.addEventListener('playing', playingListener);
/**
* @description dom层
*/
forceUpdate();
return () => {
timerToCheckVideoUseful.current && clearTimeout(timerToCheckVideoUseful.current);
videoElem.removeEventListener('waiting', waitingListener);
@ -118,6 +132,32 @@ const JoLPlayer = function JoLPlayer(
);
}, [videoSrc]);
// useEffect(() => {
// if (videoFlow.progressSliderChangeVal) {
// onProgressSlide && onProgressSlide(videoFlow.progressSliderChangeVal);
// }
// }, [videoFlow.progressSliderChangeVal]);
// useEffect(() => {
// if (isPlay) {
// onPlay && onPlay(isPlay);
// } else {
// onPause && onPause(isPlay);
// }
// }, [isPlay]);
// useEffect(() => {
// if (currentTime) {
// onTimeChange && onTimeChange(currentTime);
// }
// }, [currentTime]);
// useEffect(() => {
// if (isEndEd) {
// onEndEd && onEndEd(isEndEd);
// }
// }, [isEndEd]);
const contextProps = useMemo(() => {
return Object.assign(
{},

@ -1,19 +1,11 @@
import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallback } from 'react';
import { useRef, useMemo, useEffect, DependencyList } from 'react';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import { FlowContext } from '@/core/context';
import useWindowClient from '@/utils/useWindowClient';
export const useVideo = (props: any, dep: any[] = []) => {
const { clientX } = useWindowClient();
const { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide } = props;
export const useVideo = (props: any, dep: DependencyList = []) => {
const { videoElement } = props;
const forceUpdate = useMandatoryUpdate();
const reviceProps = useContext(FlowContext);
const { videoRef: videoEle, dispatch, videoFlow } = reviceProps;
const videoParameter = useRef<any>({
isPlay: false,
currentTime: 0,
@ -22,6 +14,7 @@ export const useVideo = (props: any, dep: any[] = []) => {
isPictureinpicture: false,
volume: 0,
multiple: 1.0,
isEndEd: false,
});
const videoRef = useRef<HTMLVideoElement>(null!);
@ -67,12 +60,13 @@ export const useVideo = (props: any, dep: any[] = []) => {
/**
*
*/
// forceUpdate();
forceUpdate();
torture({
currentTime: videoRef.current.currentTime,
isPlay: videoRef.current.paused ? false : true,
volume: videoRef.current.volume,
multiple: videoRef.current.playbackRate,
isEndEd: videoRef.current.ended ? true : false,
});
}, 1);
videoRef.current.addEventListener('pause', pauseChange);
@ -85,37 +79,20 @@ export const useVideo = (props: any, dep: any[] = []) => {
};
}, dep);
const ProgressSlideChange = useCallback(
(onProgressSlide: any) => {
console.log(`onProgressSlide`, onProgressSlide, videoFlow.progressSliderChangeVal);
onProgressSlide && onProgressSlide(videoParameter.current);
},
[videoFlow.progressSliderChangeVal],
);
useEffect(() => {
if (videoFlow.progressSliderChangeVal) {
ProgressSlideChange(onProgressSlide);
}
}, [ProgressSlideChange, onProgressSlide]);
const torture = (val: any) => {
videoParameter.current = { ...videoParameter.current, ...val };
};
const pauseChange = () => {
torture({ isPlay: videoRef.current.paused ? false : true });
onPause && onPause(videoParameter.current);
};
const playChange = () => {
torture({ isPlay: videoRef.current.paused ? false : true });
onPlay && onPlay(videoParameter.current);
};
const timeupdate = () => {
torture({ isPlay: videoRef.current.paused ? false : true });
onTimeChange && onTimeChange(videoParameter.current);
};
const endedChange = () => {
onEndEd && onEndEd(videoParameter.current);
torture({ isEndEd: videoRef.current.ended ? true : false });
};
const handleChangePlayState = () => {
if (videoParameter.current.isPlay) {

@ -0,0 +1,35 @@
import { useEffect } from 'react';
const useVideoCallback = (videoPr: any, videoFlow: any, handle: any) => {
const { isPlay, currentTime, isEndEd } = videoPr;
const { progressSliderChangeVal } = videoFlow;
const { onProgressSlide, onPlay, onPause, onTimeChange, onEndEd } = handle;
useEffect(() => {
if (videoFlow.progressSliderChangeVal) {
onProgressSlide && onProgressSlide(progressSliderChangeVal);
}
}, [progressSliderChangeVal]);
useEffect(() => {
if (isPlay) {
onPlay && onPlay(isPlay);
} else {
onPause && onPause(isPlay);
}
}, [isPlay]);
useEffect(() => {
if (currentTime) {
onTimeChange && onTimeChange(currentTime);
}
}, [currentTime]);
useEffect(() => {
if (isEndEd) {
onEndEd && onEndEd(isEndEd);
}
}, [isEndEd]);
};
export default useVideoCallback;
Loading…
Cancel
Save