2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Animate in new events in timeline

Browse source
This commit is contained in:
krille-chan 2023-12-26 20:08:07 +01:00
commit f07aba448d
No known key found for this signature in database
3 changed files with 119 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

13
lib/pages/chat/chat.dart
View file

@ -304,6 +304,13 @@ class ChatController extends State<ChatPageWithRoom> {
Future<void>? loadTimelineFuture; Future<void>? loadTimelineFuture;
int? animateInEventIndex;
void onInsert(int i) {
// setState will be called by updateView() anyway
animateInEventIndex = i;
}
Future<void> _getTimeline({ Future<void> _getTimeline({
String? eventContextId, String? eventContextId,
}) async { }) async {
@ -317,11 +324,15 @@ class ChatController extends State<ChatPageWithRoom> {
timeline = await room.getTimeline( timeline = await room.getTimeline(
onUpdate: updateView, onUpdate: updateView,
eventContextId: eventContextId, eventContextId: eventContextId,
onInsert: onInsert,
); );
} catch (e, s) { } catch (e, s) {
Logs().w('Unable to load timeline on event ID $eventContextId', e, s); Logs().w('Unable to load timeline on event ID $eventContextId', e, s);
if (!mounted) return; if (!mounted) return;
timeline = await room.getTimeline(onUpdate: updateView); timeline = await room.getTimeline(
onUpdate: updateView,
onInsert: onInsert,
);
if (!mounted) return; if (!mounted) return;
if (e is TimeoutException || e is IOException) { if (e is TimeoutException || e is IOException) {
_showScrollUpMaterialBanner(eventContextId!); _showScrollUpMaterialBanner(eventContextId!);

7
lib/pages/chat/chat_event_list.dart
View file

@ -27,6 +27,7 @@ class ChatEventList extends StatelessWidget {
final events = controller.timeline!.events final events = controller.timeline!.events
.where((event) => event.isVisibleInGui) .where((event) => event.isVisibleInGui)
.toList(); .toList();
final animateInEventIndex = controller.animateInEventIndex;
// create a map of eventId --> index to greatly improve performance of // create a map of eventId --> index to greatly improve performance of
// ListView's findChildIndexCallback // ListView's findChildIndexCallback
@ -101,6 +102,8 @@ class ChatEventList extends StatelessWidget {
// The message at this index: // The message at this index:
final event = events[i]; final event = events[i];
final animateIn = animateInEventIndex != null &&
event == controller.timeline!.events[animateInEventIndex];
return AutoScrollTag( return AutoScrollTag(
key: ValueKey(event.eventId), key: ValueKey(event.eventId),
@ -108,6 +111,10 @@ class ChatEventList extends StatelessWidget {
controller: controller.scrollController, controller: controller.scrollController,
child: Message( child: Message(
event, event,
animateIn: animateIn,
resetAnimateIn: () {
controller.animateInEventIndex = null;
},
onSwipe: () => controller.replyAction(replyTo: event), onSwipe: () => controller.replyAction(replyTo: event),
onInfoTab: controller.showEventInfo, onInfoTab: controller.showEventInfo,
onAvatarTab: (Event event) => showAdaptiveBottomSheet( onAvatarTab: (Event event) => showAdaptiveBottomSheet(

178
lib/pages/chat/events/message.dart
View file

@ -32,6 +32,8 @@ class Message extends StatelessWidget {
final bool selected; final bool selected;
final Timeline timeline; final Timeline timeline;
final bool highlightMarker; final bool highlightMarker;
final bool animateIn;
final void Function()? resetAnimateIn;
const Message( const Message(
this.event, { this.event, {
@ -46,6 +48,8 @@ class Message extends StatelessWidget {
this.selected = false, this.selected = false,
required this.timeline, required this.timeline,
this.highlightMarker = false, this.highlightMarker = false,
this.animateIn = false,
this.resetAnimateIn,
super.key, super.key,
}); });
@ -382,90 +386,110 @@ class Message extends StatelessWidget {
} }
TapDownDetails? lastTapDownDetails; TapDownDetails? lastTapDownDetails;
final resetAnimateIn = this.resetAnimateIn;
var animateIn = this.animateIn;
return Center( return StatefulBuilder(
child: Swipeable( builder: (context, setState) {
key: ValueKey(event.eventId), if (animateIn && resetAnimateIn != null) {
background: const Padding( WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
padding: EdgeInsets.symmetric(horizontal: 12.0), animateIn = false;
setState(resetAnimateIn);
});
}
return AnimatedSlide(
offset: Offset(0, animateIn ? 1 : 0),
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
child: Center( child: Center(
child: Icon(Icons.check_outlined), child: Swipeable(
), key: ValueKey(event.eventId),
), background: const Padding(
direction: SwipeDirection.endToStart, padding: EdgeInsets.symmetric(horizontal: 12.0),
onSwipe: (_) => onSwipe(), child: Center(
child: HoverBuilder( child: Icon(Icons.check_outlined),
builder: (context, hovered) => GestureDetector(
onTapDown: (details) {
lastTapDownDetails = details;
},
onTap: () {
if (lastTapDownDetails?.kind == PointerDeviceKind.mouse) return;
onSelect(event);
},
child: Stack(
children: [
Container(
constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth * 2.5,
),
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
child: container,
), ),
if (hovered || selected) ),
Positioned( direction: SwipeDirection.endToStart,
left: ownMessage ? 4 : null, onSwipe: (_) => onSwipe(),
right: ownMessage ? null : 4, child: HoverBuilder(
bottom: 4, builder: (context, hovered) => GestureDetector(
child: Material( onTapDown: (details) {
color: Theme.of(context) lastTapDownDetails = details;
.colorScheme },
.surfaceVariant onTap: () {
.withOpacity(0.9), if (lastTapDownDetails?.kind == PointerDeviceKind.mouse) {
elevation: Theme.of(context) return;
.appBarTheme }
.scrolledUnderElevation ?? onSelect(event);
4, },
borderRadius: child: Stack(
BorderRadius.circular(AppConfig.borderRadius), children: [
shadowColor: Theme.of(context).appBarTheme.shadowColor, Container(
child: Row( constraints: const BoxConstraints(
mainAxisSize: MainAxisSize.min, maxWidth: FluffyThemes.columnWidth * 2.5,
children: [ ),
if (hovered) ...[ padding: const EdgeInsets.symmetric(
IconButton( horizontal: 8.0,
icon: const Icon( vertical: 4.0,
Icons.reply_outlined, ),
size: 16, child: container,
),
tooltip: L10n.of(context)!.reply,
onPressed: () => onSwipe(),
),
],
IconButton(
icon: Icon(
selected
? Icons.check_circle
: longPressSelect
? Icons.check_circle_outlined
: Icons.menu,
size: 16,
),
tooltip: L10n.of(context)!.select,
onPressed: () => onSelect(event),
),
],
), ),
), if (hovered || selected)
Positioned(
left: ownMessage ? 4 : null,
right: ownMessage ? null : 4,
bottom: 4,
child: Material(
color: Theme.of(context)
.colorScheme
.surfaceVariant
.withOpacity(0.9),
elevation: Theme.of(context)
.appBarTheme
.scrolledUnderElevation ??
4,
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
shadowColor:
Theme.of(context).appBarTheme.shadowColor,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (hovered) ...[
IconButton(
icon: const Icon(
Icons.reply_outlined,
size: 16,
),
tooltip: L10n.of(context)!.reply,
onPressed: () => onSwipe(),
),
],
IconButton(
icon: Icon(
selected
? Icons.check_circle
: longPressSelect
? Icons.check_circle_outlined
: Icons.menu,
size: 16,
),
tooltip: L10n.of(context)!.select,
onPressed: () => onSelect(event),
),
],
),
),
),
],
), ),
], ),
),
), ),
), ),
), );
), },
); );
} }
} }