zoomable_image.dart 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. import 'dart:async';
  2. import 'dart:io';
  3. import 'package:flutter/material.dart';
  4. import 'package:flutter/widgets.dart';
  5. import 'package:logging/logging.dart';
  6. import 'package:photo_view/photo_view.dart';
  7. import 'package:photos/core/cache/thumbnail_in_memory_cache.dart';
  8. import "package:photos/core/configuration.dart";
  9. import 'package:photos/core/constants.dart';
  10. import 'package:photos/core/event_bus.dart';
  11. import 'package:photos/db/files_db.dart';
  12. import 'package:photos/events/files_updated_event.dart';
  13. import 'package:photos/events/local_photos_updated_event.dart';
  14. import 'package:photos/models/file.dart';
  15. import "package:photos/models/magic_metadata.dart";
  16. import "package:photos/services/file_magic_service.dart";
  17. import 'package:photos/ui/common/loading_widget.dart';
  18. import 'package:photos/utils/file_util.dart';
  19. import 'package:photos/utils/image_util.dart';
  20. import 'package:photos/utils/thumbnail_util.dart';
  21. class ZoomableImage extends StatefulWidget {
  22. final File photo;
  23. final Function(bool)? shouldDisableScroll;
  24. final String? tagPrefix;
  25. final Decoration? backgroundDecoration;
  26. const ZoomableImage(
  27. this.photo, {
  28. Key? key,
  29. this.shouldDisableScroll,
  30. required this.tagPrefix,
  31. this.backgroundDecoration,
  32. }) : super(key: key);
  33. @override
  34. State<ZoomableImage> createState() => _ZoomableImageState();
  35. }
  36. class _ZoomableImageState extends State<ZoomableImage>
  37. with SingleTickerProviderStateMixin {
  38. late Logger _logger;
  39. late File _photo;
  40. ImageProvider? _imageProvider;
  41. bool _loadedSmallThumbnail = false;
  42. bool _loadingLargeThumbnail = false;
  43. bool _loadedLargeThumbnail = false;
  44. bool _loadingFinalImage = false;
  45. bool _loadedFinalImage = false;
  46. ValueChanged<PhotoViewScaleState>? _scaleStateChangedCallback;
  47. bool _isZooming = false;
  48. PhotoViewController _photoViewController = PhotoViewController();
  49. int? _thumbnailWidth;
  50. late int _currentUserID;
  51. @override
  52. void initState() {
  53. _photo = widget.photo;
  54. _logger = Logger("ZoomableImage_" + _photo.displayName);
  55. debugPrint('initState for ${_photo.toString()}');
  56. _scaleStateChangedCallback = (value) {
  57. if (widget.shouldDisableScroll != null) {
  58. widget.shouldDisableScroll!(value != PhotoViewScaleState.initial);
  59. }
  60. _isZooming = value != PhotoViewScaleState.initial;
  61. debugPrint("isZooming = $_isZooming, currentState $value");
  62. // _logger.info('is reakky zooming $_isZooming with state $value');
  63. };
  64. _currentUserID = Configuration.instance.getUserID()!;
  65. super.initState();
  66. }
  67. @override
  68. void dispose() {
  69. _photoViewController.dispose();
  70. super.dispose();
  71. }
  72. @override
  73. Widget build(BuildContext context) {
  74. if (_photo.isRemoteFile) {
  75. _loadNetworkImage();
  76. } else {
  77. _loadLocalImage(context);
  78. }
  79. Widget content;
  80. if (_imageProvider != null) {
  81. content = PhotoViewGestureDetectorScope(
  82. axis: Axis.vertical,
  83. child: PhotoView(
  84. imageProvider: _imageProvider,
  85. controller: _photoViewController,
  86. scaleStateChangedCallback: _scaleStateChangedCallback,
  87. minScale: PhotoViewComputedScale.contained,
  88. gaplessPlayback: true,
  89. heroAttributes: PhotoViewHeroAttributes(
  90. tag: widget.tagPrefix! + _photo.tag,
  91. ),
  92. backgroundDecoration: widget.backgroundDecoration as BoxDecoration?,
  93. ),
  94. );
  95. } else {
  96. content = const EnteLoadingWidget();
  97. }
  98. final GestureDragUpdateCallback? verticalDragCallback = _isZooming
  99. ? null
  100. : (d) => {
  101. if (!_isZooming && d.delta.dy > dragSensitivity)
  102. {Navigator.of(context).pop()}
  103. };
  104. return GestureDetector(
  105. onVerticalDragUpdate: verticalDragCallback,
  106. child: content,
  107. );
  108. }
  109. void _loadNetworkImage() {
  110. if (!_loadedSmallThumbnail && !_loadedFinalImage) {
  111. final cachedThumbnail = ThumbnailInMemoryLruCache.get(_photo);
  112. if (cachedThumbnail != null) {
  113. _imageProvider = Image.memory(cachedThumbnail).image;
  114. _loadedSmallThumbnail = true;
  115. _captureThumbnailDimensions(_imageProvider!);
  116. } else {
  117. getThumbnailFromServer(_photo).then((file) {
  118. final imageProvider = Image.memory(file).image;
  119. if (mounted) {
  120. precacheImage(imageProvider, context).then((value) {
  121. if (mounted) {
  122. setState(() {
  123. _imageProvider = imageProvider;
  124. _loadedSmallThumbnail = true;
  125. _captureThumbnailDimensions(_imageProvider!);
  126. });
  127. }
  128. }).catchError((e) {
  129. _logger.severe("Could not load image " + _photo.toString());
  130. _loadedSmallThumbnail = true;
  131. });
  132. }
  133. });
  134. }
  135. }
  136. if (!_loadedFinalImage && !_loadingFinalImage) {
  137. _loadingFinalImage = true;
  138. getFileFromServer(_photo).then((file) {
  139. _onFinalImageLoaded(
  140. Image.file(
  141. file!,
  142. gaplessPlayback: true,
  143. ).image,
  144. );
  145. });
  146. }
  147. }
  148. void _loadLocalImage(BuildContext context) {
  149. if (!_loadedSmallThumbnail &&
  150. !_loadedLargeThumbnail &&
  151. !_loadedFinalImage) {
  152. final cachedThumbnail =
  153. ThumbnailInMemoryLruCache.get(_photo, thumbnailSmallSize);
  154. if (cachedThumbnail != null) {
  155. _imageProvider = Image.memory(cachedThumbnail).image;
  156. _loadedSmallThumbnail = true;
  157. }
  158. }
  159. if (!_loadingLargeThumbnail &&
  160. !_loadedLargeThumbnail &&
  161. !_loadedFinalImage) {
  162. _loadingLargeThumbnail = true;
  163. getThumbnailFromLocal(_photo, size: thumbnailLargeSize, quality: 100)
  164. .then((cachedThumbnail) {
  165. if (cachedThumbnail != null) {
  166. _onLargeThumbnailLoaded(Image.memory(cachedThumbnail).image, context);
  167. }
  168. });
  169. }
  170. if (!_loadingFinalImage && !_loadedFinalImage) {
  171. _loadingFinalImage = true;
  172. getFile(
  173. _photo,
  174. isOrigin: Platform.isIOS &&
  175. _isGIF(), // since on iOS GIFs playback only when origin-files are loaded
  176. ).then((file) {
  177. if (file != null && file.existsSync()) {
  178. _onFinalImageLoaded(Image.file(file).image);
  179. } else {
  180. _logger.info("File was deleted " + _photo.toString());
  181. if (_photo.uploadedFileID != null) {
  182. _photo.localID = null;
  183. FilesDB.instance.update(_photo);
  184. _loadNetworkImage();
  185. } else {
  186. FilesDB.instance.deleteLocalFile(_photo);
  187. Bus.instance.fire(
  188. LocalPhotosUpdatedEvent(
  189. [_photo],
  190. type: EventType.deletedFromDevice,
  191. source: "zoomPreview",
  192. ),
  193. );
  194. }
  195. }
  196. });
  197. }
  198. }
  199. void _onLargeThumbnailLoaded(
  200. ImageProvider imageProvider,
  201. BuildContext context,
  202. ) {
  203. if (mounted && !_loadedFinalImage) {
  204. precacheImage(imageProvider, context).then((value) {
  205. if (mounted && !_loadedFinalImage) {
  206. setState(() {
  207. _imageProvider = imageProvider;
  208. _loadedLargeThumbnail = true;
  209. });
  210. }
  211. });
  212. }
  213. }
  214. void _onFinalImageLoaded(ImageProvider imageProvider) {
  215. if (mounted) {
  216. precacheImage(imageProvider, context).then((value) async {
  217. if (mounted) {
  218. await _updatePhotoViewController(imageProvider);
  219. setState(() {
  220. _imageProvider = imageProvider;
  221. _loadedFinalImage = true;
  222. _logger.info("Final image loaded");
  223. });
  224. }
  225. });
  226. }
  227. }
  228. Future<void> _captureThumbnailDimensions(ImageProvider imageProvider) async {
  229. final imageInfo = await getImageInfo(imageProvider);
  230. _thumbnailWidth = imageInfo.image.width;
  231. }
  232. Future<void> _updatePhotoViewController(ImageProvider imageProvider) async {
  233. if (_thumbnailWidth == null || _photoViewController.scale == null) {
  234. return;
  235. }
  236. final imageInfo = await getImageInfo(imageProvider);
  237. final scale = _photoViewController.scale! /
  238. (imageInfo.image.width / _thumbnailWidth!);
  239. final currentPosition = _photoViewController.value.position;
  240. final positionScaleFactor = 1 / scale;
  241. final newPosition = currentPosition.scale(
  242. positionScaleFactor,
  243. positionScaleFactor,
  244. );
  245. _photoViewController = PhotoViewController(
  246. initialPosition: newPosition,
  247. initialScale: scale,
  248. );
  249. _updateAspectRatioIfNeeded(imageInfo).ignore();
  250. }
  251. // Fallback logic to finish back fill and update aspect
  252. // ratio if needed.
  253. Future<void> _updateAspectRatioIfNeeded(ImageInfo imageInfo) async {
  254. if (_imageProvider != null &&
  255. widget.photo.isUploaded &&
  256. widget.photo.ownerID == _currentUserID) {
  257. final int h = imageInfo.image.height, w = imageInfo.image.width;
  258. if (h != 0 &&
  259. w != 0 &&
  260. (h != widget.photo.height || w != widget.photo.width)) {
  261. _logger.info('Updating aspect ratio for ${widget.photo} to $h:$w');
  262. await FileMagicService.instance.updatePublicMagicMetadata([
  263. widget.photo
  264. ], {
  265. publicMagicKeyHeight: h,
  266. publicMagicKeyWidth: w,
  267. });
  268. }
  269. }
  270. }
  271. bool _isGIF() => _photo.displayName.toLowerCase().endsWith(".gif");
  272. }