Store 'blobs' client side for identities

Author: Tim Giroux

.gitignore

@@ -35,6 +35,7 @@ yarn-error.log*
 
 dist
 services/server/data
+polycentric-blobs/
 
 # Turborepo
 .turbo/

apps/polycentric/package.json

@@ -39,6 +39,7 @@
     "expo-dev-client": "~55.0.10",
     "expo-device": "~55.0.0",
     "expo-document-picker": "~55.0.8",
+    "expo-file-system": "~55.0.17",
     "expo-font": "~55.0.4",
     "expo-haptics": "~55.0.8",
     "expo-image": "~55.0.5",

apps/polycentric/src/common/lib/images/processAndUploadImage.ts

@@ -1,4 +1,3 @@
-import { sha256 } from '@noble/hashes/sha2';
 import { v2, type PolycentricClient } from '@polycentric/react-native';
 import { File } from 'expo-file-system';
 import { isWeb } from '@/src/common/util/platform';
@@ -11,16 +10,12 @@ export type ProcessAndUploadOptions = {
   sizes?: number[];
   /** `fill` crops to a square (default, for avatars). `fit` preserves aspect. */
   mode?: 'fill' | 'fit';
-  /** Source image width. Required for `mode: 'fit'` so variants record correct dims. */
-  sourceWidth?: number;
-  /** Source image height. Required for `mode: 'fit'` so variants record correct dims. */
-  sourceHeight?: number;
 };
 
 /**
  * Fetch an image from `uri`, resize it into each size in `sizes` via
- * the core's JPEG encoder, upload each variant's bytes to the client's
- * servers, and return the assembled `ImageSet`.
+ * the core's JPEG encoder, commit each variant locally and upload to
+ * the client's servers, and return the assembled `ImageSet`.
  */
 export async function processAndUploadImage(
   client: PolycentricClient,
@@ -41,27 +36,14 @@ export async function processAndUploadImage(
 
   const variants = await Promise.all(
     sizes.map(async (size) => {
-      const jpeg = client.processImageToJpeg(raw, size, size, mode);
-      const { width, height } = computeOutputDims(
+      const { bytes, width, height } = client.processImageToJpeg(
+        raw,
         size,
         size,
         mode,
-        options.sourceWidth,
-        options.sourceHeight,
       );
-      const image = v2.Image.create({
-        blob: {
-          digest: {
-            type: v2.ContentDigestType.SHA256,
-            value: sha256(jpeg),
-          },
-          mimeType: 'image/jpeg',
-          size: BigInt(jpeg.length),
-        },
-        width,
-        height,
-      });
-      return { image, body: jpeg };
+      const blob = await client.commitBlob(bytes, 'image/jpeg');
+      return { image: v2.Image.create({ blob, width, height }), body: bytes };
     }),
   );
 
@@ -75,27 +57,3 @@ export async function processAndUploadImage(
 
   return v2.ImageSet.create({ images: variants.map((v) => v.image) });
 }
-
-/**
- * Match the `image` crate's `resize()`: scale both axes by
- * `min(targetW/srcW, targetH/srcH)` and round. For fill mode the
- * output is always exactly the requested bounds. For fit mode without
- * known source dims, we fall back to the bounds (the client can re-
- * derive aspect from the served image if needed).
- */
-function computeOutputDims(
-  targetW: number,
-  targetH: number,
-  mode: 'fill' | 'fit',
-  srcW?: number,
-  srcH?: number,
-): { width: number; height: number } {
-  if (mode === 'fill' || !srcW || !srcH) {
-    return { width: targetW, height: targetH };
-  }
-  const ratio = Math.min(targetW / srcW, targetH / srcH);
-  return {
-    width: Math.max(1, Math.round(srcW * ratio)),
-    height: Math.max(1, Math.round(srcH * ratio)),
-  };
-}

apps/polycentric/src/features/composer/ComposeSheetInner.tsx

@@ -152,8 +152,6 @@ export function ComposeSheetInner({
                 processAndUploadImage(client, a.uri, {
                   mode: 'fit',
                   sizes: POST_VARIANT_SIZES,
-                  sourceWidth: a.width,
-                  sourceHeight: a.height,
                 }),
               ),
             )
@@ -190,6 +188,7 @@ export function ComposeSheetInner({
         signedEvent,
         serializedContent: { contentBytes: v2.Content.toBinary(content) },
       });
+
       const identity = currentIdentityKey ?? '';
 
       // Optimistically add the new event to the below query

apps/polycentric/src/features/profile/lib/publishProfileUpdate.ts

@@ -17,7 +17,6 @@ export async function publishProfileUpdate(
   const avatar = avatarUri
     ? await processAndUploadImage(client, avatarUri)
     : undefined;
-
   const content = client.contentManager.build({
     oneofKind: 'profileUpdate',
     profileUpdate: {