1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-17 01:06:46 +01:00

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

* 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

View file

@ -735,14 +735,21 @@ 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(
child: ImmichThumbnail( filter: ui.ImageFilter.blur(
asset: asset(), sigmaX: 10,
fit: BoxFit.contain, sigmaY: 10,
),
),
ImmichThumbnail(
asset: asset(),
fit: BoxFit.contain,
),
],
), ),
), ),
pageController: controller, pageController: controller,
@ -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,

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,9 +58,13 @@ 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(
fadeInDuration: Duration(milliseconds: 500), child: Center(
child: DelayedLoadingIndicator(
fadeInDuration: Duration(milliseconds: 500),
),
),
), ),
], ],
); );

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, future: Future.delayed(delay),
child: FutureBuilder( builder: (context, snapshot) {
future: Future.delayed(delay), late Widget c;
builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.connectionState == ConnectionState.done) { c = child ??
return 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,
);
},
); );
} }
} }