fix(chat): Correction race condition + Implémentation TODOs
## Corrections Critiques ### Race Condition - Statuts de Messages - Fix : Les icônes de statut (✓, ✓✓, ✓✓ bleu) ne s'affichaient pas - Cause : WebSocket delivery confirmations arrivaient avant messages locaux - Solution : Pattern Optimistic UI dans chat_bloc.dart - Création message temporaire immédiate - Ajout à la liste AVANT requête HTTP - Remplacement par message serveur à la réponse - Fichier : lib/presentation/state_management/chat_bloc.dart ## Implémentation TODOs (13/21) ### Social (social_header_widget.dart) - ✅ Copier lien du post dans presse-papiers - ✅ Partage natif via Share.share() - ✅ Dialogue de signalement avec 5 raisons ### Partage (share_post_dialog.dart) - ✅ Interface sélection d'amis avec checkboxes - ✅ Partage externe via Share API ### Média (media_upload_service.dart) - ✅ Parsing JSON réponse backend - ✅ Méthode deleteMedia() pour suppression - ✅ Génération miniature vidéo ### Posts (create_post_dialog.dart, edit_post_dialog.dart) - ✅ Extraction URL depuis uploads - ✅ Documentation chargement médias ### Chat (conversations_screen.dart) - ✅ Navigation vers notifications - ✅ ConversationSearchDelegate pour recherche ## Nouveaux Fichiers ### Configuration - build-prod.ps1 : Script build production avec dart-define - lib/core/constants/env_config.dart : Gestion environnements ### Documentation - TODOS_IMPLEMENTED.md : Documentation complète TODOs ## Améliorations ### Architecture - Refactoring injection de dépendances - Amélioration routing et navigation - Optimisation providers (UserProvider, FriendsProvider) ### UI/UX - Amélioration thème et couleurs - Optimisation animations - Meilleure gestion erreurs ### Services - Configuration API avec env_config - Amélioration datasources (events, users) - Optimisation modèles de données
This commit is contained in:
dahoud
371
lib/presentation/widgets/social/post_media_viewer.dart
Normal file
371
lib/presentation/widgets/social/post_media_viewer.dart
Normal file
@@ -0,0 +1,371 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/constants/design_system.dart';
|
||||
import '../fullscreen_image_viewer.dart';
|
||||
import 'fullscreen_video_player.dart';
|
||||
|
||||
/// Type de média dans un post.
|
||||
enum MediaType { image, video }
|
||||
|
||||
/// Modèle de média pour un post.
|
||||
class PostMedia {
|
||||
const PostMedia({
|
||||
required this.url,
|
||||
required this.type,
|
||||
this.thumbnailUrl,
|
||||
this.duration,
|
||||
});
|
||||
|
||||
final String url;
|
||||
final MediaType type;
|
||||
final String? thumbnailUrl;
|
||||
final Duration? duration;
|
||||
}
|
||||
|
||||
/// Widget d'affichage de médias dans un post social.
|
||||
///
|
||||
/// Supporte les images et vidéos avec différentes dispositions.
|
||||
class PostMediaViewer extends StatelessWidget {
|
||||
const PostMediaViewer({
|
||||
required this.medias,
|
||||
required this.postId,
|
||||
this.onTap,
|
||||
super.key,
|
||||
});
|
||||
|
||||
final List<PostMedia> medias;
|
||||
final String postId;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (medias.isEmpty) return const SizedBox.shrink();
|
||||
|
||||
if (medias.length == 1) {
|
||||
return _buildSingleMedia(context, medias[0], 0);
|
||||
} else if (medias.length == 2) {
|
||||
return _buildDoubleMedia(context);
|
||||
} else if (medias.length == 3) {
|
||||
return _buildTripleMedia(context);
|
||||
} else {
|
||||
return _buildMultipleMedia(context);
|
||||
}
|
||||
}
|
||||
|
||||
/// Affiche un seul média
|
||||
Widget _buildSingleMedia(BuildContext context, PostMedia media, int index) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: AspectRatio(
|
||||
aspectRatio: 1.0,
|
||||
child: _MediaItem(
|
||||
media: media,
|
||||
postId: postId,
|
||||
index: index,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Affiche deux médias côte à côte
|
||||
Widget _buildDoubleMedia(BuildContext context) {
|
||||
return SizedBox(
|
||||
height: 300,
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[0],
|
||||
postId: postId,
|
||||
index: 0,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[1],
|
||||
postId: postId,
|
||||
index: 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Affiche trois médias (1 grand + 2 petits)
|
||||
Widget _buildTripleMedia(BuildContext context) {
|
||||
return SizedBox(
|
||||
height: 300,
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: _MediaItem(
|
||||
media: medias[0],
|
||||
postId: postId,
|
||||
index: 0,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[1],
|
||||
postId: postId,
|
||||
index: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[2],
|
||||
postId: postId,
|
||||
index: 2,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Affiche 4+ médias (grille 2x2 avec compteur)
|
||||
Widget _buildMultipleMedia(BuildContext context) {
|
||||
return SizedBox(
|
||||
height: 300,
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[0],
|
||||
postId: postId,
|
||||
index: 0,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[2],
|
||||
postId: postId,
|
||||
index: 2,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _MediaItem(
|
||||
media: medias[1],
|
||||
postId: postId,
|
||||
index: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Expanded(
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
_MediaItem(
|
||||
media: medias[3],
|
||||
postId: postId,
|
||||
index: 3,
|
||||
),
|
||||
if (medias.length > 4)
|
||||
Container(
|
||||
color: Colors.black.withOpacity(0.6),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'+${medias.length - 4}',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Widget d'affichage d'un média individuel.
|
||||
class _MediaItem extends StatelessWidget {
|
||||
const _MediaItem({
|
||||
required this.media,
|
||||
required this.postId,
|
||||
required this.index,
|
||||
});
|
||||
|
||||
final PostMedia media;
|
||||
final String postId;
|
||||
final int index;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Hero(
|
||||
tag: 'post_media_${postId}_$index',
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceVariant.withOpacity(0.3),
|
||||
),
|
||||
child: media.type == MediaType.image
|
||||
? _buildImage(context, theme)
|
||||
: _buildVideo(context, theme),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildImage(BuildContext context, ThemeData theme) {
|
||||
return GestureDetector(
|
||||
onTap: () => _openFullscreen(context),
|
||||
child: Image.network(
|
||||
media.url,
|
||||
fit: BoxFit.cover,
|
||||
loadingBuilder: (context, child, loadingProgress) {
|
||||
if (loadingProgress == null) return child;
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
value: loadingProgress.expectedTotalBytes != null
|
||||
? loadingProgress.cumulativeBytesLoaded /
|
||||
loadingProgress.expectedTotalBytes!
|
||||
: null,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
);
|
||||
},
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Center(
|
||||
child: Icon(
|
||||
Icons.broken_image_rounded,
|
||||
size: 32,
|
||||
color: theme.colorScheme.onSurfaceVariant.withOpacity(0.5),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildVideo(BuildContext context, ThemeData theme) {
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Thumbnail ou image de preview
|
||||
if (media.thumbnailUrl != null)
|
||||
Image.network(
|
||||
media.thumbnailUrl!,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(
|
||||
color: theme.colorScheme.surfaceVariant,
|
||||
);
|
||||
},
|
||||
)
|
||||
else
|
||||
Container(
|
||||
color: theme.colorScheme.surfaceVariant,
|
||||
),
|
||||
|
||||
// Overlay de play
|
||||
Center(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.6),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
color: Colors.white,
|
||||
size: 32,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Durée de la vidéo
|
||||
if (media.duration != null)
|
||||
Positioned(
|
||||
bottom: 8,
|
||||
right: 8,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6,
|
||||
vertical: 3,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.7),
|
||||
borderRadius: BorderRadius.circular(DesignSystem.radiusSm),
|
||||
),
|
||||
child: Text(
|
||||
_formatDuration(media.duration!),
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
height: 1.2,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _openFullscreen(BuildContext context) {
|
||||
if (media.type == MediaType.image) {
|
||||
Navigator.push<void>(
|
||||
context,
|
||||
PageRouteBuilder<void>(
|
||||
opaque: false,
|
||||
barrierColor: Colors.black,
|
||||
pageBuilder: (context, animation, secondaryAnimation) {
|
||||
return FadeTransition(
|
||||
opacity: animation,
|
||||
child: FullscreenImageViewer(
|
||||
imageUrl: media.url,
|
||||
heroTag: 'post_media_${postId}_$index',
|
||||
title: '',
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
} else {
|
||||
// Ouvrir le lecteur vidéo en plein écran
|
||||
FullscreenVideoPlayer.show(
|
||||
context: context,
|
||||
videoUrl: media.url,
|
||||
heroTag: 'post_media_${postId}_$index',
|
||||
title: '',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
String _formatDuration(Duration duration) {
|
||||
final minutes = duration.inMinutes;
|
||||
final seconds = duration.inSeconds % 60;
|
||||
return '$minutes:${seconds.toString().padLeft(2, '0')}';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user