|
|
@ -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) { |
|
|
|