mirror of https://github.com/immich-app/immich.git
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>pull/19499/head
shenlong
GitHub
parent
4a2cf28882
commit
73733370a2
@ -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,
|
||||||
|
);
|
||||||
@ -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),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
import 'package:auto_route/auto_route.dart';
|
||||||
|
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/domain/utils/event_stream.dart';
|
||||||
|
import 'package:immich_mobile/extensions/build_context_extensions.dart';
|
||||||
|
import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
|
||||||
|
import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_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 ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
|
||||||
|
const ViewerTopAppBar({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 isShowingSheet = ref
|
||||||
|
.watch(assetViewerProvider.select((state) => state.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>[
|
||||||
|
if (asset.hasRemote && isOwner && !asset.isFavorite)
|
||||||
|
const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
|
||||||
|
if (asset.hasRemote && isOwner && asset.isFavorite)
|
||||||
|
const UnFavoriteActionButton(
|
||||||
|
source: ActionSource.viewer,
|
||||||
|
menuItem: true,
|
||||||
|
),
|
||||||
|
const _KebabMenu(),
|
||||||
|
];
|
||||||
|
|
||||||
|
return IgnorePointer(
|
||||||
|
ignoring: opacity < 255,
|
||||||
|
child: AnimatedOpacity(
|
||||||
|
opacity: opacity / 255,
|
||||||
|
duration: Durations.short2,
|
||||||
|
child: AppBar(
|
||||||
|
backgroundColor:
|
||||||
|
isShowingSheet ? Colors.transparent : Colors.black.withAlpha(125),
|
||||||
|
leading: const _AppBarBackButton(),
|
||||||
|
iconTheme: const IconThemeData(size: 22, color: Colors.white),
|
||||||
|
actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
|
||||||
|
shape: const Border(),
|
||||||
|
actions: isShowingSheet ? null : actions,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Size get preferredSize => const Size.fromHeight(60.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
class _KebabMenu extends ConsumerWidget {
|
||||||
|
const _KebabMenu();
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
return IconButton(
|
||||||
|
onPressed: () {
|
||||||
|
EventStream.shared.emit(const ViewerOpenBottomSheetEvent());
|
||||||
|
},
|
||||||
|
icon: const Icon(Icons.more_vert_rounded),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AppBarBackButton extends ConsumerWidget {
|
||||||
|
const _AppBarBackButton();
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
final isShowingSheet = ref
|
||||||
|
.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
|
||||||
|
final backgroundColor =
|
||||||
|
isShowingSheet && !context.isDarkTheme ? Colors.white : Colors.black;
|
||||||
|
final foregroundColor =
|
||||||
|
isShowingSheet && !context.isDarkTheme ? Colors.black : Colors.white;
|
||||||
|
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(left: 12.0),
|
||||||
|
child: ElevatedButton(
|
||||||
|
style: ElevatedButton.styleFrom(
|
||||||
|
backgroundColor: backgroundColor,
|
||||||
|
shape: const CircleBorder(),
|
||||||
|
iconSize: 22,
|
||||||
|
iconColor: foregroundColor,
|
||||||
|
padding: EdgeInsets.zero,
|
||||||
|
elevation: isShowingSheet ? 4 : 0,
|
||||||
|
),
|
||||||
|
onPressed: context.maybePop,
|
||||||
|
child: const Icon(Icons.arrow_back_rounded),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,36 +1,48 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
|
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
|
||||||
import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
|
import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
|
||||||
|
|
||||||
final currentAssetNotifier =
|
final currentAssetNotifier =
|
||||||
AutoDisposeNotifierProvider<CurrentAssetNotifier, BaseAsset>(
|
AutoDisposeNotifierProvider<CurrentAssetNotifier, BaseAsset?>(
|
||||||
CurrentAssetNotifier.new,
|
CurrentAssetNotifier.new,
|
||||||
);
|
);
|
||||||
|
|
||||||
class CurrentAssetNotifier extends AutoDisposeNotifier<BaseAsset> {
|
class CurrentAssetNotifier extends AutoDisposeNotifier<BaseAsset?> {
|
||||||
KeepAliveLink? _keepAliveLink;
|
KeepAliveLink? _keepAliveLink;
|
||||||
|
StreamSubscription<BaseAsset?>? _assetSubscription;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
BaseAsset build() {
|
BaseAsset? build() => null;
|
||||||
throw UnimplementedError(
|
|
||||||
'An asset must be set before using the currentAssetProvider.',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
void setAsset(BaseAsset asset) {
|
void setAsset(BaseAsset asset) {
|
||||||
_keepAliveLink?.close();
|
_keepAliveLink?.close();
|
||||||
|
_assetSubscription?.cancel();
|
||||||
state = asset;
|
state = asset;
|
||||||
|
_assetSubscription = ref
|
||||||
|
.watch(assetServiceProvider)
|
||||||
|
.watchAsset(asset)
|
||||||
|
.listen((updatedAsset) {
|
||||||
|
if (updatedAsset != null) {
|
||||||
|
state = updatedAsset;
|
||||||
|
}
|
||||||
|
});
|
||||||
_keepAliveLink = ref.keepAlive();
|
_keepAliveLink = ref.keepAlive();
|
||||||
}
|
}
|
||||||
|
|
||||||
void dispose() {
|
void dispose() {
|
||||||
_keepAliveLink?.close();
|
_keepAliveLink?.close();
|
||||||
|
_assetSubscription?.cancel();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
final currentAssetExifProvider = FutureProvider.autoDispose(
|
final currentAssetExifProvider = FutureProvider.autoDispose(
|
||||||
(ref) {
|
(ref) {
|
||||||
final currentAsset = ref.watch(currentAssetNotifier);
|
final currentAsset = ref.watch(currentAssetNotifier);
|
||||||
|
if (currentAsset == null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
return ref.watch(assetServiceProvider).getExif(currentAsset);
|
return ref.watch(assetServiceProvider).getExif(currentAsset);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue