Merge pull request #83 from pangeachat/popup

usability updates

assets/l10n/intl_en.arb

@@ -3113,8 +3113,8 @@
     "almostPerfect": "That seems right! Here's what I would have said.",
     "prettyGood": "Pretty good! Here's what I would have said.",
     "letMeThink": "Hmm, let's see how you did!",
-    "clickMessageTitle": "Select messages for language help!",
-    "clickMessageBody": "Messages always show in your target language but you can select them to access definitions and translations!",
+    "clickMessageTitle": "Need help?",
+    "clickMessageBody": "Click messages to access definitions, translations, and audio!",
     "understandingMessagesTitle": "Definitions and translations!",
     "addToClass": "Add this chat to ",
     "understandingMessagesBody": "Click underlined words for definitions. Translate with message options (upper right).",

assets/l10n/intl_es.arb

@@ -3275,8 +3275,6 @@
   "almostPerfect": "¡Eso parece correcto! Esto es lo que yo hubiera dicho.",
   "prettyGood": "¡Bastante bien! Esto es lo que yo hubiera dicho.",
   "letMeThink": "Hmm, ¡vamos a ver cómo le fue!",
-  "clickMessageTitle": "¡Seleccione mensajes para obtener ayuda con el idioma!",
-  "clickMessageBody": "Los mensajes siempre se muestran en su idioma de destino, ¡pero puede seleccionarlos para acceder a definiciones y traducciones!",
   "understandingMessagesTitle": "¡Definiciones y traducciones!",
   "understandingMessagesBody": "Haga clic en las palabras subrayadas para ver las definiciones. Traduzca con 'opciones de mensajes' (arriba a la derecha).",
   "allDone": "¡Listo!",
@@ -4576,6 +4574,8 @@
   "messageAudio": "mensaje de audio",
   "definitions": "definiciones",
   "subscribedToUnlockTools": "Suscríbase para desbloquear herramientas lingüísticas, como",
+  "clickMessageTitle": "¿Necesitas ayuda?",
+  "clickMessageBody": "Haga clic en los mensajes para acceder a las definiciones, traducciones y audio.",
   "more": "Más",
   "translationTooltip": "Traducir",
   "audioTooltip": "Reproducir audio"

lib/pages/chat/chat.dart

@@ -24,12 +24,14 @@ import 'package:fluffychat/pangea/models/pangea_message_event.dart';
 import 'package:fluffychat/pangea/models/student_analytics_summary_model.dart';
 import 'package:fluffychat/pangea/utils/error_handler.dart';
 import 'package:fluffychat/pangea/utils/firebase_analytics.dart';
+import 'package:fluffychat/pangea/utils/instructions.dart';
 import 'package:fluffychat/pangea/utils/report_message.dart';
 import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart';
 import 'package:fluffychat/pangea/widgets/igc/pangea_text_controller.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/error_reporter.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/app_lock.dart';
@@ -347,6 +349,17 @@ class ChatController extends State<ChatPageWithRoom>
     loadTimelineFuture = _getTimeline();
     try {
       await loadTimelineFuture;
+      // #Pangea
+      if (timeline != null) {
+        choreographer.pangeaController.instructions.show(
+          context,
+          InstructionsEnum.clickMessage,
+          timeline!.events.firstWhereOrNull((e) => e.isVisibleInGui)?.eventId ??
+              '',
+          true,
+        );
+      }
+      // Pangea#
       final fullyRead = room.fullyRead;
       if (fullyRead.isEmpty) return;
       if (timeline!.events.any((event) => event.eventId == fullyRead)) {

lib/pangea/widgets/chat/message_toolbar.dart

@@ -147,7 +147,7 @@ class MessageToolbar extends StatefulWidget {
 class MessageToolbarState extends State<MessageToolbar> {
   Widget? child;
   MessageMode? currentMode;
-  bool hasSelectedText = false;
+  bool updatingMode = false;
   late StreamSubscription<String?> selectionStream;
   late StreamSubscription<MessageMode> toolbarModeStream;
 
@@ -193,10 +193,14 @@ class MessageToolbarState extends State<MessageToolbar> {
   }
 
   void updateMode(MessageMode newMode) {
+    if (updatingMode) return;
     debugPrint("updating toolbar mode");
     final bool subscribed =
         MatrixState.pangeaController.subscriptionController.isSubscribed;
-    setState(() => currentMode = newMode);
+    setState(() {
+      currentMode = newMode;
+      updatingMode = true;
+    });
     if (!subscribed) {
       child = MessageUnsubscribedCard(
         languageTool: getModeTitle(newMode),
@@ -218,7 +222,9 @@ class MessageToolbarState extends State<MessageToolbar> {
           break;
       }
     }
-    setState(() {});
+    setState(() {
+      updatingMode = false;
+    });
   }
 
   void showTranslation() {
@@ -266,20 +272,17 @@ class MessageToolbarState extends State<MessageToolbar> {
   @override
   void initState() {
     super.initState();
-    if (widget.textSelection.selectedText != null) {
-      hasSelectedText = true;
-    }
-
     toolbarModeStream = widget.toolbarModeStream.stream.listen((mode) {
       updateMode(mode);
     });
 
-    Timer? timer;
+    updateMode(MessageMode.play);
 
+    Timer? timer;
     selectionStream =
         widget.textSelection.selectionStream.stream.listen((value) {
       timer?.cancel();
-      timer = Timer(const Duration(milliseconds: 750), () {
+      timer = Timer(const Duration(milliseconds: 500), () {
         if (currentMode != null || value != null && value.isNotEmpty) {
           updateMode(currentMode ?? MessageMode.translation);
         }

lib/pangea/widgets/igc/pangea_rich_text.dart

@@ -7,6 +7,7 @@ import 'package:fluffychat/pangea/controllers/pangea_controller.dart';
 import 'package:fluffychat/pangea/models/message_data_models.dart';
 import 'package:fluffychat/pangea/models/pangea_message_event.dart';
 import 'package:fluffychat/pangea/utils/error_handler.dart';
+import 'package:fluffychat/pangea/utils/instructions.dart';
 import 'package:fluffychat/pangea/widgets/chat/message_context_menu.dart';
 import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart';
 import 'package:fluffychat/widgets/matrix.dart';
@@ -109,6 +110,14 @@ class PangeaRichTextState extends State<PangeaRichText> {
 
   @override
   Widget build(BuildContext context) {
+    if (blur > 0) {
+      pangeaController.instructions.show(
+        context,
+        InstructionsEnum.blurMeansTranslate,
+        widget.pangeaMessageEvent.eventId,
+      );
+    }
+
     //TODO - take out of build function of every message
     final Widget richText = SelectableText.rich(
       onSelectionChanged: (selection, cause) {