Fix thumbnails load (#173)

* Thumbnail fade in

* Reload thumbnail when file changes

* Refresh thumbnail after exiting project

* Fix reading non existant file

* Save and close on any pop (system or back button)

* Bump version

lib/editing/editing_page.dart

@@ -67,8 +67,15 @@ class _EditingPageState extends State<EditingPage>
         ),
       ],
       child: WillPopScope(
-        // Disables iOS swipe back gesture. (https://github.com/flutter/flutter/issues/14203)
-        onWillPop: () async => true,
+        onWillPop: () async {
+          final project = context.read<Project>();
+          WidgetsBinding.instance!.addPostFrameCallback((_) {
+            project.saveAndClose();
+          });
+
+          // Disables iOS swipe back gesture. (https://github.com/flutter/flutter/issues/14203)
+          return true;
+        },
         child: Scaffold(
           resizeToAvoidBottomInset: false,
           backgroundColor: Theme.of(context).colorScheme.background,

lib/editing/ui/actionbar/editing_actionbar.dart

@@ -30,15 +30,7 @@ class EditingActionbar extends StatelessWidget {
       children: [
         AppIconButton(
           icon: FontAwesomeIcons.arrowLeft,
-          onTap: playing
-              ? null
-              : () async {
-                  final project = context.read<Project>();
-                  Navigator.pop(context);
-                  WidgetsBinding.instance!.addPostFrameCallback((_) {
-                    project.saveAndClose();
-                  });
-                },
+          onTap: playing ? null : () => Navigator.maybePop(context),
         ),
         Spacer(),
         title!,

lib/home/ui/project_thumbnail.dart

@@ -4,6 +4,7 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:mooltik/common/data/project/project.dart';
 import 'package:mooltik/common/ui/labeled_icon_button.dart';
 import 'package:mooltik/common/ui/popup_with_arrow.dart';
+import 'package:mooltik/drawing/ui/frame_window.dart';
 import 'package:provider/provider.dart';
 
 import '../data/gallery_model.dart';
@@ -24,6 +25,41 @@ class ProjectThumbnail extends StatefulWidget {
 
 class _ProjectThumbnailState extends State<ProjectThumbnail> {
   bool _menuOpen = false;
+  FileImage? image;
+  DateTime? lastModified;
+
+  @override
+  void initState() {
+    super.initState();
+    _init();
+  }
+
+  Future<void> _init() async {
+    if (widget.thumbnail.existsSync()) {
+      image = FileImage(widget.thumbnail);
+      lastModified = await widget.thumbnail.lastModified();
+    }
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    if (widget.thumbnail.existsSync() && image != null) {
+      _refreshImageIfModified();
+    } else {
+      _init();
+    }
+  }
+
+  Future<void> _refreshImageIfModified() async {
+    final updatedLastModified = await widget.thumbnail.lastModified();
+
+    if (updatedLastModified != lastModified) {
+      await image?.evict(cache: imageCache);
+      lastModified = updatedLastModified;
+      setState(() {});
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -41,7 +77,10 @@ class _ProjectThumbnailState extends State<ProjectThumbnail> {
         arrowAnchor: Alignment(0, -0.8),
         popupColor: Theme.of(context).colorScheme.primary,
         popupBody: _buildProjectMenu(),
-        child: _buildThumbnail(),
+        child: _Thumbnail(
+          key: Key('$lastModified'),
+          image: image,
+        ),
         onTapOutside: () {
           setState(() => _menuOpen = false);
         },
@@ -64,22 +103,51 @@ class _ProjectThumbnailState extends State<ProjectThumbnail> {
       ),
     );
   }
+}
+
+class _Thumbnail extends StatelessWidget {
+  const _Thumbnail({
+    Key? key,
+    required this.image,
+  }) : super(key: key);
+
+  final FileImage? image;
+
+  @override
+  Widget build(BuildContext context) {
+    final _image = image;
 
-  Widget _buildThumbnail() {
-    return Container(
-      clipBehavior: Clip.antiAlias,
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(8),
+    return AspectRatio(
+      aspectRatio: 16 / 9,
+      child: Container(
+        clipBehavior: Clip.antiAlias,
+        decoration: BoxDecoration(
+          color: frostedGlassColor,
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: _image != null
+            ? Image(
+                image: _image,
+                fit: BoxFit.cover,
+                frameBuilder: (
+                  BuildContext context,
+                  Widget child,
+                  int? frame,
+                  bool wasSynchronouslyLoaded,
+                ) {
+                  if (wasSynchronouslyLoaded) {
+                    return child;
+                  }
+                  return AnimatedOpacity(
+                    child: child,
+                    opacity: frame == null ? 0 : 1,
+                    duration: const Duration(milliseconds: 200),
+                    curve: Curves.easeOut,
+                  );
+                },
+              )
+            : ColoredBox(color: Colors.white),
       ),
-      child: widget.thumbnail.existsSync()
-          ? Image.memory(
-              // Temporary fix for this issue https://github.com/flutter/flutter/issues/17419
-              widget.thumbnail.readAsBytesSync(),
-              fit: BoxFit.cover,
-              gaplessPlayback: true,
-            )
-          : null,
     );
   }
 }

pubspec.yaml

@@ -15,7 +15,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 1.8.0
+version: 1.8.1
 
 environment:
   sdk: '>=2.12.0 <3.0.0'