apoloz/eatvio_app
1
0
Fork 0
forked from eatvio/eatvio_app
Code Pull Requests Activity

feat(personalized_feed): added video and multiple images handling to detailed blog post screen

Browse Source
This commit is contained in:
misha
2026-07-22 14:41:26 +03:00
parent dcf7b25989
commit 2cccc9e253
17 changed files with 595 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
lib/features/blog_post/presentation/pages/blog_post_screen.dart
View File

@@ -1,4 +1,4 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:dismissible_page/dismissible_page.dart';
import 'package:eatvio_app/core/app_config.dart';
import 'package:eatvio_app/core/enums/complained_content.dart';
import 'package:eatvio_app/core/utils/date_time_utils.dart';
@@ -9,7 +9,10 @@ import 'package:eatvio_app/features/blog_post/presentation/cubit/blog_post_cubit
import 'package:eatvio_app/features/blog_post/presentation/cubit/blog_post_state.dart';
import 'package:eatvio_app/core/comments/comments_cubit/comments_cubit.dart';
import 'package:eatvio_app/core/comments/comments_cubit/comments_state.dart';
import 'package:eatvio_app/features/chat/presentation/pages/photo_view_screen.dart';
import 'package:eatvio_app/features/feed/models/post_feed_mapper.dart';
import 'package:eatvio_app/features/feed/presentation/bloc/feed_cubit/feed_cubit.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/blog_post_media_content.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/comments_widget.dart';
import 'package:eatvio_app/core/locator_service.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
@@ -33,6 +36,7 @@ class _BlogPostScreenState extends State<BlogPostScreen> {
final CommentsCubit commentsCubit = sl<CommentsCubit>();
final textEditingController = TextEditingController();
int? replyId;
int currentGalleryIndex = 0;
@override
void initState() {
@@ -40,6 +44,10 @@ class _BlogPostScreenState extends State<BlogPostScreen> {
super.initState();
}
void _openGallery(List<String> imageUrls, int index) {
context.pushTransparentRoute(rootNavigator: true, PhotoViewScreen(imageUrls: imageUrls, index: index));
}
@override
Widget build(BuildContext context) {
return BlocProvider(
@@ -242,8 +250,33 @@ class _BlogPostScreenState extends State<BlogPostScreen> {
child: MarkdownHtmlWidget(markdownText: blogPostState.blogPostModel!.description),
),
const SizedBox(height: 8),
if (blogPostState.blogPostModel?.image.isNotEmpty ?? false)
CachedNetworkImage(imageUrl: '${sl<AppConfig>().baseUrl}/storage/${blogPostState.blogPostModel?.image ?? ''}'),
Builder(
builder: (context) {
final post = blogPostState.blogPostModel;
if (post == null) {
return const SizedBox.shrink();
}
final imageUrl = PostFeedMapper.resolveMediaUrl(post.image);
final galleryUrls = post.images
.map((e) => PostFeedMapper.resolveMediaUrl(e.url))
.where((e) => e.isNotEmpty)
.toList();
final embedUrl = post.videoEmbedUrl?.trim();
return BlogPostMediaContent(
galleryUrls: galleryUrls,
imageUrl: imageUrl,
videoEmbedUrl: embedUrl != null && embedUrl.isNotEmpty ? embedUrl : null,
videoUrlThumb: post.videoUrlThumb != null ? PostFeedMapper.resolveMediaUrl(post.videoUrlThumb) : null,
currentGalleryIndex: currentGalleryIndex,
onOpenGallery: _openGallery,
onGalleryChanged: (index) {
setState(() {
currentGalleryIndex = index;
});
},
);
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(

2
lib/features/feed/models/feed_blog_post_model.dart
View File

@@ -22,7 +22,7 @@ abstract class FeedBlogPostModel with _$FeedBlogPostModel {
@JsonKey(name: "total_comments") required int totalComments,
@JsonKey(name: "was_liked_by_me") required bool wasLikedByMe,
@Default([]) List<FeedGalleryImage> images,
@JsonKey(name: "video_embed_url") String? videoEmbedUrl,
@JsonKey(name: "video_url_embed") String? videoEmbedUrl,
@JsonKey(name: "video_url_thumb") String? videoUrlThumb,
}) = _FeedBlogPostModel;

4
lib/features/feed/models/post_feed_pagination_model.dart
View File

@@ -50,7 +50,9 @@ abstract class PostFeedItemModel with _$PostFeedItemModel {
abstract class FeedGalleryImage with _$FeedGalleryImage {
const factory FeedGalleryImage({
required String url,
required String orientation,
@Default('horizontal') String orientation,
int? id,
int? position,
}) = _FeedGalleryImage;
factory FeedGalleryImage.fromJson(Map<String, Object?> json) => _$FeedGalleryImageFromJson(json);

215
lib/features/feed/presentation/widgets/blog_post_media_content.dart Normal file
View File

@@ -0,0 +1,215 @@
import 'dart:async';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/feed_video_player/feed_video_player_widget.dart';
import 'package:flutter/material.dart';
/// Gallery + optional embed video for feed card and blog post detail.
class BlogPostMediaContent extends StatefulWidget {
const BlogPostMediaContent({
super.key,
required this.galleryUrls,
required this.imageUrl,
required this.videoEmbedUrl,
required this.currentGalleryIndex,
required this.onOpenGallery,
required this.onGalleryChanged,
required this.videoUrlThumb,
});
final List<String> galleryUrls;
final String imageUrl;
final String? videoEmbedUrl;
final String? videoUrlThumb;
final int currentGalleryIndex;
final void Function(List<String> urls, int index) onOpenGallery;
final ValueChanged<int> onGalleryChanged;
@override
State<BlogPostMediaContent> createState() => _BlogPostMediaContentState();
}
class _BlogPostMediaContentState extends State<BlogPostMediaContent> {
static const _counterDisplayDuration = Duration(seconds: 1);
static const _carouselHeight = 260.0;
bool _isCounterVisible = false;
Timer? _counterHideTimer;
bool get _hasVideo => widget.videoEmbedUrl != null && widget.videoEmbedUrl!.trim().isNotEmpty;
int get _slideCount {
if (widget.galleryUrls.isNotEmpty) {
return widget.galleryUrls.length + (_hasVideo ? 1 : 0);
}
if (_hasVideo) {
return 1;
}
return 0;
}
bool get _isCurrentSlideVideo => _hasVideo && widget.currentGalleryIndex == widget.galleryUrls.length;
bool get _shouldShowCounter => !_isCurrentSlideVideo || _isCounterVisible;
@override
void dispose() {
_counterHideTimer?.cancel();
super.dispose();
}
@override
void didUpdateWidget(covariant BlogPostMediaContent oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.currentGalleryIndex != widget.currentGalleryIndex) {
_scheduleCounterHideOnVideo();
}
}
void _scheduleCounterHideOnVideo() {
_counterHideTimer?.cancel();
if (!_isCurrentSlideVideo) return;
_counterHideTimer = Timer(_counterDisplayDuration, () {
if (mounted && _isCurrentSlideVideo) {
setState(() => _isCounterVisible = false);
}
});
}
bool _handleCarouselScroll(ScrollNotification notification) {
if (notification is ScrollStartNotification || notification is ScrollUpdateNotification) {
_counterHideTimer?.cancel();
if (!_isCounterVisible) {
setState(() => _isCounterVisible = true);
}
} else if (notification is ScrollEndNotification && _isCounterVisible && _isCurrentSlideVideo) {
_scheduleCounterHideOnVideo();
}
return false;
}
Widget _imageSlide(String itemUrl, int itemIndex) {
return GestureDetector(
onTap: () => widget.onOpenGallery(widget.galleryUrls, itemIndex),
child: CachedNetworkImage(
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
height: _carouselHeight,
imageUrl: itemUrl,
errorWidget: (context, str, object) => const SizedBox.shrink(),
),
);
}
Widget _videoSlide() {
return FeedVideoPlayer(embedUrl: widget.videoEmbedUrl!, videoUrlThumb: widget.videoUrlThumb);
}
Widget _carousel({required int itemCount, required NullableIndexedWidgetBuilder itemBuilder}) {
return Stack(
children: [
NotificationListener<ScrollNotification>(
onNotification: _handleCarouselScroll,
child: CarouselSlider.builder(
itemCount: itemCount,
itemBuilder: (context, itemIndex, _) => itemBuilder(context, itemIndex) ?? const SizedBox.shrink(),
options: CarouselOptions(
viewportFraction: 1,
height: _carouselHeight,
enableInfiniteScroll: false,
onPageChanged: (index, _) => widget.onGalleryChanged(index),
),
),
),
if (itemCount > 1)
Positioned(
top: 12,
right: 12,
child: IgnorePointer(
child: AnimatedOpacity(
opacity: _shouldShowCounter ? 1 : 0,
duration: const Duration(milliseconds: 150),
child: _GalleryPhotoCounter(currentIndex: widget.currentGalleryIndex, total: itemCount),
),
),
),
],
);
}
@override
Widget build(BuildContext context) {
if (widget.galleryUrls.length > 1 || (widget.galleryUrls.length == 1 && _hasVideo)) {
final itemCount = _slideCount;
return _carousel(
itemCount: itemCount,
itemBuilder: (context, itemIndex) {
if (itemIndex < widget.galleryUrls.length) {
return _imageSlide(widget.galleryUrls[itemIndex], itemIndex);
}
if (_hasVideo) {
return _videoSlide();
}
return const SizedBox.shrink();
},
);
}
if (widget.galleryUrls.length == 1) {
return _imageSlide(widget.galleryUrls.first, 0);
}
if (_hasVideo) {
return SizedBox(
height: _carouselHeight,
width: MediaQuery.of(context).size.width,
child: _videoSlide(),
);
}
if (widget.imageUrl.isNotEmpty) {
return GestureDetector(
onTap: () => widget.onOpenGallery([widget.imageUrl], 0),
child: Hero(
tag: widget.imageUrl,
child: CachedNetworkImage(
fit: BoxFit.fitWidth,
width: MediaQuery.of(context).size.width,
imageUrl: widget.imageUrl,
errorWidget: (context, str, object) => const SizedBox.shrink(),
),
),
);
}
return const SizedBox.shrink();
}
}
class _GalleryPhotoCounter extends StatelessWidget {
const _GalleryPhotoCounter({required this.currentIndex, required this.total});
final int currentIndex;
final int total;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.5), borderRadius: BorderRadius.circular(999)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.photo_library_outlined, size: 14, color: Colors.white),
const SizedBox(width: 8),
Text(
'${currentIndex + 1} / $total',
style: const TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, height: 1.2),
),
],
),
);
}
}

188
lib/features/feed/presentation/widgets/blog_post_widget.dart
View File

@@ -1,7 +1,3 @@
import 'dart:async';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider_plus/carousel_slider_plus.dart';
import 'package:dismissible_page/dismissible_page.dart';
import 'package:eatvio_app/core/app_config.dart';
import 'package:eatvio_app/core/enums/complained_content.dart';
@@ -15,7 +11,7 @@ import 'package:eatvio_app/features/chat/presentation/pages/photo_view_screen.da
import 'package:eatvio_app/features/feed/models/feed_blog_post_model.dart';
import 'package:eatvio_app/features/feed/models/post_feed_mapper.dart';
import 'package:eatvio_app/features/feed/presentation/bloc/feed_cubit/feed_cubit.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/feed_video_player/feed_video_player_widget.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/blog_post_media_content.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/subscribe_button_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
@@ -98,7 +94,7 @@ class _BlogPostWidgetState extends State<BlogPostWidget> {
const SizedBox(height: 12),
_BlogPostHeader(post: post),
_BlogPostTextContent(post: post),
_BlogPostMediaContent(
BlogPostMediaContent(
galleryUrls: galleryUrls,
imageUrl: imageUrl,
videoEmbedUrl: embedUrl != null && embedUrl.isNotEmpty ? embedUrl : null,
@@ -220,186 +216,6 @@ class _BlogPostTextContent extends StatelessWidget {
}
}
class _BlogPostMediaContent extends StatefulWidget {
const _BlogPostMediaContent({
required this.galleryUrls,
required this.imageUrl,
required this.videoEmbedUrl,
required this.currentGalleryIndex,
required this.onOpenGallery,
required this.onGalleryChanged,
required this.videoUrlThumb,
});
final List<String> galleryUrls;
final String imageUrl;
final String? videoEmbedUrl;
final String? videoUrlThumb;
final int currentGalleryIndex;
final void Function(List<String> urls, int index) onOpenGallery;
final ValueChanged<int> onGalleryChanged;
@override
State<_BlogPostMediaContent> createState() => _BlogPostMediaContentState();
}
class _BlogPostMediaContentState extends State<_BlogPostMediaContent> {
static const _counterDisplayDuration = Duration(seconds: 1);
bool _isCounterVisible = false;
Timer? _counterHideTimer;
bool get _isCurrentSlideVideo =>
widget.videoEmbedUrl != null && widget.currentGalleryIndex == widget.galleryUrls.length;
bool get _shouldShowCounter => !_isCurrentSlideVideo || _isCounterVisible;
@override
void dispose() {
_counterHideTimer?.cancel();
super.dispose();
}
@override
void didUpdateWidget(covariant _BlogPostMediaContent oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.currentGalleryIndex != widget.currentGalleryIndex) {
_scheduleCounterHideOnVideo();
}
}
void _scheduleCounterHideOnVideo() {
_counterHideTimer?.cancel();
if (!_isCurrentSlideVideo) return;
_counterHideTimer = Timer(_counterDisplayDuration, () {
if (mounted && _isCurrentSlideVideo) {
setState(() => _isCounterVisible = false);
}
});
}
bool _handleCarouselScroll(ScrollNotification notification) {
if (notification is ScrollStartNotification || notification is ScrollUpdateNotification) {
_counterHideTimer?.cancel();
if (!_isCounterVisible) {
setState(() => _isCounterVisible = true);
}
} else if (notification is ScrollEndNotification && _isCounterVisible && _isCurrentSlideVideo) {
_scheduleCounterHideOnVideo();
}
return false;
}
@override
Widget build(BuildContext context) {
final hasVideo = widget.videoEmbedUrl != null;
final mediaContentCount = hasVideo ? widget.galleryUrls.length + 1 : widget.galleryUrls.length;
final showCarousel = mediaContentCount > 1;
return Column(
children: [
if (showCarousel) ...[
Stack(
children: [
NotificationListener<ScrollNotification>(
onNotification: _handleCarouselScroll,
child: CarouselSlider.builder(
itemCount: mediaContentCount,
itemBuilder: (context, itemIndex, _) {
if (itemIndex == widget.galleryUrls.length) {
if (widget.videoEmbedUrl != null) {
return FeedVideoPlayer(embedUrl: widget.videoEmbedUrl!, videoUrlThumb: widget.videoUrlThumb);
}
return const SizedBox.shrink();
}
final itemUrl = widget.galleryUrls[itemIndex];
return GestureDetector(
onTap: () => widget.onOpenGallery(widget.galleryUrls, itemIndex),
child: CachedNetworkImage(
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
imageUrl: itemUrl,
errorWidget: (context, str, object) => const SizedBox.shrink(),
),
);
},
options: CarouselOptions(
viewportFraction: 1,
height: 260,
enableInfiniteScroll: false,
onPageChanged: (index, _) => widget.onGalleryChanged(index),
),
),
),
Positioned(
top: 12,
right: 12,
child: IgnorePointer(
child: AnimatedOpacity(
opacity: _shouldShowCounter ? 1 : 0,
duration: const Duration(milliseconds: 150),
child: _GalleryPhotoCounter(currentIndex: widget.currentGalleryIndex, total: mediaContentCount),
),
),
),
],
),
] else if (widget.galleryUrls.length == 1) ...[
GestureDetector(
onTap: () => widget.onOpenGallery(widget.galleryUrls, 0),
child: CachedNetworkImage(
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
height: 260,
imageUrl: widget.galleryUrls.first,
errorWidget: (context, str, object) => const SizedBox.shrink(),
),
),
] else if (widget.imageUrl.isNotEmpty) ...[
GestureDetector(
onTap: () => widget.onOpenGallery([widget.imageUrl], 0),
child: Hero(
tag: widget.imageUrl,
child: CachedNetworkImage(
fit: BoxFit.fitWidth,
width: MediaQuery.of(context).size.width,
imageUrl: widget.imageUrl,
errorWidget: (context, str, object) => const SizedBox.shrink(),
),
),
),
],
],
);
}
}
class _GalleryPhotoCounter extends StatelessWidget {
const _GalleryPhotoCounter({required this.currentIndex, required this.total});
final int currentIndex;
final int total;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.5), borderRadius: BorderRadius.circular(999)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.photo_library_outlined, size: 14, color: Colors.white),
const SizedBox(width: 8),
Text(
'${currentIndex + 1} / $total',
style: const TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, height: 1.2),
),
],
),
);
}
}
class _BlogPostActionsRow extends StatelessWidget {
const _BlogPostActionsRow({required this.post, required this.isLiked, required this.totalLikes, required this.onToggleLike});

2
lib/features/feed/services/feed_service.dart
View File

@@ -25,7 +25,7 @@ abstract class FeedService {
@Query('cursor') String? cursor,
});
@GET('/api/blogPosts/show/{postId}')
@GET('/api/v2/blogPosts/show/{postId}')
Future<FeedBlogPostModel> getBlogPost({@Path('postId') required int postId});
@GET('/api/recipes/index')