();
- const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
- reviceProps.videoRef,
- );
+ const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({});
const { controlsState, dispatch } = useControls();
@@ -193,7 +191,10 @@ const Index = memo(function Index(props) {
}
};
return (
-
+
{
- return Object.assign({}, videoFlow, {
- videoRef: videoRef.current,
- videoContainerRef: videoContainerRef.current,
- lightOffMaskRef: lightOffMaskRef.current,
- dispatch,
- });
+ return Object.assign(
+ {},
+ {
+ videoRef: videoRef.current,
+ videoContainerRef: videoContainerRef.current,
+ lightOffMaskRef: lightOffMaskRef.current,
+ dispatch,
+ videoFlow,
+ },
+ );
}, [videoRef.current, videoFlow]);
return (
diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx
index f242a12..999f446 100644
--- a/src/core/progress/index.tsx
+++ b/src/core/progress/index.tsx
@@ -29,7 +29,7 @@ const Index = memo(function Index(props) {
const reviceProps = useContext(FlowContext);
- const { currentTime, duration, bufferedTime } = useVideo(reviceProps.videoRef);
+ const { currentTime, duration, bufferedTime } = useVideo({});
const { progressState, dispatch } = useProgress();
@@ -163,7 +163,10 @@ const Index = memo(function Index(props) {
};
return (
-
+
{
+export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => {
const forceUpdate = useMandatoryUpdate();
const reviceProps = useContext(FlowContext);
- const videoRef = useRef
(null);
-
- const [isPlay, setIsPlay] = useState(false);
-
- const [currentTime, setCurrentTime] = useState(0);
+ const { videoRef: videoEle, dispatch, videoFlow } = reviceProps;
- const [duration, setDuration] = useState(0);
+ const videoParameter = useRef({
+ isPlay: false,
+ currentTime: 0,
+ duration: 0,
+ bufferedTime: 0,
+ isPictureinpicture: false,
+ });
- const [bufferedTime, setBufferedTime] = useState(0);
-
- const [isPictureinpicture, setIsPictureinpicture] = useState(false);
+ const videoRef = useRef(null);
- const interval = useRef(null);
+ const interval = useRef(null!);
videoRef.current = videoEle;
useEffect(() => {
- // forceUpdate();
if (videoRef.current) {
/**
* @description 监听总时长
*/
videoRef.current.addEventListener('canplay', () => {
- setDuration(videoRef.current!.duration);
+ videoParameter.current = {
+ ...videoParameter.current,
+ duration: videoRef.current!.duration,
+ };
});
/**
* @description 监听缓冲
*/
videoRef.current.addEventListener('progress', () => {
if (videoRef.current!.buffered.length >= 1) {
- setBufferedTime(videoRef.current!.buffered.end(0));
+ videoParameter.current = {
+ ...videoParameter.current,
+ bufferedTime: videoRef.current!.buffered.end(0),
+ };
}
});
/**
* @description 已经进入画中画
*/
videoRef.current.addEventListener('enterpictureinpicture', () => {
- setIsPictureinpicture(true);
+ videoParameter.current = {
+ ...videoParameter.current,
+ isPictureinpicture: true,
+ };
});
/**
* @description 已退出画中画模式
*/
videoRef.current.addEventListener('leavepictureinpicture', () => {
- setIsPictureinpicture(false);
+ videoParameter.current = {
+ ...videoParameter.current,
+ isPictureinpicture: false,
+ };
});
// 定时器用于更新当前视频时间
interval.current = setInterval(() => {
- setIsPlay(videoRef.current!.paused ? false : true);
- setCurrentTime(videoRef.current!.currentTime);
+ /**
+ * 强制更新
+ */
+ forceUpdate();
+ videoParameter.current = {
+ ...videoParameter.current,
+ currentTime: videoRef.current!.currentTime,
+ isPlay: videoRef.current!.paused ? false : true,
+ };
}, 1);
- videoRef.current.addEventListener('pause', () => playChange('pause'));
- videoRef.current.addEventListener('play', () => playChange('play'));
+ videoRef.current.addEventListener('pause', pauseChange);
+ videoRef.current.addEventListener('play', playChange);
videoRef.current.addEventListener('timeupdate', timeupdate);
+ videoRef.current.addEventListener('ended', endedChange);
}
return () => {
interval.current && clearInterval(interval.current);
};
}, [videoEle, videoRef.current]);
- const playChange = (status: string) => {
- // console.log(`status`, status);
+ const pauseChange = () => {
+ onPause && onPause(videoParameter.current);
+ };
+ const playChange = () => {
+ onPlay && onPlay(videoParameter.current);
};
-
const timeupdate = () => {
- // console.log(`2222222`, videoRef.current!.currentTime);
+ onTimeChange && onTimeChange(videoParameter.current);
+ };
+ const endedChange = () => {
+ onEndEd && onEndEd(videoParameter.current);
};
-
const handleChangePlayState = () => {
- setIsPlay((pre) => {
- if (isPlay) {
- videoRef.current!.pause();
- } else {
- videoRef.current!.play();
- }
- return !pre;
- });
+ if (videoParameter.current.isPlay) {
+ videoRef.current!.pause();
+ } else {
+ videoRef.current!.play();
+ }
+ videoParameter.current = {
+ ...videoParameter.current,
+ isPlay: videoRef.current!.paused ? false : true,
+ };
};
return {
- isPlay,
- setIsPlay,
handleChangePlayState,
- currentTime,
- duration,
- bufferedTime,
- isPictureinpicture,
+ ...videoParameter.current,
};
};
diff --git a/src/interface/index.ts b/src/interface/index.ts
index 6a6c285..856df68 100644
--- a/src/interface/index.ts
+++ b/src/interface/index.ts
@@ -1,10 +1,4 @@
import React from 'react';
-
-export interface videoOption {
- width: number;
- height: number;
-}
-
export interface hoverShowStyleType {
height: number;
opacity: number;
@@ -12,11 +6,29 @@ export interface hoverShowStyleType {
progressBgRefEle: HTMLDivElement;
progressScrubberRefEle: HTMLDivElement;
}
-
+export interface videoOption {
+ /**
+ * @description 视频容器的width
+ */
+ width: number;
+ /**
+ * @description 视频容器的height
+ */
+ height: number;
+ /**
+ * @description 主题
+ */
+ theme?: string;
+ /**
+ * @description 视频地址
+ */
+ videoSrc: string;
+}
export interface videoparameter {
style?: React.CSSProperties;
/**
* @description 组件的配置项
*/
option: videoOption;
+ className?: string;
}
diff --git a/src/utils/useWindowClient.ts b/src/utils/useWindowClient.ts
index d79316e..67ac7b0 100644
--- a/src/utils/useWindowClient.ts
+++ b/src/utils/useWindowClient.ts
@@ -1,5 +1,4 @@
import { useState, useEffect, useRef } from 'react';
-import usePrevious from './usePrevious';
export interface useWindowSizeType {
clientX: number;
clientY: number;