From c66924501ee54352f5fb04ea09d53d8ed95a6a48 Mon Sep 17 00:00:00 2001
From: Linda Malm <109201562+malmen237@users.noreply.github.com>
Date: Thu, 19 Sep 2024 13:14:10 +0200
Subject: [PATCH] Feat/specify multiview layout when doing
 production-config(#16)

* feat: added another mv-preset and updated code to be arr instead of single-object

* feat: added optional style to be added to the options-dropdown

* feat: first draft of a multiview-layout setting

* feat: possible to create new layouts as multiview-previews and add it to productions
---
 src/api/manager/presets.ts                    |  11 +
 src/api/mongoClient/dbClient.ts               |   3 +-
 src/api/mongoClient/defaults/preset.ts        | 388 ++++++++++++------
 src/app/api/manager/presets/route.ts          |  28 +-
 src/app/production/[id]/page.tsx              |   1 +
 .../ConfigureOutputModal.tsx                  | 177 +++++---
 .../modal/configureOutputModal/Input.tsx      |   5 +-
 .../MultiviewLayoutSettings.tsx               | 171 ++++++++
 .../MultiviewSettings.tsx                     |  66 ++-
 .../modal/configureOutputModal/Options.tsx    |  24 +-
 .../startProduction/ConfigureOutputButton.tsx |   6 +-
 src/hooks/multiviewPreset.ts                  |  16 +
 src/hooks/useConfigureMultiviewLayout.tsx     |  65 +++
 src/hooks/useSetupMultiviewLayout.tsx         |  35 ++
 src/i18n/locales/en.ts                        |   8 +
 src/i18n/locales/sv.ts                        |   8 +
 16 files changed, 810 insertions(+), 202 deletions(-)
 create mode 100644 src/components/modal/configureOutputModal/MultiviewLayoutSettings.tsx
 create mode 100644 src/hooks/useConfigureMultiviewLayout.tsx
 create mode 100644 src/hooks/useSetupMultiviewLayout.tsx

diff --git a/src/api/manager/presets.ts b/src/api/manager/presets.ts
index 57fd66d..5fc45e2 100644
--- a/src/api/manager/presets.ts
+++ b/src/api/manager/presets.ts
@@ -18,6 +18,7 @@ export async function getMultiviewPresets(): Promise<MultiviewPreset[]> {
   const db = await getDatabase();
   return await db.collection<MultiviewPreset>('multiviews').find({}).toArray();
 }
+
 export async function getMultiviewPreset(
   id: string
 ): Promise<WithId<MultiviewPreset>> {
@@ -26,6 +27,16 @@ export async function getMultiviewPreset(
     .collection<MultiviewPreset>('multiviews')
     .findOne({ _id: new ObjectId(id) })) as WithId<MultiviewPreset>;
 }
+
+export async function putMultiviewPreset(
+  newMultiviewPreset: MultiviewPreset
+): Promise<void> {
+  const db = await getDatabase();
+  await db
+    .collection('multiviews')
+    .insertOne({ ...newMultiviewPreset, _id: new ObjectId() });
+}
+
 export async function putPreset(
   id: string,
   preset: PresetWithId
diff --git a/src/api/mongoClient/dbClient.ts b/src/api/mongoClient/dbClient.ts
index ab1780c..4ab4ccc 100644
--- a/src/api/mongoClient/dbClient.ts
+++ b/src/api/mongoClient/dbClient.ts
@@ -50,7 +50,8 @@ async function bootstrapDbCollections(db: Db) {
     const multiviews = await db.collection('multiviews').countDocuments();
     if (multiviews === 0) {
       Log().info('Bootstrapping database with default multiview');
-      await db.collection('multiviews').insertOne(defaultMultiview);
+
+      await db.collection('multiviews').insertMany(defaultMultiview);
     } else {
       await migrateMultiviewPresets(db);
     }
diff --git a/src/api/mongoClient/defaults/preset.ts b/src/api/mongoClient/defaults/preset.ts
index 7c91e82..e3022f6 100644
--- a/src/api/mongoClient/defaults/preset.ts
+++ b/src/api/mongoClient/defaults/preset.ts
@@ -181,125 +181,273 @@ export const ldOnlyPreset = {
   ]
 };
 
-export const defaultMultiview = {
-  _id: new ObjectId('6582ff61987fa290e66ba95c'),
-  name: '10 inputs HD',
-  layout: {
-    output_height: 1080,
-    output_width: 1920,
-    views: [
-      {
-        input_slot: 1002,
-        x: 0,
-        y: 0,
-        height: 540,
-        width: 960,
-        label: 'Preview'
-      },
-      {
-        input_slot: 1001,
-        x: 960,
-        y: 0,
-        height: 540,
-        width: 960,
-        label: 'Program'
-      },
-      {
-        input_slot: 1,
-        x: 0,
-        y: 540,
-        height: 270,
-        width: 384,
-        label: 'Input 1'
-      },
-      {
-        input_slot: 2,
-        x: 384,
-        y: 540,
-        height: 270,
-        width: 384,
-        label: 'Input 2'
-      },
-      {
-        input_slot: 3,
-        x: 768,
-        y: 540,
-        height: 270,
-        width: 384,
-        label: 'Input 3'
-      },
-      {
-        input_slot: 4,
-        x: 1152,
-        y: 540,
-        height: 270,
-        width: 384,
-        label: 'Input 4'
-      },
-      {
-        input_slot: 5,
-        x: 1536,
-        y: 540,
-        height: 270,
-        width: 384,
-        label: 'Input 5'
-      },
-      {
-        input_slot: 6,
-        x: 0,
-        y: 810,
-        height: 270,
-        width: 384,
-        label: 'Input 6'
-      },
-      {
-        input_slot: 7,
-        x: 384,
-        y: 810,
-        height: 270,
-        width: 384,
-        label: 'Input 7'
-      },
-      {
-        input_slot: 8,
-        x: 768,
-        y: 810,
-        height: 270,
-        width: 384,
-        label: 'Input 8'
-      },
-      {
-        input_slot: 9,
-        x: 1152,
-        y: 810,
-        height: 270,
-        width: 384,
-        label: 'Input 9'
-      },
-      {
-        input_slot: 10,
-        x: 1536,
-        y: 810,
-        height: 270,
-        width: 384,
-        label: 'Input 10'
-      }
-    ]
+export const defaultMultiview = [
+  {
+    _id: new ObjectId('6582ff61987fa290e66ba95c'),
+    name: '10 inputs HD',
+    layout: {
+      output_height: 1080,
+      output_width: 1920,
+      views: [
+        {
+          input_slot: 1002,
+          x: 0,
+          y: 0,
+          height: 540,
+          width: 960,
+          label: 'Preview'
+        },
+        {
+          input_slot: 1001,
+          x: 960,
+          y: 0,
+          height: 540,
+          width: 960,
+          label: 'Program'
+        },
+        {
+          input_slot: 1,
+          x: 0,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 1'
+        },
+        {
+          input_slot: 2,
+          x: 384,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 2'
+        },
+        {
+          input_slot: 3,
+          x: 768,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 3'
+        },
+        {
+          input_slot: 4,
+          x: 1152,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 4'
+        },
+        {
+          input_slot: 5,
+          x: 1536,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 5'
+        },
+        {
+          input_slot: 6,
+          x: 0,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 6'
+        },
+        {
+          input_slot: 7,
+          x: 384,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 7'
+        },
+        {
+          input_slot: 8,
+          x: 768,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 8'
+        },
+        {
+          input_slot: 9,
+          x: 1152,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 9'
+        },
+        {
+          input_slot: 10,
+          x: 1536,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 10'
+        }
+      ]
+    },
+    output: {
+      format: 'MPEG-TS-SRT',
+      frame_rate_d: 1,
+      frame_rate_n: 50,
+      local_ip: '0.0.0.0',
+      local_port: 1234,
+      remote_ip: '0.0.0.0',
+      remote_port: 1234,
+      srt_mode: 'listener',
+      srt_latency_ms: 120,
+      srt_passphrase: '',
+      video_format: 'AVC',
+      video_kilobit_rate: 5000,
+      speed_quality_balance: 'balanced',
+      pic_mode: 'pic_mode_ip'
+    }
   },
-  output: {
-    format: 'MPEG-TS-SRT',
-    frame_rate_d: 1,
-    frame_rate_n: 50,
-    local_ip: '0.0.0.0',
-    local_port: 1234,
-    remote_ip: '0.0.0.0',
-    remote_port: 1234,
-    srt_mode: 'listener',
-    srt_latency_ms: 120,
-    srt_passphrase: '',
-    video_format: 'AVC',
-    video_kilobit_rate: 5000,
-    speed_quality_balance: 'balanced',
-    pic_mode: 'pic_mode_ip'
+  {
+    _id: new ObjectId('65cb266c00fecda4a1faf977'),
+    name: '12 inputs HD',
+    layout: {
+      output_height: 1080,
+      output_width: 1920,
+      views: [
+        {
+          input_slot: 1002,
+          x: 0,
+          y: 0,
+          height: 540,
+          width: 960,
+          label: 'Preview'
+        },
+        {
+          input_slot: 1001,
+          x: 960,
+          y: 0,
+          height: 540,
+          width: 960,
+          label: 'Program'
+        },
+        {
+          input_slot: 1,
+          x: 0,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 1'
+        },
+        {
+          input_slot: 2,
+          x: 384,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 2'
+        },
+        {
+          input_slot: 3,
+          x: 768,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 3'
+        },
+        {
+          input_slot: 4,
+          x: 1152,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 4'
+        },
+        {
+          input_slot: 5,
+          x: 1536,
+          y: 540,
+          height: 270,
+          width: 384,
+          label: 'Input 5'
+        },
+        {
+          input_slot: 6,
+          x: 0,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 6'
+        },
+        {
+          input_slot: 7,
+          x: 384,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 7'
+        },
+        {
+          input_slot: 8,
+          x: 768,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 8'
+        },
+        {
+          input_slot: 9,
+          x: 1152,
+          y: 810,
+          height: 270,
+          width: 384,
+          label: 'Input 9'
+        },
+        {
+          input_slot: 10,
+          x: 1536,
+          y: 810,
+          height: 135,
+          width: 192,
+          label: 'VS'
+        },
+        {
+          input_slot: 11,
+          x: 1728,
+          y: 810,
+          height: 135,
+          width: 192,
+          label: 'UR'
+        },
+        {
+          input_slot: 12,
+          x: 1536,
+          y: 945,
+          height: 135,
+          width: 192,
+          label: 'OV'
+        },
+        {
+          input_slot: 13,
+          x: 1728,
+          y: 945,
+          height: 135,
+          width: 192,
+          label: 'CG'
+        }
+      ]
+    },
+    output: {
+      format: 'MPEG-TS-SRT',
+      frame_rate_d: 1,
+      frame_rate_n: 50,
+      local_ip: '0.0.0.0',
+      local_port: 4567,
+      remote_ip: '0.0.0.0',
+      remote_port: 1234,
+      srt_mode: 'listener',
+      srt_latency_ms: 60,
+      srt_passphrase: '',
+      video_format: 'AVC',
+      video_kilobit_rate: 5000,
+      speed_quality_balance: 'balanced',
+      pic_mode: 'pic_mode_ip'
+    }
   }
-};
+];
diff --git a/src/app/api/manager/presets/route.ts b/src/app/api/manager/presets/route.ts
index 1f24176..228f165 100644
--- a/src/app/api/manager/presets/route.ts
+++ b/src/app/api/manager/presets/route.ts
@@ -1,6 +1,11 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getPresets } from '../../../../api/manager/presets';
+import {
+  getPresets,
+  putMultiviewPreset
+} from '../../../../api/manager/presets';
 import { isAuthenticated } from '../../../../api/manager/auth';
+import { Log } from '../../../../api/logger';
+import { MultiviewPreset } from '../../../../interfaces/preset';
 
 export async function GET(request: NextRequest): Promise<NextResponse> {
   if (!(await isAuthenticated())) {
@@ -17,3 +22,24 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
     });
   }
 }
+
+export async function PUT(request: NextRequest): Promise<NextResponse> {
+  if (!(await isAuthenticated())) {
+    return new NextResponse(`Not Authorized!`, {
+      status: 403
+    });
+  }
+
+  try {
+    const body = (await request.json()) as MultiviewPreset;
+    const newMultiviewPreset = await putMultiviewPreset(body);
+    return await new NextResponse(JSON.stringify(newMultiviewPreset), {
+      status: 200
+    });
+  } catch (error) {
+    Log().warn('Could not update preset', error);
+    return new NextResponse(`Error searching DB! Error: ${error}`, {
+      status: 500
+    });
+  }
+}
diff --git a/src/app/production/[id]/page.tsx b/src/app/production/[id]/page.tsx
index dd67b62..53c2f4c 100644
--- a/src/app/production/[id]/page.tsx
+++ b/src/app/production/[id]/page.tsx
@@ -638,6 +638,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
             disabled={productionSetup?.isActive || locked}
             preset={selectedPreset}
             updatePreset={updatePreset}
+            production={productionSetup}
           />
           <StartProductionButton
             refreshProduction={refreshProduction}
diff --git a/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx b/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx
index c048947..0e07442 100644
--- a/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx
+++ b/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx
@@ -1,4 +1,4 @@
-import { Preset } from '../../../interfaces/preset';
+import { MultiviewPreset, Preset } from '../../../interfaces/preset';
 import { ProgramOutput, PipelineSettings } from '../../../interfaces/pipeline';
 import { Modal } from '../Modal';
 import Decision from './Decision';
@@ -9,7 +9,10 @@ import toast from 'react-hot-toast';
 import { MultiviewSettings } from '../../../interfaces/multiview';
 import MultiviewSettingsConfig from './MultiviewSettings';
 import PipelineSettingsConfig from './PipelineSettings';
+import MultiviewLayoutSettings from './MultiviewLayoutSettings';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
+import { Production } from '../../../interfaces/production';
+import { usePutMultiviewPreset } from '../../../hooks/multiviewPreset';
 
 export interface OutputStream {
   name: string;
@@ -29,13 +32,15 @@ type ConfigureOutputModalProps = {
   preset: Preset;
   onClose: () => void;
   updatePreset: (preset: Preset) => void;
+  production: Production | undefined;
 };
 
 export function ConfigureOutputModal({
   open,
   preset,
   onClose,
-  updatePreset
+  updatePreset,
+  production
 }: ConfigureOutputModalProps) {
   const defaultState = (pipelines: PipelineSettings[]) => {
     const streamsPerPipe = pipelines.map((pipe, i) => {
@@ -70,6 +75,10 @@ export function ConfigureOutputModal({
   const [portDuplicateIndexes, setPortDuplicateIndexes] = useState<number[]>(
     []
   );
+  const [layoutModalOpen, setLayoutModalOpen] = useState<string | null>(null);
+  const [newMultiviewPreset, setNewMultiviewPreset] =
+    useState<MultiviewPreset | null>(null);
+  const addNewPreset = usePutMultiviewPreset();
   const t = useTranslate();
 
   useEffect(() => {
@@ -87,6 +96,7 @@ export function ConfigureOutputModal({
   }, [preset]);
 
   const clearInputs = () => {
+    setLayoutModalOpen(null);
     setMultiviews(preset.pipelines[0].multiviews || []);
     setOutputStreams(defaultState(preset.pipelines));
     onClose();
@@ -130,6 +140,19 @@ export function ConfigureOutputModal({
     onClose();
   };
 
+  const onUpdateLayoutPreset = () => {
+    if (!newMultiviewPreset) {
+      toast.error(t('preset.no_updated_layout'));
+      return;
+    }
+    addNewPreset(newMultiviewPreset);
+    setLayoutModalOpen(null);
+  };
+
+  const closeLayoutModal = () => {
+    setLayoutModalOpen(null);
+  };
+
   const streamsToProgramOutputs = (
     pipelineIndex: number,
     outputStreams?: OutputStream[]
@@ -264,74 +287,94 @@ export function ConfigureOutputModal({
 
   return (
     <Modal open={open} outsideClick={() => clearInputs()}>
-      <div className="flex gap-3">
-        {preset.pipelines.map((pipeline, i) => {
-          return (
-            <PipelineSettingsConfig
-              key={pipeline.pipeline_readable_name}
-              title={`${
-                pipeline.pipeline_name
-                  ? pipeline.pipeline_name
-                  : pipeline.pipeline_readable_name
-              }`}
-              streams={outputstreams.filter((o) => o.pipelineIndex === i)}
-              addStream={addStream}
-              updateStream={updateStream}
-              updateStreams={updateStreams}
-              deleteStream={deleteStream}
-            />
-          );
-        })}
-        {multiviews &&
-          multiviews.length > 0 &&
-          multiviews.map((singleItem, index) => {
+      {!layoutModalOpen && (
+        <div className="flex gap-3">
+          {preset.pipelines.map((pipeline, i) => {
             return (
-              <div className="flex" key={index}>
-                <div className="min-h-full border-l border-separate opacity-10 my-12"></div>
-                <div className="flex flex-col">
-                  <MultiviewSettingsConfig
-                    multiview={singleItem}
-                    handleUpdateMultiview={(input) =>
-                      handleUpdateMultiview(input, index)
-                    }
-                    portDuplicateError={
-                      portDuplicateIndexes.length > 0
-                        ? portDuplicateIndexes.includes(index)
-                        : false
-                    }
-                  />
-                  <div
-                    className={`w-full flex ${
-                      multiviews.length > 1 ? 'justify-between' : 'justify-end'
-                    }`}
-                  >
-                    {multiviews.length > 1 && (
-                      <button
-                        type="button"
-                        title="Add another multiview"
-                        onClick={() => removeNewMultiview(index)}
-                      >
-                        <IconTrash
-                          className={`ml-4 text-button-delete hover:text-red-400`}
-                        />
-                      </button>
-                    )}
-                    {multiviews.length === index + 1 && (
-                      <button
-                        type="button"
-                        title="Add another multiview"
-                        onClick={() => addNewMultiview(singleItem)}
-                      >
-                        <IconPlus className="mr-2 text-green-400 hover:text-green-200" />
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </div>
+              <PipelineSettingsConfig
+                key={pipeline.pipeline_readable_name}
+                title={`${
+                  pipeline.pipeline_name
+                    ? pipeline.pipeline_name
+                    : pipeline.pipeline_readable_name
+                }`}
+                streams={outputstreams.filter((o) => o.pipelineIndex === i)}
+                addStream={addStream}
+                updateStream={updateStream}
+                updateStreams={updateStreams}
+                deleteStream={deleteStream}
+              />
             );
           })}
-      </div>
-      <Decision onClose={() => clearInputs()} onSave={onSave} />
+          {multiviews &&
+            multiviews.length > 0 &&
+            multiviews.map((singleItem, index) => {
+              return (
+                <div className="flex" key={index}>
+                  <div className="min-h-full border-l border-separate opacity-10 my-12"></div>
+                  <div className="flex flex-col">
+                    <MultiviewSettingsConfig
+                      openConfigModal={(input: string) =>
+                        setLayoutModalOpen(input)
+                      }
+                      lastItem={multiviews.length === index + 1}
+                      multiview={singleItem}
+                      handleUpdateMultiview={(input) =>
+                        handleUpdateMultiview(input, index)
+                      }
+                      portDuplicateError={
+                        portDuplicateIndexes.length > 0
+                          ? portDuplicateIndexes.includes(index)
+                          : false
+                      }
+                    />
+                    <div
+                      className={`w-full flex ${
+                        multiviews.length > 1
+                          ? 'justify-between'
+                          : 'justify-end'
+                      }`}
+                    >
+                      {multiviews.length > 1 && (
+                        <button
+                          type="button"
+                          title="Add another multiview"
+                          onClick={() => removeNewMultiview(index)}
+                        >
+                          <IconTrash
+                            className={`ml-4 text-button-delete hover:text-red-400`}
+                          />
+                        </button>
+                      )}
+                      {multiviews.length === index + 1 && (
+                        <button
+                          type="button"
+                          title="Add another multiview"
+                          onClick={() => addNewMultiview(singleItem)}
+                        >
+                          <IconPlus className="mr-2 text-green-400 hover:text-green-200" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      )}
+      {!!layoutModalOpen && (
+        <MultiviewLayoutSettings
+          configMode={layoutModalOpen}
+          production={production}
+          setNewMultiviewPreset={(newLayout) =>
+            setNewMultiviewPreset(newLayout)
+          }
+        />
+      )}
+      <Decision
+        onClose={() => (layoutModalOpen ? closeLayoutModal() : clearInputs())}
+        onSave={() => (layoutModalOpen ? onUpdateLayoutPreset() : onSave())}
+      />
     </Modal>
   );
 }
diff --git a/src/components/modal/configureOutputModal/Input.tsx b/src/components/modal/configureOutputModal/Input.tsx
index 25c0954..a2b0155 100644
--- a/src/components/modal/configureOutputModal/Input.tsx
+++ b/src/components/modal/configureOutputModal/Input.tsx
@@ -8,6 +8,7 @@ interface IInput {
   onKeyDown?: (e: KeyboardEvent) => void;
   size?: 'small' | 'large';
   inputError?: boolean;
+  placeholder?: string;
 }
 
 export default function Input({
@@ -17,7 +18,8 @@ export default function Input({
   type = 'text',
   onKeyDown,
   size = 'small',
-  inputError
+  inputError,
+  placeholder
 }: IInput) {
   const errorCss = 'border-red-500 focus:border-red-500 focus:outline';
 
@@ -34,6 +36,7 @@ export default function Input({
         } pl-2 pt-1 pb-1 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-gray-400 focus:outline-none ${
           inputError ? errorCss : ''
         }`}
+        placeholder={placeholder ? placeholder : ''}
       />
     </div>
   );
diff --git a/src/components/modal/configureOutputModal/MultiviewLayoutSettings.tsx b/src/components/modal/configureOutputModal/MultiviewLayoutSettings.tsx
new file mode 100644
index 0000000..9a37c87
--- /dev/null
+++ b/src/components/modal/configureOutputModal/MultiviewLayoutSettings.tsx
@@ -0,0 +1,171 @@
+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 {
+  MultiviewViewsWithId,
+  useSetupMultiviewLayout
+} from '../../../hooks/useSetupMultiviewLayout';
+import { Production } from '../../../interfaces/production';
+import { useConfigureMultiviewLayout } from '../../../hooks/useConfigureMultiviewLayout';
+import { SourceReference } from '../../../interfaces/Source';
+import Input from './Input';
+
+type ChangeLayout = {
+  defaultLabel?: string;
+  source?: SourceReference;
+  id: number;
+};
+
+export default function MultiviewLayoutSettings({
+  // configMode sets the mode of the configuration to create or edit, not implemented yet
+  configMode,
+  production,
+  setNewMultiviewPreset
+}: {
+  configMode: string;
+  production: Production | undefined;
+  setNewMultiviewPreset: (preset: MultiviewPreset | null) => void;
+}) {
+  const [selectedMultiviewPreset, setSelectedMultiviewPreset] =
+    useState<MultiviewPreset | null>(null);
+  const [changedLayout, setChangedLayout] = useState<ChangeLayout | null>(null);
+  const [newPresetName, setNewPresetName] = useState<string | null>(null);
+  const [multiviewPresets, loading] = useMultiviewPresets();
+  const { multiviewPresetLayout } = useSetupMultiviewLayout(
+    selectedMultiviewPreset
+  );
+  const { multiviewLayout } = useConfigureMultiviewLayout(
+    selectedMultiviewPreset,
+    changedLayout?.defaultLabel,
+    changedLayout?.source,
+    changedLayout?.id,
+    configMode,
+    newPresetName
+  );
+  const t = useTranslate();
+
+  const multiviewPresetNames = multiviewPresets?.map((preset) => preset.name)
+    ? multiviewPresets?.map((preset) => preset.name)
+    : [];
+
+  useEffect(() => {
+    setNewPresetName(null);
+  }, [configMode]);
+
+  useEffect(() => {
+    if (multiviewPresets && multiviewPresets[0]) {
+      setSelectedMultiviewPreset(multiviewPresets[0]);
+    }
+  }, [multiviewPresets]);
+
+  useEffect(() => {
+    if (multiviewLayout) {
+      setSelectedMultiviewPreset(multiviewLayout);
+      setNewMultiviewPreset(multiviewLayout);
+    } else {
+      setSelectedMultiviewPreset(null);
+      setNewMultiviewPreset(null);
+    }
+  }, [multiviewLayout]);
+
+  const handlePresetUpdate = (name: string) => {
+    const presetLayout = multiviewPresets?.find(
+      (singlePreset) => singlePreset.name === name
+    );
+    setNewPresetName(name);
+    if (presetLayout) {
+      setSelectedMultiviewPreset(presetLayout);
+    }
+  };
+
+  const handleChange = (id: number | undefined, value: string) => {
+    if (production && id && multiviewPresets) {
+      // Remove 2 from id to remove id for Preview- and Program-view
+      // Add 1 to index to get the correct input_slot
+      const idFirstInputView = id - 2 + 1;
+      const defaultLabel = multiviewPresets[0].layout.views.find(
+        (item) => item.input_slot === idFirstInputView
+      )?.label;
+      production.sources.map((source) => {
+        if (value === '') {
+          setChangedLayout({ defaultLabel, id });
+        }
+        if (source.label === value) {
+          setChangedLayout({ source, id });
+        }
+      });
+    }
+  };
+
+  const renderPresetModel = () => {
+    if (multiviewPresetLayout) {
+      return (
+        <div
+          className={`border-4 border-p/50 relative p-2 m-2`}
+          style={{
+            width: `${multiviewPresetLayout.layout.output_width}rem`,
+            height: `${multiviewPresetLayout.layout.output_height}rem`
+          }}
+        >
+          {multiviewPresetLayout.layout.views.map(
+            (singleView: MultiviewViewsWithId) => {
+              const { x, y, width, height, label, id } = singleView;
+              const previewView = singleView.input_slot === 1002;
+              const programView = singleView.input_slot === 1001;
+
+              return (
+                <div
+                  key={x + y}
+                  className="flex items-center justify-center border-[1px] border-p/50 absolute w-full"
+                  style={{
+                    width: `${width}rem`,
+                    height: `${height}rem`,
+                    top: `${y}rem`,
+                    left: `${x}rem`
+                  }}
+                >
+                  {production && (previewView || programView) && (
+                    <p className="flex items-center">{label}</p>
+                  )}
+                  {production && !previewView && !programView && (
+                    <Options
+                      label={label}
+                      options={production.sources.map(
+                        (singleSource) => singleSource.label
+                      )}
+                      value={label ? label : ''}
+                      update={(value) => handleChange(id, value)}
+                      columnStyle
+                    />
+                  )}
+                </div>
+              );
+            }
+          )}
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className="flex flex-col w-full h-full">
+      {renderPresetModel()}
+      <div className="flex flex-col w-[50%] h-full">
+        <Options
+          label={t('preset.select_multiview_preset')}
+          options={multiviewPresetNames}
+          value={selectedMultiviewPreset ? selectedMultiviewPreset.name : ''}
+          update={(value) => handlePresetUpdate(value)}
+        />
+        <Input
+          label={t('name')}
+          value={newPresetName ? newPresetName : ''}
+          update={(value) => handlePresetUpdate(value)}
+          placeholder={t('preset.new_preset_name')}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/modal/configureOutputModal/MultiviewSettings.tsx b/src/components/modal/configureOutputModal/MultiviewSettings.tsx
index e742005..b64f2bd 100644
--- a/src/components/modal/configureOutputModal/MultiviewSettings.tsx
+++ b/src/components/modal/configureOutputModal/MultiviewSettings.tsx
@@ -6,17 +6,22 @@ import { MultiviewPreset } from '../../../interfaces/preset';
 import Input from './Input';
 import Options from './Options';
 import toast from 'react-hot-toast';
+import { IconSettings } from '@tabler/icons-react';
 
 type MultiviewSettingsProps = {
+  lastItem: boolean;
   multiview?: MultiviewSettings;
   handleUpdateMultiview: (multiview: MultiviewSettings) => void;
   portDuplicateError: boolean;
+  openConfigModal: (input: string) => void;
 };
 
 export default function MultiviewSettingsConfig({
+  lastItem,
   multiview,
   handleUpdateMultiview,
-  portDuplicateError
+  portDuplicateError,
+  openConfigModal
 }: MultiviewSettingsProps) {
   const t = useTranslate();
   const [multiviewPresets, loading] = useMultiviewPresets();
@@ -24,6 +29,12 @@ export default function MultiviewSettingsConfig({
     MultiviewPreset | undefined
   >(multiview);
 
+  // TODO: When possible to edit layout, uncomment the following code
+  // const [modalOpen, setModalOpen] = useState(false);
+  // const toggleConfigModal = () => {
+  //   setModalOpen((state) => !state);
+  // };
+
   useEffect(() => {
     if (multiview) {
       setSelectedMultiviewPreset(multiview);
@@ -142,16 +153,55 @@ export default function MultiviewSettingsConfig({
   const multiviewOrPreset = multiview ? multiview : selectedMultiviewPreset;
 
   return (
-    <div className="flex flex-col gap-2 rounded p-4">
+    <div className="flex flex-col gap-2 rounded p-4 pr-7">
       <div className="flex justify-between">
         <h1 className="font-bold">{t('preset.multiview_output_settings')}</h1>
       </div>
-      <Options
-        label={t('preset.select_multiview_preset')}
-        options={multiviewPresetNames}
-        value={selectedMultiviewPreset ? selectedMultiviewPreset.name : ''}
-        update={(value) => handleSetSelectedMultiviewPreset(value)}
-      />
+      <div className="relative">
+        <Options
+          label={t('preset.select_multiview_layout')}
+          options={multiviewPresetNames}
+          value={selectedMultiviewPreset ? selectedMultiviewPreset.name : ''}
+          update={(value) => handleSetSelectedMultiviewPreset(value)}
+        />
+        {lastItem && (
+          // TODO: When possible to edit layout, uncomment the following code and remove the button below
+          <button
+            onClick={() => openConfigModal('create')}
+            title={t('preset.configure_layout')}
+            className={`absolute top-0 right-[-10%] min-w-fit`}
+          >
+            <IconSettings className="text-p" />
+          </button>
+          // <>
+          //   <button
+          //     onClick={toggleConfigModal}
+          //     title={t('preset.configure_layout')}
+          //     className={`absolute top-0 right-[-10%] min-w-fit`}
+          //   >
+          //     <IconSettings className="text-p" />
+          //   </button>
+          //   {modalOpen && (
+          //     <div className="absolute top-5 right-[-65%] flex flex-col">
+          //       <button
+          //         type="button"
+          //         className={`min-w-fit bg-zinc-700 rounded-t-sm p-1 border-b-[1px] border-b-zinc-600 hover:bg-zinc-600`}
+          //         onClick={() => openConfigModal('create')}
+          //       >
+          //         {t('preset.create_layout')}
+          //       </button>
+          //       <button
+          //         type="button"
+          //         className={`min-w-fit bg-zinc-700 rounded-b-sm  p-1 hover:bg-zinc-600`}
+          //         onClick={() => openConfigModal('edit')}
+          //       >
+          //         {t('preset.update_layout')}
+          //       </button>
+          //     </div>
+          //   )}
+          // </>
+        )}
+      </div>
       <div className="flex flex-col gap-3">
         <Options
           label={t('preset.video_format')}
diff --git a/src/components/modal/configureOutputModal/Options.tsx b/src/components/modal/configureOutputModal/Options.tsx
index 099da8f..8737c9a 100644
--- a/src/components/modal/configureOutputModal/Options.tsx
+++ b/src/components/modal/configureOutputModal/Options.tsx
@@ -1,15 +1,32 @@
+import { useTranslate } from '../../../i18n/useTranslate';
+
 type optionTypes = string;
 
-interface IOPtions {
+interface IOptions {
   label: string;
   options: optionTypes[];
   value: string;
   update: (value: string) => void;
+  columnStyle?: boolean;
 }
 
-export default function Options({ label, options, value, update }: IOPtions) {
+export default function Options({
+  label,
+  options,
+  value,
+  update,
+  columnStyle
+}: IOptions) {
+  const t = useTranslate();
   return (
-    <div className="flex mb-5 justify-between w-full px-2">
+    <div
+      className="flex mb-5 justify-between px-2 w-full"
+      style={
+        columnStyle
+          ? { flexDirection: 'column', alignItems: 'center' }
+          : { flexDirection: 'row' }
+      }
+    >
       <label className="flex items-center">{label}</label>
       <select
         onChange={(e) => {
@@ -18,6 +35,7 @@ export default function Options({ label, options, value, update }: IOPtions) {
         value={value}
         className="cursor-pointer px-2 border justify-center text-sm rounded-lg w-6/12 pt-1 pb-1 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-gray-400 focus:outline-none"
       >
+        {columnStyle && <option value={''}>{t('preset.select_option')}</option>}
         {options.map((value, i) => (
           <option value={value} key={value + i}>
             {value}
diff --git a/src/components/startProduction/ConfigureOutputButton.tsx b/src/components/startProduction/ConfigureOutputButton.tsx
index cee39ab..b014d47 100644
--- a/src/components/startProduction/ConfigureOutputButton.tsx
+++ b/src/components/startProduction/ConfigureOutputButton.tsx
@@ -6,17 +6,20 @@ import { Preset } from '../../interfaces/preset';
 import { useTranslate } from '../../i18n/useTranslate';
 import { Button } from '../button/Button';
 import { ConfigureOutputModal } from '../modal/configureOutputModal/ConfigureOutputModal';
+import { Production } from '../../interfaces/production';
 
 type ConfigureOutputButtonProps = {
   preset?: Preset;
   disabled?: boolean;
   updatePreset: (preset: Preset) => void;
+  production: Production | undefined;
 };
 
 export function ConfigureOutputButton({
   preset,
   updatePreset,
-  disabled
+  disabled,
+  production
 }: ConfigureOutputButtonProps) {
   const [modalOpen, setModalOpen] = useState(false);
   const toggleConfigModal = () => {
@@ -43,6 +46,7 @@ export function ConfigureOutputButton({
           preset={preset}
           onClose={toggleConfigModal}
           updatePreset={updatePreset}
+          production={production}
         />
       )}
     </>
diff --git a/src/hooks/multiviewPreset.ts b/src/hooks/multiviewPreset.ts
index 78b8b21..0e9ad67 100644
--- a/src/hooks/multiviewPreset.ts
+++ b/src/hooks/multiviewPreset.ts
@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { MultiviewPreset } from '../interfaces/preset';
 import { DataHook } from './types';
 import { WithId } from 'mongodb';
+import { API_SECRET_KEY } from '../utils/constants';
+
 export function useGetMultiviewPresets() {
   return async (): Promise<MultiviewPreset[]> => {
     const response = await fetch(`/api/manager/multiviews`, {
@@ -53,3 +55,17 @@ export function useMultiviewPresets(): DataHook<MultiviewPreset[]> {
 
   return [multiviewPresets, loading, undefined];
 }
+
+export function usePutMultiviewPreset() {
+  return async (newMultiviewPreset: MultiviewPreset): Promise<void> => {
+    const response = await fetch('/api/manager/presets', {
+      method: 'PUT',
+      headers: [['x-api-key', `Bearer ${API_SECRET_KEY}`]],
+      body: JSON.stringify(newMultiviewPreset)
+    });
+    if (response.ok) {
+      return;
+    }
+    throw await response.text();
+  };
+}
diff --git a/src/hooks/useConfigureMultiviewLayout.tsx b/src/hooks/useConfigureMultiviewLayout.tsx
new file mode 100644
index 0000000..768ba5e
--- /dev/null
+++ b/src/hooks/useConfigureMultiviewLayout.tsx
@@ -0,0 +1,65 @@
+import { use, useEffect, useState } from 'react';
+import { MultiviewPreset } from '../interfaces/preset';
+import { SourceReference } from '../interfaces/Source';
+import { MultiviewViewsWithId } from './useSetupMultiviewLayout';
+
+export function useConfigureMultiviewLayout(
+  preset: MultiviewPreset | null,
+  defaultLabel: string | undefined,
+  source: SourceReference | undefined,
+  id: number | undefined,
+  configMode: string,
+  name: string | null
+) {
+  const [updatedPreset, setUpdatedPreset] = useState<MultiviewPreset | null>();
+
+  useEffect(() => {
+    setUpdatedPreset(null);
+  }, [configMode]);
+
+  useEffect(() => {
+    if (preset && id && (defaultLabel || source)) {
+      const arr: MultiviewViewsWithId[] = [];
+      preset.layout.views.map((item, index) => {
+        if (index === id) {
+          if (source) {
+            arr.push({
+              ...item,
+              input_slot: source.input_slot,
+              label: source.label
+            });
+          }
+          if (defaultLabel) {
+            arr.push({
+              ...item,
+              input_slot: id,
+              label: defaultLabel
+            });
+          }
+        } else {
+          arr.push({
+            ...item
+          });
+        }
+      });
+      return setUpdatedPreset({
+        ...preset,
+        layout: {
+          ...preset.layout,
+          views: arr
+        }
+      });
+    }
+  }, [source?.input_slot, source?.label, defaultLabel]);
+
+  useEffect(() => {
+    if (preset) {
+      return setUpdatedPreset({
+        ...preset,
+        name: name ? name : preset.name
+      });
+    }
+  }, [name]);
+
+  return { multiviewLayout: updatedPreset };
+}
diff --git a/src/hooks/useSetupMultiviewLayout.tsx b/src/hooks/useSetupMultiviewLayout.tsx
new file mode 100644
index 0000000..66288b6
--- /dev/null
+++ b/src/hooks/useSetupMultiviewLayout.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { MultiviewPreset } from '../interfaces/preset';
+import { MultiviewViews } from '../interfaces/multiview';
+
+export type MultiviewViewsWithId = MultiviewViews & { id?: number };
+
+export function useSetupMultiviewLayout(preset: MultiviewPreset | null) {
+  const [multiviewPreset, setMultiviewPreset] = useState<MultiviewPreset>();
+  useEffect(() => {
+    if (preset) {
+      const downScale = 30;
+      const arr: MultiviewViewsWithId[] = [];
+      preset.layout.views.map((item, index) => {
+        arr.push({
+          ...item,
+          x: item.x / downScale,
+          y: item.y / downScale,
+          height: item.height / downScale,
+          width: item.width / downScale,
+          id: index
+        });
+      });
+      return setMultiviewPreset({
+        ...preset,
+        layout: {
+          ...preset.layout,
+          output_height: preset.layout.output_height / downScale + 0.5,
+          output_width: preset.layout.output_width / downScale + 0.5,
+          views: arr
+        }
+      });
+    }
+  }, [preset]);
+  return { multiviewPresetLayout: multiviewPreset };
+}
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 5843374..a09a4c3 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -606,7 +606,15 @@ export const en = {
     add_stream: 'Add stream',
     stream_name: 'Stream',
     multiview_output_settings: 'Multiview output',
+    select_multiview_layout: 'Layout',
+    configure_layout: 'Configure layout',
+    create_layout: 'Create new layout',
+    update_layout: 'Update layout',
+    no_updated_layout: 'No layout updated',
+    muliview_view: 'Input',
+    select_option: 'Select',
     select_multiview_preset: 'Preset',
+    new_preset_name: 'My layout',
     no_multiview_selected: 'No multiview selected',
     no_multiview_found: 'No multiview found',
     no_port_selected: 'Unique port needed'
diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
index b127506..1861e29 100644
--- a/src/i18n/locales/sv.ts
+++ b/src/i18n/locales/sv.ts
@@ -611,6 +611,14 @@ export const sv = {
     multiview_output_settings: 'Multiview utgång',
     no_multiview_selected: 'Ingen multiview vald',
     no_multiview_found: 'Hittade ingen multiview',
+    select_multiview_layout: 'Komposition',
+    configure_layout: 'Justera komposition',
+    create_layout: 'Skapa komposition',
+    update_layout: 'Uppdatera komposition',
+    no_updated_layout: 'Ingen uppdaterad komposition',
+    new_preset_name: 'Min komposition',
+    muliview_view: 'Ingång',
+    select_option: 'Välj',
     select_multiview_preset: 'Förinställningar',
     no_port_selected: 'Unik port krävs'
   },