platform thumbhash

mobile/android/app/build.gradle

@@ -83,13 +83,13 @@ android {
     }
   }
   namespace 'app.alextran.immich'
-}
 
   externalNativeBuild {
     cmake {
       path "CMakeLists.txt"
     }
   }
+}
 
 flutter {
   source '../..'

mobile/android/app/src/main/kotlin/app/alextran/immich/AppGlideModule.kt

@@ -1,6 +1,11 @@
 package app.alextran.immich
 
+import android.content.Context
+import com.bumptech.glide.GlideBuilder
 import com.bumptech.glide.annotation.GlideModule
+import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPoolAdapter
+import com.bumptech.glide.load.engine.cache.DiskCacheAdapter
+import com.bumptech.glide.load.engine.cache.MemoryCacheAdapter
 import com.bumptech.glide.module.AppGlideModule
 
 @GlideModule

mobile/android/app/src/main/kotlin/app/alextran/immich/images/ThumbHash.java

@@ -0,0 +1,169 @@
+package app.alextran.immich.images;
+
+// Copyright (c) 2023 Evan Wallace
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import java.nio.ByteBuffer;
+
+// modified to use native allocations
+public final class ThumbHash {
+  private static native long allocateNative(int size);
+
+  private static native ByteBuffer wrapAsBuffer(long address, int capacity);
+
+  /**
+   * Decodes a ThumbHash to an RGBA image. RGB is not be premultiplied by A.
+   *
+   * @param hash The bytes of the ThumbHash.
+   * @return The width, height, and pixels of the rendered placeholder image.
+   */
+  public static Image thumbHashToRGBA(byte[] hash) {
+    // Read the constants
+    int header24 = (hash[0] & 255) | ((hash[1] & 255) << 8) | ((hash[2] & 255) << 16);
+    int header16 = (hash[3] & 255) | ((hash[4] & 255) << 8);
+    float l_dc = (float) (header24 & 63) / 63.0f;
+    float p_dc = (float) ((header24 >> 6) & 63) / 31.5f - 1.0f;
+    float q_dc = (float) ((header24 >> 12) & 63) / 31.5f - 1.0f;
+    float l_scale = (float) ((header24 >> 18) & 31) / 31.0f;
+    boolean hasAlpha = (header24 >> 23) != 0;
+    float p_scale = (float) ((header16 >> 3) & 63) / 63.0f;
+    float q_scale = (float) ((header16 >> 9) & 63) / 63.0f;
+    boolean isLandscape = (header16 >> 15) != 0;
+    int lx = Math.max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7);
+    int ly = Math.max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7);
+    float a_dc = hasAlpha ? (float) (hash[5] & 15) / 15.0f : 1.0f;
+    float a_scale = (float) ((hash[5] >> 4) & 15) / 15.0f;
+
+    // Read the varying factors (boost saturation by 1.25x to compensate for quantization)
+    int ac_start = hasAlpha ? 6 : 5;
+    int ac_index = 0;
+    Channel l_channel = new Channel(lx, ly);
+    Channel p_channel = new Channel(3, 3);
+    Channel q_channel = new Channel(3, 3);
+    Channel a_channel = null;
+    ac_index = l_channel.decode(hash, ac_start, ac_index, l_scale);
+    ac_index = p_channel.decode(hash, ac_start, ac_index, p_scale * 1.25f);
+    ac_index = q_channel.decode(hash, ac_start, ac_index, q_scale * 1.25f);
+    if (hasAlpha) {
+      a_channel = new Channel(5, 5);
+      a_channel.decode(hash, ac_start, ac_index, a_scale);
+    }
+    float[] l_ac = l_channel.ac;
+    float[] p_ac = p_channel.ac;
+    float[] q_ac = q_channel.ac;
+    float[] a_ac = hasAlpha ? a_channel.ac : null;
+
+    // Decode using the DCT into RGB
+    float ratio = thumbHashToApproximateAspectRatio(hash);
+    int w = Math.round(ratio > 1.0f ? 32.0f : 32.0f * ratio);
+    int h = Math.round(ratio > 1.0f ? 32.0f / ratio : 32.0f);
+    int size = w * h * 4;
+    long pointer = allocateNative(size);
+    ByteBuffer buffer = wrapAsBuffer(pointer, size);
+    byte[] rgba = buffer.array();
+    int cx_stop = Math.max(lx, hasAlpha ? 5 : 3);
+    int cy_stop = Math.max(ly, hasAlpha ? 5 : 3);
+    float[] fx = new float[cx_stop];
+    float[] fy = new float[cy_stop];
+    for (int y = 0, i = 0; y < h; y++) {
+      for (int x = 0; x < w; x++, i += 4) {
+        float l = l_dc, p = p_dc, q = q_dc, a = a_dc;
+
+        // Precompute the coefficients
+        for (int cx = 0; cx < cx_stop; cx++)
+          fx[cx] = (float) Math.cos(Math.PI / w * (x + 0.5f) * cx);
+        for (int cy = 0; cy < cy_stop; cy++)
+          fy[cy] = (float) Math.cos(Math.PI / h * (y + 0.5f) * cy);
+
+        // Decode L
+        for (int cy = 0, j = 0; cy < ly; cy++) {
+          float fy2 = fy[cy] * 2.0f;
+          for (int cx = cy > 0 ? 0 : 1; cx * ly < lx * (ly - cy); cx++, j++)
+            l += l_ac[j] * fx[cx] * fy2;
+        }
+
+        // Decode P and Q
+        for (int cy = 0, j = 0; cy < 3; cy++) {
+          float fy2 = fy[cy] * 2.0f;
+          for (int cx = cy > 0 ? 0 : 1; cx < 3 - cy; cx++, j++) {
+            float f = fx[cx] * fy2;
+            p += p_ac[j] * f;
+            q += q_ac[j] * f;
+          }
+        }
+
+        // Decode A
+        if (hasAlpha)
+          for (int cy = 0, j = 0; cy < 5; cy++) {
+            float fy2 = fy[cy] * 2.0f;
+            for (int cx = cy > 0 ? 0 : 1; cx < 5 - cy; cx++, j++)
+              a += a_ac[j] * fx[cx] * fy2;
+          }
+
+        // Convert to RGB
+        float b = l - 2.0f / 3.0f * p;
+        float r = (3.0f * l - b + q) / 2.0f;
+        float g = r - q;
+        rgba[i] = (byte) Math.max(0, Math.round(255.0f * Math.min(1, r)));
+        rgba[i + 1] = (byte) Math.max(0, Math.round(255.0f * Math.min(1, g)));
+        rgba[i + 2] = (byte) Math.max(0, Math.round(255.0f * Math.min(1, b)));
+        rgba[i + 3] = (byte) Math.max(0, Math.round(255.0f * Math.min(1, a)));
+      }
+    }
+    return new Image(w, h, pointer);
+  }
+
+  /**
+   * Extracts the approximate aspect ratio of the original image.
+   *
+   * @param hash The bytes of the ThumbHash.
+   * @return The approximate aspect ratio (i.e. width / height).
+   */
+  public static float thumbHashToApproximateAspectRatio(byte[] hash) {
+    byte header = hash[3];
+    boolean hasAlpha = (hash[2] & 0x80) != 0;
+    boolean isLandscape = (hash[4] & 0x80) != 0;
+    int lx = isLandscape ? hasAlpha ? 5 : 7 : header & 7;
+    int ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7;
+    return (float) lx / (float) ly;
+  }
+
+  public static final class Image {
+    public int width;
+    public int height;
+    public long pointer;
+
+    public Image(int width, int height, long pointer) {
+      this.width = width;
+      this.height = height;
+      this.pointer = pointer;
+    }
+  }
+
+  private static final class Channel {
+    int nx;
+    int ny;
+    float[] ac;
+
+    Channel(int nx, int ny) {
+      this.nx = nx;
+      this.ny = ny;
+      int n = 0;
+      for (int cy = 0; cy < ny; cy++)
+        for (int cx = cy > 0 ? 0 : 1; cx * ny < nx * (ny - cy); cx++)
+          n++;
+      ac = new float[n];
+    }
+
+    int decode(byte[] hash, int start, int index, float scale) {
+      for (int i = 0; i < ac.length; i++) {
+        int data = hash[start + (index >> 1)] >> ((index & 1) << 2);
+        ac[i] = ((float) (data & 15) / 7.5f - 1.0f) * scale;
+        index++;
+      }
+      return index;
+    }
+  }
+}

mobile/android/app/src/main/kotlin/app/alextran/immich/images/Thumbnails.g.kt

@@ -61,6 +61,7 @@ private open class ThumbnailsPigeonCodec : StandardMessageCodec() {
 interface ThumbnailApi {
   fun requestImage(assetId: String, requestId: Long, width: Long, height: Long, callback: (Result<Map<String, Long>>) -> Unit)
   fun cancelImageRequest(requestId: Long)
+  fun getThumbhash(thumbhash: String, callback: (Result<Map<String, Long>>) -> Unit)
 
   companion object {
     /** The codec used by ThumbnailApi. */
@@ -112,6 +113,26 @@ interface ThumbnailApi {
           channel.setMessageHandler(null)
         }
       }
+      run {
+        val channel = BasicMessageChannel<Any?>(binaryMessenger, "dev.flutter.pigeon.immich_mobile.ThumbnailApi.getThumbhash$separatedMessageChannelSuffix", codec)
+        if (api != null) {
+          channel.setMessageHandler { message, reply ->
+            val args = message as List<Any?>
+            val thumbhashArg = args[0] as String
+            api.getThumbhash(thumbhashArg) { result: Result<Map<String, Long>> ->
+              val error = result.exceptionOrNull()
+              if (error != null) {
+                reply.reply(ThumbnailsPigeonUtils.wrapError(error))
+              } else {
+                val data = result.getOrNull()
+                reply.reply(ThumbnailsPigeonUtils.wrapResult(data))
+              }
+            }
+          }
+        } else {
+          channel.setMessageHandler(null)
+        }
+      }
     }
   }
 }

mobile/android/app/src/main/kotlin/app/alextran/immich/images/ThumbnailsImpl.kt

@@ -18,6 +18,7 @@ import java.util.concurrent.Executors
 import com.bumptech.glide.Glide
 import com.bumptech.glide.Priority
 import com.bumptech.glide.load.DecodeFormat
+import java.util.Base64
 import java.util.HashMap
 import java.util.concurrent.CancellationException
 import java.util.concurrent.Future
@@ -63,6 +64,23 @@ class ThumbnailsImpl(context: Context) : ThumbnailApi {
         external fun wrapAsBuffer(address: Long, capacity: Int): ByteBuffer
     }
 
+    override fun getThumbhash(thumbhash: String, callback: (Result<Map<String, Long>>) -> Unit) {
+        threadPool.execute {
+            try {
+                val bytes = Base64.getDecoder().decode(thumbhash)
+                val image = ThumbHash.thumbHashToRGBA(bytes)
+                val res = mapOf(
+                    "pointer" to image.pointer,
+                    "width" to image.width.toLong(),
+                    "height" to image.height.toLong()
+                )
+                callback(Result.success(res))
+              } catch (e: Exception) {
+                callback(Result.failure(e))
+              }
+        }
+    }
+
     override fun requestImage(
         assetId: String,
         requestId: Long,

mobile/ios/Runner.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 54;
+	objectVersion = 77;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -24,6 +24,7 @@
 		FAC6F89B2D287C890078CB2F /* ShareExtension.appex in Embed Foundation Extensions */ = {isa = PBXBuildFile; fileRef = FAC6F8902D287C890078CB2F /* ShareExtension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
 		FAC6F8B72D287F120078CB2F /* ShareViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC6F8B52D287F120078CB2F /* ShareViewController.swift */; };
 		FAC6F8B92D287F120078CB2F /* MainInterface.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = FAC6F8B32D287F120078CB2F /* MainInterface.storyboard */; };
+		FEAFA8732E4D42F4001E47FE /* Thumbhash.swift in Sources */ = {isa = PBXBuildFile; fileRef = FEAFA8722E4D42F4001E47FE /* Thumbhash.swift */; };
 		FED3B1962E253E9B0030FD97 /* ThumbnailsImpl.swift in Sources */ = {isa = PBXBuildFile; fileRef = FED3B1942E253E9B0030FD97 /* ThumbnailsImpl.swift */; };
 		FED3B1972E253E9B0030FD97 /* Thumbnails.g.swift in Sources */ = {isa = PBXBuildFile; fileRef = FED3B1932E253E9B0030FD97 /* Thumbnails.g.swift */; };
 /* End PBXBuildFile section */
@@ -104,6 +105,7 @@
 		FAC6F8B42D287F120078CB2F /* ShareExtension.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = ShareExtension.entitlements; sourceTree = "<group>"; };
 		FAC6F8B52D287F120078CB2F /* ShareViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareViewController.swift; sourceTree = "<group>"; };
 		FAC7416727DB9F5500C668D8 /* RunnerProfile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = RunnerProfile.entitlements; sourceTree = "<group>"; };
+		FEAFA8722E4D42F4001E47FE /* Thumbhash.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Thumbhash.swift; sourceTree = "<group>"; };
 		FED3B1932E253E9B0030FD97 /* Thumbnails.g.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Thumbnails.g.swift; sourceTree = "<group>"; };
 		FED3B1942E253E9B0030FD97 /* ThumbnailsImpl.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ThumbnailsImpl.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -121,8 +123,6 @@
 /* Begin PBXFileSystemSynchronizedRootGroup section */
 		B2CF7F8C2DDE4EBB00744BF6 /* Sync */ = {
 			isa = PBXFileSystemSynchronizedRootGroup;
-			exceptions = (
-			);
 			path = Sync;
 			sourceTree = "<group>";
 		};
@@ -266,6 +266,7 @@
 		FED3B1952E253E9B0030FD97 /* Images */ = {
 			isa = PBXGroup;
 			children = (
+				FEAFA8722E4D42F4001E47FE /* Thumbhash.swift */,
 				FED3B1932E253E9B0030FD97 /* Thumbnails.g.swift */,
 				FED3B1942E253E9B0030FD97 /* ThumbnailsImpl.swift */,
 			);
@@ -537,6 +538,7 @@
 			files = (
 				65F32F31299BD2F800CE9261 /* BackgroundServicePlugin.swift in Sources */,
 				74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */,
+				FEAFA8732E4D42F4001E47FE /* Thumbhash.swift in Sources */,
 				FED3B1962E253E9B0030FD97 /* ThumbnailsImpl.swift in Sources */,
 				FED3B1972E253E9B0030FD97 /* Thumbnails.g.swift in Sources */,
 				1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */,

mobile/ios/Runner/Images/Thumbhash.swift

@@ -0,0 +1,225 @@
+// Copyright (c) 2023 Evan Wallace
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import Foundation
+
+// NOTE: Swift has an exponential-time type checker and compiling very simple
+// expressions can easily take many seconds, especially when expressions involve
+// numeric type constructors.
+//
+// This file deliberately breaks compound expressions up into separate variables
+// to improve compile time even though this comes at the expense of readability.
+// This is a known workaround for this deficiency in the Swift compiler.
+//
+// The following command is helpful when debugging Swift compile time issues:
+//
+//     swiftc ThumbHash.swift -Xfrontend -debug-time-function-bodies
+//
+// These optimizations brought the compile time for this file from around 2.5
+// seconds to around 250ms (10x faster).
+
+// NOTE: Swift's debug-build performance of for-in loops over numeric ranges is
+// really awful. Debug builds compile a very generic indexing iterator thing
+// that makes many nested calls for every iteration, which makes debug-build
+// performance crawl.
+//
+// This file deliberately avoids for-in loops that loop for more than a few
+// times to improve debug-build run time even though this comes at the expense
+// of readability. Similarly unsafe pointers are used instead of array getters
+// to avoid unnecessary bounds checks, which have extra overhead in debug builds.
+//
+// These optimizations brought the run time to encode and decode 10 ThumbHashes
+// in debug mode from 700ms to 70ms (10x faster).
+
+// changed signature and allocation method to avoid automatic GC
+func thumbHashToRGBA(hash: Data) -> (Int, Int, UnsafeMutableRawBufferPointer) {
+  // Read the constants
+  let h0 = UInt32(hash[0])
+  let h1 = UInt32(hash[1])
+  let h2 = UInt32(hash[2])
+  let h3 = UInt16(hash[3])
+  let h4 = UInt16(hash[4])
+  let header24 = h0 | (h1 << 8) | (h2 << 16)
+  let header16 = h3 | (h4 << 8)
+  let il_dc = header24 & 63
+  let ip_dc = (header24 >> 6) & 63
+  let iq_dc = (header24 >> 12) & 63
+  var l_dc = Float32(il_dc)
+  var p_dc = Float32(ip_dc)
+  var q_dc = Float32(iq_dc)
+  l_dc = l_dc / 63
+  p_dc = p_dc / 31.5 - 1
+  q_dc = q_dc / 31.5 - 1
+  let il_scale = (header24 >> 18) & 31
+  var l_scale = Float32(il_scale)
+  l_scale = l_scale / 31
+  let hasAlpha = (header24 >> 23) != 0
+  let ip_scale = (header16 >> 3) & 63
+  let iq_scale = (header16 >> 9) & 63
+  var p_scale = Float32(ip_scale)
+  var q_scale = Float32(iq_scale)
+  p_scale = p_scale / 63
+  q_scale = q_scale / 63
+  let isLandscape = (header16 >> 15) != 0
+  let lx16 = max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7)
+  let ly16 = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7)
+  let lx = Int(lx16)
+  let ly = Int(ly16)
+  var a_dc = Float32(1)
+  var a_scale = Float32(1)
+  if hasAlpha {
+    let ia_dc = hash[5] & 15
+    let ia_scale = hash[5] >> 4
+    a_dc = Float32(ia_dc)
+    a_scale = Float32(ia_scale)
+    a_dc /= 15
+    a_scale /= 15
+  }
+  
+  // Read the varying factors (boost saturation by 1.25x to compensate for quantization)
+  let ac_start = hasAlpha ? 6 : 5
+  var ac_index = 0
+  let decodeChannel = { (nx: Int, ny: Int, scale: Float32) -> [Float32] in
+    var ac: [Float32] = []
+    for cy in 0 ..< ny {
+      var cx = cy > 0 ? 0 : 1
+      while cx * ny < nx * (ny - cy) {
+        let iac = (hash[ac_start + (ac_index >> 1)] >> ((ac_index & 1) << 2)) & 15;
+        var fac = Float32(iac)
+        fac = (fac / 7.5 - 1) * scale
+        ac.append(fac)
+        ac_index += 1
+        cx += 1
+      }
+    }
+    return ac
+  }
+  let l_ac = decodeChannel(lx, ly, l_scale)
+  let p_ac = decodeChannel(3, 3, p_scale * 1.25)
+  let q_ac = decodeChannel(3, 3, q_scale * 1.25)
+  let a_ac = hasAlpha ? decodeChannel(5, 5, a_scale) : []
+  
+  // Decode using the DCT into RGB
+  let ratio = thumbHashToApproximateAspectRatio(hash: hash)
+  let fw = round(ratio > 1 ? 32 : 32 * ratio)
+  let fh = round(ratio > 1 ? 32 / ratio : 32)
+  let w = Int(fw)
+  let h = Int(fh)
+  let pointer = UnsafeMutableRawBufferPointer.allocate(
+    byteCount: w * h * 4,
+    alignment: MemoryLayout<UInt8>.alignment
+  )
+  var rgba = pointer.baseAddress!.assumingMemoryBound(to: UInt8.self)
+  let cx_stop = max(lx, hasAlpha ? 5 : 3)
+  let cy_stop = max(ly, hasAlpha ? 5 : 3)
+  var fx = [Float32](repeating: 0, count: cx_stop)
+  var fy = [Float32](repeating: 0, count: cy_stop)
+  fx.withUnsafeMutableBytes { fx in
+    let fx = fx.baseAddress!.bindMemory(to: Float32.self, capacity: fx.count)
+    fy.withUnsafeMutableBytes { fy in
+      let fy = fy.baseAddress!.bindMemory(to: Float32.self, capacity: fy.count)
+      var y = 0
+      while y < h {
+        var x = 0
+        while x < w {
+          var l = l_dc
+          var p = p_dc
+          var q = q_dc
+          var a = a_dc
+          
+          // Precompute the coefficients
+          var cx = 0
+          while cx < cx_stop {
+            let fw = Float32(w)
+            let fxx = Float32(x)
+            let fcx = Float32(cx)
+            fx[cx] = cos(Float32.pi / fw * (fxx + 0.5) * fcx)
+            cx += 1
+          }
+          var cy = 0
+          while cy < cy_stop {
+            let fh = Float32(h)
+            let fyy = Float32(y)
+            let fcy = Float32(cy)
+            fy[cy] = cos(Float32.pi / fh * (fyy + 0.5) * fcy)
+            cy += 1
+          }
+          
+          // Decode L
+          var j = 0
+          cy = 0
+          while cy < ly {
+            var cx = cy > 0 ? 0 : 1
+            let fy2 = fy[cy] * 2
+            while cx * ly < lx * (ly - cy) {
+              l += l_ac[j] * fx[cx] * fy2
+              j += 1
+              cx += 1
+            }
+            cy += 1
+          }
+          
+          // Decode P and Q
+          j = 0
+          cy = 0
+          while cy < 3 {
+            var cx = cy > 0 ? 0 : 1
+            let fy2 = fy[cy] * 2
+            while cx < 3 - cy {
+              let f = fx[cx] * fy2
+              p += p_ac[j] * f
+              q += q_ac[j] * f
+              j += 1
+              cx += 1
+            }
+            cy += 1
+          }
+          
+          // Decode A
+          if hasAlpha {
+            j = 0
+            cy = 0
+            while cy < 5 {
+              var cx = cy > 0 ? 0 : 1
+              let fy2 = fy[cy] * 2
+              while cx < 5 - cy {
+                a += a_ac[j] * fx[cx] * fy2
+                j += 1
+                cx += 1
+              }
+              cy += 1
+            }
+          }
+          
+          // Convert to RGB
+          var b = l - 2 / 3 * p
+          var r = (3 * l - b + q) / 2
+          var g = r - q
+          r = max(0, 255 * min(1, r))
+          g = max(0, 255 * min(1, g))
+          b = max(0, 255 * min(1, b))
+          a = max(0, 255 * min(1, a))
+          rgba[0] = UInt8(r)
+          rgba[1] = UInt8(g)
+          rgba[2] = UInt8(b)
+          rgba[3] = UInt8(a)
+          rgba = rgba.advanced(by: 4)
+          x += 1
+        }
+        y += 1
+      }
+    }
+  }
+  return (w, h, pointer)
+}
+
+func thumbHashToApproximateAspectRatio(hash: Data) -> Float32 {
+  let header = hash[3]
+  let hasAlpha = (hash[2] & 0x80) != 0
+  let isLandscape = (hash[4] & 0x80) != 0
+  let lx = isLandscape ? hasAlpha ? 5 : 7 : header & 7
+  let ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7
+  return Float32(lx) / Float32(ly)
+}

mobile/ios/Runner/Images/Thumbnails.g.swift

@@ -72,6 +72,7 @@ class ThumbnailsPigeonCodec: FlutterStandardMessageCodec, @unchecked Sendable {
 protocol ThumbnailApi {
   func requestImage(assetId: String, requestId: Int64, width: Int64, height: Int64, completion: @escaping (Result<[String: Int64], Error>) -> Void)
   func cancelImageRequest(requestId: Int64) throws
+  func getThumbhash(thumbhash: String, completion: @escaping (Result<[String: Int64], Error>) -> Void)
 }
 
 /// Generated setup class from Pigeon to handle messages through the `binaryMessenger`.
@@ -115,5 +116,22 @@ class ThumbnailApiSetup {
     } else {
       cancelImageRequestChannel.setMessageHandler(nil)
     }
+    let getThumbhashChannel = FlutterBasicMessageChannel(name: "dev.flutter.pigeon.immich_mobile.ThumbnailApi.getThumbhash\(channelSuffix)", binaryMessenger: binaryMessenger, codec: codec)
+    if let api = api {
+      getThumbhashChannel.setMessageHandler { message, reply in
+        let args = message as! [Any?]
+        let thumbhashArg = args[0] as! String
+        api.getThumbhash(thumbhash: thumbhashArg) { result in
+          switch result {
+          case .success(let res):
+            reply(wrapResult(res))
+          case .failure(let error):
+            reply(wrapError(error))
+          }
+        }
+      }
+    } else {
+      getThumbhashChannel.setMessageHandler(nil)
+    }
   }
 }

mobile/ios/Runner/Images/ThumbnailsImpl.swift

@@ -47,6 +47,16 @@ class ThumbnailApiImpl: ThumbnailApi {
     return assetCache
   }()
   
+  func getThumbhash(thumbhash: String, completion: @escaping (Result<[String : Int64], any Error>) -> Void) {
+    Self.processingQueue.async {
+      guard let data = Data(base64Encoded: thumbhash)
+      else { return completion(.failure(PigeonError(code: "", message: "Invalid base64 string: \(thumbhash)", details: nil)))}
+
+      let (width, height, pointer) = thumbHashToRGBA(hash: data)
+      completion(.success(["pointer": Int64(Int(bitPattern: pointer.baseAddress)), "width": Int64(width), "height": Int64(height)]))
+    }
+  }
+  
   func requestImage(assetId: String, requestId: Int64, width: Int64, height: Int64, completion: @escaping (Result<[String: Int64], any Error>) -> Void) {
     let request = Request(callback: completion)
     let item = DispatchWorkItem {

mobile/lib/infrastructure/repositories/asset_media.repository.dart

@@ -33,30 +33,8 @@ abstract class ImageRequest {
   }
 
   void _onCancelled();
-}
-
-class LocalImageRequest extends ImageRequest {
-  final String localId;
-  final int width;
-  final int height;
-
-  LocalImageRequest({required this.localId, required ui.Size size})
-    : width = size.width.toInt(),
-      height = size.height.toInt();
-
-  @override
-  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0}) async {
-    if (_isCancelled) {
-      return null;
-    }
-
-    final Map<String, int> info = await thumbnailApi.requestImage(
-      localId,
-      requestId: requestId,
-      width: width,
-      height: height,
-    );
 
+  Future<ui.FrameInfo?> _fromPlatformImage(Map<String, int> info) async {
     final address = info['pointer'];
     if (address == null) {
       return null;
@@ -88,12 +66,57 @@ class LocalImageRequest extends ImageRequest {
         return null;
       }
 
-      final frame = await codec.getNextFrame();
+      return await codec.getNextFrame();
-      return ImageInfo(image: frame.image, scale: scale);
     } finally {
       malloc.free(pointer);
     }
   }
+}
+
+class ThumbhashImageRequest extends ImageRequest {
+  final String thumbhash;
+
+  ThumbhashImageRequest({required this.thumbhash});
+
+  @override
+  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0}) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    final Map<String, int> info = await thumbnailApi.getThumbhash(thumbhash);
+    final frame = await _fromPlatformImage(info);
+    return frame == null ? null : ImageInfo(image: frame.image, scale: scale);
+  }
+
+  @override
+  void _onCancelled() {}
+}
+
+class LocalImageRequest extends ImageRequest {
+  final String localId;
+  final int width;
+  final int height;
+
+  LocalImageRequest({required this.localId, required ui.Size size})
+    : width = size.width.toInt(),
+      height = size.height.toInt();
+
+  @override
+  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0}) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    final Map<String, int> info = await thumbnailApi.requestImage(
+      localId,
+      requestId: requestId,
+      width: width,
+      height: height,
+    );
+    final frame = await _fromPlatformImage(info);
+    return frame == null ? null : ImageInfo(image: frame.image, scale: scale);
+  }
 
   @override
   Future<void> _onCancelled() {

mobile/lib/platform/thumbnail_api.g.dart

@@ -104,4 +104,32 @@ class ThumbnailApi {
       return;
     }
   }
+
+  Future<Map<String, int>> getThumbhash(String thumbhash) async {
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.immich_mobile.ThumbnailApi.getThumbhash$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+      pigeonVar_channelName,
+      pigeonChannelCodec,
+      binaryMessenger: pigeonVar_binaryMessenger,
+    );
+    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[thumbhash]);
+    final List<Object?>? pigeonVar_replyList = await pigeonVar_sendFuture as List<Object?>?;
+    if (pigeonVar_replyList == null) {
+      throw _createConnectionError(pigeonVar_channelName);
+    } else if (pigeonVar_replyList.length > 1) {
+      throw PlatformException(
+        code: pigeonVar_replyList[0]! as String,
+        message: pigeonVar_replyList[1] as String?,
+        details: pigeonVar_replyList[2],
+      );
+    } else if (pigeonVar_replyList[0] == null) {
+      throw PlatformException(
+        code: 'null-error',
+        message: 'Host platform returned null value for non-null return value.',
+      );
+    } else {
+      return (pigeonVar_replyList[0] as Map<Object?, Object?>?)!.cast<String, int>();
+    }
+  }
 }

mobile/lib/presentation/widgets/images/thumb_hash_provider.dart

@@ -1,14 +1,13 @@
-import 'dart:convert' hide Codec;
-import 'dart:ui';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
-import 'package:thumbhash/thumbhash.dart';
+import 'package:immich_mobile/infrastructure/repositories/asset_media.repository.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 
-class ThumbHashProvider extends ImageProvider<ThumbHashProvider> {
+class ThumbHashProvider extends ImageProvider<ThumbHashProvider> with CancellableImageProviderMixin {
   final String thumbHash;
 
-  const ThumbHashProvider({required this.thumbHash});
+  ThumbHashProvider({required this.thumbHash});
 
   @override
   Future<ThumbHashProvider> obtainKey(ImageConfiguration configuration) {
@@ -17,12 +16,21 @@ class ThumbHashProvider extends ImageProvider<ThumbHashProvider> {
 
   @override
   ImageStreamCompleter loadImage(ThumbHashProvider key, ImageDecoderCallback decode) {
-    return MultiFrameImageStreamCompleter(codec: _loadCodec(key, decode), scale: 1.0);
+    final completer = OneFramePlaceholderImageStreamCompleter(_loadCodec(key, decode));
+    completer.addOnLastListenerRemovedCallback(cancel);
+    return completer;
   }
 
-  Future<Codec> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) async {
+  Stream<ImageInfo> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) async* {
-    final image = thumbHashToRGBA(base64Decode(key.thumbHash));
+    final request = this.request = ThumbhashImageRequest(thumbhash: thumbHash);
-    return decode(await ImmutableBuffer.fromUint8List(rgbaToBmp(image)));
+    try {
+      final image = await request.load(decode);
+      if (image != null) {
+        yield image;
+      }
+    } finally {
+      this.request = null;
+    }
   }
 
   @override

mobile/lib/presentation/widgets/timeline/constants.dart

@@ -1,7 +1,8 @@
 import 'dart:ui';
 
 const double kTimelineHeaderExtent = 80.0;
-const Size kTimelineFixedTileExtent = Size.square(256);
+const double kTimelineFixedTileExtentPixels = 256;
+const Size kTimelineFixedTileExtent = Size.square(kTimelineFixedTileExtentPixels);
 const Size kThumbnailResolution = Size.square(384);
 const double kTimelineSpacing = 2.0;
 const int kTimelineColumnCount = 3;

mobile/lib/widgets/asset_grid/thumbnail_placeholder.dart

@@ -1,13 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 
 class ThumbnailPlaceholder extends StatelessWidget {
   final EdgeInsets margin;
   final double width;
   final double height;
 
-  const ThumbnailPlaceholder({super.key, this.margin = EdgeInsets.zero, this.width = 250, this.height = 250});
+  const ThumbnailPlaceholder({
+    super.key,
+    this.margin = EdgeInsets.zero,
+    this.width = kTimelineFixedTileExtentPixels,
+    this.height = kTimelineFixedTileExtentPixels,
+  });
 
   @override
   Widget build(BuildContext context) {

mobile/pigeon/thumbnail_api.dart

@@ -18,4 +18,7 @@ abstract class ThumbnailApi {
   Map<String, int> requestImage(String assetId, {required int requestId, required int width, required int height});
 
   void cancelImageRequest(int requestId);
+
+  @async
+  Map<String, int> getThumbhash(String thumbhash);
 }