From 38f9458ff3712d97fdd5766452f78061025a8f29 Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Sun, 8 Aug 2021 23:35:37 +0800 Subject: [PATCH] add callback handle --- src/appComponent.tsx | 51 +++++++++++-------------- src/core/controller/index.tsx | 15 -------- src/core/controls/index.tsx | 6 --- src/core/index.tsx | 72 +++++++++++++++++++++++++++-------- src/core/useVideo.ts | 37 ++++-------------- src/core/useVideoCallback.ts | 35 +++++++++++++++++ 6 files changed, 121 insertions(+), 95 deletions(-) create mode 100644 src/core/useVideoCallback.ts diff --git a/src/appComponent.tsx b/src/appComponent.tsx index 6435a8f..808c4f9 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -5,37 +5,32 @@ import '@/icons/'; const AppComponent = memo(function AppComponent(props) { const videoRef = useRef(null!); - const { clientX } = useWindowClient(); - const xx = useRef(); - - 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 ? '播放' : '暂停'} - + {/* */} ); diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx index 3e0a3aa..343383f 100644 --- a/src/core/controller/index.tsx +++ b/src/core/controller/index.tsx @@ -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], ); diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index e285227..395910a 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -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], ); diff --git a/src/core/index.tsx b/src/core/index.tsx index c00e54e..6bb8176 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -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 | undefined, ) { @@ -65,20 +76,27 @@ const JoLPlayer = function JoLPlayer( video: videoRef.current, })); - const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo( - { - videoElement: videoRef.current, - // onPause: (val: any) => { - // console.log(val); - // }, - // onPlay: (val: any) => { - // console.log(val); - // }, - }, - [videoRef.current], - ); + const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture, isEndEd } = + useVideo( + { + videoElement: videoRef.current, + }, + [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( {}, diff --git a/src/core/useVideo.ts b/src/core/useVideo.ts index 294887f..b241c00 100644 --- a/src/core/useVideo.ts +++ b/src/core/useVideo.ts @@ -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({ 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(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) { diff --git a/src/core/useVideoCallback.ts b/src/core/useVideoCallback.ts new file mode 100644 index 0000000..cb0bf4a --- /dev/null +++ b/src/core/useVideoCallback.ts @@ -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;