ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: Better connection status indicator

Browse source
This commit is contained in:
Krille 2025-02-02 16:34:09 +01:00
parent 892e379a2a
commit 7599ce8627
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
7 changed files with 195 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/l10n/intl_en.arb
View file

@ -1881,6 +1881,13 @@
"type": "text",
"placeholders": {}
},
"synchronizingPleaseWaitCounter": " Synchronizing… ({percentage}%)",
"@synchronizingPleaseWaitCounter": {
"type": "text",
"placeholders": {
"percentage": {}
}
},
"systemTheme": "System",
"@systemTheme": {
"type": "text",
@ -2831,5 +2838,6 @@
}
},
"appWantsToUseForLoginDescription": "You hereby allow the app and website to share information about you.",
"open": "Open"
"open": "Open",
"waitingForServer": "Waiting for server..."
}

93
lib/pages/chat/chat_app_bar_title.dart
View file

@ -2,11 +2,13 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:go_router/go_router.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat/chat.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/utils/sync_status_localization.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/presence_builder.dart';
@ -54,30 +56,73 @@ class ChatAppBarTitle extends StatelessWidget {
fontSize: 16,
),
),
AnimatedSize(
duration: FluffyThemes.animationDuration,
child: PresenceBuilder(
userId: room.directChatMatrixID,
builder: (context, presence) {
final lastActiveTimestamp = presence?.lastActiveTimestamp;
final style = Theme.of(context).textTheme.bodySmall;
if (presence?.currentlyActive == true) {
return Text(
L10n.of(context).currentlyActive,
style: style,
);
}
if (lastActiveTimestamp != null) {
return Text(
L10n.of(context).lastActiveAgo(
lastActiveTimestamp.localizedTimeShort(context),
),
style: style,
);
}
return const SizedBox.shrink();
},
),
StreamBuilder(
stream: room.client.onSyncStatus.stream,
builder: (context, snapshot) {
final status = room.client.onSyncStatus.value ??
const SyncStatusUpdate(SyncStatus.waitingForResponse);
final hide = room.client.onSync.value != null &&
status.status != SyncStatus.error &&
room.client.prevBatch != null;
return AnimatedSize(
duration: FluffyThemes.animationDuration,
child: hide
? PresenceBuilder(
userId: room.directChatMatrixID,
builder: (context, presence) {
final lastActiveTimestamp =
presence?.lastActiveTimestamp;
final style =
Theme.of(context).textTheme.bodySmall;
if (presence?.currentlyActive == true) {
return Text(
L10n.of(context).currentlyActive,
style: style,
);
}
if (lastActiveTimestamp != null) {
return Text(
L10n.of(context).lastActiveAgo(
lastActiveTimestamp
.localizedTimeShort(context),
),
style: style,
);
}
return const SizedBox.shrink();
},
)
: Row(
children: [
if (status.error != null) ...[
Icon(
Icons.cloud_off_outlined,
size: 12,
color: status.error != null
? Theme.of(context)
.colorScheme
.onErrorContainer
: null,
),
const SizedBox(width: 4),
],
Expanded(
child: Text(
status.calcLocalizedString(context),
style: TextStyle(
fontSize: 12,
color: status.error != null
? Theme.of(context)
.colorScheme
.onErrorContainer
: null,
),
),
),
],
),
);
},
),
],
),

2
lib/pages/chat/chat_view.dart
View file

@ -19,7 +19,6 @@ import 'package:fluffychat/pages/chat/reply_display.dart';
import 'package:fluffychat/utils/account_config.dart';
import 'package:fluffychat/utils/localized_exception_extension.dart';
import 'package:fluffychat/widgets/chat_settings_popup_menu.dart';
import 'package:fluffychat/widgets/connection_status_header.dart';
import 'package:fluffychat/widgets/future_loading_dialog.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
@ -354,7 +353,6 @@ class ChatView extends StatelessWidget {
: Column(
mainAxisSize: MainAxisSize.min,
children: [
const ConnectionStatusHeader(),
ReactionsPicker(controller),
ReplyDisplay(controller),
ChatInputRow(controller),

2
lib/pages/chat_list/chat_list_body.dart
View file

@ -18,7 +18,6 @@ import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import '../../config/themes.dart';
import '../../widgets/connection_status_header.dart';
import '../../widgets/matrix.dart';
import 'chat_list_header.dart';
@ -136,7 +135,6 @@ class ChatListViewBody extends StatelessWidget {
onStatusEdit: controller.setStatus,
),
),
const ConnectionStatusHeader(),
AnimatedContainer(
height: controller.isTorBrowser ? 64 : 0,
duration: FluffyThemes.animationDuration,

156
lib/pages/chat_list/chat_list_header.dart
View file

@ -1,10 +1,12 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat_list/chat_list.dart';
import 'package:fluffychat/pages/chat_list/client_chooser_button.dart';
import 'package:fluffychat/utils/sync_status_localization.dart';
import '../../widgets/matrix.dart';
class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
@ -20,6 +22,7 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final client = Matrix.of(context).client;
return SliverAppBar(
floating: true,
@ -28,76 +31,97 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
scrolledUnderElevation: 0,
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
title: TextField(
controller: controller.searchController,
focusNode: controller.searchFocusNode,
textInputAction: TextInputAction.search,
onChanged: (text) => controller.onSearchEnter(
text,
globalSearch: globalSearch,
),
decoration: InputDecoration(
filled: true,
fillColor: theme.colorScheme.secondaryContainer,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(99),
),
contentPadding: EdgeInsets.zero,
hintText: L10n.of(context).searchChatsRooms,
hintStyle: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal,
),
floatingLabelBehavior: FloatingLabelBehavior.never,
prefixIcon: controller.isSearchMode
? IconButton(
tooltip: L10n.of(context).cancel,
icon: const Icon(Icons.close_outlined),
onPressed: controller.cancelSearch,
color: theme.colorScheme.onPrimaryContainer,
)
: IconButton(
onPressed: controller.startSearch,
icon: Icon(
Icons.search_outlined,
color: theme.colorScheme.onPrimaryContainer,
),
),
suffixIcon: controller.isSearchMode && globalSearch
? controller.isSearching
? const Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 12,
),
child: SizedBox.square(
dimension: 24,
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
title: StreamBuilder(
stream: client.onSyncStatus.stream,
builder: (context, snapshot) {
final status = client.onSyncStatus.value ??
const SyncStatusUpdate(SyncStatus.waitingForResponse);
final hide = client.onSync.value != null &&
status.status != SyncStatus.error &&
client.prevBatch != null;
return TextField(
controller: controller.searchController,
focusNode: controller.searchFocusNode,
textInputAction: TextInputAction.search,
onChanged: (text) => controller.onSearchEnter(
text,
globalSearch: globalSearch,
),
decoration: InputDecoration(
filled: true,
fillColor: theme.colorScheme.secondaryContainer,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(99),
),
contentPadding: EdgeInsets.zero,
label: hide
? null
: Center(
child: Text(
status.calcLocalizedString(context),
style: TextStyle(
color: status.error != null
? theme.colorScheme.onErrorContainer
: null,
),
),
),
hintText: L10n.of(context).searchChatsRooms,
hintStyle: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal,
),
prefixIcon: controller.isSearchMode
? IconButton(
tooltip: L10n.of(context).cancel,
icon: const Icon(Icons.close_outlined),
onPressed: controller.cancelSearch,
color: theme.colorScheme.onPrimaryContainer,
)
: TextButton.icon(
onPressed: controller.setServer,
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(99),
),
textStyle: const TextStyle(fontSize: 12),
: IconButton(
onPressed: controller.startSearch,
icon: Icon(
Icons.search_outlined,
color: theme.colorScheme.onPrimaryContainer,
),
icon: const Icon(Icons.edit_outlined, size: 16),
label: Text(
controller.searchServer ??
Matrix.of(context).client.homeserver!.host,
maxLines: 2,
),
)
: SizedBox(
width: 0,
child: ClientChooserButton(controller),
),
),
),
suffixIcon: controller.isSearchMode && globalSearch
? controller.isSearching
? const Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 12,
),
child: SizedBox.square(
dimension: 24,
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
),
),
)
: TextButton.icon(
onPressed: controller.setServer,
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(99),
),
textStyle: const TextStyle(fontSize: 12),
),
icon: const Icon(Icons.edit_outlined, size: 16),
label: Text(
controller.searchServer ??
Matrix.of(context).client.homeserver!.host,
maxLines: 2,
),
)
: SizedBox(
width: 0,
child: ClientChooserButton(controller),
),
),
);
},
),
);
}

27
lib/utils/sync_status_localization.dart Normal file
View file

@ -0,0 +1,27 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/utils/localized_exception_extension.dart';
extension SyncStatusLocalization on SyncStatusUpdate {
String calcLocalizedString(BuildContext context) {
final progress = this.progress;
switch (status) {
case SyncStatus.waitingForResponse:
return L10n.of(context).waitingForServer;
case SyncStatus.error:
return ((error?.exception ?? Object()) as Object)
.toLocalizedString(context);
case SyncStatus.processing:
case SyncStatus.cleaningUp:
case SyncStatus.finished:
return progress == null
? L10n.of(context).synchronizingPleaseWait
: L10n.of(context).synchronizingPleaseWaitCounter(
progress.round().toString(),
);
}
}
}

92
lib/widgets/connection_status_header.dart
View file

@ -1,92 +0,0 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';
import '../config/themes.dart';
import '../utils/localized_exception_extension.dart';
import 'matrix.dart';
class ConnectionStatusHeader extends StatefulWidget {
const ConnectionStatusHeader({super.key});
@override
ConnectionStatusHeaderState createState() => ConnectionStatusHeaderState();
}
class ConnectionStatusHeaderState extends State<ConnectionStatusHeader> {
late final StreamSubscription _onSyncSub;
@override
void initState() {
_onSyncSub = Matrix.of(context).client.onSyncStatus.stream.listen(
(_) => setState(() {}),
);
super.initState();
}
@override
void dispose() {
_onSyncSub.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final client = Matrix.of(context).client;
final status = client.onSyncStatus.value ??
const SyncStatusUpdate(SyncStatus.waitingForResponse);
final hide = client.onSync.value != null &&
status.status != SyncStatus.error &&
client.prevBatch != null;
return AnimatedContainer(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
height: hide ? 0 : 36,
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(color: Colors.transparent),
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator.adaptive(
strokeWidth: 2,
value: hide ? 1.0 : status.progress,
),
),
const SizedBox(width: 12),
Text(
status.toLocalizedString(context),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: theme.colorScheme.onSurface),
),
],
),
);
}
}
extension on SyncStatusUpdate {
String toLocalizedString(BuildContext context) {
switch (status) {
case SyncStatus.waitingForResponse:
return L10n.of(context).loadingPleaseWait;
case SyncStatus.error:
return ((error?.exception ?? Object()) as Object)
.toLocalizedString(context);
case SyncStatus.processing:
case SyncStatus.cleaningUp:
case SyncStatus.finished:
return L10n.of(context).synchronizingPleaseWait;
}
}
}