Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2026-03-04 08:00:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): asset viewer hero animation (#26545)

Browse Source 
The image in the photo view has no height, and is therefore entirely
unconstrained. This causes the image to take up the full height of the
viewport during the hero animation, which can make look out of sync. In
some other cases, it can stretch or resize the image to fill the entire
viewport.
This commit is contained in:
Thomas 2026-03-03 04:26:53 +00:00 committed by GitHub
parent 4da3d68a67
commit 05010c3a84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
mobile/lib/presentation/widgets/asset_viewer/asset_page.widget.dart
View File

@ -14,7 +14,6 @@ import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_details.wi
import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer.widget.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer_controls.widget.dart';
import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
import 'package:immich_mobile/providers/app_settings.provider.dart';
@ -329,40 +328,40 @@ class _AssetPageState extends ConsumerState<AssetPage> {
);
}
return Stack(
children: [
PhotoView.customChild(
key: Key(displayAsset.heroTag),
onDragStart: _onDragStart,
onDragUpdate: _onDragUpdate,
onDragEnd: _onDragEnd,
onDragCancel: _onDragCancel,
onTapUp: _onTapUp,
heroAttributes: heroAttributes,
basePosition: Alignment.center,
disableScaleGestures: showingDetails,
scaleStateChangedCallback: _onScaleStateChanged,
onPageBuild: _onPageBuild,
enablePanAlways: true,
backgroundDecoration: backgroundDecoration,
child: SizedBox(
width: context.width,
height: context.height,
child: NativeVideoViewer(
key: _NativeVideoViewerKey(displayAsset.heroTag),
asset: displayAsset,
image: Image(
image: getFullImageProvider(displayAsset, size: context.sizeData),
fit: BoxFit.contain,
height: context.height,
width: context.width,
alignment: Alignment.center,
),
),
),
final Size childSize;
if (displayAsset.width != null && displayAsset.height != null) {
final r = displayAsset.width! / displayAsset.height!;
final w = math.min(context.width, context.height * r);
childSize = Size(w, w / r);
} else {
childSize = Size(context.height, context.height);
}
return PhotoView.customChild(
key: Key(displayAsset.heroTag),
childSize: childSize,
filterQuality: FilterQuality.low,
onDragStart: _onDragStart,
onDragUpdate: _onDragUpdate,
onDragEnd: _onDragEnd,
onDragCancel: _onDragCancel,
onTapUp: _onTapUp,
heroAttributes: heroAttributes,
basePosition: Alignment.center,
disableScaleGestures: showingDetails,
scaleStateChangedCallback: _onScaleStateChanged,
onPageBuild: _onPageBuild,
enablePanAlways: true,
backgroundDecoration: backgroundDecoration,
child: NativeVideoViewer(
key: _NativeVideoViewerKey(displayAsset.heroTag),
asset: displayAsset,
image: Image(
image: getFullImageProvider(displayAsset, size: childSize),
fit: BoxFit.contain,
alignment: Alignment.center,
),
const Center(child: VideoViewerControls()),
],
),
);
}

9
mobile/lib/presentation/widgets/asset_viewer/video_viewer.widget.dart
View File

@ -11,6 +11,7 @@ import 'package:immich_mobile/domain/services/setting.service.dart';
import 'package:immich_mobile/entities/store.entity.dart';
import 'package:immich_mobile/extensions/platform_extensions.dart';
import 'package:immich_mobile/infrastructure/repositories/storage.repository.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer_controls.widget.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
import 'package:immich_mobile/providers/app_settings.provider.dart';
import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
@ -393,13 +394,9 @@ class NativeVideoViewer extends HookConsumerWidget {
if (aspectRatio.value != null && !isCasting)
Visibility.maintain(
visible: isVisible.value,
child: Center(
child: AspectRatio(
aspectRatio: aspectRatio.value!,
child: isCurrent ? NativeVideoPlayerView(onViewReady: initController) : null,
),
),
child: NativeVideoPlayerView(onViewReady: initController),
),
const Center(child: VideoViewerControls()),
],
);
}

8
mobile/lib/widgets/photo_view/src/core/photo_view_core.dart
View File

@ -420,7 +420,11 @@ class PhotoViewCoreState extends State<PhotoViewCore>
Widget _buildChild() {
return widget.hasCustomChild
? widget.customChild!
? SizedBox(
width: scaleBoundaries.childSize.width * scale,
height: scaleBoundaries.childSize.height * scale,
child: widget.customChild!,
)
: Image(
key: widget.heroAttributes?.tag != null ? ObjectKey(widget.heroAttributes!.tag) : null,
image: widget.imageProvider!,
@ -428,7 +432,7 @@ class PhotoViewCoreState extends State<PhotoViewCore>
gaplessPlayback: widget.gaplessPlayback ?? false,
filterQuality: widget.filterQuality,
width: scaleBoundaries.childSize.width * scale,
fit: BoxFit.cover,
fit: BoxFit.contain,
isAntiAlias: widget.filterQuality == FilterQuality.high,
);
}