Skip to content

Commit 6cd7ac5

Browse files
rajveermalviyarajveermalviya
committed
content: Handle message_embed website previews
Implements support for displaying website previews messages, follows the Web styling, like having different layout for larger viewports (> 576), and any other constraints that are empirically present on Web. Fixes: #1016
1 parent 4a290fd commit 6cd7ac5

File tree

4 files changed

+410
-0
lines changed

4 files changed

+410
-0
lines changed

‎lib/model/content.dart

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,6 +504,58 @@ class EmbedVideoNode extends BlockContentNode {
504504
}
505505
}
506506

507+
// See:
508+
// https://ogp.me/
509+
// https://oembed.com/
510+
// https://zulip.com/help/image-video-and-website-previews#configure-whether-website-previews-are-shown
511+
class WebsitePreviewNode extends BlockContentNode {
512+
const WebsitePreviewNode({
513+
super.debugHtmlNode,
514+
required this.hrefUrl,
515+
required this.imageSrcUrl,
516+
required this.title,
517+
required this.description,
518+
});
519+
520+
/// The URL from which this preview data was retrieved.
521+
final String hrefUrl;
522+
523+
/// The image URL representing the webpage, content value
524+
/// of `og:image` HTML meta property.
525+
final String imageSrcUrl;
526+
527+
/// Represents the webpage title, derived from either
528+
/// the content of the `og:title` HTML meta property or
529+
/// the <title> HTML element.
530+
final String? title;
531+
532+
/// Description about the webpage, content value of
533+
/// `og:description` HTML meta property.
534+
final String? description;
535+
536+
@override
537+
bool operator ==(Object other) {
538+
return other is WebsitePreviewNode
539+
&& other.hrefUrl == hrefUrl
540+
&& other.imageSrcUrl == imageSrcUrl
541+
&& other.title == title
542+
&& other.description == description;
543+
}
544+
545+
@override
546+
int get hashCode =>
547+
Object.hash('WebsitePreviewNode', hrefUrl, imageSrcUrl, title, description);
548+
549+
@override
550+
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
551+
super.debugFillProperties(properties);
552+
properties.add(StringProperty('hrefUrl', hrefUrl));
553+
properties.add(StringProperty('imageSrcUrl', imageSrcUrl));
554+
properties.add(StringProperty('title', title));
555+
properties.add(StringProperty('description', description));
556+
}
557+
}
558+
507559
class TableNode extends BlockContentNode {
508560
const TableNode({super.debugHtmlNode, required this.rows});
509561

@@ -1339,6 +1391,112 @@ class _ZulipContentParser {
13391391
return EmbedVideoNode(hrefUrl: href, previewImageSrcUrl: imgSrc, debugHtmlNode: debugHtmlNode);
13401392
}
13411393

1394+
static final _websitePreviewImageSrcRegexp = RegExp(r'background-image: url\("(.+)"\)');
1395+
1396+
BlockContentNode parseWebsitePreviewNode(dom.Element divElement) {
1397+
assert(divElement.localName == 'div'
1398+
&& divElement.className == 'message_embed');
1399+
1400+
final result = () {
1401+
if (divElement.nodes case [
1402+
dom.Element(
1403+
localName: 'a',
1404+
className: 'message_embed_image',
1405+
attributes: {
1406+
'href': final String imageHref,
1407+
'style': final String imageStyleAttr,
1408+
},
1409+
nodes: []),
1410+
dom.Element(
1411+
localName: 'div',
1412+
className: 'data-container',
1413+
nodes: [...]) && final dataContainer,
1414+
]) {
1415+
final match = _websitePreviewImageSrcRegexp.firstMatch(imageStyleAttr);
1416+
if (match == null) return null;
1417+
final imageSrcUrl = match.group(1);
1418+
if (imageSrcUrl == null) return null;
1419+
1420+
String? parseTitle(dom.Element element) {
1421+
assert(element.localName == 'div' &&
1422+
element.className == 'message_embed_title');
1423+
if (element.nodes case [
1424+
dom.Element(localName: 'a', className: '') && final child,
1425+
]) {
1426+
final titleHref = child.attributes['href'];
1427+
// Make sure both image hyperlink and title hyperlink are same.
1428+
if (imageHref != titleHref) return null;
1429+
1430+
if (child.nodes case [dom.Text(text: final title)]) {
1431+
return title;
1432+
}
1433+
}
1434+
return null;
1435+
}
1436+
1437+
String? parseDescription(dom.Element element) {
1438+
assert(element.localName == 'div' &&
1439+
element.className == 'message_embed_description');
1440+
if (element.nodes case [dom.Text(text: final description)]) {
1441+
return description;
1442+
}
1443+
return null;
1444+
}
1445+
1446+
String? title, description;
1447+
switch (dataContainer.nodes) {
1448+
case [
1449+
dom.Element(
1450+
localName: 'div',
1451+
className: 'message_embed_title') && final first,
1452+
dom.Element(
1453+
localName: 'div',
1454+
className: 'message_embed_description') && final second,
1455+
]:
1456+
title = parseTitle(first);
1457+
if (title == null) return null;
1458+
description = parseDescription(second);
1459+
if (description == null) return null;
1460+
1461+
case [dom.Element(localName: 'div') && final single]:
1462+
switch (single.className) {
1463+
case 'message_embed_title':
1464+
title = parseTitle(single);
1465+
if (title == null) return null;
1466+
1467+
case 'message_embed_description':
1468+
description = parseDescription(single);
1469+
if (description == null) return null;
1470+
1471+
default:
1472+
return null;
1473+
}
1474+
1475+
case []:
1476+
// Server generates an empty `<div class="data-container"></div>`
1477+
// if website HTML has neither title (derived from
1478+
// `og:title` or `<title>…</title>`) nor description (derived from
1479+
// `og:description`).
1480+
break;
1481+
1482+
default:
1483+
return null;
1484+
}
1485+
1486+
return WebsitePreviewNode(
1487+
hrefUrl: imageHref,
1488+
imageSrcUrl: imageSrcUrl,
1489+
title: title,
1490+
description: description,
1491+
);
1492+
} else {
1493+
return null;
1494+
}
1495+
}();
1496+
1497+
return result ?? UnimplementedBlockContentNode(htmlNode: divElement);
1498+
}
1499+
13421500
BlockContentNode parseTableContent(dom.Element tableElement) {
13431501
assert(tableElement.localName == 'table'
13441502
&& tableElement.className.isEmpty);
@@ -1583,6 +1741,10 @@ class _ZulipContentParser {
15831741
}
15841742
}
15851743

1744+
if (localName == 'div' && className == 'message_embed') {
1745+
return parseWebsitePreviewNode(element);
1746+
}
1747+
15861748
// TODO more types of node
15871749
return UnimplementedBlockContentNode(htmlNode: node);
15881750
}

‎lib/widgets/content.dart

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'package:flutter/cupertino.dart';
44
import 'package:flutter/foundation.dart';
55
import 'package:flutter/gestures.dart';
66
import 'package:flutter/material.dart';
7+
import 'package:flutter/rendering.dart';
78
import 'package:flutter/services.dart';
89
import 'package:html/dom.dart' as dom;
910
import 'package:intl/intl.dart';
@@ -18,6 +19,7 @@ import '../model/internal_link.dart';
1819
import 'code_block.dart';
1920
import 'dialog.dart';
2021
import 'icons.dart';
22+
import 'inset_shadow.dart';
2123
import 'lightbox.dart';
2224
import 'message_list.dart';
2325
import 'poll.dart';
@@ -371,6 +373,7 @@ class BlockContentList extends StatelessWidget {
371373
);
372374
return const SizedBox.shrink();
373375
}(),
376+
WebsitePreviewNode() => WebsitePreview(node: node),
374377
UnimplementedBlockContentNode() =>
375378
Text.rich(_errorUnimplemented(node, context: context)),
376379
};
@@ -846,6 +849,103 @@ class MathBlock extends StatelessWidget {
846849
}
847850
}
848851

852+
class WebsitePreview extends StatelessWidget {
853+
const WebsitePreview({super.key, required this.node});
854+
855+
final WebsitePreviewNode node;
856+
857+
@override
858+
Widget build(BuildContext context) {
859+
final store = PerAccountStoreWidget.of(context);
860+
final resolvedImageSrcUrl = store.tryResolveUrl(node.imageSrcUrl);
861+
final isSmallWidth = MediaQuery.sizeOf(context).width <= 576;
862+
863+
// On Web on larger width viewports, the title and description container's
864+
// width is constrained using `max-width: calc(100% - 115px)`, we do not
865+
// follow the same here for potential benefits listed here:
866+
// https://github.com/zulip/zulip-flutter/pull/1049#discussion_r1915740997
867+
final titleAndDescription = Column(
868+
crossAxisAlignment: CrossAxisAlignment.start,
869+
children: [
870+
if (node.title != null)
871+
GestureDetector(
872+
onTap: () => _launchUrl(context, node.hrefUrl),
873+
child: Text(node.title!,
874+
style: TextStyle(
875+
fontSize: 1.2 * kBaseFontSize,
876+
// Web uses `line-height: normal` for title. MDN docs for it:
877+
// https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#normal
878+
// says actual value depends on user-agent, and default value
879+
// can be roughly 1.2 (unitless). So, use the same here.
880+
height: 1.2,
881+
color: ContentTheme.of(context).colorLink))),
882+
if (node.description != null)
883+
Container(
884+
padding: const EdgeInsets.only(top: 3),
885+
constraints: const BoxConstraints(maxWidth: 500),
886+
child: Text(node.description!)),
887+
]);
888+
889+
final clippedTitleAndDescription = Padding(
890+
padding: const EdgeInsets.symmetric(horizontal: 5),
891+
child: InsetShadowBox(
892+
bottom: 8,
893+
// TODO(#488) use different color for non-message contexts
894+
// TODO(#647) use different color for highlighted messages
895+
// TODO(#681) use different color for DM messages
896+
color: MessageListTheme.of(context).streamMessageBgDefault,
897+
child: ClipRect(
898+
child: ConstrainedBox(
899+
constraints: BoxConstraints(maxHeight: 80),
900+
child: OverflowBox(
901+
maxHeight: double.infinity,
902+
alignment: AlignmentDirectional.topStart,
903+
fit: OverflowBoxFit.deferToChild,
904+
child: Padding(
905+
padding: const EdgeInsets.only(bottom: 8),
906+
child: titleAndDescription))))));
907+
908+
final image = resolvedImageSrcUrl == null ? null
909+
: GestureDetector(
910+
onTap: () => _launchUrl(context, node.hrefUrl),
911+
child: RealmContentNetworkImage(
912+
resolvedImageSrcUrl,
913+
fit: BoxFit.cover));
914+
915+
final result = isSmallWidth
916+
? Column(
917+
crossAxisAlignment: CrossAxisAlignment.start,
918+
spacing: 15,
919+
children: [
920+
if (image != null)
921+
SizedBox(height: 110, width: double.infinity, child: image),
922+
clippedTitleAndDescription,
923+
])
924+
: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
925+
if (image != null)
926+
AspectRatio(aspectRatio: 1, child: image),
927+
Flexible(child: clippedTitleAndDescription),
928+
]);
929+
930+
return Padding(
931+
// TODO(?) Web has a bottom margin `--markdown-interelement-space-px`
932+
// around the `message_embed` container, which is calculated here:
933+
// https://github.com/zulip/zulip/blob/d28f7d86223bab4f11629637d4237381943f6fc1/web/src/information_density.ts#L80-L102
934+
// But for now we use a static value of 6.72px instead which is the
935+
// default in the web client, see discussion:
936+
// https://github.com/zulip/zulip-flutter/pull/1049#discussion_r1915747908
937+
padding: const EdgeInsets.only(bottom: 6.72),
938+
child: Container(
939+
height: !isSmallWidth ? 90 : null,
940+
decoration: const BoxDecoration(
941+
border: BorderDirectional(start: BorderSide(
942+
// Web has the same color in light and dark mode.
943+
color: Color(0xffededed), width: 3))),
944+
padding: const EdgeInsets.all(5),
945+
child: result));
946+
}
947+
}
948+
849949
//
850950
// Inline layout.
851951
//

0 commit comments

Comments
 (0)