feat: default multiviewers are updated and other mv-updated

Eyevinn · Oct 25, 2024 · 8b0371a · 8b0371a
1 parent b445c9e
commit 8b0371a
Show file tree

Hide file tree

Showing 14 changed files with 332 additions and 174 deletions.
diff --git a/src/app/api/manager/stop/route.ts b/src/app/api/manager/stop/route.ts
@@ -13,7 +13,6 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
   const { production } = await request.json();
   return stopProduction(production)
     .then((result) => {
-      console.log(result);
       return new NextResponse(JSON.stringify(result));
     })
     .catch((error) => {

diff --git a/src/app/production/[id]/page.tsx b/src/app/production/[id]/page.tsx
@@ -100,10 +100,9 @@ export default function ProductionConfiguration({ params }: PageProps) {
     productionSetup?.sources.map((prod) => prod._id) || [];
 
   //MULTIVIEWS
-  const [updateMuliviewLayouts, setUpdateMuliviewLayouts] = useState(false);
   const getMultiviewLayout = useGetMultiviewLayout();
   const [updateMultiviewViews] = useMultiviews();
-  const [updateSourceInputSlotOnMultiviewLayouts] =
+  const [updateSourceInputSlotOnMultiviewLayouts, updateMultiviewViewsLoading] =
     useUpdateSourceInputSlotOnMultiviewLayouts();
   const [addMultiviewersOnRunningProduction] =
     useAddMultiviewersOnRunningProduction();
@@ -157,19 +156,6 @@ export default function ProductionConfiguration({ params }: PageProps) {
     refreshControlPanels();
   }, [productionSetup?.isActive]);
 
-  useEffect(() => {
-    if (updateMuliviewLayouts && productionSetup) {
-      updateSourceInputSlotOnMultiviewLayouts(productionSetup).then(
-        (updatedSetup) => {
-          if (!updatedSetup) return;
-          setProductionSetup(updatedSetup);
-          setUpdateMuliviewLayouts(false);
-          refreshProduction();
-        }
-      );
-    }
-  }, [productionSetup, updateMuliviewLayouts]);
-
   const setSelectedControlPanel = (controlPanel: string[]) => {
     setProductionSetup((prevState) => {
       if (!prevState) return;
@@ -403,14 +389,10 @@ export default function ProductionConfiguration({ params }: PageProps) {
     }
   };
 
-  const updateSource = (
+  const updateMultiview = (
     source: SourceReference,
-    productionSetup: Production
+    updatedSetup: Production
   ) => {
-    const updatedSetup = updateSetupItem(source, productionSetup);
-    setProductionSetup(updatedSetup);
-    setUpdateMuliviewLayouts(true);
-    putProduction(updatedSetup._id.toString(), updatedSetup);
     const pipeline = updatedSetup.production_settings.pipelines[0];
 
     pipeline.multiviews?.map((singleMultiview) => {
@@ -429,6 +411,16 @@ export default function ProductionConfiguration({ params }: PageProps) {
     });
   };
 
+  const updateSource = (
+    source: SourceReference,
+    productionSetup: Production
+  ) => {
+    const updatedSetup = updateSetupItem(source, productionSetup);
+    setProductionSetup(updatedSetup);
+    putProduction(updatedSetup._id.toString(), updatedSetup);
+    updateMultiview(source, updatedSetup);
+  };
+
   const updateConfigName = (nameChange: string) => {
     if (productionSetup?.name === nameChange) {
       return;
@@ -694,12 +686,16 @@ export default function ProductionConfiguration({ params }: PageProps) {
           };
           const updatedSetup = addSetupItem(sourceToAdd, productionSetup);
           if (!updatedSetup) return;
-          setProductionSetup(updatedSetup);
-          putProduction(updatedSetup._id.toString(), updatedSetup).then(() => {
-            refreshProduction();
-            setAddSourceModal(false);
-            setSelectedSource(undefined);
-          });
+          updateSourceInputSlotOnMultiviewLayouts(updatedSetup).then(
+            (result) => {
+              if (!result) return;
+              setProductionSetup(result);
+              updateMultiview(sourceToAdd, result);
+              refreshProduction();
+              setAddSourceModal(false);
+              setSelectedSource(undefined);
+            }
+          );
           setAddSourceStatus(undefined);
         } else {
           setAddSourceStatus({ success: false, steps: result.value.steps });
@@ -752,9 +748,11 @@ export default function ProductionConfiguration({ params }: PageProps) {
                   productionSetup
                 );
                 if (!updatedSetup) return;
-                setProductionSetup(updatedSetup);
-                putProduction(updatedSetup._id.toString(), updatedSetup).then(
-                  () => {
+                updateSourceInputSlotOnMultiviewLayouts(updatedSetup).then(
+                  (result) => {
+                    if (!result) return;
+                    setProductionSetup(updatedSetup);
+                    updateMultiview(selectedSourceRef, result);
                     setSelectedSourceRef(undefined);
                   }
                 );
@@ -771,11 +769,15 @@ export default function ProductionConfiguration({ params }: PageProps) {
 
           if (!updatedSetup) return;
 
-          setProductionSetup(updatedSetup);
-          putProduction(updatedSetup._id.toString(), updatedSetup).then(() => {
-            setRemoveSourceModal(false);
-            setSelectedSourceRef(undefined);
-          });
+          updateSourceInputSlotOnMultiviewLayouts(updatedSetup).then(
+            (result) => {
+              if (!result) return;
+              setProductionSetup(updatedSetup);
+              updateMultiview(selectedSourceRef, result);
+              setRemoveSourceModal(false);
+              setSelectedSourceRef(undefined);
+            }
+          );
           return;
         }
 
@@ -802,8 +804,13 @@ export default function ProductionConfiguration({ params }: PageProps) {
                 productionSetup
               );
               if (!updatedSetup) return;
-              setProductionSetup(updatedSetup);
-              putProduction(updatedSetup._id.toString(), updatedSetup);
+              updateSourceInputSlotOnMultiviewLayouts(updatedSetup).then(
+                (result) => {
+                  if (!result) return;
+                  setProductionSetup(result);
+                  updateMultiview(selectedSourceRef, result);
+                }
+              );
               return;
             }
           }
@@ -823,7 +830,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
           const pipelineId =
             productionSetup.production_settings.pipelines[i].pipeline_id;
           if (pipelineId) {
-            const renderingEngine = getRenderingEngine(pipelineId);
+            getRenderingEngine(pipelineId);
             if (selectedSourceRef.type === 'html') {
               await deleteHtmlSource(
                 pipelineId,
@@ -844,8 +851,10 @@ export default function ProductionConfiguration({ params }: PageProps) {
       const updatedSetup = removeSetupItem(selectedSourceRef, productionSetup);
 
       if (!updatedSetup) return;
-      setProductionSetup(updatedSetup);
-      putProduction(updatedSetup._id.toString(), updatedSetup).then(() => {
+      updateSourceInputSlotOnMultiviewLayouts(updatedSetup).then((result) => {
+        if (!result) return;
+        setProductionSetup(result);
+        updateMultiview(selectedSourceRef, result);
         setRemoveSourceModal(false);
         setSelectedSourceRef(undefined);
       });
@@ -957,7 +966,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
               onAbort={handleAbortAddSource}
               onConfirm={handleAddSource}
               status={addSourceStatus}
-              loading={loadingCreateStream}
+              loading={loadingCreateStream || updateMultiviewViewsLoading}
               locked={locked}
             />
           )}
@@ -975,11 +984,9 @@ export default function ProductionConfiguration({ params }: PageProps) {
                   locked={locked}
                   updateProduction={(updated) => {
                     updateProduction(productionSetup._id, updated);
-                    setUpdateMuliviewLayouts(true);
                   }}
                   onSourceUpdate={(source: SourceReference) => {
                     updateSource(source, productionSetup);
-                    setUpdateMuliviewLayouts(true);
                   }}
                   onSourceRemoval={(source: SourceReference) => {
                     if (productionSetup && productionSetup.isActive) {
@@ -997,7 +1004,6 @@ export default function ProductionConfiguration({ params }: PageProps) {
                       );
                       if (!updatedSetup) return;
                       setProductionSetup(updatedSetup);
-                      setUpdateMuliviewLayouts(true);
                       putProduction(
                         updatedSetup._id.toString(),
                         updatedSetup
@@ -1019,7 +1025,8 @@ export default function ProductionConfiguration({ params }: PageProps) {
                     loading={
                       loadingDeleteStream ||
                       deleteHtmlLoading ||
-                      deleteMediaLoading
+                      deleteMediaLoading ||
+                      updateMultiviewViewsLoading
                     }
                   />
                 )}

diff --git a/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx b/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx
@@ -110,13 +110,12 @@ export function ConfigureMultiviewModal({
   };
 
   const onUpdateLayoutPreset = async () => {
-    const noLayoutName = newMultiviewLayout?.name === '';
-    const defaultLayout = newMultiviewLayout?.name.includes('Default');
-    if (noLayoutName) {
+    if (newMultiviewLayout?.name === '') {
       toast.error(t('preset.layout_name_missing'));
       return;
     }
-    if (!newMultiviewLayout || defaultLayout) {
+
+    if (!newMultiviewLayout) {
       toast.error(t('preset.no_updated_layout'));
       return;
     }

diff --git a/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/Checkbox.tsx b/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/Checkbox.tsx
@@ -0,0 +1,27 @@
+import { useTranslate } from '../../../../i18n/useTranslate';
+
+type RemoveLayoutButtonProps = {
+  handleCheckboxChange: () => void;
+  isChecked: boolean;
+};
+
+export default function Checkbox({
+  handleCheckboxChange,
+  isChecked
+}: RemoveLayoutButtonProps) {
+  const t = useTranslate();
+  return (
+    <div className="flex items-center flex-row mb-5 pl-2 w-[50%]">
+      <input
+        type="checkbox"
+        id="clearPreset"
+        className="w-5 h-5 text-gray-500 accent-gray-500"
+        checked={isChecked}
+        onChange={handleCheckboxChange}
+      />
+      <label htmlFor="clearPreset" className="pl-2">
+        {t('preset.clear_layout')}
+      </label>
+    </div>
+  );
+}
diff --git a/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayout.tsx b/src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayout.tsx
@@ -24,6 +24,10 @@ export default function MultiviewLayout({
         const previewView = singleView.input_slot === 1002 && y === 0;
         const programView = singleView.input_slot === 1001 && y === 0;
 
+        const sourceId = inputList?.find(
+          (source) => source.label === label
+        )?.id;
+
         return (
           <div
             key={x + y}
@@ -45,9 +49,10 @@ export default function MultiviewLayout({
                   id: singleSource.id,
                   label: singleSource.label
                 }))}
-                value=""
+                value={sourceId ? sourceId : 'empty'}
                 update={(value) => handleChange(id || '', value)}
                 columnStyle
+                emptyFirstOption
               />
             )}
           </div>