Fix/bugs

next.config.js

@@ -9,5 +9,8 @@ module.exports = {
     locales: ['en', 'sv'],
     defaultLocale: 'en',
     localeDetection: false
+  },
+  images: {
+    minimumCacheTTL: 0
   }
 };

src/api/ateliereLive/pipelines/pipelines.ts

@@ -94,7 +94,8 @@ export async function getPipelines(): Promise<
         uuid: pipeline.uuid,
         outputs: pipeline.outputs,
         streams: pipeline.streams,
-        feedback_streams: pipeline.feedback_streams
+        feedback_streams: pipeline.feedback_streams,
+        control_receiver: pipeline.control_receiver
       };
     });
   }

src/api/manager/teardown.ts

@@ -145,16 +145,23 @@ export async function teardown(
   // STEP 5
   // DELETE PIPELINE CONNECTIONS
   try {
+    const disconnectedReceiverIDs: string[] = [];
     for (const pipeline of pipelines) {
       const connections: ResourcesConnectionUUIDResponse[] = [
         ...(pipeline.control_receiver?.incoming_connections || []),
         ...(pipeline.control_receiver?.outgoing_connections || [])
       ];
 
       for (const connection of connections) {
-        await disconnectReceiver(connection.connection_uuid).catch(() => {
-          throw `Failed to disconnect connection ${connection.connection_uuid} in pipeline ${pipeline.name}`;
-        });
+        if (!disconnectedReceiverIDs.includes(connection.connection_uuid)) {
+          await disconnectReceiver(connection.connection_uuid)
+            .then(() =>
+              disconnectedReceiverIDs.push(connection.connection_uuid)
+            )
+            .catch(() => {
+              throw `Failed to disconnect connection ${connection.connection_uuid} in pipeline ${pipeline.name}`;
+            });
+        }
       }
     }
     addStep('pipeline_control_connections', true);

src/components/image/ImageComponent.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   PropsWithChildren,
   SyntheticEvent,
@@ -20,15 +22,15 @@ interface ImageComponentProps extends PropsWithChildren {
 
 const ImageComponent: React.FC<ImageComponentProps> = (props) => {
   const { src, alt = 'Image', children, type } = props;
-  const { imageRefetchIndex } = useContext(GlobalContext);
+  const { imageRefetchKey } = useContext(GlobalContext);
   const [imgSrc, setImgSrc] = useState<string>();
   const [loaded, setLoaded] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<SyntheticEvent<HTMLImageElement, Event>>();
   const timeout = useRef<ReturnType<typeof setTimeout>>();
 
   const refetchImage = () => {
-    setImgSrc(`${src}?refetch=${imageRefetchIndex}}`);
+    setImgSrc(`${src}?${imageRefetchKey}`);
     setError(undefined);
     setLoading(true);
     clearTimeout(timeout.current);
@@ -37,11 +39,11 @@ const ImageComponent: React.FC<ImageComponentProps> = (props) => {
 
   useEffect(() => {
     refetchImage();
-  }, [imageRefetchIndex]);
+  }, [imageRefetchKey]);
 
   useEffect(() => {
     setError(undefined);
-    setImgSrc(`${src}?refetch=${imageRefetchIndex}}`);
+    setImgSrc(`${src}?${imageRefetchKey}`);
   }, [src]);
 
   useEffect(() => {

src/components/sideNav/SideNavRefreshThumbnails.tsx

@@ -11,14 +11,14 @@ const SideNavRefreshThumbnails = (props: SideNavItemBaseProps) => {
   const { open } = props;
   const t = useTranslate();
 
-  const { incrementImageRefetchIndex } = useContext(GlobalContext);
+  const { refetchImages } = useContext(GlobalContext);
 
   // TODO This button might be changed to a toggle for automatic image refetching.
   return (
     <div className="relative group">
       <div
         className="flex items-center pl-4 py-4 overflow-hidden rounded-xl hover:bg-light hover:cursor-pointer"
-        onClick={incrementImageRefetchIndex}
+        onClick={refetchImages}
       >
         <Icons name="IconRefresh" className="min-w-8 min-h-8 mr-4" />
         <div className="whitespace-nowrap">{t('refresh_images')}</div>

src/contexts/GlobalContext.tsx

@@ -5,15 +5,15 @@ import { createContext, useState, PropsWithChildren } from 'react';
 
 interface IGlobalContext {
   locked: boolean;
-  imageRefetchIndex: number;
-  incrementImageRefetchIndex: () => void;
+  imageRefetchKey: number;
+  refetchImages: () => void;
   toggleLocked: () => void;
 }
 
 export const GlobalContext = createContext<IGlobalContext>({
   locked: false,
-  imageRefetchIndex: 0,
-  incrementImageRefetchIndex: () => {
+  imageRefetchKey: 0,
+  refetchImages: () => {
     // outsmarting lint
   },
   toggleLocked: () => {
@@ -24,10 +24,12 @@ export const GlobalContext = createContext<IGlobalContext>({
 export const GlobalContextProvider = (props: PropsWithChildren) => {
   const { children } = props;
   const [locked, setLocked] = useState<boolean>(true);
-  const [imageRefetchIndex, setImageRefetchIndex] = useState<number>(0);
+  const [imageRefetchKey, setImageRefetchKey] = useState<number>(
+    new Date().getTime()
+  );
 
-  const incrementImageRefetchIndex = () => {
-    setImageRefetchIndex(imageRefetchIndex + 1);
+  const refetchImages = () => {
+    setImageRefetchKey(new Date().getTime());
   };
 
   const toggleLocked = () => {
@@ -39,8 +41,8 @@ export const GlobalContextProvider = (props: PropsWithChildren) => {
       <GlobalContext.Provider
         value={{
           locked,
-          imageRefetchIndex,
-          incrementImageRefetchIndex,
+          imageRefetchKey,
+          refetchImages,
           toggleLocked
         }}
       >