Implement album feature on mobile (#420)

* Refactor sharing to album * Added library page in the bottom navigation bar * Refactor SharedAlbumService to album service * Refactor apiProvider to its file * Added image grid * render album thumbnail * Using the wrap to render thumbnail and album info better * Navigate to album viewer * After deletion, navigate to the respective page of the shared and non-shared album * Correctly remove album in local state * Refactor create album page * Implemented create non-shared album
2025-10-29 17:40:28 +00:00 · 2022-08-03 00:04:34 -05:00
parent 0e85b0fd8f
commit e8d1f89a47
42 changed files with 521 additions and 154 deletions
--- a/mobile/lib/modules/album/ui/album_thumbnail_card.dart
+++ b/mobile/lib/modules/album/ui/album_thumbnail_card.dart
@@ -0,0 +1,77 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class AlbumThumbnailCard extends StatelessWidget {
+  const AlbumThumbnailCard({Key? key, required this.album}) : super(key: key);
+
+  final AlbumResponseDto album;
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+
+    return GestureDetector(
+      onTap: () {
+        AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
+      },
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 32.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(8),
+              child: FadeInImage(
+                width: MediaQuery.of(context).size.width / 2 - 18,
+                height: MediaQuery.of(context).size.width / 2 - 18,
+                fit: BoxFit.cover,
+                placeholder: MemoryImage(kTransparentImage),
+                image: NetworkImage(
+                  '${box.get(serverEndpointKey)}/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG',
+                  headers: {
+                    "Authorization": "Bearer ${box.get(accessTokenKey)}"
+                  },
+                ),
+                fadeInDuration: const Duration(milliseconds: 200),
+                fadeOutDuration: const Duration(milliseconds: 200),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Text(
+                album.albumName,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 12,
+                ),
+              ),
+            ),
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  '${album.assets.length} item${album.assets.length > 1 ? 's' : ''}',
+                  style: const TextStyle(
+                    fontSize: 10,
+                  ),
+                ),
+                if (album.shared)
+                  const Text(
+                    ' · Shared',
+                    style: TextStyle(
+                      fontSize: 10,
+                    ),
+                  )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}