Fix/labels get reset (#31)

* feat: updating label name and input-slot will both be saved in db and used when starting prod * fix: source-card checks for production-source-label instead of inventory-source-label * fix: lint-error and review-comment * fix: thumbnails show on locked screen
OwnZones · Oct 8, 2024 · a7ff3b9 · a7ff3b9
1 parent 8535b7c
commit a7ff3b9
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 89 deletions.
diff --git a/src/app/production/[id]/page.tsx b/src/app/production/[id]/page.tsx
@@ -51,16 +51,13 @@ 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';
 
 export default function ProductionConfiguration({ params }: PageProps) {
   const t = useTranslate();
 
   //SOURCES
   const [sources] = useSources();
-  // TODO: Is this useEffect needed, filteredSources isn't used anymore?
-  const [filteredSources, setFilteredSources] = useState(
-    new Map<string, SourceWithId>()
-  );
   const [selectedValue, setSelectedValue] = useState<string>(
     t('production.add_other_source_type')
   );
@@ -112,6 +109,9 @@ export default function ProductionConfiguration({ params }: PageProps) {
   // Websocket
   const [closeWebsocket] = useWebsocket();
 
+  const [checkProductionPipelinesAndControlPanels] =
+    useCheckProductionPipelinesAndControlPanels();
+
   const { locked } = useContext(GlobalContext);
 
   const memoizedProduction = useMemo(() => productionSetup, [productionSetup]);
@@ -144,8 +144,14 @@ export default function ProductionConfiguration({ params }: PageProps) {
 
   useEffect(() => {
     if (updateMuliviewLayouts && productionSetup && !productionSetup.isActive) {
-      updateSourceInputSlotOnMultiviewLayouts(productionSetup);
-      setUpdateMuliviewLayouts(false);
+      updateSourceInputSlotOnMultiviewLayouts(productionSetup).then(
+        (updatedSetup) => {
+          if (!updatedSetup) return;
+          setProductionSetup(updatedSetup);
+          setUpdateMuliviewLayouts(false);
+          refreshProduction();
+        }
+      );
     }
   }, [productionSetup, updateMuliviewLayouts]);
 
@@ -174,6 +180,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
       };
     });
   };
+
   const setSelectedPipelineName = (
     pipelineIndex: number,
     pipelineName?: string,
@@ -201,41 +208,12 @@ export default function ProductionConfiguration({ params }: PageProps) {
     });
   };
 
-  const checkProductionPipelinesAndControlPanels = (production: Production) => {
-    if (!production.production_settings) return production;
-    const productionPipelines = production.production_settings?.pipelines;
-
-    const activePipelinesForProduction = pipelines?.filter((pipeline) =>
-      productionPipelines.some(
-        (productionPipeline) =>
-          productionPipeline.pipeline_name === pipeline.name
-      )
-    );
-    const availablePipelines = productionPipelines.map((productionPipeline) => {
-      const activePipeForProduction = activePipelinesForProduction?.find(
-        (p) => p.name === productionPipeline.pipeline_name
-      );
-      if (activePipeForProduction?.streams.length === 0) {
-        return productionPipeline;
-      }
-      return productionPipeline;
-    });
-
-    return {
-      ...production,
-      production_settings: {
-        ...production.production_settings,
-        pipelines: availablePipelines
-      }
-    };
-  };
-
   const refreshProduction = () => {
     getProduction(params.id).then((config) => {
       // check if production has pipelines in use or control panels in use, if so update production
       const production = config.isActive
         ? config
-        : checkProductionPipelinesAndControlPanels(config);
+        : checkProductionPipelinesAndControlPanels(config, pipelines);
 
       putProduction(production._id, production);
       setProductionSetup(production);
@@ -261,29 +239,6 @@ export default function ProductionConfiguration({ params }: PageProps) {
     refreshProduction();
   }, []);
 
-  // TODO: Is this useEffect needed, filteredSources isn't used anymore?
-  useEffect(() => {
-    if (productionSetup) {
-      const hasMissingSource = productionSetup?.sources.find(
-        (productionSource) => {
-          if (
-            !['html', 'mediaplayer'].includes(productionSource.type) &&
-            sources
-          ) {
-            !Array.from(sources.values()).find(
-              (source) => source._id.toString() === productionSource._id
-            );
-          }
-        }
-      );
-      if (hasMissingSource) {
-        toast.error(t('error.missing_sources_in_db'));
-      }
-    }
-
-    setFilteredSources(sources);
-  }, [sources]);
-
   useEffect(() => {
     if (selectedValue === t('production.source')) {
       setInventoryVisible(true);
@@ -326,6 +281,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
   ) => {
     const updatedSetup = updateSetupItem(source, productionSetup);
     setProductionSetup(updatedSetup);
+    setUpdateMuliviewLayouts(true);
     putProduction(updatedSetup._id.toString(), updatedSetup);
     const pipeline = updatedSetup.production_settings.pipelines[0];
 

diff --git a/src/components/sourceCard/SourceCard.tsx b/src/components/sourceCard/SourceCard.tsx
@@ -1,7 +1,8 @@
 'use client';
+
 import React, { ChangeEvent, KeyboardEvent, useContext, useState } from 'react';
 import { IconTrash } from '@tabler/icons-react';
-import { SourceReference, Type } from '../../interfaces/Source';
+import { SourceReference } from '../../interfaces/Source';
 import { useTranslate } from '../../i18n/useTranslate';
 import { ISource } from '../../hooks/useDragableItems';
 import ImageComponent from '../image/ImageComponent';
@@ -10,38 +11,31 @@ import { GlobalContext } from '../../contexts/GlobalContext';
 
 type SourceCardProps = {
   source?: ISource;
-  label: string;
   onSourceUpdate: (source: SourceReference) => void;
   onSourceRemoval: (source: SourceReference) => void;
   onSelectingText: (bool: boolean) => void;
   forwardedRef?: React.LegacyRef<HTMLDivElement>;
   style?: object;
-  src?: string;
   sourceRef?: SourceReference;
-  type: Type;
 };
 
 export default function SourceCard({
   source,
-  label,
   onSourceUpdate,
   onSourceRemoval,
   onSelectingText,
   forwardedRef,
-  src,
   style,
-  sourceRef,
-  type
+  sourceRef
 }: SourceCardProps) {
-  const [sourceLabel, setSourceLabel] = useState(
-    sourceRef?.label || source?.name
-  );
+  const [sourceLabel, setSourceLabel] = useState(sourceRef?.label || '');
   const t = useTranslate();
   const { locked } = useContext(GlobalContext);
 
   const updateText = (event: ChangeEvent<HTMLInputElement>) => {
     setSourceLabel(event.currentTarget.value);
   };
+
   const saveText = () => {
     onSelectingText(false);
     if (sourceLabel?.length === 0) {
@@ -67,11 +61,13 @@ export default function SourceCard({
       });
     }
   };
+
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       event.currentTarget.blur();
     }
   };
+
   return (
     <div
       ref={forwardedRef}
@@ -91,9 +87,7 @@ export default function SourceCard({
           disabled={locked}
         />
       </div>
-      {source && !sourceRef && (
-        <ImageComponent src={getSourceThumbnail(source)} />
-      )}
+      {source && <ImageComponent src={getSourceThumbnail(source)} />}
       {!source && sourceRef && <ImageComponent type={sourceRef.type} />}
       {(source || sourceRef) && (
         <h2

diff --git a/src/components/sourceCards/SourceCards.tsx b/src/components/sourceCards/SourceCards.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import React, { useState } from 'react';
 import { SourceReference } from '../../interfaces/Source';
 import { Production } from '../../interfaces/production';
@@ -26,26 +27,24 @@ export default function SourceCards({
   const isISource = (source: SourceReference | ISource): source is ISource => {
     return 'src' in source;
   };
-
   const gridItems: React.JSX.Element[] = [];
   let tempItems = [...items];
   let firstEmptySlot = items.length + 1;
-
   if (!items || items.length === 0) return null;
   for (let i = 0; i < items[items.length - 1].input_slot; i++) {
     if (!items.some((source) => source.input_slot === i + 1)) {
       firstEmptySlot = i + 1;
       break;
     }
   }
+  const productionSources = productionSetup.sources;
 
   for (let i = 0; i < items[items.length - 1].input_slot; i++) {
     tempItems.every((source) => {
       const id = source._id ? source._id : '';
       const isSource = isISource(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 && !locked) {
           gridItems.push(
             <DragItem
@@ -60,10 +59,11 @@ export default function SourceCards({
             >
               <SourceCard
                 source={isSource ? source : undefined}
-                sourceRef={isSource ? undefined : source}
-                src={isSource ? source.src : undefined}
-                type={isSource ? 'ingest_source' : source.type}
-                label={source.label}
+                sourceRef={
+                  isSource
+                    ? productionSources.find((s) => s._id === source._id)
+                    : source
+                }
                 onSourceUpdate={onSourceUpdate}
                 onSourceRemoval={onSourceRemoval}
                 onSelectingText={(isSelecting) => setSelectingText(isSelecting)}
@@ -73,11 +73,13 @@ export default function SourceCards({
         } else {
           gridItems.push(
             <SourceCard
+              key={id === typeof String ? id : id.toString()}
               source={isSource ? source : undefined}
-              sourceRef={isSource ? undefined : source}
-              src={isSource ? source.src : undefined}
-              type={isSource ? 'ingest_source' : source.type}
-              label={source.label}
+              sourceRef={
+                isSource
+                  ? productionSources.find((s) => s._id === source._id)
+                  : source
+              }
               onSourceUpdate={onSourceUpdate}
               onSourceRemoval={onSourceRemoval}
               onSelectingText={(isSelecting) => setSelectingText(isSelecting)}

diff --git a/src/hooks/useCheckProductionPipelinesAndControlPanels.tsx b/src/hooks/useCheckProductionPipelinesAndControlPanels.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { CallbackHook } from './types';
+import { Production } from '../interfaces/production';
+import { ResourcesCompactPipelineResponse } from '../../types/ateliere-live';
+
+export function useCheckProductionPipelinesAndControlPanels(): CallbackHook<
+  (
+    production: Production,
+    pipelines: ResourcesCompactPipelineResponse[] | undefined
+  ) => Production
+> {
+  const [loading, setLoading] = useState(false);
+
+  const checkProductionPipelinesAndControlPanels = (
+    production: Production,
+    pipelines: ResourcesCompactPipelineResponse[] | undefined
+  ) => {
+    if (!production.production_settings) return production;
+    const productionPipelines = production.production_settings.pipelines;
+
+    const activePipelinesForProduction = pipelines?.filter((pipeline) =>
+      productionPipelines.some(
+        (productionPipeline) =>
+          productionPipeline.pipeline_name === pipeline.name
+      )
+    );
+    const availablePipelines = productionPipelines.map((productionPipeline) => {
+      const activePipeForProduction = activePipelinesForProduction?.find(
+        (p) => p.name === productionPipeline.pipeline_name
+      );
+      if (activePipeForProduction?.streams.length === 0) {
+        return productionPipeline;
+      }
+      return productionPipeline;
+    });
+
+    return {
+      ...production,
+      production_settings: {
+        ...production.production_settings,
+        pipelines: availablePipelines
+      }
+    };
+  };
+  return [checkProductionPipelinesAndControlPanels, loading];
+}