TW-2635 Add typing timer to receiver

lib/pages/chat/chat_app_bar_title.dart

@@ -11,6 +11,7 @@ import 'package:fluffychat/domain/contact_manager/contacts_manager.dart';
 import 'package:fluffychat/pages/chat/chat_app_bar_title_style.dart';
 import 'package:fluffychat/presentation/extensions/contact/presentation_contact_extension.dart';
 import 'package:fluffychat/presentation/model/contact/presentation_contact.dart';
+import 'package:fluffychat/pages/chat/typing_timer_wrapper.dart';
 import 'package:fluffychat/resource/image_paths.dart';
 import 'package:fluffychat/utils/common_helper.dart';
 import 'package:fluffychat/utils/room_status_extension.dart';
@@ -252,19 +253,21 @@ class _DirectChatAppBarStatusContent extends StatelessWidget {
                     text: L10n.of(context)!.loadingStatus,
                   );
                 }
-                final typingText = room.getLocalizedTypingText(context);
-                if (typingText.isEmpty) {
-                  return ChatAppBarTitleText(
+                return TypingTimerWrapper(
+                  room: room,
+                  l10n: L10n.of(context)!,
+                  typingWidget: _ChatAppBarTitleTyping(
+                    typingText: room.getLocalizedTypingText(L10n.of(context)!),
+                  ),
+                  notTypingWidget: ChatAppBarTitleText(
                     text: room
                         .getLocalizedStatus(
                           context,
                           presence: directChatPresence,
                         )
                         .capitalize(context),
-                  );
-                } else {
-                  return _ChatAppBarTitleTyping(typingText: typingText);
-                }
+                  ),
+                );
               },
             );
           },
@@ -296,14 +299,16 @@ class _GroupChatAppBarStatusContent extends StatelessWidget {
         if (snapshot.hasData && connectivityResult == ConnectivityResult.none) {
           return ChatAppBarTitleText(text: L10n.of(context)!.noConnection);
         }
-        final typingText = room.getLocalizedTypingText(context);
-        if (typingText.isEmpty) {
-          return ChatAppBarTitleText(
+        return TypingTimerWrapper(
+          room: room,
+          l10n: L10n.of(context)!,
+          typingWidget: _ChatAppBarTitleTyping(
+            typingText: room.getLocalizedTypingText(L10n.of(context)!),
+          ),
+          notTypingWidget: ChatAppBarTitleText(
             text: room.getLocalizedStatus(context).capitalize(context),
-          );
-        } else {
-          return _ChatAppBarTitleTyping(typingText: typingText);
-        }
+          ),
+        );
       },
     );
   }

lib/pages/chat/typing_timer_wrapper.dart

@@ -0,0 +1,78 @@
+import 'package:async/async.dart';
+import 'package:fluffychat/generated/l10n/app_localizations.dart';
+import 'package:fluffychat/utils/room_status_extension.dart';
+import 'package:flutter/widgets.dart';
+import 'package:matrix/matrix.dart';
+
+class TypingTimerWrapper extends StatefulWidget {
+  const TypingTimerWrapper({
+    super.key,
+    required this.room,
+    required this.l10n,
+    required this.typingWidget,
+    this.notTypingWidget = const SizedBox(),
+  });
+
+  final Room room;
+  final L10n l10n;
+  final Widget typingWidget;
+  final Widget notTypingWidget;
+
+  @override
+  State<TypingTimerWrapper> createState() => _TypingTimerWrapperState();
+}
+
+class _TypingTimerWrapperState extends State<TypingTimerWrapper> {
+  bool showTyping = false;
+  late RestartableTimer timer;
+
+  void checkTyping() {
+    if (!mounted) return;
+
+    if (widget.room.typingUsers.isEmpty) {
+      showTyping = false;
+      timer.cancel();
+      return;
+    }
+
+    if (widget.room.getLocalizedTypingText(widget.l10n).isNotEmpty) {
+      showTyping = true;
+      timer.reset();
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    timer = RestartableTimer(
+      const Duration(seconds: 30),
+      () {
+        if (!mounted) return;
+
+        setState(() {
+          showTyping = false;
+        });
+      },
+    )..cancel();
+    checkTyping();
+  }
+
+  @override
+  void didUpdateWidget(covariant TypingTimerWrapper oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    checkTyping();
+  }
+
+  @override
+  void dispose() {
+    timer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (showTyping) return widget.typingWidget;
+
+    return widget.notTypingWidget;
+  }
+}

lib/pages/chat_list/chat_list_item_subtitle.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
+import 'package:fluffychat/pages/chat/typing_timer_wrapper.dart';
 import 'package:fluffychat/presentation/mixins/chat_list_item_mixin.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_item_style.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
@@ -22,7 +23,7 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
 
   @override
   Widget build(BuildContext context) {
-    final typingText = room.getLocalizedTypingText(context);
+    final typingText = room.getLocalizedTypingText(L10n.of(context)!);
     final isGroup = !room.isDirectChat;
     final unreadBadgeSize = ChatListItemStyle.unreadBadgeSize(
       room.isUnreadOrInvited,
@@ -153,25 +154,28 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
     bool isGroup,
     bool isMediaEvent,
   ) {
-    return typingText.isNotEmpty
-        ? typingTextWidget(typingText, context)
-        : isGroup
-            ? chatListItemSubtitleForGroup(
-                context: context,
-                room: room,
-                event: lastEvent,
-              )
-            : isMediaEvent
-                ? chatListItemMediaPreviewSubTitle(
-                    context,
-                    lastEvent,
-                  )
-                : textContentWidget(
-                    room,
-                    lastEvent,
-                    context,
-                    isGroup,
-                    room.isUnreadOrInvited,
-                  );
+    return TypingTimerWrapper(
+      room: room,
+      l10n: L10n.of(context)!,
+      typingWidget: typingTextWidget(typingText, context),
+      notTypingWidget: isGroup
+          ? chatListItemSubtitleForGroup(
+              context: context,
+              room: room,
+              event: lastEvent,
+            )
+          : isMediaEvent
+              ? chatListItemMediaPreviewSubTitle(
+                  context,
+                  lastEvent,
+                )
+              : textContentWidget(
+                  room,
+                  lastEvent,
+                  context,
+                  isGroup,
+                  room.isUnreadOrInvited,
+                ),
+    );
   }
 }

lib/utils/room_status_extension.dart

@@ -22,30 +22,30 @@ extension RoomStatusExtension on Room {
     return _getLocalizedStatusGroupChat(context);
   }
 
-  String getLocalizedTypingText(BuildContext context) {
+  String getLocalizedTypingText(L10n l10n) {
     var typingText = '';
     final typingUsers = this.typingUsers;
     typingUsers.removeWhere((User u) => u.id == client.userID);
 
+    if (typingUsers.isEmpty) return '';
+
     if (AppConfig.hideTypingUsernames) {
-      typingText = L10n.of(context)!.isTyping;
+      typingText = l10n.isTyping;
       if (typingUsers.first.id != directChatMatrixID) {
-        typingText =
-            L10n.of(context)!.numUsersTyping(typingUsers.length.toString());
+        typingText = l10n.numUsersTyping(typingUsers.length.toString());
       }
     } else if (typingUsers.length == 1) {
-      typingText = L10n.of(context)!.isTyping;
+      typingText = l10n.isTyping;
       if (typingUsers.first.id != directChatMatrixID) {
-        typingText =
-            L10n.of(context)!.userIsTyping(typingUsers.first.calcDisplayname());
+        typingText = l10n.userIsTyping(typingUsers.first.calcDisplayname());
       }
     } else if (typingUsers.length == 2) {
-      typingText = L10n.of(context)!.userAndUserAreTyping(
+      typingText = l10n.userAndUserAreTyping(
         typingUsers.first.calcDisplayname(),
         typingUsers[1].calcDisplayname(),
       );
     } else if (typingUsers.length > 2) {
-      typingText = L10n.of(context)!.userAndOthersAreTyping(
+      typingText = l10n.userAndOthersAreTyping(
         typingUsers.first.calcDisplayname(),
         (typingUsers.length - 1).toString(),
       );
@@ -86,7 +86,7 @@ extension RoomStatusExtension on Room {
   }
 
   bool isTypingText(BuildContext context) {
-    return getLocalizedTypingText(context).isNotEmpty &&
+    return getLocalizedTypingText(L10n.of(context)!).isNotEmpty &&
         lastEvent?.senderId == client.userID &&
         lastEvent!.status.isSending;
   }

test/pages/chat/typing_timer_wrapper_test.dart

@@ -0,0 +1,64 @@
+import 'package:fluffychat/generated/l10n/app_localizations.dart';
+import 'package:fluffychat/pages/chat/typing_timer_wrapper.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:matrix/matrix.dart';
+import 'package:mockito/annotations.dart';
+import 'package:mockito/mockito.dart';
+
+import 'typing_timer_wrapper_test.mocks.dart';
+
+@GenerateNiceMocks([
+  MockSpec<Room>(),
+  MockSpec<Client>(),
+  MockSpec<L10n>(),
+])
+void main() {
+  testWidgets('typing timer wrapper should stop showing typing after 30s',
+      (tester) async {
+    final room = MockRoom();
+    final client = MockClient();
+    final l10n = MockL10n();
+    const typingText = 'typing';
+    const notTypingText = 'not typing';
+    const typingWidget = Text(typingText);
+    const notTypingWidget = Text(notTypingText);
+    when(client.userID).thenReturn('owner');
+    when(room.client).thenReturn(client);
+    when(room.typingUsers).thenReturn([]);
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: TypingTimerWrapper(
+            room: room,
+            l10n: l10n,
+            typingWidget: typingWidget,
+            notTypingWidget: notTypingWidget,
+          ),
+        ),
+      ),
+    );
+    expect(find.text(notTypingText), findsOneWidget);
+    expect(find.text(typingText), findsNothing);
+
+    when(room.typingUsers).thenReturn([User('id', room: room)]);
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: TypingTimerWrapper(
+            room: room,
+            l10n: l10n,
+            typingWidget: typingWidget,
+            notTypingWidget: notTypingWidget,
+          ),
+        ),
+      ),
+    );
+    expect(find.text(typingText), findsOneWidget);
+    expect(find.text(notTypingText), findsNothing);
+
+    await tester.pump(const Duration(seconds: 30));
+    expect(find.text(notTypingText), findsOneWidget);
+    expect(find.text(typingText), findsNothing);
+  });
+}