diff --git a/lib/community/widgets/post_card_view_comfortable.dart b/lib/community/widgets/post_card_view_comfortable.dart index e02139993..ac9a8b601 100644 --- a/lib/community/widgets/post_card_view_comfortable.dart +++ b/lib/community/widgets/post_card_view_comfortable.dart @@ -19,7 +19,7 @@ import 'package:thunder/core/enums/view_mode.dart'; import 'package:thunder/core/models/post_view_media.dart'; import 'package:thunder/core/theme/bloc/theme_bloc.dart'; import 'package:thunder/feed/feed.dart'; -import 'package:thunder/shared/media_view.dart'; +import 'package:thunder/shared/media/media_view.dart'; import 'package:thunder/shared/text/scalable_text.dart'; import 'package:thunder/thunder/bloc/thunder_bloc.dart'; import 'package:thunder/user/enums/user_action.dart'; diff --git a/lib/community/widgets/post_card_view_compact.dart b/lib/community/widgets/post_card_view_compact.dart index d8dff0c52..bc136ee39 100644 --- a/lib/community/widgets/post_card_view_compact.dart +++ b/lib/community/widgets/post_card_view_compact.dart @@ -15,7 +15,7 @@ import 'package:thunder/core/enums/view_mode.dart'; import 'package:thunder/core/models/post_view_media.dart'; import 'package:thunder/core/theme/bloc/theme_bloc.dart'; import 'package:thunder/feed/view/feed_page.dart'; -import 'package:thunder/shared/media_view.dart'; +import 'package:thunder/shared/media/media_view.dart'; import 'package:thunder/thunder/bloc/thunder_bloc.dart'; class PostCardViewCompact extends StatelessWidget { diff --git a/lib/post/widgets/post_view.dart b/lib/post/widgets/post_view.dart index 60176463a..102db41c6 100644 --- a/lib/post/widgets/post_view.dart +++ b/lib/post/widgets/post_view.dart @@ -40,7 +40,7 @@ import 'package:thunder/shared/common_markdown_body.dart'; import 'package:thunder/shared/conditional_parent_widget.dart'; import 'package:thunder/shared/cross_posts.dart'; import 'package:thunder/shared/divider.dart'; -import 'package:thunder/shared/media_view.dart'; +import 'package:thunder/shared/media/media_view.dart'; import 'package:thunder/shared/reply_to_preview_actions.dart'; import 'package:thunder/shared/text/scalable_text.dart'; import 'package:thunder/thunder/bloc/thunder_bloc.dart'; diff --git a/lib/shared/media_view.dart b/lib/shared/media/media_view.dart similarity index 88% rename from lib/shared/media_view.dart rename to lib/shared/media/media_view.dart index 486ea3df7..9fbad3a02 100644 --- a/lib/shared/media_view.dart +++ b/lib/shared/media/media_view.dart @@ -1,17 +1,13 @@ import 'dart:ui'; -import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:extended_image/extended_image.dart'; -import 'package:flex_color_scheme/flex_color_scheme.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; -import 'package:html/parser.dart'; -import 'package:markdown/markdown.dart' hide Text; -import 'package:thunder/notification/utils/notification_utils.dart'; import 'package:thunder/shared/link_information.dart'; +import 'package:thunder/shared/media/media_view_text.dart'; import 'package:thunder/utils/colors.dart'; import 'package:thunder/feed/bloc/feed_bloc.dart'; import 'package:thunder/shared/image_viewer.dart'; @@ -102,54 +98,6 @@ class _MediaViewState extends State with TickerProviderStateMixin { super.dispose(); } - /// Creates a text preview for posts in compact mode - Widget buildMediaText() { - final theme = Theme.of(context); - - if (widget.viewMode == ViewMode.comfortable) return Container(); - - String? plainTextComment; - if (widget.postViewMedia.postView.post.body?.isNotEmpty == true) { - final String htmlComment = cleanImagesFromHtml(markdownToHtml(widget.postViewMedia.postView.post.body!)); - plainTextComment = parse(parse(htmlComment).body?.text).documentElement?.text ?? widget.postViewMedia.postView.post.body!; - } - - return Container( - clipBehavior: Clip.hardEdge, - decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)), - child: Container( - color: theme.cardColor.darken(5), - child: widget.postViewMedia.postView.post.body?.isNotEmpty == true - ? SizedBox( - height: ViewMode.compact.height, - width: ViewMode.compact.height, - child: Padding( - padding: const EdgeInsets.all(10.0), - child: Align( - alignment: Alignment.center, - child: Text( - plainTextComment!, - style: TextStyle( - fontSize: min(20, max(4.5, (20 * (1 / log(widget.postViewMedia.postView.post.body!.length))))), - color: widget.read == true ? theme.colorScheme.onSurface.withValues(alpha: 0.55) : theme.colorScheme.onSurface.withValues(alpha: 0.7), - ), - ), - ), - ), - ) - : Container( - height: ViewMode.compact.height, - width: ViewMode.compact.height, - color: theme.cardColor.darken(5), - child: Icon( - Icons.text_fields_rounded, - color: theme.colorScheme.onSecondaryContainer.withValues(alpha: widget.read == true ? 0.55 : 1.0), - ), - ), - ), - ); - } - /// Overlays the image as an ImageViewer void showImage() { if (widget.isUserLoggedIn && widget.markPostReadOnMediaView) { @@ -426,7 +374,12 @@ class _MediaViewState extends State with TickerProviderStateMixin { read: widget.read, ); case MediaType.text: - return buildMediaText(); + if (widget.viewMode == ViewMode.comfortable) return Container(); + + return MediaViewText( + text: widget.postViewMedia.postView.post.body, + read: widget.read, + ); default: return Container(); } diff --git a/lib/shared/media/media_view_text.dart b/lib/shared/media/media_view_text.dart new file mode 100644 index 000000000..81e60bd64 --- /dev/null +++ b/lib/shared/media/media_view_text.dart @@ -0,0 +1,66 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +import 'package:flex_color_scheme/flex_color_scheme.dart'; +import 'package:html/parser.dart'; +import 'package:markdown/markdown.dart' hide Text; + +import 'package:thunder/core/enums/view_mode.dart'; +import 'package:thunder/notification/utils/notification_utils.dart'; + +/// Creates a [MediaViewText] widget which displays a preview of the text content of a post. +/// +/// This widget should only be used when ViewMode is [ViewMode.compact] +class MediaViewText extends StatelessWidget { + /// The text content of the post. + final String? text; + + /// Whether the post has been read. This will affect the opacity of the text. + final bool? read; + + const MediaViewText({ + super.key, + this.text, + this.read, + }); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final readColor = theme.colorScheme.onSecondaryContainer.withValues(alpha: 0.55); + final unreadColor = theme.colorScheme.onSecondaryContainer.withValues(alpha: 0.7); + + String? plainText; + + if (text?.isNotEmpty == true) { + final htmlText = cleanImagesFromHtml(markdownToHtml(text!)); + plainText = parse(parse(htmlText).body?.text).documentElement?.text ?? text; + } + + return Container( + clipBehavior: Clip.hardEdge, + decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)), + child: Container( + height: ViewMode.compact.height, + width: ViewMode.compact.height, + color: theme.cardColor.darken(5), + child: plainText != null + ? Padding( + padding: const EdgeInsets.all(10.0), + child: Align( + alignment: Alignment.center, + child: Text( + plainText, + style: TextStyle( + fontSize: min(20, max(4.5, (20 * (1 / log(plainText.length))))), + color: read == true ? readColor : unreadColor, + ), + ), + ), + ) + : Icon(Icons.text_fields_rounded, color: read == true ? readColor : unreadColor), + ), + ); + } +}