2020-01-05 12:27:03 +01:00
|
|
|
import 'dart:async';
|
2020-01-01 19:10:13 +01:00
|
|
|
import 'dart:io';
|
|
|
|
|
|
|
|
import 'package:famedlysdk/famedlysdk.dart';
|
|
|
|
import 'package:file_picker/file_picker.dart';
|
|
|
|
import 'package:fluffychat/components/adaptive_page_layout.dart';
|
|
|
|
import 'package:fluffychat/components/chat_settings_popup_menu.dart';
|
|
|
|
import 'package:fluffychat/components/list_items/message.dart';
|
|
|
|
import 'package:fluffychat/components/matrix.dart';
|
2020-01-20 13:46:39 +01:00
|
|
|
import 'package:fluffychat/i18n/i18n.dart';
|
2020-01-19 15:07:42 +01:00
|
|
|
import 'package:fluffychat/utils/room_extension.dart';
|
2020-01-01 19:10:13 +01:00
|
|
|
import 'package:flutter/foundation.dart';
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:image_picker/image_picker.dart';
|
|
|
|
import 'package:toast/toast.dart';
|
2020-01-24 12:10:35 +01:00
|
|
|
import 'package:pedantic/pedantic.dart';
|
2020-01-01 19:10:13 +01:00
|
|
|
|
|
|
|
import 'chat_list.dart';
|
|
|
|
|
2020-01-27 10:14:38 +01:00
|
|
|
class ChatView extends StatelessWidget {
|
2020-01-01 19:10:13 +01:00
|
|
|
final String id;
|
|
|
|
|
2020-01-27 10:14:38 +01:00
|
|
|
const ChatView(this.id, {Key key}) : super(key: key);
|
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
// TODO: implement build
|
|
|
|
return AdaptivePageLayout(
|
|
|
|
primaryPage: FocusPage.SECOND,
|
|
|
|
firstScaffold: ChatList(
|
|
|
|
activeChat: id,
|
|
|
|
),
|
|
|
|
secondScaffold: _Chat(id),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class _Chat extends StatefulWidget {
|
|
|
|
final String id;
|
|
|
|
|
|
|
|
const _Chat(this.id, {Key key}) : super(key: key);
|
2020-01-23 12:11:57 +01:00
|
|
|
|
2020-01-01 19:10:13 +01:00
|
|
|
@override
|
|
|
|
_ChatState createState() => _ChatState();
|
|
|
|
}
|
|
|
|
|
2020-01-27 10:14:38 +01:00
|
|
|
class _ChatState extends State<_Chat> {
|
2020-01-01 19:10:13 +01:00
|
|
|
Room room;
|
|
|
|
|
|
|
|
Timeline timeline;
|
|
|
|
|
2020-01-08 14:19:15 +01:00
|
|
|
MatrixState matrix;
|
|
|
|
|
2020-01-05 12:27:03 +01:00
|
|
|
String seenByText = "";
|
|
|
|
|
2020-01-02 22:31:39 +01:00
|
|
|
final ScrollController _scrollController = ScrollController();
|
2020-01-01 19:10:13 +01:00
|
|
|
|
2020-01-24 11:51:23 +01:00
|
|
|
FocusNode inputFocus = FocusNode();
|
|
|
|
|
2020-01-05 12:27:03 +01:00
|
|
|
Timer typingCoolDown;
|
|
|
|
Timer typingTimeout;
|
|
|
|
bool currentlyTyping = false;
|
|
|
|
|
2020-01-01 19:10:13 +01:00
|
|
|
@override
|
|
|
|
void initState() {
|
|
|
|
_scrollController.addListener(() async {
|
|
|
|
if (_scrollController.position.pixels ==
|
2020-01-02 22:31:39 +01:00
|
|
|
_scrollController.position.maxScrollExtent &&
|
|
|
|
timeline.events.isNotEmpty &&
|
|
|
|
timeline.events[timeline.events.length - 1].type !=
|
|
|
|
EventTypes.RoomCreate) {
|
|
|
|
await timeline.requestHistory(historyCount: 100);
|
2020-01-01 19:10:13 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
super.initState();
|
|
|
|
}
|
|
|
|
|
2020-01-05 12:27:03 +01:00
|
|
|
void updateView() {
|
2020-01-23 12:11:57 +01:00
|
|
|
if (!mounted) return;
|
|
|
|
|
2020-01-05 12:27:03 +01:00
|
|
|
String seenByText = "";
|
|
|
|
if (timeline.events.isNotEmpty) {
|
|
|
|
List lastReceipts = List.from(timeline.events.first.receipts);
|
|
|
|
lastReceipts.removeWhere((r) =>
|
|
|
|
r.user.id == room.client.userID ||
|
|
|
|
r.user.id == timeline.events.first.senderId);
|
|
|
|
if (lastReceipts.length == 1) {
|
2020-01-20 13:46:39 +01:00
|
|
|
seenByText = I18n.of(context)
|
|
|
|
.seenByUser(lastReceipts.first.user.calcDisplayname());
|
2020-01-05 12:27:03 +01:00
|
|
|
} else if (lastReceipts.length == 2) {
|
2020-01-20 13:46:39 +01:00
|
|
|
seenByText = seenByText = I18n.of(context).seenByUserAndUser(
|
|
|
|
lastReceipts.first.user.calcDisplayname(),
|
|
|
|
lastReceipts[1].user.calcDisplayname());
|
2020-01-05 12:27:03 +01:00
|
|
|
} else if (lastReceipts.length > 2) {
|
2020-01-20 13:46:39 +01:00
|
|
|
seenByText = I18n.of(context).seenByUserAndCountOthers(
|
|
|
|
lastReceipts.first.user.calcDisplayname(),
|
|
|
|
(lastReceipts.length - 1).toString());
|
2020-01-05 12:27:03 +01:00
|
|
|
}
|
|
|
|
}
|
2020-01-23 12:11:57 +01:00
|
|
|
if (timeline != null) {
|
|
|
|
setState(() {
|
|
|
|
this.seenByText = seenByText;
|
|
|
|
});
|
|
|
|
}
|
2020-01-05 12:27:03 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
Future<bool> getTimeline() async {
|
2020-01-24 12:05:37 +01:00
|
|
|
if (timeline == null) {
|
|
|
|
timeline = await room.getTimeline(onUpdate: updateView);
|
|
|
|
if (timeline.events.isNotEmpty) {
|
2020-01-24 12:10:35 +01:00
|
|
|
unawaited(room.sendReadReceipt(timeline.events.first.eventId));
|
2020-01-24 12:05:37 +01:00
|
|
|
}
|
|
|
|
}
|
2020-01-05 12:27:03 +01:00
|
|
|
updateView();
|
2020-01-01 19:10:13 +01:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
void dispose() {
|
|
|
|
timeline?.sub?.cancel();
|
2020-01-23 12:11:57 +01:00
|
|
|
timeline = null;
|
2020-01-08 14:19:15 +01:00
|
|
|
matrix.activeRoomId = "";
|
2020-01-01 19:10:13 +01:00
|
|
|
super.dispose();
|
|
|
|
}
|
|
|
|
|
2020-01-17 10:41:28 +01:00
|
|
|
TextEditingController sendController = TextEditingController();
|
2020-01-01 19:10:13 +01:00
|
|
|
|
|
|
|
void send() {
|
|
|
|
if (sendController.text.isEmpty) return;
|
|
|
|
room.sendTextEvent(sendController.text);
|
|
|
|
sendController.text = "";
|
|
|
|
}
|
|
|
|
|
|
|
|
void sendFileAction(BuildContext context) async {
|
|
|
|
if (kIsWeb) {
|
2020-01-20 13:46:39 +01:00
|
|
|
return Toast.show(I18n.of(context).notSupportedInWeb, context);
|
2020-01-01 19:10:13 +01:00
|
|
|
}
|
|
|
|
File file = await FilePicker.getFile();
|
|
|
|
if (file == null) return;
|
2020-01-08 14:19:15 +01:00
|
|
|
await matrix.tryRequestWithLoadingDialog(
|
2020-01-01 19:10:13 +01:00
|
|
|
room.sendFileEvent(
|
|
|
|
MatrixFile(bytes: await file.readAsBytes(), path: file.path),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
void sendImageAction(BuildContext context) async {
|
|
|
|
if (kIsWeb) {
|
2020-01-20 13:46:39 +01:00
|
|
|
return Toast.show(I18n.of(context).notSupportedInWeb, context);
|
2020-01-01 19:10:13 +01:00
|
|
|
}
|
|
|
|
File file = await ImagePicker.pickImage(
|
|
|
|
source: ImageSource.gallery,
|
|
|
|
imageQuality: 50,
|
|
|
|
maxWidth: 1600,
|
|
|
|
maxHeight: 1600);
|
|
|
|
if (file == null) return;
|
2020-01-08 14:19:15 +01:00
|
|
|
await matrix.tryRequestWithLoadingDialog(
|
2020-01-01 19:10:13 +01:00
|
|
|
room.sendImageEvent(
|
|
|
|
MatrixFile(bytes: await file.readAsBytes(), path: file.path),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
void openCameraAction(BuildContext context) async {
|
|
|
|
if (kIsWeb) {
|
2020-01-20 13:46:39 +01:00
|
|
|
return Toast.show(I18n.of(context).notSupportedInWeb, context);
|
2020-01-01 19:10:13 +01:00
|
|
|
}
|
|
|
|
File file = await ImagePicker.pickImage(
|
|
|
|
source: ImageSource.camera,
|
|
|
|
imageQuality: 50,
|
|
|
|
maxWidth: 1600,
|
|
|
|
maxHeight: 1600);
|
|
|
|
if (file == null) return;
|
2020-01-08 14:19:15 +01:00
|
|
|
await matrix.tryRequestWithLoadingDialog(
|
2020-01-01 19:10:13 +01:00
|
|
|
room.sendImageEvent(
|
|
|
|
MatrixFile(bytes: await file.readAsBytes(), path: file.path),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2020-01-08 14:19:15 +01:00
|
|
|
matrix = Matrix.of(context);
|
|
|
|
Client client = matrix.client;
|
2020-01-01 19:10:13 +01:00
|
|
|
room ??= client.getRoomById(widget.id);
|
2020-01-05 12:27:03 +01:00
|
|
|
if (room == null) {
|
2020-01-20 13:46:39 +01:00
|
|
|
return Scaffold(
|
|
|
|
appBar: AppBar(
|
|
|
|
title: Text(I18n.of(context).oopsSomethingWentWrong),
|
|
|
|
),
|
|
|
|
body: Center(
|
|
|
|
child: Text(I18n.of(context).youAreNoLongerParticipatingInThisChat),
|
|
|
|
),
|
2020-01-05 12:27:03 +01:00
|
|
|
);
|
|
|
|
}
|
2020-01-08 14:19:15 +01:00
|
|
|
matrix.activeRoomId = widget.id;
|
2020-01-05 12:27:03 +01:00
|
|
|
|
|
|
|
if (room.membership == Membership.invite) {
|
2020-01-08 14:19:15 +01:00
|
|
|
matrix.tryRequestWithLoadingDialog(room.join());
|
2020-01-05 12:27:03 +01:00
|
|
|
}
|
2020-01-01 19:10:13 +01:00
|
|
|
|
2020-01-05 12:27:03 +01:00
|
|
|
String typingText = "";
|
|
|
|
List<User> typingUsers = room.typingUsers;
|
|
|
|
typingUsers.removeWhere((User u) => u.id == client.userID);
|
|
|
|
|
|
|
|
if (typingUsers.length == 1) {
|
2020-01-20 13:46:39 +01:00
|
|
|
typingText = I18n.of(context).isTyping;
|
2020-01-18 13:27:36 +01:00
|
|
|
if (typingUsers.first.id != room.directChatMatrixID) {
|
2020-01-20 13:46:39 +01:00
|
|
|
typingText =
|
|
|
|
I18n.of(context).userIsTyping(typingUsers.first.calcDisplayname());
|
2020-01-18 13:27:36 +01:00
|
|
|
}
|
2020-01-05 12:27:03 +01:00
|
|
|
} else if (typingUsers.length == 2) {
|
2020-01-20 13:46:39 +01:00
|
|
|
typingText = I18n.of(context).userAndUserAreTyping(
|
|
|
|
typingUsers.first.calcDisplayname(),
|
|
|
|
typingUsers[1].calcDisplayname());
|
2020-01-05 12:27:03 +01:00
|
|
|
} else if (typingUsers.length > 2) {
|
2020-01-20 13:46:39 +01:00
|
|
|
typingText = I18n.of(context).userAndOthersAreTyping(
|
|
|
|
typingUsers.first.calcDisplayname(),
|
|
|
|
(typingUsers.length - 1).toString());
|
2020-01-05 12:27:03 +01:00
|
|
|
}
|
2020-01-01 19:10:13 +01:00
|
|
|
|
2020-01-27 10:14:38 +01:00
|
|
|
return Scaffold(
|
|
|
|
appBar: AppBar(
|
|
|
|
title: Column(
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
children: <Widget>[
|
|
|
|
Text(room.getLocalizedDisplayname(context)),
|
|
|
|
AnimatedContainer(
|
|
|
|
duration: Duration(milliseconds: 500),
|
|
|
|
height: typingText.isEmpty ? 0 : 20,
|
|
|
|
child: Row(
|
|
|
|
children: <Widget>[
|
|
|
|
typingText.isEmpty
|
|
|
|
? Container()
|
|
|
|
: Icon(Icons.edit,
|
|
|
|
color: Theme.of(context).primaryColor, size: 10),
|
|
|
|
SizedBox(width: 4),
|
|
|
|
Text(
|
|
|
|
typingText,
|
|
|
|
style: TextStyle(
|
|
|
|
color: Theme.of(context).primaryColor,
|
|
|
|
fontStyle: FontStyle.italic,
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
],
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
],
|
2020-01-01 19:10:13 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
actions: <Widget>[ChatSettingsPopupMenu(room, !room.isDirectChat)],
|
|
|
|
),
|
|
|
|
body: SafeArea(
|
|
|
|
child: Column(
|
|
|
|
children: <Widget>[
|
|
|
|
Expanded(
|
|
|
|
child: FutureBuilder<bool>(
|
|
|
|
future: getTimeline(),
|
|
|
|
builder: (BuildContext context, snapshot) {
|
|
|
|
if (!snapshot.hasData) {
|
|
|
|
return Center(
|
|
|
|
child: CircularProgressIndicator(),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (room.notificationCount != null &&
|
|
|
|
room.notificationCount > 0 &&
|
|
|
|
timeline != null &&
|
|
|
|
timeline.events.isNotEmpty) {
|
|
|
|
room.sendReadReceipt(timeline.events.first.eventId);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (timeline.events.isEmpty) return Container();
|
|
|
|
|
|
|
|
return ListView.builder(
|
|
|
|
reverse: true,
|
|
|
|
itemCount: timeline.events.length + 1,
|
|
|
|
controller: _scrollController,
|
|
|
|
itemBuilder: (BuildContext context, int i) {
|
|
|
|
return i == 0
|
|
|
|
? AnimatedContainer(
|
|
|
|
height: seenByText.isEmpty ? 0 : 24,
|
|
|
|
duration: seenByText.isEmpty
|
|
|
|
? Duration(milliseconds: 0)
|
|
|
|
: Duration(milliseconds: 500),
|
|
|
|
alignment: timeline.events.first.senderId ==
|
|
|
|
client.userID
|
|
|
|
? Alignment.topRight
|
|
|
|
: Alignment.topLeft,
|
|
|
|
child: Text(
|
|
|
|
seenByText,
|
|
|
|
maxLines: 1,
|
|
|
|
overflow: TextOverflow.ellipsis,
|
|
|
|
style: TextStyle(
|
|
|
|
color: Theme.of(context).primaryColor,
|
2020-01-23 12:11:57 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
padding: EdgeInsets.only(
|
|
|
|
left: 8,
|
|
|
|
right: 8,
|
|
|
|
bottom: 8,
|
|
|
|
),
|
|
|
|
)
|
|
|
|
: Message(timeline.events[i - 1],
|
|
|
|
nextEvent:
|
|
|
|
i >= 2 ? timeline.events[i - 2] : null);
|
|
|
|
});
|
|
|
|
},
|
2020-01-01 19:10:13 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
room.canSendDefaultMessages && room.membership == Membership.join
|
|
|
|
? Container(
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
color: Colors.white,
|
|
|
|
boxShadow: [
|
|
|
|
BoxShadow(
|
|
|
|
color: Colors.grey.withOpacity(0.2),
|
|
|
|
spreadRadius: 1,
|
|
|
|
blurRadius: 2,
|
|
|
|
offset: Offset(0, -1), // changes position of shadow
|
|
|
|
),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
child: Row(
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
|
|
|
kIsWeb
|
|
|
|
? Container()
|
|
|
|
: PopupMenuButton<String>(
|
|
|
|
icon: Icon(Icons.add),
|
|
|
|
onSelected: (String choice) async {
|
|
|
|
if (choice == "file") {
|
|
|
|
sendFileAction(context);
|
|
|
|
} else if (choice == "image") {
|
|
|
|
sendImageAction(context);
|
|
|
|
}
|
|
|
|
if (choice == "camera") {
|
|
|
|
openCameraAction(context);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
itemBuilder: (BuildContext context) =>
|
|
|
|
<PopupMenuEntry<String>>[
|
|
|
|
PopupMenuItem<String>(
|
|
|
|
value: "file",
|
|
|
|
child: ListTile(
|
|
|
|
leading: CircleAvatar(
|
|
|
|
backgroundColor: Colors.green,
|
|
|
|
foregroundColor: Colors.white,
|
|
|
|
child: Icon(Icons.attachment),
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
title: Text(I18n.of(context).sendFile),
|
|
|
|
contentPadding: EdgeInsets.all(0),
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
PopupMenuItem<String>(
|
|
|
|
value: "image",
|
|
|
|
child: ListTile(
|
|
|
|
leading: CircleAvatar(
|
|
|
|
backgroundColor: Colors.blue,
|
|
|
|
foregroundColor: Colors.white,
|
|
|
|
child: Icon(Icons.image),
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
title: Text(I18n.of(context).sendImage),
|
|
|
|
contentPadding: EdgeInsets.all(0),
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
PopupMenuItem<String>(
|
|
|
|
value: "camera",
|
|
|
|
child: ListTile(
|
|
|
|
leading: CircleAvatar(
|
|
|
|
backgroundColor: Colors.purple,
|
|
|
|
foregroundColor: Colors.white,
|
|
|
|
child: Icon(Icons.camera),
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
title: Text(I18n.of(context).openCamera),
|
|
|
|
contentPadding: EdgeInsets.all(0),
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
),
|
|
|
|
],
|
2020-01-01 19:10:13 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
SizedBox(width: 8),
|
|
|
|
Expanded(
|
|
|
|
child: Padding(
|
|
|
|
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
|
|
|
child: TextField(
|
|
|
|
minLines: 1,
|
|
|
|
maxLines: kIsWeb ? 1 : 8,
|
|
|
|
keyboardType: kIsWeb
|
|
|
|
? TextInputType.text
|
|
|
|
: TextInputType.multiline,
|
|
|
|
onSubmitted: (String text) {
|
|
|
|
send();
|
|
|
|
FocusScope.of(context).requestFocus(inputFocus);
|
|
|
|
},
|
|
|
|
focusNode: inputFocus,
|
|
|
|
controller: sendController,
|
|
|
|
decoration: InputDecoration(
|
|
|
|
hintText: I18n.of(context).writeAMessage,
|
|
|
|
border: InputBorder.none,
|
2020-01-05 12:27:03 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
onChanged: (String text) {
|
|
|
|
this.typingCoolDown?.cancel();
|
|
|
|
this.typingCoolDown =
|
|
|
|
Timer(Duration(seconds: 2), () {
|
|
|
|
this.typingCoolDown = null;
|
|
|
|
this.currentlyTyping = false;
|
|
|
|
room.sendTypingInfo(false);
|
|
|
|
});
|
|
|
|
this.typingTimeout ??=
|
|
|
|
Timer(Duration(seconds: 30), () {
|
|
|
|
this.typingTimeout = null;
|
|
|
|
this.currentlyTyping = false;
|
|
|
|
});
|
|
|
|
if (!this.currentlyTyping) {
|
|
|
|
this.currentlyTyping = true;
|
|
|
|
room.sendTypingInfo(true,
|
|
|
|
timeout:
|
|
|
|
Duration(seconds: 30).inMilliseconds);
|
|
|
|
}
|
|
|
|
},
|
2020-01-01 19:10:13 +01:00
|
|
|
),
|
2020-01-27 10:14:38 +01:00
|
|
|
)),
|
|
|
|
SizedBox(width: 8),
|
|
|
|
IconButton(
|
|
|
|
icon: Icon(Icons.send),
|
|
|
|
onPressed: () => send(),
|
|
|
|
),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
)
|
|
|
|
: Container(),
|
|
|
|
],
|
2020-01-01 19:10:13 +01:00
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|