jazz-tools 0.15.2 → 0.15.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> jazz-tools@0.15.2 build /home/runner/_work/jazz/jazz/packages/jazz-tools
+> jazz-tools@0.15.3 build /home/runner/_work/jazz/jazz/packages/jazz-tools
 > tsup && pnpm types && pnpm build:svelte
 
 CLI Building entry: {"index":"src/index.ts","testing":"src/testing.ts"}
@@ -109,83 +109,83 @@
 ESM Build start
 ESM dist/worker/index.js     2.34 KB
 ESM dist/worker/index.js.map 4.82 KB
-ESM ⚡️ Build success in 13ms
+ESM ⚡️ Build success in 22ms
 ESM dist/tiptap/index.js     564.00 B
 ESM dist/tiptap/index.js.map 1.21 KB
-ESM ⚡️ Build success in 14ms
-ESM dist/browser-media-images/index.js     3.01 KB
-ESM dist/browser-media-images/index.js.map 5.68 KB
-ESM ⚡️ Build success in 19ms
+ESM ⚡️ Build success in 23ms
+ESM dist/browser-media-images/index.js     2.55 KB
+ESM dist/browser-media-images/index.js.map 5.44 KB
+ESM ⚡️ Build success in 30ms
 ESM dist/react-native-media-images/index.js     6.19 KB
 ESM dist/react-native-media-images/index.js.map 10.96 KB
-ESM ⚡️ Build success in 16ms
+ESM ⚡️ Build success in 24ms
 ESM dist/react-core/index.js              8.37 KB
-ESM dist/react-core/chunk-7DYMJ74I.js     279.00 B
 ESM dist/react-core/testing.js            1.17 KB
+ESM dist/react-core/chunk-7DYMJ74I.js     279.00 B
 ESM dist/react-core/index.js.map          16.39 KB
-ESM dist/react-core/chunk-7DYMJ74I.js.map 533.00 B
 ESM dist/react-core/testing.js.map        1.82 KB
-ESM ⚡️ Build success in 19ms
+ESM dist/react-core/chunk-7DYMJ74I.js.map 533.00 B
+ESM ⚡️ Build success in 35ms
+ESM dist/react-native/index.js       2.53 KB
+ESM dist/react-native/testing.js     120.00 B
+ESM dist/react-native/crypto.js      117.00 B
+ESM dist/react-native/index.js.map   5.68 KB
+ESM dist/react-native/testing.js.map 176.00 B
+ESM dist/react-native/crypto.js.map  174.00 B
+ESM ⚡️ Build success in 35ms
 ESM dist/expo/index.js       4.65 KB
 ESM dist/expo/testing.js     112.00 B
 ESM dist/expo/crypto.js      109.00 B
 ESM dist/expo/index.js.map   10.17 KB
-ESM dist/expo/crypto.js.map  166.00 B
 ESM dist/expo/testing.js.map 168.00 B
-ESM ⚡️ Build success in 24ms
-ESM dist/react-native/index.js       2.53 KB
-ESM dist/react-native/crypto.js      117.00 B
-ESM dist/react-native/testing.js     120.00 B
-ESM dist/react-native/index.js.map   5.68 KB
-ESM dist/react-native/crypto.js.map  174.00 B
-ESM dist/react-native/testing.js.map 176.00 B
-ESM ⚡️ Build success in 22ms
+ESM dist/expo/crypto.js.map  166.00 B
+ESM ⚡️ Build success in 39ms
 ESM dist/browser/index.js     13.36 KB
 ESM dist/browser/index.js.map 28.57 KB
-ESM ⚡️ Build success in 26ms
+ESM ⚡️ Build success in 42ms
 ESM dist/react-native-core/index.js       17.42 KB
-ESM dist/react-native-core/crypto.js      2.10 KB
 ESM dist/react-native-core/testing.js     119.00 B
+ESM dist/react-native-core/crypto.js      2.10 KB
 ESM dist/react-native-core/index.js.map   34.49 KB
-ESM dist/react-native-core/crypto.js.map  4.25 KB
 ESM dist/react-native-core/testing.js.map 175.00 B
-ESM ⚡️ Build success in 34ms
+ESM dist/react-native-core/crypto.js.map  4.25 KB
+ESM ⚡️ Build success in 50ms
 ESM dist/react/index.js       20.64 KB
-ESM dist/react/ssr.js         688.00 B
 ESM dist/react/testing.js     107.00 B
+ESM dist/react/ssr.js         688.00 B
 ESM dist/react/index.js.map   34.07 KB
-ESM dist/react/ssr.js.map     1.12 KB
 ESM dist/react/testing.js.map 163.00 B
-ESM ⚡️ Build success in 35ms
+ESM dist/react/ssr.js.map     1.12 KB
+ESM ⚡️ Build success in 53ms
 ESM dist/prosemirror/index.js     76.90 KB
 ESM dist/prosemirror/index.js.map 305.53 KB
-ESM ⚡️ Build success in 37ms
+ESM ⚡️ Build success in 54ms
 ESM dist/react/index.js       20.66 KB
 ESM dist/react/testing.js     122.00 B
-ESM dist/react/testing.js.map 165.00 B
 ESM dist/react/index.js.map   34.07 KB
-ESM ⚡️ Build success in 36ms
+ESM dist/react/testing.js.map 165.00 B
+ESM ⚡️ Build success in 54ms
 ESM dist/inspector/index.js     60.37 KB
 ESM dist/inspector/index.js.map 107.85 KB
-ESM ⚡️ Build success in 46ms
-ESM dist/index.js              16.19 KB
+ESM ⚡️ Build success in 72ms
 ESM dist/testing.js            6.32 KB
+ESM dist/index.js              16.19 KB
 ESM dist/chunk-VBDJM6Z5.js     140.80 KB
 ESM dist/testing.js.map        12.22 KB
 ESM dist/index.js.map          29.03 KB
 ESM dist/chunk-VBDJM6Z5.js.map 320.73 KB
-ESM ⚡️ Build success in 59ms
+ESM ⚡️ Build success in 88ms
 ESM dist/inspector/register-custom-element.js     218.00 B
 ESM dist/inspector/register-custom-element.js.map 314.00 B
 ESM dist/inspector/custom-element-CWW72LEG.js     1.47 MB
 ESM dist/inspector/custom-element-CWW72LEG.js.map 2.26 MB
-ESM ⚡️ Build success in 89ms
+ESM ⚡️ Build success in 149ms
 
-> jazz-tools@0.15.2 types /home/runner/_work/jazz/jazz/packages/jazz-tools
+> jazz-tools@0.15.3 types /home/runner/_work/jazz/jazz/packages/jazz-tools
 > tsc --outDir dist
 
 
-> jazz-tools@0.15.2 build:svelte /home/runner/_work/jazz/jazz/packages/jazz-tools
+> jazz-tools@0.15.3 build:svelte /home/runner/_work/jazz/jazz/packages/jazz-tools
 > rm -rf dist/svelte && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json
 
 src/svelte -> dist/svelte

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # jazz-tools
 
+## 0.15.3
+
+### Patch Changes
+
+- 45f73a7: fix image `originalSize` to be coherent with the highest resolution
+- Updated dependencies [535c460]
+  - cojson-storage-indexeddb@0.15.3
+  - cojson@0.15.3
+  - cojson-storage@0.15.3
+  - cojson-transport-ws@0.15.3
+
 ## 0.15.2
 
 ### Patch Changes

package/dist/browser-media-images/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser-media-images/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAEP,KAAK,EACL,eAAe,EACf,MAAM,EACP,MAAM,YAAY,CAAC;AAKpB,+BAA+B;AAC/B,wBAAsB,WAAW,CAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,EAC5B,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;CAC7B,GACA,OAAO,CAAC,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,CA8GzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser-media-images/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAEP,KAAK,EACL,eAAe,EACf,MAAM,EACP,MAAM,YAAY,CAAC;AAKpB,+BAA+B;AAC/B,wBAAsB,WAAW,CAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,EAC5B,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;CAC7B,GACA,OAAO,CAAC,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,CA8CzC"}

package/dist/browser-media-images/index.js

@@ -5,65 +5,67 @@ import {
   ImageDefinition
 } from "jazz-tools";
 import Pica from "pica";
-var pica;
+var reducer;
 async function createImage(imageBlobOrFile, options) {
-  if (!pica) {
-    pica = new Pica();
-  }
-  let originalWidth;
-  let originalHeight;
-  const Reducer = new ImageBlobReduce({ pica });
-  Reducer.after("_blob_to_image", (env) => {
-    originalWidth = env.orientation & 4 ? env.image.height : env.image.width;
-    originalHeight = env.orientation & 4 ? env.image.width : env.image.height;
-    return Promise.resolve(env);
-  });
-  const placeholderDataURL = (await Reducer.toCanvas(imageBlobOrFile, { max: 8 })).toDataURL("image/png");
+  const { width: originalWidth, height: originalHeight } = await getImageSize(imageBlobOrFile);
+  const highestDimension = Math.max(originalWidth, originalHeight);
+  const resizes = [256, 1024, 2048, highestDimension].filter((s) => s <= (options?.maxSize ?? highestDimension)).toSorted((a, b) => a - b);
+  const { width: finalWidth, height: finalHeight } = getNewDimensions(
+    originalWidth,
+    originalHeight,
+    resizes.at(-1)
+  );
   const imageDefinition = ImageDefinition.create(
-    {
-      originalSize: [originalWidth, originalHeight],
-      placeholderDataURL
-    },
+    { originalSize: [finalWidth, finalHeight] },
     options?.owner
   );
   const owner = imageDefinition._owner;
-  const fillImageResolutions = async () => {
-    const max256 = await Reducer.toBlob(imageBlobOrFile, { max: 256 });
-    if (originalWidth > 256 || originalHeight > 256) {
-      const width = originalWidth > originalHeight ? 256 : Math.round(256 * (originalWidth / originalHeight));
-      const height = originalHeight > originalWidth ? 256 : Math.round(256 * (originalHeight / originalWidth));
-      const binaryStream = await FileStream.createFromBlob(max256, owner);
-      imageDefinition[`${width}x${height}`] = binaryStream;
-    }
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    if (options?.maxSize === 256) return;
-    const max1024 = await Reducer.toBlob(imageBlobOrFile, { max: 1024 });
-    if (originalWidth > 1024 || originalHeight > 1024) {
-      const width = originalWidth > originalHeight ? 1024 : Math.round(1024 * (originalWidth / originalHeight));
-      const height = originalHeight > originalWidth ? 1024 : Math.round(1024 * (originalHeight / originalWidth));
-      const binaryStream = await FileStream.createFromBlob(max1024, owner);
-      imageDefinition[`${width}x${height}`] = binaryStream;
-    }
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    if (options?.maxSize === 1024) return;
-    const max2048 = await Reducer.toBlob(imageBlobOrFile, { max: 2048 });
-    if (originalWidth > 2048 || originalHeight > 2048) {
-      const width = originalWidth > originalHeight ? 2048 : Math.round(2048 * (originalWidth / originalHeight));
-      const height = originalHeight > originalWidth ? 2048 : Math.round(2048 * (originalHeight / originalWidth));
-      const binaryStream = await FileStream.createFromBlob(max2048, owner);
-      imageDefinition[`${width}x${height}`] = binaryStream;
-    }
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    if (options?.maxSize === 2048) return;
-    const originalBinaryStream = await FileStream.createFromBlob(
-      imageBlobOrFile,
-      owner
+  imageDefinition.placeholderDataURL = await getPlaceholderBase64(imageBlobOrFile);
+  for (let size of resizes) {
+    const { width, height } = getNewDimensions(
+      originalWidth,
+      originalHeight,
+      size
     );
-    imageDefinition[`${originalWidth}x${originalHeight}`] = originalBinaryStream;
-  };
-  await fillImageResolutions();
+    const image = await resize(imageBlobOrFile, width, height);
+    const binaryStream = await FileStream.createFromBlob(image, owner);
+    imageDefinition[`${width}x${height}`] = binaryStream;
+  }
   return imageDefinition;
 }
+async function getImageSize(imageBlobOrFile) {
+  const { width, height } = await new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(imageBlobOrFile);
+  });
+  return { width, height };
+}
+async function getPlaceholderBase64(imageBlobOrFile) {
+  if (!reducer) {
+    reducer = new ImageBlobReduce({ pica: new Pica() });
+  }
+  const canvas = await reducer.toCanvas(imageBlobOrFile, { max: 8 });
+  return canvas.toDataURL("image/png");
+}
+async function resize(imageBlobOrFile, width, height) {
+  if (!reducer) {
+    reducer = new ImageBlobReduce({ pica: new Pica() });
+  }
+  return reducer.toBlob(imageBlobOrFile, { max: Math.max(width, height) });
+}
+var getNewDimensions = (originalWidth, originalHeight, maxSize) => {
+  const width = originalWidth > originalHeight ? maxSize : Math.round(maxSize * (originalWidth / originalHeight));
+  const height = originalHeight > originalWidth ? maxSize : Math.round(maxSize * (originalHeight / originalWidth));
+  return { width, height };
+};
 export {
   createImage
 };

package/dist/browser-media-images/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/browser-media-images/index.ts"],"sourcesContent":["import ImageBlobReduce from \"image-blob-reduce\";\nimport {\n  Account,\n  FileStream,\n  Group,\n  ImageDefinition,\n  Loaded,\n} from \"jazz-tools\";\nimport Pica from \"pica\";\n\nlet pica: Pica.Pica | undefined;\n\n/** @category Image creation */\nexport async function createImage(\n  imageBlobOrFile: Blob | File,\n  options?: {\n    owner?: Group | Account;\n    maxSize?: 256 | 1024 | 2048;\n  },\n): Promise<Loaded<typeof ImageDefinition>> {\n  // Inizialize Pica here to not have module side effects\n  if (!pica) {\n    pica = new Pica();\n  }\n\n  let originalWidth!: number;\n  let originalHeight!: number;\n  const Reducer = new ImageBlobReduce({ pica });\n  Reducer.after(\"_blob_to_image\", (env) => {\n    originalWidth =\n      (env as unknown as { orientation: number }).orientation & 4\n        ? env.image.height\n        : env.image.width;\n    originalHeight =\n      (env as unknown as { orientation: number }).orientation & 4\n        ? env.image.width\n        : env.image.height;\n    return Promise.resolve(env);\n  });\n\n  const placeholderDataURL = (\n    await Reducer.toCanvas(imageBlobOrFile, { max: 8 })\n  ).toDataURL(\"image/png\");\n\n  const imageDefinition = ImageDefinition.create(\n    {\n      originalSize: [originalWidth, originalHeight],\n      placeholderDataURL,\n    },\n    options?.owner,\n  );\n  const owner = imageDefinition._owner;\n\n  const fillImageResolutions = async () => {\n    const max256 = await Reducer.toBlob(imageBlobOrFile, { max: 256 });\n\n    if (originalWidth > 256 || originalHeight > 256) {\n      const width =\n        originalWidth > originalHeight\n          ? 256\n          : Math.round(256 * (originalWidth / originalHeight));\n      const height =\n        originalHeight > originalWidth\n          ? 256\n          : Math.round(256 * (originalHeight / originalWidth));\n\n      const binaryStream = await FileStream.createFromBlob(max256, owner);\n\n      imageDefinition[`${width}x${height}`] = binaryStream;\n    }\n\n    await new Promise((resolve) => setTimeout(resolve, 0));\n\n    if (options?.maxSize === 256) return;\n\n    const max1024 = await Reducer.toBlob(imageBlobOrFile, { max: 1024 });\n\n    if (originalWidth > 1024 || originalHeight > 1024) {\n      const width =\n        originalWidth > originalHeight\n          ? 1024\n          : Math.round(1024 * (originalWidth / originalHeight));\n      const height =\n        originalHeight > originalWidth\n          ? 1024\n          : Math.round(1024 * (originalHeight / originalWidth));\n\n      const binaryStream = await FileStream.createFromBlob(max1024, owner);\n\n      imageDefinition[`${width}x${height}`] = binaryStream;\n    }\n\n    await new Promise((resolve) => setTimeout(resolve, 0));\n\n    if (options?.maxSize === 1024) return;\n\n    const max2048 = await Reducer.toBlob(imageBlobOrFile, { max: 2048 });\n\n    if (originalWidth > 2048 || originalHeight > 2048) {\n      const width =\n        originalWidth > originalHeight\n          ? 2048\n          : Math.round(2048 * (originalWidth / originalHeight));\n      const height =\n        originalHeight > originalWidth\n          ? 2048\n          : Math.round(2048 * (originalHeight / originalWidth));\n\n      const binaryStream = await FileStream.createFromBlob(max2048, owner);\n\n      imageDefinition[`${width}x${height}`] = binaryStream;\n    }\n\n    await new Promise((resolve) => setTimeout(resolve, 0));\n\n    if (options?.maxSize === 2048) return;\n\n    const originalBinaryStream = await FileStream.createFromBlob(\n      imageBlobOrFile,\n      owner,\n    );\n\n    imageDefinition[`${originalWidth}x${originalHeight}`] =\n      originalBinaryStream;\n  };\n\n  await fillImageResolutions();\n\n  return imageDefinition;\n}\n"],"mappings":";AAAA,OAAO,qBAAqB;AAC5B;AAAA,EAEE;AAAA,EAEA;AAAA,OAEK;AACP,OAAO,UAAU;AAEjB,IAAI;AAGJ,eAAsB,YACpB,iBACA,SAIyC;AAEzC,MAAI,CAAC,MAAM;AACT,WAAO,IAAI,KAAK;AAAA,EAClB;AAEA,MAAI;AACJ,MAAI;AACJ,QAAM,UAAU,IAAI,gBAAgB,EAAE,KAAK,CAAC;AAC5C,UAAQ,MAAM,kBAAkB,CAAC,QAAQ;AACvC,oBACG,IAA2C,cAAc,IACtD,IAAI,MAAM,SACV,IAAI,MAAM;AAChB,qBACG,IAA2C,cAAc,IACtD,IAAI,MAAM,QACV,IAAI,MAAM;AAChB,WAAO,QAAQ,QAAQ,GAAG;AAAA,EAC5B,CAAC;AAED,QAAM,sBACJ,MAAM,QAAQ,SAAS,iBAAiB,EAAE,KAAK,EAAE,CAAC,GAClD,UAAU,WAAW;AAEvB,QAAM,kBAAkB,gBAAgB;AAAA,IACtC;AAAA,MACE,cAAc,CAAC,eAAe,cAAc;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACA,QAAM,QAAQ,gBAAgB;AAE9B,QAAM,uBAAuB,YAAY;AACvC,UAAM,SAAS,MAAM,QAAQ,OAAO,iBAAiB,EAAE,KAAK,IAAI,CAAC;AAEjE,QAAI,gBAAgB,OAAO,iBAAiB,KAAK;AAC/C,YAAM,QACJ,gBAAgB,iBACZ,MACA,KAAK,MAAM,OAAO,gBAAgB,eAAe;AACvD,YAAM,SACJ,iBAAiB,gBACb,MACA,KAAK,MAAM,OAAO,iBAAiB,cAAc;AAEvD,YAAM,eAAe,MAAM,WAAW,eAAe,QAAQ,KAAK;AAElE,sBAAgB,GAAG,KAAK,IAAI,MAAM,EAAE,IAAI;AAAA,IAC1C;AAEA,UAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,CAAC,CAAC;AAErD,QAAI,SAAS,YAAY,IAAK;AAE9B,UAAM,UAAU,MAAM,QAAQ,OAAO,iBAAiB,EAAE,KAAK,KAAK,CAAC;AAEnE,QAAI,gBAAgB,QAAQ,iBAAiB,MAAM;AACjD,YAAM,QACJ,gBAAgB,iBACZ,OACA,KAAK,MAAM,QAAQ,gBAAgB,eAAe;AACxD,YAAM,SACJ,iBAAiB,gBACb,OACA,KAAK,MAAM,QAAQ,iBAAiB,cAAc;AAExD,YAAM,eAAe,MAAM,WAAW,eAAe,SAAS,KAAK;AAEnE,sBAAgB,GAAG,KAAK,IAAI,MAAM,EAAE,IAAI;AAAA,IAC1C;AAEA,UAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,CAAC,CAAC;AAErD,QAAI,SAAS,YAAY,KAAM;AAE/B,UAAM,UAAU,MAAM,QAAQ,OAAO,iBAAiB,EAAE,KAAK,KAAK,CAAC;AAEnE,QAAI,gBAAgB,QAAQ,iBAAiB,MAAM;AACjD,YAAM,QACJ,gBAAgB,iBACZ,OACA,KAAK,MAAM,QAAQ,gBAAgB,eAAe;AACxD,YAAM,SACJ,iBAAiB,gBACb,OACA,KAAK,MAAM,QAAQ,iBAAiB,cAAc;AAExD,YAAM,eAAe,MAAM,WAAW,eAAe,SAAS,KAAK;AAEnE,sBAAgB,GAAG,KAAK,IAAI,MAAM,EAAE,IAAI;AAAA,IAC1C;AAEA,UAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,CAAC,CAAC;AAErD,QAAI,SAAS,YAAY,KAAM;AAE/B,UAAM,uBAAuB,MAAM,WAAW;AAAA,MAC5C;AAAA,MACA;AAAA,IACF;AAEA,oBAAgB,GAAG,aAAa,IAAI,cAAc,EAAE,IAClD;AAAA,EACJ;AAEA,QAAM,qBAAqB;AAE3B,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/browser-media-images/index.ts"],"sourcesContent":["import ImageBlobReduce from \"image-blob-reduce\";\nimport {\n  Account,\n  FileStream,\n  Group,\n  ImageDefinition,\n  Loaded,\n} from \"jazz-tools\";\nimport Pica from \"pica\";\n\nlet reducer: ImageBlobReduce.ImageBlobReduce | undefined;\n\n/** @category Image creation */\nexport async function createImage(\n  imageBlobOrFile: Blob | File,\n  options?: {\n    owner?: Group | Account;\n    maxSize?: 256 | 1024 | 2048;\n  },\n): Promise<Loaded<typeof ImageDefinition>> {\n  // Get the original size of the image\n  const { width: originalWidth, height: originalHeight } =\n    await getImageSize(imageBlobOrFile);\n\n  const highestDimension = Math.max(originalWidth, originalHeight);\n\n  // Calculate the sizes to resize the image to\n  const resizes = [256, 1024, 2048, highestDimension]\n    .filter((s) => s <= (options?.maxSize ?? highestDimension))\n    .toSorted((a, b) => a - b);\n\n  // Get the highest resolution to use as final original size\n  // In case of options.maxSize, it's not the originalWidth/Height\n  const { width: finalWidth, height: finalHeight } = getNewDimensions(\n    originalWidth,\n    originalHeight,\n    resizes.at(-1)!,\n  );\n\n  const imageDefinition = ImageDefinition.create(\n    { originalSize: [finalWidth, finalHeight] },\n    options?.owner,\n  );\n  const owner = imageDefinition._owner;\n\n  // Placeholder 8x8\n  imageDefinition.placeholderDataURL =\n    await getPlaceholderBase64(imageBlobOrFile);\n\n  // Resizes for progressive loading\n  for (let size of resizes) {\n    // Calculate width and height respecting the aspect ratio\n    const { width, height } = getNewDimensions(\n      originalWidth,\n      originalHeight,\n      size,\n    );\n\n    const image = await resize(imageBlobOrFile, width, height);\n\n    const binaryStream = await FileStream.createFromBlob(image, owner);\n    imageDefinition[`${width}x${height}`] = binaryStream;\n  }\n\n  return imageDefinition;\n}\n\nasync function getImageSize(\n  imageBlobOrFile: Blob | File,\n): Promise<{ width: number; height: number }> {\n  const { width, height } = await new Promise<{\n    width: number;\n    height: number;\n  }>((resolve, reject) => {\n    const img = new Image();\n    img.onload = () => {\n      resolve({ width: img.width, height: img.height });\n      URL.revokeObjectURL(img.src);\n    };\n    img.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n      URL.revokeObjectURL(img.src);\n    };\n    img.src = URL.createObjectURL(imageBlobOrFile);\n  });\n\n  return { width, height };\n}\n\nasync function getPlaceholderBase64(\n  imageBlobOrFile: Blob | File,\n): Promise<string> {\n  // Inizialize Reducer here to not have module side effects\n  if (!reducer) {\n    reducer = new ImageBlobReduce({ pica: new Pica() });\n  }\n\n  const canvas = await reducer.toCanvas(imageBlobOrFile, { max: 8 });\n  return canvas.toDataURL(\"image/png\");\n}\n\nasync function resize(\n  imageBlobOrFile: Blob | File,\n  width: number,\n  height: number,\n): Promise<Blob> {\n  // Inizialize Reducer here to not have module side effects\n  if (!reducer) {\n    reducer = new ImageBlobReduce({ pica: new Pica() });\n  }\n\n  return reducer.toBlob(imageBlobOrFile, { max: Math.max(width, height) });\n}\n\nconst getNewDimensions = (\n  originalWidth: number,\n  originalHeight: number,\n  maxSize: number,\n) => {\n  const width =\n    originalWidth > originalHeight\n      ? maxSize\n      : Math.round(maxSize * (originalWidth / originalHeight));\n\n  const height =\n    originalHeight > originalWidth\n      ? maxSize\n      : Math.round(maxSize * (originalHeight / originalWidth));\n\n  return { width, height };\n};\n"],"mappings":";AAAA,OAAO,qBAAqB;AAC5B;AAAA,EAEE;AAAA,EAEA;AAAA,OAEK;AACP,OAAO,UAAU;AAEjB,IAAI;AAGJ,eAAsB,YACpB,iBACA,SAIyC;AAEzC,QAAM,EAAE,OAAO,eAAe,QAAQ,eAAe,IACnD,MAAM,aAAa,eAAe;AAEpC,QAAM,mBAAmB,KAAK,IAAI,eAAe,cAAc;AAG/D,QAAM,UAAU,CAAC,KAAK,MAAM,MAAM,gBAAgB,EAC/C,OAAO,CAAC,MAAM,MAAM,SAAS,WAAW,iBAAiB,EACzD,SAAS,CAAC,GAAG,MAAM,IAAI,CAAC;AAI3B,QAAM,EAAE,OAAO,YAAY,QAAQ,YAAY,IAAI;AAAA,IACjD;AAAA,IACA;AAAA,IACA,QAAQ,GAAG,EAAE;AAAA,EACf;AAEA,QAAM,kBAAkB,gBAAgB;AAAA,IACtC,EAAE,cAAc,CAAC,YAAY,WAAW,EAAE;AAAA,IAC1C,SAAS;AAAA,EACX;AACA,QAAM,QAAQ,gBAAgB;AAG9B,kBAAgB,qBACd,MAAM,qBAAqB,eAAe;AAG5C,WAAS,QAAQ,SAAS;AAExB,UAAM,EAAE,OAAO,OAAO,IAAI;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,OAAO,iBAAiB,OAAO,MAAM;AAEzD,UAAM,eAAe,MAAM,WAAW,eAAe,OAAO,KAAK;AACjE,oBAAgB,GAAG,KAAK,IAAI,MAAM,EAAE,IAAI;AAAA,EAC1C;AAEA,SAAO;AACT;AAEA,eAAe,aACb,iBAC4C;AAC5C,QAAM,EAAE,OAAO,OAAO,IAAI,MAAM,IAAI,QAGjC,CAAC,SAAS,WAAW;AACtB,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,SAAS,MAAM;AACjB,cAAQ,EAAE,OAAO,IAAI,OAAO,QAAQ,IAAI,OAAO,CAAC;AAChD,UAAI,gBAAgB,IAAI,GAAG;AAAA,IAC7B;AACA,QAAI,UAAU,MAAM;AAClB,aAAO,IAAI,MAAM,sBAAsB,CAAC;AACxC,UAAI,gBAAgB,IAAI,GAAG;AAAA,IAC7B;AACA,QAAI,MAAM,IAAI,gBAAgB,eAAe;AAAA,EAC/C,CAAC;AAED,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,eAAe,qBACb,iBACiB;AAEjB,MAAI,CAAC,SAAS;AACZ,cAAU,IAAI,gBAAgB,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC;AAAA,EACpD;AAEA,QAAM,SAAS,MAAM,QAAQ,SAAS,iBAAiB,EAAE,KAAK,EAAE,CAAC;AACjE,SAAO,OAAO,UAAU,WAAW;AACrC;AAEA,eAAe,OACb,iBACA,OACA,QACe;AAEf,MAAI,CAAC,SAAS;AACZ,cAAU,IAAI,gBAAgB,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC;AAAA,EACpD;AAEA,SAAO,QAAQ,OAAO,iBAAiB,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM,EAAE,CAAC;AACzE;AAEA,IAAM,mBAAmB,CACvB,eACA,gBACA,YACG;AACH,QAAM,QACJ,gBAAgB,iBACZ,UACA,KAAK,MAAM,WAAW,gBAAgB,eAAe;AAE3D,QAAM,SACJ,iBAAiB,gBACb,UACA,KAAK,MAAM,WAAW,iBAAiB,cAAc;AAE3D,SAAO,EAAE,OAAO,OAAO;AACzB;","names":[]}

package/dist/browser-media-images/index.test.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.browser.d.ts.map

package/dist/browser-media-images/index.test.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.browser.d.ts","sourceRoot":"","sources":["../../src/browser-media-images/index.test.browser.ts"],"names":[],"mappings":""}

package/package.json

@@ -139,7 +139,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "dependencies": {
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
     "@op-engineering/op-sqlite": "^11.4.8",
@@ -164,10 +164,10 @@
     "react-native-nitro-modules": "0.25.2",
     "react-native-quick-crypto": "1.0.0-beta.16",
     "zod": "3.25.28",
-    "cojson": "0.15.2",
-    "cojson-storage": "0.15.2",
-    "cojson-storage-indexeddb": "0.15.2",
-    "cojson-transport-ws": "0.15.2"
+    "cojson": "0.15.3",
+    "cojson-storage-indexeddb": "0.15.3",
+    "cojson-storage": "0.15.3",
+    "cojson-transport-ws": "0.15.3"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",
@@ -177,6 +177,8 @@
     "@testing-library/react": "16.2.0",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.50.1",
     "tsup": "8.5.0",
     "typescript": "5.6.2",
     "vitest": "3.1.3",

package/src/browser-media-images/index.test.browser.ts

@@ -0,0 +1,73 @@
+// @vitest-environment happy-dom
+
+import { createJazzTestAccount } from "jazz-tools/testing";
+import { describe, expect, it } from "vitest";
+import { createImage } from "./index.js";
+
+describe("createImage", () => {
+  it("should create an image with a single size if width/height < 256", async () => {
+    const OnePixel =
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==";
+    const imageBlob = new Blob(
+      [Uint8Array.from(atob(OnePixel), (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    const account = await createJazzTestAccount();
+
+    const image = await createImage(imageBlob, { owner: account._owner });
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).toBeDefined();
+
+    expect(image[`1x1`]).toBeDefined();
+    expect(image[`1x1`]!.getMetadata()!.mimeType).toBe("image/png");
+    expect(image["256x256"]).not.toBeDefined();
+    expect(image["1024x1024"]).not.toBeDefined();
+  });
+
+  it("should create an image with three sizes", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    const account = await createJazzTestAccount();
+
+    const image = await createImage(imageBlob, { owner: account._owner });
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1920, 400]);
+    expect(image.placeholderDataURL).toBeDefined();
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).toBeDefined();
+    expect(image[`1920x400`]).toBeDefined();
+  });
+
+  it("should lose the original size and create image based on maxSize", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    const account = await createJazzTestAccount();
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      maxSize: 256,
+    });
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([256, 53]);
+    expect(image.placeholderDataURL).toBeDefined();
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).not.toBeDefined();
+    expect(image[`1920x400`]).not.toBeDefined();
+  });
+});
+
+// Image 1920x400
+const White1920 = atob(
+  "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCAGQB4ADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//2Q==",
+);

package/src/browser-media-images/index.ts

@@ -8,7 +8,7 @@ import {
 } from "jazz-tools";
 import Pica from "pica";
 
-let pica: Pica.Pica | undefined;
+let reducer: ImageBlobReduce.ImageBlobReduce | undefined;
 
 /** @category Image creation */
 export async function createImage(
@@ -18,113 +18,114 @@ export async function createImage(
     maxSize?: 256 | 1024 | 2048;
   },
 ): Promise<Loaded<typeof ImageDefinition>> {
-  // Inizialize Pica here to not have module side effects
-  if (!pica) {
-    pica = new Pica();
-  }
-
-  let originalWidth!: number;
-  let originalHeight!: number;
-  const Reducer = new ImageBlobReduce({ pica });
-  Reducer.after("_blob_to_image", (env) => {
-    originalWidth =
-      (env as unknown as { orientation: number }).orientation & 4
-        ? env.image.height
-        : env.image.width;
-    originalHeight =
-      (env as unknown as { orientation: number }).orientation & 4
-        ? env.image.width
-        : env.image.height;
-    return Promise.resolve(env);
-  });
-
-  const placeholderDataURL = (
-    await Reducer.toCanvas(imageBlobOrFile, { max: 8 })
-  ).toDataURL("image/png");
+  // Get the original size of the image
+  const { width: originalWidth, height: originalHeight } =
+    await getImageSize(imageBlobOrFile);
+
+  const highestDimension = Math.max(originalWidth, originalHeight);
+
+  // Calculate the sizes to resize the image to
+  const resizes = [256, 1024, 2048, highestDimension]
+    .filter((s) => s <= (options?.maxSize ?? highestDimension))
+    .toSorted((a, b) => a - b);
+
+  // Get the highest resolution to use as final original size
+  // In case of options.maxSize, it's not the originalWidth/Height
+  const { width: finalWidth, height: finalHeight } = getNewDimensions(
+    originalWidth,
+    originalHeight,
+    resizes.at(-1)!,
+  );
 
   const imageDefinition = ImageDefinition.create(
-    {
-      originalSize: [originalWidth, originalHeight],
-      placeholderDataURL,
-    },
+    { originalSize: [finalWidth, finalHeight] },
     options?.owner,
   );
   const owner = imageDefinition._owner;
 
-  const fillImageResolutions = async () => {
-    const max256 = await Reducer.toBlob(imageBlobOrFile, { max: 256 });
-
-    if (originalWidth > 256 || originalHeight > 256) {
-      const width =
-        originalWidth > originalHeight
-          ? 256
-          : Math.round(256 * (originalWidth / originalHeight));
-      const height =
-        originalHeight > originalWidth
-          ? 256
-          : Math.round(256 * (originalHeight / originalWidth));
-
-      const binaryStream = await FileStream.createFromBlob(max256, owner);
-
-      imageDefinition[`${width}x${height}`] = binaryStream;
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    if (options?.maxSize === 256) return;
-
-    const max1024 = await Reducer.toBlob(imageBlobOrFile, { max: 1024 });
-
-    if (originalWidth > 1024 || originalHeight > 1024) {
-      const width =
-        originalWidth > originalHeight
-          ? 1024
-          : Math.round(1024 * (originalWidth / originalHeight));
-      const height =
-        originalHeight > originalWidth
-          ? 1024
-          : Math.round(1024 * (originalHeight / originalWidth));
-
-      const binaryStream = await FileStream.createFromBlob(max1024, owner);
-
-      imageDefinition[`${width}x${height}`] = binaryStream;
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    if (options?.maxSize === 1024) return;
-
-    const max2048 = await Reducer.toBlob(imageBlobOrFile, { max: 2048 });
+  // Placeholder 8x8
+  imageDefinition.placeholderDataURL =
+    await getPlaceholderBase64(imageBlobOrFile);
+
+  // Resizes for progressive loading
+  for (let size of resizes) {
+    // Calculate width and height respecting the aspect ratio
+    const { width, height } = getNewDimensions(
+      originalWidth,
+      originalHeight,
+      size,
+    );
 
-    if (originalWidth > 2048 || originalHeight > 2048) {
-      const width =
-        originalWidth > originalHeight
-          ? 2048
-          : Math.round(2048 * (originalWidth / originalHeight));
-      const height =
-        originalHeight > originalWidth
-          ? 2048
-          : Math.round(2048 * (originalHeight / originalWidth));
+    const image = await resize(imageBlobOrFile, width, height);
 
-      const binaryStream = await FileStream.createFromBlob(max2048, owner);
+    const binaryStream = await FileStream.createFromBlob(image, owner);
+    imageDefinition[`${width}x${height}`] = binaryStream;
+  }
 
-      imageDefinition[`${width}x${height}`] = binaryStream;
-    }
+  return imageDefinition;
+}
 
-    await new Promise((resolve) => setTimeout(resolve, 0));
+async function getImageSize(
+  imageBlobOrFile: Blob | File,
+): Promise<{ width: number; height: number }> {
+  const { width, height } = await new Promise<{
+    width: number;
+    height: number;
+  }>((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(imageBlobOrFile);
+  });
 
-    if (options?.maxSize === 2048) return;
+  return { width, height };
+}
 
-    const originalBinaryStream = await FileStream.createFromBlob(
-      imageBlobOrFile,
-      owner,
-    );
+async function getPlaceholderBase64(
+  imageBlobOrFile: Blob | File,
+): Promise<string> {
+  // Inizialize Reducer here to not have module side effects
+  if (!reducer) {
+    reducer = new ImageBlobReduce({ pica: new Pica() });
+  }
 
-    imageDefinition[`${originalWidth}x${originalHeight}`] =
-      originalBinaryStream;
-  };
+  const canvas = await reducer.toCanvas(imageBlobOrFile, { max: 8 });
+  return canvas.toDataURL("image/png");
+}
 
-  await fillImageResolutions();
+async function resize(
+  imageBlobOrFile: Blob | File,
+  width: number,
+  height: number,
+): Promise<Blob> {
+  // Inizialize Reducer here to not have module side effects
+  if (!reducer) {
+    reducer = new ImageBlobReduce({ pica: new Pica() });
+  }
 
-  return imageDefinition;
+  return reducer.toBlob(imageBlobOrFile, { max: Math.max(width, height) });
 }
+
+const getNewDimensions = (
+  originalWidth: number,
+  originalHeight: number,
+  maxSize: number,
+) => {
+  const width =
+    originalWidth > originalHeight
+      ? maxSize
+      : Math.round(maxSize * (originalWidth / originalHeight));
+
+  const height =
+    originalHeight > originalWidth
+      ? maxSize
+      : Math.round(maxSize * (originalHeight / originalWidth));
+
+  return { width, height };
+};

package/vitest.config.ts

@@ -2,9 +2,30 @@ import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   test: {
-    typecheck: {
-      enabled: true,
-      checker: "tsc",
-    },
+    workspace: [
+      {
+        test: {
+          typecheck: {
+            enabled: true,
+            checker: "tsc",
+          },
+          include: ["src/**/*.test.ts"],
+          name: "unit",
+        },
+      },
+      {
+        test: {
+          include: ["src/**/*.test.browser.ts"],
+          name: "browser",
+          browser: {
+            enabled: true,
+            provider: "playwright",
+            headless: true,
+            screenshotFailures: false,
+            instances: [{ browser: "chromium" }],
+          },
+        },
+      },
+    ],
   },
 });