diff --git a/example/src/app.tsx b/example/src/app.tsx
index 462c1d6..e3bbf5d 100644
--- a/example/src/app.tsx
+++ b/example/src/app.tsx
@@ -1,15 +1,94 @@
-import React from 'react';
+import { callBackType, JoLPlayerRef } from '@/interface';
+import React, { useRef, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
-import App from '../../src/index';
-ReactDOM.render(
- ,
- document.getElementById('root'),
-);
+import JoLPlayer from '../../src/index';
+const AppCompent = () => {
+ const videoRef = useRef(null!);
+ const [theme, setTheme] = useState('#ffb821');
+ const [isShowMultiple, setIsShowMultiple] = useState(true);
+ const onProgressMouseUp: callBackType = (val) => {
+ console.log(`onProgressMouseUp`, val);
+ };
+ const onEndEd: callBackType = (val) => {
+ console.log(`onEndEd`, val);
+ };
+ const onPause: callBackType = (val) => {
+ console.log(`onPause`, val);
+ };
+ const onProgressMouseDown: callBackType = (val) => {
+ console.log(`onProgressMouseDown`, val);
+ };
+ const onPlay: callBackType = (val) => {
+ console.log(`onPlay`, val);
+ };
+ const onTimeChange: callBackType = (val) => {
+ console.log(`onTimeChange`, val);
+ };
+ const onvolumechange: callBackType = (val) => {
+ console.log(`onvolumechange`, val);
+ };
+ const onError = () => {
+ console.log(`onError`);
+ };
+ useEffect(() => {
+ console.log(`videoRef.current`, videoRef.current);
+ }, [videoRef.current]);
+
+ const videoMethod = (status: string) => {
+ if (status === 'play') {
+ videoRef.current.play();
+ } else if (status === 'pause') {
+ videoRef.current.pause();
+ } else if (status === 'load') {
+ videoRef.current.load();
+ } else if (status === 'volume') {
+ videoRef.current.setVolume(86);
+ } else if (status === 'seek') {
+ videoRef.current.seek(500);
+ }
+ };
+ const toggle = () => {
+ videoRef.current.setVideoSrc(
+ 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
+ );
+ };
+ return (
+ <>
+
+
+
+
+
+
+
+
+ >
+ );
+};
+ReactDOM.render(, document.getElementById('root'));
diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx
index 7203260..1cd87c7 100644
--- a/src/core/controls/index.tsx
+++ b/src/core/controls/index.tsx
@@ -30,7 +30,7 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
const { propsAttributes } = reviceProps!;
- const revicePropsData = useRef();
+ const revicePropsData = useRef(null!);
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture, volume } =
useVideo(
@@ -53,6 +53,10 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
* @description 如果调用了setVolume函数,这边的数据就要保持和video的数据一致
*/
dispatch({ type: 'volume', data: Math.floor(volume * 100) });
+ /**
+ * @description volume为0,就直接等于处于静音模式下
+ */
+ dispatch({ type: 'isMuted', data: volume === 0 ? true : false });
}, [volume]);
useEffect(() => {
@@ -62,7 +66,15 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
window.removeEventListener('mouseup', whenMouseUpDo);
};
}, []);
-
+ /**
+ * @description 静音键和非静音键的切换
+ */
+ useEffect(() => {
+ if (revicePropsData.current && revicePropsData.current.videoRef) {
+ revicePropsData.current.videoRef!.muted = controlsState.isMuted ? true : false;
+ dispatch({ type: 'volume', data: controlsState.isMuted ? 0 : Math.floor(volume * 100) });
+ }
+ }, [controlsState.isMuted]);
/**
* @description 更新当前音量控制条
*/
@@ -210,14 +222,6 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
dispatch({ type: 'isWebPageFullScreen', data: true });
}
};
- /**
- * @description 静音键和非静音键的切换
- */
- const toggleVolume = () => {
- reviceProps.videoRef!.volume = controlsState.isMuted ? defaultVolume / 100 : 0;
- dispatch({ type: 'isMuted', data: controlsState.isMuted ? false : true });
- reviceProps.videoRef!.muted = controlsState.isMuted ? false : true;
- };
/**
* @description 全屏之后,对控件的间距设置一下
*/
@@ -254,7 +258,8 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
slideCurrentVolume={slideCurrentVolume}
clearVolumeInterval={clearVolumeInterval}
isMuted={controlsState.isMuted}
- toggleVolume={toggleVolume}
+ // toggleVolume={toggleVolume}
+ toggleVolume={() => dispatch({ type: 'isMuted', data: !controlsState.isMuted })}
/>
{filterDefaults(propsAttributes!.isShowSet) && (
[setIsShow(true)]}
- onMouseLeave={(e) => [setIsShow(false)]}
- onClick={(e) => [toggleVolume()]}
+ onMouseEnter={(e) => [e.stopPropagation(), setIsShow(true)]}
+ onMouseLeave={(e) => [e.stopPropagation(), setIsShow(false)]}
+ onClick={(e) => {
+ e.stopPropagation();
+ toggleVolume();
+ }}
style={style}
>
+