jazz-tools 0.16.6 → 0.17.0

package/dist/media/index.native.js

@@ -0,0 +1,126 @@
+import {
+  createImageFactory,
+  highestResAvailable,
+  loadImage,
+  loadImageBySize
+} from "./chunk-BBSS3NEY.js";
+
+// src/media/index.native.ts
+import ImageResizer from "@bam.tech/react-native-image-resizer";
+import { FileStream } from "jazz-tools";
+import { Image } from "react-native";
+async function createImage(imageBlobOrFile, options) {
+  return createImageFactory({
+    getImageSize,
+    getPlaceholderBase64,
+    createFileStreamFromSource,
+    resize
+  })(imageBlobOrFile, options || {});
+}
+async function getImageSize(filePath) {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform"
+    );
+  }
+  const { width, height } = await Image.getSize(filePath);
+  return { width, height };
+}
+async function getPlaceholderBase64(filePath) {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform"
+    );
+  }
+  if (typeof ImageResizer === "undefined" || ImageResizer === null) {
+    throw new Error(
+      "ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`"
+    );
+  }
+  const { uri } = await ImageResizer.createResizedImage(
+    filePath,
+    8,
+    8,
+    "PNG",
+    100
+  );
+  return imageUrlToBase64(uri);
+}
+async function resize(filePath, width, height) {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform"
+    );
+  }
+  if (typeof ImageResizer === "undefined" || ImageResizer === null) {
+    throw new Error(
+      "ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`"
+    );
+  }
+  const mimeType = await getMimeType(filePath);
+  const { uri } = await ImageResizer.createResizedImage(
+    filePath,
+    width,
+    height,
+    contentTypeToFormat(mimeType),
+    80
+  );
+  return uri;
+}
+function getMimeType(filePath) {
+  return fetch(filePath).then((res) => res.blob()).then((blob) => blob.type);
+}
+function contentTypeToFormat(contentType) {
+  if (contentType.includes("image/png")) return "PNG";
+  if (contentType.includes("image/jpeg")) return "JPEG";
+  if (contentType.includes("image/webp")) return "WEBP";
+  return "PNG";
+}
+async function createFileStreamFromSource(filePath, owner) {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform"
+    );
+  }
+  const blob = await fetch(filePath).then((res) => res.blob());
+  const arrayBuffer = await toArrayBuffer(blob);
+  return FileStream.createFromArrayBuffer(arrayBuffer, blob.type, void 0, {
+    owner
+  });
+}
+function toArrayBuffer(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+}
+async function imageUrlToBase64(url) {
+  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);
+      };
+      reader.readAsDataURL(blob);
+    } catch (e) {
+      onError(e);
+    }
+  });
+}
+export {
+  createFileStreamFromSource,
+  createImage,
+  createImageFactory,
+  highestResAvailable,
+  loadImage,
+  loadImageBySize
+};
+//# sourceMappingURL=index.native.js.map

package/dist/media/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/index.native.ts"],"sourcesContent":["import ImageResizer from \"@bam.tech/react-native-image-resizer\";\nimport type { Account, Group, ImageDefinition } from \"jazz-tools\";\nimport { FileStream } from \"jazz-tools\";\nimport { Image } from \"react-native\";\nimport {\n  CreateImageOptions,\n  SourceType,\n  createImageFactory,\n} from \"./create-image.js\";\n\nexport { highestResAvailable, loadImage, loadImageBySize } from \"./utils.js\";\nexport { createImageFactory };\n\nexport async function createImage(\n  imageBlobOrFile: Blob | File | string,\n  options?: CreateImageOptions,\n) {\n  return createImageFactory({\n    getImageSize,\n    getPlaceholderBase64,\n    createFileStreamFromSource,\n    resize,\n  })(imageBlobOrFile, options || {});\n}\n\nasync function getImageSize(\n  filePath: SourceType,\n): Promise<{ width: number; height: number }> {\n  if (typeof filePath !== \"string\") {\n    throw new Error(\n      \"createImage(Blob | File) is not supported on this platform\",\n    );\n  }\n\n  const { width, height } = await Image.getSize(filePath);\n\n  return { width, height };\n}\n\nasync function getPlaceholderBase64(filePath: SourceType): Promise<string> {\n  if (typeof filePath !== \"string\") {\n    throw new Error(\n      \"createImage(Blob | File) is not supported on this platform\",\n    );\n  }\n\n  if (typeof ImageResizer === \"undefined\" || ImageResizer === null) {\n    throw new Error(\n      \"ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`\",\n    );\n  }\n\n  const { uri } = await ImageResizer.createResizedImage(\n    filePath,\n    8,\n    8,\n    \"PNG\",\n    100,\n  );\n\n  return imageUrlToBase64(uri);\n}\n\nasync function resize(\n  filePath: SourceType,\n  width: number,\n  height: number,\n): Promise<string> {\n  if (typeof filePath !== \"string\") {\n    throw new Error(\n      \"createImage(Blob | File) is not supported on this platform\",\n    );\n  }\n\n  if (typeof ImageResizer === \"undefined\" || ImageResizer === null) {\n    throw new Error(\n      \"ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`\",\n    );\n  }\n\n  const mimeType = await getMimeType(filePath);\n\n  const { uri } = await ImageResizer.createResizedImage(\n    filePath,\n    width,\n    height,\n    contentTypeToFormat(mimeType),\n    80,\n  );\n\n  return uri;\n}\n\nfunction getMimeType(filePath: string): Promise<string> {\n  return fetch(filePath)\n    .then((res) => res.blob())\n    .then((blob) => blob.type);\n}\n\nfunction contentTypeToFormat(contentType: string) {\n  if (contentType.includes(\"image/png\")) return \"PNG\";\n  if (contentType.includes(\"image/jpeg\")) return \"JPEG\";\n  if (contentType.includes(\"image/webp\")) return \"WEBP\";\n  return \"PNG\";\n}\n\nexport async function createFileStreamFromSource(\n  filePath: SourceType,\n  owner?: Account | Group,\n): Promise<FileStream> {\n  if (typeof filePath !== \"string\") {\n    throw new Error(\n      \"createImage(Blob | File) is not supported on this platform\",\n    );\n  }\n\n  const blob = await fetch(filePath).then((res) => res.blob());\n  const arrayBuffer = await toArrayBuffer(blob);\n\n  return FileStream.createFromArrayBuffer(arrayBuffer, blob.type, undefined, {\n    owner,\n  });\n}\n\n// TODO: look for more efficient way to do this as React Native hasn't blob.arrayBuffer()\nfunction toArrayBuffer(blob: Blob): Promise<ArrayBuffer> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      resolve(reader.result as ArrayBuffer);\n    };\n    reader.onerror = (error) => {\n      reject(error);\n    };\n    reader.readAsArrayBuffer(blob);\n  });\n}\n\nasync function imageUrlToBase64(url: string): Promise<string> {\n  const response = await fetch(url);\n  const blob = await response.blob();\n  return new Promise((onSuccess, onError) => {\n    try {\n      const reader = new FileReader();\n      reader.onload = function () {\n        onSuccess(reader.result as string);\n      };\n      reader.readAsDataURL(blob);\n    } catch (e) {\n      onError(e);\n    }\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/media/utils.d.ts

@@ -0,0 +1,17 @@
+import { FileStream, ImageDefinition } from "jazz-tools";
+export declare function highestResAvailable(image: ImageDefinition, wantedWidth: number, wantedHeight: number): {
+    width: number;
+    height: number;
+    image: FileStream;
+} | null;
+export declare function loadImage(imageOrId: ImageDefinition | string): Promise<{
+    width: number;
+    height: number;
+    image: FileStream;
+} | null>;
+export declare function loadImageBySize(imageOrId: ImageDefinition | string, wantedWidth: number, wantedHeight: number): Promise<{
+    width: number;
+    height: number;
+    image: FileStream;
+} | null>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/media/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/media/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAW,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElE,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,GAAG,IAAI,CAuE7D;AA6BD,wBAAsB,SAAS,CAC7B,SAAS,EAAE,eAAe,GAAG,MAAM,GAClC,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,GAAG,IAAI,CAAC,CAmCtE;AAED,wBAAsB,eAAe,CACnC,SAAS,EAAE,eAAe,GAAG,MAAM,EACnC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,GAAG,IAAI,CAAC,CAmDtE"}

package/dist/media/utils.test.d.ts

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

package/dist/media/utils.test.d.ts.map

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

package/dist/react/index.d.ts

@@ -3,6 +3,5 @@ export type { JazzProviderProps } from "./provider.js";
 export { useAccount, useCoState, useAcceptInvite, experimental_useInboxSender, useJazzContext, useAuthSecretStorage, } from "./hooks.js";
 export { createInviteLink, parseInviteLink } from "jazz-tools/browser";
 export * from "./auth/auth.js";
-export * from "./media.js";
-export { createImage } from "jazz-tools/browser-media-images";
+export * from "./media/image.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,2BAA2B,EAC3B,cAAc,EACd,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEvE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,2BAA2B,EAC3B,cAAc,EACd,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEvE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/dist/react/index.js

@@ -142,14 +142,14 @@ function RegisterClerkAuth(props) {
   return props.children;
 }
 var JazzReactProviderWithClerk = (props) => {
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoaded2, setIsLoaded] = useState(false);
   useEffect3(() => {
     setupKvStore();
     JazzClerkAuth.initializeAuth(props.clerk).then(() => {
       setIsLoaded(true);
     });
   }, []);
-  if (!isLoaded) {
+  if (!isLoaded2) {
     return null;
   }
   return /* @__PURE__ */ jsx2(JazzReactProvider, { ...props, logOutReplacement: props.clerk.signOut, children: /* @__PURE__ */ jsx2(RegisterClerkAuth, { clerk: props.clerk, children: props.children }) });
@@ -620,70 +620,188 @@ import {
   usePassphraseAuth as usePassphraseAuth2
 } from "jazz-tools/react-core";
 
-// src/react/media.tsx
-import { ImageDefinition } from "jazz-tools";
-import { useEffect as useEffect4, useState as useState5 } from "react";
-function useProgressiveImg({
-  image,
-  maxWidth,
-  targetWidth
-}) {
-  const [current, setCurrent] = useState5(void 0);
-  useEffect4(() => {
-    let lastHighestRes;
-    if (!image) return;
-    const unsub = image.subscribe({}, (update) => {
-      const highestRes = ImageDefinition.highestResAvailable(update, {
-        maxWidth,
-        targetWidth
-      });
-      if (highestRes) {
-        if (highestRes.res !== lastHighestRes) {
-          lastHighestRes = highestRes.res;
-          const blob = highestRes.stream.toBlob();
-          if (blob) {
-            const blobURI = URL.createObjectURL(blob);
-            setCurrent({ src: blobURI, res: highestRes.res });
-            return () => {
-              setTimeout(() => URL.revokeObjectURL(blobURI), 200);
-            };
-          }
-        }
-      } else {
-        setCurrent({
-          src: update?.placeholderDataURL,
-          res: "placeholder"
-        });
-      }
-    });
-    return unsub;
-  }, [image?.id, maxWidth]);
-  return {
-    src: current?.src,
-    res: current?.res,
-    originalSize: image?.originalSize
-  };
+// src/react/media/image.tsx
+import { ImageDefinition as ImageDefinition3 } from "jazz-tools";
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect4,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState5
+} from "react";
+
+// src/media/create-image.ts
+import {
+  ImageDefinition
+} from "jazz-tools";
+
+// src/media/utils.ts
+import { Account as Account3, ImageDefinition as ImageDefinition2 } from "jazz-tools";
+function highestResAvailable(image, wantedWidth, wantedHeight) {
+  const availableSizes = image._raw.keys().filter((key) => /^\d+x\d+$/.test(key)).map((key) => {
+    const [w, h] = key.split("x").map(Number);
+    return [w, h, key];
+  });
+  if (availableSizes.length === 0) {
+    return image.original ? {
+      width: image.originalSize[0],
+      height: image.originalSize[1],
+      image: image.original
+    } : null;
+  }
+  const sortedSizes = availableSizes.map((size) => {
+    return {
+      size,
+      match: sizesMatchWanted(size[0], size[1], wantedWidth, wantedHeight),
+      isLoaded: isLoaded(image._raw.get(size[2]))
+    };
+  }).sort((a, b) => a.match - b.match);
+  const bestLoaded = [...sortedSizes].reverse().find((el) => el.isLoaded && image[el.size[2]]?.getChunks());
+  const bestTarget = sortedSizes.find((el) => el.match > 0.95) || sortedSizes.at(-1);
+  if (image[bestTarget.size[2]]?.getChunks()) {
+    return image[bestTarget.size[2]] ? {
+      width: bestTarget.size[0],
+      height: bestTarget.size[1],
+      image: image[bestTarget.size[2]]
+    } : null;
+  }
+  if (bestLoaded) {
+    image[bestTarget.size[2]]?.getChunks();
+    return image[bestLoaded.size[2]] ? {
+      width: bestLoaded.size[0],
+      height: bestLoaded.size[1],
+      image: image[bestLoaded.size[2]]
+    } : null;
+  }
+  for (let size of sortedSizes) {
+    if (size.match <= bestTarget.match) {
+      image[size.size[2]]?.getChunks();
+    }
+  }
+  return null;
 }
-function ProgressiveImg({
-  children,
-  image,
-  maxWidth,
-  targetWidth
-}) {
-  const result = useProgressiveImg({ image, maxWidth, targetWidth });
-  return result ? children(result) : null;
+function sizesMatchWanted(w, h, wantedW, wantedH) {
+  const area1 = w * h;
+  const area2 = wantedW * wantedH;
+  const areaRatio = area1 / area2;
+  return areaRatio;
+}
+function isLoaded(id) {
+  if (!id) {
+    return false;
+  }
+  return !!Account3.getMe()._raw.core.node.getLoaded(id);
 }
 
-// src/react/index.ts
-import { createImage } from "jazz-tools/browser-media-images";
+// src/react/media/image.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Image = forwardRef(function Image2({ imageId, width, height, ...props }, ref) {
+  const image = useCoState(ImageDefinition3, imageId);
+  const lastBestImage = useRef2(null);
+  const [waitingLazyLoading, setWaitingLazyLoading] = useState5(
+    props.loading === "lazy"
+  );
+  const lazyPlaceholder = useMemo3(
+    () => waitingLazyLoading ? URL.createObjectURL(emptyPixelBlob) : void 0,
+    [waitingLazyLoading]
+  );
+  const dimensions = useMemo3(() => {
+    const originalWidth = image?.originalSize?.[0];
+    const originalHeight = image?.originalSize?.[1];
+    if (width === "original" && height === "original") {
+      return { width: originalWidth, height: originalHeight };
+    }
+    if (width === "original" && typeof height === "number") {
+      if (originalWidth && originalHeight) {
+        return {
+          width: Math.round(height * originalWidth / originalHeight),
+          height
+        };
+      }
+      return { width: void 0, height };
+    }
+    if (height === "original" && typeof width === "number") {
+      if (originalWidth && originalHeight) {
+        return {
+          width,
+          height: Math.round(width * originalHeight / originalWidth)
+        };
+      }
+      return { width, height: void 0 };
+    }
+    return {
+      width: width === "original" ? originalWidth : width,
+      height: height === "original" ? originalHeight : height
+    };
+  }, [image?.originalSize, width, height]);
+  const src = useMemo3(() => {
+    if (waitingLazyLoading) {
+      return lazyPlaceholder;
+    }
+    if (!image) return void 0;
+    const bestImage = highestResAvailable(
+      image,
+      dimensions.width || dimensions.height || 9999,
+      dimensions.height || dimensions.width || 9999
+    );
+    if (!bestImage) return image.placeholderDataURL;
+    if (lastBestImage.current?.[0] === bestImage.image.id)
+      return lastBestImage.current?.[1];
+    const blob = bestImage.image.toBlob();
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      revokeObjectURL(lastBestImage.current?.[1]);
+      lastBestImage.current = [bestImage.image.id, url];
+      return url;
+    }
+    return image.placeholderDataURL;
+  }, [image, dimensions.width, dimensions.height, waitingLazyLoading]);
+  const onThresholdReached = useCallback(() => {
+    setWaitingLazyLoading(false);
+  }, []);
+  useEffect4(
+    () => () => {
+      if (process.env.NODE_ENV === "development") return;
+      revokeObjectURL(lastBestImage.current?.[1]);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx6(
+    "img",
+    {
+      ref,
+      src,
+      width: dimensions.width,
+      height: dimensions.height,
+      onLoad: waitingLazyLoading ? onThresholdReached : void 0,
+      ...props
+    }
+  );
+});
+function revokeObjectURL(url) {
+  if (url && url.startsWith("blob:")) {
+    URL.revokeObjectURL(url);
+  }
+}
+var emptyPixelBlob = new Blob(
+  [
+    Uint8Array.from(
+      atob(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
+      ),
+      (c) => c.charCodeAt(0)
+    )
+  ],
+  { type: "image/png" }
+);
 export {
   DemoAuthBasicUI,
+  Image,
   JazzReactProvider,
   JazzReactProviderWithClerk,
   PasskeyAuthBasicUI,
   PassphraseAuthBasicUI,
-  ProgressiveImg,
-  createImage,
   createInviteLink,
   experimental_useInboxSender,
   parseInviteLink,
@@ -695,7 +813,6 @@ export {
   useIsAuthenticated2 as useIsAuthenticated,
   useJazzContext2 as useJazzContext,
   usePasskeyAuth,
-  usePassphraseAuth2 as usePassphraseAuth,
-  useProgressiveImg
+  usePassphraseAuth2 as usePassphraseAuth
 };
 //# sourceMappingURL=index.js.map