diff --git a/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_field.dart b/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_field.dart index 091cedbfa..dc69b83c2 100644 --- a/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_field.dart +++ b/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_field.dart @@ -1,6 +1,6 @@ -///Dart imports library; +///Dart imports import 'dart:math' as math; ///Package imports @@ -56,124 +56,129 @@ class _ChatTextFieldState extends State { height: 40, child: Selector>>( - ///item1: whether chat is resumed or not - ///item2: number of blacklisted users - ///item3: list of blacklisted user ids - selector: (_, meetingStore) => Tuple3( - meetingStore.chatControls["enabled"], - meetingStore.blackListedUserIds.length, - meetingStore.blackListedUserIds), - builder: (_, chatControls, __) { - return chatControls.item1 + ///item1: whether chat is resumed or not + ///item2: number of blacklisted users + ///item3: list of blacklisted user ids + selector: (_, meetingStore) => Tuple3( + meetingStore.chatControls["enabled"], + meetingStore.blackListedUserIds.length, + meetingStore.blackListedUserIds), + builder: (_, chatControls, __) { + return chatControls.item1 - ///If chat is not paused we render the text field - ///else we render the paused chat toast - ? Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - ), - child: chatControls.item3.contains(context - .read() - .localPeer - ?.customerUserId) + ///If chat is not paused we render the text field + ///else we render the paused chat toast + ? Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + ), + child: chatControls.item3.contains(context + .read() + .localPeer + ?.customerUserId) - ///If the user is blocked from sending messages - ? Row( - children: [ - Expanded( - child: Container( - color: widget.toastBackgroundColor ?? - HMSThemeColors.surfaceDefault, - height: 36, - child: Center( - child: HMSSubheadingText( - text: - "You’ve been blocked from sending messages", - textColor: HMSThemeColors - .onSurfaceMediumEmphasis), + ///If the user is blocked from sending messages + ? Row( + children: [ + Expanded( + child: Container( + color: widget.toastBackgroundColor ?? + HMSThemeColors.surfaceDefault, + height: 36, + child: Center( + child: HMSSubheadingText( + text: + "You’ve been blocked from sending messages", + textColor: HMSThemeColors + .onSurfaceMediumEmphasis), + ), + ), ), - ), - ), - ], - ) - : Row( - children: [ - Expanded( - child: Container( - color: HMSThemeColors.surfaceDefault, - child: Selector( - selector: (_, meetingStore) => - meetingStore.recipientSelectorValue, - builder: (_, selectedValue, __) { - return TextField( - ///Here if the selected value is empty or equal to "Choose a Recipient" we disable the text field - enabled: selectedValue != - "Choose a Recipient", - textCapitalization: - TextCapitalization.sentences, - textInputAction: TextInputAction.send, - onTapOutside: (event) => FocusManager - .instance.primaryFocus - ?.unfocus(), - onSubmitted: (value) { - widget.sendMessage( - messageTextController); - messageTextController.clear(); - }, - onChanged: (value) { - setState(() {}); - }, - style: HMSTextStyle.setTextStyle( - color: HMSThemeColors - .onSurfaceHighEmphasis, - fontWeight: FontWeight.w400, - height: 20 / 14, - fontSize: 14, - letterSpacing: 0.25), - controller: messageTextController, - decoration: InputDecoration( - isDense: true, - suffixIcon: GestureDetector( - onTap: () { - if (messageTextController - .text - .trim() - .isEmpty) { - Utilities.showToast( - "Message can't be empty"); - } - widget.sendMessage( - messageTextController); - messageTextController - .clear(); - }, - child: SvgPicture.asset( - "packages/hms_room_kit/lib/src/assets/icons/send_message.svg", - fit: BoxFit.scaleDown, - colorFilter: ColorFilter.mode( + ], + ) + : Row( + children: [ + Expanded( + child: Container( + color: HMSThemeColors.surfaceDefault, + child: Selector( + selector: (_, meetingStore) => + meetingStore + .recipientSelectorValue, + builder: (_, selectedValue, __) { + return TextField( + ///Here if the selected value is empty or equal to "Choose a Recipient" we disable the text field + enabled: selectedValue != + "Choose a Recipient", + textCapitalization: + TextCapitalization.sentences, + textInputAction: + TextInputAction.send, + onTapOutside: (event) => + FocusManager + .instance.primaryFocus + ?.unfocus(), + onSubmitted: (value) { + widget.sendMessage( + messageTextController); + messageTextController.clear(); + }, + onChanged: (value) { + setState(() {}); + }, + style: HMSTextStyle.setTextStyle( + color: HMSThemeColors + .onSurfaceHighEmphasis, + fontWeight: FontWeight.w400, + height: 20 / 14, + fontSize: 14, + letterSpacing: 0.25), + controller: messageTextController, + decoration: InputDecoration( + isDense: true, + suffixIcon: GestureDetector( + onTap: () { + if (messageTextController + .text + .trim() + .isEmpty) { + Utilities.showToast( + "Message can't be empty"); + } + widget.sendMessage( + messageTextController); messageTextController - .text - .trim() - .isEmpty - ? HMSThemeColors - .onSurfaceLowEmphasis - : HMSThemeColors - .onSurfaceHighEmphasis, - BlendMode.srcIn), - )), - focusedBorder: OutlineInputBorder( - borderSide: BorderSide( - width: 2, - color: HMSThemeColors - .primaryDefault), - borderRadius: - const BorderRadius.all( - Radius.circular(8))), - enabledBorder: InputBorder.none, - errorBorder: InputBorder.none, - disabledBorder: InputBorder.none, - hintStyle: HMSTextStyle - .setTextStyle( + .clear(); + }, + child: SvgPicture.asset( + "packages/hms_room_kit/lib/src/assets/icons/send_message.svg", + fit: BoxFit.scaleDown, + colorFilter: ColorFilter.mode( + messageTextController + .text + .trim() + .isEmpty + ? HMSThemeColors + .onSurfaceLowEmphasis + : HMSThemeColors + .onSurfaceHighEmphasis, + BlendMode.srcIn), + )), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide( + width: 2, + color: HMSThemeColors + .primaryDefault), + borderRadius: + const BorderRadius.all( + Radius.circular( + 8))), + enabledBorder: + InputBorder.none, + errorBorder: InputBorder.none, + disabledBorder: + InputBorder.none, + hintStyle: HMSTextStyle.setTextStyle( color: HMSThemeColors .onSurfaceLowEmphasis, fontSize: 14, @@ -181,81 +186,82 @@ class _ChatTextFieldState extends State { letterSpacing: 0.25, fontWeight: FontWeight.w400), - contentPadding: - const EdgeInsets.symmetric( - vertical: 8, - horizontal: 12), - hintText: HMSRoomLayout.chatData - ?.messagePlaceholder ?? - "Send a message..."), - ); - }), - ), - ) - ], - )) - : HMSToast( - toastColor: widget.toastBackgroundColor ?? - HMSThemeColors.surfaceDefault, - toastPosition: 0, - subtitle: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - HMSSubheadingText( - text: "Chat paused", - textColor: HMSThemeColors.onSurfaceHighEmphasis, - lineHeight: 20, - letterSpacing: 0.1, - fontWeight: FontWeight.w400, + contentPadding: + const EdgeInsets.symmetric( + vertical: 8, + horizontal: 12), + hintText: HMSRoomLayout + .chatData + ?.messagePlaceholder ?? + "Send a message..."), + ); + }), + ), + ) + ], + )) + : HMSToast( + toastColor: widget.toastBackgroundColor ?? + HMSThemeColors.surfaceDefault, + toastPosition: 0, + subtitle: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + HMSSubheadingText( + text: "Chat paused", + textColor: HMSThemeColors.onSurfaceHighEmphasis, + lineHeight: 20, + letterSpacing: 0.1, + fontWeight: FontWeight.w400, + ), + HMSSubtitleText( + text: + "Chat has been paused by ${context.read().chatControls["updatedBy"].toString().substring(0, math.min(10, context.read().chatControls["updatedBy"].toString().length))}", + textColor: HMSThemeColors.onSurfaceMediumEmphasis, + ) + ], ), - HMSSubtitleText( - text: - "Chat has been paused by ${context.read().chatControls["updatedBy"].toString().substring(0, math.min(10, context.read().chatControls["updatedBy"].toString().length))}", - textColor: HMSThemeColors.onSurfaceMediumEmphasis, - ) - ], - ), - action: (HMSRoomLayout - .chatData?.realTimeControls?.canDisableChat ?? - false) - ? HMSToastButton( - buttonTitle: "Resume", - action: () { - context - .read() - .setSessionMetadataForKey( - key: SessionStoreKeyValues - .getNameFromMethod( - SessionStoreKey.chatState), - metadata: { - "enabled": true, - "updatedBy": { - "peerID": context - .read() - .localPeer - ?.peerId, - "userID": context - .read() - .localPeer - ?.customerUserId, - "userName": context - .read() - .localPeer - ?.name - }, - "updatedAt": DateTime.now() - .millisecondsSinceEpoch //unix timestamp in miliseconds - }); - }, - height: 36, - width: 88, - buttonColor: HMSThemeColors.primaryDefault, - textColor: HMSThemeColors.onPrimaryHighEmphasis, - ) - : null, - ); - }), + action: (HMSRoomLayout.chatData?.realTimeControls + ?.canDisableChat ?? + false) + ? HMSToastButton( + buttonTitle: "Resume", + action: () { + context + .read() + .setSessionMetadataForKey( + key: SessionStoreKeyValues + .getNameFromMethod( + SessionStoreKey.chatState), + metadata: { + "enabled": true, + "updatedBy": { + "peerID": context + .read() + .localPeer + ?.peerId, + "userID": context + .read() + .localPeer + ?.customerUserId, + "userName": context + .read() + .localPeer + ?.name + }, + "updatedAt": DateTime.now() + .millisecondsSinceEpoch //unix timestamp in miliseconds + }); + }, + height: 36, + width: 88, + buttonColor: HMSThemeColors.primaryDefault, + textColor: HMSThemeColors.onPrimaryHighEmphasis, + ) + : null, + ); + }), ); } } diff --git a/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_utility.dart b/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_utility.dart index f246973b3..1668cd0d1 100644 --- a/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_utility.dart +++ b/packages/hms_room_kit/lib/src/widgets/chat_widgets/chat_text_utility.dart @@ -9,7 +9,9 @@ import 'package:flutter/material.dart'; ///Project imports import 'package:hms_room_kit/src/hls_viewer/hls_hand_raise_menu.dart'; import 'package:hms_room_kit/src/layout_api/hms_room_layout.dart'; +import 'package:hms_room_kit/src/layout_api/hms_theme_colors.dart'; import 'package:hms_room_kit/src/widgets/chat_widgets/chat_text_field.dart'; +import 'package:hms_room_kit/src/widgets/common_widgets/hms_subheading_text.dart'; ///[ChatTextUtility] is a utility widget that renders the chat text field and hand raise menu class ChatTextUtility extends StatefulWidget { @@ -57,6 +59,26 @@ class _ChatTextUtilityState extends State mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.end, children: [ + if (HMSRoomLayout.chatData == null) + Expanded( + child: Padding( + padding: const EdgeInsets.only(right:8.0), + child: Container( + decoration: BoxDecoration( + color: HMSThemeColors.surfaceDefault, + borderRadius: BorderRadius.circular(8), + ), + height: 40, + child: Padding( + padding: const EdgeInsets.only(top: 8.0, bottom: 8, left: 8), + child: HMSSubheadingText( + text: "Chat disabled.", + textColor: HMSThemeColors.onSurfaceLowEmphasis), + ), + ), + ), + ), + ///Text Field if ((HMSRoomLayout.chatData?.isPrivateChatEnabled ?? false) || (HMSRoomLayout.chatData?.isPublicChatEnabled ?? false) ||