Fix the bug that the value is reset after the volume button is muted

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';
+import JoLPlayer from '../../src/index';
-ReactDOM.render(
+const AppCompent = () => {
-  <App
+  const videoRef = useRef<JoLPlayerRef>(null!);
-    option={{
+  const [theme, setTheme] = useState<string>('#ffb821');
-      videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4',
+  const [isShowMultiple, setIsShowMultiple] = useState<boolean>(true);
-      width: 750,
+  const onProgressMouseUp: callBackType = (val) => {
-      height: 420,
+    console.log(`onProgressMouseUp`, val);
-      poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
+  };
-      language: 'zh',
+  const onEndEd: callBackType = (val) => {
-    }}
+    console.log(`onEndEd`, val);
-  />,
+  };
-  document.getElementById('root'),
+  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 (
+    <>
+      <JoLPlayer
+        ref={videoRef}
+        onProgressMouseUp={onProgressMouseUp}
+        onEndEd={onEndEd}
+        onPause={onPause}
+        onProgressMouseDown={onProgressMouseDown}
+        onPlay={onPlay}
+        onTimeChange={onTimeChange}
+        onvolumechange={onvolumechange}
+        onError={onError}
+        option={{
+          videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4',
+          width: 750,
+          height: 420,
+          theme,
+          poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
+          language: 'en',
+          isShowMultiple,
+        }}
+      />
+      <JoLPlayer
+        option={{
+          videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4',
+          width: 750,
+          height: 420,
+          poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
+        }}
+      />
+      <button onClick={() => videoMethod('play')}>play</button>
+      <button onClick={() => videoMethod('pause')}>pause</button>
+      <button onClick={() => videoMethod('load')}>load</button>
+      <button onClick={() => videoMethod('volume')}>volume(80)</button>
+      <button onClick={() => videoMethod('seek')}>seek(500s)</button>
+      <button onClick={toggle}>switch Road King</button>
+    </>
+  );
+};
+ReactDOM.render(<AppCompent />, document.getElementById('root'));

src/core/controls/index.tsx

@@ -30,7 +30,7 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
 
     const { propsAttributes } = reviceProps!;
 
-    const revicePropsData = useRef<contextType>();
+    const revicePropsData = useRef<contextType>(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) && (
             <SetComponent

src/core/controls/volume.tsx

@@ -41,12 +41,16 @@ const Volume = function Volume(
   return (
     <div
       className="JoL-multifunction-volume"
-      onMouseEnter={(e) => [setIsShow(true)]}
+      onMouseEnter={(e) => [e.stopPropagation(), setIsShow(true)]}
-      onMouseLeave={(e) => [setIsShow(false)]}
+      onMouseLeave={(e) => [e.stopPropagation(), setIsShow(false)]}
-      onClick={(e) => [toggleVolume()]}
+      onClick={(e) => {
+        e.stopPropagation();
+        toggleVolume();
+      }}
       style={style}
     >
       <Broadcast iconClass={isMuted ? 'mute' : 'volume'} fill="#fff" fontSize="20px" />
+
       <div
         className="JoL-multifunction-volume-container"
         style={{ display: isShow ? 'block' : 'none' }}