fix(layout): prevent race condition on layout input update (bigbluebu…

…tton#21018)
antonbsa · Aug 27, 2024 · 4e7868b · 4e7868b
1 parent b76fef5
commit 4e7868b
Show file tree

Hide file tree

Showing 9 changed files with 349 additions and 310 deletions.
diff --git a/...5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx b/...5/imports/ui/components/external-video-player/external-video-player-graphql/component.tsx
@@ -433,7 +433,7 @@ const ExternalVideoPlayerContainer: React.FC = () => {
   }));
   const currentVolume = React.useRef(0);
   const isMuted = React.useRef(false);
-  const theresNoExternalVideo = useRef(true);
+  const hasExternalVideo = useRef(false);
   const lastMessageRef = useRef<{
     event: string;
     rate: number;
@@ -475,26 +475,26 @@ const ExternalVideoPlayerContainer: React.FC = () => {
   };
 
   useEffect(() => {
-    if (!currentMeeting?.externalVideo?.externalVideoUrl && !theresNoExternalVideo.current) {
+    if (!currentMeeting?.externalVideo?.externalVideoUrl && hasExternalVideo.current) {
       layoutContextDispatch({
         type: ACTIONS.SET_PILE_CONTENT_FOR_PRESENTATION_AREA,
         value: {
           content: PRESENTATION_AREA.EXTERNAL_VIDEO,
           open: false,
         },
       });
-      theresNoExternalVideo.current = true;
-    } else if (currentMeeting?.externalVideo?.externalVideoUrl && theresNoExternalVideo.current) {
+      hasExternalVideo.current = false;
+    } else if (currentMeeting?.externalVideo?.externalVideoUrl && !hasExternalVideo.current) {
       layoutContextDispatch({
         type: ACTIONS.SET_PILE_CONTENT_FOR_PRESENTATION_AREA,
         value: {
           content: PRESENTATION_AREA.EXTERNAL_VIDEO,
           open: true,
         },
       });
-      theresNoExternalVideo.current = false;
+      hasExternalVideo.current = true;
     }
-  }, [currentMeeting]);
+  }, [currentMeeting?.externalVideo?.externalVideoUrl]);
 
   // --- Plugin related code ---
   useEffect(() => {

diff --git a/bigbluebutton-html5/imports/ui/components/layout/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context.jsx
@@ -84,7 +84,7 @@ const reducer = (state, action) => {
       if (state.input === action.value) return state;
       return {
         ...state,
-        input: action.value,
+        input: typeof action.value === 'function' ? action.value(state.input) : action.value,
       };
     }
 

diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/camerasOnly.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/camerasOnly.jsx
@@ -30,7 +30,6 @@ const CamerasOnlyLayout = (props) => {
   const fullscreen = layoutSelect((i) => i.fullscreen);
   const fontSize = layoutSelect((i) => i.fontSize);
   const currentPanelType = layoutSelect((i) => i.currentPanelType);
-  const cameraDockInput = layoutSelectInput((i) => i.cameraDock);
   const navbarInput = layoutSelectInput((i) => i.navBar);
   const actionbarInput = layoutSelectInput((i) => i.actionBar);
   const layoutContextDispatch = layoutDispatch();
@@ -358,39 +357,42 @@ const CamerasOnlyLayout = (props) => {
   const init = () => {
     layoutContextDispatch({
       type: ACTIONS.SET_LAYOUT_INPUT,
-      value: defaultsDeep(
-        {
-          sidebarNavigation: {
-            isOpen: false,
-            width: 0,
-            height: 0,
+      value: (prevInput) => {
+        const { cameraDock } = prevInput;
+        return defaultsDeep(
+          {
+            sidebarNavigation: {
+              isOpen: false,
+              width: 0,
+              height: 0,
+            },
+            sidebarContent: {
+              isOpen: false,
+              width: 0,
+              height: 0,
+            },
+            SidebarContentHorizontalResizer: {
+              isOpen: false,
+            },
+            presentation: {
+              isOpen: false,
+            },
+            cameraDock: {
+              numCameras: cameraDock.numCameras,
+            },
+            externalVideo: {
+              hasExternalVideo: false,
+            },
+            genericMainContent: {
+              genericContentId: undefined,
+            },
+            screenShare: {
+              hasScreenShare: false,
+            },
           },
-          sidebarContent: {
-            isOpen: false,
-            width: 0,
-            height: 0,
-          },
-          SidebarContentHorizontalResizer: {
-            isOpen: false,
-          },
-          presentation: {
-            isOpen: false,
-          },
-          cameraDock: {
-            numCameras: cameraDockInput.numCameras,
-          },
-          externalVideo: {
-            hasExternalVideo: false,
-          },
-          genericMainContent: {
-            genericContentId: undefined,
-          },
-          screenShare: {
-            hasScreenShare: false,
-          },
-        },
-        INITIAL_INPUT_STATE,
-      ),
+          INITIAL_INPUT_STATE,
+        );
+      },
     });
     Session.setItem('layoutReady', true);
     throttledCalculatesLayout();

diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
@@ -135,96 +135,108 @@ const CustomLayout = (props) => {
   };
 
   const init = () => {
-    const { sidebarContentPanel } = sidebarContentInput;
-
     if (isMobile) {
       layoutContextDispatch({
         type: ACTIONS.SET_LAYOUT_INPUT,
-        value: defaultsDeep(
-          {
-            sidebarNavigation: {
-              isOpen:
-                input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
-              sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
-            },
-            sidebarContent: {
-              isOpen: sidebarContentPanel !== PANELS.NONE,
-              sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
-            },
-            sidebarContentHorizontalResizer: {
-              isOpen: false,
-            },
-            presentation: {
-              isOpen: presentationInput.isOpen,
-              slidesLength: presentationInput.slidesLength,
-              currentSlide: {
-                ...presentationInput.currentSlide,
+        value: (prevInput) => {
+          const {
+            sidebarNavigation, sidebarContent, presentation, cameraDock,
+            externalVideo, genericMainContent, screenShare, sharedNotes,
+          } = prevInput;
+          const { sidebarContentPanel } = sidebarContent;
+          return defaultsDeep(
+            {
+              sidebarNavigation: {
+                isOpen:
+                  sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
+                sidebarNavPanel: sidebarNavigation.sidebarNavPanel,
+              },
+              sidebarContent: {
+                isOpen: sidebarContentPanel !== PANELS.NONE,
+                sidebarContentPanel: sidebarContent.sidebarContentPanel,
+              },
+              sidebarContentHorizontalResizer: {
+                isOpen: false,
+              },
+              presentation: {
+                isOpen: presentation.isOpen,
+                slidesLength: presentation.slidesLength,
+                currentSlide: {
+                  ...presentation.currentSlide,
+                },
+              },
+              cameraDock: {
+                numCameras: cameraDock.numCameras,
+              },
+              externalVideo: {
+                hasExternalVideo: externalVideo.hasExternalVideo,
+              },
+              genericMainContent: {
+                genericContentId: genericMainContent.genericContentId,
+              },
+              screenShare: {
+                hasScreenShare: screenShare.hasScreenShare,
+                width: screenShare.width,
+                height: screenShare.height,
+              },
+              sharedNotes: {
+                isPinned: sharedNotes.isPinned,
               },
             },
-            cameraDock: {
-              numCameras: cameraDockInput.numCameras,
-            },
-            externalVideo: {
-              hasExternalVideo: input.externalVideo.hasExternalVideo,
-            },
-            genericMainContent: {
-              genericContentId: input.genericMainContent.genericContentId,
-            },
-            screenShare: {
-              hasScreenShare: input.screenShare.hasScreenShare,
-              width: input.screenShare.width,
-              height: input.screenShare.height,
-            },
-            sharedNotes: {
-              isPinned: sharedNotesInput.isPinned,
-            },
-          },
-          INITIAL_INPUT_STATE
-        ),
+            INITIAL_INPUT_STATE,
+          );
+        },
       });
     } else {
       layoutContextDispatch({
         type: ACTIONS.SET_LAYOUT_INPUT,
-        value: defaultsDeep(
-          {
-            sidebarNavigation: {
-              isOpen:
-                input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
-            },
-            sidebarContent: {
-              isOpen: sidebarContentPanel !== PANELS.NONE,
-              sidebarContentPanel,
-            },
-            sidebarContentHorizontalResizer: {
-              isOpen: false,
-            },
-            presentation: {
-              isOpen: presentationInput.isOpen,
-              slidesLength: presentationInput.slidesLength,
-              currentSlide: {
-                ...presentationInput.currentSlide,
+        value: (prevInput) => {
+          const {
+            sidebarNavigation, sidebarContent, presentation, cameraDock,
+            externalVideo, genericMainContent, screenShare, sharedNotes,
+          } = prevInput;
+          const { sidebarContentPanel } = sidebarContent;
+          return defaultsDeep(
+            {
+              sidebarNavigation: {
+                isOpen:
+                  sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
+              },
+              sidebarContent: {
+                isOpen: sidebarContentPanel !== PANELS.NONE,
+                sidebarContentPanel,
+              },
+              sidebarContentHorizontalResizer: {
+                isOpen: false,
+              },
+              presentation: {
+                isOpen: presentation.isOpen,
+                slidesLength: presentation.slidesLength,
+                currentSlide: {
+                  ...presentation.currentSlide,
+                },
+              },
+              cameraDock: {
+                numCameras: cameraDock.numCameras,
+              },
+              externalVideo: {
+                hasExternalVideo: externalVideo.hasExternalVideo,
+              },
+              genericMainContent: {
+                genericContentId: genericMainContent.genericContentId,
+              },
+              screenShare: {
+                hasScreenShare: screenShare.hasScreenShare,
+                width: screenShare.width,
+                height: screenShare.height,
+              },
+              sharedNotes: {
+                isPinned: sharedNotes.isPinned,
               },
             },
-            cameraDock: {
-              numCameras: cameraDockInput.numCameras,
-            },
-            externalVideo: {
-              hasExternalVideo: input.externalVideo.hasExternalVideo,
-            },
-            genericMainContent: {
-              genericContentId: input.genericMainContent.genericContentId,
-            },
-            screenShare: {
-              hasScreenShare: input.screenShare.hasScreenShare,
-              width: input.screenShare.width,
-              height: input.screenShare.height,
-            },
-            sharedNotes: {
-              isPinned: sharedNotesInput.isPinned,
-            },
-          },
-          INITIAL_INPUT_STATE
-        ),
+            INITIAL_INPUT_STATE,
+          );
+        },
       });
     }
     Session.setItem('layoutReady', true);