From f6ec7e10d5448fc7af8b5b0908cce0386e392e82 Mon Sep 17 00:00:00 2001 From: Ming Ming Date: Fri, 22 Apr 2022 03:13:31 +0800 Subject: [PATCH] Refactor: decouple image viewer and image source --- app/lib/widget/image_viewer.dart | 99 ++++++++++++++++++---------- app/lib/widget/slideshow_viewer.dart | 6 +- app/lib/widget/trashbin_viewer.dart | 6 +- app/lib/widget/viewer.dart | 6 +- 4 files changed, 75 insertions(+), 42 deletions(-) diff --git a/app/lib/widget/image_viewer.dart b/app/lib/widget/image_viewer.dart index 37e01cab..6983ec72 100644 --- a/app/lib/widget/image_viewer.dart +++ b/app/lib/widget/image_viewer.dart @@ -10,8 +10,8 @@ import 'package:nc_photos/entity/file.dart'; import 'package:nc_photos/k.dart' as k; import 'package:nc_photos/widget/cached_network_image_mod.dart' as mod; -class ImageViewer extends StatefulWidget { - const ImageViewer({ +class RemoteImageViewer extends StatefulWidget { + const RemoteImageViewer({ Key? key, required this.account, required this.file, @@ -23,7 +23,7 @@ class ImageViewer extends StatefulWidget { }) : super(key: key); @override - createState() => _ImageViewerState(); + createState() => _RemoteImageViewerState(); static void preloadImage(Account account, File file) { LargeImageCacheManager.inst.getFileStream( @@ -43,7 +43,67 @@ class ImageViewer extends StatefulWidget { final VoidCallback? onZoomEnded; } -class _ImageViewerState extends State +class _RemoteImageViewerState extends State { + @override + build(BuildContext context) => _ImageViewer( + canZoom: widget.canZoom, + onHeightChanged: widget.onHeightChanged, + onZoomStarted: widget.onZoomStarted, + onZoomEnded: widget.onZoomEnded, + child: mod.CachedNetworkImage( + cacheManager: LargeImageCacheManager.inst, + imageUrl: _getImageUrl(widget.account, widget.file), + httpHeaders: { + "Authorization": Api.getAuthorizationHeaderValue(widget.account), + }, + fit: BoxFit.contain, + fadeInDuration: const Duration(), + filterQuality: FilterQuality.high, + imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet, + imageBuilder: (context, child, imageProvider) { + WidgetsBinding.instance!.addPostFrameCallback((_) { + _onItemLoaded(); + }); + SizeChangedLayoutNotification().dispatch(context); + return child; + }, + ), + ); + + void _onItemLoaded() { + if (!_isLoaded) { + _log.info("[_onItemLoaded]"); + _isLoaded = true; + widget.onLoaded?.call(); + } + } + + var _isLoaded = false; + + static final _log = Logger("widget.image_viewer._RemoteImageViewerState"); +} + +class _ImageViewer extends StatefulWidget { + const _ImageViewer({ + Key? key, + required this.child, + required this.canZoom, + this.onHeightChanged, + this.onZoomStarted, + this.onZoomEnded, + }) : super(key: key); + + @override + createState() => _ImageViewerState(); + + final Widget child; + final bool canZoom; + final ValueChanged? onHeightChanged; + final VoidCallback? onZoomStarted; + final VoidCallback? onZoomEnded; +} + +class _ImageViewerState extends State<_ImageViewer> with TickerProviderStateMixin { @override build(BuildContext context) { @@ -68,26 +128,8 @@ class _ImageViewerState extends State return false; }, child: SizeChangedLayoutNotifier( - child: mod.CachedNetworkImage( - key: _key, - cacheManager: LargeImageCacheManager.inst, - imageUrl: _getImageUrl(widget.account, widget.file), - httpHeaders: { - "Authorization": - Api.getAuthorizationHeaderValue(widget.account), - }, - fit: BoxFit.contain, - fadeInDuration: const Duration(), - filterQuality: FilterQuality.high, - imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet, - imageBuilder: (context, child, imageProvider) { - WidgetsBinding.instance!.addPostFrameCallback((_) { - _onItemLoaded(); - }); - SizeChangedLayoutNotification().dispatch(context); - return child; - }, - ), + key: _key, + child: widget.child, ), ), ), @@ -148,14 +190,6 @@ class _ImageViewerState extends State _transformationController.dispose(); } - void _onItemLoaded() { - if (!_isLoaded) { - _log.info("[_onItemLoaded]"); - _isLoaded = true; - widget.onLoaded?.call(); - } - } - void _setIsZooming(bool flag) { _isZooming = flag; final next = _isZoomed; @@ -221,7 +255,6 @@ class _ImageViewerState extends State final _key = GlobalKey(); final _transformationController = TransformationController(); - var _isLoaded = false; var _isZooming = false; var _wasZoomed = false; diff --git a/app/lib/widget/slideshow_viewer.dart b/app/lib/widget/slideshow_viewer.dart index 772bd00a..987a4f3d 100644 --- a/app/lib/widget/slideshow_viewer.dart +++ b/app/lib/widget/slideshow_viewer.dart @@ -189,7 +189,7 @@ class _SlideshowViewerState extends State } Widget _buildImageView(BuildContext context, int index) { - return ImageViewer( + return RemoteImageViewer( account: widget.account, file: widget.streamFiles[index], canZoom: false, @@ -221,13 +221,13 @@ class _SlideshowViewerState extends State if (index > 0) { final prevFile = widget.streamFiles[index - 1]; if (file_util.isSupportedImageFormat(prevFile)) { - ImageViewer.preloadImage(widget.account, prevFile); + RemoteImageViewer.preloadImage(widget.account, prevFile); } } if (index + 1 < widget.streamFiles.length) { final nextFile = widget.streamFiles[index + 1]; if (file_util.isSupportedImageFormat(nextFile)) { - ImageViewer.preloadImage(widget.account, nextFile); + RemoteImageViewer.preloadImage(widget.account, nextFile); } } } diff --git a/app/lib/widget/trashbin_viewer.dart b/app/lib/widget/trashbin_viewer.dart index 9b327a3c..2fd409d5 100644 --- a/app/lib/widget/trashbin_viewer.dart +++ b/app/lib/widget/trashbin_viewer.dart @@ -229,7 +229,7 @@ class _TrashbinViewerState extends State { } Widget _buildImageView(BuildContext context, int index) { - return ImageViewer( + return RemoteImageViewer( account: widget.account, file: widget.streamFiles[index], canZoom: true, @@ -267,13 +267,13 @@ class _TrashbinViewerState extends State { if (index > 0) { final prevFile = widget.streamFiles[index - 1]; if (file_util.isSupportedImageFormat(prevFile)) { - ImageViewer.preloadImage(widget.account, prevFile); + RemoteImageViewer.preloadImage(widget.account, prevFile); } } if (index + 1 < widget.streamFiles.length) { final nextFile = widget.streamFiles[index + 1]; if (file_util.isSupportedImageFormat(nextFile)) { - ImageViewer.preloadImage(widget.account, nextFile); + RemoteImageViewer.preloadImage(widget.account, nextFile); } } setState(() { diff --git a/app/lib/widget/viewer.dart b/app/lib/widget/viewer.dart index 5b3e5ad7..6b0fccc9 100644 --- a/app/lib/widget/viewer.dart +++ b/app/lib/widget/viewer.dart @@ -314,7 +314,7 @@ class _ViewerState extends State } Widget _buildImageView(BuildContext context, int index) { - return ImageViewer( + return RemoteImageViewer( account: widget.account, file: widget.streamFiles[index], canZoom: _canZoom(), @@ -414,13 +414,13 @@ class _ViewerState extends State if (index > 0) { final prevFile = widget.streamFiles[index - 1]; if (file_util.isSupportedImageFormat(prevFile)) { - ImageViewer.preloadImage(widget.account, prevFile); + RemoteImageViewer.preloadImage(widget.account, prevFile); } } if (index + 1 < widget.streamFiles.length) { final nextFile = widget.streamFiles[index + 1]; if (file_util.isSupportedImageFormat(nextFile)) { - ImageViewer.preloadImage(widget.account, nextFile); + RemoteImageViewer.preloadImage(widget.account, nextFile); } } }