jazz-tools 0.18.2 → 0.18.3

package/src/media/create-image/react-native.ts

@@ -0,0 +1,158 @@
+import type ImageResizerType from "@bam.tech/react-native-image-resizer";
+import type { Account, Group } from "jazz-tools";
+import { FileStream } from "jazz-tools";
+import { Image } from "react-native";
+import { createImageFactory } from "../create-image-factory";
+
+let ImageResizer: typeof ImageResizerType | undefined;
+
+/**
+ * Creates an ImageDefinition from an image file path with built-in UX features.
+ *
+ * This function creates a specialized CoValue for managing images in Jazz applications.
+ * It supports blurry placeholders, built-in resizing, and progressive loading patterns.
+ *
+ * @returns Promise that resolves to an ImageDefinition
+ *
+ * @example
+ * ```ts
+ * import { createImage } from "jazz-tools/media";
+ *
+ * async function uploadImageFromCamera(imagePath: string) {
+ *   const image = await createImage(imagePath, {
+ *     maxSize: 800,
+ *     placeholder: "blur",
+ *     progressive: false,
+ *   });
+ *
+ *   return image;
+ * }
+ * ```
+ */
+export const createImage = createImageFactory(
+  {
+    getImageSize,
+    getPlaceholderBase64,
+    createFileStreamFromSource,
+    resize,
+  },
+  (filePath) => {
+    if (typeof filePath !== "string") {
+      throw new Error(
+        "createImage(Blob | File) is not supported on this platform",
+      );
+    }
+  },
+);
+
+async function getResizer(): Promise<typeof ImageResizerType> {
+  if (!ImageResizer) {
+    try {
+      ImageResizer = (await import("@bam.tech/react-native-image-resizer"))
+        .default;
+    } catch (e) {
+      throw new Error(
+        "ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`",
+      );
+    }
+  }
+
+  return ImageResizer;
+}
+
+async function getImageSize(
+  filePath: string,
+): Promise<{ width: number; height: number }> {
+  const { width, height } = await Image.getSize(filePath);
+
+  return { width, height };
+}
+
+async function getPlaceholderBase64(filePath: string): Promise<string> {
+  const ImageResizer = await getResizer();
+
+  const { uri } = await ImageResizer.createResizedImage(
+    filePath,
+    8,
+    8,
+    "PNG",
+    100,
+  );
+
+  return imageUrlToBase64(uri);
+}
+
+async function resize(
+  filePath: string,
+  width: number,
+  height: number,
+): Promise<string> {
+  const ImageResizer = await getResizer();
+
+  const mimeType = await getMimeType(filePath);
+
+  const { uri } = await ImageResizer.createResizedImage(
+    filePath,
+    width,
+    height,
+    contentTypeToFormat(mimeType),
+    80,
+  );
+
+  return uri;
+}
+
+function getMimeType(filePath: string): Promise<string> {
+  return fetch(filePath)
+    .then((res) => res.blob())
+    .then((blob) => blob.type);
+}
+
+function contentTypeToFormat(contentType: string) {
+  if (contentType.includes("image/png")) return "PNG";
+  if (contentType.includes("image/jpeg")) return "JPEG";
+  if (contentType.includes("image/webp")) return "WEBP";
+  return "PNG";
+}
+
+export async function createFileStreamFromSource(
+  filePath: string,
+  owner?: Account | Group,
+): Promise<FileStream> {
+  const blob = await fetch(filePath).then((res) => res.blob());
+  const arrayBuffer = await toArrayBuffer(blob);
+
+  return FileStream.createFromArrayBuffer(arrayBuffer, blob.type, undefined, {
+    owner,
+  });
+}
+
+// TODO: look for more efficient way to do this as React Native hasn't blob.arrayBuffer()
+function toArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result as ArrayBuffer);
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+}
+
+async function imageUrlToBase64(url: string): Promise<string> {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return new Promise((onSuccess, onError) => {
+    try {
+      const reader = new FileReader();
+      reader.onload = function () {
+        onSuccess(reader.result as string);
+      };
+      reader.readAsDataURL(blob);
+    } catch (e) {
+      onError(e);
+    }
+  });
+}

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

@@ -0,0 +1,74 @@
+// @vitest-environment node
+
+import { createJazzTestAccount } from "jazz-tools/testing";
+import sharp from "sharp";
+import { describe, expect, it } from "vitest";
+import { createImage } from "./server";
+
+describe("createImage (server)", async () => {
+  const account = await createJazzTestAccount();
+
+  const getImageSize = async (blobOrBuffer: Blob | Buffer) => {
+    const imageBuffer =
+      blobOrBuffer instanceof Blob
+        ? await blobOrBuffer.arrayBuffer()
+        : blobOrBuffer;
+
+    const image = sharp(imageBuffer);
+    const { width, height } = await image.metadata();
+    return [width, height];
+  };
+
+  it("should create an image with intermediate sizes for progressive loading and placeholder", async () => {
+    const imageBlob = new Blob([Buffer.from(White1920, "base64")], {
+      type: "image/png",
+    });
+
+    const image = await createImage(imageBlob, {
+      owner: account,
+      progressive: true,
+      placeholder: "blur",
+    });
+
+    expect(image).toBeDefined();
+    expect(image.originalSize).toEqual([1920, 400]);
+    expect(image.placeholderDataURL).toBeDefined();
+
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).toBeDefined();
+    expect(image[`2048x427`]).not.toBeDefined();
+  });
+
+  it("should correctly resize images for intermediate sizes", async () => {
+    const imageBlob = new Blob([Buffer.from(White1920, "base64")], {
+      type: "image/png",
+    });
+
+    const image = await createImage(imageBlob, {
+      owner: account,
+      progressive: true,
+      placeholder: "blur",
+    });
+
+    const {
+      original,
+      "256x53": s1,
+      "1024x213": s2,
+    } = await image.$jazz.ensureLoaded({
+      resolve: { original: true, [`256x53`]: true, [`1024x213`]: true },
+    });
+
+    expect(
+      await getImageSize(
+        Buffer.from(image.placeholderDataURL!.split(",")[1]!, "base64"),
+      ),
+    ).toEqual([8, 2]);
+    expect(await getImageSize(original.toBlob()!)).toEqual([1920, 400]);
+    expect(await getImageSize(s1.toBlob()!)).toEqual([256, 53]);
+    expect(await getImageSize(s2.toBlob()!)).toEqual([1024, 213]);
+  });
+});
+
+// Image 1920x400
+const White1920 =
+  "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCAGQB4ADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//2Q==";

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

@@ -0,0 +1,181 @@
+import { Account, FileStream, Group } from "jazz-tools";
+import type sharp from "sharp";
+import { createImageFactory } from "../create-image-factory";
+
+export type SharpImageType =
+  | File
+  | Blob
+  | Buffer
+  | ArrayBuffer
+  | Uint8Array
+  | Uint8ClampedArray
+  | Int8Array
+  | Uint16Array
+  | Int16Array
+  | Uint32Array
+  | Int32Array
+  | Float32Array
+  | Float64Array;
+
+let sharpModule: typeof import("sharp");
+
+async function getSharp() {
+  if (!sharpModule) {
+    sharpModule = await import("sharp").then((m) => m.default);
+  }
+
+  return sharpModule;
+}
+
+/**
+ * Creates an ImageDefinition from an image File, Blob or Buffer with built-in UX features.
+ *
+ * This function creates a specialized CoValue for managing images in Jazz applications.
+ * It supports blurry placeholders, built-in resizing, and progressive loading patterns.
+ *
+ * @returns Promise that resolves to an ImageDefinition
+ *
+ * @example
+ * ```ts
+ * import fs from "node:fs";
+ * import { createImage } from "jazz-tools/media";
+ *
+ * const imageBuffer = fs.readFileSync("path/to/image.jpg");
+ * const image = await createImage(imageBuffer, {
+ *   maxSize: 800,
+ *   placeholder: "blur",
+ *   progressive: false,
+ * });
+ * ```
+ */
+export const createImage = createImageFactory<SharpImageType, Blob>(
+  {
+    createFileStreamFromSource,
+    getImageSize,
+    getPlaceholderBase64,
+    resize,
+  },
+  (imageBlobOrFile) => {
+    if (typeof imageBlobOrFile === "string") {
+      throw new Error("createImage(string) is not supported on this platform");
+    }
+  },
+);
+
+function formatToMimeType(format: keyof sharp.FormatEnum | undefined) {
+  const formatToTypeMap: Record<
+    Extract<
+      keyof sharp.FormatEnum,
+      "avif" | "gif" | "jpeg" | "jpg" | "png" | "webp"
+    >,
+    string
+  > = {
+    avif: "image/avif",
+    gif: "image/gif",
+    jpeg: "image/jpeg",
+    jpg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+  };
+
+  if (!format) {
+    throw new Error("Could not determine image format");
+  }
+
+  if (!(format in formatToTypeMap)) {
+    throw new Error(`Unsupported image format: ${format}`);
+  }
+
+  return formatToTypeMap[format as keyof typeof formatToTypeMap];
+}
+
+async function createFileStreamFromSource(
+  imageBlobOrBuffer: SharpImageType,
+  owner?: Account | Group,
+): Promise<FileStream> {
+  // `File` is also an instance of `Blob`
+  if (imageBlobOrBuffer instanceof Blob) {
+    return FileStream.createFromBlob(imageBlobOrBuffer, { owner });
+  }
+
+  const sharp = await getSharp();
+
+  const image = sharp(imageBlobOrBuffer);
+  const metadata = await image.metadata();
+  const format = metadata.format;
+  const mimeType = formatToMimeType(format);
+
+  return FileStream.createFromArrayBuffer(
+    imageBlobOrBuffer,
+    mimeType,
+    undefined,
+    { owner },
+  );
+}
+
+async function getImageSize(
+  imageBlobOrBuffer: SharpImageType,
+): Promise<{ width: number; height: number }> {
+  const imageBuffer =
+    imageBlobOrBuffer instanceof Blob
+      ? await imageBlobOrBuffer.arrayBuffer()
+      : imageBlobOrBuffer;
+
+  const sharp = await getSharp();
+  const image = sharp(imageBuffer);
+  const metadata = await image.metadata();
+
+  return { width: metadata.width!, height: metadata.height! };
+}
+
+async function getPlaceholderBase64(
+  imageBlobOrBuffer: SharpImageType,
+): Promise<string> {
+  const imageBuffer =
+    imageBlobOrBuffer instanceof Blob
+      ? await imageBlobOrBuffer.arrayBuffer()
+      : imageBlobOrBuffer;
+
+  const sharp = await getSharp();
+
+  const image = sharp(imageBuffer);
+  const placeholder = await image
+    .resize({
+      width: 8,
+      height: 8,
+      fit: "inside",
+    })
+    .toFormat("png")
+    .toBuffer();
+
+  return `data:image/png;base64,${placeholder.toString("base64")}`;
+}
+
+async function resize(
+  imageBlobOrBuffer: SharpImageType,
+  width: number,
+  height: number,
+): Promise<Blob> {
+  const imageBuffer =
+    imageBlobOrBuffer instanceof Blob
+      ? await imageBlobOrBuffer.arrayBuffer()
+      : imageBlobOrBuffer;
+
+  const sharp = await getSharp();
+
+  const image = sharp(imageBuffer);
+  const metadata = await image.metadata();
+  const format = metadata.format;
+  const mimeType = formatToMimeType(format);
+
+  const resizedBuffer = await image
+    .resize({
+      width,
+      height,
+    })
+    .toBuffer();
+
+  return new Blob([new Uint8Array(resizedBuffer)], {
+    type: mimeType,
+  });
+}

package/src/media/{create-image.test.ts → create-image-factory.test.ts}

@@ -1,7 +1,7 @@
 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";
+import { createImageFactory } from "./create-image-factory";
 
 describe("createImage", async () => {
   const account = await createJazzTestAccount();

package/src/media/{create-image.ts → create-image-factory.ts}

@@ -8,6 +8,8 @@ import {
 
 export type SourceType = Blob | File | string;
 
+export type ResizeOutput = Blob | 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;
@@ -35,31 +37,39 @@ export type CreateImageOptions = {
   progressive?: boolean;
 };
 
-export type CreateImageImpl = {
+export type CreateImageImpl<
+  TSourceType = SourceType,
+  TResizeOutput = ResizeOutput,
+> = {
   createFileStreamFromSource: (
-    imageBlobOrFile: SourceType,
+    imageBlobOrFile: TSourceType | TResizeOutput,
     owner?: Group | Account,
   ) => Promise<FileStream>;
   getImageSize: (
-    imageBlobOrFile: SourceType,
+    imageBlobOrFile: TSourceType,
   ) => Promise<{ width: number; height: number }>;
-  getPlaceholderBase64: (imageBlobOrFile: SourceType) => Promise<string>;
+  getPlaceholderBase64: (imageBlobOrFile: TSourceType) => Promise<string>;
   resize: (
-    imageBlobOrFile: SourceType,
+    imageBlobOrFile: TSourceType,
     width: number,
     height: number,
-  ) => Promise<Blob | string>;
+  ) => Promise<TResizeOutput>;
 };
 
-export function createImageFactory(impl: CreateImageImpl) {
-  return (source: SourceType, options: CreateImageOptions) =>
-    createImage(source, options, impl);
+export function createImageFactory<TSourceType, TResizeOutput>(
+  impl: CreateImageImpl<TSourceType, TResizeOutput>,
+  imageTypeGuard?: (imageBlobOrFile: TSourceType) => void,
+) {
+  return (source: TSourceType, options?: CreateImageOptions) => {
+    imageTypeGuard?.(source);
+    return createImage(source, options ?? {}, impl);
+  };
 }
 
-async function createImage(
-  imageBlobOrFile: SourceType,
+async function createImage<TSourceType, TResizeOutput>(
+  imageBlobOrFile: TSourceType,
   options: CreateImageOptions,
-  impl: CreateImageImpl,
+  impl: CreateImageImpl<TSourceType, TResizeOutput>,
 ): Promise<Loaded<typeof ImageDefinition, { $each: true }>> {
   // Get the original size of the image
   const { width: originalWidth, height: originalHeight } =

package/src/media/exports.ts

@@ -0,0 +1,2 @@
+export { highestResAvailable, loadImage, loadImageBySize } from "./utils.js";
+export { createImageFactory } from "./create-image-factory";

package/src/media/index.browser.ts

@@ -1,150 +1,2 @@
-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,
-    );
-  });
-}
+export * from "./exports";
+export { createImage } from "./create-image/browser";