From fbf92a36d44e5867f75d198ddf938483f6a48ca2 Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Thu, 26 Aug 2021 15:23:32 +0800 Subject: [PATCH] Fix the bug that the value is reset after the volume button is muted --- example/src/app.tsx | 107 ++++++++++++++++++++++++++++++----- src/core/controls/index.tsx | 27 +++++---- src/core/controls/volume.tsx | 10 +++- 3 files changed, 116 insertions(+), 28 deletions(-) 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} > +