misha/eatvio_app
2
1
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

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});