feat: adds bottom sheet map and actions (#19726)

* reduce timeline rebuilds * feat: adds bottom sheet map and actions (#19692) * adds bottom sheet map and actions * PR feedbacks * only reload the asset viewer if asset is changed * styling tweak --------- Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com> Co-authored-by: Alex <alex.tran1502@gmail.com> * rename singleton and remove event prefix * adds bottom sheet map and actions * PR feedbacks * refactor: use provider for viewer state * feat: adds top and bottom app bar * add safe area to bottom app bar * change app and bottom bar color * viewer - always have black background * use the full width for the bottom sheet on landscape as well * constraint the bottom sheet to not expand all the way * add padding for location details in landscape --------- Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com> Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-08-08 23:07:06 +02:00 · 2025-07-05 00:38:06 +05:30
parent 4a2cf28882
commit 73733370a2
18 changed files with 622 additions and 155 deletions
--- a/mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+class ViewerBottomBar extends ConsumerWidget {
+  const ViewerBottomBar({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final user = ref.watch(currentUserProvider);
+    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
+    final isSheetOpen = ref.watch(
+      assetViewerProvider.select((s) => s.showingBottomSheet),
+    );
+    int opacity = ref.watch(
+      assetViewerProvider.select((state) => state.backgroundOpacity),
+    );
+    final showControls =
+        ref.watch(assetViewerProvider.select((s) => s.showingControls));
+
+    if (!showControls) {
+      opacity = 0;
+    }
+
+    final actions = <Widget>[
+      const ShareActionButton(),
+      const _EditActionButton(),
+      if (asset.hasRemote && isOwner)
+        const ArchiveActionButton(source: ActionSource.viewer),
+    ];
+
+    return IgnorePointer(
+      ignoring: opacity < 255,
+      child: AnimatedOpacity(
+        opacity: opacity / 255,
+        duration: Durations.short2,
+        child: AnimatedSwitcher(
+          duration: Durations.short4,
+          child: isSheetOpen
+              ? const SizedBox.shrink()
+              : SafeArea(
+                  child: Theme(
+                    data: context.themeData.copyWith(
+                      iconTheme:
+                          const IconThemeData(size: 22, color: Colors.white),
+                      textTheme: context.themeData.textTheme.copyWith(
+                        labelLarge:
+                            context.themeData.textTheme.labelLarge?.copyWith(
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                    child: Container(
+                      height: 80,
+                      color: Colors.black.withAlpha(125),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: actions,
+                      ),
+                    ),
+                  ),
+                ),
+        ),
+      ),
+    );
+  }
+}
+
+class _EditActionButton extends ConsumerWidget {
+  const _EditActionButton();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.tune_outlined,
+      label: 'edit'.t(context: context),
+    );
+  }
+}