fix: updated code, with dnd not working

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

@@ -661,6 +661,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
           <StartProductionButton
             refreshProduction={refreshProduction}
             production={productionSetup}
+            sources={sources}
             disabled={!selectedPreset ? true : false}
           />
         </div>

src/components/dragElement/DragItem.tsx

@@ -3,6 +3,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { SourceReference } from '../../interfaces/Source';
 import { ObjectId } from 'mongodb';
 import { Production } from '../../interfaces/production';
+import { ISource } from '../../hooks/useDragableItems';
 
 interface IDrag {
   id: ObjectId | string;

src/components/sourceCards/SourceCards.tsx

@@ -19,13 +19,17 @@ export default function SourceCards({
   const [items, moveItem] = useDragableItems(productionSetup.sources);
   const [selectingText, setSelectingText] = useState(false);
   if (!items) return null;
-  const sourceReferences = items.filter(
-    (item): item is SourceReference => item.type !== 'ingest_source'
-  );
   const isISource = (source: SourceReference | ISource): source is ISource => {
     return 'src' in source;
   };
 
+  const sourceReferences = items.filter(
+    // (item): item is SourceReference => item.type !== 'ingest_source'
+    (item) =>
+      (item as SourceReference).type === 'html' ||
+      (item as SourceReference).type === 'mediaplayer'
+  );
+
   const gridItems = items.map((source) => {
     const id = source._id ? source._id : '';
     const isSource = isISource(source);

src/components/startProduction/StartProductionButton.tsx

@@ -17,15 +17,18 @@ import { usePutProduction } from '../../hooks/productions';
 import toast from 'react-hot-toast';
 import { useDeleteMonitoring } from '../../hooks/monitoring';
 import { useMultiviewPresets } from '../../hooks/multiviewPreset';
+import { SourceWithId } from '../../interfaces/Source';
 
 type StartProductionButtonProps = {
   production: Production | undefined;
+  sources: Map<string, SourceWithId>;
   disabled: boolean;
   refreshProduction: () => void;
 };
 
 export function StartProductionButton({
   production,
+  sources,
   disabled,
   refreshProduction
 }: StartProductionButtonProps) {
@@ -45,6 +48,8 @@ export function StartProductionButton({
 
   const onClick = () => {
     if (!production) return;
+    console.log('sources', sources);
+    console.log('production', production);
     const hasUndefinedPipeline = production.production_settings.pipelines.some(
       (p) => !p.pipeline_name
     );

src/hooks/pipelines.ts

@@ -33,6 +33,7 @@ export function usePipeline(
     setLoading(true);
     getPipeline(id)
       .then((pipeline) => {
+        console.log('pipeline', pipeline);
         setPipeline(pipeline);
       })
       .catch((error) => {

src/hooks/useDragableItems.ts

@@ -33,7 +33,7 @@ export function useDragableItems(
         video_stream: source.video_stream,
         audio_stream: source.audio_stream,
         status: source.status,
-        type: source.type,
+        media_element: source.media_element,
         tags: source.tags,
         name: source.name
       };
@@ -49,7 +49,7 @@ export function useDragableItems(
         _id: refId,
         status: source.status,
         name: source.name,
-        type: source.type,
+        media_element: source.media_element,
         tags: source.tags,
         ingest_name: source.ingest_name,
         ingest_source_name: source.ingest_source_name,

src/interfaces/Source.ts

@@ -1,5 +1,5 @@
 import { ObjectId, WithId } from 'mongodb';
-export type SourceType = 'camera' | 'graphics' | 'microphone';
+export type MediaElement = 'camera' | 'graphics' | 'microphone';
 export type SourceStatus = 'ready' | 'new' | 'gone' | 'purge';
 export type Type = 'ingest_source' | 'html' | 'mediaplayer';
 export type VideoStream = {
@@ -20,7 +20,7 @@ export interface Source {
   _id?: ObjectId | string;
   status: SourceStatus;
   name: string;
-  type: SourceType;
+  media_element: MediaElement;
   tags: {
     location: string;
     [key: string]: string | undefined;