Sync update: 2026-05-19 23:27:14
This commit is contained in:
Hamza-Ayed
@@ -52,118 +52,171 @@ class MessageBubble extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isMe = message.fromMe;
|
||||
final align = isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start;
|
||||
final bg = isMe ? AppTheme.outgoingMsg : AppTheme.incomingMsg;
|
||||
final isMe = message.fromMe;
|
||||
final isDark = AppTheme.isDark(context);
|
||||
|
||||
final bg = isMe
|
||||
? AppTheme.outgoingMsg(context)
|
||||
: AppTheme.incomingMsg(context);
|
||||
|
||||
final radius = isMe
|
||||
? const BorderRadius.only(
|
||||
topLeft: Radius.circular(12),
|
||||
topRight: Radius.circular(0),
|
||||
bottomLeft: Radius.circular(12),
|
||||
topLeft: Radius.circular(12),
|
||||
topRight: Radius.circular(4),
|
||||
bottomLeft: Radius.circular(12),
|
||||
bottomRight: Radius.circular(12),
|
||||
)
|
||||
: const BorderRadius.only(
|
||||
topLeft: Radius.circular(0),
|
||||
topRight: Radius.circular(12),
|
||||
bottomLeft: Radius.circular(12),
|
||||
topLeft: Radius.circular(4),
|
||||
topRight: Radius.circular(12),
|
||||
bottomLeft: Radius.circular(12),
|
||||
bottomRight: Radius.circular(12),
|
||||
);
|
||||
|
||||
// Incoming message shadow/border in light mode
|
||||
final BoxDecoration decoration = BoxDecoration(
|
||||
color: bg,
|
||||
borderRadius: radius,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(isDark ? 0.2 : 0.08),
|
||||
blurRadius: 2,
|
||||
offset: const Offset(0, 1),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
|
||||
margin: EdgeInsets.only(
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
left: isMe ? 60 : 8,
|
||||
right: isMe ? 8 : 60,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: align,
|
||||
crossAxisAlignment:
|
||||
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: MediaQuery.of(context).size.width * 0.75,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: bg,
|
||||
borderRadius: radius,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Sender name in group chats
|
||||
if (!isMe && message.author != null) ...[
|
||||
Text(
|
||||
message.author!,
|
||||
style: const TextStyle(
|
||||
color: AppTheme.primary,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
],
|
||||
|
||||
// Media widget
|
||||
if (message.hasMedia) ...[
|
||||
InteractiveMediaWidget(message: message),
|
||||
const SizedBox(height: 6),
|
||||
],
|
||||
|
||||
// Text + time + ACK row
|
||||
Row(
|
||||
// Tail + bubble
|
||||
Stack(
|
||||
children: [
|
||||
// Message bubble
|
||||
Container(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: MediaQuery.of(context).size.width * 0.78,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: decoration,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
message.body,
|
||||
// Sender name in group chats (incoming only)
|
||||
if (!isMe && message.author != null) ...[
|
||||
Text(
|
||||
message.author!,
|
||||
style: const TextStyle(
|
||||
color: AppTheme.textPrimary,
|
||||
fontSize: 15,
|
||||
color: AppTheme.primaryDark,
|
||||
fontSize: 12.5,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 4),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
_formatTime(message.timestamp),
|
||||
style: const TextStyle(
|
||||
color: AppTheme.textSecondary,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
if (isMe) ...[
|
||||
const SizedBox(width: 4),
|
||||
_buildAckIcon(message.ack),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
],
|
||||
|
||||
// Media
|
||||
if (message.hasMedia) ...[
|
||||
InteractiveMediaWidget(message: message),
|
||||
const SizedBox(height: 4),
|
||||
],
|
||||
|
||||
// Text + time + ACK row
|
||||
_buildTextTimeRow(context, isMe),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAckIcon(int ack) {
|
||||
Widget _buildTextTimeRow(BuildContext context, bool isMe) {
|
||||
// If body is empty (media-only message), just show time+ack
|
||||
final hasBody = message.body.trim().isNotEmpty;
|
||||
|
||||
if (!hasBody && message.hasMedia) {
|
||||
// Show only time+ack at bottom right of media
|
||||
return Align(
|
||||
alignment: Alignment.bottomRight,
|
||||
child: _timeAckRow(context, isMe),
|
||||
);
|
||||
}
|
||||
|
||||
return Wrap(
|
||||
alignment: WrapAlignment.end,
|
||||
crossAxisAlignment: WrapCrossAlignment.end,
|
||||
children: [
|
||||
if (hasBody)
|
||||
Text(
|
||||
message.body,
|
||||
style: TextStyle(
|
||||
color: AppTheme.textPrimary(context),
|
||||
fontSize: 15,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
_timeAckRow(context, isMe),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _timeAckRow(BuildContext context, bool isMe) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
_formatTime(message.timestamp),
|
||||
style: TextStyle(
|
||||
color: AppTheme.textSecondary(context),
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
if (isMe) ...[
|
||||
const SizedBox(width: 3),
|
||||
_buildAckIcon(context, message.ack),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// ── ACK icon ──────────────────────────────────────────────────────────────
|
||||
// Real WhatsApp ACK values from whatsapp-web.js:
|
||||
// -1 = error
|
||||
// 0 = pending (clock icon)
|
||||
// 1 = sent (single grey tick ✓)
|
||||
// 2 = delivered/received (double grey tick ✓✓)
|
||||
// 3 = read/played (double BLUE tick ✓✓)
|
||||
Widget _buildAckIcon(BuildContext context, int ack) {
|
||||
switch (ack) {
|
||||
case 1: // Pending/Queued
|
||||
return const Icon(Icons.access_time,
|
||||
size: 13, color: AppTheme.textSecondary);
|
||||
case 2: // Sent (single grey tick)
|
||||
return const Icon(Icons.done, size: 15, color: AppTheme.textSecondary);
|
||||
case 3: // Delivered (double grey tick)
|
||||
return const Icon(Icons.done_all,
|
||||
size: 15, color: AppTheme.textSecondary);
|
||||
case 4: // Read (double blue tick)
|
||||
return const Icon(Icons.done_all, size: 15, color: Colors.blue);
|
||||
case 5: // Played audio/video (double blue with wave icon)
|
||||
return const Icon(Icons.done_all, size: 15, color: Colors.blue);
|
||||
case -1:
|
||||
case 0:
|
||||
// Pending — clock
|
||||
return Icon(Icons.access_time_rounded,
|
||||
size: 14, color: AppTheme.textSecondary(context));
|
||||
case 1:
|
||||
// Sent — single grey tick
|
||||
return Icon(Icons.check_rounded,
|
||||
size: 16, color: AppTheme.textSecondary(context));
|
||||
case 2:
|
||||
// Delivered — double grey tick
|
||||
return Icon(Icons.done_all_rounded,
|
||||
size: 16, color: AppTheme.textSecondary(context));
|
||||
case 3:
|
||||
// Read — double blue tick
|
||||
return const Icon(Icons.done_all_rounded,
|
||||
size: 16, color: AppTheme.blueTick);
|
||||
default:
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
@@ -291,7 +344,7 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
width: 140,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
color: Colors.black.withOpacity(0.12),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: const SizedBox(
|
||||
@@ -307,32 +360,50 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
return GestureDetector(
|
||||
onTap: _downloadMedia,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
color: Colors.black.withOpacity(0.10),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(_getIcon(), color: AppTheme.textSecondary, size: 32),
|
||||
const SizedBox(width: 12),
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.primary.withOpacity(0.15),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(_getIcon(),
|
||||
color: AppTheme.primary, size: 22),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
_getLabel(),
|
||||
style: const TextStyle(
|
||||
color: AppTheme.textPrimary,
|
||||
style: TextStyle(
|
||||
color: AppTheme.textPrimary(context),
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 13),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
const Text(
|
||||
'Tap to download',
|
||||
style:
|
||||
TextStyle(color: AppTheme.textSecondary, fontSize: 10),
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.download_rounded,
|
||||
size: 12,
|
||||
color: AppTheme.textSecondary(context)),
|
||||
const SizedBox(width: 3),
|
||||
Text(
|
||||
'Tap to download',
|
||||
style: TextStyle(
|
||||
color: AppTheme.textSecondary(context),
|
||||
fontSize: 11),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -354,7 +425,7 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
Widget _buildDownloadedMedia(BuildContext context, String base64Data) {
|
||||
final bytes = base64Decode(base64Data);
|
||||
|
||||
// ── Image / Sticker: full-screen viewer on tap ─────────────────────────
|
||||
// ── Image / Sticker ────────────────────────────────────────────────────
|
||||
if (widget.message.type == "image" || widget.message.type == "sticker") {
|
||||
final heroTag = 'img_${widget.message.id}';
|
||||
return GestureDetector(
|
||||
@@ -377,7 +448,7 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 250),
|
||||
constraints: const BoxConstraints(maxHeight: 260),
|
||||
child: Image.memory(
|
||||
bytes,
|
||||
fit: BoxFit.cover,
|
||||
@@ -391,30 +462,29 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
|
||||
// ── Audio / Voice Note ─────────────────────────────────────────────────
|
||||
if (widget.message.type == "audio") {
|
||||
final durationStr = _audioDurationSeconds > 1
|
||||
? '${(_audioDurationSeconds ~/ 60).toString().padLeft(1, '0')}:${(_audioDurationSeconds % 60).toString().padLeft(2, '0')}'
|
||||
: '0:${_audioCurrentSeconds.toString().padLeft(2, '0')}';
|
||||
final totalSec = _audioDurationSeconds > 1 ? _audioDurationSeconds : _audioCurrentSeconds;
|
||||
final durationStr =
|
||||
'${(totalSec ~/ 60).toString().padLeft(1, '0')}:${(totalSec % 60).toString().padLeft(2, '0')}';
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
_isPlaying
|
||||
? Icons.pause_circle_filled
|
||||
: Icons.play_circle_filled,
|
||||
color: AppTheme.primary,
|
||||
size: 36,
|
||||
CircleAvatar(
|
||||
radius: 18,
|
||||
backgroundColor: AppTheme.primary,
|
||||
child: IconButton(
|
||||
padding: EdgeInsets.zero,
|
||||
icon: Icon(
|
||||
_isPlaying
|
||||
? Icons.pause_rounded
|
||||
: Icons.play_arrow_rounded,
|
||||
color: Colors.white,
|
||||
size: 20,
|
||||
),
|
||||
onPressed: () => _toggleAudioPlayback(base64Data),
|
||||
),
|
||||
onPressed: () => _toggleAudioPlayback(base64Data),
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
@@ -423,13 +493,14 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
children: [
|
||||
SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
trackHeight: 2.5,
|
||||
trackHeight: 2,
|
||||
thumbShape:
|
||||
const RoundSliderThumbShape(enabledThumbRadius: 5),
|
||||
overlayShape:
|
||||
const RoundSliderOverlayShape(overlayRadius: 10),
|
||||
activeTrackColor: AppTheme.primary,
|
||||
inactiveTrackColor: AppTheme.surfaceLight,
|
||||
inactiveTrackColor:
|
||||
AppTheme.textSecondary(context).withOpacity(0.3),
|
||||
thumbColor: AppTheme.primary,
|
||||
overlayColor: AppTheme.primary.withOpacity(0.2),
|
||||
),
|
||||
@@ -438,7 +509,8 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
onChanged: (v) async {
|
||||
final targetMs =
|
||||
(v * _audioDurationSeconds * 1000).toInt();
|
||||
await _player.seek(Duration(milliseconds: targetMs));
|
||||
await _player
|
||||
.seek(Duration(milliseconds: targetMs));
|
||||
},
|
||||
),
|
||||
),
|
||||
@@ -446,10 +518,10 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
padding: const EdgeInsets.only(left: 4),
|
||||
child: Text(
|
||||
durationStr,
|
||||
style: const TextStyle(
|
||||
color: AppTheme.textSecondary,
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 10,
|
||||
style: TextStyle(
|
||||
color: AppTheme.textSecondary(context),
|
||||
fontSize: 11,
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -463,21 +535,31 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
|
||||
// ── Default: Document / File ───────────────────────────────────────────
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
color: Colors.black.withOpacity(0.10),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.check_circle_outline,
|
||||
color: AppTheme.primary, size: 32),
|
||||
const SizedBox(width: 12),
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.primary.withOpacity(0.15),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(Icons.insert_drive_file_rounded,
|
||||
color: AppTheme.primary, size: 22),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Text(
|
||||
_getLabel(),
|
||||
style: const TextStyle(
|
||||
color: AppTheme.textPrimary, fontWeight: FontWeight.w500),
|
||||
style: TextStyle(
|
||||
color: AppTheme.textPrimary(context),
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 13),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -487,30 +569,30 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
||||
IconData _getIcon() {
|
||||
switch (widget.message.type) {
|
||||
case "image":
|
||||
return Icons.photo_outlined;
|
||||
return Icons.photo_camera_rounded;
|
||||
case "video":
|
||||
return Icons.videocam_outlined;
|
||||
return Icons.videocam_rounded;
|
||||
case "audio":
|
||||
return Icons.audiotrack_outlined;
|
||||
return Icons.mic_rounded;
|
||||
case "sticker":
|
||||
return Icons.emoji_emotions_outlined;
|
||||
return Icons.emoji_emotions_rounded;
|
||||
default:
|
||||
return Icons.insert_drive_file_outlined;
|
||||
return Icons.insert_drive_file_rounded;
|
||||
}
|
||||
}
|
||||
|
||||
String _getLabel() {
|
||||
switch (widget.message.type) {
|
||||
case "image":
|
||||
return "Image Attachment";
|
||||
return "Photo";
|
||||
case "video":
|
||||
return "Video Attachment";
|
||||
return "Video";
|
||||
case "audio":
|
||||
return "Audio / Voice Note";
|
||||
return "Voice note";
|
||||
case "sticker":
|
||||
return "Sticker Attachment";
|
||||
return "Sticker";
|
||||
default:
|
||||
return "File Attachment";
|
||||
return "File";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user