jazz-tools 0.16.6 → 0.17.1

package/package.json

@@ -24,6 +24,12 @@
       "types": "./dist/browser-media-images/index.d.ts",
       "default": "./dist/browser-media-images/index.js"
     },
+    "./media": {
+      "@jazz-tools/source": "./src/media/index.ts",
+      "types": "./dist/media/index.d.ts",
+      "react-native": "./dist/media/index.native.js",
+      "default": "./dist/media/index.browser.js"
+    },
     "./expo": {
       "@jazz-tools/source": "./src/expo/index.ts",
       "types": "./dist/expo/index.d.ts",
@@ -109,11 +115,6 @@
       "types": "./dist/react-native-core/testing.d.ts",
       "default": "./dist/react-native-core/testing.js"
     },
-    "./react-native-media-images": {
-      "@jazz-tools/source": "./src/react-native-media-images/index.ts",
-      "types": "./dist/react-native-media-images/index.d.ts",
-      "default": "./dist/react-native-media-images/index.js"
-    },
     "./svelte": {
       "svelte": "./dist/svelte/index.js",
       "@jazz-tools/source": "./src/svelte/index.ts",
@@ -139,18 +140,15 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.16.6",
+  "version": "0.17.1",
   "dependencies": {
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
     "@scure/base": "1.2.1",
     "@scure/bip39": "^1.3.0",
     "@tiptap/core": "^2.12.0",
-    "@types/image-blob-reduce": "^4.1.1",
     "clsx": "^2.0.0",
     "fast-myers-diff": "^3.2.0",
     "goober": "^2.1.16",
-    "image-blob-reduce": "^4.1.0",
-    "pica": "^9.0.1",
     "prosemirror-example-setup": "^1.2.2",
     "prosemirror-menu": "^1.2.4",
     "prosemirror-model": "^1.21.1",
@@ -158,16 +156,18 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.9.0",
     "zod": "3.25.76",
-    "cojson": "0.16.6",
-    "cojson-storage-indexeddb": "0.16.6",
-    "cojson-transport-ws": "0.16.6"
+    "cojson": "0.17.1",
+    "cojson-storage-indexeddb": "0.17.1",
+    "cojson-transport-ws": "0.17.1"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",
     "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "16.2.0",
+    "@testing-library/svelte": "^5.2.6",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@vitest/browser": "^3.2.4",

package/src/media/create-image.test.ts

@@ -0,0 +1,195 @@
+import { FileStream } from "jazz-tools";
+import { createJazzTestAccount } from "jazz-tools/testing";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createImageFactory } from "./create-image.js";
+
+describe("createImage", async () => {
+  const account = await createJazzTestAccount();
+
+  const getImageSize = vi.fn();
+  const getPlaceholderBase64 = vi.fn();
+  const createFileStreamFromSource = vi
+    .fn()
+    .mockResolvedValue(FileStream.create({ owner: account._owner }));
+  const resize = vi.fn();
+
+  const createImage = createImageFactory({
+    getImageSize,
+    getPlaceholderBase64,
+    createFileStreamFromSource,
+    resize,
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should create a single original image if all settings are off", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(OnePixel, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1, height: 1 });
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: false,
+      progressive: false,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+    expect(image[`1x1`]).toBeDefined();
+    expect(image[`1x1`]).toStrictEqual(image.original);
+  });
+
+  it("should create the image with original and placeholder", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(OnePixel, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1, height: 1 });
+    getPlaceholderBase64.mockResolvedValue(
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+    );
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: "blur",
+      progressive: false,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+  });
+
+  it("should create a resized image if maxSize is set", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1920, height: 400 });
+    resize.mockResolvedValue(new Blob([White1920], { type: "image/png" }));
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: false,
+      progressive: false,
+      maxSize: 256,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([256, 53]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+    expect(image[`256x53`]).toStrictEqual(image.original);
+
+    expect(resize).toHaveBeenCalledWith(imageBlob, 256, 53);
+  });
+
+  it("should not resize the original image if maxSize is higher than the original size", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(OnePixel, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1, height: 1 });
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: false,
+      progressive: false,
+      maxSize: 256,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+    expect(image[`1x1`]).toStrictEqual(image.original);
+
+    expect(resize).not.toHaveBeenCalled();
+  });
+
+  it("should create an image with intermediate sizes for progressive loading", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1920, height: 400 });
+    resize.mockResolvedValue(new Blob([White1920], { type: "image/png" }));
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      progressive: true,
+      placeholder: false,
+    });
+
+    expect(image).toBeDefined();
+    expect(image.originalSize).toEqual([1920, 400]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).toBeDefined();
+    expect(image[`2048x427`]).not.toBeDefined();
+
+    expect(resize).toHaveBeenCalledWith(imageBlob, 256, 53);
+    expect(resize).toHaveBeenCalledWith(imageBlob, 1024, 213);
+    expect(resize).not.toHaveBeenCalledWith(imageBlob, 2048, 427);
+  });
+
+  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" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1920, height: 400 });
+    resize.mockResolvedValue(new Blob([White1920], { type: "image/png" }));
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      maxSize: 256,
+      placeholder: false,
+      progressive: true,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([256, 53]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).not.toBeDefined();
+    expect(image[`2048x427`]).not.toBeDefined();
+
+    expect(resize).toHaveBeenCalledWith(imageBlob, 256, 53);
+    expect(resize).not.toHaveBeenCalledWith(imageBlob, 1024, 213);
+    expect(resize).not.toHaveBeenCalledWith(imageBlob, 2048, 427);
+  });
+});
+
+// 1x1 png
+const OnePixel = atob(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+);
+
+// Image 1920x400
+const White1920 = atob(
+  "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCAGQB4ADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//2Q==",
+);

package/src/media/create-image.ts

@@ -0,0 +1,180 @@
+import {
+  Account,
+  FileStream,
+  Group,
+  ImageDefinition,
+  type Loaded,
+} from "jazz-tools";
+
+export type SourceType = Blob | File | string;
+
+export type CreateImageOptions = {
+  /** The owner of the image. Can be either a Group or Account. If not specified, the current user will be the owner. */
+  owner?: Group | Account;
+  /**
+   * Controls placeholder generation for the image.
+   * - `"blur"`: Generates a blurred placeholder image (default)
+   * - `false`: No placeholder is generated
+   * @default "blur"
+   */
+  placeholder?: "blur" | false;
+  /**
+   * Maximum size constraint for the image. The image will be resized to fit within this size while maintaining aspect ratio.
+   * If the image is smaller than maxSize in both dimensions, no resizing occurs.
+   * @example 1024 // Resizes image to fit within 1024px in the largest dimension
+   */
+  maxSize?: number; // | [number, number];
+  /**
+   * The progressive loading pattern is a technique that allows images to load incrementally, starting with a small version and gradually replacing it with a larger version as it becomes available.
+   * This is useful for improving the user experience by showing a placeholder while the image is loading.
+   *
+   * Passing progressive: true to createImage() will create internal smaller versions of the image for future uses.
+   *
+   * @default false
+   */
+  progressive?: boolean;
+};
+
+export type CreateImageImpl = {
+  createFileStreamFromSource: (
+    imageBlobOrFile: SourceType,
+    owner?: Group | Account,
+  ) => Promise<FileStream>;
+  getImageSize: (
+    imageBlobOrFile: SourceType,
+  ) => Promise<{ width: number; height: number }>;
+  getPlaceholderBase64: (imageBlobOrFile: SourceType) => Promise<string>;
+  resize: (
+    imageBlobOrFile: SourceType,
+    width: number,
+    height: number,
+  ) => Promise<Blob | string>;
+};
+
+export function createImageFactory(impl: CreateImageImpl) {
+  return (source: SourceType, options: CreateImageOptions) =>
+    createImage(source, options, impl);
+}
+
+async function createImage(
+  imageBlobOrFile: SourceType,
+  options: CreateImageOptions,
+  impl: CreateImageImpl,
+): Promise<Loaded<typeof ImageDefinition, { $each: true }>> {
+  // Get the original size of the image
+  const { width: originalWidth, height: originalHeight } =
+    await impl.getImageSize(imageBlobOrFile);
+
+  const def: {
+    originalSize: [number, number];
+    progressive: boolean;
+    placeholderDataURL: string | undefined;
+    original?: FileStream;
+    files: Record<string, FileStream>;
+  } = {
+    originalSize: [originalWidth, originalHeight],
+    progressive: false,
+    placeholderDataURL: undefined,
+    files: {},
+  };
+
+  // Placeholder
+  if (options?.placeholder === "blur") {
+    def.placeholderDataURL = await impl.getPlaceholderBase64(imageBlobOrFile);
+  }
+
+  /**
+   * Original
+   *
+   * Save the original image.
+   * If the maxSize is set, resize the image to the maxSize if needed
+   */
+  if (options?.maxSize === undefined) {
+    def.original = await impl.createFileStreamFromSource(
+      imageBlobOrFile,
+      options?.owner,
+    );
+    def.files[`${originalWidth}x${originalHeight}`] = def.original;
+  } else if (
+    options?.maxSize >= originalWidth &&
+    options?.maxSize >= originalHeight
+  ) {
+    // no resizes required, just return the original image
+    def.original = await impl.createFileStreamFromSource(
+      imageBlobOrFile,
+      options?.owner,
+    );
+    def.files[`${originalWidth}x${originalHeight}`] = def.original;
+  } else {
+    const { width, height } = getNewDimensions(
+      originalWidth,
+      originalHeight,
+      options.maxSize,
+    );
+
+    const blob = await impl.resize(imageBlobOrFile, width, height);
+    def.originalSize = [width, height];
+    def.original = await impl.createFileStreamFromSource(blob, options?.owner);
+    def.files[`${width}x${height}`] = def.original;
+  }
+
+  const imageCoValue = ImageDefinition.create(
+    {
+      originalSize: def.originalSize,
+      progressive: def.progressive,
+      placeholderDataURL: def.placeholderDataURL,
+      original: def.original,
+      ...def.files,
+    },
+    options?.owner,
+  );
+
+  /**
+   * Progressive loading
+   *
+   * Save a set of resized images using three sizes: 256, 1024, 2048
+   *
+   * On the client side, the image will be loaded progressively, starting from the smallest size and increasing the size until the original size is reached.
+   */
+  if (options?.progressive) {
+    imageCoValue.progressive = true;
+
+    const resizes = ([256, 1024, 2048] as const).filter(
+      (s) =>
+        s <
+        Math.max(imageCoValue.originalSize[0], imageCoValue.originalSize[1]),
+    );
+
+    for (const size of resizes) {
+      const { width, height } = getNewDimensions(
+        originalWidth,
+        originalHeight,
+        size,
+      );
+
+      const blob = await impl.resize(imageBlobOrFile, width, height);
+      imageCoValue[`${width}x${height}`] =
+        await impl.createFileStreamFromSource(blob, options?.owner);
+    }
+  }
+
+  return imageCoValue;
+}
+
+const getNewDimensions = (
+  originalWidth: number,
+  originalHeight: number,
+  maxSize: number,
+) => {
+  if (originalWidth > originalHeight) {
+    return {
+      width: maxSize,
+      height: Math.round(maxSize * (originalHeight / originalWidth)),
+    };
+  }
+
+  return {
+    width: Math.round(maxSize * (originalWidth / originalHeight)),
+    height: maxSize,
+  };
+};

package/src/media/index.browser.ts

@@ -0,0 +1,150 @@
+import { Account, FileStream, Group, ImageDefinition } from "jazz-tools";
+import { CreateImageOptions, createImageFactory } from "./create-image.js";
+
+export { highestResAvailable, loadImage, loadImageBySize } from "./utils.js";
+
+export { createImageFactory };
+
+export async function createImage(
+  imageBlobOrFile: Blob | File | string,
+  options?: CreateImageOptions,
+) {
+  return createImageFactory({
+    createFileStreamFromSource,
+    getImageSize,
+    getPlaceholderBase64,
+    resize,
+  })(imageBlobOrFile, options || {});
+}
+
+//  Image Manipulations
+async function createFileStreamFromSource(
+  imageBlobOrFile: Blob | File | string,
+  owner?: Account | Group,
+): Promise<FileStream> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error(
+      "createFileStreamFromSource(string) is not supported on this platform",
+    );
+  }
+
+  return FileStream.createFromBlob(imageBlobOrFile, owner);
+}
+
+// using createImageBitmap is ~10x slower than Image object
+// Image object: 640 milliseconds
+// createImageBitmap: 8128 milliseconds
+function getImageFromBlob(blob: Blob): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve(img);
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(blob);
+  });
+}
+
+async function getImageSize(
+  imageBlobOrFile: Blob | File | string,
+): Promise<{ width: number; height: number }> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error("getImageSize(string) is not supported on browser");
+  }
+
+  const image = await getImageFromBlob(imageBlobOrFile);
+
+  return { width: image.width, height: image.height };
+}
+
+async function getPlaceholderBase64(
+  imageBlobOrFile: Blob | File | string,
+): Promise<string> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error("getPlaceholderBase64(string) is not supported on browser");
+  }
+
+  const image = await getImageFromBlob(imageBlobOrFile);
+
+  const { width, height } = resizeDimensionsKeepingAspectRatio(
+    image.width,
+    image.height,
+    8,
+  );
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Failed to get context");
+  }
+
+  ctx.drawImage(image, 0, 0, width, height);
+
+  return canvas.toDataURL("image/png");
+}
+
+const resizeDimensionsKeepingAspectRatio = (
+  width: number,
+  height: number,
+  maxSize: number,
+): { width: number; height: number } => {
+  if (width <= maxSize && height <= maxSize) {
+    return { width, height };
+  }
+
+  const aspectRatio = width / height;
+
+  if (width >= height) {
+    return { width: maxSize, height: Math.round(maxSize / aspectRatio) };
+  } else {
+    return { width: Math.round(maxSize * aspectRatio), height: maxSize };
+  }
+};
+
+async function resize(
+  imageBlobOrFile: Blob | File | string,
+  width: number,
+  height: number,
+): Promise<Blob> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error("resize(string) is not supported on browser");
+  }
+
+  const mimeType = imageBlobOrFile.type;
+
+  const image = await getImageFromBlob(imageBlobOrFile);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Failed to get context");
+  }
+
+  ctx.drawImage(image, 0, 0, width, height);
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Failed to convert canvas to blob"));
+          return;
+        }
+        resolve(blob);
+      },
+      mimeType,
+      0.8,
+    );
+  });
+}