From 88b4981160ac6d63705b4b29b8757c82ff2d890c Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Sat, 7 Aug 2021 21:57:56 +0800 Subject: [PATCH] f --- src/appComponent.tsx | 49 ++++++++++++++++++++--------------- src/core/controller/index.tsx | 40 +++++++++++++++------------- src/core/controls/index.tsx | 15 ++++++++--- src/core/index.tsx | 14 ++++++++++ src/core/progress/index.tsx | 4 ++- src/core/useVideo.ts | 23 +++++++++------- 6 files changed, 93 insertions(+), 52 deletions(-) diff --git a/src/appComponent.tsx b/src/appComponent.tsx index e2a7e2b..e50b4b2 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -1,36 +1,43 @@ import React, { memo, useRef, useEffect } from 'react'; import JoLPlayer, { useVideo } from './app'; +import useWindowClient from '@/utils/useWindowClient'; import '@/icons/'; const AppComponent = memo(function AppComponent(props) { const videoRef = useRef(null!); - const xx = useRef(false); - 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); + 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], + ); + xx.current = clientX; return ( <> {isPlay ? '播放' : '暂停'} - + {/* */} ); }); diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx index a49284d..3e0a3aa 100644 --- a/src/core/controller/index.tsx +++ b/src/core/controller/index.tsx @@ -15,24 +15,28 @@ const Index = memo(function Index(props) { const { dispatch } = reviceProps; - 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); - // }, - }); + 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], + ); + const timer = useRef(null!); const viewClientX = useRef(null!); diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index 9f72a0c..e285227 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -30,9 +30,18 @@ const Index = memo(function Index(props) { const revicePropsData = useRef(); - const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({ - videoElement: reviceProps.videoRef, - }); + const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo( + { + videoElement: reviceProps.videoRef, + // onPause: (val: any) => { + // console.log(val); + // }, + // onPlay: (val: any) => { + // console.log(val); + // }, + }, + [reviceProps.videoRef], + ); const { controlsState, dispatch } = useControls(); diff --git a/src/core/index.tsx b/src/core/index.tsx index 330f536..c00e54e 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -11,6 +11,7 @@ import { videoparameter } from '@/interface'; import { FlowContext, useVideoFlow } from '@/core/context'; import useMandatoryUpdate from '@/utils/useMandatoryUpdate'; import Broadcast from '@/components/svgIcon'; +import { useVideo } from '@/core/useVideo'; // import videoUrl from '@/assets/haiwang.mp4'; import '@/assets/css/reset.scss'; import './index.scss'; @@ -64,6 +65,19 @@ 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], + ); + useEffect(() => { /** * @description 设置用户给的视频播放器长宽 diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index b7d8cdc..65c5297 100644 --- a/src/core/progress/index.tsx +++ b/src/core/progress/index.tsx @@ -29,7 +29,9 @@ const Index = memo(function Index(props) { const reviceProps = useContext(FlowContext); - const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef }); + const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef }, [ + reviceProps.videoRef, + ]); const { progressState, dispatch } = useProgress(); diff --git a/src/core/useVideo.ts b/src/core/useVideo.ts index 5dc2699..294887f 100644 --- a/src/core/useVideo.ts +++ b/src/core/useVideo.ts @@ -1,11 +1,13 @@ import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallback } 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 = ( - { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide }: any, - dep?: any, -) => { const forceUpdate = useMandatoryUpdate(); const reviceProps = useContext(FlowContext); @@ -29,7 +31,10 @@ export const useVideo = ( videoRef.current = videoElement; useEffect(() => { - forceUpdate(); + /** + * @description 防止在外部组件用，不更新的问题，所以要强制更新 + */ + // forceUpdate(); if (videoRef.current) { /** * @description 监听总时长 @@ -62,7 +67,7 @@ export const useVideo = ( /** * 强制更新 */ - forceUpdate(); + // forceUpdate(); torture({ currentTime: videoRef.current.currentTime, isPlay: videoRef.current.paused ? false : true, @@ -78,11 +83,11 @@ export const useVideo = ( return () => { interval.current && clearInterval(interval.current); }; - }, [videoRef.current, dep, videoElement]); + }, dep); const ProgressSlideChange = useCallback( (onProgressSlide: any) => { - // console.log(`onProgressSlide`, onProgressSlide); + console.log(`onProgressSlide`, onProgressSlide, videoFlow.progressSliderChangeVal); onProgressSlide && onProgressSlide(videoParameter.current); }, [videoFlow.progressSliderChangeVal], @@ -92,7 +97,7 @@ export const useVideo = ( if (videoFlow.progressSliderChangeVal) { ProgressSlideChange(onProgressSlide); } - }, [ProgressSlideChange]); + }, [ProgressSlideChange, onProgressSlide]); const torture = (val: any) => { videoParameter.current = { ...videoParameter.current, ...val };