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
189: 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
parent 71fc850df4
commit f5f3b08cca
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
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

@ -25,6 +25,7 @@ import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router';
import { getAllIds } from 'util/buildHomepage';
import type { HomepageCat } from 'util/buildHomepage';
import debounce from 'util/debounce';
import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
@ -135,6 +136,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) {
@ -387,8 +396,7 @@ function VideoViewer(props: Props) {
});
player.on('volumechange', () => {
if (player) {
changeVolume(player.volume());
changeMute(player.muted());
updateVolumeState(player.volume(), player.muted());
}
});
player.on('ratechange', () => {