Cleanup and figuring out ProgressiveImage

Makefile

@@ -34,12 +34,6 @@ build-serve:
 build-analyze:
 	docker compose -f local.yml up documentcloud_frontend_analyze
 
-test:
-	docker compose -f local.builder.yml run --rm test
-
-test-watch:
-	docker compose -f local.builder.yml run --rm test-watch
-
 prettier-check:
 	prettier --check --plugin-search-dir=. src
 

README.md

@@ -58,7 +58,7 @@ Run the relevant `npm install ...` command and then get the change mirrored on t
 
 ## Unit tests
 
-Run unit tests with `make test`. This will run the tests via the builder Docker image.
+Run unit tests with `npm test`.
 
 ## Functional tests
 

local.builder.yml

@@ -77,8 +77,8 @@ services:
       squarelet_default:
         aliases:
           - www.dev.documentcloud.org
-    env_file:
-      - .env.test
+    environment:
+      - NODE_ENV=test
     command: ./browser-test-all.sh
 
   browser-test-staging:
@@ -91,8 +91,8 @@ services:
       squarelet_default:
         aliases:
           - www.dev.documentcloud.org
-    env_file:
-      - .env.staging
+    environment:
+      - NODE_ENV=staging
     command: ./browser-test-all.sh
 
 volumes:

src/common/ProgressiveImage.svelte

@@ -1,13 +1,10 @@
 <script>
-  import { onMount, onDestroy } from "svelte";
-  import emitter from "@/emit.js";
-  import { IMAGE_WIDTHS } from "../config/config.js";
+  import { onMount, onDestroy, createEventDispatcher } from "svelte";
+  import { IMAGE_WIDTHS, IMAGE_WIDTHS_MAP } from "../config/config.js";
   import { pageImageUrl } from "@/api/viewer.js";
   import { timeout } from "@/util/timeout.js";
 
-  const emit = emitter({
-    load() {},
-  });
+  const dispatch = createEventDispatcher();
 
   export let alt;
   export let page;
@@ -18,14 +15,15 @@
   export let crosshair = false;
   export let transform = null;
   export let delay = 0;
+
   let elem;
   let destroyed = false;
   let imgs = [];
   let loading = {};
   let largestLoaded = -1;
 
   const NORMAL_WIDTH = IMAGE_WIDTHS.map((x, i) => [x, i]).filter(
-    (x) => x[0][1] == "normal",
+    (x) => x[1][0] == "normal",
   )[0];
 
   let mounted = false;
@@ -92,7 +90,7 @@
       setTimeout(() => (img.className = "loaded"), 100);
     }
     largestLoaded = i;
-    setTimeout(() => emit.load(), 100);
+    setTimeout(() => dispatch("load"), 100);
   }
 
   function loadImg(i) {
@@ -160,7 +158,6 @@
     top: 0;
     left: 0;
 
-    user-drag: none;
     user-select: none;
 
     transition: opacity 0.2s linear;

src/config/config.js

@@ -41,6 +41,8 @@ export const IMAGE_WIDTHS = [
   ["thumbnail", 60],
 ];
 
+export const IMAGE_WIDTHS_MAP = new Map(IMAGE_WIDTHS);
+
 export const MAX_PER_PAGE = 100;
 
 export const PDF_SIZE_LIMIT = 525336576;

tests/anonymous/viewer/document.spec.js

@@ -2,10 +2,7 @@
 import fs from "node:fs/promises";
 import { test as base, expect } from "@playwright/test";
 
-const {
-  DC_BASE = "https://api.dev.documentcloud.org",
-  NODE_ENV = "development",
-} = process.env;
+const { NODE_ENV = "development" } = process.env;
 
 const test = base.extend({
   document: async ({ page }, use) => {