From 7afe2c58b00e5f546f2b334e1a87648e4789ee80 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Mon, 29 Nov 2021 22:57:46 +0800 Subject: [PATCH] Debounce volume and muted state update. ## 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. --- ui/component/viewers/videoViewer/view.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index 50f229231..0a2b2c1f0 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/ui/component/viewers/videoViewer/view.jsx @@ -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', () => {