517 lines
16 KiB
Dart
517 lines
16 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 align = isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start;
|
|
final bg = isMe ? AppTheme.outgoingMsg : AppTheme.incomingMsg;
|
|
final radius = isMe
|
|
? const BorderRadius.only(
|
|
topLeft: Radius.circular(12),
|
|
topRight: Radius.circular(0),
|
|
bottomLeft: Radius.circular(12),
|
|
bottomRight: Radius.circular(12),
|
|
)
|
|
: const BorderRadius.only(
|
|
topLeft: Radius.circular(0),
|
|
topRight: Radius.circular(12),
|
|
bottomLeft: Radius.circular(12),
|
|
bottomRight: Radius.circular(12),
|
|
);
|
|
|
|
return Container(
|
|
margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
|
|
child: Column(
|
|
crossAxisAlignment: align,
|
|
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(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Flexible(
|
|
child: Text(
|
|
message.body,
|
|
style: const TextStyle(
|
|
color: AppTheme.textPrimary,
|
|
fontSize: 15,
|
|
),
|
|
),
|
|
),
|
|
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),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildAckIcon(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);
|
|
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.15),
|
|
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(12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(_getIcon(), color: AppTheme.textSecondary, size: 32),
|
|
const SizedBox(width: 12),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
_getLabel(),
|
|
style: const TextStyle(
|
|
color: AppTheme.textPrimary,
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 13),
|
|
),
|
|
const SizedBox(height: 2),
|
|
const Text(
|
|
'Tap to download',
|
|
style:
|
|
TextStyle(color: AppTheme.textSecondary, fontSize: 10),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
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: full-screen viewer on tap ─────────────────────────
|
|
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: 250),
|
|
child: Image.memory(
|
|
bytes,
|
|
fit: BoxFit.cover,
|
|
width: double.infinity,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ── 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')}';
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
IconButton(
|
|
icon: Icon(
|
|
_isPlaying
|
|
? Icons.pause_circle_filled
|
|
: Icons.play_circle_filled,
|
|
color: AppTheme.primary,
|
|
size: 36,
|
|
),
|
|
onPressed: () => _toggleAudioPlayback(base64Data),
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SliderTheme(
|
|
data: SliderTheme.of(context).copyWith(
|
|
trackHeight: 2.5,
|
|
thumbShape:
|
|
const RoundSliderThumbShape(enabledThumbRadius: 5),
|
|
overlayShape:
|
|
const RoundSliderOverlayShape(overlayRadius: 10),
|
|
activeTrackColor: AppTheme.primary,
|
|
inactiveTrackColor: AppTheme.surfaceLight,
|
|
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: const TextStyle(
|
|
color: AppTheme.textSecondary,
|
|
fontFamily: 'monospace',
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// ── Default: Document / File ───────────────────────────────────────────
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.15),
|
|
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),
|
|
Text(
|
|
_getLabel(),
|
|
style: const TextStyle(
|
|
color: AppTheme.textPrimary, fontWeight: FontWeight.w500),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
IconData _getIcon() {
|
|
switch (widget.message.type) {
|
|
case "image":
|
|
return Icons.photo_outlined;
|
|
case "video":
|
|
return Icons.videocam_outlined;
|
|
case "audio":
|
|
return Icons.audiotrack_outlined;
|
|
case "sticker":
|
|
return Icons.emoji_emotions_outlined;
|
|
default:
|
|
return Icons.insert_drive_file_outlined;
|
|
}
|
|
}
|
|
|
|
String _getLabel() {
|
|
switch (widget.message.type) {
|
|
case "image":
|
|
return "Image Attachment";
|
|
case "video":
|
|
return "Video Attachment";
|
|
case "audio":
|
|
return "Audio / Voice Note";
|
|
case "sticker":
|
|
return "Sticker Attachment";
|
|
default:
|
|
return "File Attachment";
|
|
}
|
|
}
|
|
}
|