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. 72
      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 AppComponent = memo(function AppComponent(props) {
const videoRef = useRef<HTMLVideoElement>(null!); 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 ( return (
<> <>
{isPlay ? '播放' : '暂停'} <JoLPlayer
<JoLPlayer ref={videoRef} /> ref={videoRef}
onProgressSlide={onProgressSlide}
onPlay={onPlay}
onPause={onPause}
onTimeChange={onTimeChange}
onEndEd={onEndEd}
/>
{/* <JoLPlayer /> */} {/* <JoLPlayer /> */}
</> </>
); );

@ -18,21 +18,6 @@ const Index = memo(function Index(props) {
const { isPlay, handleChangePlayState, currentTime } = useVideo( const { isPlay, handleChangePlayState, currentTime } = useVideo(
{ {
videoElement: reviceProps.videoRef, 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], [reviceProps.videoRef],
); );

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

@ -12,6 +12,7 @@ import { FlowContext, useVideoFlow } from '@/core/context';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate'; import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import Broadcast from '@/components/svgIcon'; import Broadcast from '@/components/svgIcon';
import { useVideo } from '@/core/useVideo'; import { useVideo } from '@/core/useVideo';
import useVideoCallback from '@/core/useVideoCallback';
// import videoUrl from '@/assets/haiwang.mp4'; // import videoUrl from '@/assets/haiwang.mp4';
import '@/assets/css/reset.scss'; import '@/assets/css/reset.scss';
import './index.scss'; import './index.scss';
@ -19,8 +20,18 @@ import './index.scss';
const JoLPlayer = function JoLPlayer( const JoLPlayer = function JoLPlayer(
{ {
videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4', videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
onProgressSlide,
onPlay,
onPause,
onTimeChange,
onEndEd,
}: { }: {
videoSrc?: string; videoSrc?: string;
onPause?: Function;
onPlay?: Function;
onTimeChange?: Function;
onEndEd?: Function;
onProgressSlide?: Function;
}, },
ref: React.Ref<unknown> | undefined, ref: React.Ref<unknown> | undefined,
) { ) {
@ -65,20 +76,27 @@ const JoLPlayer = function JoLPlayer(
video: videoRef.current, video: videoRef.current,
})); }));
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo( const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture, isEndEd } =
{ useVideo(
videoElement: videoRef.current, {
// onPause: (val: any) => { videoElement: videoRef.current,
// console.log(val); },
// }, [videoRef.current],
// onPlay: (val: any) => { );
// console.log(val);
// }, const callBack = useVideoCallback({ isPlay, currentTime, isEndEd }, videoFlow, {
}, onProgressSlide,
[videoRef.current], onPlay,
); onPause,
onTimeChange,
onEndEd,
});
useEffect(() => { useEffect(() => {
/**
* @description dom层
*/
forceUpdate();
/** /**
* @description * @description
*/ */
@ -97,10 +115,6 @@ const JoLPlayer = function JoLPlayer(
videoElem.addEventListener('waiting', waitingListener); videoElem.addEventListener('waiting', waitingListener);
// 当开始播放时更改waiting状态 // 当开始播放时更改waiting状态
videoElem.addEventListener('playing', playingListener); videoElem.addEventListener('playing', playingListener);
/**
* @description dom层
*/
forceUpdate();
return () => { return () => {
timerToCheckVideoUseful.current && clearTimeout(timerToCheckVideoUseful.current); timerToCheckVideoUseful.current && clearTimeout(timerToCheckVideoUseful.current);
videoElem.removeEventListener('waiting', waitingListener); videoElem.removeEventListener('waiting', waitingListener);
@ -118,6 +132,32 @@ const JoLPlayer = function JoLPlayer(
); );
}, [videoSrc]); }, [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(() => { const contextProps = useMemo(() => {
return Object.assign( 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 useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import { FlowContext } from '@/core/context';
import useWindowClient from '@/utils/useWindowClient';
export const useVideo = (props: any, dep: any[] = []) => { export const useVideo = (props: any, dep: DependencyList = []) => {
const { clientX } = useWindowClient(); const { videoElement } = props;
const { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide } = props;
const forceUpdate = useMandatoryUpdate(); const forceUpdate = useMandatoryUpdate();
const reviceProps = useContext(FlowContext);
const { videoRef: videoEle, dispatch, videoFlow } = reviceProps;
const videoParameter = useRef<any>({ const videoParameter = useRef<any>({
isPlay: false, isPlay: false,
currentTime: 0, currentTime: 0,
@ -22,6 +14,7 @@ export const useVideo = (props: any, dep: any[] = []) => {
isPictureinpicture: false, isPictureinpicture: false,
volume: 0, volume: 0,
multiple: 1.0, multiple: 1.0,
isEndEd: false,
}); });
const videoRef = useRef<HTMLVideoElement>(null!); const videoRef = useRef<HTMLVideoElement>(null!);
@ -67,12 +60,13 @@ export const useVideo = (props: any, dep: any[] = []) => {
/** /**
* *
*/ */
// forceUpdate(); forceUpdate();
torture({ torture({
currentTime: videoRef.current.currentTime, currentTime: videoRef.current.currentTime,
isPlay: videoRef.current.paused ? false : true, isPlay: videoRef.current.paused ? false : true,
volume: videoRef.current.volume, volume: videoRef.current.volume,
multiple: videoRef.current.playbackRate, multiple: videoRef.current.playbackRate,
isEndEd: videoRef.current.ended ? true : false,
}); });
}, 1); }, 1);
videoRef.current.addEventListener('pause', pauseChange); videoRef.current.addEventListener('pause', pauseChange);
@ -85,37 +79,20 @@ export const useVideo = (props: any, dep: any[] = []) => {
}; };
}, dep); }, 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) => { const torture = (val: any) => {
videoParameter.current = { ...videoParameter.current, ...val }; videoParameter.current = { ...videoParameter.current, ...val };
}; };
const pauseChange = () => { const pauseChange = () => {
torture({ isPlay: videoRef.current.paused ? false : true }); torture({ isPlay: videoRef.current.paused ? false : true });
onPause && onPause(videoParameter.current);
}; };
const playChange = () => { const playChange = () => {
torture({ isPlay: videoRef.current.paused ? false : true }); torture({ isPlay: videoRef.current.paused ? false : true });
onPlay && onPlay(videoParameter.current);
}; };
const timeupdate = () => { const timeupdate = () => {
torture({ isPlay: videoRef.current.paused ? false : true }); torture({ isPlay: videoRef.current.paused ? false : true });
onTimeChange && onTimeChange(videoParameter.current);
}; };
const endedChange = () => { const endedChange = () => {
onEndEd && onEndEd(videoParameter.current); torture({ isEndEd: videoRef.current.ended ? true : false });
}; };
const handleChangePlayState = () => { const handleChangePlayState = () => {
if (videoParameter.current.isPlay) { 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