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

Merge pull request #1024 from pangeachat/initializing-overlay

Browse source 
Initializing-overlay
This commit is contained in:
ggurdin 2024-11-18 10:02:58 -05:00 • committed by GitHub
commit f26c7e76e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 153 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

317
lib/pangea/widgets/chat/message_selection_overlay.dart
View file

@ -62,24 +62,23 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
MessageMode toolbarMode = MessageMode.translation;
PangeaTokenText? _selectedSpan;
/// The number of activities that need to be completed before the toolbar is unlocked
/// If we don't have any good activities for them, we'll decrease this number
static const int neededActivities = 3;
bool get messageInUserL2 =>
pangeaMessageEvent.messageDisplayLangCode ==
MatrixState.pangeaController.languageController.userL2?.langCode;
List<PangeaToken>? tokens;
bool initialized = false;
PangeaMessageEvent get pangeaMessageEvent => widget._pangeaMessageEvent;
final TtsController tts = TtsController();
bool isPlayingAudio = false;
bool _isPlayingAudio = false;
bool get showToolbarButtons => !widget._pangeaMessageEvent.isAudioMessage;
int get activitiesLeftToComplete => messageAnalyticsEntry?.numActivities ?? 0;
bool get isPracticeComplete => activitiesLeftToComplete <= 0;
/// Decides whether an _initialSelectedToken should be used
/// for a first practice activity on the word meaning
PangeaToken? get selectedTargetTokenForWordMeaning {
PangeaToken? get _selectedTargetTokenForWordMeaning {
// if there is no initial selected token, then we don't need to do anything
if (widget._initialSelectedToken == null || messageAnalyticsEntry == null) {
return null;
@ -100,26 +99,34 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
: null;
}
List<PangeaToken>? tokens;
@override
void initState() {
super.initState();
_getTokens();
_setupSubscriptions();
if (_selectedTargetTokenForWordMeaning != null) {
messageAnalyticsEntry?.addForWordMeaning(
_selectedTargetTokenForWordMeaning!,
);
}
debugPrint(
"selected token: ${widget._initialSelectedToken?.text.content} total_xp:${widget._initialSelectedToken?.xp} vocab_construct_xp: ${widget._initialSelectedToken?.vocabConstruct.points} daysSincelastUseInWordMeaning ${widget._initialSelectedToken?.daysSinceLastUseByType(ActivityTypeEnum.wordMeaning)}",
);
debugPrint(
"${widget._initialSelectedToken?.vocabConstruct.uses.map((u) => "${u.useType} ${u.timeStamp}").join(", ")}",
);
}
void _setupSubscriptions() {
_animationController = AnimationController(
vsync: this,
duration:
const Duration(milliseconds: AppConfig.overlayAnimationDuration),
);
debugPrint(
"selected token: ${widget._initialSelectedToken?.toJson()} total_xp:${widget._initialSelectedToken?.xp} vocab_construct_xp: ${widget._initialSelectedToken?.vocabConstruct.points} daysSincelastUseInWordMeaning ${widget._initialSelectedToken?.daysSinceLastUseByType(ActivityTypeEnum.wordMeaning)}",
);
debugPrint(
"${widget._initialSelectedToken?.vocabConstruct.uses.map((u) => "${u.useType} ${u.timeStamp}").join(", ")}",
);
_getTokens();
_reactionSubscription =
widget.chatController.room.client.onSync.stream.where(
(update) {
@ -141,13 +148,6 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
).listen((_) => setState(() {}));
tts.setupTTS();
if (selectedTargetTokenForWordMeaning != null) {
messageAnalyticsEntry
?.addForWordMeaning(selectedTargetTokenForWordMeaning!);
}
_setInitialToolbarMode();
}
MessageAnalyticsEntry? get messageAnalyticsEntry => tokens != null
@ -160,23 +160,47 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
: null;
Future<void> _getTokens() async {
tokens = pangeaMessageEvent.originalSent?.tokens;
if (pangeaMessageEvent.originalSent != null && tokens == null) {
debugPrint("fetching tokens");
pangeaMessageEvent.originalSent!
.tokensGlobal(
pangeaMessageEvent.senderId,
pangeaMessageEvent.originServerTs,
)
.then((tokens) {
// this isn't currently working because originalSent's _event is null
this.tokens = tokens;
_setInitialToolbarMode();
});
try {
final repEvent = pangeaMessageEvent.messageDisplayRepresentation;
if (repEvent != null) {
tokens = await repEvent.tokensGlobal(
pangeaMessageEvent.senderId,
pangeaMessageEvent.originServerTs,
);
}
} catch (e, s) {
ErrorHandler.logError(e: e, s: s);
} finally {
_setInitialToolbarMode();
initialized = true;
if (mounted) setState(() {});
}
}
Future<void> _setInitialToolbarMode() async {
if (widget._pangeaMessageEvent.isAudioMessage) {
toolbarMode = MessageMode.speechToText;
return setState(() {});
}
// 1) we're only going to do activities if we have tokens for the message
// 2) if the user selects a span on initialization, then we want to give
// them a practice activity on that word
// 3) if the user has activities left to complete, then we want to give them
if (tokens != null && activitiesLeftToComplete > 0) {
return setState(() => toolbarMode = MessageMode.practiceActivity);
}
// Note: this setting is now hidden so this will always be false
// leaving this here in case we want to bring it back
if (MatrixState.pangeaController.userController.profile.userSettings
.autoPlayMessages) {
return setState(() => toolbarMode = MessageMode.textToSpeech);
}
setState(() => toolbarMode = MessageMode.translation);
}
/// We need to check if the setState call is safe to call immediately
/// Kept getting the error: setState() or markNeedsBuild() called during build.
/// This is a workaround to prevent that error
@ -210,14 +234,11 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
}
}
int get activitiesLeftToComplete => messageAnalyticsEntry?.numActivities ?? 0;
bool get isPracticeComplete => activitiesLeftToComplete <= 0;
/// When an activity is completed, we need to update the state
/// and check if the toolbar should be unlocked
void onActivityFinish() {
if (!mounted) return;
clearSelection();
_clearSelection();
setState(() {});
}
@ -225,42 +246,21 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
/// interact with the toolbar without completing activities
void exitPracticeFlow() {
messageAnalyticsEntry?.clearActivityQueue();
clearSelection();
_clearSelection();
setState(() {});
}
Future<void> _setInitialToolbarMode() async {
if (widget._pangeaMessageEvent.isAudioMessage) {
toolbarMode = MessageMode.speechToText;
return setState(() => toolbarMode = MessageMode.practiceActivity);
}
// 1) we're only going to do activities if we have tokens for the message
// 2) if the user selects a span on initialization, then we want to give
// them a practice activity on that word
// 3) if the user has activities left to complete, then we want to give them
if (tokens != null &&
(selectedTargetTokenForWordMeaning != null ||
activitiesLeftToComplete > 0)) {
return setState(() => toolbarMode = MessageMode.practiceActivity);
}
// Note: this setting is now hidden so this will always be false
// leaving this here in case we want to bring it back
if (MatrixState.pangeaController.userController.profile.userSettings
.autoPlayMessages) {
return setState(() => toolbarMode = MessageMode.textToSpeech);
}
setState(() => toolbarMode = MessageMode.translation);
}
updateToolbarMode(MessageMode mode) {
void updateToolbarMode(MessageMode mode) {
setState(() {
toolbarMode = mode;
});
}
void _clearSelection() {
_selectedSpan = null;
setState(() {});
}
/// The text that the toolbar should target
/// If there is no selectedSpan, then the whole message is the target
/// If there is a selectedSpan, then the target is the selected text
@ -282,7 +282,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
MessageMode.practiceActivity,
// MessageMode.textToSpeech
].contains(toolbarMode) ||
isPlayingAudio) {
_isPlayingAudio) {
return;
}
@ -302,11 +302,6 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
setState(() {});
}
void clearSelection() {
_selectedSpan = null;
setState(() {});
}
void setSelectedSpan(PracticeActivityModel activity) {
final RelevantSpanDisplayDetails? span =
activity.content.spanDisplayDetails;
@ -341,7 +336,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
PangeaTokenText? get selectedSpan => _selectedSpan;
bool get hasReactions {
bool get _hasReactions {
final reactionsEvents = widget._pangeaMessageEvent.event.aggregatedEvents(
widget.chatController.timeline!,
RelationshipTypes.reaction,
@ -349,35 +344,37 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
return reactionsEvents.where((e) => !e.redacted).isNotEmpty;
}
double get toolbarButtonsHeight =>
double get _toolbarButtonsHeight =>
showToolbarButtons ? AppConfig.toolbarButtonsHeight : 0;
double get reactionsHeight => hasReactions ? 28 : 0;
double get belowMessageHeight => toolbarButtonsHeight + reactionsHeight;
double get _reactionsHeight => _hasReactions ? 28 : 0;
double get _belowMessageHeight => _toolbarButtonsHeight + _reactionsHeight;
void setIsPlayingAudio(bool isPlaying) {
if (mounted) {
setState(() => isPlayingAudio = isPlaying);
setState(() => _isPlayingAudio = isPlaying);
}
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
if (messageSize == null || messageOffset == null || screenHeight == null) {
if (_messageSize == null ||
_messageOffset == null ||
_screenHeight == null) {
return;
}
// position the overlay directly over the underlying message
final headerBottomOffset = screenHeight! - headerHeight;
final footerBottomOffset = footerHeight;
final currentBottomOffset = screenHeight! -
messageOffset!.dy -
messageSize!.height -
belowMessageHeight;
final headerBottomOffset = _screenHeight! - _headerHeight;
final footerBottomOffset = _footerHeight;
final currentBottomOffset = _screenHeight! -
_messageOffset!.dy -
_messageSize!.height -
_belowMessageHeight;
final bool hasHeaderOverflow =
messageOffset!.dy < (AppConfig.toolbarMaxHeight + headerHeight);
final bool hasFooterOverflow = footerHeight > currentBottomOffset;
_messageOffset!.dy < (AppConfig.toolbarMaxHeight + _headerHeight);
final bool hasFooterOverflow = _footerHeight > currentBottomOffset;
if (!hasHeaderOverflow && !hasFooterOverflow) return;
@ -388,42 +385,44 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
// if the overlay would have a footer overflow for this message,
// check if shifting the overlay up could cause a header overflow
final bottomOffsetDifference = footerHeight - currentBottomOffset;
final bottomOffsetDifference = _footerHeight - currentBottomOffset;
final newTopOffset =
messageOffset!.dy - bottomOffsetDifference - belowMessageHeight;
_messageOffset!.dy - bottomOffsetDifference - _belowMessageHeight;
final bool upshiftCausesHeaderOverflow = hasFooterOverflow &&
newTopOffset < (headerHeight + AppConfig.toolbarMaxHeight);
newTopOffset < (_headerHeight + AppConfig.toolbarMaxHeight);
if (hasHeaderOverflow || upshiftCausesHeaderOverflow) {
animationEndOffset = midpoint - messageSize!.height - belowMessageHeight;
final totalTopOffset =
animationEndOffset + messageSize!.height + AppConfig.toolbarMaxHeight;
final remainingSpace = screenHeight! - totalTopOffset;
if (remainingSpace < headerHeight) {
animationEndOffset =
midpoint - _messageSize!.height - _belowMessageHeight;
final totalTopOffset = animationEndOffset +
_messageSize!.height +
AppConfig.toolbarMaxHeight;
final remainingSpace = _screenHeight! - totalTopOffset;
if (remainingSpace < _headerHeight) {
// the overlay could run over the header, so it needs to be shifted down
animationEndOffset -= (headerHeight - remainingSpace);
animationEndOffset -= (_headerHeight - remainingSpace);
}
scrollOffset = animationEndOffset - currentBottomOffset;
} else if (hasFooterOverflow) {
scrollOffset = footerHeight - currentBottomOffset;
animationEndOffset = footerHeight;
scrollOffset = _footerHeight - currentBottomOffset;
animationEndOffset = _footerHeight;
}
// If, after ajusting the overlay position, the message still overflows the footer,
// update the message height to fit the screen. The message is scrollable, so
// this will make the both the toolbar box and the toolbar buttons visible.
if (animationEndOffset < footerHeight + belowMessageHeight) {
final double remainingSpace = screenHeight! -
if (animationEndOffset < _footerHeight + _belowMessageHeight) {
final double remainingSpace = _screenHeight! -
AppConfig.toolbarMaxHeight -
headerHeight -
footerHeight -
belowMessageHeight;
_headerHeight -
_footerHeight -
_belowMessageHeight;
if (remainingSpace < messageSize!.height) {
adjustedMessageHeight = remainingSpace;
if (remainingSpace < _messageSize!.height) {
_adjustedMessageHeight = remainingSpace;
}
animationEndOffset = footerHeight;
animationEndOffset = _footerHeight;
}
_overlayPositionAnimation = Tween<double>(
@ -453,7 +452,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
super.dispose();
}
RenderBox? get messageRenderBox {
RenderBox? get _messageRenderBox {
try {
return MatrixState.pAnyState.getRenderBox(
widget._event.eventId,
@ -464,39 +463,39 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
}
}
Size? get messageSize {
if (messageRenderBox == null || !messageRenderBox!.hasSize) {
Size? get _messageSize {
if (_messageRenderBox == null || !_messageRenderBox!.hasSize) {
return null;
}
try {
return messageRenderBox?.size;
return _messageRenderBox?.size;
} catch (e, s) {
ErrorHandler.logError(e: "Error getting message size: $e", s: s);
return null;
}
}
Offset? get messageOffset {
if (messageRenderBox == null || !messageRenderBox!.hasSize) {
Offset? get _messageOffset {
if (_messageRenderBox == null || !_messageRenderBox!.hasSize) {
return null;
}
try {
return messageRenderBox?.localToGlobal(Offset.zero);
return _messageRenderBox?.localToGlobal(Offset.zero);
} catch (e, s) {
ErrorHandler.logError(e: "Error getting message offset: $e", s: s);
return null;
}
}
double? adjustedMessageHeight;
double? _adjustedMessageHeight;
// height of the reply/forward bar + the reaction picker + contextual padding
double get footerHeight =>
double get _footerHeight =>
48 + 56 + (FluffyThemes.isColumnMode(context) ? 16.0 : 8.0);
MediaQueryData? get mediaQuery {
MediaQueryData? get _mediaQuery {
try {
return MediaQuery.of(context);
} catch (e, s) {
@ -505,17 +504,17 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
}
}
double get headerHeight =>
double get _headerHeight =>
(Theme.of(context).appBarTheme.toolbarHeight ?? 56) +
(mediaQuery?.padding.top ?? 0);
(_mediaQuery?.padding.top ?? 0);
double? get screenHeight => mediaQuery?.size.height;
double? get _screenHeight => _mediaQuery?.size.height;
double? get screenWidth => mediaQuery?.size.width;
double? get _screenWidth => _mediaQuery?.size.width;
@override
Widget build(BuildContext context) {
if (messageSize == null) return const SizedBox.shrink();
if (_messageSize == null) return const SizedBox.shrink();
final bool showDetails = (Matrix.of(context)
.store
@ -530,8 +529,8 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
const totalMaxWidth = (FluffyThemes.columnWidth * 2.5) - messageMargin;
double? maxWidth;
if (screenWidth != null) {
final chatViewWidth = screenWidth! -
if (_screenWidth != null) {
final chatViewWidth = _screenWidth! -
(FluffyThemes.isColumnMode(context)
? (FluffyThemes.columnWidth + FluffyThemes.navRailWidth)
: 0);
@ -558,7 +557,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
),
const SizedBox(height: 8),
SizedBox(
height: adjustedMessageHeight,
height: _adjustedMessageHeight,
child: OverlayMessage(
pangeaMessageEvent,
immersionMode:
@ -568,15 +567,15 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
nextEvent: widget._nextEvent,
prevEvent: widget._prevEvent,
timeline: widget.chatController.timeline!,
messageWidth: messageSize!.width,
messageHeight: messageSize!.height,
messageWidth: _messageSize!.width,
messageHeight: _messageSize!.height,
),
),
if (hasReactions)
if (_hasReactions)
Padding(
padding: const EdgeInsets.all(4),
child: SizedBox(
height: reactionsHeight - 8,
height: _reactionsHeight - 8,
child: MessageReactions(
widget._pangeaMessageEvent.event,
widget.chatController.timeline!,
@ -597,30 +596,32 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
: 0;
final double? leftPadding =
(widget._pangeaMessageEvent.ownMessage || messageOffset == null)
(widget._pangeaMessageEvent.ownMessage || _messageOffset == null)
? null
: messageOffset!.dx - horizontalPadding - columnOffset;
: _messageOffset!.dx - horizontalPadding - columnOffset;
final double? rightPadding = (widget._pangeaMessageEvent.ownMessage &&
screenWidth != null &&
messageOffset != null &&
messageSize != null)
? screenWidth! -
messageOffset!.dx -
messageSize!.width -
_screenWidth != null &&
_messageOffset != null &&
_messageSize != null)
? _screenWidth! -
_messageOffset!.dx -
_messageSize!.width -
horizontalPadding
: null;
final positionedOverlayMessage = (_overlayPositionAnimation == null)
? (screenHeight == null || messageSize == null || messageOffset == null)
? (_screenHeight == null ||
_messageSize == null ||
_messageOffset == null)
? const SizedBox.shrink()
: Positioned(
left: leftPadding,
right: rightPadding,
bottom: screenHeight! -
messageOffset!.dy -
messageSize!.height -
belowMessageHeight,
bottom: _screenHeight! -
_messageOffset!.dy -
_messageSize!.height -
_belowMessageHeight,
child: overlayMessage,
)
: AnimatedBuilder(
@ -672,25 +673,3 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
);
}
}
class MessagePadding extends StatelessWidget {
const MessagePadding({
super.key,
required this.child,
required this.pangeaMessageEvent,
});
final Widget child;
final PangeaMessageEvent pangeaMessageEvent;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
left: pangeaMessageEvent.ownMessage ? 0 : Avatar.defaultSize + 16,
right: pangeaMessageEvent.ownMessage ? 8 : 0,
),
child: child,
);
}
}

4
lib/pangea/widgets/chat/message_toolbar.dart
View file

@ -45,6 +45,10 @@ class MessageToolbar extends StatelessWidget {
);
}
if (!overLayController.initialized) {
return const ToolbarContentLoadingIndicator();
}
// Check if the message is in the user's second language
final bool messageInUserL2 = pangeaMessageEvent.messageDisplayLangCode ==
MatrixState.pangeaController.languageController.userL2?.langCode;

2
lib/pangea/widgets/practice_activity/practice_activity_card.dart
View file

@ -144,7 +144,7 @@ class PracticeActivityCardState extends State<PracticeActivityCard> {
MessageActivityRequest(
userL1: pangeaController.languageController.userL1!.langCode,
userL2: pangeaController.languageController.userL2!.langCode,
messageText: widget.pangeaMessageEvent.originalSent!.text,
messageText: widget.pangeaMessageEvent.messageDisplayText,
messageTokens: widget.overlayController.tokens!,
activityQualityFeedback: activityFeedback,
targetTokens: nextActivitySpecs.tokens,