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

master
lgf 3 years ago
parent b2ab149cd2
commit fbf92a36d4
  1. 107
      example/src/app.tsx
  2. 27
      src/core/controls/index.tsx
  3. 10
      src/core/controls/volume.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(
<App
option={{
videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4',
width: 750,
height: 420,
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
language: 'zh',
}}
/>,
document.getElementById('root'),
);
import JoLPlayer from '../../src/index';
const AppCompent = () => {
const videoRef = useRef<JoLPlayerRef>(null!);
const [theme, setTheme] = useState<string>('#ffb821');
const [isShowMultiple, setIsShowMultiple] = useState<boolean>(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 (
<>
<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'));

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

@ -41,12 +41,16 @@ const Volume = function Volume(
return (
<div
className="JoL-multifunction-volume"
onMouseEnter={(e) => [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}
>
<Broadcast iconClass={isMuted ? 'mute' : 'volume'} fill="#fff" fontSize="20px" />
<div
className="JoL-multifunction-volume-container"
style={{ display: isShow ? 'block' : 'none' }}

Loading…
Cancel
Save