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/views/library_page.dart
+++ b/mobile/lib/modules/album/views/library_page.dart
@@ -0,0 +1,116 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class LibraryPage extends HookConsumerWidget {
+  const LibraryPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albums = ref.watch(albumProvider);
+
+    useEffect(
+      () {
+        ref.read(albumProvider.notifier).getAllAlbums();
+        return null;
+      },
+      [],
+    );
+
+    Widget _buildAppBar() {
+      return SliverAppBar(
+        centerTitle: true,
+        floating: true,
+        pinned: false,
+        snap: false,
+        automaticallyImplyLeading: false,
+        title: Text(
+          'IMMICH',
+          style: TextStyle(
+            fontFamily: 'SnowburstOne',
+            fontWeight: FontWeight.bold,
+            fontSize: 22,
+            color: Theme.of(context).primaryColor,
+          ),
+        ),
+      );
+    }
+
+    Widget _buildCreateAlbumButton() {
+      return GestureDetector(
+        onTap: () {
+          AutoRouter.of(context).push(CreateAlbumRoute(isSharedAlbum: false));
+        },
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container(
+              width: MediaQuery.of(context).size.width / 2 - 18,
+              height: MediaQuery.of(context).size.width / 2 - 18,
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: Colors.grey,
+                ),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Center(
+                child: Icon(
+                  Icons.add_rounded,
+                  size: 28,
+                  color: Theme.of(context).primaryColor,
+                ),
+              ),
+            ),
+            const Padding(
+              padding: EdgeInsets.only(top: 8.0),
+              child: Text(
+                "New album",
+                style: TextStyle(
+                  fontSize: 12,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            )
+          ],
+        ),
+      );
+    }
+
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          _buildAppBar(),
+          const SliverToBoxAdapter(
+            child: Padding(
+              padding: EdgeInsets.all(12.0),
+              child: Text(
+                "Albums",
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.only(left: 12.0, right: 12, bottom: 50),
+            sliver: SliverToBoxAdapter(
+              child: Wrap(
+                spacing: 12,
+                children: [
+                  _buildCreateAlbumButton(),
+                  for (var album in albums)
+                    AlbumThumbnailCard(
+                      album: album,
+                    ),
+                ],
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}