superrob1500
/
mirror-immich
mirror of https://github.com/immich-app/immich
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: indicators popping in due to z height change of hero animation (fade in instead after animation)

pull/24485/head
goalie2002 2025-12-08 21:31:47 -08:00
parent 0dace87ba6
commit 392a5cc2ed
3 changed files with 110 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart
View File

@ -619,6 +619,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
}
void _onPop<T>(bool didPop, T? result) {
ref.read(currentAssetNotifier.notifier).clearAsset(); // clear current asset
ref.read(currentAssetNotifier.notifier).dispose();
}

131
mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart
View File

@ -10,6 +10,66 @@ import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart'
import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
class _DelayedAnimation extends StatefulWidget {
final Widget child;
final bool show;
final Duration showDelay = const Duration(milliseconds: 300);
final Duration hideDelay = const Duration(milliseconds: 0);
final Duration showDuration = const Duration(milliseconds: 200);
final Duration hideDuration = const Duration(milliseconds: 100);
const _DelayedAnimation({required this.child, required this.show});
@override
State<_DelayedAnimation> createState() => _DelayedAnimationState();
}
class _DelayedAnimationState extends State<_DelayedAnimation> {
bool _show = false;
Duration _currentDuration = const Duration(milliseconds: 200);
@override
void initState() {
super.initState();
// If starting with show=true, show immediately (no delay on initial render)
if (widget.show) {
_show = true;
_currentDuration = const Duration(milliseconds: 200);
}
}
@override
void didUpdateWidget(_DelayedAnimation oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.show && !oldWidget.show) {
// Showing: use show duration and delay
setState(() => _currentDuration = widget.showDuration);
Future.delayed(widget.showDelay, () {
if (mounted) {
setState(() => _show = true);
}
});
} else if (!widget.show && oldWidget.show) {
// Hiding: use hide duration and no delay
setState(() {
_currentDuration = widget.hideDuration;
Future.delayed(widget.hideDelay, () {
if (mounted) {
setState(() => _show = false);
}
});
});
}
}
@override
Widget build(BuildContext context) {
return AnimatedOpacity(duration: _currentDuration, opacity: widget.show && _show ? 1.0 : 0.0, child: widget.child);
}
}
class ThumbnailTile extends ConsumerWidget {
const ThumbnailTile(
@ -28,13 +88,13 @@ class ThumbnailTile extends ConsumerWidget {
final bool showStorageIndicator;
final bool lockSelection;
final int? heroOffset;
final bool enablePlaceholder = false;
final bool showIndicators = false;
@override
Widget build(BuildContext context, WidgetRef ref) {
final asset = this.asset;
final heroIndex = heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
final currentAsset = ref.watch(currentAssetNotifier);
final showIndicators = asset == null || asset != currentAsset;
final assetContainerColor = context.isDarkTheme
? context.primaryColor.darken(amount: 0.4)
@ -76,40 +136,51 @@ class ThumbnailTile extends ConsumerWidget {
),
),
if (asset != null)
Align(
alignment: Alignment.topRight,
child: _AssetTypeIcons(asset: asset),
_DelayedAnimation(
show: showIndicators,
child: Align(
alignment: Alignment.topRight,
child: _AssetTypeIcons(asset: asset),
),
),
if (storageIndicator && asset != null)
switch (asset.storage) {
AssetState.local => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_off_outlined),
_DelayedAnimation(
show: showIndicators,
child: switch (asset.storage) {
AssetState.local => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_off_outlined),
),
),
),
AssetState.remote => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_outlined),
AssetState.remote => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_outlined),
),
),
),
AssetState.merged => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_done_outlined),
AssetState.merged => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_done_outlined),
),
),
),
},
},
),
if (asset != null && asset.isFavorite)
const Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.favorite_rounded),
_DelayedAnimation(
show: showIndicators,
child: const Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.favorite_rounded),
),
),
),
],

8
mobile/lib/providers/infrastructure/asset_viewer/current_asset.provider.dart
View File

@ -25,6 +25,14 @@ class CurrentAssetNotifier extends AutoDisposeNotifier<BaseAsset?> {
_keepAliveLink = ref.keepAlive();
}
void clearAsset() {
_keepAliveLink?.close();
_assetSubscription?.cancel();
_keepAliveLink = null;
_assetSubscription = null;
state = null;
}
void dispose() {
_keepAliveLink?.close();
_assetSubscription?.cancel();