fix: audio-bugs on inventory-page

src/components/inventory/editView/AudioChannels/AudioChannels.tsx

@@ -12,9 +12,14 @@ import { channel, mapAudio } from '../../../../utils/audioMapping';
 interface IAudioChannels {
   source: Source;
   locked: boolean;
+  setDuplicateAudioValues: (values: boolean) => void;
 }
 
-export default function AudioChannels({ source, locked }: IAudioChannels) {
+export default function AudioChannels({
+  source,
+  locked,
+  setDuplicateAudioValues
+}: IAudioChannels) {
   type TOutputs = 'audio_mapping.outL' | 'audio_mapping.outR';
   const t = useTranslate();
   const outputs: TOutputs[] = ['audio_mapping.outL', 'audio_mapping.outR'];
@@ -25,6 +30,7 @@ export default function AudioChannels({ source, locked }: IAudioChannels) {
   } = useContext(EditViewContext);
 
   const [error, setError] = useState('');
+  const [duplicateError, setDuplicateError] = useState('');
   const [outputRows, setRows] = useState<{ id: string; value: string }[][]>([]);
 
   const { number_of_channels: numberOfChannels = 0 } = audioStream || {};
@@ -34,6 +40,22 @@ export default function AudioChannels({ source, locked }: IAudioChannels) {
     channelsInArray.push(i);
   }
 
+  useEffect(() => {
+    const isDuplicate = outputRows.some((row, rowIndex) =>
+      row.some((cell, cellIndex) =>
+        outputRows.some((innerRow, innerRowIndex) =>
+          innerRow.some((innerCell, innerCellIndex) =>
+            rowIndex !== innerRowIndex || cellIndex !== innerCellIndex
+              ? cell.value === innerCell.value && cell.value !== ''
+              : false
+          )
+        )
+      )
+    );
+
+    setDuplicateAudioValues(isDuplicate);
+  }, [outputRows, setDuplicateAudioValues]);
+
   useEffect(() => {
     let array = [channelsInArray.map(() => channel(''))];
 
@@ -189,9 +211,11 @@ export default function AudioChannels({ source, locked }: IAudioChannels) {
     });
 
     if (isAlreadyUsed) {
-      return setError(() =>
+      setDuplicateError(() =>
         t('audio_mapping.alreadyUsed', { value: e.target.value })
       );
+    } else {
+      setDuplicateError('');
     }
 
     if (Number(e.target.value) > max) {
@@ -232,6 +256,7 @@ export default function AudioChannels({ source, locked }: IAudioChannels) {
           />
         </div>
       ))}
+      <Error error={duplicateError} />
       <Error error={error} />
     </div>
   );

src/components/inventory/editView/AudioChannels/NumberInput.tsx

@@ -9,13 +9,15 @@ interface IInputRow {
   value: string;
   max: number;
   isDisabled: boolean;
+  duplicateError: boolean;
   updateRows: (e: IEvent) => void;
 }
 
 export default function InputRow({
   value,
   max,
   isDisabled,
+  duplicateError,
   updateRows
 }: IInputRow) {
   return (
@@ -27,8 +29,10 @@ export default function InputRow({
       onChange={updateRows}
       disabled={isDisabled}
       className={`w-[100%] h-[100%] appearance-none text-black text-center ${
-        styles.numberInput
-      } ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+        duplicateError ? 'bg-red-400' : ''
+      } ${styles.numberInput} ${
+        isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+      }`}
     />
   );
 }

src/components/inventory/editView/AudioChannels/Outputs.tsx

@@ -31,6 +31,33 @@ export default function Outputs({
   locked,
   updateRows
 }: IOutput) {
+  const findDuplicateValues = () => {
+    const duplicateOutputIndices: number[] = [];
+    const seenOutputs = new Set();
+
+    contents.forEach((output, index) => {
+      if (seenOutputs.has(output.value) && output.value !== '') {
+        duplicateOutputIndices.push(index);
+
+        // Also include the first occurrence if it's not already included
+        const firstIndex = contents.findIndex(
+          (item) => item.value === output.value
+        );
+        if (!duplicateOutputIndices.includes(firstIndex)) {
+          duplicateOutputIndices.push(firstIndex);
+        }
+      } else if (output.value !== '') {
+        seenOutputs.add(output.value);
+      }
+    });
+
+    return {
+      duplicateOutputIndices
+    };
+  };
+
+  const { duplicateOutputIndices } = findDuplicateValues();
+
   return (
     <div className="flex">
       {contents.map(({ value, id }, index) => {
@@ -55,6 +82,7 @@ export default function Outputs({
               isDisabled={small || !isEnabled || locked}
               max={max}
               value={value}
+              duplicateError={duplicateOutputIndices.includes(index)}
               updateRows={(e: IEvent) =>
                 updateRows && updateRows(e, rowIndex, index, id)
               }

src/components/inventory/editView/EditView.tsx

@@ -5,6 +5,7 @@ import { SourceWithId } from '../../../interfaces/Source';
 import UpdateButtons from './UpdateButtons';
 import AudioChannels from './AudioChannels/AudioChannels';
 import ImageComponent from '../../image/ImageComponent';
+import { useState } from 'react';
 
 export default function EditView({
   source,
@@ -21,6 +22,8 @@ export default function EditView({
   removeInventorySourceItem: (id: string) => Promise<Response | undefined>;
   locked: boolean;
 }) {
+  const [duplicateAudioValues, setDuplicateAudioValues] = useState(false);
+
   return (
     <EditViewContext source={source} updateSource={updateSource}>
       <div className="flex flex-row mb-10">
@@ -31,14 +34,19 @@ export default function EditView({
       </div>
 
       <div className="flex">
-        <AudioChannels source={source} locked={locked} />
+        <AudioChannels
+          source={source}
+          locked={locked}
+          setDuplicateAudioValues={setDuplicateAudioValues}
+        />
       </div>
       <UpdateButtons
         source={source}
         close={close}
         purgeInventorySource={purgeInventorySource}
         removeInventorySourceItem={removeInventorySourceItem}
         locked={locked}
+        duplicateAudioValues={duplicateAudioValues}
       />
     </EditViewContext>
   );

src/components/inventory/editView/UpdateButtons.tsx

@@ -14,14 +14,16 @@ type UpdateButtonsProps = {
   removeInventorySourceItem: (id: string) => Promise<Response | undefined>;
   close: () => void;
   locked: boolean;
+  duplicateAudioValues: boolean;
 };
 
 export default function UpdateButtons({
   source,
   close,
   purgeInventorySource,
   removeInventorySourceItem,
-  locked
+  locked,
+  duplicateAudioValues
 }: UpdateButtonsProps) {
   const t = useTranslate();
   const {
@@ -74,12 +76,12 @@ export default function UpdateButtons({
         </Button>
         <Button
           className={`${
-            locked || isSame
+            locked || isSame || duplicateAudioValues
               ? 'bg-button-bg/50 text-button-text/50 pointer-events-none'
               : 'text-button-text bg-button-bg'
           } ml-5 relative flex`}
           type="submit"
-          disabled={isSame || locked}
+          disabled={isSame || locked || duplicateAudioValues}
         >
           {loading ? (
             <Loader className="w-10 h-5" />

src/i18n/locales/sv.ts

@@ -606,7 +606,7 @@ export const sv = {
     outR: 'Ut H',
     maxError: 'Max värde är {{max}}',
     minError: 'Minsta värde är 1',
-    alreadyUsed: 'Värdet {{value}} är redan användt',
+    alreadyUsed: 'Värdet {{value}} är redan använt',
     emptyBetween: 'Du kan inte ha tomma kanaler mellan två nummer',
     title: 'Ljudmappning'
   },