Skip to content

Commit

Permalink
Chore: Refactor text preview for MediaView (#1714)
Browse files Browse the repository at this point in the history
chore: moved media view text into its own widget, moved media view to /share/media directory
  • Loading branch information
hjiangsu authored Feb 27, 2025
1 parent 3046638 commit 87a2ac3
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 57 deletions.
2 changes: 1 addition & 1 deletion lib/community/widgets/post_card_view_comfortable.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion lib/community/widgets/post_card_view_compact.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion lib/post/widgets/post_view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
61 changes: 7 additions & 54 deletions lib/shared/media_view.dart → lib/shared/media/media_view.dart
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -102,54 +98,6 @@ class _MediaViewState extends State<MediaView> 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) {
Expand Down Expand Up @@ -426,7 +374,12 @@ class _MediaViewState extends State<MediaView> 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();
}
Expand Down
66 changes: 66 additions & 0 deletions lib/shared/media/media_view_text.dart
Original file line number Diff line number Diff line change
@@ -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),
),
);
}
}

0 comments on commit 87a2ac3

Please sign in to comment.