Merge pull request #212 from mynaparrot/improvements

fix: whiteboard wasn't refreshing
mynaparrot · Oct 5, 2022 · 8bbc5e8 · 8bbc5e8
2 parents 03f7507 + 2235392
commit 8bbc5e8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 34 deletions.
diff --git a/src/components/main-area/mainComponents.tsx b/src/components/main-area/mainComponents.tsx
@@ -1,12 +1,5 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  useRef,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
-import { throttle } from 'lodash';
 
 import { RootState, useAppDispatch, useAppSelector } from '../../store';
 import ScreenShareElements from '../media-elements/screenshare';
@@ -60,15 +53,16 @@ const activateWebcamsViewSelector = createSelector(
 
 const MainComponents = ({ currentConnection }: IMainComponentsProps) => {
   const dispatch = useAppDispatch();
-  const refreshWhiteboard = useRef(
-    throttle(
-      () => {
-        dispatch(doRefreshWhiteboard(Date.now()));
-      },
-      2000,
-      { leading: false, trailing: false },
-    ),
-  );
+  // const refreshWhiteboard = useRef(
+  //   throttle(
+  //     () => {
+  //       console.log("im here")
+  //       dispatch(doRefreshWhiteboard(Date.now()));
+  //     },
+  //     2000,
+  //     { leading: false, trailing: false },
+  //   ),
+  // );
 
   const isActiveScreenSharing = useAppSelector(isActiveScreenSharingSelector);
   const activeScreenSharingView = useAppSelector(
@@ -87,6 +81,7 @@ const MainComponents = ({ currentConnection }: IMainComponentsProps) => {
   const [showVerticalVideoView, setShowVerticalVideoView] =
     useState<boolean>(false);
   const [hasVideoElms, setHasVideoElms] = useState<boolean>(false);
+  const [showVideoElms, setShowVideoElms] = useState<boolean>(false);
 
   useEffect(() => {
     if (
@@ -120,17 +115,27 @@ const MainComponents = ({ currentConnection }: IMainComponentsProps) => {
     };
   }, [currentConnection]);
 
-  const shouldShowVideoElms = useCallback(() => {
-    //without refreshing whiteboard in larger display it will be out of sync.
-    refreshWhiteboard.current();
-
+  useEffect(() => {
     if (!activateWebcamsView) {
-      return false;
+      setShowVideoElms(false);
+      return;
     }
-    return hasVideoElms;
-    //eslint-disable-next-line
+    setShowVideoElms(hasVideoElms);
   }, [activateWebcamsView, hasVideoElms]);
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (isActiveWhiteboard) {
+        dispatch(doRefreshWhiteboard(Date.now()));
+      } else {
+        dispatch(doRefreshWhiteboard(0));
+      }
+    }, 1000);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [showVideoElms, isActiveWhiteboard, dispatch]);
+
   const shouldShowScreenSharing = useCallback(() => {
     if (!activeScreenSharingView) {
       return false;
@@ -188,7 +193,7 @@ const MainComponents = ({ currentConnection }: IMainComponentsProps) => {
       ) : (
         <div
           className={`middle-fullscreen-wrapper h-full flex ${
-            shouldShowVideoElms() ? 'verticalsWebcamsActivated' : ''
+            showVideoElms ? 'verticalsWebcamsActivated' : ''
           }`}
         >
           {videoElms}

diff --git a/src/components/whiteboard/index.tsx b/src/components/whiteboard/index.tsx
@@ -336,6 +336,24 @@ const Whiteboard = () => {
     }
   }, [preScreenWidth, screenWidth, excalidrawAPI]);
 
+  // for refreshing in various reason
+  useEffect(() => {
+    const doRefresh = throttle(
+      () => {
+        excalidrawAPI?.refresh();
+      },
+      500,
+      { trailing: false },
+    );
+
+    if (refreshWhiteboard > 0) {
+      if (excalidrawAPI) {
+        doRefresh();
+      }
+    }
+    //eslint-disable-next-line
+  }, [refreshWhiteboard]);
+
   const handleExcalidrawAddFiles = useCallback(
     async (files: Array<IWhiteboardFile>) => {
       if (!excalidrawAPI) {
@@ -409,15 +427,6 @@ const Whiteboard = () => {
     },
     [excalidrawAPI, lastBroadcastOrReceivedSceneVersion],
   );
-  // for refreshing in various reason
-  useEffect(() => {
-    if (refreshWhiteboard > 0) {
-      if (excalidrawAPI) {
-        excalidrawAPI.refresh();
-      }
-    }
-    //eslint-disable-next-line
-  }, [refreshWhiteboard]);
 
   const handleRemoteSceneUpdate = (
     elements: ReconciledElements,