android improvements

mobile/android/app/CMakeLists.txt

@@ -0,0 +1,9 @@
+cmake_minimum_required(VERSION 3.10.2)
+project("native_buffer")
+
+add_library(native_buffer SHARED
+    src/main/cpp/native_buffer.c)
+
+find_library(log-lib log)
+
+target_link_libraries(native_buffer ${log-lib})

mobile/android/app/build.gradle

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

mobile/android/app/src/main/cpp/native_buffer.c

@@ -0,0 +1,52 @@
+#include <jni.h>
+#include <stdlib.h>
+
+JNIEXPORT jlong JNICALL
+Java_app_alextran_immich_images_ThumbnailsImpl_00024Companion_allocateNative(
+    JNIEnv *env, jclass clazz, jint size)
+{
+    void *ptr = malloc(size);
+    return (jlong)ptr;
+}
+
+JNIEXPORT jlong JNICALL
+Java_app_alextran_immich_images_ThumbnailsImpl_allocateNative(
+    JNIEnv *env, jclass clazz, jint size)
+{
+    void *ptr = malloc(size);
+    return (jlong)ptr;
+}
+
+JNIEXPORT void JNICALL
+Java_app_alextran_immich_images_ThumbnailsImpl_00024Companion_freeNative(
+    JNIEnv *env, jclass clazz, jlong address)
+{
+    if (address != 0)
+    {
+        free((void *)address);
+    }
+}
+
+JNIEXPORT void JNICALL
+Java_app_alextran_immich_images_ThumbnailsImpl_freeNative(
+    JNIEnv *env, jclass clazz, jlong address)
+{
+    if (address != 0)
+    {
+        free((void *)address);
+    }
+}
+
+JNIEXPORT jobject JNICALL
+Java_app_alextran_immich_images_ThumbnailsImpl_00024Companion_wrapAsBuffer(
+    JNIEnv *env, jclass clazz, jlong address, jint capacity)
+{
+    return (*env)->NewDirectByteBuffer(env, (void*)address, capacity);
+}
+
+JNIEXPORT jobject JNICALL
+Java_app_alextran_immich_images_ThumbnailsImpl_wrapAsBuffer(
+    JNIEnv *env, jclass clazz, jlong address, jint capacity)
+{
+    return (*env)->NewDirectByteBuffer(env, (void*)address, capacity);
+}

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

@@ -1,7 +1,20 @@
 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
-class AppGlideModule : AppGlideModule()
+class AppGlideModule : AppGlideModule() {
+    override fun applyOptions(context: Context, builder: GlideBuilder) {
+        super.applyOptions(context, builder)
+        // disable caching as this is already done on the Flutter side
+        builder.setMemoryCache(MemoryCacheAdapter())
+        builder.setDiskCache(DiskCacheAdapter.Factory())
+        builder.setBitmapPool(BitmapPoolAdapter())
+    }
+}

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

@@ -3,6 +3,8 @@ package app.alextran.immich
 import android.os.Build
 import android.os.ext.SdkExtensions
 import androidx.annotation.NonNull
+import app.alextran.immich.images.ThumbnailApi
+import app.alextran.immich.images.ThumbnailsImpl
 import app.alextran.immich.sync.NativeSyncApi
 import app.alextran.immich.sync.NativeSyncApiImpl26
 import app.alextran.immich.sync.NativeSyncApiImpl30
@@ -22,6 +24,7 @@ class MainActivity : FlutterFragmentActivity() {
       } else {
         NativeSyncApiImpl30(this)
       }
-    NativeSyncApi.setUp(flutterEngine.dartExecutor.binaryMessenger, nativeSyncApiImpl)
+      NativeSyncApi.setUp(flutterEngine.dartExecutor.binaryMessenger, nativeSyncApiImpl)
+      ThumbnailApi.setUp(flutterEngine.dartExecutor.binaryMessenger, ThumbnailsImpl(this))
   }
 }

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

@@ -0,0 +1,164 @@
+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 {
+  /**
+   * 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 = ThumbnailsImpl.allocateNative(size);
+    ByteBuffer rgba = ThumbnailsImpl.wrapAsBuffer(pointer, size);
+    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.put(i, (byte) Math.max(0, Math.round(255.0f * Math.min(1, r))));
+        rgba.put(i + 1, (byte) Math.max(0, Math.round(255.0f * Math.min(1, g))));
+        rgba.put(i + 2, (byte) Math.max(0, Math.round(255.0f * Math.min(1, b))));
+        rgba.put(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

@@ -0,0 +1,139 @@
+// Autogenerated from Pigeon (v26.0.0), do not edit directly.
+// See also: https://pub.dev/packages/pigeon
+@file:Suppress("UNCHECKED_CAST", "ArrayInDataClass")
+
+package app.alextran.immich.images
+
+import android.util.Log
+import io.flutter.plugin.common.BasicMessageChannel
+import io.flutter.plugin.common.BinaryMessenger
+import io.flutter.plugin.common.EventChannel
+import io.flutter.plugin.common.MessageCodec
+import io.flutter.plugin.common.StandardMethodCodec
+import io.flutter.plugin.common.StandardMessageCodec
+import java.io.ByteArrayOutputStream
+import java.nio.ByteBuffer
+private object ThumbnailsPigeonUtils {
+
+  fun wrapResult(result: Any?): List<Any?> {
+    return listOf(result)
+  }
+
+  fun wrapError(exception: Throwable): List<Any?> {
+    return if (exception is FlutterError) {
+      listOf(
+        exception.code,
+        exception.message,
+        exception.details
+      )
+    } else {
+      listOf(
+        exception.javaClass.simpleName,
+        exception.toString(),
+        "Cause: " + exception.cause + ", Stacktrace: " + Log.getStackTraceString(exception)
+      )
+    }
+  }
+}
+
+/**
+ * Error class for passing custom error details to Flutter via a thrown PlatformException.
+ * @property code The error code.
+ * @property message The error message.
+ * @property details The error details. Must be a datatype supported by the api codec.
+ */
+class FlutterError (
+  val code: String,
+  override val message: String? = null,
+  val details: Any? = null
+) : Throwable()
+private open class ThumbnailsPigeonCodec : StandardMessageCodec() {
+  override fun readValueOfType(type: Byte, buffer: ByteBuffer): Any? {
+    return     super.readValueOfType(type, buffer)
+  }
+  override fun writeValue(stream: ByteArrayOutputStream, value: Any?)   {
+    super.writeValue(stream, value)
+  }
+}
+
+
+/** Generated interface from Pigeon that represents a handler of messages from Flutter. */
+interface ThumbnailApi {
+  fun requestImage(assetId: String, requestId: Long, width: Long, height: Long, isVideo: Boolean, 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. */
+    val codec: MessageCodec<Any?> by lazy {
+      ThumbnailsPigeonCodec()
+    }
+    /** Sets up an instance of `ThumbnailApi` to handle messages through the `binaryMessenger`. */
+    @JvmOverloads
+    fun setUp(binaryMessenger: BinaryMessenger, api: ThumbnailApi?, messageChannelSuffix: String = "") {
+      val separatedMessageChannelSuffix = if (messageChannelSuffix.isNotEmpty()) ".$messageChannelSuffix" else ""
+      run {
+        val channel = BasicMessageChannel<Any?>(binaryMessenger, "dev.flutter.pigeon.immich_mobile.ThumbnailApi.requestImage$separatedMessageChannelSuffix", codec)
+        if (api != null) {
+          channel.setMessageHandler { message, reply ->
+            val args = message as List<Any?>
+            val assetIdArg = args[0] as String
+            val requestIdArg = args[1] as Long
+            val widthArg = args[2] as Long
+            val heightArg = args[3] as Long
+            val isVideoArg = args[4] as Boolean
+            api.requestImage(assetIdArg, requestIdArg, widthArg, heightArg, isVideoArg) { 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)
+        }
+      }
+      run {
+        val channel = BasicMessageChannel<Any?>(binaryMessenger, "dev.flutter.pigeon.immich_mobile.ThumbnailApi.cancelImageRequest$separatedMessageChannelSuffix", codec)
+        if (api != null) {
+          channel.setMessageHandler { message, reply ->
+            val args = message as List<Any?>
+            val requestIdArg = args[0] as Long
+            val wrapped: List<Any?> = try {
+              api.cancelImageRequest(requestIdArg)
+              listOf(null)
+            } catch (exception: Throwable) {
+              ThumbnailsPigeonUtils.wrapError(exception)
+            }
+            reply.reply(wrapped)
+          }
+        } else {
+          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

@@ -0,0 +1,255 @@
+package app.alextran.immich.images
+
+import android.content.ContentResolver
+import android.content.ContentUris
+import android.content.Context
+import android.graphics.*
+import android.net.Uri
+import android.os.Build
+import android.os.CancellationSignal
+import android.os.OperationCanceledException
+import android.provider.MediaStore
+import android.provider.MediaStore.Images
+import android.provider.MediaStore.Video
+import android.util.Size
+import java.nio.ByteBuffer
+import kotlin.math.*
+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.ConcurrentHashMap
+import java.util.concurrent.Future
+
+data class Request(
+    val requestId: Long,
+    val taskFuture: Future<*>,
+    val cancellationSignal: CancellationSignal,
+    val callback: (Result<Map<String, Long>>) -> Unit
+)
+
+class ThumbnailsImpl(context: Context) : ThumbnailApi {
+    private val ctx: Context = context.applicationContext
+    private val resolver: ContentResolver = ctx.contentResolver
+    private val requestThread = Executors.newSingleThreadExecutor()
+    private val threadPool =
+        Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors() / 2 + 1)
+    private val requestMap = ConcurrentHashMap<Long, Request>()
+
+    companion object {
+        val PROJECTION = arrayOf(
+            MediaStore.MediaColumns.DATE_MODIFIED,
+            MediaStore.Files.FileColumns.MEDIA_TYPE,
+        )
+        const val SELECTION = "${MediaStore.MediaColumns._ID} = ?"
+        val URI: Uri = MediaStore.Files.getContentUri("external")
+
+        const val MEDIA_TYPE_IMAGE = MediaStore.Files.FileColumns.MEDIA_TYPE_IMAGE
+        const val MEDIA_TYPE_VIDEO = MediaStore.Files.FileColumns.MEDIA_TYPE_VIDEO
+        val CANCELLED = Result.success<Map<String, Long>>(mapOf())
+        val OPTIONS = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.ARGB_8888 }
+
+        init {
+            System.loadLibrary("native_buffer")
+        }
+
+        @JvmStatic
+        external fun allocateNative(size: Int): Long
+
+        @JvmStatic
+        external fun freeNative(pointer: Long)
+
+        @JvmStatic
+        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,
+        width: Long,
+        height: Long,
+        isVideo: Boolean,
+        callback: (Result<Map<String, Long>>) -> Unit
+    ) {
+        val signal = CancellationSignal()
+        val task = threadPool.submit {
+            try {
+                getThumbnailBufferInternal(assetId, width, height, isVideo, callback, signal)
+            } catch (e: Exception) {
+                when (e) {
+                    is OperationCanceledException -> callback(CANCELLED)
+                    is CancellationException -> callback(CANCELLED)
+                    else -> callback(Result.failure(e))
+                }
+            } finally {
+                requestMap.remove(requestId)
+            }
+        }
+        val request = Request(requestId, task, signal, callback)
+        requestMap[requestId] = request
+    }
+
+    override fun cancelImageRequest(requestId: Long) {
+        val request = requestMap.remove(requestId) ?: return
+        request.taskFuture.cancel(false)
+        request.cancellationSignal.cancel()
+        if (request.taskFuture.isCancelled) {
+            requestThread.execute {
+                try {
+                    request.callback(CANCELLED)
+                } catch (_: Exception) {
+                }
+            }
+        }
+    }
+
+    private fun getThumbnailBufferInternal(
+        assetId: String,
+        width: Long,
+        height: Long,
+        isVideo: Boolean,
+        callback: (Result<Map<String, Long>>) -> Unit,
+        signal: CancellationSignal
+    ) {
+        signal.throwIfCanceled()
+        val targetWidth = width.toInt()
+        val targetHeight = height.toInt()
+        val id = assetId.toLong()
+
+        signal.throwIfCanceled()
+        val bitmap = if (isVideo) {
+            decodeVideoThumbnail(id, targetWidth, targetHeight, signal)
+        } else {
+            decodeImage(id, targetWidth, targetHeight, signal)
+        }
+
+        processBitmap(bitmap, callback, signal)
+    }
+
+    private fun processBitmap(
+        bitmap: Bitmap,
+        callback: (Result<Map<String, Long>>) -> Unit,
+        signal: CancellationSignal
+    ) {
+        signal.throwIfCanceled()
+        val actualWidth = bitmap.width
+        val actualHeight = bitmap.height
+
+        val size = actualWidth * actualHeight * 4
+        val pointer = allocateNative(size)
+
+        try {
+            signal.throwIfCanceled()
+            val buffer = wrapAsBuffer(pointer, size)
+            bitmap.copyPixelsToBuffer(buffer)
+            bitmap.recycle()
+            signal.throwIfCanceled()
+            val res = mapOf(
+                "pointer" to pointer,
+                "width" to actualWidth.toLong(),
+                "height" to actualHeight.toLong()
+            )
+            callback(Result.success(res))
+        } catch (e: Exception) {
+            freeNative(pointer)
+            callback(if (e is OperationCanceledException) CANCELLED else Result.failure(e))
+        }
+    }
+
+    private fun decodeImage(
+        id: Long,
+        targetWidth: Int,
+        targetHeight: Int,
+        signal: CancellationSignal
+    ): Bitmap {
+        signal.throwIfCanceled()
+        val uri = ContentUris.withAppendedId(Images.Media.EXTERNAL_CONTENT_URI, id)
+        if (targetHeight > 768 || targetWidth > 768) {
+            return decodeSource(uri, targetWidth, targetHeight, signal)
+        }
+
+        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            resolver.loadThumbnail(uri, Size(targetWidth, targetHeight), signal)
+        } else {
+            signal.setOnCancelListener { Images.Thumbnails.cancelThumbnailRequest(resolver, id) }
+            Images.Thumbnails.getThumbnail(resolver, id, Images.Thumbnails.MINI_KIND, OPTIONS)
+        }
+    }
+
+    private fun decodeVideoThumbnail(
+        id: Long,
+        targetWidth: Int,
+        targetHeight: Int,
+        signal: CancellationSignal
+    ): Bitmap {
+        signal.throwIfCanceled()
+        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            val uri = ContentUris.withAppendedId(Video.Media.EXTERNAL_CONTENT_URI, id)
+            resolver.loadThumbnail(uri, Size(targetWidth, targetHeight), signal)
+        } else {
+            signal.setOnCancelListener { Video.Thumbnails.cancelThumbnailRequest(resolver, id) }
+            Video.Thumbnails.getThumbnail(resolver, id, Video.Thumbnails.MINI_KIND, OPTIONS)
+        }
+    }
+
+    private fun decodeSource(
+        uri: Uri,
+        targetWidth: Int,
+        targetHeight: Int,
+        signal: CancellationSignal
+    ): Bitmap {
+        signal.throwIfCanceled()
+        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            val source = ImageDecoder.createSource(resolver, uri)
+            signal.throwIfCanceled()
+            ImageDecoder.decodeBitmap(source) { decoder, info, _ ->
+                val sampleSize =
+                    getSampleSize(info.size.width, info.size.height, targetWidth, targetHeight)
+                decoder.setTargetSampleSize(sampleSize)
+                decoder.allocator = ImageDecoder.ALLOCATOR_SOFTWARE
+                decoder.setTargetColorSpace(ColorSpace.get(ColorSpace.Named.SRGB))
+            }
+        } else {
+            val ref = Glide.with(ctx)
+                .asBitmap()
+                .priority(Priority.IMMEDIATE)
+                .load(uri)
+                .disallowHardwareConfig()
+                .format(DecodeFormat.PREFER_ARGB_8888)
+                .submit(targetWidth, targetHeight)
+            signal.setOnCancelListener { Glide.with(ctx).clear(ref) }
+            ref.get()
+        }
+    }
+
+    private fun getSampleSize(fullWidth: Int, fullHeight: Int, reqWidth: Int, reqHeight: Int): Int {
+        return 1 shl max(
+            0, floor(
+                min(
+                    log2(fullWidth / (2.0 * reqWidth)),
+                    log2(fullHeight / (2.0 * reqHeight)),
+                )
+            ).toInt()
+        )
+    }
+}

mobile/ios/Runner.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 54;
+	objectVersion = 77;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -24,6 +24,9 @@
 		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 */
 
 /* Begin PBXContainerItemProxy section */
@@ -102,6 +105,9 @@
 		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 */
 
 /* Begin PBXFileSystemSynchronizedBuildFileExceptionSet section */
@@ -117,8 +123,6 @@
 /* Begin PBXFileSystemSynchronizedRootGroup section */
 		B2CF7F8C2DDE4EBB00744BF6 /* Sync */ = {
 			isa = PBXFileSystemSynchronizedRootGroup;
-			exceptions = (
-			);
 			path = Sync;
 			sourceTree = "<group>";
 		};
@@ -243,6 +247,7 @@
 				1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */,
 				74858FAE1ED2DC5600515810 /* AppDelegate.swift */,
 				74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */,
+				FED3B1952E253E9B0030FD97 /* Images */,
 			);
 			path = Runner;
 			sourceTree = "<group>";
@@ -258,6 +263,16 @@
 			path = ShareExtension;
 			sourceTree = "<group>";
 		};
+		FED3B1952E253E9B0030FD97 /* Images */ = {
+			isa = PBXGroup;
+			children = (
+				FEAFA8722E4D42F4001E47FE /* Thumbhash.swift */,
+				FED3B1932E253E9B0030FD97 /* Thumbnails.g.swift */,
+				FED3B1942E253E9B0030FD97 /* ThumbnailsImpl.swift */,
+			);
+			path = Images;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -523,6 +538,9 @@
 			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 */,
 				65F32F33299D349D00CE9261 /* BackgroundSyncWorker.swift in Sources */,
 			);

mobile/ios/Runner/AppDelegate.swift

@@ -25,6 +25,7 @@ import UIKit
     
     let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
     NativeSyncApiSetup.setUp(binaryMessenger: controller.binaryMessenger, api: NativeSyncApiImpl())
+    ThumbnailApiSetup.setUp(binaryMessenger: controller.binaryMessenger, api: ThumbnailApiImpl())
 
     BackgroundServicePlugin.setPluginRegistrantCallback { registry in
       if !registry.hasPlugin("org.cocoapods.path-provider-foundation") {

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

@@ -0,0 +1,138 @@
+// Autogenerated from Pigeon (v26.0.0), do not edit directly.
+// See also: https://pub.dev/packages/pigeon
+
+import Foundation
+
+#if os(iOS)
+  import Flutter
+#elseif os(macOS)
+  import FlutterMacOS
+#else
+  #error("Unsupported platform.")
+#endif
+
+private func wrapResult(_ result: Any?) -> [Any?] {
+  return [result]
+}
+
+private func wrapError(_ error: Any) -> [Any?] {
+  if let pigeonError = error as? PigeonError {
+    return [
+      pigeonError.code,
+      pigeonError.message,
+      pigeonError.details,
+    ]
+  }
+  if let flutterError = error as? FlutterError {
+    return [
+      flutterError.code,
+      flutterError.message,
+      flutterError.details,
+    ]
+  }
+  return [
+    "\(error)",
+    "\(type(of: error))",
+    "Stacktrace: \(Thread.callStackSymbols)",
+  ]
+}
+
+private func isNullish(_ value: Any?) -> Bool {
+  return value is NSNull || value == nil
+}
+
+private func nilOrValue<T>(_ value: Any?) -> T? {
+  if value is NSNull { return nil }
+  return value as! T?
+}
+
+
+private class ThumbnailsPigeonCodecReader: FlutterStandardReader {
+}
+
+private class ThumbnailsPigeonCodecWriter: FlutterStandardWriter {
+}
+
+private class ThumbnailsPigeonCodecReaderWriter: FlutterStandardReaderWriter {
+  override func reader(with data: Data) -> FlutterStandardReader {
+    return ThumbnailsPigeonCodecReader(data: data)
+  }
+
+  override func writer(with data: NSMutableData) -> FlutterStandardWriter {
+    return ThumbnailsPigeonCodecWriter(data: data)
+  }
+}
+
+class ThumbnailsPigeonCodec: FlutterStandardMessageCodec, @unchecked Sendable {
+  static let shared = ThumbnailsPigeonCodec(readerWriter: ThumbnailsPigeonCodecReaderWriter())
+}
+
+
+/// Generated protocol from Pigeon that represents a handler of messages from Flutter.
+protocol ThumbnailApi {
+  func requestImage(assetId: String, requestId: Int64, width: Int64, height: Int64, isVideo: Bool, 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`.
+class ThumbnailApiSetup {
+  static var codec: FlutterStandardMessageCodec { ThumbnailsPigeonCodec.shared }
+  /// Sets up an instance of `ThumbnailApi` to handle messages through the `binaryMessenger`.
+  static func setUp(binaryMessenger: FlutterBinaryMessenger, api: ThumbnailApi?, messageChannelSuffix: String = "") {
+    let channelSuffix = messageChannelSuffix.count > 0 ? ".\(messageChannelSuffix)" : ""
+    let requestImageChannel = FlutterBasicMessageChannel(name: "dev.flutter.pigeon.immich_mobile.ThumbnailApi.requestImage\(channelSuffix)", binaryMessenger: binaryMessenger, codec: codec)
+    if let api = api {
+      requestImageChannel.setMessageHandler { message, reply in
+        let args = message as! [Any?]
+        let assetIdArg = args[0] as! String
+        let requestIdArg = args[1] as! Int64
+        let widthArg = args[2] as! Int64
+        let heightArg = args[3] as! Int64
+        let isVideoArg = args[4] as! Bool
+        api.requestImage(assetId: assetIdArg, requestId: requestIdArg, width: widthArg, height: heightArg, isVideo: isVideoArg) { result in
+          switch result {
+          case .success(let res):
+            reply(wrapResult(res))
+          case .failure(let error):
+            reply(wrapError(error))
+          }
+        }
+      }
+    } else {
+      requestImageChannel.setMessageHandler(nil)
+    }
+    let cancelImageRequestChannel = FlutterBasicMessageChannel(name: "dev.flutter.pigeon.immich_mobile.ThumbnailApi.cancelImageRequest\(channelSuffix)", binaryMessenger: binaryMessenger, codec: codec)
+    if let api = api {
+      cancelImageRequestChannel.setMessageHandler { message, reply in
+        let args = message as! [Any?]
+        let requestIdArg = args[0] as! Int64
+        do {
+          try api.cancelImageRequest(requestId: requestIdArg)
+          reply(wrapResult(nil))
+        } catch {
+          reply(wrapError(error))
+        }
+      }
+    } 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

@@ -0,0 +1,187 @@
+import CryptoKit
+import Flutter
+import MobileCoreServices
+import Photos
+
+class Request {
+  weak var workItem: DispatchWorkItem?
+  var isCancelled = false
+  let callback: (Result<[String: Int64], any Error>) -> Void
+  
+  init(callback: @escaping (Result<[String: Int64], any Error>) -> Void) {
+    self.callback = callback
+  }
+}
+
+class ThumbnailApiImpl: ThumbnailApi {
+  private static let imageManager = PHImageManager.default()
+  private static let fetchOptions = {
+    let fetchOptions = PHFetchOptions()
+    fetchOptions.fetchLimit = 1
+    fetchOptions.wantsIncrementalChangeDetails = false
+    return fetchOptions
+  }()
+  private static let requestOptions = {
+    let requestOptions = PHImageRequestOptions()
+    requestOptions.isNetworkAccessAllowed = true
+    requestOptions.deliveryMode = .highQualityFormat
+    requestOptions.resizeMode = .fast
+    requestOptions.isSynchronous = true
+    requestOptions.version = .current
+    return requestOptions
+  }()
+  
+  private static let assetQueue = DispatchQueue(label: "thumbnail.assets", qos: .userInitiated)
+  private static let requestQueue = DispatchQueue(label: "thumbnail.requests", qos: .userInitiated)
+  private static let cancelQueue = DispatchQueue(label: "thumbnail.cancellation", qos: .default)
+  private static let processingQueue = DispatchQueue(label: "thumbnail.processing", qos: .userInteractive, attributes: .concurrent)
+  
+  private static let rgbColorSpace = CGColorSpaceCreateDeviceRGB()
+  private static let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue).rawValue
+  private static var requests = [Int64: Request]()
+  private static let cancelledResult = Result<[String: Int64], any Error>.success([:])
+  private static let concurrencySemaphore = DispatchSemaphore(value: ProcessInfo.processInfo.activeProcessorCount * 2)
+  private static let assetCache = {
+    let assetCache = NSCache<NSString, PHAsset>()
+    assetCache.countLimit = 10000
+    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 {
+      if request.isCancelled {
+        return completion(Self.cancelledResult)
+      }
+      
+      Self.concurrencySemaphore.wait()
+      defer {
+        Self.concurrencySemaphore.signal()
+      }
+      
+      if request.isCancelled {
+        return completion(Self.cancelledResult)
+      }
+      
+      guard let asset = Self.requestAsset(assetId: assetId)
+      else {
+        Self.removeRequest(requestId: requestId)
+        completion(.failure(PigeonError(code: "", message: "Could not get asset data for \(assetId)", details: nil)))
+        return
+      }
+      
+      if request.isCancelled {
+        return completion(Self.cancelledResult)
+      }
+      
+      var image: UIImage?
+      Self.imageManager.requestImage(
+        for: asset,
+        targetSize: CGSize(width: Double(width), height: Double(height)),
+        contentMode: .aspectFit,
+        options: Self.requestOptions,
+        resultHandler: { (_image, info) -> Void in
+          image = _image
+        }
+      )
+      
+      if request.isCancelled {
+        return completion(Self.cancelledResult)
+      }
+      
+      guard let image = image,
+            let cgImage = image.cgImage else {
+        Self.removeRequest(requestId: requestId)
+        return completion(.failure(PigeonError(code: "", message: "Could not get pixel data for \(assetId)", details: nil)))
+      }
+      
+      let pointer = UnsafeMutableRawPointer.allocate(
+        byteCount: Int(cgImage.width) * Int(cgImage.height) * 4,
+        alignment: MemoryLayout<UInt8>.alignment
+      )
+      
+      if request.isCancelled {
+        pointer.deallocate()
+        return completion(Self.cancelledResult)
+      }
+      
+      guard let context = CGContext(
+        data: pointer,
+        width: cgImage.width,
+        height: cgImage.height,
+        bitsPerComponent: 8,
+        bytesPerRow: cgImage.width * 4,
+        space: Self.rgbColorSpace,
+        bitmapInfo: Self.bitmapInfo
+      ) else {
+        pointer.deallocate()
+        Self.removeRequest(requestId: requestId)
+        return completion(.failure(PigeonError(code: "", message: "Could not create context for \(assetId)", details: nil)))
+      }
+      
+      if request.isCancelled {
+        pointer.deallocate()
+        return completion(Self.cancelledResult)
+      }
+      
+      context.interpolationQuality = .none
+      context.draw(cgImage, in: CGRect(x: 0, y: 0, width: cgImage.width, height: cgImage.height))
+      
+      if request.isCancelled {
+        pointer.deallocate()
+        return completion(Self.cancelledResult)
+      }
+      
+      completion(.success(["pointer": Int64(Int(bitPattern: pointer)), "width": Int64(cgImage.width), "height": Int64(cgImage.height)]))
+      Self.removeRequest(requestId: requestId)
+    }
+    
+    request.workItem = item
+    Self.addRequest(requestId: requestId, request: request)
+    Self.processingQueue.async(execute: item)
+  }
+  
+  func cancelImageRequest(requestId: Int64) {
+    Self.cancelRequest(requestId: requestId)
+  }
+  
+  private static func addRequest(requestId: Int64, request: Request) -> Void {
+    requestQueue.sync { requests[requestId] = request }
+  }
+  
+  private static func removeRequest(requestId: Int64) -> Void {
+    requestQueue.sync { requests[requestId] = nil }
+  }
+  
+  private static func cancelRequest(requestId: Int64) -> Void {
+    requestQueue.async {
+      guard let request = requests.removeValue(forKey: requestId) else { return }
+      request.isCancelled = true
+      guard let item = request.workItem else { return }
+      if item.isCancelled {
+        request.callback(Self.cancelledResult)
+      }
+    }
+  }
+  
+  private static func requestAsset(assetId: String) -> PHAsset? {
+    var asset: PHAsset?
+    assetQueue.sync { asset = assetCache.object(forKey: assetId as NSString) }
+    if asset != nil { return asset }
+    
+    guard let asset = PHAsset.fetchAssets(withLocalIdentifiers: [assetId], options: Self.fetchOptions).firstObject
+    else { return nil }
+    assetQueue.async { assetCache.setObject(asset, forKey: assetId as NSString) }
+    return asset
+  }
+}

mobile/ios/Runner/Info.plist

@@ -184,4 +184,4 @@
     <string>We need local network permission to connect to the local server using IP address and
       allow the casting feature to work</string>
   </dict>
-</plist>
+</plist>

mobile/lib/constants/constants.dart

@@ -26,7 +26,7 @@ const String kDownloadGroupLivePhoto = 'group_livephoto';
 
 // Timeline constants
 const int kTimelineNoneSegmentSize = 120;
-const int kTimelineAssetLoadBatchSize = 256;
+const int kTimelineAssetLoadBatchSize = 1024;
 const int kTimelineAssetLoadOppositeSize = 64;
 
 // Widget keys

mobile/lib/extensions/datetime_extensions.dart

@@ -85,3 +85,13 @@ extension DateRangeFormatting on DateTime {
     }
   }
 }
+
+extension IsSameExtension on DateTime {
+  bool isSameDay(DateTime other) {
+    return day == other.day && month == other.month && year == other.year;
+  }
+
+  bool isSameMonth(DateTime other) {
+    return month == other.month && year == other.year;
+  }
+}

mobile/lib/extensions/scroll_extensions.dart

@@ -32,3 +32,31 @@ class FastClampingScrollPhysics extends ClampingScrollPhysics {
     damping: 80,
   );
 }
+
+class ScrollUnawareScrollPhysics extends ScrollPhysics {
+  const ScrollUnawareScrollPhysics({super.parent});
+
+  @override
+  ScrollUnawareScrollPhysics applyTo(ScrollPhysics? ancestor) {
+    return ScrollUnawareScrollPhysics(parent: buildParent(ancestor));
+  }
+
+  @override
+  bool recommendDeferredLoading(double velocity, ScrollMetrics metrics, BuildContext context) {
+    return false;
+  }
+}
+
+class ScrollUnawareClampingScrollPhysics extends ClampingScrollPhysics {
+  const ScrollUnawareClampingScrollPhysics({super.parent});
+
+  @override
+  ScrollUnawareClampingScrollPhysics applyTo(ScrollPhysics? ancestor) {
+    return ScrollUnawareClampingScrollPhysics(parent: buildParent(ancestor));
+  }
+
+  @override
+  bool recommendDeferredLoading(double velocity, ScrollMetrics metrics, BuildContext context) {
+    return false;
+  }
+}

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

@@ -1,18 +1,286 @@
-import 'dart:typed_data';
-import 'dart:ui';
+import 'dart:async';
+import 'dart:ffi';
+import 'dart:io';
+import 'dart:ui' as ui;
 
-import 'package:photo_manager/photo_manager.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/foundation.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/providers/image/cache/remote_image_cache_manager.dart';
+import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
+import 'package:ffi/ffi.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:logging/logging.dart';
 
-class AssetMediaRepository {
-  const AssetMediaRepository();
+abstract class ImageRequest {
+  static int _nextRequestId = 0;
 
-  Future<Uint8List?> getThumbnail(String id, {int quality = 80, Size size = const Size.square(256)}) => AssetEntity(
-    id: id,
-    // The below fields are not used in thumbnailDataWithSize but are required
-    // to create an AssetEntity instance. It is faster to create a dummy AssetEntity
-    // instance than to fetch the asset from the device first.
-    typeInt: AssetType.image.index,
-    width: size.width.toInt(),
-    height: size.height.toInt(),
-  ).thumbnailDataWithSize(ThumbnailSize(size.width.toInt(), size.height.toInt()), quality: quality);
+  final int requestId = _nextRequestId++;
+  bool _isCancelled = false;
+
+  get isCancelled => _isCancelled;
+
+  ImageRequest();
+
+  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0});
+
+  void cancel() {
+    if (isCancelled) {
+      return;
+    }
+    _isCancelled = true;
+    if (!kReleaseMode) {
+      debugPrint('Cancelling image request $requestId');
+    }
+    return _onCancelled();
+  }
+
+  void _onCancelled();
+
+  Future<ui.FrameInfo?> _fromPlatformImage(Map<String, int> info) async {
+    final address = info['pointer'];
+    if (address == null) {
+      if (!kReleaseMode) {
+        debugPrint('Platform image request for $requestId was cancelled');
+      }
+      return null;
+    }
+
+    final pointer = Pointer<Uint8>.fromAddress(address);
+    try {
+      if (_isCancelled) {
+        return null;
+      }
+
+      final actualWidth = info['width']!;
+      final actualHeight = info['height']!;
+      final actualSize = actualWidth * actualHeight * 4;
+
+      final buffer = await ImmutableBuffer.fromUint8List(pointer.asTypedList(actualSize));
+      if (_isCancelled) {
+        return null;
+      }
+
+      final descriptor = ui.ImageDescriptor.raw(
+        buffer,
+        width: actualWidth,
+        height: actualHeight,
+        pixelFormat: ui.PixelFormat.rgba8888,
+      );
+      final codec = await descriptor.instantiateCodec();
+      if (_isCancelled) {
+        return null;
+      }
+
+      return await codec.getNextFrame();
+    } 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;
+    }
+
+    Stopwatch? stopwatch;
+    if (!kReleaseMode) {
+      stopwatch = Stopwatch()..start();
+    }
+    final Map<String, int> info = await thumbnailApi.getThumbhash(thumbhash);
+    if (!kReleaseMode) {
+      stopwatch!.stop();
+      debugPrint('Thumbhash request $requestId took ${stopwatch.elapsedMilliseconds} ms');
+    }
+    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;
+  final AssetType assetType;
+
+  LocalImageRequest({required this.localId, required ui.Size size, required this.assetType})
+    : width = size.width.toInt(),
+      height = size.height.toInt();
+
+  @override
+  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0}) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    Stopwatch? stopwatch;
+    if (!kReleaseMode) {
+      stopwatch = Stopwatch()..start();
+    }
+    final Map<String, int> info = await thumbnailApi.requestImage(
+      localId,
+      requestId: requestId,
+      width: width,
+      height: height,
+      isVideo: assetType == AssetType.video,
+    );
+    if (!kReleaseMode) {
+      stopwatch!.stop();
+      debugPrint('Local image request $requestId took ${stopwatch.elapsedMilliseconds} ms');
+    }
+    final frame = await _fromPlatformImage(info);
+    return frame == null ? null : ImageInfo(image: frame.image, scale: scale);
+  }
+
+  @override
+  Future<void> _onCancelled() {
+    return thumbnailApi.cancelImageRequest(requestId);
+  }
+}
+
+class RemoteImageRequest extends ImageRequest {
+  static final log = Logger('RemoteImageRequest');
+  static final cacheManager = RemoteImageCacheManager();
+  static final client = HttpClient()..maxConnectionsPerHost = 32;
+  String uri;
+  Map<String, String> headers;
+  HttpClientRequest? _request;
+
+  RemoteImageRequest({required this.uri, required this.headers});
+
+  @override
+  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0}) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    // TODO: the cache manager makes everything sequential with its DB calls and its operations cannot be cancelled,
+    //  so it just makes things slower and more memory hungry. Even just saving files to disk
+    //  for offline use adds too much overhead as these calls add up. We only prefer fetching from it when
+    //  it can skip the DB call.
+    final cachedFileImage = await _loadCachedFile(uri, decode, scale, inMemoryOnly: true);
+    if (cachedFileImage != null) {
+      return cachedFileImage;
+    }
+
+    try {
+      Stopwatch? stopwatch;
+      if (!kReleaseMode) {
+        stopwatch = Stopwatch()..start();
+      }
+      final buffer = await _downloadImage(uri);
+      if (buffer == null) {
+        return null;
+      }
+      if (!kReleaseMode) {
+        stopwatch!.stop();
+        debugPrint('Remote image download request $requestId took ${stopwatch.elapsedMilliseconds} ms');
+      }
+      return await _decodeBuffer(buffer, decode, scale);
+    } catch (e) {
+      if (_isCancelled) {
+        if (!kReleaseMode) {
+          debugPrint('Remote image download request for $requestId was cancelled');
+        }
+        return null;
+      }
+
+      final cachedFileImage = await _loadCachedFile(uri, decode, scale, inMemoryOnly: false);
+      if (cachedFileImage != null) {
+        return cachedFileImage;
+      }
+
+      rethrow;
+    } finally {
+      _request = null;
+    }
+  }
+
+  Future<ImmutableBuffer?> _downloadImage(String url) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    final request = _request = await client.getUrl(Uri.parse(url));
+    if (_isCancelled) {
+      request.abort();
+      return _request = null;
+    }
+
+    final headers = ApiService.getRequestHeaders();
+    for (final entry in headers.entries) {
+      request.headers.set(entry.key, entry.value);
+    }
+    final response = await request.close();
+    final bytes = await consolidateHttpClientResponseBytes(response);
+    if (_isCancelled) {
+      return null;
+    }
+    return await ImmutableBuffer.fromUint8List(bytes);
+  }
+
+  Future<ImageInfo?> _loadCachedFile(
+    String url,
+    ImageDecoderCallback decode,
+    double scale, {
+    required bool inMemoryOnly,
+  }) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    final file = await (inMemoryOnly ? cacheManager.getFileFromMemory(url) : cacheManager.getFileFromCache(url));
+    if (_isCancelled || file == null) {
+      return null;
+    }
+
+    try {
+      final buffer = await ImmutableBuffer.fromFilePath(file.file.path);
+      return await _decodeBuffer(buffer, decode, scale);
+    } catch (e) {
+      log.severe('Failed to decode cached image', e);
+      _evictFile(url);
+      return null;
+    }
+  }
+
+  Future<void> _evictFile(String url) async {
+    try {
+      await cacheManager.removeFile(url);
+    } catch (e) {
+      log.severe('Failed to remove cached image', e);
+    }
+  }
+
+  Future<ImageInfo?> _decodeBuffer(ImmutableBuffer buffer, ImageDecoderCallback decode, scale) async {
+    if (_isCancelled) {
+      buffer.dispose();
+      return null;
+    }
+    final codec = await decode(buffer);
+    if (_isCancelled) {
+      buffer.dispose();
+      codec.dispose();
+      return null;
+    }
+    final frame = await codec.getNextFrame();
+    return ImageInfo(image: frame.image, scale: scale);
+  }
+
+  @override
+  void _onCancelled() {
+    _request?.abort();
+    _request = null;
+  }
 }

mobile/lib/platform/thumbnail_api.g.dart

@@ -0,0 +1,142 @@
+// Autogenerated from Pigeon (v26.0.0), do not edit directly.
+// See also: https://pub.dev/packages/pigeon
+// ignore_for_file: public_member_api_docs, non_constant_identifier_names, avoid_as, unused_import, unnecessary_parenthesis, prefer_null_aware_operators, omit_local_variable_types, unused_shown_name, unnecessary_import, no_leading_underscores_for_local_identifiers
+
+import 'dart:async';
+import 'dart:typed_data' show Float64List, Int32List, Int64List, Uint8List;
+
+import 'package:flutter/foundation.dart' show ReadBuffer, WriteBuffer;
+import 'package:flutter/services.dart';
+
+PlatformException _createConnectionError(String channelName) {
+  return PlatformException(
+    code: 'channel-error',
+    message: 'Unable to establish connection on channel: "$channelName".',
+  );
+}
+
+class _PigeonCodec extends StandardMessageCodec {
+  const _PigeonCodec();
+  @override
+  void writeValue(WriteBuffer buffer, Object? value) {
+    if (value is int) {
+      buffer.putUint8(4);
+      buffer.putInt64(value);
+    } else {
+      super.writeValue(buffer, value);
+    }
+  }
+
+  @override
+  Object? readValueOfType(int type, ReadBuffer buffer) {
+    switch (type) {
+      default:
+        return super.readValueOfType(type, buffer);
+    }
+  }
+}
+
+class ThumbnailApi {
+  /// Constructor for [ThumbnailApi].  The [binaryMessenger] named argument is
+  /// available for dependency injection.  If it is left null, the default
+  /// BinaryMessenger will be used which routes to the host platform.
+  ThumbnailApi({BinaryMessenger? binaryMessenger, String messageChannelSuffix = ''})
+    : pigeonVar_binaryMessenger = binaryMessenger,
+      pigeonVar_messageChannelSuffix = messageChannelSuffix.isNotEmpty ? '.$messageChannelSuffix' : '';
+  final BinaryMessenger? pigeonVar_binaryMessenger;
+
+  static const MessageCodec<Object?> pigeonChannelCodec = _PigeonCodec();
+
+  final String pigeonVar_messageChannelSuffix;
+
+  Future<Map<String, int>> requestImage(
+    String assetId, {
+    required int requestId,
+    required int width,
+    required int height,
+    required bool isVideo,
+  }) async {
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.immich_mobile.ThumbnailApi.requestImage$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+      pigeonVar_channelName,
+      pigeonChannelCodec,
+      binaryMessenger: pigeonVar_binaryMessenger,
+    );
+    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[
+      assetId,
+      requestId,
+      width,
+      height,
+      isVideo,
+    ]);
+    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>();
+    }
+  }
+
+  Future<void> cancelImageRequest(int requestId) async {
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.immich_mobile.ThumbnailApi.cancelImageRequest$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+      pigeonVar_channelName,
+      pigeonChannelCodec,
+      binaryMessenger: pigeonVar_binaryMessenger,
+    );
+    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[requestId]);
+    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 {
+      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/image_provider.dart

@@ -5,13 +5,32 @@ import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/infrastructure/repositories/asset_media.repository.dart';
+
+abstract class CancellableImageProvider {
+  void cancel();
+}
+
+mixin class CancellableImageProviderMixin implements CancellableImageProvider {
+  ImageRequest? request;
+
+  @override
+  void cancel() {
+    final request = this.request;
+    if (request == null) {
+      return;
+    }
+    this.request = null;
+    return request.cancel();
+  }
+}
 
 ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920)}) {
   // Create new provider and cache it
   final ImageProvider provider;
   if (_shouldUseLocalAsset(asset)) {
     final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
-    provider = LocalFullImageProvider(id: id, size: size, type: asset.type, updatedAt: asset.updatedAt);
+    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type);
   } else {
     final String assetId;
     if (asset is LocalAsset && asset.hasRemote) {
@@ -36,7 +55,7 @@ ImageProvider getThumbnailImageProvider({BaseAsset? asset, String? remoteId, Siz
 
   if (_shouldUseLocalAsset(asset!)) {
     final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
-    return LocalThumbProvider(id: id, updatedAt: asset.updatedAt, size: size);
+    return LocalThumbProvider(id: id, size: size, assetType: asset.type);
   }
 
   final String assetId;

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

@@ -1,37 +1,20 @@
 import 'dart:async';
-import 'dart:io';
 import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
-import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/setting.model.dart';
-import 'package:immich_mobile/domain/services/setting.service.dart';
-import 'package:immich_mobile/extensions/codec_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/asset_media.repository.dart';
-import 'package:immich_mobile/infrastructure/repositories/storage.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';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
-import 'package:immich_mobile/providers/image/cache/thumbnail_image_cache_manager.dart';
-import 'package:immich_mobile/providers/image/exceptions/image_loading_exception.dart';
-import 'package:logging/logging.dart';
-
-class LocalThumbProvider extends ImageProvider<LocalThumbProvider> {
-  final AssetMediaRepository _assetMediaRepository = const AssetMediaRepository();
-  final CacheManager? cacheManager;
 
+class LocalThumbProvider extends ImageProvider<LocalThumbProvider> with CancellableImageProviderMixin {
   final String id;
-  final DateTime updatedAt;
   final Size size;
+  final AssetType assetType;
 
-  const LocalThumbProvider({
-    required this.id,
-    required this.updatedAt,
-    this.size = kThumbnailResolution,
-    this.cacheManager,
-  });
+  LocalThumbProvider({required this.id, required this.assetType, this.size = kThumbnailResolution});
 
   @override
   Future<LocalThumbProvider> obtainKey(ImageConfiguration configuration) {
@@ -40,63 +23,48 @@ class LocalThumbProvider extends ImageProvider<LocalThumbProvider> {
 
   @override
   ImageStreamCompleter loadImage(LocalThumbProvider key, ImageDecoderCallback decode) {
-    final cache = cacheManager ?? ThumbnailImageCacheManager();
-    return MultiFrameImageStreamCompleter(
-      codec: _codec(key, cache, decode),
-      scale: 1.0,
+    final completer = OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<String>('Id', key.id),
-        DiagnosticsProperty<DateTime>('Updated at', key.updatedAt),
         DiagnosticsProperty<Size>('Size', key.size),
       ],
     );
+    completer.addOnLastListenerRemovedCallback(cancel);
+    return completer;
   }
 
-  Future<Codec> _codec(LocalThumbProvider key, CacheManager cache, ImageDecoderCallback decode) async {
-    final cacheKey = '${key.id}-${key.updatedAt}-${key.size.width}x${key.size.height}';
-
-    final fileFromCache = await cache.getFileFromCache(cacheKey);
-    if (fileFromCache != null) {
-      try {
-        final buffer = await ImmutableBuffer.fromFilePath(fileFromCache.file.path);
-        return decode(buffer);
-      } catch (_) {}
+  Stream<ImageInfo> _codec(LocalThumbProvider key, ImageDecoderCallback decode) async* {
+    final request = this.request = LocalImageRequest(localId: key.id, size: size, assetType: key.assetType);
+    try {
+      final image = await request.load(decode);
+      if (image != null) {
+        yield image;
+      }
+    } finally {
+      this.request = null;
     }
-
-    final thumbnailBytes = await _assetMediaRepository.getThumbnail(key.id, size: key.size);
-    if (thumbnailBytes == null) {
-      PaintingBinding.instance.imageCache.evict(key);
-      throw StateError("Loading thumb for local photo ${key.id} failed");
-    }
-
-    final buffer = await ImmutableBuffer.fromUint8List(thumbnailBytes);
-    unawaited(cache.putFile(cacheKey, thumbnailBytes));
-    return decode(buffer);
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is LocalThumbProvider) {
-      return id == other.id && updatedAt == other.updatedAt;
+      return id == other.id && size == other.size;
     }
     return false;
   }
 
   @override
-  int get hashCode => id.hashCode ^ updatedAt.hashCode;
+  int get hashCode => id.hashCode ^ size.hashCode;
 }
 
-class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
-  final AssetMediaRepository _assetMediaRepository = const AssetMediaRepository();
-  final StorageRepository _storageRepository = const StorageRepository();
-
+class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> with CancellableImageProviderMixin {
   final String id;
   final Size size;
-  final AssetType type;
-  final DateTime updatedAt; // temporary, only exists to fetch cached thumbnail until local disk cache is removed
+  final AssetType assetType;
 
-  const LocalFullImageProvider({required this.id, required this.size, required this.type, required this.updatedAt});
+  LocalFullImageProvider({required this.id, required this.assetType, required this.size});
 
   @override
   Future<LocalFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -105,100 +73,46 @@ class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
 
   @override
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
-    return OneFramePlaceholderImageStreamCompleter(
+    final completer = OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: getCachedImage(LocalThumbProvider(id: key.id, updatedAt: key.updatedAt)),
+      initialImage: getCachedImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
       informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Id', key.id),
-        DiagnosticsProperty<DateTime>('Updated at', key.updatedAt),
         DiagnosticsProperty<Size>('Size', key.size),
       ],
     );
+    completer.addOnLastListenerRemovedCallback(cancel);
+    return completer;
   }
 
-  // Streams in each stage of the image as we ask for it
-  Stream<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) {
-    try {
-      return switch (key.type) {
-        AssetType.image => _decodeProgressive(key, decode),
-        AssetType.video => _getThumbnailCodec(key, decode),
-        _ => throw StateError('Unsupported asset type ${key.type}'),
-      };
-    } catch (error, stack) {
-      Logger('ImmichLocalImageProvider').severe('Error loading local image ${key.id}', error, stack);
-      throw const ImageLoadingException('Could not load image from local storage');
-    }
-  }
-
-  Stream<ImageInfo> _getThumbnailCodec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
-    final thumbBytes = await _assetMediaRepository.getThumbnail(key.id, size: key.size);
-    if (thumbBytes == null) {
-      throw StateError("Failed to load preview for ${key.id}");
-    }
-    final buffer = await ImmutableBuffer.fromUint8List(thumbBytes);
-    final codec = await decode(buffer);
-    yield await codec.getImageInfo();
-  }
-
-  Stream<ImageInfo> _decodeProgressive(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
-    final file = await _storageRepository.getFileForAsset(key.id);
-    if (file == null) {
-      throw StateError("Opening file for asset ${key.id} failed");
-    }
-
-    final fileSize = await file.length();
+  Stream<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
     final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
-    final isLargeFile = fileSize > 20 * 1024 * 1024; // 20MB
-    final isHEIC = file.path.toLowerCase().contains(RegExp(r'\.(heic|heif)$'));
-    final isProgressive = isLargeFile || (isHEIC && !Platform.isIOS);
+    final request = this.request = LocalImageRequest(
+      localId: key.id,
+      size: Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
+      assetType: key.assetType,
+    );
 
-    if (isProgressive) {
-      try {
-        final progressiveMultiplier = devicePixelRatio >= 3.0 ? 1.3 : 1.2;
-        final size = Size(
-          (key.size.width * progressiveMultiplier).clamp(256, 1024),
-          (key.size.height * progressiveMultiplier).clamp(256, 1024),
-        );
-        final mediumThumb = await _assetMediaRepository.getThumbnail(key.id, size: size);
-        if (mediumThumb != null) {
-          final mediumBuffer = await ImmutableBuffer.fromUint8List(mediumThumb);
-          final codec = await decode(mediumBuffer);
-          yield await codec.getImageInfo();
-        }
-      } catch (_) {}
-    }
-
-    // Load original only when the file is smaller or if the user wants to load original images
-    // Or load a slightly larger image for progressive loading
-    if (isProgressive && !(AppSetting.get(Setting.loadOriginal))) {
-      final progressiveMultiplier = devicePixelRatio >= 3.0 ? 2.0 : 1.6;
-      final size = Size(
-        (key.size.width * progressiveMultiplier).clamp(512, 2048),
-        (key.size.height * progressiveMultiplier).clamp(512, 2048),
-      );
-      final highThumb = await _assetMediaRepository.getThumbnail(key.id, size: size);
-      if (highThumb != null) {
-        final highBuffer = await ImmutableBuffer.fromUint8List(highThumb);
-        final codec = await decode(highBuffer);
-        yield await codec.getImageInfo();
+    try {
+      final image = await request.load(decode);
+      if (image != null) {
+        yield image;
       }
-      return;
+    } finally {
+      this.request = null;
     }
-
-    final buffer = await ImmutableBuffer.fromFilePath(file.path);
-    final codec = await decode(buffer);
-    yield await codec.getImageInfo();
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is LocalFullImageProvider) {
-      return id == other.id && size == other.size && type == other.type;
+      return id == other.id && size == other.size;
     }
     return false;
   }
 
   @override
-  int get hashCode => id.hashCode ^ size.hashCode ^ type.hashCode;
+  int get hashCode => id.hashCode ^ size.hashCode;
 }

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

@@ -1,23 +1,21 @@
 import 'dart:async';
-import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/painting.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/services/setting.service.dart';
-import 'package:immich_mobile/extensions/codec_extensions.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';
-import 'package:immich_mobile/providers/image/cache/image_loader.dart';
-import 'package:immich_mobile/providers/image/cache/remote_image_cache_manager.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
-class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> {
+class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> with CancellableImageProviderMixin {
   final String assetId;
   final CacheManager? cacheManager;
 
-  const RemoteThumbProvider({required this.assetId, this.cacheManager});
+  RemoteThumbProvider({required this.assetId, this.cacheManager});
 
   @override
   Future<RemoteThumbProvider> obtainKey(ImageConfiguration configuration) {
@@ -26,33 +24,28 @@ class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> {
 
   @override
   ImageStreamCompleter loadImage(RemoteThumbProvider key, ImageDecoderCallback decode) {
-    final cache = cacheManager ?? RemoteImageCacheManager();
-    final chunkController = StreamController<ImageChunkEvent>();
-    return MultiFrameImageStreamCompleter(
-      codec: _codec(key, cache, decode, chunkController),
-      scale: 1.0,
-      chunkEvents: chunkController.stream,
+    final completer = OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
       ],
     );
+    completer.addOnLastListenerRemovedCallback(cancel);
+    return completer;
   }
 
-  Future<Codec> _codec(
-    RemoteThumbProvider key,
-    CacheManager cache,
-    ImageDecoderCallback decode,
-    StreamController<ImageChunkEvent> chunkController,
-  ) async {
+  Stream<ImageInfo> _codec(RemoteThumbProvider key, ImageDecoderCallback decode) async* {
     final preview = getThumbnailUrlForRemoteId(key.assetId);
-
-    return ImageLoader.loadImageFromCache(
-      preview,
-      cache: cache,
-      decode: decode,
-      chunkEvents: chunkController,
-    ).whenComplete(chunkController.close);
+    final request = this.request = RemoteImageRequest(uri: preview, headers: ApiService.getRequestHeaders());
+    try {
+      final image = await request.load(decode);
+      if (image != null) {
+        yield image;
+      }
+    } finally {
+      this.request = null;
+    }
   }
 
   @override
@@ -69,11 +62,11 @@ class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> {
   int get hashCode => assetId.hashCode;
 }
 
-class RemoteFullImageProvider extends ImageProvider<RemoteFullImageProvider> {
+class RemoteFullImageProvider extends ImageProvider<RemoteFullImageProvider> with CancellableImageProviderMixin {
   final String assetId;
   final CacheManager? cacheManager;
 
-  const RemoteFullImageProvider({required this.assetId, this.cacheManager});
+  RemoteFullImageProvider({required this.assetId, this.cacheManager});
 
   @override
   Future<RemoteFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -82,28 +75,46 @@ class RemoteFullImageProvider extends ImageProvider<RemoteFullImageProvider> {
 
   @override
   ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
-    final cache = cacheManager ?? RemoteImageCacheManager();
-    return OneFramePlaceholderImageStreamCompleter(
-      _codec(key, cache, decode),
-      initialImage: getCachedImage(RemoteThumbProvider(assetId: key.assetId)),
+    final completer = OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: getCachedImage(RemoteThumbProvider(assetId: assetId)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
     );
+    completer.addOnLastListenerRemovedCallback(cancel);
+    return completer;
   }
 
-  Stream<ImageInfo> _codec(RemoteFullImageProvider key, CacheManager cache, ImageDecoderCallback decode) async* {
-    final codec = await ImageLoader.loadImageFromCache(
-      getPreviewUrlForRemoteId(key.assetId),
-      cache: cache,
-      decode: decode,
-    );
-    yield await codec.getImageInfo();
+  Stream<ImageInfo> _codec(RemoteFullImageProvider key, ImageDecoderCallback decode) async* {
+    try {
+      final request = this.request = RemoteImageRequest(
+        uri: getPreviewUrlForRemoteId(key.assetId),
+        headers: ApiService.getRequestHeaders(),
+      );
+      final image = await request.load(decode);
+      if (image == null) {
+        return;
+      }
+      yield image;
+    } finally {
+      request = null;
+    }
 
     if (AppSetting.get(Setting.loadOriginal)) {
-      final codec = await ImageLoader.loadImageFromCache(
-        getOriginalUrlForRemoteId(key.assetId),
-        cache: cache,
-        decode: decode,
-      );
-      yield await codec.getImageInfo();
+      try {
+        final request = this.request = RemoteImageRequest(
+          uri: getOriginalUrlForRemoteId(key.assetId),
+          headers: ApiService.getRequestHeaders(),
+        );
+        final image = await request.load(decode);
+        if (image != null) {
+          yield image;
+        }
+      } finally {
+        request = null;
+      }
     }
   }
 

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 {
-    final image = thumbHashToRGBA(base64Decode(key.thumbHash));
-    return decode(await ImmutableBuffer.fromUint8List(rgbaToBmp(image)));
+  Stream<ImageInfo> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) async* {
+    final request = this.request = ThumbhashImageRequest(thumbhash: thumbHash);
+    try {
+      final image = await request.load(decode);
+      if (image != null) {
+        yield image;
+      }
+    } finally {
+      this.request = null;
+    }
   }
 
   @override

mobile/lib/presentation/widgets/images/thumbnail.widget.dart

@@ -2,13 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumb_hash_provider.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
 import 'package:immich_mobile/widgets/common/fade_in_placeholder_image.dart';
 import 'package:logging/logging.dart';
 import 'package:octo_image/octo_image.dart';
 
-class Thumbnail extends StatelessWidget {
-  const Thumbnail({this.asset, this.remoteId, this.size = const Size.square(256), this.fit = BoxFit.cover, super.key})
+class Thumbnail extends StatefulWidget {
+  const Thumbnail({this.asset, this.remoteId, this.size = kTimelineFixedTileExtent, this.fit = BoxFit.cover, super.key})
     : assert(asset != null || remoteId != null, 'Either asset or remoteId must be provided');
 
   final BaseAsset? asset;
@@ -16,46 +17,79 @@ class Thumbnail extends StatelessWidget {
   final Size size;
   final BoxFit fit;
 
+  @override
+  createState() => _ThumbnailState();
+}
+
+class _ThumbnailState extends State<Thumbnail> {
+  ImageProvider? provider;
+
+  @override
+  void initState() {
+    provider = getThumbnailImageProvider(asset: widget.asset, remoteId: widget.remoteId);
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant Thumbnail oldWidget) {
+    if (oldWidget.asset == widget.asset && oldWidget.remoteId == widget.remoteId) {
+      return;
+    }
+    if (provider is CancellableImageProvider) {
+      (provider as CancellableImageProvider).cancel();
+    }
+    provider = getThumbnailImageProvider(asset: widget.asset, remoteId: widget.remoteId);
+    super.didUpdateWidget(oldWidget);
+  }
+
   @override
   Widget build(BuildContext context) {
-    final thumbHash = asset is RemoteAsset ? (asset as RemoteAsset).thumbHash : null;
-    final provider = getThumbnailImageProvider(asset: asset, remoteId: remoteId);
+    final thumbHash = widget.asset is RemoteAsset ? (widget.asset as RemoteAsset).thumbHash : null;
 
     return OctoImage.fromSet(
-      image: provider,
+      image: provider!,
       octoSet: OctoSet(
-        placeholderBuilder: _blurHashPlaceholderBuilder(thumbHash, fit: fit),
-        errorBuilder: _blurHashErrorBuilder(thumbHash, provider: provider, fit: fit, asset: asset),
+        placeholderBuilder: _blurHashPlaceholderBuilder(thumbHash),
+        errorBuilder: _blurHashErrorBuilder(thumbHash, provider: provider, asset: widget.asset),
       ),
       fadeOutDuration: const Duration(milliseconds: 100),
       fadeInDuration: Duration.zero,
-      width: size.width,
-      height: size.height,
-      fit: fit,
+      width: widget.size.width,
+      height: widget.size.height,
+      fit: widget.fit,
       placeholderFadeInDuration: Duration.zero,
     );
   }
-}
 
-OctoPlaceholderBuilder _blurHashPlaceholderBuilder(String? thumbHash, {BoxFit? fit}) {
-  return (context) => thumbHash == null
-      ? const ThumbnailPlaceholder()
-      : FadeInPlaceholderImage(
-          placeholder: const ThumbnailPlaceholder(),
-          image: ThumbHashProvider(thumbHash: thumbHash),
-          fit: fit ?? BoxFit.cover,
+  @override
+  void dispose() {
+    if (provider is CancellableImageProvider) {
+      (provider as CancellableImageProvider).cancel();
+    }
+    super.dispose();
+  }
+
+  OctoPlaceholderBuilder _blurHashPlaceholderBuilder(String? thumbHash) {
+    return (context) => thumbHash == null
+        ? const ThumbnailPlaceholder()
+        : FadeInPlaceholderImage(
+            placeholder: const ThumbnailPlaceholder(),
+            image: ThumbHashProvider(thumbHash: thumbHash),
+            fit: widget.fit,
+            width: widget.size.width,
+            height: widget.size.height,
+          );
+  }
+
+  OctoErrorBuilder _blurHashErrorBuilder(String? blurhash, {BaseAsset? asset, ImageProvider? provider}) =>
+      (context, e, s) {
+        Logger("ImThumbnail").warning("Error loading thumbnail for ${asset?.name}", e, s);
+        return Stack(
+          alignment: Alignment.center,
+          children: [
+            _blurHashPlaceholderBuilder(blurhash)(context),
+            const Opacity(opacity: 0.75, child: Icon(Icons.error_outline_rounded)),
+          ],
         );
+      };
 }
-
-OctoErrorBuilder _blurHashErrorBuilder(String? blurhash, {BaseAsset? asset, ImageProvider? provider, BoxFit? fit}) =>
-    (context, e, s) {
-      Logger("ImThumbnail").warning("Error loading thumbnail for ${asset?.name}", e, s);
-      provider?.evict();
-      return Stack(
-        alignment: Alignment.center,
-        children: [
-          _blurHashPlaceholderBuilder(blurhash, fit: fit)(context),
-          const Opacity(opacity: 0.75, child: Icon(Icons.error_outline_rounded)),
-        ],
-      );
-    };

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

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

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

@@ -28,7 +28,7 @@ abstract class SegmentBuilder {
       dimension: size.height,
       spacing: spacing,
       textDirection: Directionality.of(context),
-      children: List.generate(count, (_) => ThumbnailPlaceholder(width: size.width, height: size.height)),
+      children: List.filled(count, const ThumbnailPlaceholder()),
     ),
   );
 }

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

@@ -14,6 +14,7 @@ import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/scroll_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/scrubber.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
@@ -106,7 +107,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   bool _dragging = false;
   TimelineAssetIndex? _dragAnchorIndex;
   final Set<BaseAsset> _draggedAssets = HashSet();
-  ScrollPhysics? _scrollPhysics;
+  ScrollPhysics _scrollPhysics = const ScrollUnawareScrollPhysics();
 
   int _perRow = 4;
   double _scaleFactor = 3.0;
@@ -188,7 +189,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   // Drag selection methods
   void _setDragStartIndex(TimelineAssetIndex index) {
     setState(() {
-      _scrollPhysics = const ClampingScrollPhysics();
+      _scrollPhysics = const ScrollUnawareClampingScrollPhysics();
       _dragAnchorIndex = index;
       _dragging = true;
     });
@@ -198,7 +199,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       // Update the physics post frame to prevent sudden change in physics on iOS.
       setState(() {
-        _scrollPhysics = null;
+        _scrollPhysics = const ScrollUnawareScrollPhysics();
       });
     });
     setState(() {

mobile/lib/providers/infrastructure/platform.provider.dart

@@ -1,4 +1,7 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/platform/native_sync_api.g.dart';
+import 'package:immich_mobile/platform/thumbnail_api.g.dart';
 
 final nativeSyncApiProvider = Provider<NativeSyncApi>((_) => NativeSyncApi());
+
+final thumbnailApi = ThumbnailApi();

mobile/lib/utils/cache/custom_image_cache.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/painting.dart';
 import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumb_hash_provider.dart';
 import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
 import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
 import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
@@ -9,6 +10,7 @@ import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.d
 /// [ImageCache] that uses two caches for small and large images
 /// so that a single large image does not evict all small images
 final class CustomImageCache implements ImageCache {
+  final _thumbhash = ImageCache()..maximumSize = 0;
   final _small = ImageCache();
   final _large = ImageCache()..maximumSize = 5; // Maximum 5 images
 
@@ -39,13 +41,16 @@ final class CustomImageCache implements ImageCache {
   /// Gets the cache for the given key
   /// [_large] is used for [ImmichLocalImageProvider] and [ImmichRemoteImageProvider]
   /// [_small] is used for [ImmichLocalThumbnailProvider] and [ImmichRemoteThumbnailProvider]
-  ImageCache _cacheForKey(Object key) =>
-      (key is ImmichLocalImageProvider ||
-          key is ImmichRemoteImageProvider ||
-          key is LocalFullImageProvider ||
-          key is RemoteFullImageProvider)
-      ? _large
-      : _small;
+  ImageCache _cacheForKey(Object key) {
+    return switch (key) {
+      ImmichLocalImageProvider() ||
+      ImmichRemoteImageProvider() ||
+      LocalFullImageProvider() ||
+      RemoteFullImageProvider() => _large,
+      ThumbHashProvider() => _thumbhash,
+      _ => _small,
+    };
+  }
 
   @override
   bool containsKey(Object key) {

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/lib/widgets/common/fade_in_placeholder_image.dart

@@ -1,30 +1,43 @@
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/widgets/common/transparent_image.dart';
 
 class FadeInPlaceholderImage extends StatelessWidget {
   final Widget placeholder;
   final ImageProvider image;
   final Duration duration;
   final BoxFit fit;
+  final double width;
+  final double height;
 
   const FadeInPlaceholderImage({
     super.key,
     required this.placeholder,
     required this.image,
+    required this.width,
+    required this.height,
     this.duration = const Duration(milliseconds: 100),
     this.fit = BoxFit.cover,
   });
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox.expand(
-      child: Stack(
-        fit: StackFit.expand,
-        children: [
-          placeholder,
-          FadeInImage(fadeInDuration: duration, image: image, fit: fit, placeholder: MemoryImage(kTransparentImage)),
-        ],
-      ),
+    final stopwatch = Stopwatch()..start();
+    return Image(
+      image: image,
+      frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+        if (frame == null) {
+          return AnimatedSwitcher(duration: duration, child: placeholder);
+        }
+
+        stopwatch.stop();
+        if (stopwatch.elapsedMilliseconds < 32) {
+          return child;
+        }
+        return AnimatedSwitcher(duration: duration, child: child);
+      },
+      filterQuality: FilterQuality.low,
+      fit: fit,
+      width: width,
+      height: height,
     );
   }
 }

mobile/lib/widgets/common/immich_thumbnail.dart

@@ -61,7 +61,7 @@ class ImmichThumbnail extends HookConsumerWidget {
     customErrorBuilder(BuildContext ctx, Object error, StackTrace? stackTrace) {
       thumbnailProviderInstance.evict();
 
-      final originalErrorWidgetBuilder = blurHashErrorBuilder(blurhash, fit: fit);
+      final originalErrorWidgetBuilder = blurHashErrorBuilder(blurhash, width: width, height: height, fit: fit);
       return originalErrorWidgetBuilder(ctx, error, stackTrace);
     }
 
@@ -72,7 +72,7 @@ class ImmichThumbnail extends HookConsumerWidget {
         fadeInDuration: Duration.zero,
         fadeOutDuration: const Duration(milliseconds: 100),
         octoSet: OctoSet(
-          placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
+          placeholderBuilder: blurHashPlaceholderBuilder(blurhash, width: width, height: height, fit: fit),
           errorBuilder: customErrorBuilder,
         ),
         image: thumbnailProviderInstance,

mobile/lib/widgets/common/thumbhash_placeholder.dart

@@ -6,25 +6,40 @@ import 'package:octo_image/octo_image.dart';
 
 /// Simple set to show [OctoPlaceholder.circularProgressIndicator] as
 /// placeholder and [OctoError.icon] as error.
-OctoSet blurHashOrPlaceholder(Uint8List? blurhash, {BoxFit? fit, Text? errorMessage}) {
+OctoSet blurHashOrPlaceholder(
+  Uint8List? blurhash, {
+  required double width,
+  required double height,
+  BoxFit? fit,
+  Text? errorMessage,
+}) {
   return OctoSet(
-    placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
-    errorBuilder: blurHashErrorBuilder(blurhash, fit: fit, message: errorMessage),
+    placeholderBuilder: blurHashPlaceholderBuilder(blurhash, width: width, height: height, fit: fit),
+    errorBuilder: blurHashErrorBuilder(blurhash, width: width, height: height, fit: fit, message: errorMessage),
   );
 }
 
-OctoPlaceholderBuilder blurHashPlaceholderBuilder(Uint8List? blurhash, {BoxFit? fit}) {
+OctoPlaceholderBuilder blurHashPlaceholderBuilder(
+  Uint8List? blurhash, {
+  required double width,
+  required double height,
+  BoxFit? fit,
+}) {
   return (context) => blurhash == null
       ? const ThumbnailPlaceholder()
       : FadeInPlaceholderImage(
           placeholder: const ThumbnailPlaceholder(),
           image: MemoryImage(blurhash),
           fit: fit ?? BoxFit.cover,
+          width: width,
+          height: height,
         );
 }
 
 OctoErrorBuilder blurHashErrorBuilder(
   Uint8List? blurhash, {
+  required double width,
+  required double height,
   BoxFit? fit,
   Text? message,
   IconData? icon,
@@ -32,7 +47,7 @@ OctoErrorBuilder blurHashErrorBuilder(
   double? iconSize,
 }) {
   return OctoError.placeholderWithErrorIcon(
-    blurHashPlaceholderBuilder(blurhash, fit: fit),
+    blurHashPlaceholderBuilder(blurhash, width: width, height: width, fit: fit),
     message: message,
     icon: icon,
     iconColor: iconColor,

mobile/lib/widgets/photo_view/src/core/photo_view_core.dart

@@ -421,6 +421,7 @@ class PhotoViewCoreState extends State<PhotoViewCore>
             filterQuality: widget.filterQuality,
             width: scaleBoundaries.childSize.width * scale,
             fit: BoxFit.cover,
+            isAntiAlias: widget.filterQuality == FilterQuality.high,
           );
   }
 }

mobile/makefile

@@ -7,7 +7,9 @@ build:
 
 pigeon:
 	dart run pigeon --input pigeon/native_sync_api.dart
+	dart run pigeon --input pigeon/thumbnail_api.dart
 	dart format lib/platform/native_sync_api.g.dart
+	dart format lib/platform/thumbnail_api.g.dart
 
 watch:
 	dart run build_runner watch --delete-conflicting-outputs

mobile/pigeon/thumbnail_api.dart

@@ -0,0 +1,30 @@
+import 'package:pigeon/pigeon.dart';
+
+@ConfigurePigeon(
+  PigeonOptions(
+    dartOut: 'lib/platform/thumbnail_api.g.dart',
+    swiftOut: 'ios/Runner/Images/Thumbnails.g.swift',
+    swiftOptions: SwiftOptions(includeErrorClass: false),
+    kotlinOut:
+        'android/app/src/main/kotlin/app/alextran/immich/images/Thumbnails.g.kt',
+    kotlinOptions: KotlinOptions(package: 'app.alextran.immich.images'),
+    dartOptions: DartOptions(),
+    dartPackageName: 'immich_mobile',
+  ),
+)
+@HostApi()
+abstract class ThumbnailApi {
+  @async
+  Map<String, int> requestImage(
+    String assetId, {
+    required int requestId,
+    required int width,
+    required int height,
+    required bool isVideo,
+  });
+
+  void cancelImageRequest(int requestId);
+
+  @async
+  Map<String, int> getThumbhash(String thumbhash);
+}

mobile/pubspec.lock

@@ -514,7 +514,7 @@ packages:
     source: hosted
     version: "1.3.3"
   ffi:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: ffi
       sha256: "289279317b4b16eb2bb7e271abccd4bf84ec9bdcbe999e278a94b804f5630418"

mobile/pubspec.yaml

@@ -73,6 +73,7 @@ dependencies:
   wakelock_plus: ^1.2.10
   worker_manager: ^7.2.3
   scroll_date_picker: ^3.8.0
+  ffi: ^2.1.4
 
   native_video_player:
     git: