2022-06-20 20:29:42 +02:00
|
|
|
import 'package:cached_network_image/cached_network_image.dart';
|
|
|
|
import 'package:flutter/material.dart';
|
2022-11-08 19:00:24 +02:00
|
|
|
import 'package:immich_mobile/shared/models/asset.dart';
|
|
|
|
import 'package:immich_mobile/utils/image_url_builder.dart';
|
|
|
|
import 'package:openapi/api.dart';
|
|
|
|
import 'package:photo_manager/photo_manager.dart'
|
|
|
|
show AssetEntityImageProvider, ThumbnailSize;
|
2022-06-20 20:29:42 +02:00
|
|
|
import 'package:photo_view/photo_view.dart';
|
|
|
|
|
2022-08-08 02:43:09 +02:00
|
|
|
enum _RemoteImageStatus { empty, thumbnail, preview, full }
|
2022-06-20 20:29:42 +02:00
|
|
|
|
|
|
|
class _RemotePhotoViewState extends State<RemotePhotoView> {
|
2022-11-08 19:00:24 +02:00
|
|
|
late ImageProvider _imageProvider;
|
2022-06-20 20:29:42 +02:00
|
|
|
_RemoteImageStatus _status = _RemoteImageStatus.empty;
|
|
|
|
bool _zoomedIn = false;
|
|
|
|
|
2022-11-08 19:00:24 +02:00
|
|
|
late ImageProvider _fullProvider;
|
|
|
|
late ImageProvider _previewProvider;
|
|
|
|
late ImageProvider _thumbnailProvider;
|
2022-06-20 20:29:42 +02:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2022-12-04 05:59:39 +02:00
|
|
|
final bool forbidZoom = _status == _RemoteImageStatus.thumbnail;
|
2022-08-08 02:43:09 +02:00
|
|
|
|
|
|
|
return IgnorePointer(
|
2022-12-04 05:59:39 +02:00
|
|
|
ignoring: forbidZoom,
|
2022-11-06 05:59:06 +02:00
|
|
|
child: Listener(
|
|
|
|
onPointerMove: handleSwipUpDown,
|
|
|
|
child: PhotoView(
|
|
|
|
imageProvider: _imageProvider,
|
|
|
|
minScale: PhotoViewComputedScale.contained,
|
|
|
|
enablePanAlways: false,
|
|
|
|
scaleStateChangedCallback: _scaleStateChanged,
|
|
|
|
),
|
2022-08-08 02:43:09 +02:00
|
|
|
),
|
2022-07-13 14:23:48 +02:00
|
|
|
);
|
2022-06-20 20:29:42 +02:00
|
|
|
}
|
|
|
|
|
2022-11-06 05:59:06 +02:00
|
|
|
void handleSwipUpDown(PointerMoveEvent details) {
|
2022-11-19 07:12:54 +02:00
|
|
|
int sensitivity = 15;
|
2022-11-06 05:59:06 +02:00
|
|
|
|
2022-08-03 22:36:12 +02:00
|
|
|
if (_zoomedIn) {
|
|
|
|
return;
|
|
|
|
}
|
2022-11-06 05:59:06 +02:00
|
|
|
|
|
|
|
if (details.delta.dy > sensitivity) {
|
2022-06-20 20:29:42 +02:00
|
|
|
widget.onSwipeDown();
|
2022-11-06 05:59:06 +02:00
|
|
|
} else if (details.delta.dy < -sensitivity) {
|
2022-06-20 20:29:42 +02:00
|
|
|
widget.onSwipeUp();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
void _scaleStateChanged(PhotoViewScaleState state) {
|
2022-08-03 22:36:12 +02:00
|
|
|
_zoomedIn = state != PhotoViewScaleState.initial;
|
|
|
|
if (_zoomedIn) {
|
|
|
|
widget.isZoomedListener.value = true;
|
|
|
|
} else {
|
|
|
|
widget.isZoomedListener.value = false;
|
|
|
|
}
|
|
|
|
widget.isZoomedFunction();
|
2022-06-20 20:29:42 +02:00
|
|
|
}
|
|
|
|
|
2022-08-30 05:44:43 +02:00
|
|
|
CachedNetworkImageProvider _authorizedImageProvider(
|
2022-09-11 16:56:26 +02:00
|
|
|
String url,
|
|
|
|
String cacheKey,
|
|
|
|
) {
|
2022-07-13 14:23:48 +02:00
|
|
|
return CachedNetworkImageProvider(
|
|
|
|
url,
|
|
|
|
headers: {"Authorization": widget.authToken},
|
2022-08-30 05:44:43 +02:00
|
|
|
cacheKey: cacheKey,
|
2022-07-13 14:23:48 +02:00
|
|
|
);
|
2022-06-20 20:29:42 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
void _performStateTransition(
|
2022-07-13 14:23:48 +02:00
|
|
|
_RemoteImageStatus newStatus,
|
2022-11-08 19:00:24 +02:00
|
|
|
ImageProvider provider,
|
2022-07-13 14:23:48 +02:00
|
|
|
) {
|
2022-06-20 20:29:42 +02:00
|
|
|
if (_status == newStatus) return;
|
2022-08-08 02:43:09 +02:00
|
|
|
|
2022-06-20 20:29:42 +02:00
|
|
|
if (_status == _RemoteImageStatus.full &&
|
|
|
|
newStatus == _RemoteImageStatus.thumbnail) return;
|
|
|
|
|
2022-08-08 02:43:09 +02:00
|
|
|
if (_status == _RemoteImageStatus.preview &&
|
|
|
|
newStatus == _RemoteImageStatus.thumbnail) return;
|
|
|
|
|
|
|
|
if (_status == _RemoteImageStatus.full &&
|
|
|
|
newStatus == _RemoteImageStatus.preview) return;
|
|
|
|
|
2022-06-20 20:29:42 +02:00
|
|
|
if (!mounted) return;
|
|
|
|
|
|
|
|
setState(() {
|
|
|
|
_status = newStatus;
|
|
|
|
_imageProvider = provider;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
void _loadImages() {
|
2022-11-08 19:00:24 +02:00
|
|
|
if (widget.asset.isLocal) {
|
|
|
|
_imageProvider = AssetEntityImageProvider(
|
|
|
|
widget.asset.local!,
|
|
|
|
isOriginal: false,
|
|
|
|
thumbnailSize: const ThumbnailSize.square(250),
|
|
|
|
);
|
|
|
|
_fullProvider = AssetEntityImageProvider(widget.asset.local!);
|
|
|
|
_fullProvider.resolve(const ImageConfiguration()).addListener(
|
|
|
|
ImageStreamListener((ImageInfo image, _) {
|
|
|
|
_performStateTransition(
|
|
|
|
_RemoteImageStatus.full,
|
|
|
|
_fullProvider,
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
_thumbnailProvider = _authorizedImageProvider(
|
|
|
|
getThumbnailUrl(widget.asset.remote!),
|
2022-12-04 05:59:39 +02:00
|
|
|
getThumbnailCacheKey(widget.asset.remote!),
|
2022-08-30 05:44:43 +02:00
|
|
|
);
|
2022-11-08 19:00:24 +02:00
|
|
|
_imageProvider = _thumbnailProvider;
|
2022-06-20 20:29:42 +02:00
|
|
|
|
2022-11-08 19:00:24 +02:00
|
|
|
_thumbnailProvider.resolve(const ImageConfiguration()).addListener(
|
2022-07-13 14:23:48 +02:00
|
|
|
ImageStreamListener((ImageInfo imageInfo, _) {
|
|
|
|
_performStateTransition(
|
|
|
|
_RemoteImageStatus.thumbnail,
|
2022-11-08 19:00:24 +02:00
|
|
|
_thumbnailProvider,
|
2022-07-13 14:23:48 +02:00
|
|
|
);
|
|
|
|
}),
|
|
|
|
);
|
2022-06-20 20:29:42 +02:00
|
|
|
|
2022-12-02 22:55:10 +02:00
|
|
|
if (widget.loadPreview) {
|
2022-11-08 19:00:24 +02:00
|
|
|
_previewProvider = _authorizedImageProvider(
|
|
|
|
getThumbnailUrl(widget.asset.remote!, type: ThumbnailFormat.JPEG),
|
2022-12-04 05:59:39 +02:00
|
|
|
getThumbnailCacheKey(widget.asset.remote!, type: ThumbnailFormat.JPEG),
|
2022-08-30 05:44:43 +02:00
|
|
|
);
|
2022-11-08 19:00:24 +02:00
|
|
|
_previewProvider.resolve(const ImageConfiguration()).addListener(
|
2022-08-08 02:43:09 +02:00
|
|
|
ImageStreamListener((ImageInfo imageInfo, _) {
|
2022-11-08 19:00:24 +02:00
|
|
|
_performStateTransition(_RemoteImageStatus.preview, _previewProvider);
|
2022-08-08 02:43:09 +02:00
|
|
|
}),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-12-02 22:55:10 +02:00
|
|
|
if (widget.loadOriginal) {
|
|
|
|
_fullProvider = _authorizedImageProvider(
|
|
|
|
getImageUrl(widget.asset.remote!),
|
2022-12-04 05:59:39 +02:00
|
|
|
getImageCacheKey(widget.asset.remote!),
|
2022-12-02 22:55:10 +02:00
|
|
|
);
|
|
|
|
_fullProvider.resolve(const ImageConfiguration()).addListener(
|
|
|
|
ImageStreamListener((ImageInfo imageInfo, _) {
|
|
|
|
_performStateTransition(_RemoteImageStatus.full, _fullProvider);
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}
|
2022-06-20 20:29:42 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
void initState() {
|
|
|
|
super.initState();
|
2022-09-16 23:46:23 +02:00
|
|
|
_loadImages();
|
2022-06-20 20:29:42 +02:00
|
|
|
}
|
2022-09-11 16:56:26 +02:00
|
|
|
|
|
|
|
@override
|
|
|
|
void dispose() async {
|
|
|
|
super.dispose();
|
|
|
|
|
2022-09-16 23:46:23 +02:00
|
|
|
if (_status == _RemoteImageStatus.full) {
|
2022-11-08 19:00:24 +02:00
|
|
|
await _fullProvider.evict();
|
2022-09-16 23:46:23 +02:00
|
|
|
} else if (_status == _RemoteImageStatus.preview) {
|
2022-11-08 19:00:24 +02:00
|
|
|
await _previewProvider.evict();
|
2022-09-16 23:46:23 +02:00
|
|
|
} else if (_status == _RemoteImageStatus.thumbnail) {
|
2022-11-08 19:00:24 +02:00
|
|
|
await _thumbnailProvider.evict();
|
2022-09-11 16:56:26 +02:00
|
|
|
}
|
|
|
|
|
2022-09-16 23:46:23 +02:00
|
|
|
await _imageProvider.evict();
|
2022-09-11 16:56:26 +02:00
|
|
|
}
|
2022-06-20 20:29:42 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
class RemotePhotoView extends StatefulWidget {
|
2022-08-13 22:51:09 +02:00
|
|
|
const RemotePhotoView({
|
|
|
|
Key? key,
|
2022-11-08 19:00:24 +02:00
|
|
|
required this.asset,
|
2022-08-13 22:51:09 +02:00
|
|
|
required this.authToken,
|
2022-12-02 22:55:10 +02:00
|
|
|
required this.loadPreview,
|
|
|
|
required this.loadOriginal,
|
2022-08-13 22:51:09 +02:00
|
|
|
required this.isZoomedFunction,
|
|
|
|
required this.isZoomedListener,
|
|
|
|
required this.onSwipeDown,
|
|
|
|
required this.onSwipeUp,
|
|
|
|
}) : super(key: key);
|
2022-06-20 20:29:42 +02:00
|
|
|
|
2022-11-08 19:00:24 +02:00
|
|
|
final Asset asset;
|
2022-06-20 20:29:42 +02:00
|
|
|
final String authToken;
|
2022-12-02 22:55:10 +02:00
|
|
|
final bool loadPreview;
|
|
|
|
final bool loadOriginal;
|
2022-06-20 20:29:42 +02:00
|
|
|
final void Function() onSwipeDown;
|
|
|
|
final void Function() onSwipeUp;
|
2022-08-03 22:36:12 +02:00
|
|
|
final void Function() isZoomedFunction;
|
|
|
|
|
|
|
|
final ValueNotifier<bool> isZoomedListener;
|
2022-06-20 20:29:42 +02:00
|
|
|
|
|
|
|
@override
|
|
|
|
State<StatefulWidget> createState() {
|
|
|
|
return _RemotePhotoViewState();
|
|
|
|
}
|
|
|
|
}
|