c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

fix(mobile): Fixes thumbnail size with blur and alignment in video player (#7483)

Browse source 
* Clip the edges of the image filter

* Fixes thumbnail blur effect expanding outside of the image

* Fixes thumbs with video player and delayed loader
This commit is contained in:
martyfuhry 2024-02-28 16:48:59 -05:00 committed by GitHub
parent 93f0a866a3
commit 79442fc8a1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
View file

@ -735,15 +735,22 @@ class GalleryViewerPage extends HookConsumerWidget {
isZoomed.value = state != PhotoViewScaleState.initial; isZoomed.value = state != PhotoViewScaleState.initial;
ref.read(showControlsProvider.notifier).show = !isZoomed.value; ref.read(showControlsProvider.notifier).show = !isZoomed.value;
}, },
loadingBuilder: (context, event, index) => ImageFiltered( loadingBuilder: (context, event, index) => ClipRect(
imageFilter: ui.ImageFilter.blur( child: Stack(
sigmaX: 1, fit: StackFit.expand,
sigmaY: 1, children: [
BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
), ),
child: ImmichThumbnail( ),
ImmichThumbnail(
asset: asset(), asset: asset(),
fit: BoxFit.contain, fit: BoxFit.contain,
), ),
],
),
), ),
pageController: controller, pageController: controller,
scrollPhysics: isZoomed.value scrollPhysics: isZoomed.value
@ -818,7 +825,7 @@ class GalleryViewerPage extends HookConsumerWidget {
isMotionVideo: isPlayingMotionVideo.value, isMotionVideo: isPlayingMotionVideo.value,
placeholder: Image( placeholder: Image(
image: provider, image: provider,
fit: BoxFit.fitWidth, fit: BoxFit.contain,
height: context.height, height: context.height,
width: context.width, width: context.width,
alignment: Alignment.center, alignment: Alignment.center,

10
mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
View file

@ -40,7 +40,7 @@ class VideoViewerPage extends HookWidget {
controlsSafeAreaMinimum: const EdgeInsets.only( controlsSafeAreaMinimum: const EdgeInsets.only(
bottom: 100, bottom: 100,
), ),
placeholder: SizedBox.expand(child: placeholder), placeholder: placeholder,
showControls: showControls && !isMotionVideo, showControls: showControls && !isMotionVideo,
hideControlsTimer: hideControlsTimer, hideControlsTimer: hideControlsTimer,
customControls: const VideoPlayerControls(), customControls: const VideoPlayerControls(),
@ -58,10 +58,14 @@ class VideoViewerPage extends HookWidget {
if (controller == null) { if (controller == null) {
return Stack( return Stack(
children: [ children: [
if (placeholder != null) SizedBox.expand(child: placeholder!), if (placeholder != null) placeholder!,
const DelayedLoadingIndicator( const Positioned.fill(
child: Center(
child: DelayedLoadingIndicator(
fadeInDuration: Duration(milliseconds: 500), fadeInDuration: Duration(milliseconds: 500),
), ),
),
),
], ],
); );
} }

15
mobile/lib/shared/ui/delayed_loading_indicator.dart
View file

@ -20,21 +20,24 @@ class DelayedLoadingIndicator extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AnimatedSwitcher( return FutureBuilder(
duration: fadeInDuration ?? Duration.zero,
child: FutureBuilder(
future: Future.delayed(delay), future: Future.delayed(delay),
builder: (context, snapshot) { builder: (context, snapshot) {
late Widget c;
if (snapshot.connectionState == ConnectionState.done) { if (snapshot.connectionState == ConnectionState.done) {
return child ?? c = child ??
const ImmichLoadingIndicator( const ImmichLoadingIndicator(
key: ValueKey('loading'), key: ValueKey('loading'),
); );
} else {
c = Container(key: const ValueKey('hiding'));
} }
return Container(key: const ValueKey('hiding')); return AnimatedSwitcher(
duration: fadeInDuration ?? Duration.zero,
child: c,
);
}, },
),
); );
} }
} }