diff --git a/lib/model/content.dart b/lib/model/content.dart index c22970a1aa..dd29341c0a 100644 --- a/lib/model/content.dart +++ b/lib/model/content.dart @@ -1,4 +1,5 @@ import 'package:flutter/foundation.dart'; +import 'package:flutter/rendering.dart'; import 'package:html/dom.dart' as dom; import 'package:html/parser.dart'; @@ -533,6 +534,28 @@ class MathInlineNode extends InlineContentNode { } } +class GlobalTimeNode extends InlineContentNode { + const GlobalTimeNode({super.debugHtmlNode, required this.datetime}); + + // `datetime` is always in UTC, this is enforced + // in [parseInlineContent]. + final DateTime datetime; + + @override + bool operator ==(Object other) { + return other is GlobalTimeNode && other.datetime == datetime; + } + + @override + int get hashCode => Object.hash('GlobalTimeNode', datetime); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties.add(DiagnosticsProperty('datetime', datetime)); + } +} + //////////////////////////////////////////////////////////////// // Ported from https://github.com/zulip/zulip-mobile/blob/c979530d6804db33310ed7d14a4ac62017432944/src/emoji/data.js#L108-L112 @@ -717,6 +740,21 @@ class _ZulipContentParser { return ImageEmojiNode(src: src, alt: alt, debugHtmlNode: debugHtmlNode); } + if (localName == 'time' && classes.isEmpty) { + final attr = element.attributes['datetime']; + if (attr == null) return unimplemented(); + try { + // This attribute is always in ISO 8601 format with a Z suffix; + // see `Timestamp` in zulip:zerver/lib/markdown/__init__.py . + final datetime = DateTime.parse(attr); + if (!datetime.isUtc) return unimplemented(); + + return GlobalTimeNode(datetime: datetime, debugHtmlNode: debugHtmlNode); + } on FormatException { + return unimplemented(); + } + } + if (localName == 'span' && classes.length == 1 && classes.contains('katex')) { diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart index 1954b3931f..dfe7845273 100644 --- a/lib/widgets/content.dart +++ b/lib/widgets/content.dart @@ -2,6 +2,7 @@ import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:html/dom.dart' as dom; +import 'package:intl/intl.dart'; import '../api/core.dart'; import '../api/model/model.dart'; @@ -11,6 +12,7 @@ import '../model/internal_link.dart'; import '../model/store.dart'; import 'code_block.dart'; import 'dialog.dart'; +import 'icons.dart'; import 'lightbox.dart'; import 'message_list.dart'; import 'store.dart'; @@ -523,6 +525,9 @@ class _InlineContentBuilder { } else if (node is MathInlineNode) { return TextSpan(style: _kInlineMathStyle, children: [TextSpan(text: node.texSource)]); + } else if (node is GlobalTimeNode) { + return WidgetSpan(alignment: PlaceholderAlignment.middle, + child: GlobalTime(node: node)); } else if (node is UnimplementedInlineContentNode) { return _errorUnimplemented(node); } else { @@ -681,6 +686,38 @@ class UserMention extends StatelessWidget { // borderRadius: BorderRadius.all(Radius.circular(3)))); } +class GlobalTime extends StatelessWidget { + const GlobalTime({super.key, required this.node}); + + final GlobalTimeNode node; + + static final _backgroundColor = const HSLColor.fromAHSL(1, 0, 0, 0.93).toColor(); + static final _borderColor = const HSLColor.fromAHSL(1, 0, 0, 0.8).toColor(); + static final _dateFormat = DateFormat('EEE, MMM d, y, h:mm a'); // TODO(intl): localize date + + @override + Widget build(BuildContext context) { + final text = _dateFormat.format(node.datetime.toLocal()); + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 2), + child: DecoratedBox( + decoration: BoxDecoration( + color: _backgroundColor, + border: Border.all(width: 1, color: _borderColor), + borderRadius: BorderRadius.circular(3)), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 2.8), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const Icon(ZulipIcons.clock, size: 14), + Text(text, style: Paragraph.getTextStyle(context)), + ] + ))), + ); + } +} + class MessageImageEmoji extends StatelessWidget { const MessageImageEmoji({super.key, required this.node}); diff --git a/test/model/content_test.dart b/test/model/content_test.dart index 87c6c182e6..b1fb5b5607 100644 --- a/test/model/content_test.dart +++ b/test/model/content_test.dart @@ -176,6 +176,33 @@ void main() { '

', const MathInlineNode(texSource: r'\lambda')); + group('global times', () { + final datetime = DateTime.parse('2024-01-30T17:33Z'); + testParseInline('smoke', + // "" + '

', + GlobalTimeNode(datetime: datetime), + ); + + testParseInline('handles missing attribute', + // No markdown, this is unexpected response + '

', + inlineUnimplemented(''), + ); + + testParseInline('handles DateTime.parse failure', + // No markdown, this is unexpected response + '

', + inlineUnimplemented(''), + ); + + testParseInline('handles unexpected timezone', + // No markdown, this is unexpected response + '

', + inlineUnimplemented(''), + ); + }); + // // Block content. // diff --git a/test/widgets/content_test.dart b/test/widgets/content_test.dart index 645d07155e..b1bc77512e 100644 --- a/test/widgets/content_test.dart +++ b/test/widgets/content_test.dart @@ -93,6 +93,17 @@ void main() { tester.widget(find.text(r'\lambda')); }); + testWidgets('GlobalTime smoke', (tester) async { + // "" + await tester.pumpWidget(MaterialApp(home: BlockContentList(nodes: parseContent( + '

' + ).nodes))); + // The time is shown in the user's timezone and the result will depend on + // the timezone of the environment running this test. Accept here a wide + // range of times. + tester.widget(find.textContaining(RegExp(r'^Tue, Jan 30, 2024, \d+:\d\d [AP]M$'))); + }); + Future tapText(WidgetTester tester, Finder textFinder) async { final height = tester.getSize(textFinder).height; final target = tester.getTopLeft(textFinder)