refactor(web): remove buffer package (#11058)

web/package-lock.json

@@ -16,7 +16,6 @@
         "@photo-sphere-viewer/equirectangular-video-adapter": "^5.7.2",
         "@photo-sphere-viewer/video-plugin": "^5.7.2",
         "@zoom-image/svelte": "^0.2.6",
-        "buffer": "^6.0.3",
         "copy-image-clipboard": "^2.1.2",
         "dom-to-image": "^2.6.0",
         "handlebars": "^4.7.8",
@@ -3036,25 +3035,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -3118,29 +3098,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",

web/package.json

@@ -68,7 +68,6 @@
     "@photo-sphere-viewer/equirectangular-video-adapter": "^5.7.2",
     "@photo-sphere-viewer/video-plugin": "^5.7.2",
     "@zoom-image/svelte": "^0.2.6",
-    "buffer": "^6.0.3",
     "copy-image-clipboard": "^2.1.2",
     "dom-to-image": "^2.6.0",
     "handlebars": "^4.7.8",

web/src/lib/components/assets/thumbnail/__test__/image-thumbnail.spec.ts

@@ -0,0 +1,24 @@
+import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+import { render } from '@testing-library/svelte';
+
+describe('ImageThumbnail component', () => {
+  beforeAll(() => {
+    Object.defineProperty(HTMLImageElement.prototype, 'decode', {
+      value: vi.fn(),
+    });
+  });
+
+  it('shows thumbhash while image is loading', () => {
+    const sut = render(ImageThumbnail, {
+      url: 'http://localhost/img.png',
+      altText: 'test',
+      thumbhash: '1QcSHQRnh493V4dIh4eXh1h4kJUI',
+      widthStyle: '250px',
+    });
+
+    const [_, thumbhash] = sut.getAllByRole('img');
+    expect(thumbhash.getAttribute('src')).toContain(
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAMRklEQVR4AQBdAKL/', // truncated
+    );
+  });
+});

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
+  import { decodeBase64 } from '$lib/utils';
   import { fade } from 'svelte/transition';
   import { thumbHashToDataURL } from 'thumbhash';
-  // eslint-disable-next-line unicorn/prefer-node-protocol
-  import { Buffer } from 'buffer';
   import { mdiEyeOffOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
 
@@ -62,7 +61,7 @@
   <img
     style:width={widthStyle}
     style:height={heightStyle}
-    src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
+    src={thumbHashToDataURL(decodeBase64(thumbhash))}
     alt={altText}
     {title}
     class="absolute top-0 object-cover"

web/src/lib/utils.ts

@@ -333,3 +333,6 @@ export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T]
 export const suggestDuplicateByFileSize = (assets: AssetResponseDto[]): AssetResponseDto | undefined => {
   return sortBy(assets, (asset) => asset.exifInfo?.fileSizeInByte).pop();
 };
+
+// eslint-disable-next-line unicorn/prefer-code-point
+export const decodeBase64 = (data: string) => Uint8Array.from(atob(data), (c) => c.charCodeAt(0));