tencent_cloud_chat_uikit/lib/ui/widgets/message_read_receipt.dart

386 lines
16 KiB
Dart

import 'package:extended_text/extended_text.dart';
import 'package:flutter/material.dart';
// ignore: unused_import
import 'package:provider/provider.dart';
import 'package:tencent_chat_i18n_tool/tencent_chat_i18n_tool.dart';
import 'package:tencent_cloud_chat_sdk/enum/get_group_message_read_member_list_filter.dart';
import 'package:tencent_cloud_chat_sdk/enum/message_elem_type.dart';
import 'package:tencent_cloud_chat_sdk/models/v2_tim_group_member_info.dart'
if (dart.library.html) 'package:tencent_cloud_chat_sdk/web/compatible_models/v2_tim_group_member_info.dart';
import 'package:tencent_cloud_chat_sdk/models/v2_tim_message.dart'
if (dart.library.html) 'package:tencent_cloud_chat_sdk/web/compatible_models/v2_tim_message.dart';
import 'package:tencent_cloud_chat_uikit/base_widgets/tim_ui_kit_state.dart';
import 'package:tencent_cloud_chat_uikit/ui/utils/screen_utils.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitTextField/special_text/DefaultSpecialTextSpanBuilder.dart';
import 'package:tencent_cloud_chat_uikit/business_logic/separate_models/tui_chat_separate_view_model.dart';
import 'package:tencent_cloud_chat_uikit/ui/utils/message.dart';
import 'package:tencent_cloud_chat_uikit/ui/utils/time_ago.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/tim_uikit_chat_face_elem.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/tim_uikit_chat_file_elem.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/tim_uikit_chat_image_elem.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/tim_uikit_chat_sound_elem.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/tim_uikit_chat_video_elem.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/tim_uikit_merger_message_elem.dart';
import 'package:tencent_cloud_chat_uikit/ui/widgets/avatar.dart';
import 'package:tencent_cloud_chat_uikit/base_widgets/tim_ui_kit_base.dart';
import 'package:tencent_cloud_chat_uikit/theme/color.dart';
import 'package:tencent_cloud_chat_uikit/theme/tui_theme.dart';
class MessageReadReceipt extends StatefulWidget {
final V2TimMessage messageItem;
final int unreadCount;
final int readCount;
final void Function(String userID, TapDownDetails tapDetails)? onTapAvatar;
final TUIChatSeparateViewModel model;
const MessageReadReceipt(
{Key? key,
required this.messageItem,
required this.unreadCount,
required this.readCount,
this.onTapAvatar,
required this.model})
: super(key: key);
@override
State<StatefulWidget> createState() => _MessageReadReceiptState();
}
class _MessageReadReceiptState extends TIMUIKitState<MessageReadReceipt> {
bool readMemberIsFinished = false;
bool unreadMemberIsFinished = false;
int readMemberListNextSeq = 0;
int unreadMemberListNextSeq = 0;
List<V2TimGroupMemberInfo> readMemberList = [];
List<V2TimGroupMemberInfo> unreadMemberList = [];
int currentIndex = 0;
_getUnreadMemberList() async {
final unReadMemberRes = await widget.model.getGroupMessageReadMemberList(widget.messageItem.msgID!,
GetGroupMessageReadMemberListFilter.V2TIM_GROUP_MESSAGE_READ_MEMBERS_FILTER_UNREAD, unreadMemberListNextSeq);
if (unReadMemberRes.code == 0) {
final res = unReadMemberRes.data;
if (res != null) {
unreadMemberList = [...unreadMemberList, ...res.memberInfoList];
unreadMemberIsFinished = res.isFinished;
unreadMemberListNextSeq = res.nextSeq;
}
}
setState(() {});
}
_getReadMemberList() async {
final readMemberRes = await widget.model.getGroupMessageReadMemberList(
widget.messageItem.msgID!,
GetGroupMessageReadMemberListFilter.V2TIM_GROUP_MESSAGE_READ_MEMBERS_FILTER_READ,
readMemberListNextSeq,
);
if (readMemberRes.code == 0) {
final res = readMemberRes.data;
if (res != null) {
readMemberList = [...readMemberList, ...res.memberInfoList];
readMemberIsFinished = res.isFinished;
readMemberListNextSeq = res.nextSeq;
}
}
setState(() {});
}
@override
void initState() {
super.initState();
_getReadMemberList();
_getUnreadMemberList();
}
Widget _getMsgItem(V2TimMessage message) {
final type = message.elemType;
final isFromSelf = message.isSelf ?? true;
switch (type) {
case MessageElemType.V2TIM_ELEM_TYPE_CUSTOM:
return Text(TIM_t("[自定义]"));
case MessageElemType.V2TIM_ELEM_TYPE_SOUND:
return TIMUIKitSoundElem(
isShowMessageReaction: false,
chatModel: widget.model,
message: message,
soundElem: message.soundElem!,
msgID: message.msgID ?? "",
isFromSelf: isFromSelf,
localCustomInt: message.localCustomInt);
case MessageElemType.V2TIM_ELEM_TYPE_TEXT:
return ExtendedText(message.textElem!.text!,
softWrap: true,
style: const TextStyle(fontSize: 16),
specialTextSpanBuilder: DefaultSpecialTextSpanBuilder(
isUseQQPackage: widget.model.chatConfig.stickerPanelConfig?.useQQStickerPackage ?? true,
isUseTencentCloudChatPackage:
widget.model.chatConfig.stickerPanelConfig?.useTencentCloudChatStickerPackage ?? true,
isUseTencentCloudChatPackageOldKeys:
widget.model.chatConfig.stickerPanelConfig?.useTencentCloudChatStickerPackageOldKeys ?? false,
showAtBackground: true,
checkHttpLink: true,
));
// return Text(message.textElem!.text!);
case MessageElemType.V2TIM_ELEM_TYPE_FACE:
return TIMUIKitFaceElem(
isShowMessageReaction: false,
model: widget.model,
isShowJump: false,
path: message.faceElem?.data ?? "",
message: message);
case MessageElemType.V2TIM_ELEM_TYPE_FILE:
return TIMUIKitFileElem(
chatModel: widget.model,
isShowMessageReaction: false,
message: message,
messageID: message.msgID,
fileElem: message.fileElem,
isSelf: isFromSelf,
isShowJump: false,
);
case MessageElemType.V2TIM_ELEM_TYPE_IMAGE:
return TIMUIKitImageElem(
chatModel: widget.model,
isShowMessageReaction: false,
message: message,
isFrom: "merger",
key: Key("${message.seq}_${message.timestamp}"),
);
case MessageElemType.V2TIM_ELEM_TYPE_VIDEO:
return TIMUIKitVideoElem(message, chatModel: widget.model, isShowMessageReaction: false, isFrom: "merger");
case MessageElemType.V2TIM_ELEM_TYPE_LOCATION:
return Text(TIM_t("[位置]"));
case MessageElemType.V2TIM_ELEM_TYPE_MERGER:
return TIMUIKitMergerElem(
isShowMessageReaction: false,
model: widget.model,
isShowJump: false,
message: message,
mergerElem: message.mergerElem!,
isSelf: isFromSelf,
messageID: message.msgID!);
default:
return Text(TIM_t("未知消息"));
}
}
_getShowName(V2TimGroupMemberInfo item) {
final friendRemark = item.friendRemark ?? "";
final nickName = item.nickName ?? "";
final userID = item.userID;
final showName = nickName != "" ? nickName : userID;
return friendRemark != "" ? friendRemark : showName;
}
Widget _memberItemBuilder(V2TimGroupMemberInfo item, TUITheme theme) {
final faceUrl = item.faceUrl ?? '';
final showName = _getShowName(item);
final isDesktopScreen = TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop;
return InkWell(
onTapDown: (details) {
if (widget.onTapAvatar != null) {
widget.onTapAvatar!(item.userID!, details);
}
},
child: Container(
padding: const EdgeInsets.only(top: 10, left: 16),
child: Row(
children: [
Container(
height: isDesktopScreen ? 30 : 40,
width: isDesktopScreen ? 30 : 40,
margin: EdgeInsets.only(right: 12, bottom: isDesktopScreen ? 6 : 0),
child: Avatar(faceUrl: faceUrl, showName: showName),
),
Expanded(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(top: 10, bottom: isDesktopScreen ? 14 : 19, right: 28),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: theme.weakDividerColor ?? CommonColor.weakDividerColor))),
child: Text(
showName,
style: TextStyle(color: Colors.black, fontSize: isDesktopScreen ? 14 : 18),
),
)),
],
),
),
);
}
@override
Widget tuiBuild(BuildContext context, TUIKitBuildValue value) {
final TUITheme theme = value.theme;
final option1 = widget.readCount;
final option2 = widget.unreadCount;
final isDesktopScreen = TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop;
Widget pageBody() {
return Container(
color: isDesktopScreen ? null : Colors.white,
child: Column(
children: [
// The top part of the message content
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height / 2,
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(MessageUtils.getDisplayName(widget.messageItem)),
const SizedBox(width: 8),
Text(
TimeAgo().getTimeForMessage(widget.messageItem.timestamp ?? 0),
softWrap: true,
style: TextStyle(fontSize: 12, color: theme.weakTextColor),
)
],
),
const SizedBox(height: 6),
// message content
_getMsgItem(widget.messageItem),
],
),
),
),
),
// divider
Container(
height: 8,
color: theme.weakBackgroundColor,
),
// The bottom part shows the read/unread list
Expanded(
child: Column(
children: [
// read/unread switch button
Row(
children: <Widget>[
Expanded(
flex: 1,
child: InkWell(
onTap: () {
currentIndex = 0;
setState(() {});
},
child: Container(
height: isDesktopScreen ? 40 : 50.0,
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: isDesktopScreen ? 8 : 12),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(
width: 2, color: currentIndex == 0 ? theme.primaryColor! : Colors.white))),
child: Text(
TIM_t_para("{{option1}}人已读", "$option1人已读")(option1: option1),
style: TextStyle(
color: currentIndex != 0 ? theme.weakTextColor : Colors.black,
fontSize: isDesktopScreen ? 14 : 18,
),
),
),
),
),
Expanded(
flex: 1,
child: InkWell(
onTap: () {
currentIndex = 1;
setState(() {});
},
child: Container(
alignment: Alignment.bottomCenter,
height: isDesktopScreen ? 40 : 50.0,
padding: EdgeInsets.only(bottom: isDesktopScreen ? 8 : 12),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(
width: 2, color: currentIndex == 1 ? theme.primaryColor! : Colors.white))),
child: Text(
TIM_t_para("{{option2}}人未读", "$option2人未读")(option2: option2),
style: TextStyle(
color: currentIndex != 1 ? theme.weakTextColor : Colors.black,
fontSize: isDesktopScreen ? 14 : 18,
),
),
),
),
),
],
),
Container(
height: 1,
decoration: BoxDecoration(
border:
Border(bottom: BorderSide(color: theme.weakDividerColor ?? CommonColor.weakDividerColor))),
),
// member list
Expanded(
child: IndexedStack(
index: currentIndex,
children: [
ListView.builder(
shrinkWrap: false,
itemCount: readMemberList.length,
itemBuilder: (context, index) {
if (!readMemberIsFinished && index == readMemberList.length - 5) {
_getReadMemberList();
}
return _memberItemBuilder(readMemberList[index], theme);
},
),
ListView.builder(
shrinkWrap: false,
itemCount: unreadMemberList.length,
itemBuilder: (context, index) {
if (!unreadMemberIsFinished && index == unreadMemberList.length - 5) {
_getUnreadMemberList();
}
return _memberItemBuilder(unreadMemberList[index], theme);
},
),
],
),
),
],
),
),
],
),
);
}
return TUIKitScreenUtils.getDeviceWidget(
context: context,
desktopWidget: pageBody(),
defaultWidget: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text(
TIM_t("消息详情"),
style: TextStyle(color: theme.appbarTextColor, fontSize: 17),
),
shadowColor: theme.weakDividerColor,
backgroundColor: theme.appbarBgColor ?? theme.primaryColor,
iconTheme: IconThemeData(
color: theme.appbarTextColor,
)),
body: pageBody()),
));
}
}