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/asset_viewer.state.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.state.dart
@ -0,0 +1,76 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+class AssetViewerState {
+  final int backgroundOpacity;
+  final bool showingBottomSheet;
+  final bool showingControls;
+
+  const AssetViewerState({
+    this.backgroundOpacity = 255,
+    this.showingBottomSheet = false,
+    this.showingControls = true,
+  });
+
+  AssetViewerState copyWith({
+    int? backgroundOpacity,
+    bool? showingBottomSheet,
+    bool? showingControls,
+  }) {
+    return AssetViewerState(
+      backgroundOpacity: backgroundOpacity ?? this.backgroundOpacity,
+      showingBottomSheet: showingBottomSheet ?? this.showingBottomSheet,
+      showingControls: showingControls ?? this.showingControls,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'AssetViewerState(opacity: $backgroundOpacity, bottomSheet: $showingBottomSheet, controls: $showingControls)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other.runtimeType != runtimeType) return false;
+    return other is AssetViewerState &&
+        other.backgroundOpacity == backgroundOpacity &&
+        other.showingBottomSheet == showingBottomSheet &&
+        other.showingControls == showingControls;
+  }
+
+  @override
+  int get hashCode =>
+      backgroundOpacity.hashCode ^
+      showingBottomSheet.hashCode ^
+      showingControls.hashCode;
+}
+
+class AssetViewerStateNotifier extends AutoDisposeNotifier<AssetViewerState> {
+  @override
+  AssetViewerState build() {
+    return const AssetViewerState();
+  }
+
+  void setOpacity(int opacity) {
+    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,
+    );
+  }
+
+  void toggleControls() {
+    state = state.copyWith(showingControls: !state.showingControls);
+  }
+}
+
+final assetViewerProvider =
+    AutoDisposeNotifierProvider<AssetViewerStateNotifier, AssetViewerState>(
+  AssetViewerStateNotifier.new,
+);