Feat/restyle multiview layout (#32)

* fix: feedback updates

* feat: made the layout-config universal, made some file-restructure

* fix: some typos and minor changes

src/api/ateliereLive/websocket.ts

@@ -5,11 +5,6 @@ function createWebSocket(): Promise<WebSocket> {
     const ws = new WebSocket(`ws://${process.env.CONTROL_PANEL_WS}`);
     ws.on('error', reject);
     ws.on('open', () => {
-      // const send = ws.send.bind(ws);
-      // ws.send = (message) => {
-      //   console.debug(`[websocket] sending message: ${message}`);
-      //   send(message);
-      // };
       resolve(ws);
     });
   });

src/api/mongoClient/defaults/preset.ts

@@ -306,7 +306,7 @@ export const defaultMultiview = [
   },
   {
     _id: new ObjectId('65cb266c00fecda4a1faf977'),
-    name: '12 inputs HD',
+    name: '13 inputs HD',
     layout: {
       output_height: 1080,
       output_width: 1920,

src/app/api/manager/sources/[ingest_name]/[source_name]/thumbnail/route.ts

@@ -20,6 +20,7 @@ export async function GET(
       status: 403
     });
   }
+
   try {
     const ingestUuid = await getUuidFromIngestName(params.ingest_name);
     const sourceId = await getSourceIdFromSourceName(

src/app/api/manager/streams/route.ts

@@ -15,8 +15,10 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
       status: 403
     });
   }
+
   const data = await request.json();
   const createStreamRequest = data as CreateStreamRequestBody;
+
   return await createStream(
     createStreamRequest.source,
     createStreamRequest.production,

src/app/production/[id]/page.tsx

@@ -51,7 +51,7 @@ import { useGetFirstEmptySlot } from '../../../hooks/useGetFirstEmptySlot';
 import { useWebsocket } from '../../../hooks/useWebsocket';
 import { ConfigureMultiviewButton } from '../../../components/modal/configureMultiviewModal/ConfigureMultiviewButton';
 import { useUpdateSourceInputSlotOnMultiviewLayouts } from '../../../hooks/useUpdateSourceInputSlotOnMultiviewLayouts';
-import { useCheckProductionPipelinesAndControlPanels } from '../../../hooks/useCheckProductionPipelinesAndControlPanels';
+import { useCheckProductionPipelines } from '../../../hooks/useCheckProductionPipelines';
 
 export default function ProductionConfiguration({ params }: PageProps) {
   const t = useTranslate();
@@ -109,8 +109,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
   // Websocket
   const [closeWebsocket] = useWebsocket();
 
-  const [checkProductionPipelinesAndControlPanels] =
-    useCheckProductionPipelinesAndControlPanels();
+  const [checkProductionPipelines] = useCheckProductionPipelines();
 
   const { locked } = useContext(GlobalContext);
 
@@ -213,7 +212,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
       // check if production has pipelines in use or control panels in use, if so update production
       const production = config.isActive
         ? config
-        : checkProductionPipelinesAndControlPanels(config, pipelines);
+        : checkProductionPipelines(config, pipelines);
 
       putProduction(production._id, production);
       setProductionSetup(production);

src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx

@@ -7,10 +7,11 @@ import { MultiviewSettings } from '../../../interfaces/multiview';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
 import { Production } from '../../../interfaces/production';
 import deepclone from 'lodash.clonedeep';
-import MultiviewSettingsConfig from '../configureOutputModal/MultiviewSettings';
-import MultiviewLayoutSettings from '../configureOutputModal/MultiviewLayoutSettings/MultiviewLayoutSettings';
+import MultiviewSettingsConfig from './MultiviewSettings';
 import { usePutMultiviewLayout } from '../../../hooks/multiviewLayout';
 import Decision from '../configureOutputModal/Decision';
+import MultiviewLayoutSettings from './MultiviewLayoutSettings/MultiviewLayoutSettings';
+import { IconSettings } from '@tabler/icons-react';
 
 type ConfigureMultiviewModalProps = {
   open: boolean;
@@ -32,9 +33,6 @@ export function ConfigureMultiviewModal({
     []
   );
   const [layoutModalOpen, setLayoutModalOpen] = useState(false);
-  const [selectedMultiviewLayout, setSelectedMultiviewLayout] = useState<
-    { layout: TMultiviewLayout; tableIndex: number } | undefined
-  >();
   const [newMultiviewLayout, setNewMultiviewLayout] =
     useState<TMultiviewLayout | null>(null);
   const addNewLayout = usePutMultiviewLayout();
@@ -91,11 +89,6 @@ export function ConfigureMultiviewModal({
       return;
     }
 
-    const updatedMultiviews = multiviews.map((item, i) =>
-      i === multiviews.length - 1 ? { ...item, ...newMultiviewLayout } : item
-    );
-
-    setMultiviews(updatedMultiviews);
     addNewLayout(newMultiviewLayout);
     setLayoutModalOpen(false);
   };
@@ -115,6 +108,7 @@ export function ConfigureMultiviewModal({
     ports.forEach((port, index) => {
       if (seenPorts.has(port)) {
         duplicateIndices.push(index);
+
         // Also include the first occurrence if it's not already included
         const firstIndex = ports.indexOf(port);
         if (!duplicateIndices.includes(firstIndex)) {
@@ -173,13 +167,21 @@ export function ConfigureMultiviewModal({
             multiviews.map((singleItem, index) => {
               return (
                 <div className="flex" key={index}>
-                  <div className="min-h-full border-l border-separate opacity-10 my-12"></div>
+                  {index !== 0 && (
+                    <div className="min-h-full border-l border-separate opacity-10 my-12"></div>
+                  )}
+                  <button
+                    onClick={() => setLayoutModalOpen(true)}
+                    title={t('preset.configure_layout')}
+                    className={`absolute top-0 right-[-10%] min-w-fit`}
+                  >
+                    <IconSettings className="text-p" />
+                  </button>
                   <div className="flex flex-col">
                     <MultiviewSettingsConfig
                       productionId={production?._id}
                       openConfigModal={() => setLayoutModalOpen(true)}
                       newMultiviewLayout={newMultiviewLayout}
-                      tableIndex={index}
                       lastItem={multiviews.length === index + 1}
                       multiview={singleItem}
                       handleUpdateMultiview={(input) =>
@@ -190,8 +192,6 @@ export function ConfigureMultiviewModal({
                           ? portDuplicateIndexes.includes(index)
                           : false
                       }
-                      setSelectedMultiviewLayout={setSelectedMultiviewLayout}
-                      selectedMultiviewLayout={selectedMultiviewLayout}
                     />
                     <div
                       className={`w-full flex ${
@@ -230,7 +230,6 @@ export function ConfigureMultiviewModal({
       {layoutModalOpen && (
         <MultiviewLayoutSettings
           production={production}
-          selectedMultiviewLayout={selectedMultiviewLayout?.layout}
           setNewMultiviewPreset={setNewMultiviewLayout}
         />
       )}

src/components/modal/configureOutputModal/MultiviewLayoutSettings/MultiviewLayout.tsx → src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayout.tsx

@@ -1,6 +1,6 @@
 import { TListSource } from '../../../../interfaces/multiview';
 import { MultiviewPreset } from '../../../../interfaces/preset';
-import Options from '../Options';
+import Options from '../../configureOutputModal/Options';
 
 export default function MultiviewLayout({
   multiviewPresetLayout,

src/components/modal/configureOutputModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx → src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx

@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useMultiviewPresets } from '../../../../hooks/multiviewPreset';
-import Options from '../Options';
 import { MultiviewPreset } from '../../../../interfaces/preset';
 import { useTranslate } from '../../../../i18n/useTranslate';
 import { useSetupMultiviewLayout } from '../../../../hooks/useSetupMultiviewLayout';
 import { useMultiviewLayouts } from '../../../../hooks/multiviewLayout';
 import { Production } from '../../../../interfaces/production';
 import { useConfigureMultiviewLayout } from '../../../../hooks/useConfigureMultiviewLayout';
-import Input from '../Input';
 import { TMultiviewLayout } from '../../../../interfaces/preset';
 import { useCreateInputArray } from '../../../../hooks/useCreateInputArray';
-import MultiviewLayout from './MultiviewLayout';
 import { TListSource } from '../../../../interfaces/multiview';
+import Options from '../../configureOutputModal/Options';
+import Input from '../../configureOutputModal/Input';
+import MultiviewLayout from './MultiviewLayout';
 
 type ChangeLayout = {
   defaultLabel?: string;
@@ -21,11 +21,9 @@ type ChangeLayout = {
 
 export default function MultiviewLayoutSettings({
   production,
-  selectedMultiviewLayout,
   setNewMultiviewPreset
 }: {
   production: Production | undefined;
-  selectedMultiviewLayout: TMultiviewLayout | undefined;
   setNewMultiviewPreset: (preset: TMultiviewLayout | null) => void;
 }) {
   const [selectedMultiviewPreset, setSelectedMultiviewPreset] =
@@ -53,18 +51,21 @@ export default function MultiviewLayoutSettings({
     ? multiviewPresets?.map((preset) => preset.name)
     : [];
 
+  const availableMultiviewLayouts = multiviewLayouts?.filter(
+    (layout) => layout.productionId === production?._id || !layout.productionId
+  );
+  const multiviewLayoutNames =
+    availableMultiviewLayouts?.map((layout) => layout.name) || [];
+
   // This useEffect is used to set the drawn layout of the multiviewer on start,
   // if this fails then the modal will be empty
   useEffect(() => {
-    if (selectedMultiviewLayout) {
-      setLayoutToChange(selectedMultiviewLayout.name);
-      setSelectedMultiviewPreset(selectedMultiviewLayout);
-    } else if (multiviewPresets && multiviewPresets[0]) {
+    if (multiviewPresets && multiviewPresets[0]) {
       setSelectedMultiviewPreset(multiviewPresets[0]);
     }
-  }, [multiviewPresets, selectedMultiviewLayout]);
+  }, [multiviewPresets]);
 
-  const layoutNameAlreadyExist = multiviewLayouts?.find(
+  const layoutNameAlreadyExist = availableMultiviewLayouts?.find(
     (singlePreset) => singlePreset.name === multiviewLayout?.name
   )?.name;
 
@@ -78,23 +79,36 @@ export default function MultiviewLayoutSettings({
     }
   }, [multiviewLayout]);
 
-  const handlePresetUpdate = (name: string) => {
-    const presetLayout = multiviewPresets?.find(
+  const handleLayoutUpdate = (name: string, type: string) => {
+    const chosenLayout = availableMultiviewLayouts?.find(
+      (singleLayout) => singleLayout.name === name
+    );
+    const addBasePreset = multiviewPresets?.find(
       (singlePreset) => singlePreset.name === name
     );
     setLayoutToChange('');
     setNewPresetName(name);
-    if (presetLayout) {
-      setSelectedMultiviewPreset(presetLayout);
+
+    switch (type) {
+      case 'layout':
+        if (chosenLayout) {
+          setSelectedMultiviewPreset(chosenLayout);
+        }
+        break;
+      case 'preset':
+        if (addBasePreset) {
+          setSelectedMultiviewPreset(addBasePreset);
+        }
+        break;
     }
   };
 
   const handleChange = (viewId: string, value: string) => {
-    if (inputList && multiviewLayouts) {
+    if (inputList && availableMultiviewLayouts) {
       // Remove 2 from id to remove id for Preview- and Program-view
       // Add 1 to index to get the correct input_slot
       const idFirstInputView = parseInt(viewId, 10) - 2 + 1;
-      const defaultLabel = multiviewLayouts[0].layout.views.find(
+      const defaultLabel = availableMultiviewLayouts[0].layout.views.find(
         (item) => item.input_slot === idFirstInputView
       )?.label;
       inputList.map((source) => {
@@ -112,14 +126,17 @@ export default function MultiviewLayoutSettings({
     <>
       {selectedMultiviewPreset && (
         <div className="flex flex-col w-full h-full">
-          {multiviewPresetLayout && (
-            <MultiviewLayout
-              multiviewPresetLayout={multiviewPresetLayout}
-              inputList={inputList}
-              handleChange={handleChange}
+          <div className="flex flex-col self-center w-[40%] pt-5">
+            <Options
+              label={t('preset.select_multiview_layout')}
+              options={multiviewLayoutNames.map((singleItem) => ({
+                label: singleItem
+              }))}
+              value={
+                selectedMultiviewPreset ? selectedMultiviewPreset.name : ''
+              }
+              update={(value) => handleLayoutUpdate(value, 'layout')}
             />
-          )}
-          <div className="flex flex-col w-[50%] h-full">
             <Options
               label={t('preset.select_multiview_preset')}
               options={multiviewPresetNames.map((singleItem) => ({
@@ -128,12 +145,22 @@ export default function MultiviewLayoutSettings({
               value={
                 selectedMultiviewPreset ? selectedMultiviewPreset.name : ''
               }
-              update={handlePresetUpdate}
+              update={(value) => handleLayoutUpdate(value, 'preset')}
+            />
+          </div>
+
+          {multiviewPresetLayout && (
+            <MultiviewLayout
+              multiviewPresetLayout={multiviewPresetLayout}
+              inputList={inputList}
+              handleChange={handleChange}
             />
+          )}
+          <div className="flex flex-col w-[50%] h-full pt-3">
             <Input
               label={t('name')}
               value={newPresetName ? newPresetName : layoutToChange}
-              update={handlePresetUpdate}
+              update={(value) => handleLayoutUpdate(value, 'layout')}
               placeholder={t('preset.new_preset_name')}
             />
             {layoutNameAlreadyExist && (