chore: refactor svelte reactivity (#24072)

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

@@ -52,7 +52,7 @@
   let innerHeight: number = $state(0);
   let activityHeight: number = $state(0);
   let chatHeight: number = $state(0);
-  let divHeight: number = $state(0);
+  let divHeight = $derived(innerHeight - activityHeight);
   let previousAssetId: string | undefined = $state(assetId);
   let message = $state('');
   let isSendingMessage = $state(false);
@@ -96,11 +96,7 @@
     }
     isSendingMessage = false;
   };
-  $effect(() => {
-    if (innerHeight && activityHeight) {
-      divHeight = innerHeight - activityHeight;
-    }
-  });
+
   $effect(() => {
     if (assetId && previousAssetId != assetId) {
       previousAssetId = assetId;

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -35,15 +35,13 @@
     });
   };
 
-  let albumNameArray: string[] = $state(['', '', '']);
-
   // This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query
   // It is used to highlight the search query in the album name
-  $effect(() => {
+  const albumNameArray: string[] = $derived.by(() => {
     let { albumName } = album;
     let findIndex = normalizeSearchString(albumName).indexOf(normalizeSearchString(searchQuery));
     let findLength = searchQuery.length;
-    albumNameArray = [
+    return [
       albumName.slice(0, findIndex),
       albumName.slice(findIndex, findIndex + findLength),
       albumName.slice(findIndex + findLength),

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

@@ -395,13 +395,11 @@
     }
   });
 
-  let currentAssetId = $derived(asset.id);
+  // primarily, this is reactive on `asset`
   $effect(() => {
-    if (currentAssetId) {
-      untrack(() => handlePromiseError(handleGetAllAlbums()));
-      ocrManager.clear();
-      handlePromiseError(ocrManager.getAssetOcr(currentAssetId));
-    }
+    handlePromiseError(handleGetAllAlbums());
+    ocrManager.clear();
+    handlePromiseError(ocrManager.getAssetOcr(asset.id));
   });
 </script>
 

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

@@ -171,7 +171,6 @@
 
   $effect(() => {
     if (assetFileUrl) {
-      // this can't be in an async context with $effect
       void cast(assetFileUrl);
     }
   });

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

@@ -43,7 +43,9 @@
 
   let videoPlayer: HTMLVideoElement | undefined = $state();
   let isLoading = $state(true);
-  let assetFileUrl = $state('');
+  let assetFileUrl = $derived(
+    playOriginalVideo ? getAssetOriginalUrl({ id: assetId, cacheKey }) : getAssetPlaybackUrl({ id: assetId, cacheKey }),
+  );
   let isScrubbing = $state(false);
   let showVideo = $state(false);
 
@@ -53,11 +55,9 @@
   });
 
   $effect(() => {
-    assetFileUrl = playOriginalVideo
-      ? getAssetOriginalUrl({ id: assetId, cacheKey })
-      : getAssetPlaybackUrl({ id: assetId, cacheKey });
-    if (videoPlayer) {
-      videoPlayer.load();
+    // reactive on `assetFileUrl` changes
+    if (assetFileUrl) {
+      videoPlayer?.load();
     }
   });
 

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

@@ -35,7 +35,6 @@
 
   $effect(() => {
     if (assetFileUrl) {
-      // this can't be in an async context with $effect
       void cast(assetFileUrl);
     }
   });