fix: multiview config updates with latest layout on layout-modal clos…

…e and save
Eyevinn · Oct 18, 2024 · 55b3eca · 55b3eca
1 parent 90c94c6
commit 55b3eca
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx b/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx
@@ -38,12 +38,21 @@ export function ConfigureMultiviewModal({
     number[]
   >([]);
   const [layoutModalOpen, setLayoutModalOpen] = useState(false);
+  const [refresh, setRefresh] = useState(false);
   const [confirmUpdateModalOpen, setConfirmUpdateModalOpen] = useState(false);
   const [newMultiviewLayout, setNewMultiviewLayout] =
     useState<TMultiviewLayout | null>(null);
   const addNewLayout = usePutMultiviewLayout();
   const t = useTranslate();
 
+  useEffect(() => {
+    if (open) {
+      setRefresh(true);
+    } else {
+      setRefresh(false);
+    }
+  }, [open]);
+
   useEffect(() => {
     if (preset.pipelines[0].multiviews) {
       if (!Array.isArray(preset.pipelines[0].multiviews)) {
@@ -100,20 +109,22 @@ export function ConfigureMultiviewModal({
     onClose();
   };
 
-  const onUpdateLayoutPreset = () => {
+  const onUpdateLayoutPreset = async () => {
     const noLayoutName = newMultiviewLayout?.name === '';
     const defaultLayout = newMultiviewLayout?.name.includes('Default');
     if (!newMultiviewLayout || noLayoutName || defaultLayout) {
       toast.error(t('preset.no_updated_layout'));
       return;
     }
 
-    addNewLayout(newMultiviewLayout);
+    await addNewLayout(newMultiviewLayout);
     setLayoutModalOpen(false);
+    setRefresh(true);
   };
 
   const closeLayoutModal = () => {
     setLayoutModalOpen(false);
+    setRefresh(true);
   };
 
   const findDuplicateValues = (mvs: MultiviewSettings[]) => {
@@ -245,6 +256,7 @@ export function ConfigureMultiviewModal({
                           ? streamIdDuplicateIndexes.includes(index)
                           : false
                       }
+                      refresh={refresh}
                     />
                     <div
                       className={`w-full flex ${
@@ -289,14 +301,18 @@ export function ConfigureMultiviewModal({
         <MultiviewLayoutSettings
           production={production}
           setNewMultiviewPreset={setNewMultiviewLayout}
+          layoutModalOpen={layoutModalOpen}
         />
       )}
       <div className="flex flex-col">
         {!layoutModalOpen && (
           <Button
             className="flex self-center hover:bg-green-400 min-w-fit max-w-fit mt-10"
             type="button"
-            onClick={() => setLayoutModalOpen(true)}
+            onClick={() => {
+              setRefresh(false);
+              setLayoutModalOpen(true);
+            }}
           >
             {t('preset.configure_layouts')}
             <IconSettings className="text-p inline ml-2" />

diff --git a/...ponents/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx b/...ponents/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx
@@ -27,10 +27,12 @@ type ChangeLayout = {
 
 export default function MultiviewLayoutSettings({
   production,
-  setNewMultiviewPreset
+  setNewMultiviewPreset,
+  layoutModalOpen
 }: {
   production: Production | undefined;
   setNewMultiviewPreset: (preset: TMultiviewLayout | null) => void;
+  layoutModalOpen: boolean;
 }) {
   const [selectedMultiviewPreset, setSelectedMultiviewPreset] =
     useState<MultiviewPreset | null>(null);
@@ -82,6 +84,14 @@ export default function MultiviewLayoutSettings({
     }
   }, [multiviewPresets]);
 
+  useEffect(() => {
+    if (layoutModalOpen) {
+      setRefresh(true);
+    } else {
+      setRefresh(false);
+    }
+  }, [layoutModalOpen]);
+
   useEffect(() => {
     if (multiviewLayouts) {
       setRefresh(false);

diff --git a/src/components/modal/configureMultiviewModal/MultiviewSettings.tsx b/src/components/modal/configureMultiviewModal/MultiviewSettings.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 import { useTranslate } from '../../../i18n/useTranslate';
 import { MultiviewSettings } from '../../../interfaces/multiview';
 import { TMultiviewLayout } from '../../../interfaces/preset';
@@ -15,6 +15,7 @@ type MultiviewSettingsProps = {
   streamIdDuplicateError: boolean;
   newMultiviewLayout: TMultiviewLayout | null;
   productionId: string | undefined;
+  refresh: boolean;
 };
 
 export default function MultiviewSettingsConfig({
@@ -24,21 +25,33 @@ export default function MultiviewSettingsConfig({
   portDuplicateError,
   streamIdDuplicateError,
   newMultiviewLayout,
-  productionId
+  productionId,
+  refresh
 }: MultiviewSettingsProps) {
   const t = useTranslate();
-  const [multiviewLayouts] = useMultiviewLayouts(true);
   const [selectedMultiviewLayout, setSelectedMultiviewLayout] = useState<
     TMultiviewLayout | undefined
   >();
+  const [multiviewLayouts] = useMultiviewLayouts(refresh);
+
   const currentValue = multiview || selectedMultiviewLayout;
   const avaliableMultiviewLayouts = multiviewLayouts?.filter(
     (layout) => layout.productionId === productionId || !layout.productionId
   );
-
   const multiviewLayoutNames =
     avaliableMultiviewLayouts?.map((layout) => layout.name) || [];
 
+  useEffect(() => {
+    if (
+      refresh &&
+      multiview &&
+      multiviewLayouts &&
+      multiviewLayouts.length > 0
+    ) {
+      handleSetSelectedMultiviewLayout(multiview.name);
+    }
+  }, [refresh, multiviewLayouts]);
+
   useEffect(() => {
     if (multiview) {
       setSelectedMultiviewLayout(multiview);