self-review

image-js · targos · Jan 20, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
commit c93539daa89f3528228f29fa993bda7a6a850f43
diff --git a/demo/components/CameraFeed.tsx b/demo/components/CameraFeed.tsx
@@ -4,16 +4,20 @@

 import UnavailableCamera from './UnavailableCamera.js';

 export default function CameraFeed() {
  const [{ selectedCamera }] = useCameraContext();
  const videoRef = useRef<HTMLVideoElement>(null);
  useEffect(() => {
     const video = videoRef.current;
     if (!video || !selectedCamera) return;
     video.srcObject = selectedCamera.stream;
-    video.addEventListener('loadedmetadata', () => {
+    const onLoadedMetadata = () => {
       video.play().catch((error: unknown) => console.error(error));
-    });
+    };
+    video.addEventListener('loadedmetadata', onLoadedMetadata);
+    return () => {
+      video.removeEventListener('loadedmetadata', onLoadedMetadata);
+    };
   }, [selectedCamera]);
   if (!selectedCamera) {
     return <UnavailableCamera />;

diff --git a/demo/components/CameraTransform.tsx b/demo/components/CameraTransform.tsx
@@ -21,7 +21,7 @@
  snapshotImageRef: RefObject<Image | null>;
 }

 export default function CameraTransform(props: CameraTransformProps) {
  const { canvasInputRef, transform, snapshotUrl, snapshotImageRef } = props;
  const [{ selectedCamera }] = useCameraContext();
  const videoRef = useRef<HTMLVideoElement>(null);
@@ -38,7 +38,7 @@
     const video = videoRef.current as HTMLVideoElement;
     let nextFrameRequest: number;
     video.srcObject = selectedCamera.stream;
-    video.addEventListener('loadedmetadata', () => {
+    const onLoadedMetadata = () => {
       video
         .play()
         .then(() => {
@@ -62,18 +62,20 @@
                result = convertColor(result, 'RGBA');
              }
              writeCanvas(result, canvasOutput);
            } catch (error_) {
              setError(error_.stack);
              console.error(error_);
            }
            nextFrameRequest = requestAnimationFrame(nextFrame);
          }
           nextFrameRequest = requestAnimationFrame(nextFrame);
         })
         .catch((error_: unknown) => console.error(error_));
-    });
+    };
+    video.addEventListener('loadedmetadata', onLoadedMetadata);
 
     return () => {
+      video.removeEventListener('loadedmetadata', onLoadedMetadata);
       if (nextFrameRequest) {
         cancelAnimationFrame(nextFrameRequest);
       }

diff --git a/src/__tests__/Image.test.ts b/src/__tests__/Image.test.ts
@@ -221,7 +221,7 @@ test('getCoordinates - with rounding', () => {
 test('getCoordinates - bad parameter', () => {
   const img = new Image(4, 5);
   // @ts-expect-error bad parameter
-  expect(() => img.getCoordinates('bad')).toThrow(/bad/);
+  expect(() => img.getCoordinates('bad')).toThrow('bad');
 });
 
 test('fill with a constant color', () => {

diff --git a/demo/components/App.tsx b/demo/components/App.tsx
 import Filters from './Filters.js';
 import Home from './Home.js';

 export default function App() {
  return (
    <CameraProvider>
      <HashRouter>
diff --git a/demo/components/CameraSelector.tsx b/demo/components/CameraSelector.tsx
 import { useCameraContext } from '../contexts/cameraContext.js';

 export default function CameraSelector() {
  const [{ cameras, selectedCamera }, dispatch] = useCameraContext();
  if (cameras.length === 0) return null;
  return (
                  camera: { device, stream },
                });
              })
              .catch((error: unknown) => console.error(error));
          }
        }}
      >
diff --git a/demo/components/CameraSnapshotButton.tsx b/demo/components/CameraSnapshotButton.tsx
  canvasInputRef: RefObject<HTMLCanvasElement | null>;
 }

 export default function CameraSnapshotButton(props: CameraSnapshotButtonProps) {
  const { setSnapshotUrl, snapshotImageRef, canvasInputRef } = props;
  function handleClick() {
    if (canvasInputRef.current) {
diff --git a/demo/components/Container.tsx b/demo/components/Container.tsx
  title: string;
  children: ReactNode;
 }
 export default function Container(props: ContainerProps) {
  return (
    <div>
      <Navbar />
diff --git a/demo/components/ErrorAlert.tsx b/demo/components/ErrorAlert.tsx
 import type { ReactNode } from 'react';

 export default function ErrorAlert(props: { children: ReactNode }) {
  return (
    <div className="p-4 text-red-800 bg-red-200 rounded">{props.children}</div>
  );
diff --git a/demo/components/Filters.tsx b/demo/components/Filters.tsx
 import Container from './Container.js';

 export default function Filters() {
  return <Container title="Filters">Filters</Container>;
 }
diff --git a/demo/components/Home.tsx b/demo/components/Home.tsx

 const testTransform: TransformFunction = testGetFastKeypoints;

 export default function Home() {
  const snapshotImageRef = useRef<Image>(null);
  const canvasInputRef = useRef<HTMLCanvasElement>(null);
  const [snapshotUrl, setSnapshotUrl] = useState('');
diff --git a/demo/components/Navbar.tsx b/demo/components/Navbar.tsx
  { name: 'Filters', href: '/filters', current: false },
 ];

 export default function Navbar() {
  const location = useLocation();
  const currentNavigation = navigation.map((navItem) => ({
    ...navItem,
diff --git a/demo/components/SnapshotImage.tsx b/demo/components/SnapshotImage.tsx

 export default function SnapshotImage(props: SnapshotImageProps) {
  const { snapshotUrl: snapshot } = props;
  return snapshot ? (
    <img alt="snapshot" style={{ transform: 'scaleX(-1)' }} src={snapshot} />
  ) : null;
 }
diff --git a/demo/contexts/cameraContext.provider.tsx b/demo/contexts/cameraContext.provider.tsx
  defaultCameraState,
 } from './cameraContext.js';

 export function CameraProvider(props: { children: ReactNode }) {
  const [cameraState, dispatch] = useReducer(
    cameraStateReducer,
    defaultCameraState,
  );
  const value = useMemo<CameraContext>(
    () => [cameraState, dispatch],
    [cameraState],
  );
  useEffect(() => {
    async function getCameras() {
      const devices = await navigator.mediaDevices.enumerateDevices();
      const cameras = devices.filter((device) => device.kind === 'videoinput');
      if (cameras.length > 0) {
        // TODO: handle denied permission
        const firstCameraStream = await navigator.mediaDevices.getUserMedia({
          video: { deviceId: cameras[0].deviceId },
        });
        dispatch({
          type: 'SET_CAMERAS',
          cameras,
          firstCamera: { device: cameras[0], stream: firstCameraStream },
        });
      }
    }

    function handleDeviceChange() {
      getCameras().catch((error: unknown) => console.error(error));
    }

    navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange);
    handleDeviceChange();
    return () => {
      navigator.mediaDevices.removeEventListener(
        'devicechange',
        handleDeviceChange,
      );
    };
  }, []);

  return (
    <cameraContext.Provider value={value}>
      {props.children}
    </cameraContext.Provider>
  );
 }
diff --git a/demo/contexts/cameraContext.tsx b/demo/contexts/cameraContext.tsx
  selectedCamera: Camera | null;
 }

 export const defaultCameraState: CameraState = {
  cameras: [],
  selectedCamera: null,
 };

 export type CameraContext = [
  state: CameraState,
  dispatch: Dispatch<CameraAction>,
 ];

 export const cameraContext = createContext<CameraContext>([
  defaultCameraState,
  () => {
    // Empty
      camera: Camera;
    };

 export const cameraStateReducer = produce(
  (state: CameraState, action: CameraAction) => {
    switch (action.type) {
      case 'SET_CAMERAS': {
        } else if (state.selectedCamera === null) {
          state.selectedCamera = action.firstCamera;
        } else if (
          !state.cameras.some(
            (camera) => camera.deviceId === action.firstCamera.device.deviceId,
          )
        ) {
diff --git a/demo/index.tsx b/demo/index.tsx

 import './index.css';

 import App from './components/App.js';

 const root = createRoot(document.querySelector('#root') as HTMLElement);

 root.render(<App />);
diff --git a/postcss.config.js b/postcss.config.js
    tailwindcss: {},
    autoprefixer: {},
  },
 };
diff --git a/scripts/alignImages/alignImages.ts b/scripts/alignImages/alignImages.ts
 import { writeSync } from '../../src/save/write.js';
 import { overlapImages } from '../../src/featureMatching/visualize/overlapImages.js';
 import { readSync } from '../../src/load/read.js';
 import { readFileSync, readdirSync, unlinkSync } from 'fs';
 import { join } from 'path';
 import { getAffineTransform } from '../../src/index.js';

 // global variables
 const emptyFolder = true; // results
diff --git a/scripts/featureMatching/featureMatchingTest.ts b/scripts/featureMatching/featureMatchingTest.ts
  getCrosscheckMatches,
  MontageDisposition,
  getBestKeypointsInRadius,
 } from '../../src/featureMatching.js';
 import { readSync, writeSync } from '../../src/index.js';
 import {
  getBrief,
  GetBriefOptions,
 } from '../../src/featureMatching/descriptors/getBrief.js';
 import { GetColorsOptions } from '../../src/featureMatching/utils/getColors.js';
 import { getMinMax } from '../../src/utils/getMinMax.js';

 import util from 'util';
 import { sliceBrief } from '../../src/featureMatching/descriptors/utils/sliceBrief.js';
 util.inspect.defaultOptions.depth = 5;

 const getBriefOptions: GetBriefOptions = {
diff --git a/scripts/featureMatching/generateFMtestImages.ts b/scripts/featureMatching/generateFMtestImages.ts
 // generate some variations of the alphabet image for feature matching
 // run this script with: ts-node --log-error generateFMtestImages.ts
 import { readSync, writeSync, Image } from '../../src/index.js';
 import { join } from 'path';

 console.log(__dirname);
diff --git a/scripts/testHarris.ts b/scripts/testHarris.ts
 // @eslint-ignore
 import { Image } from '../src/Image.js';
 import { getHarrisScore } from '../src/featureMatching/getHarrisScore.js';

 const fastRadius = 3;

diff --git a/scripts/tophatTest.ts b/scripts/tophatTest.ts
  RoiKind,
  readSync,
  writeSync,
 } from '../src/index.js';

 const disk12 = [
  [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
	import Filters from './Filters.js';
	import Home from './Home.js';

	export default function App() {
Check warning on line 8 in demo/components/App.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	return (
	<CameraProvider>
	<HashRouter>
	import { useCameraContext } from '../contexts/cameraContext.js';

	export default function CameraSelector() {
Check warning on line 3 in demo/components/CameraSelector.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	const [{ cameras, selectedCamera }, dispatch] = useCameraContext();
	if (cameras.length === 0) return null;
	return (
	camera: { device, stream },
	});
	})
	.catch((error: unknown) => console.error(error));
Check warning on line 32 in demo/components/CameraSelector.tsx Codecov / codecov/patch demo/components/CameraSelector.tsx#L32 `Added line #L32 was not covered by tests`
	}
	}}
	>
	canvasInputRef: RefObject<HTMLCanvasElement \| null>;
	}

	export default function CameraSnapshotButton(props: CameraSnapshotButtonProps) {
Check warning on line 12 in demo/components/CameraSnapshotButton.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	const { setSnapshotUrl, snapshotImageRef, canvasInputRef } = props;
	function handleClick() {
	if (canvasInputRef.current) {
	title: string;
	children: ReactNode;
	}
	export default function Container(props: ContainerProps) {
Check warning on line 9 in demo/components/Container.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	return (
	<div>
	<Navbar />
	import type { ReactNode } from 'react';

	export default function ErrorAlert(props: { children: ReactNode }) {
Check warning on line 3 in demo/components/ErrorAlert.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	return (
	<div className="p-4 text-red-800 bg-red-200 rounded">{props.children}</div>
	);
	import Container from './Container.js';

	export default function Filters() {
Check warning on line 3 in demo/components/Filters.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	return <Container title="Filters">Filters</Container>;
	}

	const testTransform: TransformFunction = testGetFastKeypoints;

	export default function Home() {
Check warning on line 14 in demo/components/Home.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	const snapshotImageRef = useRef<Image>(null);
	const canvasInputRef = useRef<HTMLCanvasElement>(null);
	const [snapshotUrl, setSnapshotUrl] = useState('');
	{ name: 'Filters', href: '/filters', current: false },
	];

	export default function Navbar() {
Check warning on line 9 in demo/components/Navbar.tsx GitHub Actions / nodejs / lint-eslint `Missing JSDoc comment`
	const location = useLocation();
	const currentNavigation = navigation.map((navItem) => ({
	...navItem,

	export default function SnapshotImage(props: SnapshotImageProps) {
	const { snapshotUrl: snapshot } = props;
	return snapshot ? (
	<img alt="snapshot" style={{ transform: 'scaleX(-1)' }} src={snapshot} />
	) : null;
Check warning on line 9 in demo/components/SnapshotImage.tsx Codecov / codecov/patch demo/components/SnapshotImage.tsx#L7-L9 `Added lines #L7 - L9 were not covered by tests`
	}
	defaultCameraState,
	} from './cameraContext.js';

	export function CameraProvider(props: { children: ReactNode }) {
	const [cameraState, dispatch] = useReducer(
	cameraStateReducer,
	defaultCameraState,
	);
	const value = useMemo<CameraContext>(
	() => [cameraState, dispatch],
	[cameraState],
	);
	useEffect(() => {
	async function getCameras() {
	const devices = await navigator.mediaDevices.enumerateDevices();
	const cameras = devices.filter((device) => device.kind === 'videoinput');
	if (cameras.length > 0) {
Check warning on line 24 in demo/contexts/cameraContext.provider.tsx Codecov / codecov/patch demo/contexts/cameraContext.provider.tsx#L11-L24 `Added lines #L11 - L24 were not covered by tests`
	// TODO: handle denied permission
	const firstCameraStream = await navigator.mediaDevices.getUserMedia({
	video: { deviceId: cameras[0].deviceId },
	});
	dispatch({
	type: 'SET_CAMERAS',
	cameras,
	firstCamera: { device: cameras[0], stream: firstCameraStream },
	});
	}
	}
Check warning on line 35 in demo/contexts/cameraContext.provider.tsx Codecov / codecov/patch demo/contexts/cameraContext.provider.tsx#L26-L35 `Added lines #L26 - L35 were not covered by tests`

	function handleDeviceChange() {
	getCameras().catch((error: unknown) => console.error(error));
	}
Check warning on line 39 in demo/contexts/cameraContext.provider.tsx Codecov / codecov/patch demo/contexts/cameraContext.provider.tsx#L37-L39 `Added lines #L37 - L39 were not covered by tests`

	navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange);
	handleDeviceChange();
	return () => {
	navigator.mediaDevices.removeEventListener(
	'devicechange',
	handleDeviceChange,
	);
	};
	}, []);
Check warning on line 49 in demo/contexts/cameraContext.provider.tsx Codecov / codecov/patch demo/contexts/cameraContext.provider.tsx#L41-L49 `Added lines #L41 - L49 were not covered by tests`

	return (
	<cameraContext.Provider value={value}>
	{props.children}
	</cameraContext.Provider>
Check warning on line 54 in demo/contexts/cameraContext.provider.tsx Codecov / codecov/patch demo/contexts/cameraContext.provider.tsx#L51-L54 `Added lines #L51 - L54 were not covered by tests`
	);
	}
Check warning on line 56 in demo/contexts/cameraContext.provider.tsx Codecov / codecov/patch demo/contexts/cameraContext.provider.tsx#L56 `Added line #L56 was not covered by tests`