Backoff retry failed images (#126)

CHANGELOG.md

@@ -39,13 +39,16 @@ All user visible changes to this project will be documented in this file. This p
 - UI:
     - Chat page:
         - Replies having reversed order in messages. ([#193], [#192])
+        - Images sometimes not loading. ([#164], [#126])
 - Web:
     - Context menu not opening over video previews. ([#198], [#196])
 
 [#63]: /../../issues/63
 [#102]: /../../issues/102
+[#126]: /../../issues/126
 [#134]: /../../issues/134
 [#142]: /../../pull/142
+[#164]: /../../pull/164
 [#172]: /../../pull/172
 [#173]: /../../pull/173
 [#188]: /../../pull/188

lib/config.dart

@@ -139,8 +139,8 @@ class Config {
     // configuration.
     if (confRemote) {
       try {
-        var response =
-            await Dio().fetch(RequestOptions(path: '$url:$port/conf.toml'));
+        final response = await PlatformUtils.dio
+            .fetch(RequestOptions(path: '$url:$port/conf.toml'));
         if (response.statusCode == 200) {
           Map<String, dynamic> remote =
               TomlDocument.parse(response.data.toString()).toMap();

lib/domain/model/precise_date_time/src/non_web.dart

@@ -19,10 +19,7 @@ import 'package:hive/hive.dart';
 import '/domain/model_type_id.dart';
 import '/util/new_type.dart';
 
-part 'non_web.g.dart';
-
 /// [DateTime] considering the microseconds on any platform, including Web.
-@HiveType(typeId: ModelTypeId.preciseDateTime)
 class PreciseDateTime extends NewType<DateTime>
     implements Comparable<PreciseDateTime> {
   PreciseDateTime(DateTime val, {int microsecond = 0}) : super(val);
@@ -188,3 +185,19 @@ class PreciseDateTime extends NewType<DateTime>
   static PreciseDateTime parse(String formattedString) =>
       PreciseDateTime(DateTime.parse(formattedString));
 }
+
+/// [Hive] adapter for a [PreciseDateTime].
+class PreciseDateTimeAdapter extends TypeAdapter<PreciseDateTime> {
+  @override
+  final typeId = ModelTypeId.preciseDateTime;
+
+  @override
+  PreciseDateTime read(BinaryReader reader) => PreciseDateTime(
+        DateTime.fromMicrosecondsSinceEpoch(reader.readInt()),
+      );
+
+  @override
+  void write(BinaryWriter writer, PreciseDateTime obj) {
+    writer.writeInt(obj.microsecondsSinceEpoch);
+  }
+}

lib/domain/model/precise_date_time/src/web.dart

@@ -19,15 +19,11 @@ import 'package:hive/hive.dart';
 import '/domain/model_type_id.dart';
 import '/util/new_type.dart';
 
-part 'web.g.dart';
-
 /// [DateTime] considering the microseconds on any platform, including Web.
-@HiveType(typeId: ModelTypeId.preciseDateTimeWeb)
 class PreciseDateTime extends NewType<DateTime>
     implements Comparable<PreciseDateTime> {
   PreciseDateTime(DateTime val, {this.microsecond = 0}) : super(val);
 
-  @HiveField(1)
   final int microsecond;
 
   /// Returns the number of microseconds since the "Unix epoch"
@@ -209,3 +205,19 @@ class PreciseDateTime extends NewType<DateTime>
     return formattedString;
   }
 }
+
+/// [Hive] adapter for a [PreciseDateTime].
+class PreciseDateTimeAdapter extends TypeAdapter<PreciseDateTime> {
+  @override
+  final typeId = ModelTypeId.preciseDateTime;
+
+  @override
+  PreciseDateTime read(BinaryReader reader) =>
+      PreciseDateTime(reader.read() as DateTime, microsecond: reader.readInt());
+
+  @override
+  void write(BinaryWriter writer, PreciseDateTime obj) {
+    writer.write(obj.val);
+    writer.writeInt(obj.microsecond);
+  }
+}

lib/domain/model_type_id.dart

@@ -93,13 +93,12 @@ class ModelTypeId {
   static const mediaSettings = 71;
   static const chatCallDeviceId = 72;
   static const preciseDateTime = 73;
-  static const preciseDateTimeWeb = 74;
-  static const applicationSettings = 75;
-  static const sendingStatus = 76;
-  static const nativeFile = 77;
-  static const localAttachment = 78;
-  static const mediaType = 79;
-  static const hiveBackground = 80;
-  static const storageFile = 81;
-  static const chatCallCredentials = 82;
+  static const applicationSettings = 74;
+  static const sendingStatus = 75;
+  static const nativeFile = 76;
+  static const localAttachment = 77;
+  static const mediaType = 78;
+  static const hiveBackground = 79;
+  static const storageFile = 80;
+  static const chatCallCredentials = 81;
 }

lib/provider/gql/base.dart

@@ -17,14 +17,15 @@
 import 'dart:async';
 
 import 'package:async/async.dart' show StreamGroup;
-import 'package:dio/dio.dart' as dio show Dio, DioError, Options, Response;
+import 'package:dio/dio.dart' as dio show DioError, Options, Response;
 import 'package:graphql_flutter/graphql_flutter.dart';
 import 'package:mutex/mutex.dart';
 import 'package:web_socket_channel/web_socket_channel.dart';
 
 import '/config.dart';
 import '/domain/model/session.dart';
 import '/util/log.dart';
+import '/util/platform_utils.dart';
 import 'exceptions.dart';
 
 /// Base GraphQl provider.
@@ -205,13 +206,12 @@ class GraphQlClient {
     void Function(int, int)? onSendProgress,
   }) =>
       _middleware(() async {
-        var client = dio.Dio();
-        var authorized = options ?? dio.Options();
+        final dio.Options authorized = options ?? dio.Options();
         authorized.headers = (authorized.headers ?? {});
         authorized.headers!['Authorization'] = 'Bearer $token';
 
         try {
-          return await client.post<T>(
+          return await PlatformUtils.dio.post<T>(
             '${Config.url}:${Config.port}${Config.graphql}',
             data: data,
             options: authorized,

lib/ui/page/call/widget/call_cover.dart

@@ -19,6 +19,7 @@ import 'package:flutter/material.dart';
 import '/domain/model/user.dart';
 import '/domain/model/user_call_cover.dart';
 import '/ui/page/home/widget/avatar.dart';
+import '/ui/page/home/widget/retry_image.dart';
 import '/ui/widget/svg/svg.dart';
 
 /// Widget to build an [UserCallCover].
@@ -29,7 +30,7 @@ import '/ui/widget/svg/svg.dart';
 class CallCoverWidget extends StatelessWidget {
   const CallCoverWidget(this.cover, {Key? key, this.user}) : super(key: key);
 
-  /// Call cover data object.
+  /// [UserCallCover] to display.
   final UserCallCover? cover;
 
   /// [User] this [UserCallCover] belongs to.
@@ -48,7 +49,7 @@ class CallCoverWidget extends StatelessWidget {
               )
             : Stack(
                 children: [
-                  Image.network(
+                  RetryImage(
                     cover!.full.url,
                     width: double.infinity,
                     height: double.infinity,

lib/ui/page/home/page/chat/forward/view.dart

@@ -35,6 +35,7 @@ import '/ui/page/home/page/chat/widget/chat_item.dart';
 import '/ui/page/home/page/chat/forward/controller.dart';
 import '/ui/page/home/page/chat/widget/animated_fab.dart';
 import '/ui/page/home/widget/avatar.dart';
+import '/ui/page/home/widget/retry_image.dart';
 import '/ui/widget/animations.dart';
 import '/ui/widget/modal_popup.dart';
 import '/ui/widget/svg/svg.dart';
@@ -225,14 +226,16 @@ class ChatForwardView extends StatelessWidget {
             decoration: BoxDecoration(
               color: const Color(0XFFF0F2F6),
               borderRadius: BorderRadius.circular(4),
-              image: image == null
-                  ? null
-                  : DecorationImage(image: NetworkImage(image.original.url)),
             ),
             width: 50,
             height: 50,
-            child:
-                image == null ? const Icon(Icons.attach_file, size: 16) : null,
+            child: image == null
+                ? const Icon(Icons.attach_file, size: 16)
+                : RetryImage(
+                    image.medium.url,
+                    fit: BoxFit.cover,
+                    borderRadius: BorderRadius.circular(4),
+                  ),
           );
         }).toList();
       }
@@ -439,17 +442,11 @@ class ChatForwardView extends StatelessWidget {
                               width: 80,
                               height: 80,
                             )
-                  : Image.network(
+                  : RetryImage(
                       e.original.url,
                       fit: BoxFit.cover,
                       width: 80,
                       height: 80,
-                      errorBuilder: (_, __, ___) => const SizedBox(
-                        width: 80,
-                        height: 80,
-                        child:
-                            Center(child: Icon(Icons.error, color: Colors.red)),
-                      ),
                     ),
             )
           else

lib/ui/page/home/page/chat/view.dart

@@ -48,6 +48,7 @@ import '/ui/page/home/widget/app_bar.dart';
 import '/ui/page/home/widget/avatar.dart';
 import '/ui/page/home/widget/gallery_popup.dart';
 import '/ui/page/home/widget/init_callback.dart';
+import '/ui/page/home/widget/retry_image.dart';
 import '/ui/widget/animations.dart';
 import '/ui/widget/menu_interceptor/menu_interceptor.dart';
 import '/ui/widget/svg/svg.dart';
@@ -1383,7 +1384,7 @@ class _ChatViewState extends State<ChatView>
               }
             }
           } else {
-            child = Image.network(
+            child = RetryImage(
               e.original.url,
               fit: BoxFit.cover,
               width: size,
@@ -1648,9 +1649,6 @@ class _ChatViewState extends State<ChatView>
                   ? Colors.white.withOpacity(0.2)
                   : Colors.black.withOpacity(0.03),
               borderRadius: BorderRadius.circular(4),
-              image: image == null
-                  ? null
-                  : DecorationImage(image: NetworkImage(image.small.url)),
             ),
             width: 30,
             height: 30,
@@ -1660,7 +1658,11 @@ class _ChatViewState extends State<ChatView>
                     color: fromMe ? Colors.white : const Color(0xFFDDDDDD),
                     size: 16,
                   )
-                : null,
+                : RetryImage(
+                    image.small.url,
+                    fit: BoxFit.cover,
+                    borderRadius: BorderRadius.circular(4),
+                  ),
           );
         }).toList();
       }
@@ -1884,9 +1886,6 @@ class _ChatViewState extends State<ChatView>
                     ? Colors.white.withOpacity(0.2)
                     : Colors.black.withOpacity(0.03),
                 borderRadius: BorderRadius.circular(4),
-                image: image == null
-                    ? null
-                    : DecorationImage(image: NetworkImage(image.small.url)),
               ),
               width: 30,
               height: 30,
@@ -1896,7 +1895,11 @@ class _ChatViewState extends State<ChatView>
                       color: fromMe ? Colors.white : const Color(0xFFDDDDDD),
                       size: 16,
                     )
-                  : null,
+                  : RetryImage(
+                      image.small.url,
+                      fit: BoxFit.cover,
+                      borderRadius: BorderRadius.circular(4),
+                    ),
             );
           }).toList();
         }

lib/ui/page/home/page/chat/widget/chat_item.dart

@@ -46,7 +46,7 @@ import '/ui/page/home/page/chat/forward/view.dart';
 import '/ui/page/home/widget/avatar.dart';
 import '/ui/page/home/widget/confirm_dialog.dart';
 import '/ui/page/home/widget/gallery_popup.dart';
-import '/ui/page/home/widget/init_callback.dart';
+import '/ui/page/home/widget/retry_image.dart';
 import '/ui/widget/animated_delayed_switcher.dart';
 import '/ui/widget/animations.dart';
 import '/ui/widget/context_menu/menu.dart';
@@ -200,20 +200,12 @@ class ChatItemWidget extends StatefulWidget {
     } else {
       attachment = KeyedSubtree(
         key: const Key('SentImage'),
-        child: Image.network(
+        child: RetryImage(
           (e as ImageAttachment).big.url,
           key: key,
           fit: BoxFit.cover,
           height: 300,
-          errorBuilder: (_, __, ___) {
-            return InitCallback(
-              callback: onError,
-              child: const SizedBox.square(
-                dimension: 300,
-                child: Center(child: CircularProgressIndicator()),
-              ),
-            );
-          },
+          onForbidden: onError,
         ),
       );
     }
@@ -1042,13 +1034,6 @@ class _ChatItemWidgetState extends State<ChatItemWidget> {
                       ? Colors.white.withOpacity(0.25)
                       : Colors.black.withOpacity(0.03),
                   borderRadius: BorderRadius.circular(10),
-                  image: image == null
-                      ? null
-                      : DecorationImage(
-                          image: NetworkImage(image.medium.url),
-                          onError: (_, __) => widget.onAttachmentError?.call(),
-                          fit: BoxFit.cover,
-                        ),
                 ),
                 width: 50,
                 height: 50,
@@ -1058,7 +1043,14 @@ class _ChatItemWidgetState extends State<ChatItemWidget> {
                         color: fromMe ? Colors.white : const Color(0xFFDDDDDD),
                         size: 28,
                       )
-                    : null,
+                    : RetryImage(
+                        image.medium.url,
+                        onForbidden: widget.onAttachmentError,
+                        fit: BoxFit.cover,
+                        width: double.infinity,
+                        height: double.infinity,
+                        borderRadius: BorderRadius.circular(10.0),
+                      ),
               );
             })
             .take(3)

lib/ui/page/home/tab/chats/widget/recent_chat.dart

@@ -37,7 +37,7 @@ import '/ui/page/home/tab/chats/widget/periodic_builder.dart';
 import '/ui/page/home/widget/animated_typing.dart';
 import '/ui/page/home/widget/avatar.dart';
 import '/ui/page/home/widget/chat_tile.dart';
-import '/ui/page/home/widget/init_callback.dart';
+import '/ui/page/home/widget/retry_image.dart';
 import '/ui/widget/context_menu/menu.dart';
 import '/ui/widget/svg/svg.dart';
 import '/ui/widget/widget_button.dart';
@@ -553,21 +553,12 @@ class RecentChatTile extends StatelessWidget {
     }
 
     if (e is ImageAttachment) {
-      content = Image.network(
+      content = RetryImage(
         '${Config.files}${e.medium.relativeRef}',
         fit: BoxFit.cover,
-        errorBuilder: (_, __, ___) {
-          return InitCallback(
-            callback: onError,
-            child: const Center(
-              child: SizedBox(
-                width: 20,
-                height: 20,
-                child: CircularProgressIndicator(strokeWidth: 3),
-              ),
-            ),
-          );
-        },
+        width: double.infinity,
+        height: double.infinity,
+        onForbidden: onError,
       );
     }