599 lines
18 KiB
Dart
599 lines
18 KiB
Dart
import 'dart:async';
|
|
import 'dart:convert';
|
|
import 'dart:io';
|
|
import 'dart:typed_data';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:audioplayers/audioplayers.dart';
|
|
import '../models/message_model.dart';
|
|
import '../theme/app_theme.dart';
|
|
import '../services/whatsapp_service.dart';
|
|
|
|
// ─── Full-Screen Image Viewer ─────────────────────────────────────────────
|
|
class FullScreenImageViewer extends StatelessWidget {
|
|
final Uint8List bytes;
|
|
final String heroTag;
|
|
|
|
const FullScreenImageViewer({
|
|
super.key,
|
|
required this.bytes,
|
|
required this.heroTag,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.black,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.black,
|
|
iconTheme: const IconThemeData(color: Colors.white),
|
|
elevation: 0,
|
|
),
|
|
body: Center(
|
|
child: Hero(
|
|
tag: heroTag,
|
|
child: InteractiveViewer(
|
|
minScale: 0.5,
|
|
maxScale: 5.0,
|
|
child: Image.memory(bytes, fit: BoxFit.contain),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ─── Message Bubble ───────────────────────────────────────────────────────
|
|
class MessageBubble extends StatelessWidget {
|
|
final MessageModel message;
|
|
|
|
const MessageBubble({super.key, required this.message});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
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(4),
|
|
bottomLeft: Radius.circular(12),
|
|
bottomRight: Radius.circular(12),
|
|
)
|
|
: const BorderRadius.only(
|
|
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: EdgeInsets.only(
|
|
top: 2,
|
|
bottom: 2,
|
|
left: isMe ? 60 : 8,
|
|
right: isMe ? 8 : 60,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment:
|
|
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
|
|
children: [
|
|
// 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,
|
|
children: [
|
|
// Sender name in group chats (incoming only)
|
|
if (!isMe && message.author != null) ...[
|
|
Text(
|
|
message.author!,
|
|
style: const TextStyle(
|
|
color: AppTheme.primaryDark,
|
|
fontSize: 12.5,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
],
|
|
|
|
// Media
|
|
if (message.hasMedia) ...[
|
|
InteractiveMediaWidget(message: message),
|
|
const SizedBox(height: 4),
|
|
],
|
|
|
|
// Text + time + ACK row
|
|
_buildTextTimeRow(context, isMe),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
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:
|
|
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();
|
|
}
|
|
}
|
|
|
|
String _formatTime(int timestamp) {
|
|
if (timestamp == 0) return '';
|
|
final dt = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
|
|
return DateFormat('h:mm a').format(dt);
|
|
}
|
|
}
|
|
|
|
// ─── Interactive Media Widget ─────────────────────────────────────────────
|
|
class InteractiveMediaWidget extends StatefulWidget {
|
|
final MessageModel message;
|
|
|
|
const InteractiveMediaWidget({super.key, required this.message});
|
|
|
|
@override
|
|
State<InteractiveMediaWidget> createState() => _InteractiveMediaWidgetState();
|
|
}
|
|
|
|
class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
|
|
final WhatsAppService _svc = Get.find<WhatsAppService>();
|
|
bool _isLoading = false;
|
|
|
|
// Audio player state
|
|
final AudioPlayer _player = AudioPlayer();
|
|
StreamSubscription? _posSub;
|
|
StreamSubscription? _durSub;
|
|
StreamSubscription? _stateSub;
|
|
|
|
bool _isPlaying = false;
|
|
double _audioProgress = 0.0;
|
|
int _audioDurationSeconds = 1;
|
|
int _audioCurrentSeconds = 0;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_posSub = _player.onPositionChanged.listen((p) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_audioCurrentSeconds = p.inSeconds;
|
|
if (_audioDurationSeconds > 0) {
|
|
_audioProgress = p.inMilliseconds / (_audioDurationSeconds * 1000);
|
|
if (_audioProgress > 1.0) _audioProgress = 1.0;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
_durSub = _player.onDurationChanged.listen((d) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_audioDurationSeconds = d.inSeconds > 0 ? d.inSeconds : 1;
|
|
});
|
|
}
|
|
});
|
|
|
|
_stateSub = _player.onPlayerStateChanged.listen((s) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isPlaying = s == PlayerState.playing;
|
|
if (s == PlayerState.completed) {
|
|
_audioProgress = 0.0;
|
|
_audioCurrentSeconds = 0;
|
|
_isPlaying = false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_posSub?.cancel();
|
|
_durSub?.cancel();
|
|
_stateSub?.cancel();
|
|
_player.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _toggleAudioPlayback(String base64Data) async {
|
|
try {
|
|
if (_isPlaying) {
|
|
await _player.pause();
|
|
} else {
|
|
final bytes = base64Decode(base64Data);
|
|
final safeId =
|
|
widget.message.id.replaceAll(RegExp(r'[^a-zA-Z0-9]'), '');
|
|
final tempDir = Directory.systemTemp;
|
|
final tempFile = File('${tempDir.path}/voice_$safeId.mp3');
|
|
|
|
if (!await tempFile.exists()) {
|
|
await tempFile.writeAsBytes(bytes);
|
|
}
|
|
|
|
await _player.play(DeviceFileSource(tempFile.path));
|
|
}
|
|
} catch (e) {
|
|
print('[AUDIO PLAYBACK ERROR] $e');
|
|
Get.snackbar(
|
|
'Playback Error',
|
|
'Could not play audio message: $e',
|
|
snackPosition: SnackPosition.BOTTOM,
|
|
backgroundColor: Colors.redAccent.withOpacity(0.8),
|
|
colorText: Colors.white,
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Obx(() {
|
|
final cachedMedia = _svc.mediaCache[widget.message.id];
|
|
|
|
if (cachedMedia != null) {
|
|
return _buildDownloadedMedia(context, cachedMedia);
|
|
}
|
|
|
|
if (_isLoading) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
width: 140,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.12),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: const SizedBox(
|
|
width: 24,
|
|
height: 24,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2, color: AppTheme.primary),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Tap to download placeholder
|
|
return GestureDetector(
|
|
onTap: _downloadMedia,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.10),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
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: TextStyle(
|
|
color: AppTheme.textPrimary(context),
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 13),
|
|
),
|
|
const SizedBox(height: 2),
|
|
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),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
Future<void> _downloadMedia() async {
|
|
setState(() => _isLoading = true);
|
|
await _svc.downloadAndCacheMedia(widget.message.id);
|
|
if (mounted) {
|
|
setState(() => _isLoading = false);
|
|
}
|
|
}
|
|
|
|
Widget _buildDownloadedMedia(BuildContext context, String base64Data) {
|
|
final bytes = base64Decode(base64Data);
|
|
|
|
// ── Image / Sticker ────────────────────────────────────────────────────
|
|
if (widget.message.type == "image" || widget.message.type == "sticker") {
|
|
final heroTag = 'img_${widget.message.id}';
|
|
return GestureDetector(
|
|
onTap: () {
|
|
Navigator.of(context).push(
|
|
PageRouteBuilder(
|
|
opaque: false,
|
|
barrierColor: Colors.black,
|
|
pageBuilder: (_, __, ___) => FullScreenImageViewer(
|
|
bytes: bytes,
|
|
heroTag: heroTag,
|
|
),
|
|
transitionsBuilder: (_, anim, __, child) =>
|
|
FadeTransition(opacity: anim, child: child),
|
|
),
|
|
);
|
|
},
|
|
child: Hero(
|
|
tag: heroTag,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(maxHeight: 260),
|
|
child: Image.memory(
|
|
bytes,
|
|
fit: BoxFit.cover,
|
|
width: double.infinity,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ── Audio / Voice Note ─────────────────────────────────────────────────
|
|
if (widget.message.type == "audio") {
|
|
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: 8, vertical: 4),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
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),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SliderTheme(
|
|
data: SliderTheme.of(context).copyWith(
|
|
trackHeight: 2,
|
|
thumbShape:
|
|
const RoundSliderThumbShape(enabledThumbRadius: 5),
|
|
overlayShape:
|
|
const RoundSliderOverlayShape(overlayRadius: 10),
|
|
activeTrackColor: AppTheme.primary,
|
|
inactiveTrackColor:
|
|
AppTheme.textSecondary(context).withOpacity(0.3),
|
|
thumbColor: AppTheme.primary,
|
|
overlayColor: AppTheme.primary.withOpacity(0.2),
|
|
),
|
|
child: Slider(
|
|
value: _audioProgress.clamp(0.0, 1.0),
|
|
onChanged: (v) async {
|
|
final targetMs =
|
|
(v * _audioDurationSeconds * 1000).toInt();
|
|
await _player
|
|
.seek(Duration(milliseconds: targetMs));
|
|
},
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(left: 4),
|
|
child: Text(
|
|
durationStr,
|
|
style: TextStyle(
|
|
color: AppTheme.textSecondary(context),
|
|
fontSize: 11,
|
|
fontFeatures: const [FontFeature.tabularFigures()],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// ── Default: Document / File ───────────────────────────────────────────
|
|
return Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.10),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
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: TextStyle(
|
|
color: AppTheme.textPrimary(context),
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 13),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
IconData _getIcon() {
|
|
switch (widget.message.type) {
|
|
case "image":
|
|
return Icons.photo_camera_rounded;
|
|
case "video":
|
|
return Icons.videocam_rounded;
|
|
case "audio":
|
|
return Icons.mic_rounded;
|
|
case "sticker":
|
|
return Icons.emoji_emotions_rounded;
|
|
default:
|
|
return Icons.insert_drive_file_rounded;
|
|
}
|
|
}
|
|
|
|
String _getLabel() {
|
|
switch (widget.message.type) {
|
|
case "image":
|
|
return "Photo";
|
|
case "video":
|
|
return "Video";
|
|
case "audio":
|
|
return "Voice note";
|
|
case "sticker":
|
|
return "Sticker";
|
|
default:
|
|
return "File";
|
|
}
|
|
}
|
|
}
|