0ct0pu5/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Motion photos use placeholder image for more seamless loading

Browse source
This commit is contained in:
Marty Fuhry 2023-05-01 10:07:21 -04:00
parent 6acfb55dcc
commit 1242754690
No known key found for this signature in database
GPG key ID: E2AB6392D894D900
2 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -373,6 +373,26 @@ class GalleryViewerPage extends HookConsumerWidget {
);
}
ImageProvider imageProvider(Asset asset) {
if (asset.isLocal) {
return localImageProvider(asset);
} else {
if (isLoadOriginal.value) {
return originalImageProvider(asset);
} else if (isLoadPreview.value) {
return remoteThumbnailImageProvider(
asset,
api.ThumbnailFormat.JPEG,
);
} else {
return remoteThumbnailImageProvider(
asset,
api.ThumbnailFormat.WEBP,
);
}
}
}
return Scaffold(
backgroundColor: Colors.black,
body: WillPopScope(
@ -466,26 +486,10 @@ class GalleryViewerPage extends HookConsumerWidget {
: null,
builder: (context, index) {
getAssetExif();
// Create image provider
final ImageProvider provider = imageProvider(assetList[index]);
if (assetList[index].isImage && !isPlayingMotionVideo.value) {
// Show photo
final ImageProvider provider;
if (assetList[index].isLocal) {
provider = localImageProvider(assetList[index]);
} else {
if (isLoadOriginal.value) {
provider = originalImageProvider(assetList[index]);
} else if (isLoadPreview.value) {
provider = remoteThumbnailImageProvider(
assetList[index],
api.ThumbnailFormat.JPEG,
);
} else {
provider = remoteThumbnailImageProvider(
assetList[index],
api.ThumbnailFormat.WEBP,
);
}
}
return PhotoViewGalleryPageOptions(
onDragStart: (_, details, __) =>
localPosition = details.localPosition,
@ -518,18 +522,23 @@ class GalleryViewerPage extends HookConsumerWidget {
maxScale: 1.0,
minScale: 1.0,
basePosition: Alignment.bottomCenter,
child: SafeArea(
child: VideoViewerPage(
onPlaying: () => isPlayingVideo.value = true,
onPaused: () => isPlayingVideo.value = false,
asset: assetList[index],
isMotionVideo: isPlayingMotionVideo.value,
onVideoEnded: () {
if (isPlayingMotionVideo.value) {
isPlayingMotionVideo.value = false;
}
},
child: VideoViewerPage(
onPlaying: () => isPlayingVideo.value = true,
onPaused: () => isPlayingVideo.value = false,
asset: assetList[index],
isMotionVideo: isPlayingMotionVideo.value,
placeholder: Image(
image: provider,
fit: BoxFit.fitWidth,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
),
onVideoEnded: () {
if (isPlayingMotionVideo.value) {
isPlayingMotionVideo.value = false;
}
},
),
);
}

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

@ -15,6 +15,7 @@ import 'package:video_player/video_player.dart';
class VideoViewerPage extends HookConsumerWidget {
final Asset asset;
final bool isMotionVideo;
final Widget? placeholder;
final VoidCallback onVideoEnded;
final VoidCallback? onPlaying;
final VoidCallback? onPaused;
@ -26,6 +27,7 @@ class VideoViewerPage extends HookConsumerWidget {
required this.onVideoEnded,
this.onPlaying,
this.onPaused,
this.placeholder,
}) : super(key: key);
@override
@ -66,6 +68,7 @@ class VideoViewerPage extends HookConsumerWidget {
onVideoEnded: onVideoEnded,
onPaused: onPaused,
onPlaying: onPlaying,
placeholder: placeholder,
),
if (downloadAssetStatus == DownloadAssetStatus.loading)
const Center(
@ -95,6 +98,10 @@ class VideoPlayer extends StatefulWidget {
final Function()? onPlaying;
final Function()? onPaused;
/// The placeholder to show while the video is loading
/// usually, a thumbnail of the video
final Widget? placeholder;
const VideoPlayer({
Key? key,
this.url,
@ -104,6 +111,7 @@ class VideoPlayer extends StatefulWidget {
required this.isMotionVideo,
this.onPlaying,
this.onPaused,
this.placeholder,
}) : super(key: key);
@override
@ -186,12 +194,18 @@ class _VideoPlayerState extends State<VideoPlayer> {
),
);
} else {
return const Center(
child: SizedBox(
width: 75,
height: 75,
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
return SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(
child: Stack(
children: [
if (widget.placeholder != null)
widget.placeholder!,
const Center(
child: ImmichLoadingIndicator(),
),
],
),
),
);