ios fixes and improvements

formatting

mobile/android/app/CMakeLists.txt

@@ -0,0 +1,10 @@
+
+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

@@ -2,7 +2,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
@@ -10,7 +11,7 @@ import io.flutter.embedding.android.FlutterFragmentActivity
 import io.flutter.embedding.engine.FlutterEngine
 
 class MainActivity : FlutterFragmentActivity() {
-  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
+  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
     super.configureFlutterEngine(flutterEngine)
     flutterEngine.plugins.add(BackgroundServicePlugin())
     flutterEngine.plugins.add(HttpSSLOptionsPlugin())
@@ -23,5 +24,6 @@ class MainActivity : FlutterFragmentActivity() {
         NativeSyncApiImpl30(this)
       }
     NativeSyncApi.setUp(flutterEngine.dartExecutor.binaryMessenger, nativeSyncApiImpl)
+    ThumbnailApi.setUp(flutterEngine.dartExecutor.binaryMessenger, ThumbnailsImpl(this))
   }
 }

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

@@ -0,0 +1,117 @@
+// 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, callback: (Result<Map<String, Long>>) -> Unit)
+  fun cancelImageRequest(requestId: Long)
+
+  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
+            api.requestImage(assetIdArg, requestIdArg, widthArg, heightArg) { 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)
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,236 @@
+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.HashMap
+import java.util.concurrent.CancellationException
+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 threadPool =
+        Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors() / 2 + 1)
+    private val requestMap = HashMap<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 requestImage(
+        assetId: String,
+        requestId: Long,
+        width: Long,
+        height: Long,
+        callback: (Result<Map<String, Long>>) -> Unit
+    ) {
+        val signal = CancellationSignal()
+        val task = threadPool.submit {
+            try {
+                getThumbnailBufferInternal(assetId, width, height, callback, signal)
+            } catch (e: Exception) {
+                when (e) {
+                    is OperationCanceledException -> callback(CANCELLED)
+                    is CancellationException -> callback(CANCELLED)
+                    else -> callback(Result.failure(e))
+                }
+            } finally {
+                requestMap.remove(requestId)
+            }
+        }
+        requestMap[requestId] = Request(requestId, task, signal, callback)
+    }
+
+    override fun cancelImageRequest(requestId: Long) {
+        val request = requestMap.remove(requestId) ?: return
+        request.taskFuture.cancel(false)
+        request.cancellationSignal.cancel()
+        if (request.taskFuture.isCancelled) {
+            request.callback(CANCELLED)
+        }
+    }
+
+    private fun getThumbnailBufferInternal(
+        assetId: String,
+        width: Long,
+        height: Long,
+        callback: (Result<Map<String, Long>>) -> Unit,
+        signal: CancellationSignal
+    ) {
+        signal.throwIfCanceled()
+        val targetWidth = width.toInt()
+        val targetHeight = height.toInt()
+        val id = assetId.toLong()
+
+        val cursor = resolver.query(URI, PROJECTION, SELECTION, arrayOf(assetId), null)
+            ?: return callback(Result.failure(RuntimeException("Asset not found")))
+
+        signal.throwIfCanceled()
+        cursor.use { c ->
+            if (!c.moveToNext()) {
+                return callback(Result.failure(RuntimeException("Asset not found")))
+            }
+
+            val mediaType = c.getInt(1)
+            val bitmap = when (mediaType) {
+                MEDIA_TYPE_IMAGE -> decodeImage(id, targetWidth, targetHeight, signal)
+                MEDIA_TYPE_VIDEO -> decodeVideoThumbnail(id, targetWidth, targetHeight, signal)
+                else -> return callback(Result.failure(RuntimeException("Unsupported media type")))
+            }
+
+            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)
+            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

@@ -24,6 +24,8 @@
 		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 */; };
+		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 +104,8 @@
 		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>"; };
+		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 */
@@ -243,6 +247,7 @@
 				1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */,
 				74858FAE1ED2DC5600515810 /* AppDelegate.swift */,
 				74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */,
+				FED3B1952E253E9B0030FD97 /* Images */,
 			);
 			path = Runner;
 			sourceTree = "<group>";
@@ -258,6 +263,15 @@
 			path = ShareExtension;
 			sourceTree = "<group>";
 		};
+		FED3B1952E253E9B0030FD97 /* Images */ = {
+			isa = PBXGroup;
+			children = (
+				FED3B1932E253E9B0030FD97 /* Thumbnails.g.swift */,
+				FED3B1942E253E9B0030FD97 /* ThumbnailsImpl.swift */,
+			);
+			path = Images;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -523,6 +537,8 @@
 			files = (
 				65F32F31299BD2F800CE9261 /* BackgroundServicePlugin.swift in Sources */,
 				74858FAF1ED2DC5600515810 /* AppDelegate.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/Thumbnails.g.swift

@@ -0,0 +1,119 @@
+// 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, completion: @escaping (Result<[String: Int64], Error>) -> Void)
+  func cancelImageRequest(requestId: Int64) throws
+}
+
+/// 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
+        api.requestImage(assetId: assetIdArg, requestId: requestIdArg, width: widthArg, height: heightArg) { 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)
+    }
+  }
+}

mobile/ios/Runner/Images/ThumbnailsImpl.swift

@@ -0,0 +1,177 @@
+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 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/ios/ShareExtension/Info.plist

@@ -1,35 +1,35 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-  <dict>
-    <key>AppGroupId</key>
-    <string>$(CUSTOM_GROUP_ID)</string>
-    <key>NSExtension</key>
-    <dict>
-      <key>NSExtensionAttributes</key>
-      <dict>
-        <key>IntentsSupported</key>
-        <array>
-          <string>INSendMessageIntent</string>
-        </array>
-        <key>NSExtensionActivationRule</key>
-        <string>SUBQUERY ( extensionItems, $extensionItem, SUBQUERY ( $extensionItem.attachments,
+<dict>
+	<key>AppGroupId</key>
+	<string>$(CUSTOM_GROUP_ID)</string>
+	<key>NSExtension</key>
+	<dict>
+		<key>NSExtensionAttributes</key>
+		<dict>
+			<key>IntentsSupported</key>
+			<array>
+				<string>INSendMessageIntent</string>
+			</array>
+			<key>NSExtensionActivationRule</key>
+			<string>SUBQUERY ( extensionItems, $extensionItem, SUBQUERY ( $extensionItem.attachments,
           $attachment, ( ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.file-url"
           || ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.image" || ANY
           $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.text" || ANY
           $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.movie" || ANY
           $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.url" ) ).@count &gt; 0
           ).@count &gt; 0 </string>
-        <key>PHSupportedMediaTypes</key>
-        <array>
-          <string>Video</string>
-          <string>Image</string>
-        </array>
-      </dict>
-      <key>NSExtensionMainStoryboard</key>
-      <string>MainInterface</string>
-      <key>NSExtensionPointIdentifier</key>
-      <string>com.apple.share-services</string>
-    </dict>
-  </dict>
-</plist>
+			<key>PHSupportedMediaTypes</key>
+			<array>
+				<string>Video</string>
+				<string>Image</string>
+			</array>
+		</dict>
+		<key>NSExtensionMainStoryboard</key>
+		<string>MainInterface</string>
+		<key>NSExtensionPointIdentifier</key>
+		<string>com.apple.share-services</string>
+	</dict>
+</dict>
+</plist>

mobile/lib/constants/constants.dart

@@ -26,8 +26,9 @@ const String kDownloadGroupLivePhoto = 'group_livephoto';
 
 // Timeline constants
 const int kTimelineNoneSegmentSize = 120;
-const int kTimelineAssetLoadBatchSize = 256;
+const int kTimelineAssetLoadBatchSize = 1024;
 const int kTimelineAssetLoadOppositeSize = 64;
+const int kTimelineImageCacheMemory = 200 * 1024 * 1024;
 
 // Widget keys
 const String appShareGroupId = "group.app.immich.share";

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/infrastructure/repositories/asset_media.repository.dart

@@ -1,18 +1,211 @@
-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/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;
+    return _onCancelled();
+  }
+
+  void _onCancelled();
+}
+
+class LocalImageRequest extends ImageRequest {
+  final String localId;
+  final int width;
+  final int height;
+
+  LocalImageRequest({required this.localId, required ui.Size size})
+    : width = size.width.toInt(),
+      height = size.height.toInt();
+
+  @override
+  Future<ImageInfo?> load(ImageDecoderCallback decode, {double scale = 1.0}) async {
+    if (_isCancelled) {
+      return null;
+    }
+
+    final Map<String, int> info = await thumbnailApi.requestImage(
+      localId,
+      requestId: requestId,
+      width: width,
+      height: height,
+    );
+
+    final address = info['pointer'];
+    if (address == null) {
+      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;
+      }
+
+      final frame = await codec.getNextFrame();
+      return ImageInfo(image: frame.image, scale: scale);
+    } finally {
+      malloc.free(pointer);
+    }
+  }
+
+  @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();
+  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;
+    }
+
+    try {
+      // The DB calls made by the cache manager are a *massive* bottleneck (6+ seconds) with high concurrency.
+      // Since it isn't possible to cancel these operations, we only prefer the cache when they can be avoided.
+      // The DB hit is left as a fallback for offline use.
+      final cachedFileBuffer = await _loadCachedFile(uri, inMemoryOnly: true);
+      if (cachedFileBuffer != null) {
+        return _decodeBuffer(cachedFileBuffer, decode, scale);
+      }
+
+      final buffer = await _downloadImage(uri);
+      if (buffer == null || _isCancelled) {
+        return null;
+      }
+      return await _decodeBuffer(buffer, decode, scale);
+    } catch (e) {
+      if (e is HttpException && (e.message.endsWith('aborted') || e.message.startsWith('Connection closed'))) {
+        return null;
+      }
+      log.severe('Failed to load remote image', e);
+      final buffer = await _loadCachedFile(uri, inMemoryOnly: false);
+      if (buffer != null) {
+        return _decodeBuffer(buffer, decode, scale);
+      }
+      rethrow;
+    } finally {
+      _request = null;
+    }
+  }
+
+  Future<ImmutableBuffer?> _downloadImage(String url) async {
+    final request = _request = await client.getUrl(Uri.parse(url));
+    if (_isCancelled) {
+      return null;
+    }
+
+    final headers = ApiService.getRequestHeaders();
+    for (final entry in headers.entries) {
+      request.headers.set(entry.key, entry.value);
+    }
+    final response = await request.close();
+    if (_isCancelled) {
+      return null;
+    }
+
+    final bytes = await consolidateHttpClientResponseBytes(response);
+    _cacheFile(url, bytes);
+    if (_isCancelled) {
+      return null;
+    }
+    return await ImmutableBuffer.fromUint8List(bytes);
+  }
+
+  Future<void> _cacheFile(String url, Uint8List bytes) async {
+    try {
+      await cacheManager.putFile(url, bytes);
+    } catch (e) {
+      log.severe('Failed to cache image', e);
+    }
+  }
+
+  Future<ImmutableBuffer?> _loadCachedFile(String url, {required bool inMemoryOnly}) async {
+    if (_isCancelled) {
+      return null;
+    }
+    final file = await (inMemoryOnly ? cacheManager.getFileFromMemory(url) : cacheManager.getFileFromCache(url));
+    if (_isCancelled || file == null) {
+      return null;
+    }
+    return await ImmutableBuffer.fromFilePath(file.file.path);
+  }
+
+  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/main.dart

@@ -71,6 +71,8 @@ Future<void> initApp() async {
     }
   }
 
+  PaintingBinding.instance.imageCache.maximumSizeBytes = kTimelineImageCacheMemory;
+
   await DynamicTheme.fetchSystemPalette();
 
   final log = Logger("ImmichErrorLogger");

mobile/lib/pages/backup/drift_upload_detail.page.dart

@@ -224,7 +224,7 @@ class FileDetailDialog extends ConsumerWidget {
                           borderRadius: const BorderRadius.all(Radius.circular(12)),
                         ),
                         child: asset != null
-                            ? Thumbnail(asset: asset, size: const Size(512, 512), fit: BoxFit.cover)
+                            ? Thumbnail.fromBaseAsset(asset: asset, size: const Size(512, 512), fit: BoxFit.cover)
                             : null,
                       ),
                     ),

mobile/lib/platform/thumbnail_api.g.dart

@@ -0,0 +1,107 @@
+// 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,
+  }) 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]);
+    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;
+    }
+  }
+}

mobile/lib/presentation/pages/drift_create_album.page.dart

@@ -119,7 +119,7 @@ class _DriftCreateAlbumPageState extends ConsumerState<DriftCreateAlbumPage> {
           final asset = selectedAssets.elementAt(index);
           return GestureDetector(
             onTap: onBackgroundTapped,
-            child: Thumbnail(asset: asset),
+            child: Thumbnail.fromBaseAsset(asset: asset),
           );
         }, childCount: selectedAssets.length),
       ),

mobile/lib/presentation/pages/drift_place.page.dart

@@ -4,6 +4,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/pages/common/large_leading_tile.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -163,7 +164,11 @@ class _PlaceTile extends StatelessWidget {
       title: Text(place.$1, style: context.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w500)),
       leading: ClipRRect(
         borderRadius: const BorderRadius.all(Radius.circular(20)),
-        child: Thumbnail(size: const Size(80, 80), fit: BoxFit.cover, remoteId: place.$2),
+        child: Thumbnail(
+          imageProvider: RemoteThumbProvider(assetId: place.$2),
+          size: const Size(80, 80),
+          fit: BoxFit.cover,
+        ),
       ),
     );
   }

mobile/lib/presentation/widgets/album/album_selector.widget.dart

@@ -12,6 +12,7 @@ import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/albums/album_search.model.dart';
 import 'package:immich_mobile/pages/common/large_leading_tile.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
@@ -443,7 +444,11 @@ class _AlbumList extends ConsumerWidget {
               leading: album.thumbnailAssetId != null
                   ? ClipRRect(
                       borderRadius: const BorderRadius.all(Radius.circular(15)),
-                      child: SizedBox(width: 80, height: 80, child: Thumbnail(remoteId: album.thumbnailAssetId)),
+                      child: SizedBox(
+                        width: 80,
+                        height: 80,
+                        child: Thumbnail(imageProvider: RemoteThumbProvider(assetId: album.thumbnailAssetId!)),
+                      ),
                     )
                   : SizedBox(
                       width: 80,
@@ -529,7 +534,7 @@ class _GridAlbumCard extends ConsumerWidget {
                 child: SizedBox(
                   width: double.infinity,
                   child: album.thumbnailAssetId != null
-                      ? Thumbnail(remoteId: album.thumbnailAssetId)
+                      ? Thumbnail(imageProvider: RemoteThumbProvider(assetId: album.thumbnailAssetId!))
                       : Container(
                           color: context.colorScheme.surfaceContainerHighest,
                           child: const Icon(Icons.photo_album_rounded, size: 40, color: Colors.grey),

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -113,10 +113,10 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     super.dispose();
   }
 
-  bool get showingBottomSheet => ref.read(assetViewerProvider.select((s) => s.showingBottomSheet));
+  bool get showingBottomSheet => ref.read(assetViewerProvider).showingBottomSheet;
 
   Color get backgroundColor {
-    final opacity = ref.read(assetViewerProvider.select((s) => s.backgroundOpacity));
+    final opacity = ref.read(assetViewerProvider).backgroundOpacity;
     return Colors.black.withAlpha(opacity);
   }
 
@@ -172,9 +172,8 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       // Check if widget is still mounted before proceeding
       if (!mounted) return;
 
-      for (final offset in [-1, 1]) {
-        unawaited(_precacheImage(index + offset));
-      }
+      unawaited(_precacheImage(index - 1));
+      unawaited(_precacheImage(index + 1));
     });
     _delayedOperations.add(timer);
 
@@ -473,12 +472,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     if (stackChildren != null && stackChildren.isNotEmpty) {
       asset = stackChildren.elementAt(ref.read(assetViewerProvider.select((s) => s.stackIndex)));
     }
-    return Container(
-      width: double.infinity,
-      height: double.infinity,
-      color: backgroundColor,
-      child: Thumbnail(asset: asset, fit: BoxFit.contain),
-    );
+    return Thumbnail.fromBaseAsset(asset: asset, fit: BoxFit.contain);
   }
 
   void _onScaleStateChanged(PhotoViewScaleState scaleState) {
@@ -496,7 +490,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     BaseAsset asset = ref.read(timelineServiceProvider).getAsset(index);
     final stackChildren = ref.read(stackChildrenNotifier(asset)).valueOrNull;
     if (stackChildren != null && stackChildren.isNotEmpty) {
-      asset = stackChildren.elementAt(ref.read(assetViewerProvider.select((s) => s.stackIndex)));
+      asset = stackChildren.elementAt(ref.read(assetViewerProvider).stackIndex);
     }
 
     final isPlayingMotionVideo = ref.read(isPlayingMotionVideoProvider);
@@ -515,8 +509,8 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       heroAttributes: PhotoViewHeroAttributes(tag: '${asset.heroTag}_$heroOffset'),
       filterQuality: FilterQuality.high,
       tightMode: true,
-      initialScale: PhotoViewComputedScale.contained * 0.999,
-      minScale: PhotoViewComputedScale.contained * 0.999,
+      initialScale: PhotoViewComputedScale.contained,
+      minScale: PhotoViewComputedScale.contained,
       disableScaleGestures: showingBottomSheet,
       onDragStart: _onDragStart,
       onDragUpdate: _onDragUpdate,
@@ -527,7 +521,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
         width: size.width,
         height: size.height,
         color: backgroundColor,
-        child: Thumbnail(asset: asset, fit: BoxFit.contain),
+        child: Thumbnail.fromBaseAsset(asset: asset, fit: BoxFit.contain),
       ),
     );
   }
@@ -545,9 +539,9 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       onTapDown: _onTapDown,
       heroAttributes: PhotoViewHeroAttributes(tag: '${asset.heroTag}_$heroOffset'),
       filterQuality: FilterQuality.high,
-      initialScale: PhotoViewComputedScale.contained * 0.99,
+      initialScale: PhotoViewComputedScale.contained,
       maxScale: 1.0,
-      minScale: PhotoViewComputedScale.contained * 0.99,
+      minScale: PhotoViewComputedScale.contained,
       basePosition: Alignment.center,
       child: SizedBox(
         width: ctx.width,
@@ -576,9 +570,11 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   Widget build(BuildContext context) {
     // Rebuild the widget when the asset viewer state changes
     // Using multiple selectors to avoid unnecessary rebuilds for other state changes
-    ref.watch(assetViewerProvider.select((s) => s.showingBottomSheet));
-    ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity));
-    ref.watch(assetViewerProvider.select((s) => s.stackIndex));
+    ref.watch(
+      assetViewerProvider.select(
+        (s) => s.showingBottomSheet.hashCode ^ s.backgroundOpacity.hashCode ^ s.stackIndex.hashCode,
+      ),
+    );
     ref.watch(isPlayingMotionVideoProvider);
 
     // Listen for casting changes and send initial asset to the cast provider

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.state.dart

@@ -75,22 +75,34 @@ class AssetViewerStateNotifier extends AutoDisposeNotifier<AssetViewerState> {
   }
 
   void setAsset(BaseAsset? asset) {
-    state = state.copyWith(currentAsset: asset, stackIndex: 0);
+    if (asset != state.currentAsset) {
+      state = state.copyWith(currentAsset: asset, stackIndex: 0);
+    }
   }
 
   void setOpacity(int opacity) {
-    state = state.copyWith(backgroundOpacity: opacity, showingControls: opacity == 255 ? true : state.showingControls);
+    if (opacity != state.backgroundOpacity) {
+      state = state.copyWith(
+        backgroundOpacity: opacity,
+        showingControls: opacity == 255 ? true : state.showingControls,
+      );
+    }
   }
 
   void setBottomSheet(bool showing) {
-    state = state.copyWith(showingBottomSheet: showing, showingControls: showing ? true : state.showingControls);
+    if (showing == state.showingBottomSheet) {
+      return;
+    }
+    state = state.copyWith(showingBottomSheet: showing, showingControls: showing || state.showingControls);
     if (showing) {
       ref.read(videoPlayerControlsProvider.notifier).pause();
     }
   }
 
   void setControls(bool isShowing) {
-    state = state.copyWith(showingControls: isShowing);
+    if (isShowing != state.showingControls) {
+      state = state.copyWith(showingControls: isShowing);
+    }
   }
 
   void toggleControls() {
@@ -98,7 +110,9 @@ class AssetViewerStateNotifier extends AutoDisposeNotifier<AssetViewerState> {
   }
 
   void setStackIndex(int index) {
-    state = state.copyWith(stackIndex: index);
+    if (index != state.stackIndex) {
+      state = state.copyWith(stackIndex: index);
+    }
   }
 }
 

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

@@ -1,7 +1,7 @@
 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/widgets/asset_grid/thumbnail_placeholder.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:octo_image/octo_image.dart';
 
 class FullImage extends StatelessWidget {
@@ -9,7 +9,7 @@ class FullImage extends StatelessWidget {
     this.asset, {
     required this.size,
     this.fit = BoxFit.cover,
-    this.placeholder = const ThumbnailPlaceholder(),
+    this.placeholder = const Thumbnail(),
     super.key,
   });
 

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);
   } 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);
   }
 
   final String assetId;

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

@@ -26,7 +26,7 @@ class LocalAlbumThumbnail extends ConsumerWidget {
 
         return ClipRRect(
           borderRadius: const BorderRadius.all(Radius.circular(16)),
-          child: Thumbnail(asset: data),
+          child: Thumbnail.fromBaseAsset(asset: data),
         );
       },
       error: (error, stack) {

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

@@ -1,37 +1,18 @@
 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;
 
-  const LocalThumbProvider({
-    required this.id,
-    required this.updatedAt,
-    this.size = kThumbnailResolution,
-    this.cacheManager,
-  });
+  LocalThumbProvider({required this.id, this.size = kThumbnailResolution});
 
   @override
   Future<LocalThumbProvider> obtainKey(ImageConfiguration configuration) {
@@ -40,63 +21,45 @@ 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,
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<String>('Id', key.id),
-        DiagnosticsProperty<DateTime>('Updated at', key.updatedAt),
         DiagnosticsProperty<Size>('Size', key.size),
       ],
     );
   }
 
-  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);
+    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
 
-  const LocalFullImageProvider({required this.id, required this.size, required this.type, required this.updatedAt});
+  LocalFullImageProvider({required this.id, required this.size});
 
   @override
   Future<LocalFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -107,98 +70,41 @@ class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: getCachedImage(LocalThumbProvider(id: key.id, updatedAt: key.updatedAt)),
+      initialImage: getCachedImage(LocalThumbProvider(id: key.id)),
       informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Id', key.id),
-        DiagnosticsProperty<DateTime>('Updated at', key.updatedAt),
         DiagnosticsProperty<Size>('Size', key.size),
       ],
     );
   }
 
-  // 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),
+    );
 
-    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,12 +24,8 @@ 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,
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
@@ -39,20 +33,17 @@ class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> {
     );
   }
 
-  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 +60,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 +73,44 @@ 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)),
+      _codec(key, decode),
+      initialImage: getCachedImage(RemoteThumbProvider(assetId: assetId)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
     );
   }
 
-  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,39 +0,0 @@
-import 'dart:convert' hide Codec;
-import 'dart:ui';
-
-import 'package:flutter/foundation.dart';
-import 'package:flutter/rendering.dart';
-import 'package:thumbhash/thumbhash.dart';
-
-class ThumbHashProvider extends ImageProvider<ThumbHashProvider> {
-  final String thumbHash;
-
-  const ThumbHashProvider({required this.thumbHash});
-
-  @override
-  Future<ThumbHashProvider> obtainKey(ImageConfiguration configuration) {
-    return SynchronousFuture(this);
-  }
-
-  @override
-  ImageStreamCompleter loadImage(ThumbHashProvider key, ImageDecoderCallback decode) {
-    return MultiFrameImageStreamCompleter(codec: _loadCodec(key, decode), scale: 1.0);
-  }
-
-  Future<Codec> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) async {
-    final image = thumbHashToRGBA(base64Decode(key.thumbHash));
-    return decode(await ImmutableBuffer.fromUint8List(rgbaToBmp(image)));
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is ThumbHashProvider) {
-      return thumbHash == other.thumbHash;
-    }
-    return false;
-  }
-
-  @override
-  int get hashCode => thumbHash.hashCode;
-}

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

@@ -1,61 +1,372 @@
+import 'dart:async';
+import 'dart:convert';
+import 'dart:ui' as ui;
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.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/widgets/asset_grid/thumbnail_placeholder.dart';
-import 'package:immich_mobile/widgets/common/fade_in_placeholder_image.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:logging/logging.dart';
-import 'package:octo_image/octo_image.dart';
+import 'package:thumbhash/thumbhash.dart' as thumbhash;
 
-class Thumbnail extends StatelessWidget {
-  const Thumbnail({this.asset, this.remoteId, this.size = const Size.square(256), this.fit = BoxFit.cover, super.key})
-    : assert(asset != null || remoteId != null, 'Either asset or remoteId must be provided');
+final log = Logger('ThumbnailWidget');
 
-  final BaseAsset? asset;
-  final String? remoteId;
-  final Size size;
+enum ThumbhashMode { enabled, disabled, only }
+
+class Thumbnail extends StatefulWidget {
+  final ImageProvider? imageProvider;
   final BoxFit fit;
+  final ui.Size size;
+  final String? blurhash;
+  final ThumbhashMode thumbhashMode;
+
+  const Thumbnail({
+    this.imageProvider,
+    this.fit = BoxFit.cover,
+    this.size = kThumbnailResolution,
+    this.blurhash,
+    this.thumbhashMode = ThumbhashMode.enabled,
+    super.key,
+  });
+
+  Thumbnail.fromAsset({
+    required Asset asset,
+    this.fit = BoxFit.cover,
+    this.size = kThumbnailResolution,
+    this.thumbhashMode = ThumbhashMode.enabled,
+    super.key,
+  }) : blurhash = asset.thumbhash,
+       imageProvider = _getImageProviderFromAsset(asset, size);
+
+  Thumbnail.fromBaseAsset({
+    required BaseAsset? asset,
+    this.fit = BoxFit.cover,
+    this.size = kThumbnailResolution,
+    this.thumbhashMode = ThumbhashMode.enabled,
+    super.key,
+  }) : blurhash = switch (asset) {
+         RemoteAsset() => asset.thumbHash,
+         _ => null,
+       },
+       imageProvider = _getImageProviderFromBaseAsset(asset, size);
+
+  static ImageProvider? _getImageProviderFromAsset(Asset asset, ui.Size size) {
+    if (asset.localId != null) {
+      return LocalThumbProvider(id: asset.localId!, size: size);
+    } else if (asset.remoteId != null) {
+      return RemoteThumbProvider(assetId: asset.remoteId!);
+    }
+    return null;
+  }
+
+  static ImageProvider? _getImageProviderFromBaseAsset(BaseAsset? asset, ui.Size size) {
+    switch (asset) {
+      case RemoteAsset():
+        if (asset.localId != null) {
+          return LocalThumbProvider(id: asset.localId!, size: size);
+        } else {
+          return RemoteThumbProvider(assetId: asset.id);
+        }
+      case LocalAsset():
+        return LocalThumbProvider(id: asset.id, size: size);
+      case null:
+        return null;
+    }
+  }
+
+  @override
+  State<Thumbnail> createState() => _ThumbnailState();
+}
+
+class _ThumbnailState extends State<Thumbnail> {
+  ui.Image? _providerImage;
+  ImageStream? _imageStream;
+  ImageStreamListener? _imageStreamListener;
+
+  static final _gradientCache = <ColorScheme, Gradient>{};
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  @override
+  void didUpdateWidget(Thumbnail oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.imageProvider != oldWidget.imageProvider) {
+      return _loadImage();
+    }
+
+    if (_providerImage != null) {
+      return;
+    }
+
+    if ((oldWidget.thumbhashMode == ThumbhashMode.disabled && widget.thumbhashMode != ThumbhashMode.disabled) ||
+        (oldWidget.thumbhashMode == ThumbhashMode.only && widget.thumbhashMode != ThumbhashMode.only) ||
+        (widget.thumbhashMode != ThumbhashMode.disabled && oldWidget.blurhash != widget.blurhash)) {
+      _loadImage();
+    }
+  }
+
+  @override
+  void reassemble() {
+    super.reassemble();
+    _loadImage();
+  }
+
+  void _loadImage() {
+    _stopListeningToStream();
+    if (widget.thumbhashMode != ThumbhashMode.only && widget.imageProvider != null) {
+      _loadFromProvider();
+    }
+
+    if (widget.thumbhashMode != ThumbhashMode.disabled && widget.blurhash != null) {
+      _decodeThumbhash();
+    }
+  }
+
+  void _loadFromProvider() {
+    final imageProvider = widget.imageProvider;
+    if (imageProvider == null) return;
+
+    _imageStream = imageProvider.resolve(ImageConfiguration.empty);
+    _imageStreamListener = ImageStreamListener(
+      (ImageInfo imageInfo, bool synchronousCall) {
+        if (!mounted) return;
+
+        if (_providerImage != imageInfo.image) {
+          setState(() {
+            _providerImage = imageInfo.image;
+          });
+        }
+      },
+      onError: (exception, stackTrace) {
+        log.severe('Error loading image: $exception', exception, stackTrace);
+      },
+    );
+    _imageStream?.addListener(_imageStreamListener!);
+  }
+
+  void _stopListeningToStream() {
+    if (_imageStreamListener != null && _imageStream != null) {
+      _imageStream!.removeListener(_imageStreamListener!);
+    }
+    _imageStream = null;
+    _imageStreamListener = null;
+  }
+
+  Future<void> _decodeThumbhash() async {
+    final blurhash = widget.blurhash;
+    if (blurhash == null || !mounted || _providerImage != null) {
+      return;
+    }
+
+    try {
+      final image = thumbhash.thumbHashToRGBA(base64.decode(blurhash));
+      final buffer = await ImmutableBuffer.fromUint8List(image.rgba);
+      if (!mounted || _providerImage != null) {
+        buffer.dispose();
+        return;
+      }
+
+      final descriptor = ImageDescriptor.raw(
+        buffer,
+        width: image.width,
+        height: image.height,
+        pixelFormat: PixelFormat.rgba8888,
+      );
+
+      final codec = await descriptor.instantiateCodec();
+
+      if (!mounted || _providerImage != null) {
+        buffer.dispose();
+        descriptor.dispose();
+        codec.dispose();
+        return;
+      }
+
+      final frame = (await codec.getNextFrame()).image;
+      buffer.dispose();
+      descriptor.dispose();
+      codec.dispose();
+
+      if (!mounted || _providerImage != null) {
+        frame.dispose();
+        return;
+      }
+
+      setState(() {
+        _providerImage = frame;
+      });
+    } catch (e) {
+      log.severe('Error decoding thumbhash: $e');
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
-    final thumbHash = asset is RemoteAsset ? (asset as RemoteAsset).thumbHash : null;
-    final provider = getThumbnailImageProvider(asset: asset, remoteId: remoteId);
-
-    return OctoImage.fromSet(
-      image: provider,
-      octoSet: OctoSet(
-        placeholderBuilder: _blurHashPlaceholderBuilder(thumbHash, fit: fit),
-        errorBuilder: _blurHashErrorBuilder(thumbHash, provider: provider, fit: fit, asset: asset),
-      ),
-      fadeOutDuration: const Duration(milliseconds: 100),
-      fadeInDuration: Duration.zero,
-      width: size.width,
-      height: size.height,
-      fit: fit,
-      placeholderFadeInDuration: Duration.zero,
+    final colorScheme = context.colorScheme;
+    final gradient = _gradientCache[colorScheme] ??= LinearGradient(
+      colors: [colorScheme.surfaceContainer, colorScheme.surfaceContainer.darken(amount: .1)],
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
     );
+
+    return _ThumbnailLeaf(image: _providerImage, fit: widget.fit, placeholderGradient: gradient);
+  }
+
+  @override
+  void dispose() {
+    _stopListeningToStream();
+    _providerImage?.dispose();
+    final imageProvider = widget.imageProvider;
+    if (imageProvider is CancellableImageProvider) {
+      (imageProvider as CancellableImageProvider).cancel();
+    }
+    super.dispose();
   }
 }
 
-OctoPlaceholderBuilder _blurHashPlaceholderBuilder(String? thumbHash, {BoxFit? fit}) {
-  return (context) => thumbHash == null
-      ? const ThumbnailPlaceholder()
-      : FadeInPlaceholderImage(
-          placeholder: const ThumbnailPlaceholder(),
-          image: ThumbHashProvider(thumbHash: thumbHash),
-          fit: fit ?? BoxFit.cover,
-        );
+class _ThumbnailLeaf extends LeafRenderObjectWidget {
+  final ui.Image? image;
+  final BoxFit fit;
+  final Gradient placeholderGradient;
+
+  const _ThumbnailLeaf({required this.image, required this.fit, required this.placeholderGradient});
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return _ThumbnailRenderBox(image: image, fit: fit, placeholderGradient: placeholderGradient);
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, _ThumbnailRenderBox renderObject) {
+    renderObject.fit = fit;
+    renderObject.image = image;
+    renderObject.placeholderGradient = placeholderGradient;
+  }
 }
 
-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)),
-        ],
+class _ThumbnailRenderBox extends RenderBox {
+  ui.Image? _image;
+  ui.Image? _previousImage;
+  BoxFit _fit;
+  Gradient _placeholderGradient;
+  DateTime _lastImageRequest;
+
+  double _crossFadeProgress = 1.0;
+  static const _fadeDuration = Duration(milliseconds: 100);
+  DateTime? _fadeStartTime;
+
+  @override
+  bool isRepaintBoundary = true;
+
+  _ThumbnailRenderBox({required ui.Image? image, required BoxFit fit, required Gradient placeholderGradient})
+    : _image = image,
+      _fit = fit,
+      _placeholderGradient = placeholderGradient,
+      _lastImageRequest = DateTime.now();
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    final rect = offset & size;
+    final canvas = context.canvas;
+
+    if (_fadeStartTime != null) {
+      final elapsed = DateTime.now().difference(_fadeStartTime!);
+      _crossFadeProgress = (elapsed.inMilliseconds / _fadeDuration.inMilliseconds).clamp(0.0, 1.0);
+
+      if (_crossFadeProgress < 1.0) {
+        SchedulerBinding.instance.scheduleFrameCallback((_) {
+          markNeedsPaint();
+        });
+      } else {
+        _previousImage?.dispose();
+        _previousImage = null;
+        _fadeStartTime = null;
+      }
+    }
+
+    if (_previousImage != null && _crossFadeProgress < 1.0) {
+      paintImage(
+        canvas: canvas,
+        rect: rect,
+        image: _previousImage!,
+        fit: _fit,
+        filterQuality: FilterQuality.low,
+        opacity: 1.0 - _crossFadeProgress,
       );
-    };
+    } else if (_image == null) {
+      final paint = Paint();
+      paint.shader = _placeholderGradient.createShader(rect);
+      canvas.drawRect(rect, paint);
+    }
+
+    if (_image != null) {
+      paintImage(
+        canvas: canvas,
+        rect: rect,
+        image: _image!,
+        fit: _fit,
+        filterQuality: FilterQuality.low,
+        opacity: _crossFadeProgress,
+      );
+    }
+  }
+
+  @override
+  void performLayout() {
+    size = constraints.biggest;
+  }
+
+  set image(ui.Image? value) {
+    if (_image == value) {
+      return;
+    }
+
+    final time = DateTime.now();
+    if (time.difference(_lastImageRequest).inMilliseconds >= 16) {
+      _fadeStartTime = time;
+      _previousImage = _image;
+    }
+    _image = value;
+    _lastImageRequest = time;
+    markNeedsPaint();
+  }
+
+  set fit(BoxFit value) {
+    if (_fit == value) {
+      return;
+    }
+
+    _fit = value;
+    if (_image != null) {
+      markNeedsPaint();
+    }
+  }
+
+  set placeholderGradient(Gradient value) {
+    if (_placeholderGradient == value) {
+      return;
+    }
+
+    _placeholderGradient = value;
+    if (_image == null) {
+      markNeedsPaint();
+    }
+  }
+
+  @override
+  dispose() {
+    _previousImage?.dispose();
+    super.dispose();
+  }
+}

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

@@ -7,13 +7,15 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 
 class ThumbnailTile extends ConsumerWidget {
   const ThumbnailTile(
     this.asset, {
-    this.size = const Size.square(256),
+    this.size = kTimelineFixedTileExtent,
     this.fit = BoxFit.cover,
     this.showStorageIndicator,
     this.lockSelection = false,
@@ -21,7 +23,7 @@ class ThumbnailTile extends ConsumerWidget {
     super.key,
   });
 
-  final BaseAsset asset;
+  final BaseAsset? asset;
   final Size size;
   final BoxFit fit;
   final bool? showStorageIndicator;
@@ -30,6 +32,7 @@ class ThumbnailTile extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final asset = this.asset;
     final heroIndex = heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
 
     final assetContainerColor = context.isDarkTheme
@@ -39,6 +42,7 @@ class ThumbnailTile extends ConsumerWidget {
     final isSelected = ref.watch(
       multiSelectProvider.select((multiselect) => multiselect.selectedAssets.contains(asset)),
     );
+    final isScrubbing = ref.watch(timelineStateProvider.select((state) => state.isScrubbing));
 
     final borderStyle = lockSelection
         ? BoxDecoration(
@@ -52,8 +56,6 @@ class ThumbnailTile extends ConsumerWidget {
           )
         : const BoxDecoration();
 
-    final hasStack = asset is RemoteAsset && (asset as RemoteAsset).stackId != null;
-
     final bool storageIndicator =
         showStorageIndicator ?? ref.watch(settingsProvider.select((s) => s.get(Setting.showStorageIndicator)));
 
@@ -71,19 +73,34 @@ class ThumbnailTile extends ConsumerWidget {
               children: [
                 Positioned.fill(
                   child: Hero(
-                    tag: '${asset.heroTag}_$heroIndex',
-                    child: Thumbnail(asset: asset, fit: fit, size: size),
-                  ),
-                ),
-                if (hasStack)
-                  Align(
-                    alignment: Alignment.topRight,
-                    child: Padding(
-                      padding: EdgeInsets.only(right: 10.0, top: asset.isVideo ? 24.0 : 6.0),
-                      child: const _TileOverlayIcon(Icons.burst_mode_rounded),
+                    tag: '${asset?.heroTag ?? ''}_$heroIndex',
+                    child: Thumbnail.fromBaseAsset(
+                      asset: asset,
+                      thumbhashMode: isScrubbing
+                          ? ThumbhashMode.only
+                          : asset != null && asset.hasLocal
+                          ? ThumbhashMode.disabled
+                          : ThumbhashMode.enabled,
                     ),
                   ),
-                if (asset.isVideo)
+                ),
+                if (asset is RemoteAsset && asset.stackId != null)
+                  asset.isVideo
+                      ? const Align(
+                          alignment: Alignment.topRight,
+                          child: Padding(
+                            padding: EdgeInsets.only(right: 10.0, top: 24.0),
+                            child: _TileOverlayIcon(Icons.burst_mode_rounded),
+                          ),
+                        )
+                      : const Align(
+                          alignment: Alignment.topRight,
+                          child: Padding(
+                            padding: EdgeInsets.only(right: 10.0, top: 6.0),
+                            child: _TileOverlayIcon(Icons.burst_mode_rounded),
+                          ),
+                        ),
+                if (asset != null && asset.isVideo)
                   Align(
                     alignment: Alignment.topRight,
                     child: Padding(
@@ -91,7 +108,7 @@ class ThumbnailTile extends ConsumerWidget {
                       child: _VideoIndicator(asset.duration),
                     ),
                   ),
-                if (storageIndicator)
+                if (storageIndicator && asset != null)
                   switch (asset.storage) {
                     AssetState.local => const Align(
                       alignment: Alignment.bottomRight,
@@ -115,7 +132,7 @@ class ThumbnailTile extends ConsumerWidget {
                       ),
                     ),
                   },
-                if (asset.isFavorite)
+                if (asset != null && asset.isFavorite)
                   const Align(
                     alignment: Alignment.bottomLeft,
                     child: Padding(

mobile/lib/presentation/widgets/memory/memory_card.widget.dart

@@ -7,7 +7,7 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer.widget.dart';
 import 'package:immich_mobile/presentation/widgets/images/full_image.widget.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
-import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 
 class DriftMemoryCard extends StatelessWidget {
   final RemoteAsset asset;
@@ -88,31 +88,26 @@ class _BlurredBackdrop extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final blurhash = useDriftBlurHashRef(asset).value;
+    final blurhash = asset.thumbHash;
     if (blurhash != null) {
       // Use a nice cheap blur hash image decoration
-      return Container(
-        decoration: BoxDecoration(
-          image: DecorationImage(image: MemoryImage(blurhash), fit: BoxFit.cover),
-        ),
-        child: Container(color: Colors.black.withValues(alpha: 0.2)),
-      );
-    } else {
-      // Fall back to using a more expensive image filtered
-      // Since the ImmichImage is already precached, we can
-      // safely use that as the image provider
-      return ImageFiltered(
-        imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
-        child: Container(
-          decoration: BoxDecoration(
-            image: DecorationImage(
-              image: getFullImageProvider(asset, size: Size(context.width, context.height)),
-              fit: BoxFit.cover,
-            ),
-          ),
-          child: Container(color: Colors.black.withValues(alpha: 0.2)),
-        ),
-      );
+      return Thumbnail(blurhash: blurhash);
     }
+
+    // Fall back to using a more expensive image filtered
+    // Since the ImmichImage is already precached, we can
+    // safely use that as the image provider
+    return ImageFiltered(
+      imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: getFullImageProvider(asset, size: Size(context.width, context.height)),
+            fit: BoxFit.cover,
+          ),
+        ),
+        child: const ColoredBox(color: Color.fromRGBO(0, 0, 0, 0.2)),
+      ),
+    );
   }
 }

mobile/lib/presentation/widgets/memory/memory_lane.widget.dart

@@ -58,11 +58,7 @@ class DriftMemoryCard extends ConsumerWidget {
         children: [
           ColorFiltered(
             colorFilter: ColorFilter.mode(Colors.black.withValues(alpha: 0.2), BlendMode.darken),
-            child: SizedBox(
-              width: 205,
-              height: 200,
-              child: Thumbnail(remoteId: memory.assets[0].id, fit: BoxFit.cover),
-            ),
+            child: SizedBox(width: 205, height: 200, child: Thumbnail.fromBaseAsset(asset: memory.assets[0])),
           ),
           Positioned(
             bottom: 16,

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

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

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -4,16 +4,19 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail_tile.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/header.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
-import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart';
-import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline_drag_region.dart';
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
 import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -76,6 +79,21 @@ class FixedSegment extends Segment {
       spacing: spacing,
     );
   }
+
+  const FixedSegment.empty()
+    : this(
+        firstIndex: 0,
+        lastIndex: 0,
+        startOffset: 0,
+        endOffset: 0,
+        firstAssetIndex: 0,
+        bucket: const Bucket(assetCount: 0),
+        tileHeight: 1,
+        columnCount: 0,
+        headerExtent: 0,
+        spacing: 0,
+        header: HeaderType.none,
+      );
 }
 
 class _FixedSegmentRow extends ConsumerWidget {
@@ -93,58 +111,45 @@ class _FixedSegmentRow extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final isScrubbing = ref.watch(timelineStateProvider.select((s) => s.isScrubbing));
     final timelineService = ref.read(timelineServiceProvider);
-
-    if (isScrubbing) {
-      return _buildPlaceholder(context);
+    try {
+      final assets = timelineService.getAssets(assetIndex, assetCount);
+      return _buildAssetRow(context, assets, timelineService);
+    } catch (e) {
+      return FutureBuilder<List<BaseAsset>>(
+        future: timelineService.loadAssets(assetIndex, assetCount),
+        builder: (context, snapshot) {
+          return _buildAssetRow(context, snapshot.data, timelineService);
+        },
+      );
     }
-
-    if (timelineService.hasRange(assetIndex, assetCount)) {
-      return _buildAssetRow(context, timelineService.getAssets(assetIndex, assetCount), timelineService);
-    }
-
-    return FutureBuilder<List<BaseAsset>>(
-      future: timelineService.loadAssets(assetIndex, assetCount),
-      builder: (context, snapshot) {
-        if (snapshot.connectionState != ConnectionState.done) {
-          return _buildPlaceholder(context);
-        }
-        return _buildAssetRow(context, snapshot.requireData, timelineService);
-      },
-    );
   }
 
-  Widget _buildPlaceholder(BuildContext context) {
-    return SegmentBuilder.buildPlaceholder(context, assetCount, size: Size.square(tileHeight), spacing: spacing);
-  }
-
-  Widget _buildAssetRow(BuildContext context, List<BaseAsset> assets, TimelineService timelineService) {
+  Widget _buildAssetRow(BuildContext context, List<BaseAsset>? assets, TimelineService timelineService) {
+    final assetIndex = this.assetIndex;
     return FixedTimelineRow(
       dimension: tileHeight,
       spacing: spacing,
       textDirection: Directionality.of(context),
-      children: [
-        for (int i = 0; i < assets.length; i++)
-          TimelineAssetIndexWrapper(
-            assetIndex: assetIndex + i,
-            segmentIndex: 0, // For simplicity, using 0 for now
-            child: _AssetTileWidget(
-              key: ValueKey(Object.hash(assets[i].heroTag, assetIndex + i, timelineService.hashCode)),
-              asset: assets[i],
-              assetIndex: assetIndex + i,
-            ),
-          ),
-      ],
+      children: List.generate(assetCount, (i) {
+        final curAssetIndex = assetIndex + i;
+        return TimelineAssetIndexWrapper(
+          // this key is intentionally generic to preserve the state of the widget and its subtree
+          key: ValueKey(i.hashCode ^ timelineService.hashCode),
+          assetIndex: curAssetIndex,
+          segmentIndex: 0, // For simplicity, using 0 for now
+          child: _AssetTileWidget(asset: assets?[i], assetIndex: curAssetIndex),
+        );
+      }, growable: false),
     );
   }
 }
 
 class _AssetTileWidget extends ConsumerWidget {
-  final BaseAsset asset;
+  final BaseAsset? asset;
   final int assetIndex;
 
-  const _AssetTileWidget({super.key, required this.asset, required this.assetIndex});
+  const _AssetTileWidget({required this.asset, required this.assetIndex});
 
   Future _handleOnTap(BuildContext ctx, WidgetRef ref, int assetIndex, BaseAsset asset, int? heroOffset) async {
     final multiSelectState = ref.read(multiSelectProvider);
@@ -154,6 +159,12 @@ class _AssetTileWidget extends ConsumerWidget {
     } else {
       await ref.read(timelineServiceProvider).loadAssets(assetIndex, 1);
       ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
+      ref.read(assetViewerProvider.notifier).setAsset(asset);
+      ref.read(currentAssetNotifier.notifier).setAsset(asset);
+      if (asset.isVideo || asset.isMotionPhoto) {
+        ref.read(videoPlaybackValueProvider.notifier).reset();
+        ref.read(videoPlayerControlsProvider.notifier).pause();
+      }
       ctx.pushRoute(
         AssetViewerRoute(
           initialIndex: assetIndex,
@@ -190,17 +201,16 @@ class _AssetTileWidget extends ConsumerWidget {
 
     final lockSelection = _getLockSelectionStatus(ref);
     final showStorageIndicator = ref.watch(timelineArgsProvider.select((args) => args.showStorageIndicator));
+    final asset = this.asset;
 
-    return RepaintBoundary(
-      child: GestureDetector(
-        onTap: () => lockSelection ? null : _handleOnTap(context, ref, assetIndex, asset, heroOffset),
-        onLongPress: () => lockSelection ? null : _handleOnLongPress(ref, asset),
-        child: ThumbnailTile(
-          asset,
-          lockSelection: lockSelection,
-          showStorageIndicator: showStorageIndicator,
-          heroOffset: heroOffset,
-        ),
+    return GestureDetector(
+      onTap: () => lockSelection || asset == null ? null : _handleOnTap(context, ref, assetIndex, asset, heroOffset),
+      onLongPress: () => lockSelection || asset == null ? null : _handleOnLongPress(ref, asset),
+      child: ThumbnailTile(
+        asset,
+        lockSelection: lockSelection,
+        showStorageIndicator: showStorageIndicator,
+        heroOffset: heroOffset,
       ),
     );
   }

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

@@ -1,4 +1,5 @@
 import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/extensions/datetime_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/fixed/segment.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart';
@@ -6,6 +7,7 @@ import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart
 class FixedSegmentBuilder extends SegmentBuilder {
   final double tileHeight;
   final int columnCount;
+  static final DateTime _dummyDate = DateTime.fromMicrosecondsSinceEpoch(0);
 
   const FixedSegmentBuilder({
     required super.buckets,
@@ -16,12 +18,11 @@ class FixedSegmentBuilder extends SegmentBuilder {
   });
 
   List<Segment> generate() {
-    final segments = <Segment>[];
+    final segments = List.filled(buckets.length, const FixedSegment.empty());
     int firstIndex = 0;
     double startOffset = 0;
     int assetIndex = 0;
-    DateTime? previousDate;
-
+    DateTime previousDate = _dummyDate;
     for (int i = 0; i < buckets.length; i++) {
       final bucket = buckets[i];
 
@@ -32,11 +33,10 @@ class FixedSegmentBuilder extends SegmentBuilder {
       final segmentFirstIndex = firstIndex;
       firstIndex += segmentCount;
       final segmentLastIndex = firstIndex - 1;
-
       final timelineHeader = switch (groupBy) {
         GroupAssetsBy.month => HeaderType.month,
         GroupAssetsBy.day || GroupAssetsBy.auto =>
-          bucket is TimeBucket && bucket.date.month != previousDate?.month ? HeaderType.monthAndDay : HeaderType.day,
+          bucket is TimeBucket && !previousDate.isSameMonth(bucket.date) ? HeaderType.monthAndDay : HeaderType.day,
         GroupAssetsBy.none => HeaderType.none,
       };
       final headerExtent = SegmentBuilder.headerExtent(timelineHeader);
@@ -45,20 +45,18 @@ class FixedSegmentBuilder extends SegmentBuilder {
       startOffset += headerExtent + (tileHeight * numberOfRows) + spacing * (numberOfRows - 1);
       final segmentEndOffset = startOffset;
 
-      segments.add(
-        FixedSegment(
-          firstIndex: segmentFirstIndex,
-          lastIndex: segmentLastIndex,
-          startOffset: segmentStartOffset,
-          endOffset: segmentEndOffset,
-          firstAssetIndex: assetIndex,
-          bucket: bucket,
-          tileHeight: tileHeight,
-          columnCount: columnCount,
-          headerExtent: headerExtent,
-          spacing: spacing,
-          header: timelineHeader,
-        ),
+      segments[i] = FixedSegment(
+        firstIndex: segmentFirstIndex,
+        lastIndex: segmentLastIndex,
+        startOffset: segmentStartOffset,
+        endOffset: segmentEndOffset,
+        firstAssetIndex: assetIndex,
+        bucket: bucket,
+        tileHeight: tileHeight,
+        columnCount: columnCount,
+        headerExtent: headerExtent,
+        spacing: spacing,
+        header: timelineHeader,
       );
 
       assetIndex += assetCount;

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

@@ -1,8 +1,5 @@
-import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
-import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
-import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
 
 abstract class SegmentBuilder {
   final List<Bucket> buckets;
@@ -17,18 +14,4 @@ abstract class SegmentBuilder {
     HeaderType.monthAndDay => kTimelineHeaderExtent * 1.6,
     HeaderType.none => 0.0,
   };
-
-  static Widget buildPlaceholder(
-    BuildContext context,
-    int count, {
-    Size size = kTimelineFixedTileExtent,
-    double spacing = kTimelineSpacing,
-  }) => RepaintBoundary(
-    child: FixedTimelineRow(
-      dimension: size.height,
-      spacing: spacing,
-      textDirection: Directionality.of(context),
-      children: List.generate(count, (_) => ThumbnailPlaceholder(width: size.width, height: size.height)),
-    ),
-  );
 }

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/hooks/blurhash_hook.dart

@@ -1,26 +0,0 @@
-import 'dart:convert';
-import 'dart:typed_data';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:thumbhash/thumbhash.dart' as thumbhash;
-
-ObjectRef<Uint8List?> useBlurHashRef(Asset? asset) {
-  if (asset?.thumbhash == null) {
-    return useRef(null);
-  }
-
-  final rbga = thumbhash.thumbHashToRGBA(base64Decode(asset!.thumbhash!));
-
-  return useRef(thumbhash.rgbaToBmp(rbga));
-}
-
-ObjectRef<Uint8List?> useDriftBlurHashRef(RemoteAsset? asset) {
-  if (asset?.thumbHash == null) {
-    return useRef(null);
-  }
-
-  final rbga = thumbhash.thumbHashToRGBA(base64Decode(asset!.thumbHash!));
-
-  return useRef(thumbhash.rgbaToBmp(rbga));
-}

mobile/lib/widgets/common/fade_in_placeholder_image.dart

@@ -1,30 +0,0 @@
-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;
-
-  const FadeInPlaceholderImage({
-    super.key,
-    required this.placeholder,
-    required this.image,
-    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)),
-        ],
-      ),
-    );
-  }
-}

mobile/lib/widgets/common/immich_app_bar.dart

@@ -40,9 +40,12 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
             showDialog(context: context, useRootNavigator: false, builder: (ctx) => const ImmichAppBarDialog()),
         borderRadius: const BorderRadius.all(Radius.circular(12)),
         child: Badge(
-          label: Container(
-            decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(widgetSize / 2)),
-            child: const Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: widgetSize / 2),
+          label: const DecoratedBox(
+            decoration: BoxDecoration(
+              color: Colors.black,
+              borderRadius: BorderRadius.all(Radius.circular(widgetSize / 2)),
+            ),
+            child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: widgetSize / 2),
           ),
           backgroundColor: Colors.transparent,
           alignment: Alignment.bottomRight,

mobile/lib/widgets/common/immich_image.dart

@@ -3,9 +3,9 @@ import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
 import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
-import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
 import 'package:octo_image/octo_image.dart';
 
 class ImmichImage extends StatelessWidget {
@@ -14,7 +14,7 @@ class ImmichImage extends StatelessWidget {
     this.width,
     this.height,
     this.fit = BoxFit.cover,
-    this.placeholder = const ThumbnailPlaceholder(),
+    this.placeholder = const Thumbnail(),
     super.key,
   });
 

mobile/lib/widgets/common/immich_thumbnail.dart

@@ -1,11 +1,8 @@
-import 'dart:typed_data';
-
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
 import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
 import 'package:immich_mobile/utils/thumbnail_utils.dart';
 import 'package:immich_mobile/widgets/common/immich_image.dart';
 import 'package:immich_mobile/widgets/common/thumbhash_placeholder.dart';
@@ -42,7 +39,6 @@ class ImmichThumbnail extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    Uint8List? blurhash = useBlurHashRef(asset).value;
     final userId = ref.watch(currentUserProvider)?.id;
 
     if (asset == null) {
@@ -54,14 +50,14 @@ class ImmichThumbnail extends HookConsumerWidget {
       );
     }
 
-    final assetAltText = getAltText(asset!.exifInfo, asset!.fileCreatedAt, asset!.type, []);
+    final assetAltText = getAltText(asset!.exifInfo, asset!.fileCreatedAt, asset!.type, const []);
 
     final thumbnailProviderInstance = ImmichThumbnail.imageProvider(asset: asset, userId: userId);
 
     customErrorBuilder(BuildContext ctx, Object error, StackTrace? stackTrace) {
       thumbnailProviderInstance.evict();
 
-      final originalErrorWidgetBuilder = blurHashErrorBuilder(blurhash, fit: fit);
+      final originalErrorWidgetBuilder = blurHashErrorBuilder(asset?.thumbhash, fit: fit);
       return originalErrorWidgetBuilder(ctx, error, stackTrace);
     }
 
@@ -72,7 +68,7 @@ class ImmichThumbnail extends HookConsumerWidget {
         fadeInDuration: Duration.zero,
         fadeOutDuration: const Duration(milliseconds: 100),
         octoSet: OctoSet(
-          placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
+          placeholderBuilder: blurHashPlaceholderBuilder(asset?.thumbhash, fit: fit),
           errorBuilder: customErrorBuilder,
         ),
         image: thumbnailProviderInstance,

mobile/lib/widgets/common/thumbhash_placeholder.dart

@@ -1,31 +1,14 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
-import 'package:immich_mobile/widgets/common/fade_in_placeholder_image.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 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}) {
-  return OctoSet(
-    placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
-    errorBuilder: blurHashErrorBuilder(blurhash, fit: fit, message: errorMessage),
-  );
-}
-
-OctoPlaceholderBuilder blurHashPlaceholderBuilder(Uint8List? blurhash, {BoxFit? fit}) {
-  return (context) => blurhash == null
-      ? const ThumbnailPlaceholder()
-      : FadeInPlaceholderImage(
-          placeholder: const ThumbnailPlaceholder(),
-          image: MemoryImage(blurhash),
-          fit: fit ?? BoxFit.cover,
-        );
+OctoPlaceholderBuilder blurHashPlaceholderBuilder(String? blurhash, {required BoxFit fit}) {
+  return (context) => Thumbnail(blurhash: blurhash, fit: fit);
 }
 
 OctoErrorBuilder blurHashErrorBuilder(
-  Uint8List? blurhash, {
-  BoxFit? fit,
+  String? blurhash, {
+  BoxFit fit = BoxFit.cover,
   Text? message,
   IconData? icon,
   Color? iconColor,

mobile/lib/widgets/memories/memory_card.dart

@@ -5,7 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/pages/common/native_video_viewer.page.dart';
-import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/widgets/common/immich_image.dart';
 
 class MemoryCard extends StatelessWidget {
@@ -87,31 +87,26 @@ class _BlurredBackdrop extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final blurhash = useBlurHashRef(asset).value;
+    final blurhash = asset.thumbhash;
     if (blurhash != null) {
       // Use a nice cheap blur hash image decoration
-      return Container(
-        decoration: BoxDecoration(
-          image: DecorationImage(image: MemoryImage(blurhash), fit: BoxFit.cover),
-        ),
-        child: Container(color: Colors.black.withValues(alpha: 0.2)),
-      );
-    } else {
-      // Fall back to using a more expensive image filtered
-      // Since the ImmichImage is already precached, we can
-      // safely use that as the image provider
-      return ImageFiltered(
-        imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
-        child: Container(
-          decoration: BoxDecoration(
-            image: DecorationImage(
-              image: ImmichImage.imageProvider(asset: asset, height: context.height, width: context.width),
-              fit: BoxFit.cover,
-            ),
-          ),
-          child: Container(color: Colors.black.withValues(alpha: 0.2)),
-        ),
-      );
+      return Thumbnail(blurhash: blurhash, fit: BoxFit.cover);
     }
+
+    // Fall back to using a more expensive image filtered
+    // Since the ImmichImage is already precached, we can
+    // safely use that as the image provider
+    return ImageFiltered(
+      imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: ImmichImage.imageProvider(asset: asset, height: context.height, width: context.width),
+            fit: BoxFit.cover,
+          ),
+        ),
+        child: const ColoredBox(color: Color.fromRGBO(0, 0, 0, 0.2)),
+      ),
+    );
   }
 }

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,21 @@
+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});
+
+  void cancelImageRequest(int requestId);
+}

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: