refactor: Structure files in more directories

lib/widgets/event_content/audio_player.dart

@@ -0,0 +1,210 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:adaptive_page_layout/adaptive_page_layout.dart';
+import 'package:audioplayers/audioplayers.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/sentry_controller.dart';
+import 'package:fluffychat/widgets/event_content/message_download_content.dart';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:path_provider/path_provider.dart';
+import 'package:universal_html/html.dart' as html;
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import '../../utils/ui_fake.dart' if (dart.library.html) 'dart:ui' as ui;
+import '../matrix.dart';
+import '../../utils/matrix_sdk_extensions.dart/event_extension.dart';
+
+class AudioPlayerWidget extends StatefulWidget {
+  final Color color;
+  final Event event;
+
+  static String currentId;
+
+  const AudioPlayerWidget(this.event, {this.color = Colors.black, Key key})
+      : super(key: key);
+
+  @override
+  _AudioPlayerState createState() => _AudioPlayerState();
+}
+
+enum AudioPlayerStatus { notDownloaded, downloading, downloaded }
+
+class _AudioPlayerState extends State<AudioPlayerWidget> {
+  AudioPlayerStatus status = AudioPlayerStatus.notDownloaded;
+  final AudioPlayer audioPlayer = AudioPlayer();
+
+  StreamSubscription onAudioPositionChanged;
+  StreamSubscription onDurationChanged;
+  StreamSubscription onPlayerStateChanged;
+  StreamSubscription onPlayerError;
+
+  String statusText = '00:00';
+  double currentPosition = 0;
+  double maxPosition = 0;
+
+  File audioFile;
+
+  String webSrcUrl;
+
+  @override
+  void initState() {
+    super.initState();
+    if (kIsWeb) {
+      ui.platformViewRegistry.registerViewFactory(
+          'web_audio_player',
+          (int viewId) => html.AudioElement()
+            ..src = webSrcUrl
+            ..autoplay = false
+            ..controls = true
+            ..style.border = 'none');
+    }
+  }
+
+  @override
+  void dispose() {
+    if (audioPlayer.state == AudioPlayerState.PLAYING) {
+      audioPlayer.stop();
+    }
+    onAudioPositionChanged?.cancel();
+    onDurationChanged?.cancel();
+    onPlayerStateChanged?.cancel();
+    onPlayerError?.cancel();
+
+    super.dispose();
+  }
+
+  Future<void> _downloadAction() async {
+    if (status != AudioPlayerStatus.notDownloaded) return;
+    setState(() => status = AudioPlayerStatus.downloading);
+    try {
+      final matrixFile =
+          await widget.event.downloadAndDecryptAttachmentCached();
+      final tempDir = await getTemporaryDirectory();
+      final fileName = matrixFile.name.contains('.')
+          ? matrixFile.name
+          : '${matrixFile.name}.mp3';
+      final file = File('${tempDir.path}/$fileName');
+      await file.writeAsBytes(matrixFile.bytes);
+
+      setState(() {
+        audioFile = file;
+        status = AudioPlayerStatus.downloaded;
+      });
+      _playAction();
+    } catch (e, s) {
+      Logs().v('Could not download audio file', e, s);
+      AdaptivePageLayout.of(context).showSnackBar(
+        SnackBar(
+          content: Text(e.toLocalizedString(context)),
+        ),
+      );
+    }
+  }
+
+  void _playAction() async {
+    if (AudioPlayerWidget.currentId != widget.event.eventId) {
+      if (AudioPlayerWidget.currentId != null) {
+        if (audioPlayer.state != AudioPlayerState.STOPPED) {
+          await audioPlayer.stop();
+          setState(() => null);
+        }
+      }
+      AudioPlayerWidget.currentId = widget.event.eventId;
+    }
+    switch (audioPlayer.state) {
+      case AudioPlayerState.PLAYING:
+        await audioPlayer.pause();
+        break;
+      case AudioPlayerState.PAUSED:
+        await audioPlayer.resume();
+        break;
+      case AudioPlayerState.STOPPED:
+      default:
+        onAudioPositionChanged ??=
+            audioPlayer.onAudioPositionChanged.listen((state) {
+          setState(() {
+            statusText =
+                '${state.inMinutes.toString().padLeft(2, '0')}:${(state.inSeconds % 60).toString().padLeft(2, '0')}';
+            currentPosition = state.inMilliseconds.toDouble();
+          });
+        });
+        onDurationChanged ??= audioPlayer.onDurationChanged.listen((max) =>
+            setState(() => maxPosition = max.inMilliseconds.toDouble()));
+        onPlayerStateChanged ??= audioPlayer.onPlayerStateChanged
+            .listen((_) => setState(() => null));
+        onPlayerError ??= audioPlayer.onPlayerError.listen((e) {
+          AdaptivePageLayout.of(context).showSnackBar(
+            SnackBar(
+              content: Text(L10n.of(context).oopsSomethingWentWrong),
+            ),
+          );
+          SentryController.captureException(e, StackTrace.current);
+        });
+
+        await audioPlayer.play(audioFile.path);
+        break;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (kIsWeb) {
+      if (widget.event.content['url'] is String) {
+        webSrcUrl = Uri.parse(widget.event.content['url'])
+            .getDownloadLink(Matrix.of(context).client)
+            .toString();
+        return Container(
+          height: 50,
+          width: 300,
+          child: HtmlElementView(viewType: 'web_audio_player'),
+        );
+      }
+      return MessageDownloadContent(widget.event, widget.color);
+    }
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        Container(
+          width: 30,
+          child: status == AudioPlayerStatus.downloading
+              ? CircularProgressIndicator(strokeWidth: 2)
+              : IconButton(
+                  icon: Icon(
+                    audioPlayer.state == AudioPlayerState.PLAYING
+                        ? Icons.pause_outlined
+                        : Icons.play_arrow_outlined,
+                    color: widget.color,
+                  ),
+                  tooltip: audioPlayer.state == AudioPlayerState.PLAYING
+                      ? L10n.of(context).audioPlayerPause
+                      : L10n.of(context).audioPlayerPlay,
+                  onPressed: () {
+                    if (status == AudioPlayerStatus.downloaded) {
+                      _playAction();
+                    } else {
+                      _downloadAction();
+                    }
+                  },
+                ),
+        ),
+        Expanded(
+          child: Slider(
+            value: currentPosition,
+            onChanged: (double position) =>
+                audioPlayer.seek(Duration(milliseconds: position.toInt())),
+            max: status == AudioPlayerStatus.downloaded ? maxPosition : 0,
+            min: 0,
+          ),
+        ),
+        Text(
+          statusText,
+          style: TextStyle(
+            color: widget.color,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/event_content/html_message.dart

@@ -0,0 +1,133 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter_matrix_html/flutter_html.dart';
+import 'package:flutter/material.dart';
+import '../../utils/url_launcher.dart';
+import '../../config/setting_keys.dart';
+
+import '../matrix.dart';
+
+class HtmlMessage extends StatelessWidget {
+  final String html;
+  final int maxLines;
+  final Room room;
+  final TextStyle defaultTextStyle;
+  final TextStyle linkStyle;
+  final double emoteSize;
+
+  const HtmlMessage(
+      {this.html,
+      this.maxLines,
+      this.room,
+      this.defaultTextStyle,
+      this.linkStyle,
+      this.emoteSize});
+
+  @override
+  Widget build(BuildContext context) {
+    // riot-web is notorious for creating bad reply fallback events from invalid messages which, if
+    // not handled properly, can lead to impersination. As such, we strip the entire `<mx-reply>` tags
+    // here already, to prevent that from happening.
+    // We do *not* do this in an AST and just with simple regex here, as riot-web tends to create
+    // miss-matching tags, and this way we actually correctly identify what we want to strip and, well,
+    // strip it.
+    final renderHtml = html.replaceAll(
+        RegExp('<mx-reply>.*<\/mx-reply>',
+            caseSensitive: false, multiLine: false, dotAll: true),
+        '');
+
+    // there is no need to pre-validate the html, as we validate it while rendering
+
+    final matrix = Matrix.of(context);
+
+    final themeData = Theme.of(context);
+    return Html(
+      data: renderHtml,
+      defaultTextStyle: defaultTextStyle,
+      emoteSize: emoteSize,
+      linkStyle: linkStyle ??
+          themeData.textTheme.bodyText2.copyWith(
+            color: themeData.accentColor,
+            decoration: TextDecoration.underline,
+          ),
+      shrinkToFit: true,
+      maxLines: maxLines,
+      onLinkTap: (url) => UrlLauncher(context, url).launchUrl(),
+      onPillTap: (url) => UrlLauncher(context, url).launchUrl(),
+      getMxcUrl: (String mxc, double width, double height,
+          {bool animated = false}) {
+        final ratio = MediaQuery.of(context).devicePixelRatio;
+        return Uri.parse(mxc)
+            ?.getThumbnail(
+              matrix.client,
+              width: (width ?? 800) * ratio,
+              height: (height ?? 800) * ratio,
+              method: ThumbnailMethod.scale,
+              animated: animated,
+            )
+            .toString();
+      },
+      setCodeLanguage: (String key, String value) async {
+        await matrix.store.setItem('${SettingKeys.codeLanguage}.$key', value);
+      },
+      getCodeLanguage: (String key) async {
+        return await matrix.store.getItem('${SettingKeys.codeLanguage}.$key');
+      },
+      getPillInfo: (String url) async {
+        if (room == null) {
+          return null;
+        }
+        final identityParts = url.parseIdentifierIntoParts();
+        final identifier = identityParts?.primaryIdentifier;
+        if (identifier == null) {
+          return null;
+        }
+        if (identifier.sigil == '@') {
+          // we have a user pill
+          final user = room.getState('m.room.member', identifier);
+          if (user != null) {
+            return user.content;
+          }
+          // there might still be a profile...
+          final profile = await room.client.getProfileFromUserId(identifier);
+          if (profile != null) {
+            return {
+              'displayname': profile.displayname,
+              'avatar_url': profile.avatarUrl.toString(),
+            };
+          }
+          return null;
+        }
+        if (identifier.sigil == '#') {
+          // we have an alias pill
+          for (final r in room.client.rooms) {
+            final state = r.getState('m.room.canonical_alias');
+            if (state != null &&
+                ((state.content['alias'] is String &&
+                        state.content['alias'] == identifier) ||
+                    (state.content['alt_aliases'] is List &&
+                        state.content['alt_aliases'].contains(identifier)))) {
+              // we have a room!
+              return {
+                'displayname': identifier,
+                'avatar_url': r.getState('m.room.avatar')?.content['url'],
+              };
+            }
+          }
+          return null;
+        }
+        if (identifier.sigil == '!') {
+          // we have a room ID pill
+          final r = room.client.getRoomById(identifier);
+          if (r == null) {
+            return null;
+          }
+          return {
+            'displayname': r.canonicalAlias,
+            'avatar_url': r.getState('m.room.avatar')?.content['url'],
+          };
+        }
+        return null;
+      },
+    );
+  }
+}

lib/widgets/event_content/image_bubble.dart

@@ -0,0 +1,273 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/pages/image_viewer.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../../utils/matrix_sdk_extensions.dart/event_extension.dart';
+
+class ImageBubble extends StatefulWidget {
+  final Event event;
+  final bool tapToView;
+  final BoxFit fit;
+  final bool maxSize;
+  final Color backgroundColor;
+  final double radius;
+  final bool thumbnailOnly;
+  final void Function() onLoaded;
+
+  const ImageBubble(
+    this.event, {
+    this.tapToView = true,
+    this.maxSize = true,
+    this.backgroundColor,
+    this.fit = BoxFit.cover,
+    this.radius = 10.0,
+    this.thumbnailOnly = true,
+    this.onLoaded,
+    Key key,
+  }) : super(key: key);
+
+  @override
+  _ImageBubbleState createState() => _ImageBubbleState();
+}
+
+class _ImageBubbleState extends State<ImageBubble> {
+  String thumbnailUrl;
+  String attachmentUrl;
+  MatrixFile _file;
+  MatrixFile _thumbnail;
+  bool _requestedThumbnailOnFailure = false;
+
+  bool get isSvg =>
+      widget.event.attachmentMimetype.split('+').first == 'image/svg';
+  bool get isThumbnailSvg =>
+      widget.event.thumbnailMimetype.split('+').first == 'image/svg';
+
+  MatrixFile get _displayFile => _file ?? _thumbnail;
+  String get displayUrl => widget.thumbnailOnly ? thumbnailUrl : attachmentUrl;
+
+  dynamic _error;
+
+  Future<void> _requestFile({bool getThumbnail = false}) async {
+    try {
+      final res = await widget.event
+          .downloadAndDecryptAttachmentCached(getThumbnail: getThumbnail);
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (getThumbnail) {
+          if (mounted) {
+            setState(() => _thumbnail = res);
+          }
+        } else {
+          if (widget.onLoaded != null) {
+            widget.onLoaded();
+          }
+          if (mounted) {
+            setState(() => _file = res);
+          }
+        }
+      });
+    } catch (err) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          setState(() => _error = err);
+        }
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    thumbnailUrl = widget.event
+        .getAttachmentUrl(getThumbnail: true, animated: true)
+        ?.toString();
+    attachmentUrl = widget.event.getAttachmentUrl(animated: true)?.toString();
+    if (thumbnailUrl == null) {
+      _requestFile(getThumbnail: true);
+    }
+    if (!widget.thumbnailOnly && attachmentUrl == null) {
+      _requestFile();
+    } else {
+      // if the full attachment is cached, we might as well fetch it anyways.
+      // no need to stick with thumbnail only, since we don't do any networking
+      widget.event.isAttachmentCached().then((cached) {
+        if (cached) {
+          _requestFile();
+        }
+      });
+    }
+    super.initState();
+  }
+
+  Widget getErrorWidget() {
+    return Center(
+      child: Text(
+        _error.toString(),
+      ),
+    );
+  }
+
+  Widget getPlaceholderWidget() {
+    Widget blurhash;
+    if (widget.event.infoMap['xyz.amorgan.blurhash'] is String) {
+      final ratio =
+          widget.event.infoMap['w'] is int && widget.event.infoMap['h'] is int
+              ? widget.event.infoMap['w'] / widget.event.infoMap['h']
+              : 1.0;
+      var width = 32;
+      var height = 32;
+      if (ratio > 1.0) {
+        height = (width / ratio).round();
+      } else {
+        width = (height * ratio).round();
+      }
+      blurhash = BlurHash(
+        hash: widget.event.infoMap['xyz.amorgan.blurhash'],
+        decodingWidth: width,
+        decodingHeight: height,
+        imageFit: widget.fit,
+      );
+    }
+    return Stack(
+      children: <Widget>[
+        if (blurhash != null) blurhash,
+        Center(
+          child: CircularProgressIndicator(),
+        ),
+      ],
+    );
+  }
+
+  Widget getMemoryWidget() {
+    final isOriginal = _file != null ||
+        widget.event.attachmentOrThumbnailMxcUrl(getThumbnail: true) ==
+            widget.event.attachmentMxcUrl;
+    final key = isOriginal
+        ? widget.event.attachmentMxcUrl
+        : widget.event.thumbnailMxcUrl;
+    if (isOriginal ? isSvg : isThumbnailSvg) {
+      return SvgPicture.memory(
+        _displayFile.bytes,
+        key: ValueKey(key),
+        fit: widget.fit,
+      );
+    } else {
+      return Image.memory(
+        _displayFile.bytes,
+        key: ValueKey(key),
+        fit: widget.fit,
+      );
+    }
+  }
+
+  Widget getNetworkWidget() {
+    if (displayUrl == attachmentUrl &&
+        (_requestedThumbnailOnFailure ? isSvg : isThumbnailSvg)) {
+      return SvgPicture.network(
+        displayUrl,
+        key: ValueKey(displayUrl),
+        placeholderBuilder: (context) => getPlaceholderWidget(),
+        fit: widget.fit,
+      );
+    } else {
+      return CachedNetworkImage(
+        // as we change the url on-error we need a key so that the widget actually updates
+        key: ValueKey(displayUrl),
+        imageUrl: displayUrl,
+        placeholder: (context, url) {
+          if (!widget.thumbnailOnly &&
+              displayUrl != thumbnailUrl &&
+              displayUrl == attachmentUrl) {
+            // we have to display the thumbnail while loading
+            return CachedNetworkImage(
+              key: ValueKey(thumbnailUrl),
+              imageUrl: thumbnailUrl,
+              placeholder: (c, u) => getPlaceholderWidget(),
+              fit: widget.fit,
+            );
+          }
+          return getPlaceholderWidget();
+        },
+        errorWidget: (context, url, error) {
+          // we can re-request the thumbnail
+          if (!_requestedThumbnailOnFailure) {
+            _requestedThumbnailOnFailure = true;
+            WidgetsBinding.instance.addPostFrameCallback((_) {
+              setState(() {
+                thumbnailUrl = widget.event
+                    .getAttachmentUrl(
+                        getThumbnail: true,
+                        useThumbnailMxcUrl: true,
+                        animated: true)
+                    ?.toString();
+                attachmentUrl = widget.event
+                    .getAttachmentUrl(useThumbnailMxcUrl: true, animated: true)
+                    ?.toString();
+              });
+            });
+          }
+          return getPlaceholderWidget();
+        },
+        fit: widget.fit,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content;
+    String key;
+    if (_error != null) {
+      content = getErrorWidget();
+      key = 'error';
+    } else if (_displayFile != null) {
+      content = getMemoryWidget();
+      key = 'memory-' + (content.key as ValueKey).value;
+    } else if (displayUrl != null) {
+      content = getNetworkWidget();
+      key = 'network-' + (content.key as ValueKey).value;
+    } else {
+      content = getPlaceholderWidget();
+      key = 'placeholder';
+    }
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(widget.radius),
+      child: InkWell(
+        onTap: () {
+          if (!widget.tapToView) return;
+          Navigator.of(context, rootNavigator: false).push(
+            MaterialPageRoute(
+              builder: (_) => ImageViewer(widget.event, onLoaded: () {
+                // If the original file didn't load yet, we want to do that now.
+                // This is so that the original file displays after going on the image viewer,
+                // waiting for it to load, and then hitting back. This ensures that we always
+                // display the best image available, with requiring as little network as possible
+                if (_file == null) {
+                  widget.event.isAttachmentCached().then((cached) {
+                    if (cached) {
+                      _requestFile();
+                    }
+                  });
+                }
+              }),
+            ),
+          );
+        },
+        child: Hero(
+          tag: widget.event.eventId,
+          child: AnimatedSwitcher(
+            duration: Duration(milliseconds: 1000),
+            child: Container(
+              key: ValueKey(key),
+              height: widget.maxSize ? 300 : null,
+              width: widget.maxSize ? 400 : null,
+              child: content,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/event_content/message.dart

@@ -0,0 +1,284 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/widgets/event_content/message_content.dart';
+import 'package:fluffychat/widgets/event_content/reply_content.dart';
+import 'package:fluffychat/config/themes.dart';
+import 'package:fluffychat/utils/date_time_extension.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
+import 'package:fluffychat/utils/string_color.dart';
+import 'package:flutter/material.dart';
+
+import '../../config/app_config.dart';
+import '../avatar.dart';
+import '../matrix.dart';
+import 'message_reactions.dart';
+import 'state_message.dart';
+
+class Message extends StatelessWidget {
+  final Event event;
+  final Event nextEvent;
+  final void Function(Event) onSelect;
+  final void Function(Event) onAvatarTab;
+  final void Function(String) scrollToEventId;
+  final void Function(String) unfold;
+  final bool longPressSelect;
+  final bool selected;
+  final Timeline timeline;
+
+  const Message(this.event,
+      {this.nextEvent,
+      this.longPressSelect,
+      this.onSelect,
+      this.onAvatarTab,
+      this.scrollToEventId,
+      @required this.unfold,
+      this.selected,
+      this.timeline});
+
+  /// Indicates wheither the user may use a mouse instead
+  /// of touchscreen.
+  static bool useMouse = false;
+
+  @override
+  Widget build(BuildContext context) {
+    if (![EventTypes.Message, EventTypes.Sticker, EventTypes.Encrypted]
+        .contains(event.type)) {
+      return StateMessage(event, unfold: unfold);
+    }
+
+    final client = Matrix.of(context).client;
+    final ownMessage = event.senderId == client.userID;
+    final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
+    var color = Theme.of(context).secondaryHeaderColor;
+    final sameSender = nextEvent != null &&
+            [EventTypes.Message, EventTypes.Sticker].contains(nextEvent.type)
+        ? nextEvent.sender.id == event.sender.id
+        : false;
+    var textColor = ownMessage
+        ? Colors.white
+        : Theme.of(context).brightness == Brightness.dark
+            ? Colors.white
+            : Colors.black;
+    final rowMainAxisAlignment =
+        ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
+
+    final displayEvent = event.getDisplayEvent(timeline);
+
+    if (event.showThumbnail) {
+      color = Theme.of(context).scaffoldBackgroundColor;
+      textColor = Theme.of(context).textTheme.bodyText2.color;
+    } else if (ownMessage) {
+      color = displayEvent.status == -1
+          ? Colors.redAccent
+          : Theme.of(context).primaryColor;
+    }
+
+    final rowChildren = <Widget>[
+      Expanded(
+        child: Container(
+          alignment: alignment,
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: Material(
+            color: color,
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            child: InkWell(
+              onHover: (b) => useMouse = true,
+              onTap: !useMouse && longPressSelect
+                  ? () => null
+                  : () => onSelect(event),
+              onLongPress: !longPressSelect ? null : () => onSelect(event),
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+              child: Container(
+                padding:
+                    const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
+                constraints:
+                    BoxConstraints(maxWidth: FluffyThemes.columnWidth * 1.5),
+                child: Stack(
+                  children: <Widget>[
+                    Column(
+                      mainAxisSize: MainAxisSize.min,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        if (event.relationshipType == RelationshipTypes.reply)
+                          FutureBuilder<Event>(
+                            future: event.getReplyEvent(timeline),
+                            builder: (BuildContext context, snapshot) {
+                              final replyEvent = snapshot.hasData
+                                  ? snapshot.data
+                                  : Event(
+                                      eventId: event.relationshipEventId,
+                                      content: {
+                                        'msgtype': 'm.text',
+                                        'body': '...'
+                                      },
+                                      senderId: event.senderId,
+                                      type: 'm.room.message',
+                                      room: event.room,
+                                      roomId: event.roomId,
+                                      status: 1,
+                                      originServerTs: DateTime.now(),
+                                    );
+                              return InkWell(
+                                onTap: () {
+                                  if (scrollToEventId != null) {
+                                    scrollToEventId(replyEvent.eventId);
+                                  }
+                                },
+                                child: AbsorbPointer(
+                                  child: Container(
+                                    margin: EdgeInsets.symmetric(vertical: 4.0),
+                                    child: ReplyContent(replyEvent,
+                                        lightText: ownMessage,
+                                        timeline: timeline),
+                                  ),
+                                ),
+                              );
+                            },
+                          ),
+                        MessageContent(
+                          displayEvent,
+                          textColor: textColor,
+                        ),
+                        SizedBox(height: 3),
+                        Opacity(
+                          opacity: 0,
+                          child: _MetaRow(
+                            event, // meta information should be from the unedited event
+                            ownMessage,
+                            textColor,
+                            timeline,
+                            displayEvent,
+                          ),
+                        ),
+                      ],
+                    ),
+                    Positioned(
+                      bottom: 0,
+                      right: ownMessage ? 0 : null,
+                      left: !ownMessage ? 0 : null,
+                      child: _MetaRow(
+                        event,
+                        ownMessage,
+                        textColor,
+                        timeline,
+                        displayEvent,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    ];
+    final avatarOrSizedBox = sameSender
+        ? SizedBox(width: Avatar.defaultSize)
+        : Avatar(
+            event.sender.avatarUrl,
+            event.sender.calcDisplayname(),
+            onTap: () => onAvatarTab(event),
+          );
+    if (ownMessage) {
+      rowChildren.add(avatarOrSizedBox);
+    } else {
+      rowChildren.insert(0, avatarOrSizedBox);
+    }
+    final row = Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      mainAxisAlignment: rowMainAxisAlignment,
+      children: rowChildren,
+    );
+    Widget container;
+    if (event.hasAggregatedEvents(timeline, RelationshipTypes.reaction)) {
+      container = Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment:
+            ownMessage ? CrossAxisAlignment.end : CrossAxisAlignment.start,
+        children: <Widget>[
+          row,
+          Padding(
+            padding: EdgeInsets.only(
+              top: 4.0,
+              left: (ownMessage ? 0 : Avatar.defaultSize) + 12.0,
+              right: (ownMessage ? Avatar.defaultSize : 0) + 12.0,
+            ),
+            child: MessageReactions(event, timeline),
+          ),
+        ],
+      );
+    } else {
+      container = row;
+    }
+
+    return Container(
+      color: selected
+          ? Theme.of(context).primaryColor.withAlpha(100)
+          : Theme.of(context).primaryColor.withAlpha(0),
+      child: Padding(
+        padding: EdgeInsets.only(left: 8.0, right: 8.0, bottom: 4.0, top: 4.0),
+        child: container,
+      ),
+    );
+  }
+}
+
+class _MetaRow extends StatelessWidget {
+  final Event event;
+  final bool ownMessage;
+  final Color color;
+  final Timeline timeline;
+  final Event displayEvent;
+
+  const _MetaRow(
+      this.event, this.ownMessage, this.color, this.timeline, this.displayEvent,
+      {Key key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final displayname = event.sender.calcDisplayname();
+    final showDisplayname =
+        !ownMessage && event.senderId != event.room.directChatMatrixID;
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        if (showDisplayname)
+          Text(
+            displayname,
+            style: TextStyle(
+              fontSize: 10 * AppConfig.fontSizeFactor,
+              fontWeight: FontWeight.bold,
+              color: (Theme.of(context).brightness == Brightness.light
+                      ? displayname.darkColor
+                      : displayname.lightColor)
+                  .withAlpha(200),
+            ),
+          ),
+        if (showDisplayname) SizedBox(width: 4),
+        Text(
+          event.originServerTs.localizedTime(context),
+          style: TextStyle(
+            color: color.withAlpha(180),
+            fontSize: 10 * AppConfig.fontSizeFactor,
+          ),
+        ),
+        if (event.hasAggregatedEvents(timeline, RelationshipTypes.edit))
+          Padding(
+            padding: const EdgeInsets.only(left: 2.0),
+            child: Icon(
+              Icons.edit_outlined,
+              size: 12 * AppConfig.fontSizeFactor,
+              color: color,
+            ),
+          ),
+        if (ownMessage) SizedBox(width: 2),
+        if (ownMessage)
+          Icon(
+            displayEvent.statusIcon,
+            size: 14 * AppConfig.fontSizeFactor,
+            color: color,
+          ),
+      ],
+    );
+  }
+}

lib/widgets/event_content/message_content.dart

@@ -0,0 +1,201 @@
+import 'package:adaptive_page_layout/adaptive_page_layout.dart';
+import 'package:famedlysdk/encryption/utils/key_verification.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/widgets/event_content/audio_player.dart';
+import 'package:future_loading_dialog/future_loading_dialog.dart';
+import 'package:fluffychat/widgets/event_content/image_bubble.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
+import 'package:fluffychat/pages/key_verification_dialog.dart';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:matrix_link_text/link_text.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+import '../../utils/url_launcher.dart';
+import '../../config/app_config.dart';
+import 'html_message.dart';
+import '../matrix.dart';
+import 'message_download_content.dart';
+
+class MessageContent extends StatelessWidget {
+  final Event event;
+  final Color textColor;
+
+  const MessageContent(this.event, {this.textColor});
+
+  void _verifyOrRequestKey(BuildContext context) async {
+    if (event.content['can_request_session'] != true) {
+      AdaptivePageLayout.of(context).showSnackBar(SnackBar(
+          content: Text(
+        event.type == EventTypes.Encrypted
+            ? L10n.of(context).needPantalaimonWarning
+            : event.getLocalizedBody(
+                MatrixLocals(L10n.of(context)),
+              ),
+      )));
+      return;
+    }
+    final client = Matrix.of(context).client;
+    if (client.isUnknownSession && client.encryption.crossSigning.enabled) {
+      final req =
+          await client.userDeviceKeys[client.userID].startVerification();
+      req.onUpdate = () async {
+        if (req.state == KeyVerificationState.done) {
+          for (var i = 0; i < 12; i++) {
+            if (await client.encryption.keyManager.isCached()) {
+              break;
+            }
+            await Future.delayed(Duration(seconds: 1));
+          }
+          final timeline = await event.room.getTimeline();
+          timeline.requestKeys();
+          timeline.cancelSubscriptions();
+        }
+      };
+      await KeyVerificationDialog(request: req).show(context);
+    } else {
+      final success = await showFutureLoadingDialog(
+        context: context,
+        future: () => event.requestKey(),
+      );
+      if (success.error == null) {
+        AdaptivePageLayout.of(context).showSnackBar(SnackBar(
+            content: Text(L10n.of(context).requestToReadOlderMessages)));
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final fontSize =
+        DefaultTextStyle.of(context).style.fontSize * AppConfig.fontSizeFactor;
+    switch (event.type) {
+      case EventTypes.Message:
+      case EventTypes.Encrypted:
+      case EventTypes.Sticker:
+        switch (event.messageType) {
+          case MessageTypes.Image:
+          case MessageTypes.Sticker:
+            if (event.showThumbnail) {
+              return ImageBubble(event);
+            }
+            return MessageDownloadContent(event, textColor);
+          case MessageTypes.Audio:
+            return AudioPlayerWidget(
+              event,
+              color: textColor,
+            );
+          case MessageTypes.Video:
+          case MessageTypes.File:
+            return MessageDownloadContent(event, textColor);
+          case MessageTypes.Text:
+          case MessageTypes.Notice:
+          case MessageTypes.Emote:
+            if (AppConfig.renderHtml &&
+                !event.redacted &&
+                event.isRichMessage) {
+              var html = event.formattedText;
+              if (event.messageType == MessageTypes.Emote) {
+                html = '* $html';
+              }
+              final bigEmotes = event.onlyEmotes &&
+                  event.numberEmotes > 0 &&
+                  event.numberEmotes <= 10;
+              return HtmlMessage(
+                html: html,
+                defaultTextStyle: TextStyle(
+                  color: textColor,
+                  fontSize: bigEmotes ? fontSize * 3 : fontSize,
+                ),
+                linkStyle: TextStyle(
+                  color: textColor.withAlpha(150),
+                  fontSize: bigEmotes ? fontSize * 3 : fontSize,
+                  decoration: TextDecoration.underline,
+                ),
+                room: event.room,
+                emoteSize: bigEmotes ? fontSize * 3 : fontSize * 1.5,
+              );
+            }
+            // else we fall through to the normal message rendering
+            continue textmessage;
+          case MessageTypes.BadEncrypted:
+          case EventTypes.Encrypted:
+            return ElevatedButton.icon(
+              style: ElevatedButton.styleFrom(
+                primary: Theme.of(context).scaffoldBackgroundColor,
+                onPrimary: Theme.of(context).textTheme.bodyText1.color,
+              ),
+              onPressed: () => _verifyOrRequestKey(context),
+              icon: Icon(Icons.lock_outline),
+              label: Text(L10n.of(context).encrypted),
+            );
+          case MessageTypes.Location:
+          case MessageTypes.None:
+          textmessage:
+          default:
+            if (event.content['msgtype'] == Matrix.callNamespace) {
+              return ElevatedButton.icon(
+                style: ElevatedButton.styleFrom(
+                  primary: Theme.of(context).scaffoldBackgroundColor,
+                  onPrimary: Theme.of(context).textTheme.bodyText1.color,
+                ),
+                onPressed: () => launch(event.body),
+                icon: Icon(Icons.phone_outlined, color: Colors.green),
+                label: Text(L10n.of(context).videoCall),
+              );
+            }
+            if (event.redacted) {
+              return Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(Icons.delete_forever_outlined, color: textColor),
+                  SizedBox(width: 4),
+                  Text(
+                    event.getLocalizedBody(MatrixLocals(L10n.of(context)),
+                        hideReply: true),
+                    style: TextStyle(
+                      color: textColor,
+                      fontSize: fontSize,
+                      fontWeight: FontWeight.bold,
+                      decoration: TextDecoration.lineThrough,
+                      decorationThickness: 0.5,
+                    ),
+                  ),
+                ],
+              );
+            }
+            final bigEmotes = event.onlyEmotes &&
+                event.numberEmotes > 0 &&
+                event.numberEmotes <= 10;
+            return LinkText(
+              text: event.getLocalizedBody(MatrixLocals(L10n.of(context)),
+                  hideReply: true),
+              textStyle: TextStyle(
+                color: textColor,
+                fontSize: bigEmotes ? fontSize * 3 : fontSize,
+                decoration: event.redacted ? TextDecoration.lineThrough : null,
+              ),
+              linkStyle: TextStyle(
+                color: textColor.withAlpha(150),
+                fontSize: bigEmotes ? fontSize * 3 : fontSize,
+                decoration: TextDecoration.underline,
+              ),
+              onLinkTap: (url) => UrlLauncher(context, url).launchUrl(),
+            );
+        }
+        break;
+      default:
+        return Text(
+          L10n.of(context)
+              .userSentUnknownEvent(event.sender.calcDisplayname(), event.type),
+          style: TextStyle(
+            color: textColor,
+            decoration: event.redacted ? TextDecoration.lineThrough : null,
+          ),
+        );
+    }
+    return Container(); // else flutter analyze complains
+  }
+}

lib/widgets/event_content/message_download_content.dart

@@ -0,0 +1,53 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/material.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
+
+class MessageDownloadContent extends StatelessWidget {
+  final Event event;
+  final Color textColor;
+
+  const MessageDownloadContent(this.event, this.textColor, {Key key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final String filename = event.content.containsKey('filename')
+        ? event.content['filename']
+        : event.body;
+    return Container(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          ElevatedButton(
+            style: ElevatedButton.styleFrom(
+              primary: Theme.of(context).scaffoldBackgroundColor,
+              onPrimary: Theme.of(context).textTheme.bodyText1.color,
+            ),
+            onPressed: () => event.openFile(context),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(Icons.download_outlined),
+                SizedBox(width: 8),
+                Text(
+                  filename,
+                  overflow: TextOverflow.fade,
+                  softWrap: false,
+                  maxLines: 1,
+                ),
+              ],
+            ),
+          ),
+          if (event.sizeString != null)
+            Text(
+              event.sizeString,
+              style: TextStyle(
+                color: textColor,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/event_content/message_reactions.dart

@@ -0,0 +1,146 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:characters/characters.dart';
+import 'package:future_loading_dialog/future_loading_dialog.dart';
+import '../matrix.dart';
+
+class MessageReactions extends StatelessWidget {
+  final Event event;
+  final Timeline timeline;
+
+  const MessageReactions(this.event, this.timeline);
+
+  @override
+  Widget build(BuildContext context) {
+    final allReactionEvents =
+        event.aggregatedEvents(timeline, RelationshipTypes.reaction);
+    final reactionMap = <String, _ReactionEntry>{};
+    for (final e in allReactionEvents) {
+      if (e.content['m.relates_to'].containsKey('key')) {
+        final key = e.content['m.relates_to']['key'];
+        if (!reactionMap.containsKey(key)) {
+          reactionMap[key] = _ReactionEntry(
+            key: key,
+            count: 0,
+            reacted: false,
+          );
+        }
+        reactionMap[key].count++;
+        reactionMap[key].reacted |= e.senderId == e.room.client.userID;
+      }
+    }
+    final reactionList = reactionMap.values.toList();
+    reactionList.sort((a, b) => b.count - a.count > 0 ? 1 : -1);
+    return Wrap(
+      spacing: 4.0,
+      runSpacing: 4.0,
+      children: reactionList
+          .map((r) => _Reaction(
+                reactionKey: r.key,
+                count: r.count,
+                reacted: r.reacted,
+                onTap: () {
+                  if (r.reacted) {
+                    final evt = allReactionEvents.firstWhere(
+                        (e) =>
+                            e.senderId == e.room.client.userID &&
+                            e.content['m.relates_to']['key'] == r.key,
+                        orElse: () => null);
+                    if (evt != null) {
+                      showFutureLoadingDialog(
+                        context: context,
+                        future: () => evt.redactEvent(),
+                      );
+                    }
+                  } else {
+                    showFutureLoadingDialog(
+                        context: context,
+                        future: () =>
+                            event.room.sendReaction(event.eventId, r.key));
+                  }
+                },
+              ))
+          .toList(),
+    );
+  }
+}
+
+class _Reaction extends StatelessWidget {
+  final String reactionKey;
+  final int count;
+  final bool reacted;
+  final void Function() onTap;
+
+  const _Reaction({this.reactionKey, this.count, this.reacted, this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final borderColor = reacted
+        ? Theme.of(context).primaryColor
+        : Theme.of(context).secondaryHeaderColor;
+    final textColor = Theme.of(context).brightness == Brightness.dark
+        ? Colors.white
+        : Colors.black;
+    final color = Theme.of(context).secondaryHeaderColor;
+    final fontSize = DefaultTextStyle.of(context).style.fontSize;
+    final padding = fontSize / 5;
+    Widget content;
+    if (reactionKey.startsWith('mxc://')) {
+      final src = Uri.parse(reactionKey)?.getThumbnail(
+        Matrix.of(context).client,
+        width: 9999,
+        height: fontSize * MediaQuery.of(context).devicePixelRatio,
+        method: ThumbnailMethod.scale,
+      );
+      content = Row(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          CachedNetworkImage(
+            imageUrl: src.toString(),
+            height: fontSize,
+          ),
+          Container(width: 4),
+          Text(count.toString(),
+              style: TextStyle(
+                color: textColor,
+                fontSize: DefaultTextStyle.of(context).style.fontSize,
+              )),
+        ],
+      );
+    } else {
+      var renderKey = Characters(reactionKey);
+      if (renderKey.length > 10) {
+        renderKey = renderKey.getRange(0, 9) + Characters('…');
+      }
+      content = Text('$renderKey $count',
+          style: TextStyle(
+            color: textColor,
+            fontSize: DefaultTextStyle.of(context).style.fontSize,
+          ));
+    }
+    return InkWell(
+      onTap: () => onTap != null ? onTap() : null,
+      child: Container(
+        decoration: BoxDecoration(
+          color: color,
+          border: Border.all(
+            width: 1,
+            color: borderColor,
+          ),
+          borderRadius: BorderRadius.circular(8),
+        ),
+        padding: EdgeInsets.all(padding),
+        child: content,
+      ),
+    );
+  }
+}
+
+class _ReactionEntry {
+  String key;
+  int count;
+  bool reacted;
+
+  _ReactionEntry({this.key, this.count, this.reacted});
+}

lib/widgets/event_content/reply_content.dart

@@ -0,0 +1,99 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+import 'html_message.dart';
+import '../../config/app_config.dart';
+
+class ReplyContent extends StatelessWidget {
+  final Event replyEvent;
+  final bool lightText;
+  final Timeline timeline;
+
+  const ReplyContent(this.replyEvent,
+      {this.lightText = false, Key key, this.timeline})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Widget replyBody;
+    final displayEvent = replyEvent != null && timeline != null
+        ? replyEvent.getDisplayEvent(timeline)
+        : replyEvent;
+    if (displayEvent != null &&
+        AppConfig.renderHtml &&
+        [EventTypes.Message, EventTypes.Encrypted]
+            .contains(displayEvent.type) &&
+        [MessageTypes.Text, MessageTypes.Notice, MessageTypes.Emote]
+            .contains(displayEvent.messageType) &&
+        !displayEvent.redacted &&
+        displayEvent.content['format'] == 'org.matrix.custom.html' &&
+        displayEvent.content['formatted_body'] is String) {
+      String html = displayEvent.content['formatted_body'];
+      if (displayEvent.messageType == MessageTypes.Emote) {
+        html = '* $html';
+      }
+      final fontSize = DefaultTextStyle.of(context).style.fontSize;
+      replyBody = HtmlMessage(
+        html: html,
+        defaultTextStyle: TextStyle(
+          color: lightText
+              ? Colors.white
+              : Theme.of(context).textTheme.bodyText2.color,
+          fontSize: fontSize,
+        ),
+        maxLines: 1,
+        room: displayEvent.room,
+        emoteSize: fontSize * 1.5,
+      );
+    } else {
+      replyBody = Text(
+        displayEvent?.getLocalizedBody(
+              MatrixLocals(L10n.of(context)),
+              withSenderNamePrefix: false,
+              hideReply: true,
+            ) ??
+            '',
+        overflow: TextOverflow.ellipsis,
+        maxLines: 1,
+        style: TextStyle(
+          color: lightText
+              ? Colors.white
+              : Theme.of(context).textTheme.bodyText2.color,
+          fontSize: DefaultTextStyle.of(context).style.fontSize,
+        ),
+      );
+    }
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        Container(
+          width: 3,
+          height: 36,
+          color: lightText ? Colors.white : Theme.of(context).primaryColor,
+        ),
+        SizedBox(width: 6),
+        Flexible(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Text(
+                (displayEvent?.sender?.calcDisplayname() ?? '') + ':',
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  color:
+                      lightText ? Colors.white : Theme.of(context).primaryColor,
+                ),
+              ),
+              replyBody,
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/event_content/state_message.dart

@@ -0,0 +1,67 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+import '../../config/app_config.dart';
+
+class StateMessage extends StatelessWidget {
+  final Event event;
+  final void Function(String) unfold;
+  const StateMessage(this.event, {@required this.unfold});
+
+  @override
+  Widget build(BuildContext context) {
+    if (event.unsigned['im.fluffychat.collapsed_state_event'] == true) {
+      return Container();
+    }
+    final int counter =
+        event.unsigned['im.fluffychat.collapsed_state_event_count'] ?? 0;
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: 8.0,
+        vertical: 4.0,
+      ),
+      child: Center(
+        child: InkWell(
+          onTap: counter != 0 ? () => unfold(event.eventId) : null,
+          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+          child: Container(
+            padding: const EdgeInsets.all(8),
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: Theme.of(context).dividerColor,
+              ),
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  event.getLocalizedBody(MatrixLocals(L10n.of(context))),
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: Theme.of(context).textTheme.bodyText1.fontSize *
+                        AppConfig.fontSizeFactor,
+                    color: Theme.of(context).textTheme.bodyText2.color,
+                    decoration:
+                        event.redacted ? TextDecoration.lineThrough : null,
+                  ),
+                ),
+                if (counter != 0)
+                  Text(
+                    counter == 1
+                        ? L10n.of(context).oneMoreEvent
+                        : L10n.of(context).xMoreEvents(counter.toString()),
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}