feat(web): use thumbhash as a cache key (#16106)

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -43,10 +43,10 @@
   import DetailPanel from './detail-panel.svelte';
   import CropArea from './editor/crop-tool/crop-area.svelte';
   import EditorPanel from './editor/editor-panel.svelte';
+  import ImagePanoramaViewer from './image-panorama-viewer.svelte';
   import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-wrapper-viewer.svelte';
-  import ImagePanoramaViewer from './image-panorama-viewer.svelte';
 
   type HasAsset = boolean;
 
@@ -190,7 +190,7 @@
     }
   };
 
-  const onAssetUpdate = (assetUpdate: AssetResponseDto) => {
+  const onAssetUpdate = ({ asset: assetUpdate }: { event: 'upload' | 'update'; asset: AssetResponseDto }) => {
     if (assetUpdate.id === asset.id) {
       asset = assetUpdate;
     }
@@ -198,8 +198,8 @@
 
   onMount(async () => {
     unsubscribes.push(
-      websocketEvents.on('on_upload_success', onAssetUpdate),
+      websocketEvents.on('on_upload_success', (asset) => onAssetUpdate({ event: 'upload', asset })),
-      websocketEvents.on('on_asset_update', onAssetUpdate),
+      websocketEvents.on('on_asset_update', (asset) => onAssetUpdate({ event: 'update', asset })),
     );
 
     slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
@@ -377,6 +377,7 @@
       case AssetAction.KEEP_THIS_DELETE_OTHERS:
       case AssetAction.UNSTACK: {
         closeViewer();
+        break;
       }
     }
 
@@ -483,7 +484,7 @@
         {:else}
           <VideoViewer
             assetId={previewStackedAsset.id}
-            checksum={previewStackedAsset.checksum}
+            cacheKey={previewStackedAsset.thumbhash}
             projectionType={previewStackedAsset.exifInfo?.projectionType}
             loopVideo={true}
             onPreviousAsset={() => navigateAsset('previous')}
@@ -500,7 +501,7 @@
           {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
             <VideoViewer
               assetId={asset.livePhotoVideoId}
-              checksum={asset.checksum}
+              cacheKey={asset.thumbhash}
               projectionType={asset.exifInfo?.projectionType}
               loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
               onPreviousAsset={() => navigateAsset('previous')}
@@ -529,7 +530,7 @@
         {:else}
           <VideoViewer
             assetId={asset.id}
-            checksum={asset.checksum}
+            cacheKey={asset.thumbhash}
             projectionType={asset.exifInfo?.projectionType}
             loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
             onPreviousAsset={() => navigateAsset('previous')}

web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte

@@ -50,7 +50,7 @@
     img = new Image();
     await tick();
 
-    img.src = getAssetOriginalUrl({ id: asset.id, checksum: asset.checksum });
+    img.src = getAssetOriginalUrl({ id: asset.id, cacheKey: asset.thumbhash });
 
     img.addEventListener('load', () => onImageLoad(true));
     img.addEventListener('error', (error) => {

web/src/lib/components/asset-viewer/photo-viewer.spec.ts

@@ -40,7 +40,7 @@ describe('PhotoViewer component', () => {
     expect(getAssetThumbnailUrlSpy).toBeCalledWith({
       id: asset.id,
       size: AssetMediaSize.Preview,
-      checksum: asset.checksum,
+      cacheKey: asset.thumbhash,
     });
     expect(getAssetOriginalUrlSpy).not.toBeCalled();
   });
@@ -50,7 +50,7 @@ describe('PhotoViewer component', () => {
     render(PhotoViewer, { asset });
 
     expect(getAssetThumbnailUrlSpy).not.toBeCalled();
-    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, checksum: asset.checksum });
+    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, cacheKey: asset.thumbhash });
   });
 
   it('loads original for shared link when download permission is true and showMetadata permission is true', () => {
@@ -59,7 +59,7 @@ describe('PhotoViewer component', () => {
     render(PhotoViewer, { asset, sharedLink });
 
     expect(getAssetThumbnailUrlSpy).not.toBeCalled();
-    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, checksum: asset.checksum });
+    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, cacheKey: asset.thumbhash });
   });
 
   it('not loads original image when shared link download permission is false', () => {
@@ -70,7 +70,7 @@ describe('PhotoViewer component', () => {
     expect(getAssetThumbnailUrlSpy).toBeCalledWith({
       id: asset.id,
       size: AssetMediaSize.Preview,
-      checksum: asset.checksum,
+      cacheKey: asset.thumbhash,
     });
 
     expect(getAssetOriginalUrlSpy).not.toBeCalled();
@@ -84,7 +84,7 @@ describe('PhotoViewer component', () => {
     expect(getAssetThumbnailUrlSpy).toBeCalledWith({
       id: asset.id,
       size: AssetMediaSize.Preview,
-      checksum: asset.checksum,
+      cacheKey: asset.thumbhash,
     });
 
     expect(getAssetOriginalUrlSpy).not.toBeCalled();

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -70,19 +70,19 @@
     for (const preloadAsset of preloadAssets || []) {
       if (preloadAsset.type === AssetTypeEnum.Image) {
         let img = new Image();
-        img.src = getAssetUrl(preloadAsset.id, useOriginal, preloadAsset.checksum);
+        img.src = getAssetUrl(preloadAsset.id, useOriginal, preloadAsset.thumbhash);
       }
     }
   };
 
-  const getAssetUrl = (id: string, useOriginal: boolean, checksum: string) => {
+  const getAssetUrl = (id: string, useOriginal: boolean, cacheKey: string | null) => {
     if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
-      return getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, checksum });
+      return getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
     }
 
     return useOriginal
-      ? getAssetOriginalUrl({ id, checksum })
+      ? getAssetOriginalUrl({ id, cacheKey })
-      : getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, checksum });
+      : getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
   };
 
   copyImage = async () => {
@@ -158,7 +158,7 @@
     preload(useOriginalImage, preloadAssets);
   });
 
-  let imageLoaderUrl = $derived(getAssetUrl(asset.id, useOriginalImage, asset.checksum));
+  let imageLoaderUrl = $derived(getAssetUrl(asset.id, useOriginalImage, asset.thumbhash));
 </script>
 
 <svelte:window

web/src/lib/components/asset-viewer/video-native-viewer.svelte

@@ -13,7 +13,7 @@
   interface Props {
     assetId: string;
     loopVideo: boolean;
-    checksum: string;
+    cacheKey: string | null;
     onPreviousAsset?: () => void;
     onNextAsset?: () => void;
     onVideoEnded?: () => void;
@@ -24,7 +24,7 @@
   let {
     assetId,
     loopVideo,
-    checksum,
+    cacheKey,
     onPreviousAsset = () => {},
     onNextAsset = () => {},
     onVideoEnded = () => {},
@@ -39,7 +39,7 @@
 
   onMount(() => {
     if (videoPlayer) {
-      assetFileUrl = getAssetPlaybackUrl({ id: assetId, checksum });
+      assetFileUrl = getAssetPlaybackUrl({ id: assetId, cacheKey });
       forceMuted = false;
       videoPlayer.load();
     }
@@ -106,7 +106,7 @@
     onclose={() => onClose()}
     muted={forceMuted || $videoViewerMuted}
     bind:volume={$videoViewerVolume}
-    poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, checksum })}
+    poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
     src={assetFileUrl}
   >
   </video>

web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte

@@ -6,7 +6,7 @@
   interface Props {
     assetId: string;
     projectionType: string | null | undefined;
-    checksum: string;
+    cacheKey: string | null;
     loopVideo: boolean;
     onClose?: () => void;
     onPreviousAsset?: () => void;
@@ -18,7 +18,7 @@
   let {
     assetId,
     projectionType,
-    checksum,
+    cacheKey,
     loopVideo,
     onPreviousAsset,
     onClose,
@@ -33,7 +33,7 @@
 {:else}
   <VideoNativeViewer
     {loopVideo}
-    {checksum}
+    {cacheKey}
     {assetId}
     {onPreviousAsset}
     {onNextAsset}

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

@@ -327,7 +327,7 @@
         {/if}
 
         <ImageThumbnail
-          url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, checksum: asset.checksum })}
+          url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
           altText={$getAltText(asset)}
           widthStyle="{width}px"
           heightStyle="{height}px"
@@ -339,7 +339,7 @@
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
               {assetStore}
-              url={getAssetPlaybackUrl({ id: asset.id, checksum: asset.checksum })}
+              url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
               enablePlayback={mouseOver && $playVideoThumbnailOnHover}
               curve={selected}
               durationInSeconds={timeToSeconds(asset.duration)}
@@ -352,7 +352,7 @@
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
               {assetStore}
-              url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, checksum: asset.checksum })}
+              url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
               pauseIcon={mdiMotionPauseOutline}
               playIcon={mdiMotionPlayOutline}
               showTime={false}

web/src/lib/utils.ts

@@ -180,28 +180,30 @@ const createUrl = (path: string, parameters?: Record<string, unknown>) => {
   return getBaseUrl() + url.pathname + url.search + url.hash;
 };
 
-export const getAssetOriginalUrl = (options: string | { id: string; checksum?: string }) => {
+type AssetUrlOptions = { id: string; cacheKey?: string | null };
+
+export const getAssetOriginalUrl = (options: string | AssetUrlOptions) => {
   if (typeof options === 'string') {
     options = { id: options };
   }
-  const { id, checksum } = options;
+  const { id, cacheKey } = options;
-  return createUrl(getAssetOriginalPath(id), { key: getKey(), c: checksum });
+  return createUrl(getAssetOriginalPath(id), { key: getKey(), c: cacheKey });
 };
 
-export const getAssetThumbnailUrl = (options: string | { id: string; size?: AssetMediaSize; checksum?: string }) => {
+export const getAssetThumbnailUrl = (options: string | (AssetUrlOptions & { size?: AssetMediaSize })) => {
   if (typeof options === 'string') {
     options = { id: options };
   }
-  const { id, size, checksum } = options;
+  const { id, size, cacheKey } = options;
-  return createUrl(getAssetThumbnailPath(id), { size, key: getKey(), c: checksum });
+  return createUrl(getAssetThumbnailPath(id), { size, key: getKey(), c: cacheKey });
 };
 
-export const getAssetPlaybackUrl = (options: string | { id: string; checksum?: string }) => {
+export const getAssetPlaybackUrl = (options: string | AssetUrlOptions) => {
   if (typeof options === 'string') {
     options = { id: options };
   }
-  const { id, checksum } = options;
+  const { id, cacheKey } = options;
-  return createUrl(getAssetPlaybackPath(id), { key: getKey(), c: checksum });
+  return createUrl(getAssetPlaybackPath(id), { key: getKey(), c: cacheKey });
 };
 
 export const getProfileImageUrl = (user: UserResponseDto) =>