LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Debounce volume and muted state update.

Browse source 
## Ticket
"Overall React Lag or Extra Re-renders / Volume slider laggy since v0.48"

## The problem
Every redux update results in each mounted component's prop mapping function (the `select` and `perform` stuff) to be recalculated. This is normal per redux, but we do lots of heavy stuff there.

The slider was sending tons of redux update for the Volume and Muted setting.

## Changes
The redux volume/muted setting is just used to restore vjs to the user's setting on the next video, so it doesn't need to be updated immediately/constantly -- vjs keeps it's own video settings.  Debounced that action.
This commit is contained in:
infinite-persistence 2021-11-29 22:57:46 +08:00 • committed by jessopb
parent 30b1562e64
commit 7afe2c58b0
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/component/viewers/videoViewer/view.jsx
View file

@ -15,6 +15,7 @@ import { addPlayNextButton } from './internal/play-next';
import { addPlayPreviousButton } from './internal/play-previous';
import { useHistory } from 'react-router';
import type { HomepageCat } from 'util/buildHomepage';
import debounce from 'util/debounce';
import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
@ -111,6 +112,14 @@ function VideoViewer(props: Props) {
const [replay, setReplay] = useState(false);
const [videoNode, setVideoNode] = useState();
const updateVolumeState = React.useCallback(
debounce((volume, muted) => {
changeVolume(volume);
changeMute(muted);
}, 500),
[]
);
// force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
useEffect(() => {
if (uri && previousUri && uri !== previousUri) {
@ -343,8 +352,7 @@ function VideoViewer(props: Props) {
});
player.on('volumechange', () => {
if (player) {
changeVolume(player.volume());
changeMute(player.muted());
updateVolumeState(player.volume(), player.muted());
}
});
player.on('ratechange', () => {