video: improved overlay, error handling

lib/widgets/album/thumbnail.dart

@@ -1,11 +1,9 @@
 import 'dart:math';
-import 'dart:typed_data';
 
 import 'package:aves/model/image_entry.dart';
-import 'package:aves/model/image_file_service.dart';
 import 'package:aves/widgets/common/icons.dart';
+import 'package:aves/widgets/common/image_preview.dart';
 import 'package:flutter/material.dart';
-import 'package:transparent_image/transparent_image.dart';
 
 class Thumbnail extends StatelessWidget {
   final ImageEntry entry;
@@ -21,113 +19,13 @@ class Thumbnail extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    final image = ImagePreview(
-      decoration: BoxDecoration(
-        border: Border.all(
-          color: Colors.grey.shade700,
-          width: 0.5,
-        ),
-      ),
-      child: Stack(
-        alignment: AlignmentDirectional.bottomStart,
-        children: [
-          ThumbnailImage(
       entry: entry,
-            extent: extent,
+      width: extent,
+      height: extent,
       devicePixelRatio: devicePixelRatio,
-          ),
+      builder: (bytes) {
-          _buildOverlayIcons(),
+        return Hero(
-        ],
-      ),
-    );
-  }
-
-  Widget _buildOverlayIcons() {
-    final fontSize = min(14.0, (extent / 8).roundToDouble());
-    final iconSize = fontSize * 2;
-    return DefaultTextStyle(
-      style: TextStyle(
-        color: Colors.grey[200],
-        fontSize: fontSize,
-      ),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.end,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          if (entry.hasGps) GpsIcon(iconSize: iconSize),
-          if (entry.isGif)
-            GifIcon(iconSize: iconSize)
-          else if (entry.isVideo)
-            VideoIcon(
-              entry: entry,
-              iconSize: iconSize,
-            ),
-        ],
-      ),
-    );
-  }
-}
-
-class ThumbnailImage extends StatefulWidget {
-  final ImageEntry entry;
-  final double extent;
-  final double devicePixelRatio;
-
-  const ThumbnailImage({
-    Key key,
-    @required this.entry,
-    @required this.extent,
-    @required this.devicePixelRatio,
-  }) : super(key: key);
-
-  @override
-  State<StatefulWidget> createState() => ThumbnailImageState();
-}
-
-class ThumbnailImageState extends State<ThumbnailImage> {
-  Future<Uint8List> _byteLoader;
-  Listenable _entryChangeNotifier;
-
-  ImageEntry get entry => widget.entry;
-
-  String get uri => widget.entry.uri;
-
-  @override
-  void initState() {
-    super.initState();
-    _entryChangeNotifier = Listenable.merge([entry.imageChangeNotifier, entry.metadataChangeNotifier]);
-    _entryChangeNotifier.addListener(onEntryChange);
-    initByteLoader();
-  }
-
-  @override
-  void didUpdateWidget(ThumbnailImage oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (widget.extent == oldWidget.extent && uri == oldWidget.entry.uri && widget.entry.width == oldWidget.entry.width && widget.entry.height == oldWidget.entry.height && widget.entry.orientationDegrees == oldWidget.entry.orientationDegrees) return;
-    initByteLoader();
-  }
-
-  initByteLoader() {
-    final dim = (widget.extent * widget.devicePixelRatio).round();
-    _byteLoader = ImageFileService.getImageBytes(widget.entry, dim, dim);
-  }
-
-  onEntryChange() => setState(() => initByteLoader());
-
-  @override
-  void dispose() {
-    _entryChangeNotifier.removeListener(onEntryChange);
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return FutureBuilder(
-        future: _byteLoader,
-        builder: (futureContext, AsyncSnapshot<Uint8List> snapshot) {
-          final bytes = (snapshot.connectionState == ConnectionState.done && !snapshot.hasError) ? snapshot.data : kTransparentImage;
-          return bytes.length > 0
-              ? Hero(
           tag: entry.uri,
           child: LayoutBuilder(builder: (context, constraints) {
             final dim = min(constraints.maxWidth, constraints.maxHeight);
@@ -138,8 +36,54 @@ class ThumbnailImageState extends State<ThumbnailImage> {
               fit: BoxFit.cover,
             );
           }),
+        );
+      },
+    );
+    final icons = _buildOverlayIcons();
+    return Container(
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: Colors.grey.shade700,
+          width: 0.5,
+        ),
+      ),
+      child: icons != null
+          ? Stack(
+              alignment: AlignmentDirectional.bottomStart,
+              children: [
+                image,
+                icons,
+              ],
             )
-              : Icon(Icons.error);
+          : image,
-        });
+    );
+  }
+
+  Widget _buildOverlayIcons() {
+    final fontSize = min(14.0, (extent / 8).roundToDouble());
+    final iconSize = fontSize * 2;
+    final icons = [
+      if (entry.hasGps) GpsIcon(iconSize: iconSize),
+      if (entry.isGif)
+        GifIcon(iconSize: iconSize)
+      else if (entry.isVideo)
+        VideoIcon(
+          entry: entry,
+          iconSize: iconSize,
+        ),
+    ];
+    return icons.isNotEmpty
+        ? DefaultTextStyle(
+            style: TextStyle(
+              color: Colors.grey[200],
+              fontSize: fontSize,
+            ),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.end,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: icons,
+            ),
+          )
+        : null;
   }
 }

lib/widgets/common/image_preview.dart

@@ -0,0 +1,72 @@
+import 'dart:typed_data';
+
+import 'package:aves/model/image_entry.dart';
+import 'package:aves/model/image_file_service.dart';
+import 'package:flutter/material.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class ImagePreview extends StatefulWidget {
+  final ImageEntry entry;
+  final double width, height, devicePixelRatio;
+  final Widget Function(Uint8List bytes) builder;
+
+  const ImagePreview({
+    Key key,
+    @required this.entry,
+    @required this.width,
+    @required this.height,
+    @required this.devicePixelRatio,
+    @required this.builder,
+  }) : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => ImagePreviewState();
+}
+
+class ImagePreviewState extends State<ImagePreview> {
+  Future<Uint8List> _byteLoader;
+  Listenable _entryChangeNotifier;
+
+  ImageEntry get entry => widget.entry;
+
+  String get uri => widget.entry.uri;
+
+  @override
+  void initState() {
+    super.initState();
+    _entryChangeNotifier = Listenable.merge([entry.imageChangeNotifier, entry.metadataChangeNotifier]);
+    _entryChangeNotifier.addListener(onEntryChange);
+    initByteLoader();
+  }
+
+  @override
+  void didUpdateWidget(ImagePreview old) {
+    super.didUpdateWidget(old);
+    if (widget.width == old.width && widget.height == old.height && uri == old.entry.uri && widget.entry.width == old.entry.width && widget.entry.height == old.entry.height && widget.entry.orientationDegrees == old.entry.orientationDegrees) return;
+    initByteLoader();
+  }
+
+  initByteLoader() {
+    final width = (widget.width * widget.devicePixelRatio).round();
+    final height = (widget.height * widget.devicePixelRatio).round();
+    _byteLoader = ImageFileService.getImageBytes(widget.entry, width, height);
+  }
+
+  onEntryChange() => setState(() => initByteLoader());
+
+  @override
+  void dispose() {
+    _entryChangeNotifier.removeListener(onEntryChange);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+        future: _byteLoader,
+        builder: (futureContext, AsyncSnapshot<Uint8List> snapshot) {
+          final bytes = (snapshot.connectionState == ConnectionState.done && !snapshot.hasError) ? snapshot.data : kTransparentImage;
+          return bytes.length > 0 ? widget.builder(bytes) : Icon(Icons.error);
+        });
+  }
+}

lib/widgets/fullscreen/overlay/video.dart

@@ -25,9 +25,10 @@ class VideoControlOverlay extends StatefulWidget {
   State<StatefulWidget> createState() => VideoControlOverlayState();
 }
 
-class VideoControlOverlayState extends State<VideoControlOverlay> {
+class VideoControlOverlayState extends State<VideoControlOverlay> with SingleTickerProviderStateMixin {
   final GlobalKey _progressBarKey = GlobalKey();
   bool _playingOnDragStart = false;
+  AnimationController _playPauseAnimation;
 
   ImageEntry get entry => widget.entry;
 
@@ -42,6 +43,10 @@ class VideoControlOverlayState extends State<VideoControlOverlay> {
   @override
   void initState() {
     super.initState();
+    _playPauseAnimation = AnimationController(
+      duration: Duration(milliseconds: 300),
+      vsync: this,
+    );
     registerWidget(widget);
     _onValueChange();
   }
@@ -56,6 +61,7 @@ class VideoControlOverlayState extends State<VideoControlOverlay> {
   @override
   void dispose() {
     unregisterWidget(widget);
+    _playPauseAnimation.dispose();
     super.dispose();
   }
 
@@ -75,33 +81,33 @@ class VideoControlOverlayState extends State<VideoControlOverlay> {
     final safePadding = (viewInsets + viewPadding).copyWith(bottom: 8) + EdgeInsets.symmetric(horizontal: 8.0);
     return Padding(
       padding: safePadding,
-      child: value.hasError
+      child: SizedBox(
-          ? OverlayButton(
+        width: mediaQuery.size.width - safePadding.horizontal,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: value.hasError
+              ? [
+                  OverlayButton(
                     scale: scale,
                     child: IconButton(
                       icon: Icon(Icons.open_in_new),
                       onPressed: () => AndroidAppService.open(entry.uri, entry.mimeType),
                       tooltip: 'Open',
                     ),
-            )
+                  ),
-          : SizedBox(
+                ]
-              width: mediaQuery.size.width - safePadding.horizontal,
+              : [
-              child: Row(
-                children: [
                   Expanded(
                     child: _buildProgressBar(),
                   ),
                   SizedBox(width: 8),
                   OverlayButton(
                     scale: scale,
-                    child: value.isPlaying
+                    child: IconButton(
-                        ? IconButton(
+                      icon: AnimatedIcon(
-                            icon: Icon(Icons.pause),
+                        icon: AnimatedIcons.play_pause,
-                            onPressed: () => _playPause(),
+                        progress: _playPauseAnimation,
-                            tooltip: 'Pause',
+                      ),
-                          )
-                        : IconButton(
-                            icon: Icon(Icons.play_arrow),
                       onPressed: () => _playPause(),
                       tooltip: 'Play',
                     ),
@@ -160,20 +166,31 @@ class VideoControlOverlayState extends State<VideoControlOverlay> {
     );
   }
 
-  _onValueChange() => setState(() {});
+  _onValueChange() {
+    setState(() {});
+    updatePlayPauseIcon();
+  }
 
   _playPause() async {
     if (value.isPlaying) {
       controller.pause();
     } else {
-      if (!value.initialized) {
+      if (!value.initialized) await controller.initialize();
-        await controller.initialize();
-      }
       controller.play();
     }
     setState(() {});
   }
 
+  updatePlayPauseIcon() {
+    final isPlaying = value.isPlaying;
+    final status = _playPauseAnimation.status;
+    if (isPlaying && status != AnimationStatus.forward && status != AnimationStatus.completed) {
+      _playPauseAnimation.forward();
+    } else if (!isPlaying && status != AnimationStatus.reverse && status != AnimationStatus.dismissed) {
+      _playPauseAnimation.reverse();
+    }
+  }
+
   _seek(Offset globalPosition) {
     final keyContext = _progressBarKey.currentContext;
     final RenderBox box = keyContext.findRenderObject();

lib/widgets/fullscreen/video.dart

@@ -1,4 +1,7 @@
+import 'dart:math';
+
 import 'package:aves/model/image_entry.dart';
+import 'package:aves/widgets/common/image_preview.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
 
@@ -52,13 +55,17 @@ class AvesVideoState extends State<AvesVideo> {
   @override
   Widget build(BuildContext context) {
     if (value == null) return SizedBox();
-    if (value.hasError)
+    if (value.hasError) {
-      return Center(
+      final mediaQuery = MediaQuery.of(context);
-        child: Icon(
+      final width = min<double>(mediaQuery.size.width, entry.width.toDouble());
-          Icons.error_outline,
+      return ImagePreview(
-          size: 32,
+        entry: entry,
-        ),
+        width: width,
+        height: width / entry.aspectRatio,
+        devicePixelRatio: mediaQuery.devicePixelRatio,
+        builder: (bytes) => Image.memory(bytes),
       );
+    }
     return Center(
       child: AspectRatio(
         aspectRatio: entry.aspectRatio,