feat(mobile): show local assets (#905)

* introduce Asset as composition of AssetResponseDTO and AssetEntity * filter out duplicate assets (that are both local and remote, take only remote for now) * only allow remote images to be added to albums * introduce ImmichImage to render Asset using local or remote data * optimized deletion of local assets * local video file playback * allow multiple methods to wait on background service finished * skip local assets when adding to album from home screen * fix and optimize delete * show gray box placeholder for local assets * add comments * fix bug: duplicate assets in state after onNewAssetUploaded
2025-10-29 17:40:28 +00:00 · 2022-11-08 18:00:24 +01:00
parent 99da181cfc
commit 1633af7af6
41 changed files with 830 additions and 514 deletions
--- a/mobile/lib/modules/home/ui/asset_grid/asset_grid_data_structure.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/asset_grid_data_structure.dart
@@ -1,6 +1,6 @@
 import 'dart:math';

-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';

 enum RenderAssetGridElementType {
  assetRow,
@@ -9,7 +9,7 @@ enum RenderAssetGridElementType {
 }

 class RenderAssetGridRow {
-  final List<AssetResponseDto> assets;
+  final List<Asset> assets;

  RenderAssetGridRow(this.assets);
 }
@@ -19,7 +19,7 @@ class RenderAssetGridElement {
  final RenderAssetGridRow? assetRow;
  final String? title;
  final DateTime date;
-  final List<AssetResponseDto>? relatedAssetList;
+  final List<Asset>? relatedAssetList;

  RenderAssetGridElement(
    this.type, {
@@ -31,13 +31,15 @@ class RenderAssetGridElement {
 }

 List<RenderAssetGridElement> assetsToRenderList(
-    List<AssetResponseDto> assets, int assetsPerRow) {
+  List<Asset> assets,
+  int assetsPerRow,
+) {
  List<RenderAssetGridElement> elements = [];

  int cursor = 0;
  while (cursor < assets.length) {
    int rowElements = min(assets.length - cursor, assetsPerRow);
-    final date = DateTime.parse(assets[cursor].createdAt);
+    final date = assets[cursor].createdAt;

    final rowElement = RenderAssetGridElement(
      RenderAssetGridElementType.assetRow,
@@ -55,7 +57,9 @@ List<RenderAssetGridElement> assetsToRenderList(
 }

 List<RenderAssetGridElement> assetGroupsToRenderList(
-    Map<String, List<AssetResponseDto>> assetGroups, int assetsPerRow) {
+  Map<String, List<Asset>> assetGroups,
+  int assetsPerRow,
+) {
  List<RenderAssetGridElement> elements = [];
  DateTime? lastDate;

@@ -64,8 +68,11 @@ List<RenderAssetGridElement> assetGroupsToRenderList(

    if (lastDate == null || lastDate!.month != date.month) {
      elements.add(
-        RenderAssetGridElement(RenderAssetGridElementType.monthTitle,
-            title: groupName, date: date),
+        RenderAssetGridElement(
+          RenderAssetGridElementType.monthTitle,
+          title: groupName,
+          date: date,
+        ),
      );
    }

--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
@@ -4,7 +4,7 @@ import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_image.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'asset_grid_data_structure.dart';
 import 'daily_title_text.dart';
@@ -13,7 +13,7 @@ import 'draggable_scrollbar_custom.dart';

 typedef ImmichAssetGridSelectionListener = void Function(
  bool,
-  Set<AssetResponseDto>,
+  Set<Asset>,
 );

 class ImmichAssetGridState extends State<ImmichAssetGrid> {
@@ -24,20 +24,20 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
  bool _scrolling = false;
  final Set<String> _selectedAssets = HashSet();

-  List<AssetResponseDto> get _assets {
+  List<Asset> get _assets {
    return widget.renderList
        .map((e) {
          if (e.type == RenderAssetGridElementType.assetRow) {
            return e.assetRow!.assets;
          } else {
-            return List<AssetResponseDto>.empty();
+            return List<Asset>.empty();
          }
        })
        .flattened
        .toList();
  }

-  Set<AssetResponseDto> _getSelectedAssets() {
+  Set<Asset> _getSelectedAssets() {
    return _selectedAssets
        .map((e) => _assets.firstWhereOrNull((a) => a.id == e))
        .whereNotNull()
@@ -48,7 +48,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
    widget.listener?.call(selectionActive, _getSelectedAssets());
  }

-  void _selectAssets(List<AssetResponseDto> assets) {
+  void _selectAssets(List<Asset> assets) {
    setState(() {
      for (var e in assets) {
        _selectedAssets.add(e.id);
@@ -57,7 +57,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
    });
  }

-  void _deselectAssets(List<AssetResponseDto> assets) {
+  void _deselectAssets(List<Asset> assets) {
    setState(() {
      for (var e in assets) {
        _selectedAssets.remove(e.id);
@@ -74,7 +74,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
    _callSelectionListener(false);
  }

-  bool _allAssetsSelected(List<AssetResponseDto> assets) {
+  bool _allAssetsSelected(List<Asset> assets) {
    return widget.selectionActive &&
        assets.firstWhereOrNull((e) => !_selectedAssets.contains(e.id)) == null;
  }
@@ -85,7 +85,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
  }

  Widget _buildThumbnailOrPlaceholder(
-    AssetResponseDto asset,
+    Asset asset,
    bool placeholder,
  ) {
    if (placeholder) {
@@ -114,7 +114,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {

    return Row(
      key: Key("asset-row-${row.assets.first.id}"),
-      children: row.assets.map((AssetResponseDto asset) {
+      children: row.assets.map((Asset asset) {
        bool last = asset == row.assets.last;

        return Container(
@@ -134,7 +134,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
  Widget _buildTitle(
    BuildContext context,
    String title,
-    List<AssetResponseDto> assets,
+    List<Asset> assets,
  ) {
    return DailyTitleText(
      isoDate: title,
--- a/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
@@ -1,18 +1,15 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';

 class ThumbnailImage extends HookConsumerWidget {
-  final AssetResponseDto asset;
-  final List<AssetResponseDto> assetList;
+  final Asset asset;
+  final List<Asset> assetList;
  final bool showStorageIndicator;
  final bool useGrayBoxPlaceholder;
  final bool isSelected;
@@ -34,12 +31,9 @@ class ThumbnailImage extends HookConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl = getThumbnailUrl(asset);
    var deviceId = ref.watch(authenticationProvider).deviceId;

-
-    Widget buildSelectionIcon(AssetResponseDto asset) {
+    Widget buildSelectionIcon(Asset asset) {
      if (isSelected) {
        return Icon(
          Icons.check_circle,
@@ -87,41 +81,11 @@ class ThumbnailImage extends HookConsumerWidget {
                      )
                    : const Border(),
              ),
-              child: CachedNetworkImage(
-                cacheKey: 'thumbnail-image-${asset.id}',
+              child: ImmichImage(
+                asset,
                width: 300,
                height: 300,
-                memCacheHeight: 200,
-                maxWidthDiskCache: 200,
-                maxHeightDiskCache: 200,
-                fit: BoxFit.cover,
-                imageUrl: thumbnailRequestUrl,
-                httpHeaders: {
-                  "Authorization": "Bearer ${box.get(accessTokenKey)}"
-                },
-                fadeInDuration: const Duration(milliseconds: 250),
-                progressIndicatorBuilder: (context, url, downloadProgress) {
-                  if (useGrayBoxPlaceholder) {
-                    return const DecoratedBox(
-                      decoration: BoxDecoration(color: Colors.grey),
-                    );
-                  }
-                  return Transform.scale(
-                    scale: 0.2,
-                    child: CircularProgressIndicator(
-                      value: downloadProgress.progress,
-                    ),
-                  );
-                },
-                errorWidget: (context, url, error) {
-                  debugPrint("Error getting thumbnail $url = $error");
-                  CachedNetworkImage.evictFromCache(thumbnailRequestUrl);
-
-                  return Icon(
-                    Icons.image_not_supported_outlined,
-                    color: Theme.of(context).primaryColor,
-                  );
-                },
+                useGrayBoxPlaceholder: useGrayBoxPlaceholder,
              ),
            ),
            if (multiselectEnabled)
@@ -137,14 +101,16 @@ class ThumbnailImage extends HookConsumerWidget {
                right: 10,
                bottom: 5,
                child: Icon(
-                  (deviceId != asset.deviceId)
-                      ? Icons.cloud_done_outlined
-                      : Icons.photo_library_rounded,
+                  asset.isRemote
+                      ? (deviceId == asset.deviceId
+                          ? Icons.cloud_done_outlined
+                          : Icons.cloud_outlined)
+                      : Icons.cloud_off_outlined,
                  color: Colors.white,
                  size: 18,
                ),
              ),
-            if (asset.type != AssetTypeEnum.IMAGE)
+            if (!asset.isImage)
              Positioned(
                top: 5,
                right: 5,