✨ 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 进入后台，消息列表可能与服务器存在时差，点击刷新。',
 };

lib/widgets/chat/call/call_controls.dart

@@ -159,8 +159,9 @@ class _ControlsWidgetState extends State<ControlsWidget> {
         }
         var track = await LocalVideoTrack.createScreenShareTrack(
           ScreenShareCaptureOptions(
+            captureScreenAudio: true,
             sourceId: source.id,
-            maxFrameRate: 15.0,
+            maxFrameRate: 30.0,
           ),
         );
         await _participant.publishVideoTrack(track);
@@ -174,6 +175,7 @@ class _ControlsWidgetState extends State<ControlsWidget> {
       var track = await LocalVideoTrack.createScreenShareTrack(
         const ScreenShareCaptureOptions(
           useiOSBroadcastExtension: true,
+          captureScreenAudio: true,
           maxFrameRate: 30.0,
         ),
       );

lib/widgets/navigation/app_navigation.dart

@@ -4,17 +4,17 @@ import 'package:get/utils.dart';
 abstract class AppNavigation {
   static List<AppNavigationDestination> destinations = [
     AppNavigationDestination(
-      icon: const Icon(Icons.home),
+      icon: Icons.home,
       label: 'home'.tr,
       page: 'home',
     ),
     AppNavigationDestination(
-      icon: const Icon(Icons.workspaces),
+      icon: Icons.workspaces,
       label: 'realms'.tr,
       page: 'realms',
     ),
     AppNavigationDestination(
-      icon: const Icon(Icons.forum),
+      icon: Icons.forum,
       label: 'channelTypeDirect'.tr,
       page: 'chat',
     ),
@@ -25,7 +25,7 @@ abstract class AppNavigation {
 }
 
 class AppNavigationDestination {
-  final Widget icon;
+  final IconData icon;
   final String label;
   final String page;
 

lib/widgets/navigation/app_navigation_drawer.dart

@@ -81,7 +81,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
               }
 
               return ListTile(
-                contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+                contentPadding: const EdgeInsets.only(left: 20, right: 20),
                 title: Text(
                   auth.userProfile.value!['nick'],
                   maxLines: 1,
@@ -154,7 +154,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
                   });
                 },
               );
-            }).paddingOnly(top: 8),
+            }).paddingSymmetric(vertical: 8),
             const Divider(thickness: 0.3, height: 1),
             Column(
               children: AppNavigation.destinations
@@ -163,7 +163,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
                       contentPadding: const EdgeInsets.symmetric(
                         horizontal: 20,
                       ),
-                      leading: e.icon,
+                      leading: Icon(e.icon, size: 20).paddingAll(2),
                       title: Text(e.label),
                       enabled: true,
                       onTap: () {