Merge pull request #18503 from ramonlsouza/native-debounce

refactor: replace debounce function

bigbluebutton-html5/imports/ui/components/audio/service.js

@@ -1,7 +1,7 @@
 import Users from '/imports/api/users';
 import Auth from '/imports/ui/services/auth';
 import { throttle } from '/imports/utils/throttle';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import AudioManager from '/imports/ui/services/audio-manager';
 import Meetings from '/imports/api/meetings';
 import { makeCall } from '/imports/ui/services/api';
@@ -123,7 +123,7 @@ export default {
   joinListenOnly: () => AudioManager.joinListenOnly(),
   joinMicrophone: () => AudioManager.joinMicrophone(),
   joinEchoTest: () => AudioManager.joinEchoTest(),
-  toggleMuteMicrophone: debounce({ delay: 500 }, toggleMuteMicrophone),
+  toggleMuteMicrophone: debounce(toggleMuteMicrophone, 500, { leading: true, trailing: false }),
   changeInputDevice: (inputDeviceId) => AudioManager.changeInputDevice(inputDeviceId),
   changeInputStream: (newInputStream) => { AudioManager.inputStream = newInputStream; },
   liveChangeInputDevice: (inputDeviceId) => AudioManager.liveChangeInputDevice(inputDeviceId),

bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import { AutoSizer,CellMeasurer, CellMeasurerCache } from 'react-virtualized';
 import Styled from './styles';
 import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
@@ -69,7 +69,7 @@ class TimeWindowList extends PureComponent {
       },
     });
     this.userScrolledBack = false;
-    this.handleScrollUpdate = debounce({ delay: 150 }, this.handleScrollUpdate.bind(this));
+    this.handleScrollUpdate = debounce(this.handleScrollUpdate.bind(this), 150);
     this.rowRender = this.rowRender.bind(this);
     this.forceCacheUpdate = this.forceCacheUpdate.bind(this);
     this.systemMessagesResized = {};

bigbluebutton-html5/imports/ui/components/chat/time-window-list/time-window-chat-item/message-chat-item/component.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import fastdom from 'fastdom';
 import { injectIntl } from 'react-intl';
 import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
@@ -41,7 +41,7 @@ class MessageChatItem extends PureComponent {
 
     this.ticking = false;
 
-    this.handleMessageInViewport = debounce({ delay: 50 }, this.handleMessageInViewport.bind(this));
+    this.handleMessageInViewport = debounce(this.handleMessageInViewport.bind(this), 50);
   }
 
   componentDidMount() {

bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/container.jsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
 import VoiceUsers from '/imports/api/voice-users';
 import Auth from '/imports/ui/services/auth';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import TalkingIndicator from './component';
 import { makeCall } from '/imports/ui/services/api';
 import { meetingIsBreakout } from '/imports/ui/components/app/service';
@@ -80,15 +80,15 @@ export default withTracker(() => {
     }
   }
 
-  const muteUser = debounce({ delay: TALKING_INDICATOR_MUTE_INTERVAL }, (id) => {
+  const muteUser = debounce((id) => {
     const user = VoiceUsers.findOne({ meetingId, intId: id }, {
       fields: {
         muted: 1,
       },
     });
     if (user.muted) return;
     makeCall('toggleVoice', id);
-  });
+  }, TALKING_INDICATOR_MUTE_INTERVAL, { leading: true, trailing: false });
 
   return {
     talkers,

bigbluebutton-html5/imports/ui/components/polling/service.js

@@ -1,6 +1,6 @@
 import { makeCall } from '/imports/ui/services/api';
 import Polls from '/imports/api/polls';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 
 const MAX_CHAR_LENGTH = 5;
 
@@ -43,8 +43,8 @@ const mapPolls = () => {
     },
     pollExists: true,
     amIRequester,
-    handleVote: debounce({ delay: 500 }, handleVote),
-    handleTypedVote: debounce({ delay: 500 }, handleTypedVote),
+    handleVote: debounce(handleVote, 500, { leading: true, trailing: false }),
+    handleTypedVote: debounce(handleTypedVote, 500, { leading: true, trailing: false }),
   };
 };
 

bigbluebutton-html5/imports/ui/components/presentation/component.jsx

@@ -19,7 +19,7 @@ import { colorContentBackground } from '/imports/ui/stylesheets/styled-component
 import browserInfo from '/imports/utils/browserInfo';
 import { addNewAlert } from '../screenreader-alert/service';
 import { clearCursors } from '/imports/ui/components/whiteboard/cursors/service';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 
 const intlMessages = defineMessages({
   presentationLabel: {
@@ -86,13 +86,13 @@ class Presentation extends PureComponent {
 
     this.getSvgRef = this.getSvgRef.bind(this);
     this.setFitToWidth = this.setFitToWidth.bind(this);
-    this.zoomChanger = debounce({ delay: 200 }, this.zoomChanger.bind(this));
+    this.zoomChanger = debounce(this.zoomChanger.bind(this), 200);
     this.updateLocalPosition = this.updateLocalPosition.bind(this);
     this.panAndZoomChanger = this.panAndZoomChanger.bind(this);
     this.fitToWidthHandler = this.fitToWidthHandler.bind(this);
     this.onFullscreenChange = this.onFullscreenChange.bind(this);
     this.getPresentationSizesAvailable = this.getPresentationSizesAvailable.bind(this);
-    this.handleResize = debounce({ delay: 200 }, this.handleResize.bind(this));
+    this.handleResize = debounce(this.handleResize.bind(this), 200);
     this.setTldrawAPI = this.setTldrawAPI.bind(this);
     this.setIsPanning = this.setIsPanning.bind(this);
     this.setIsToolbarVisible = this.setIsToolbarVisible.bind(this);

bigbluebutton-html5/imports/ui/components/screenshare/component.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import { Session } from 'meteor/session';
 import FullscreenButtonContainer from '/imports/ui/components/common/fullscreen-button/container';
 import SwitchButtonContainer from './switch-button/container';
@@ -72,8 +72,9 @@ class ScreenshareComponent extends React.Component {
     this.handleOnMuted = this.handleOnMuted.bind(this);
     this.dispatchScreenShareSize = this.dispatchScreenShareSize.bind(this);
     this.debouncedDispatchScreenShareSize = debounce(
-      { delay: SCREEN_SIZE_DISPATCH_INTERVAL },
       this.dispatchScreenShareSize,
+      SCREEN_SIZE_DISPATCH_INTERVAL,
+      { leading: false, trailing: true },
     );
 
     const { locales, icon } = props;

bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import Styled from './styles';
 import UserAvatar from '/imports/ui/components/user-avatar/component';
@@ -14,9 +14,9 @@ const PUBLIC_CHAT_KEY = CHAT_CONFIG.public_id;
 
 let globalAppplyStateToProps = () => {};
 
-const throttledFunc = debounce({ delay: DEBOUNCE_TIME }, () => {
+const throttledFunc = debounce(() => {
   globalAppplyStateToProps();
-});
+}, DEBOUNCE_TIME, { trailing: true, leading: true });
 
 const intlMessages = defineMessages({
   titlePublic: {

bigbluebutton-html5/imports/ui/components/video-provider/component.jsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import { defineMessages, injectIntl } from 'react-intl';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import VideoService from './service';
 import VideoListContainer from './video-list/container';
 import {
@@ -176,8 +176,9 @@ class VideoProvider extends Component {
     this.onWsMessage = this.onWsMessage.bind(this);
     this.updateStreams = this.updateStreams.bind(this);
     this.debouncedConnectStreams = debounce(
-      { delay: VideoService.getPageChangeDebounceTime() },
-      this.connectStreams
+      this.connectStreams,
+      VideoService.getPageChangeDebounceTime(),
+      { leading: false, trailing: true },
     );
     this.startVirtualBackgroundByDrop = this.startVirtualBackgroundByDrop.bind(this);
   }

bigbluebutton-html5/imports/ui/components/video-provider/service.js

@@ -16,7 +16,7 @@ import VideoPreviewService from '../video-preview/service';
 import Storage from '/imports/ui/services/storage/session';
 import BBBStorage from '/imports/ui/services/storage';
 import logger from '/imports/startup/client/logger';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import { partition } from '/imports/utils/array-utils';
 import {
   getSortingMethod,
@@ -1006,8 +1006,9 @@ export default {
   notify: message => notify(message, 'error', 'video'),
   updateNumberOfDevices: devices => videoService.updateNumberOfDevices(devices),
   applyCameraProfile: debounce(
-    { delay: CAMERA_QUALITY_THR_DEBOUNCE }, 
-    videoService.applyCameraProfile.bind(videoService)
+    videoService.applyCameraProfile.bind(videoService),
+    CAMERA_QUALITY_THR_DEBOUNCE,
+    { leading: false, trailing: true },
   ),
   getThreshold: (numberOfPublishers) => videoService.getThreshold(numberOfPublishers),
   isPaginationEnabled: () => videoService.isPaginationEnabled(),

bigbluebutton-html5/imports/ui/components/video-provider/video-button/component.jsx

@@ -5,7 +5,7 @@ import VideoService from '../service';
 import { defineMessages, injectIntl } from 'react-intl';
 import Styled from './styles';
 import deviceInfo from '/imports/utils/deviceInfo';
-import { debounce } from 'radash';
+import { debounce } from '/imports/utils/debounce';
 import BBBMenu from '/imports/ui/components/common/menu/component';
 import { isVirtualBackgroundsEnabled } from '/imports/ui/services/features';
 import Button from '/imports/ui/components/common/button/component';
@@ -99,7 +99,7 @@ const JoinVideoButton = ({
     }
   }, [isVideoPreviewModalOpen]);
 
-  const handleOnClick = debounce({ delay: JOIN_VIDEO_DELAY_MILLISECONDS }, () => {
+  const handleOnClick = debounce(() => {
     switch (status) {
       case 'videoConnecting':
         VideoService.stopVideo();
@@ -113,7 +113,7 @@ const JoinVideoButton = ({
           setVideoPreviewModalIsOpen(true);
         }
     }
-  });
+  }, JOIN_VIDEO_DELAY_MILLISECONDS);
 
   const handleOpenAdvancedOptions = (callback) => {
     if (callback) callback();

bigbluebutton-html5/imports/utils/debounce.js

@@ -0,0 +1,52 @@
+/**
+ * Debounce function, includes leading and trailing options (lodash-like)
+ * @param {Function} func - function to be debounced
+ * @param {Number} delay - delay in milliseconds
+ * @param {Object} options - options object
+ * @param {Boolean} options.leading - whether to invoke the function on the leading edge
+ * @param {Boolean} options.trailing - whether to invoke the function on the trailing edge
+ * @returns {Function} - debounced function
+ */
+export function debounce(func, delay, options = {}) {
+  let timeoutId;
+  let lastArgs;
+  let lastThis;
+  let calledOnce = false;
+
+  const { leading = false, trailing = true } = options;
+
+  function invokeFunc() {
+    func.apply(lastThis, lastArgs);
+    lastArgs = null;
+    lastThis = null;
+  }
+
+  return function (...args) {
+    lastArgs = args;
+    lastThis = this;
+
+    if (!timeoutId) {
+      if (leading && !calledOnce) {
+        invokeFunc();
+        calledOnce = true;
+      }
+
+      timeoutId = setTimeout(() => {
+        if (!trailing) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        } else {
+          invokeFunc();
+          timeoutId = null;
+        }
+        calledOnce = false;
+      }, delay);
+    } else if (trailing) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        invokeFunc();
+        timeoutId = null;
+      }, delay);
+    }
+  };
+}