jazz-tools 0.16.5 → 0.17.0

package/src/svelte/tests/media/image.svelte.test.ts

@@ -0,0 +1,583 @@
+// @vitest-environment happy-dom
+import { FileStream, ImageDefinition } from "jazz-tools";
+import { createJazzTestAccount } from "jazz-tools/testing";
+import { describe, expect, it, vi } from "vitest";
+import Image from "../../media/image.svelte";
+import { render, screen, waitFor } from "../testUtils";
+
+describe("Image", async () => {
+  const account = await createJazzTestAccount({
+    isCurrentActiveAccount: true,
+  });
+
+  const renderWithAccount = (props: any) => render(Image, props, { account });
+
+  describe("initial rendering", () => {
+    it("should render nothing if coValue is not found", async () => {
+      const { container } = renderWithAccount({
+        imageId: "co_zMTubMby3QiKDYnW9e2BEXW7Xaq",
+        alt: "test",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBe(null);
+      expect(img!.getAttribute("height")).toBe(null);
+      expect(img!.alt).toBe("test");
+      expect(img!.src).toBe("");
+    });
+
+    it("should render an empty image if the image is not loaded yet", async () => {
+      const original = FileStream.create({ owner: account._owner });
+      original.start({ mimeType: "image/jpeg" });
+      // Don't end original, so it has no chunks
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBe(null);
+      expect(img!.getAttribute("height")).toBe(null);
+      expect(img!.alt).toBe("test");
+      expect(img!.src).toBe("");
+    });
+
+    it("should render the placeholder image if the image is not loaded yet", async () => {
+      const placeholderDataUrl =
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+
+      const original = FileStream.create({ owner: account._owner });
+      original.start({ mimeType: "image/jpeg" });
+      // Don't end original, so it has no chunks
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [100, 100],
+          progressive: false,
+          placeholderDataURL: placeholderDataUrl,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.src).toBe(placeholderDataUrl);
+    });
+
+    it("should render the original image once loaded", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      renderWithAccount({
+        imageId: im.id,
+        alt: "test-loading",
+      });
+
+      await waitFor(() => {
+        expect(
+          (screen.getByAltText("test-loading") as HTMLImageElement).src,
+        ).toBe("blob:test-100");
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe("dimensions", () => {
+    it("should render the original image if the width and height are not set", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBe(null);
+      expect(img!.getAttribute("height")).toBe(null);
+    });
+
+    it("should render the original sizes", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        width: "original",
+        height: "original",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBe("100");
+      expect(img!.getAttribute("height")).toBe("100");
+    });
+
+    it("should render the original size keeping the aspect ratio", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        width: "original",
+        height: 300,
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBe("300");
+      expect(img!.getAttribute("height")).toBe("300");
+    });
+
+    it("should render the width attribute if it is set", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        width: 50,
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBe("50");
+      expect(img!.getAttribute("height")).toBeNull();
+    });
+
+    it("should render the height attribute if it is set", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        height: 50,
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.getAttribute("width")).toBeNull();
+      expect(img!.getAttribute("height")).toBe("50");
+    });
+
+    it("should render the class attribute if it is set", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        class: "test-class",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.classList.contains("test-class")).toBe(true);
+    });
+  });
+
+  describe("progressive loading", () => {
+    it("should render the resized image if progressive loading is enabled", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const original = await createDummyFileStream(500, account);
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [500, 500],
+          progressive: true,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      im["500x500"] = original;
+      im["256x256"] = await createDummyFileStream(256, account);
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test-progressive",
+        width: 300,
+      });
+
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-500",
+        );
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledOnce();
+    });
+
+    it("should show the highest resolution images as they are loaded", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const original = await createDummyFileStream(1920, account);
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [1920, 1080],
+          progressive: true,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      im["1920x1080"] = original;
+      im["256x256"] = await createDummyFileStream(256, account);
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test-progressive",
+        width: 1024,
+      });
+
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-1920",
+        );
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
+
+      // Load higher resolution image
+      im["1024x1024"] = await createDummyFileStream(1024, account);
+
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-1024",
+        );
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(2);
+    });
+
+    it("should show the best loaded resolution if width is set", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const original = await FileStream.createFromBlob(createDummyBlob(1), {
+        owner: account,
+      });
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [100, 100],
+          progressive: true,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      im["100x100"] = original;
+      im["256x256"] = await createDummyFileStream(256, account);
+      im["1024x1024"] = await createDummyFileStream(1024, account);
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test-progressive",
+        width: 256,
+      });
+
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-256",
+        );
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("should show the original image if asked resolution matches", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const original = await createDummyFileStream(100, account);
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [100, 100],
+          progressive: true,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      im["100x100"] = original;
+      im["256x256"] = await createDummyFileStream(256, account);
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test-progressive",
+        width: 100,
+      });
+
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-100",
+        );
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("should update to a higher resolution image when width/height props are changed at runtime", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const original = await createDummyFileStream(256, account);
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [256, 256],
+          progressive: true,
+        },
+        {
+          owner: account,
+        },
+      );
+      im["256x256"] = original;
+      im["1024x1024"] = await createDummyFileStream(1024, account);
+
+      const { container, rerender } = renderWithAccount({
+        imageId: im.id,
+        alt: "test-dynamic",
+        width: 256,
+        height: 256,
+      });
+
+      // Initially, should load 256x256
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-256",
+        );
+      });
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
+
+      rerender({
+        imageId: im.id,
+        alt: "test-dynamic",
+        width: 1024,
+        height: 1024,
+      });
+
+      // After prop change, should load 1024x1024
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-1024",
+        );
+      });
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("lazy loading", () => {
+    it("should return an empty png if loading is lazy and placeholder is not set", async () => {
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        loading: "lazy",
+      });
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.src).toBe("blob:test-70");
+    });
+
+    it("should load the image when threshold is reached", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const im = ImageDefinition.create(
+        {
+          original: await createDummyFileStream(100, account),
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = renderWithAccount({
+        imageId: im.id,
+        alt: "test",
+        loading: "lazy",
+      });
+
+      const img = container.querySelector("img");
+      // simulate the load event when the browser's viewport reach the image
+      img!.dispatchEvent(new Event("load"));
+
+      await waitFor(() => {
+        expect((container.querySelector("img") as HTMLImageElement).src).toBe(
+          "blob:test-100",
+        );
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+});
+
+function createDummyBlob(size: number): Blob {
+  const blob = new Blob([new Uint8Array(size)], { type: "image/png" });
+  return blob;
+}
+
+function createDummyFileStream(
+  size: number,
+  account: Awaited<ReturnType<typeof createJazzTestAccount>>,
+) {
+  return FileStream.createFromBlob(createDummyBlob(size), {
+    owner: account,
+  });
+}

package/src/svelte/tests/testUtils.ts

@@ -0,0 +1,33 @@
+import { render as renderSvelte } from "@testing-library/svelte";
+import { Account, AnonymousJazzAgent } from "jazz-tools";
+import { TestJazzContextManager } from "jazz-tools/testing";
+import { Component, ComponentProps } from "svelte";
+import { JAZZ_AUTH_CTX, JAZZ_CTX } from "../jazz.svelte";
+
+type JazzExtendedOptions = {
+  account: Account | { guest: AnonymousJazzAgent };
+};
+
+const render = <T extends Component>(
+  component: T,
+  props: ComponentProps<T>,
+  jazzOptions: JazzExtendedOptions,
+) => {
+  const ctx = TestJazzContextManager.fromAccountOrGuest(jazzOptions.account);
+
+  return renderSvelte(
+    // @ts-expect-error Svelte new Component type is not compatible with @testing-library/svelte
+    component,
+    {
+      props,
+      context: new Map<any, any>([
+        [JAZZ_CTX, { current: ctx.getCurrentValue() }],
+        [JAZZ_AUTH_CTX, ctx.getAuthSecretStorage()],
+      ]),
+    },
+  );
+};
+
+export * from "@testing-library/svelte";
+
+export { render };

package/src/svelte/tests/types.d.ts

@@ -0,0 +1,3 @@
+declare module "*.svelte" {
+  export { SvelteComponentDev as default } from "svelte/internal";
+}

package/src/tools/coValues/coFeed.ts

@@ -9,7 +9,7 @@ import type {
   RawCoStream,
   SessionID,
 } from "cojson";
-import { MAX_RECOMMENDED_TX_SIZE, cojsonInternals } from "cojson";
+import { cojsonInternals } from "cojson";
 import type {
   AnonymousJazzAgent,
   CoValue,
@@ -836,6 +836,38 @@ export class FileStream extends CoValueBase implements CoValue {
         }
       | Account
       | Group,
+  ): Promise<FileStream> {
+    const arrayBuffer = await blob.arrayBuffer();
+    return this.createFromArrayBuffer(
+      arrayBuffer,
+      blob.type,
+      blob instanceof File ? blob.name : undefined,
+      options,
+    );
+  }
+
+  /**
+   * Create a `FileStream` from a `Blob` or `File`
+   *
+   * @example
+   * ```ts
+   * import { coField, FileStream } from "jazz-tools";
+   *
+   * const fileStream = await FileStream.createFromBlob(file, {owner: group})
+   * ```
+   * @category Content
+   */
+  static async createFromArrayBuffer(
+    arrayBuffer: ArrayBuffer,
+    mimeType: string,
+    fileName: string | undefined,
+    options?:
+      | {
+          owner?: Group | Account;
+          onProgress?: (progress: number) => void;
+        }
+      | Account
+      | Group,
   ): Promise<FileStream> {
     const stream = this.create(options);
     const onProgress =
@@ -843,13 +875,14 @@ export class FileStream extends CoValueBase implements CoValue {
 
     const start = Date.now();
 
-    const data = new Uint8Array(await blob.arrayBuffer());
+    const data = new Uint8Array(arrayBuffer);
     stream.start({
-      mimeType: blob.type,
-      totalSizeBytes: blob.size,
-      fileName: blob instanceof File ? blob.name : undefined,
+      mimeType,
+      totalSizeBytes: arrayBuffer.byteLength,
+      fileName,
     });
-    const chunkSize = MAX_RECOMMENDED_TX_SIZE;
+    const chunkSize =
+      cojsonInternals.TRANSACTION_CONFIG.MAX_RECOMMENDED_TX_SIZE;
 
     let lastProgressUpdate = Date.now();
 
@@ -870,7 +903,7 @@ export class FileStream extends CoValueBase implements CoValue {
       "Finished creating binary stream in",
       (end - start) / 1000,
       "s - Throughput in MB/s",
-      (1000 * (blob.size / (end - start))) / (1024 * 1024),
+      (1000 * (arrayBuffer.byteLength / (end - start))) / (1024 * 1024),
     );
     onProgress?.(1);