Fix/bugs (#49)

* fix: image-refetch

* fix: teardown

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
  }}
  >