Fix bug with uploading blank images

bump blossom-client-sdk to v3

.changeset/sour-houses-sing.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Fix bug with uploading blank images

package.json

@@ -57,7 +57,7 @@
     "applesauce-react": "next",
     "applesauce-signers": "next",
     "bech32": "^2.0.0",
-    "blossom-client-sdk": "next",
+    "blossom-client-sdk": "^3.0.0",
     "blurhash": "^2.0.5",
     "canvas-confetti": "^1.9.3",
     "chart.js": "^4.4.7",

pnpm-lock.yaml

@@ -127,8 +127,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       blossom-client-sdk:
-        specifier: next
-        version: 0.0.0-next-20250124155258
+        specifier: ^3.0.0
+        version: 3.0.0
       blurhash:
         specifier: ^2.0.5
         version: 2.0.5
@@ -2355,13 +2355,13 @@ packages:
   block-stream2@2.1.0:
     resolution: {integrity: sha512-suhjmLI57Ewpmq00qaygS8UgEq2ly2PCItenIyhMqVjo4t4pGzqMvfgJuX8iWTeSDdfSSqS6j38fL4ToNL7Pfg==}
 
-  blossom-client-sdk@0.0.0-next-20250124155258:
-    resolution: {integrity: sha512-OA1nLViB2BYecWacYk1/qACnr0ssOqFAuaSU/OSDCG2xBI4G13dwMd8PvO8imAeFbA3hflw3Wf/PKt7cFLoE4A==}
-    engines: {node: '>=18'}
-
   blossom-client-sdk@0.9.1:
     resolution: {integrity: sha512-lEZ4uNzM09rhp7mjzmgLDC3OEgFd76GkmR90fye/IT5HVCofIT6ldBfyqBY9DcuM1S+XNa1Cu14wFg95CyH8Ag==}
 
+  blossom-client-sdk@3.0.0:
+    resolution: {integrity: sha512-33sMdNGg3Nee3n86bepofN+aYe6eVpvrxlVYGlzf6uRiQUU/QKIhV52lRsApWlzuxxX3Vr77Qh8DxIWVraj5Rg==}
+    engines: {node: '>=18'}
+
   blossom-server-sdk@0.4.0:
     resolution: {integrity: sha512-sZDosyS2OVa+fM2ifdCOckziAcFwMpzlcxGG1JawwR8dWcQkWmsTJVETZKuZG8EUeUrl25oSyGBWHx7itA2ZOA==}
 
@@ -8654,11 +8654,6 @@ snapshots:
     dependencies:
       readable-stream: 3.6.2
 
-  blossom-client-sdk@0.0.0-next-20250124155258:
-    dependencies:
-      '@cashu/cashu-ts': 2.2.0
-      '@noble/hashes': 1.7.1
-
   blossom-client-sdk@0.9.1:
     dependencies:
       '@noble/hashes': 1.7.1
@@ -8666,6 +8661,11 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  blossom-client-sdk@3.0.0:
+    dependencies:
+      '@cashu/cashu-ts': 2.2.0
+      '@noble/hashes': 1.7.1
+
   blossom-server-sdk@0.4.0:
     dependencies:
       better-sqlite3: 11.8.1

src/lib/fix-image-orientation/index.ts

@@ -24,19 +24,15 @@ const createImage = (src: string) => {
 };
 
 async function createTransformed(file: Blob | File, orientation: number, type: string) {
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-
-  if (context == undefined) throw new Error("undefined context");
-
   const objectURL = URL.createObjectURL(file);
   const image = await createImage(objectURL);
 
+  const canvas = new OffscreenCanvas(image.width, image.height);
+  const context = canvas.getContext("2d");
+  if (context == undefined) throw new Error("undefined context");
+
   // NOTE: for some unknown reason firefox and chrome seem to be handling the orientation... so no need to transform
-  // if (noTransformOrientations.has(orientation)) {
-  canvas.width = image.width;
-  canvas.height = image.height;
-  // } else {
+  // if (!noTransformOrientations.has(orientation)) {
   //   if (reversedAspectRatioOrientations.has(orientation)) {
   //     canvas.width = image.height;
   //     canvas.height = image.width;
@@ -47,23 +43,19 @@ async function createTransformed(file: Blob | File, orientation: number, type: s
   //   transformsByOrientation[orientation](image, context);
   // }
   context.drawImage(image, 0, 0);
+  URL.revokeObjectURL(objectURL);
 
-  return new Promise<Blob | File>((res, rej) => {
-    canvas.toBlob((blob) => {
-      URL.revokeObjectURL(objectURL);
-      if (blob) {
-        if (file instanceof File) res(new File([blob], file.name, { type: file.type }));
-        else res(blob);
-      } else rej(new Error("Failed to export canvas"));
-    }, type);
-  });
+  const blob = await canvas.convertToBlob({ type });
+
+  if (file instanceof File) return new File([blob], file.name, { type: blob.type });
+  else return blob;
 }
 
 export async function fixOrientationAndStripMetadata(file: File | Blob) {
   const buffer = await readFileAsArrayBuffer(file);
   const exif = getOrientation(new DataView(buffer));
 
-  if (exif == undefined) return file;
+  if (exif === undefined) return file;
 
   return createTransformed(file, exif.orientation, file.type || exif.type);
 }