fix(deps): update mobile

mobile/pubspec.yaml

@@ -6,7 +6,7 @@ version: 3.0.0+3047
 
 environment:
   sdk: '>=3.11.0 <4.0.0'
-  flutter: 3.41.9
+  flutter: 3.44.0
 
 dependencies:
   async: ^2.13.1
@@ -34,7 +34,7 @@ dependencies:
   flutter_web_auth_2: ^5.0.2
   fluttertoast: ^8.2.14
   geolocator: ^14.0.2
-  home_widget: ^0.8.1
+  home_widget: ^0.9.0
   hooks_riverpod: ^2.6.1
   http: ^1.6.0
   image_picker: ^1.2.1
@@ -43,7 +43,7 @@ dependencies:
   intl: ^0.20.2
   local_auth: ^2.3.0
   logging: ^1.3.0
-  maplibre_gl: ^0.22.0
+  maplibre_gl: ^0.26.0
   native_video_player:
     git:
       url: https://github.com/immich-app/native_video_player
@@ -67,7 +67,7 @@ dependencies:
   sliver_tools: ^0.2.12
   stream_transform: ^2.1.1
   thumbhash: 0.1.0+1
-  timezone: ^0.9.4
+  timezone: ^0.11.0
   url_launcher: ^6.3.2
   uuid: ^4.5.3
   wakelock_plus: ^1.3.3

web/src/lib/components/AdaptiveImage.svelte

@@ -149,35 +149,29 @@
     return { width: 1, height: 1 };
   });
 
-  const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
-    () => {
-      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-      const { width, height } = scaleFn(imageDimensions, container);
-      if (maxRasterPixels === 0) {
-        return {
-          insetInlineStart: (container.width - width) / 2 + 'px',
-          top: (container.height - height) / 2 + 'px',
-          displayWidth: width + 'px',
-          displayHeight: height + 'px',
-          rasterWidth: width + 'px',
-          rasterHeight: height + 'px',
-          rasterScale: 1,
-        };
-      }
-      const nativeRatio = imageDimensions.width / width;
-      const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
-      const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
+  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
+    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+    const { width, height } = scaleFn(imageDimensions, container);
+    if (maxRasterPixels === 0) {
       return {
         insetInlineStart: (container.width - width) / 2 + 'px',
         top: (container.height - height) / 2 + 'px',
-        displayWidth: width + 'px',
-        displayHeight: height + 'px',
-        rasterWidth: width * rasterRatio + 'px',
-        rasterHeight: height * rasterRatio + 'px',
-        rasterScale: 1 / rasterRatio,
+        rasterWidth: width + 'px',
+        rasterHeight: height + 'px',
+        rasterScale: 1,
       };
-    },
-  );
+    }
+    const nativeRatio = imageDimensions.width / width;
+    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
+    return {
+      insetInlineStart: (container.width - width) / 2 + 'px',
+      top: (container.height - height) / 2 + 'px',
+      rasterWidth: width * rasterRatio + 'px',
+      rasterHeight: height * rasterRatio + 'px',
+      rasterScale: 1 / rasterRatio,
+    };
+  });
 
   const { status } = $derived(adaptiveImageLoader);
   const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@@ -222,78 +216,69 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute overflow-hidden"
+    class="pointer-events-none absolute"
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width={displayWidth}
-    style:height={displayHeight}
+    style:width={rasterWidth}
+    style:height={rasterHeight}
+    style:transform="scale({rasterScale})"
+    style:transform-origin="0 0"
+    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
   >
-    <div
-      style:width={rasterWidth}
-      style:height={rasterHeight}
-      style:transform="scale({rasterScale})"
-      style:transform-origin="0 0"
-      style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
-    >
-      {#if show.alphaBackground}
-        <AlphaBackground />
-      {/if}
+    {#if show.alphaBackground}
+      <AlphaBackground />
+    {/if}
 
-      {#if show.thumbhash}
-        {#if asset.thumbhash}
-          <!-- Thumbhash / spinner layer  -->
-          <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
-        {:else if show.spinner}
-          <DelayedLoadingSpinner />
-        {/if}
+    {#if show.thumbhash}
+      {#if asset.thumbhash}
+        <!-- Thumbhash / spinner layer  -->
+        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
+      {:else if show.spinner}
+        <DelayedLoadingSpinner />
       {/if}
+    {/if}
 
-      {#if show.thumbnail}
-        <ImageLayer
-          {adaptiveImageLoader}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="thumbnail"
-          src={status.urls.thumbnail}
-          alt=""
-          role="presentation"
-          bind:ref={thumbnailElement}
-        />
-      {/if}
+    {#if show.thumbnail}
+      <ImageLayer
+        {adaptiveImageLoader}
+        width={rasterWidth}
+        height={rasterHeight}
+        quality="thumbnail"
+        src={status.urls.thumbnail}
+        alt=""
+        role="presentation"
+        bind:ref={thumbnailElement}
+      />
+    {/if}
 
-      {#if show.brokenAsset}
-        <BrokenAsset class="absolute size-full text-xl" />
-      {/if}
+    {#if show.brokenAsset}
+      <BrokenAsset class="absolute size-full text-xl" />
+    {/if}
 
-      {#if show.preview}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="preview"
-          src={status.urls.preview}
-          bind:ref={previewElement}
-        />
-      {/if}
+    {#if show.preview}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        width={rasterWidth}
+        height={rasterHeight}
+        {overlays}
+        quality="preview"
+        src={status.urls.preview}
+        bind:ref={previewElement}
+      />
+    {/if}
 
-      {#if show.original}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="original"
-          src={status.urls.original}
-          bind:ref={originalElement}
-        />
-      {/if}
-    </div>
-
-    {#if overlays}
-      <div class="pointer-events-none absolute inset-0">
-        {@render overlays()}
-      </div>
+    {#if show.original}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        width={rasterWidth}
+        height={rasterHeight}
+        {overlays}
+        quality="original"
+        src={status.urls.original}
+        bind:ref={originalElement}
+      />
     {/if}
   </div>
 </div>

web/src/lib/components/ImageLayer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Image from '$lib/components/Image.svelte';
   import type { AdaptiveImageLoader, ImageQuality } from '$lib/utils/adaptive-image-loader.svelte';
+  import type { Snippet } from 'svelte';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
@@ -11,9 +12,20 @@
     ref?: HTMLImageElement;
     width: string;
     height: string;
+    overlays?: Snippet;
   };
 
-  let { adaptiveImageLoader, quality, src, alt = '', role, ref = $bindable(), width, height }: Props = $props();
+  let {
+    adaptiveImageLoader,
+    quality,
+    src,
+    alt = '',
+    role,
+    ref = $bindable(),
+    width,
+    height,
+    overlays,
+  }: Props = $props();
 </script>
 
 {#key adaptiveImageLoader}
@@ -30,5 +42,6 @@
       draggable={false}
       data-testid={quality}
     />
+    {@render overlays?.()}
   </div>
 {/key}