fix: fix drag and drop and lint

Eyevinn · Sep 4, 2024 · 34e459e · 34e459e
1 parent f229224
commit 34e459e
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 301 deletions.
diff --git a/src/api/agileLive/pipelines/multiviews/multiviews.ts b/src/api/agileLive/pipelines/multiviews/multiviews.ts
@@ -53,11 +53,11 @@ export async function createMultiviewForPipeline(
   }
   const pipelineUUID =
     productionSettings.pipelines[multiviewIndex].pipeline_id!;
-    const sources = await getSourcesByIds(
-      sourceRefs
-        .filter((ref) => ref._id !== undefined)
-        .map((ref) => ref._id!.toString())
-    );
+  const sources = await getSourcesByIds(
+    sourceRefs
+      .filter((ref) => ref._id !== undefined)
+      .map((ref) => ref._id!.toString())
+  );
   const sourceRefsWithLabels = sourceRefs.map((ref) => {
     if (!ref.label) {
       const source = sources.find(

diff --git a/src/api/agileLive/websocket.ts b/src/api/agileLive/websocket.ts
@@ -41,5 +41,5 @@ export async function createControlPanelWebSocket() {
     close: () => {
       ws.close();
     }
-  }
+  };
 }
diff --git a/src/api/manager/workflow.ts b/src/api/manager/workflow.ts
@@ -50,6 +50,7 @@ import { Monitoring } from '../../interfaces/monitoring';
 import { getDatabase } from '../mongoClient/dbClient';
 import { updatedMonitoringForProduction } from './job/syncMonitoring';
 import { createControlPanelWebSocket } from '../agileLive/websocket';
+import { ObjectId } from 'mongodb';
 
 const isUsed = (pipeline: ResourcesPipelineResponse) => {
   const hasStreams = pipeline.streams.length > 0;
@@ -90,7 +91,7 @@ async function connectIngestSources(
       source.ingest_source_name,
       false
     );
-    const audioSettings = await getAudioMapping(source._id);
+    const audioSettings = await getAudioMapping(new ObjectId(source._id));
     const newAudioMapping = audioSettings?.audio_stream?.audio_mapping;
     const audioMapping = newAudioMapping?.length ? newAudioMapping : [[0, 1]];
 
@@ -310,8 +311,12 @@ export async function stopProduction(
   );
 
   const controlPanelWS = await createControlPanelWebSocket();
-  const htmlSources = production.sources.filter((source) => source.type === 'html');
-  const mediaPlayerSources = production.sources.filter((source) => source.type === 'mediaplayer');
+  const htmlSources = production.sources.filter(
+    (source) => source.type === 'html'
+  );
+  const mediaPlayerSources = production.sources.filter(
+    (source) => source.type === 'mediaplayer'
+  );
 
   for (const source of production.sources) {
     for (const stream_uuid of source.stream_uuids || []) {
@@ -322,7 +327,9 @@ export async function stopProduction(
   }
 
   htmlSources.map((source) => controlPanelWS.closeHtml(source.input_slot));
-  mediaPlayerSources.map((source) => controlPanelWS.closeMediaplayer(source.input_slot));
+  mediaPlayerSources.map((source) =>
+    controlPanelWS.closeMediaplayer(source.input_slot)
+  );
 
   for (const id of pipelineIds) {
     Log().info(`Stopping pipeline '${id}'`);
@@ -458,20 +465,28 @@ export async function startProduction(
     // Get sources from the DB
     // Skapa en createHtmlWebSocket, spara
     const controlPanelWS = await createControlPanelWebSocket();
-    const htmlSources = production.sources.filter((source) => source.type === 'html');
-    const mediaPlayerSources = production.sources.filter((source) => source.type === 'mediaplayer');
+    const htmlSources = production.sources.filter(
+      (source) => source.type === 'html'
+    );
+    const mediaPlayerSources = production.sources.filter(
+      (source) => source.type === 'mediaplayer'
+    );
 
     htmlSources.map((source) => controlPanelWS.createHtml(source.input_slot));
-    mediaPlayerSources.map((source) => controlPanelWS.createMediaplayer(source.input_slot));
+    mediaPlayerSources.map((source) =>
+      controlPanelWS.createMediaplayer(source.input_slot)
+    );
 
     controlPanelWS.close();
-    
+
     // Nedan behöver göras efter att vi har skapat en produktion
     // TODO: Hämta production.sources, för varje html-reference --> create i createHtmlWebSocket, för varje mediaplayer i production.sources skapa en createWebSocket
     const sources = await getSourcesByIds(
-      production.sources.filter((source) => source._id !== undefined).map((source) => {
-        return source._id!.toString();
-      })
+      production.sources
+        .filter((source) => source._id !== undefined)
+        .map((source) => {
+          return source._id!.toString();
+        })
     ).catch((error) => {
       if (error === "Can't connect to Database") {
         throw "Can't connect to Database";

diff --git a/src/components/sourceCard/SourceCard.tsx b/src/components/sourceCard/SourceCard.tsx
@@ -100,14 +100,15 @@ export default function SourceCard({
         <button
           className="absolute bottom-0 right-0 text-p hover:border-l hover:border-t bg-red-700 hover:bg-red-600 min-w-fit p-1 rounded-tl-lg"
           onClick={() => {
-            onSourceRemoval({
-              _id: sourceRef ? sourceRef._id : source?._id.toString()!,
-              type: sourceRef ? sourceRef.type : 'ingest_source',
-              // TODO: Fix this issue
-              label: sourceRef ? sourceRef.label : '',
-              input_slot: sourceRef ? sourceRef.input_slot : 0,
-              stream_uuids: source?.stream_uuids
-            });
+            if (source) {
+              onSourceRemoval({
+                _id: sourceRef ? sourceRef._id : source?._id.toString(),
+                type: sourceRef ? sourceRef.type : 'ingest_source',
+                label: sourceRef ? sourceRef.label : '',
+                input_slot: sourceRef ? sourceRef.input_slot : 0,
+                stream_uuids: source?.stream_uuids
+              });
+            }
           }}
         >
           <IconTrash className="text-p w-4 h-4" />

diff --git a/src/components/sourceCards/SourceCards.tsx b/src/components/sourceCards/SourceCards.tsx
@@ -5,10 +5,7 @@ import { SourceReference } from '../../interfaces/Source';
 import { Production } from '../../interfaces/production';
 import DragItem from '../dragElement/DragItem';
 import SourceCard from '../sourceCard/SourceCard';
-import { EmptySlotCard } from '../emptySlotCard/EmptySlotCard';
-import { useDragableItems } from '../../hooks/useDragableItems';
-import { useSources } from '../../hooks/sources/useSources';
-
+import { ISource, useDragableItems } from '../../hooks/useDragableItems';
 export default function SourceCards({
   productionSetup,
   sourceRef,
@@ -22,142 +19,58 @@ export default function SourceCards({
   onSourceUpdate: (source: SourceReference) => void;
   onSourceRemoval: (source: SourceReference) => void;
 }) {
-  const [items, moveItems] = useDragableItems(productionSetup.sources);
-  const referenceItems = productionSetup.sources;
+  const [items, moveItem, loading] = useDragableItems(productionSetup.sources);
   const [selectingText, setSelectingText] = useState(false);
-  const currentOrder: SourceReference[] = referenceItems.map((source) => {
-    return {
-      _id: sourceRef ? sourceRef._id : source._id.toString(),
-      type: sourceRef ? sourceRef.type : 'ingest_source',
-      label: sourceRef ? sourceRef.label : source.label,
-      input_slot: sourceRef ? sourceRef.input_slot : source.input_slot,
-      stream_uuids: source.stream_uuids
-    };
-  });
-  const [inventorySources, loading] = useSources();
 
-  const ingRefs = referenceItems.filter((ri) => ri.type === 'ingest_source');
-
-  const isIngestSource = (sourceR: SourceReference) => {
-    const source = inventorySources.get(sourceR._id);
-    if (!source) return false;
-    return true;
-  };
+  if (loading || !items) return null;
 
-  const gridItems: React.JSX.Element[] = [];
-  let tempItems = [...items];
-  let firstEmptySlot = items.length + 1;
+  // Filter SourceReference and ISource objects correctly
+  const sourceReferences = items.filter(
+    (item): item is SourceReference => item.type !== 'ingest_source'
+  );
 
-  let tempReferenceItems = [...referenceItems];
-
-  let bigItemsArray = [...tempItems, ...referenceItems];
+  const isISource = (source: SourceReference | ISource): source is ISource => {
+    // Use properties unique to ISource to check the type
+    return 'src' in source;
+  };
 
-  if (!bigItemsArray || bigItemsArray.length === 0) return null;
-  for (let i = 0; i < bigItemsArray[bigItemsArray.length - 1].input_slot; i++) {
-    if (!bigItemsArray.some((source) => source.input_slot === i + 1)) {
-      firstEmptySlot = i + 1;
-      break;
-    }
-  }
-  for (let i = 0; i < bigItemsArray[bigItemsArray.length - 1].input_slot; i++) {
-    tempItems.every((source) => {
-      if (source.input_slot === i + 1) {
-        tempItems = tempItems.filter((i) => i._id !== source._id);
-        // console.log(`Adding source "${source.name}" to grid`);
-        if (!productionSetup.isActive) {
-          gridItems.push(
-            <DragItem
-              key={`${source.ingest_source_name}-${source.input_slot}-key`}
-              id={source._id}
-              onMoveItem={moveItem}
-              previousOrder={productionSetup.sources}
-              currentOrder={currentOrder}
-              productionSetup={productionSetup}
-              updateProduction={updateProduction}
-              selectingText={selectingText}
-            >
-              <SourceCard
-                source={source}
-                sourceRef={sourceRef}
-                label={source.label}
-                src={source.src || ''}
-                onSourceUpdate={onSourceUpdate}
-                onSourceRemoval={onSourceRemoval}
-                onSelectingText={(isSelecting: boolean) =>
-                  setSelectingText(isSelecting)
-                }
-              />
-            </DragItem>
-          );
-        } else {
-          gridItems.push(
-            <SourceCard
-              key={
-                source.type === 'ingest_source'
-                  ? `${source.ingest_source_name}-${source.input_slot}-key`
-                  : ''
-              }
-              source={source.type === 'ingest_source' ? source : undefined}
-              sourceRef={sourceRef}
-              label={source.label}
-              src={source.src || ''}
-              onSourceUpdate={onSourceUpdate}
-              onSourceRemoval={onSourceRemoval}
-              onSelectingText={(isSelecting: boolean) =>
-                setSelectingText(isSelecting)
-              }
-            />
-          );
-        }
-        return false;
-      } else {
-        // console.log(`No source found on input slot: ${i + 1}`);
-        // console.log(`Adding empty slot to grid`);
-        if (productionSetup.isActive) {
-          gridItems.push(
-            <EmptySlotCard
-              key={i}
-              inputSlot={i + 1}
-              isFirstEmptySlot={firstEmptySlot === i + 1}
-            />
-          );
-        }
+  const gridItems = items.map((source) => {
+    const isSource = isISource(source);
 
-        return false;
-      }
-    });
+    return (
+      <DragItem
+        key={source._id.toString()}
+        id={source._id.toString()}
+        onMoveItem={moveItem}
+        previousOrder={productionSetup.sources}
+        currentOrder={sourceReferences}
+        productionSetup={productionSetup}
+        updateProduction={updateProduction}
+        selectingText={selectingText}
+      >
+        {isSource ? (
+          <SourceCard
+            source={source}
+            sourceRef={sourceRef}
+            label={source.label}
+            src={source.src}
+            onSourceUpdate={onSourceUpdate}
+            onSourceRemoval={onSourceRemoval}
+            onSelectingText={(isSelecting) => setSelectingText(isSelecting)}
+          />
+        ) : (
+          <SourceCard
+            sourceRef={source}
+            label={source.label}
+            src={''}
+            onSourceUpdate={onSourceUpdate}
+            onSourceRemoval={onSourceRemoval}
+            onSelectingText={(isSelecting) => setSelectingText(isSelecting)}
+          />
+        )}
+      </DragItem>
+    );
+  });
 
-    tempReferenceItems
-      .filter((refs) => refs.type !== 'ingest_source')
-      .forEach((sourceRef) => {
-        if (sourceRef.input_slot === i + 1) {
-          if (!productionSetup.isActive) {
-            gridItems.push(
-              <DragItem
-                id={sourceRef._id}
-                key={sourceRef.input_slot}
-                onMoveItem={moveItem}
-                previousOrder={productionSetup.sources}
-                updateProduction={updateProduction}
-                selectingText={selectingText}
-                productionSetup={productionSetup}
-                currentOrder={currentOrder}
-              >
-                <SourceCard
-                  sourceRef={sourceRef}
-                  label={sourceRef.label}
-                  onSourceUpdate={onSourceUpdate}
-                  onSourceRemoval={onSourceRemoval}
-                  onSelectingText={(isSelecting) =>
-                    setSelectingText(isSelecting)
-                  }
-                  src=""
-                />
-              </DragItem>
-            );
-          }
-        }
-      });
-  }
   return <>{gridItems}</>;
 }