✨ Channel content auto refresh after long time background activity

lib/screens/channel/channel_chat.dart

@@ -20,7 +20,6 @@ import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/channel/channel_call_indicator.dart';
 import 'package:solian/widgets/chat/call/chat_call_action.dart';
-import 'package:solian/widgets/chat/chat_event.dart';
 import 'package:solian/widgets/chat/chat_event_list.dart';
 import 'package:solian/widgets/chat/chat_message_input.dart';
 import 'package:solian/widgets/current_state_action.dart';
@@ -39,7 +38,10 @@ class ChannelChatScreen extends StatefulWidget {
   State<ChannelChatScreen> createState() => _ChannelChatScreenState();
 }
 
-class _ChannelChatScreenState extends State<ChannelChatScreen> {
+class _ChannelChatScreenState extends State<ChannelChatScreen>
+    with WidgetsBindingObserver {
+  DateTime? _isOutOfSyncSince;
+
   bool _isBusy = false;
   int? _accountId;
 
@@ -123,20 +125,38 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
     });
   }
 
+  void _keepUpdateWithServer() {
+    _getOngoingCall();
+    _chatController.getEvents(_channel!, widget.realm);
+    setState(() => _isOutOfSyncSince = null);
+  }
+
   Event? _messageToReplying;
   Event? _messageToEditing;
 
-  Widget buildHistoryBody(Event item, {bool isMerged = false}) {
+  @override
-    return ChatEvent(
+  void didChangeAppLifecycleState(AppLifecycleState state) {
-      key: Key('m${item.uuid}'),
+    switch (state) {
-      item: item,
+      case AppLifecycleState.resumed:
-      isMerged: isMerged,
+        if (_isOutOfSyncSince == null) break;
-      chatController: _chatController,
+        if (DateTime.now().difference(_isOutOfSyncSince!).inSeconds < 60) break;
-    );
+        _keepUpdateWithServer();
+        break;
+      case AppLifecycleState.paused:
+        if (mounted) {
+          setState(() => _isOutOfSyncSince = DateTime.now());
+        }
+        break;
+      default:
+        break;
+    }
   }
 
   @override
   void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+
     _accountId = Get.find<AuthProvider>().userProfile.value!['id'];
 
     _chatController = ChatEventController();
@@ -147,21 +167,10 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
       _chatController.getEvents(_channel!, widget.realm);
       _listenMessages();
     });
-
-    super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
-    if (_isBusy || _channel == null) {
-      return Material(
-        color: Theme.of(context).colorScheme.surface,
-        child: const Center(
-          child: CircularProgressIndicator(),
-        ),
-      );
-    }
-
     String title = _channel?.name ?? 'loading'.tr;
     String? placeholder;
 
@@ -185,7 +194,8 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
         actions: [
           const BackgroundStateWidget(),
           Builder(builder: (context) {
-            if (_isBusy) return const SizedBox();
+            if (_isBusy || _channel == null) return const SizedBox();
+
             return ChatCallButton(
               realm: _channel!.realm,
               channel: _channel!,
@@ -195,6 +205,8 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
           IconButton(
             icon: const Icon(Icons.more_vert),
             onPressed: () {
+              if (_channel == null) return;
+
               AppRouter.instance
                   .pushNamed(
                 'channelDetail',
@@ -219,7 +231,14 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
           ),
         ],
       ),
-      body: Column(
+      body: Builder(builder: (context) {
+        if (_isBusy || _channel == null) {
+          return const Center(
+            child: CircularProgressIndicator(),
+          );
+        }
+
+        return Column(
           children: [
             if (_ongoingCall != null)
               ChannelCallIndicator(
@@ -239,6 +258,18 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
                 },
               ),
             ),
+            if (_isOutOfSyncSince != null)
+              ListTile(
+                tileColor: Theme.of(context).colorScheme.surfaceContainerLow,
+                leading: const Icon(Icons.history_toggle_off),
+                title: Text('messageOutOfSync'.tr),
+                subtitle: Text('messageOutOfSyncCaption'.tr),
+                onTap: _isBusy
+                    ? null
+                    : () {
+                        _keepUpdateWithServer();
+                      },
+              ),
             Obx(() {
               if (_chatController.isLoading.isTrue) {
                 return const LinearProgressIndicator().animate().slideY();
@@ -272,13 +303,15 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
               ),
             ),
           ],
-      ),
+        );
+      }),
     );
   }
 
   @override
   void dispose() {
     _subscription?.cancel();
+    WidgetsBinding.instance.removeObserver(this);
     super.dispose();
   }
 }

lib/translations/en_us.dart

@@ -370,4 +370,7 @@ const i18nEnglish = {
   'callStatusDisconnected': 'Disconnected',
   'callStatusConnecting': 'Connecting',
   'callStatusReconnected': 'Reconnecting',
+  'messageOutOfSync': 'May Out of Sync with Server',
+  'messageOutOfSyncCaption':
+      'Since the App has entered the background, there may be a time difference between the message list and the server. Click to Refresh.',
 };

lib/translations/zh_cn.dart

@@ -337,4 +337,6 @@ const i18nSimplifiedChinese = {
   'callStatusDisconnected': '已断开',
   'callStatusConnecting': '连接中',
   'callStatusReconnected': '重连中',
+  'messageOutOfSync': '消息可能与服务器脱节',
+  'messageOutOfSyncCaption': '由于 App 进入后台，消息列表可能与服务器存在时差，点击刷新。',
 };