472 lines
15 KiB
Dart
472 lines
15 KiB
Dart
// Hangjegyzet widget a MapFeatureSaveSheet-ben:
|
||
// - Felvétel gomb animált mikrofonnal
|
||
// - Felvett klipek listája play/pause/delete gombokkal
|
||
// - Haladásjelző csúszka lejátszás közben
|
||
|
||
import 'dart:math' as math;
|
||
|
||
import 'package:flutter/material.dart';
|
||
import 'package:get/get.dart';
|
||
|
||
import '../../models/note_item_audio.dart';
|
||
import '../../services/note_audio_service.dart';
|
||
|
||
class NoteAudioWidget extends StatefulWidget {
|
||
final int? noteItemId;
|
||
const NoteAudioWidget({super.key, required this.noteItemId});
|
||
|
||
@override
|
||
State<NoteAudioWidget> createState() => _NoteAudioWidgetState();
|
||
}
|
||
|
||
class _NoteAudioWidgetState extends State<NoteAudioWidget> {
|
||
List<NoteItemAudio> _audios = [];
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_load();
|
||
}
|
||
|
||
Future<void> _load() async {
|
||
if (widget.noteItemId == null) return;
|
||
final list = await NoteAudioService.to.loadAudios(widget.noteItemId!);
|
||
if (mounted) setState(() => _audios = list);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
if (widget.noteItemId == null) {
|
||
return const _DisabledAudio();
|
||
}
|
||
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Fejléc sor
|
||
Row(children: [
|
||
Text('Hangjegyzetek',
|
||
style: TextStyle(fontSize: 13, color: Colors.grey.shade600)),
|
||
const SizedBox(width: 6),
|
||
if (_audios.isNotEmpty)
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey.shade200,
|
||
borderRadius: BorderRadius.circular(10),
|
||
),
|
||
child: Text('${_audios.length}',
|
||
style: const TextStyle(
|
||
fontSize: 11, fontWeight: FontWeight.w600)),
|
||
),
|
||
]),
|
||
|
||
const SizedBox(height: 10),
|
||
|
||
// Felvétel gomb
|
||
_RecordButton(
|
||
noteItemId: widget.noteItemId!,
|
||
onRecorded: (audio) {
|
||
setState(() => _audios.add(audio));
|
||
},
|
||
),
|
||
|
||
// Felvett klipek listája
|
||
if (_audios.isNotEmpty) ...[
|
||
const SizedBox(height: 10),
|
||
..._audios.map((audio) => _AudioClipTile(
|
||
audio: audio,
|
||
onDelete: () async {
|
||
await NoteAudioService.to.deleteAudio(audio);
|
||
setState(() => _audios.removeWhere((a) => a.id == audio.id));
|
||
},
|
||
)),
|
||
],
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
// ─── Felvétel gomb ───────────────────────────────────────────────────────────
|
||
|
||
class _RecordButton extends StatelessWidget {
|
||
final int noteItemId;
|
||
final ValueChanged<NoteItemAudio> onRecorded;
|
||
|
||
const _RecordButton({
|
||
required this.noteItemId,
|
||
required this.onRecorded,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final svc = NoteAudioService.to;
|
||
|
||
return Obx(() {
|
||
final isRecording = svc.recordState.value == AudioRecordState.recording;
|
||
final durationMs = svc.recordDurationMs.value;
|
||
|
||
return Row(children: [
|
||
// Mikrofon gomb
|
||
GestureDetector(
|
||
onTap: () => isRecording ? _stopRecording(svc) : _startRecording(svc),
|
||
child: AnimatedContainer(
|
||
duration: const Duration(milliseconds: 200),
|
||
width: 52,
|
||
height: 52,
|
||
decoration: BoxDecoration(
|
||
color: isRecording
|
||
? Colors.red
|
||
: Theme.of(context).colorScheme.primaryContainer,
|
||
shape: BoxShape.circle,
|
||
boxShadow: isRecording
|
||
? [
|
||
BoxShadow(
|
||
color: Colors.red.withOpacity(0.4),
|
||
blurRadius: 12,
|
||
spreadRadius: 2,
|
||
)
|
||
]
|
||
: null,
|
||
),
|
||
child: Icon(
|
||
isRecording ? Icons.stop : Icons.mic,
|
||
color: isRecording
|
||
? Colors.white
|
||
: Theme.of(context).colorScheme.primary,
|
||
size: 24,
|
||
),
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 12),
|
||
|
||
Expanded(
|
||
child: isRecording
|
||
// Felvétel közben: időmérő + animált hullám
|
||
? Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Row(children: [
|
||
_PulsingDot(),
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
'Felvétel: ${svc.formatMs(durationMs)}',
|
||
style: const TextStyle(
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.red,
|
||
fontSize: 14,
|
||
),
|
||
),
|
||
]),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
'Megállításhoz nyomd meg a gombot',
|
||
style:
|
||
TextStyle(fontSize: 11, color: Colors.grey.shade500),
|
||
),
|
||
],
|
||
)
|
||
// Alap állapot
|
||
: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
const Text('Hangjegyzet rögzítése',
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.w500, fontSize: 14)),
|
||
Text('Nyomd meg a mikrofon gombot',
|
||
style: TextStyle(
|
||
fontSize: 11, color: Colors.grey.shade500)),
|
||
],
|
||
),
|
||
),
|
||
|
||
// Mégse — csak felvétel közben
|
||
if (isRecording)
|
||
TextButton(
|
||
onPressed: () async {
|
||
await svc.cancelRecording();
|
||
},
|
||
child: const Text('Mégse', style: TextStyle(color: Colors.grey)),
|
||
),
|
||
]);
|
||
});
|
||
}
|
||
|
||
Future<void> _startRecording(NoteAudioService svc) async {
|
||
await svc.startRecording(noteItemId);
|
||
}
|
||
|
||
Future<void> _stopRecording(NoteAudioService svc) async {
|
||
final audio = await svc.stopRecording(noteItemId);
|
||
if (audio != null) onRecorded(audio);
|
||
}
|
||
}
|
||
|
||
// ─── Egy felvett klip sor ────────────────────────────────────────────────────
|
||
|
||
class _AudioClipTile extends StatelessWidget {
|
||
final NoteItemAudio audio;
|
||
final VoidCallback onDelete;
|
||
|
||
const _AudioClipTile({
|
||
required this.audio,
|
||
required this.onDelete,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final svc = NoteAudioService.to;
|
||
|
||
return Obx(() {
|
||
final isThisPlaying = svc.playingAudioId.value == audio.id;
|
||
final pState = svc.playState.value;
|
||
final posMs = svc.playPositionMs.value;
|
||
final totalMs = audio.durationSeconds * 1000;
|
||
|
||
// Haladás 0.0 – 1.0
|
||
final progress = (isThisPlaying && totalMs > 0)
|
||
? (posMs / totalMs).clamp(0.0, 1.0)
|
||
: 0.0;
|
||
|
||
return Container(
|
||
margin: const EdgeInsets.only(bottom: 8),
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||
decoration: BoxDecoration(
|
||
color: isThisPlaying
|
||
? Theme.of(context).colorScheme.primaryContainer.withOpacity(0.4)
|
||
: Colors.grey.shade100,
|
||
borderRadius: BorderRadius.circular(10),
|
||
border: isThisPlaying
|
||
? Border.all(
|
||
color: Theme.of(context).colorScheme.primary.withOpacity(0.4))
|
||
: null,
|
||
),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Row(children: [
|
||
// Play / Pause gomb
|
||
GestureDetector(
|
||
onTap: () => svc.playAudio(audio),
|
||
child: Container(
|
||
width: 36,
|
||
height: 36,
|
||
decoration: BoxDecoration(
|
||
color: Theme.of(context).colorScheme.primary,
|
||
shape: BoxShape.circle,
|
||
),
|
||
child: Icon(
|
||
isThisPlaying && pState == AudioPlayState.playing
|
||
? Icons.pause
|
||
: Icons.play_arrow,
|
||
color: Colors.white,
|
||
size: 20,
|
||
),
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 10),
|
||
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// Felirat vagy dátum
|
||
if (audio.caption.isNotEmpty)
|
||
Text(audio.caption,
|
||
style: const TextStyle(
|
||
fontSize: 13, fontWeight: FontWeight.w500),
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis)
|
||
else
|
||
Text(
|
||
_formatDate(audio.createdAt),
|
||
style: TextStyle(
|
||
fontSize: 12, color: Colors.grey.shade600),
|
||
),
|
||
|
||
const SizedBox(height: 4),
|
||
|
||
// Haladásjelző csúszka
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(2),
|
||
child: LinearProgressIndicator(
|
||
value: isThisPlaying && totalMs > 0
|
||
? (posMs / totalMs).clamp(0.0, 1.0)
|
||
: 0.0,
|
||
minHeight: 3,
|
||
backgroundColor: Colors.grey.shade300,
|
||
valueColor: AlwaysStoppedAnimation(
|
||
Theme.of(context).colorScheme.primary,
|
||
),
|
||
),
|
||
),
|
||
|
||
const SizedBox(height: 2),
|
||
|
||
// Időtartam
|
||
Text(
|
||
isThisPlaying
|
||
? '${svc.formatMs(posMs)} / '
|
||
'${audio.durationFormatted}'
|
||
: audio.durationFormatted,
|
||
style: TextStyle(
|
||
fontSize: 10,
|
||
color: Colors.grey.shade500,
|
||
fontFeatures: const [FontFeature.tabularFigures()]),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 4),
|
||
|
||
// Menü: felirat / törlés
|
||
PopupMenuButton<_AudioAction>(
|
||
icon: Icon(Icons.more_vert,
|
||
size: 18, color: Colors.grey.shade500),
|
||
onSelected: (a) => _onAction(a, context),
|
||
itemBuilder: (_) => [
|
||
const PopupMenuItem(
|
||
value: _AudioAction.caption,
|
||
child: ListTile(
|
||
leading: Icon(Icons.edit_outlined),
|
||
title: Text('Felirat'),
|
||
dense: true,
|
||
),
|
||
),
|
||
const PopupMenuDivider(),
|
||
const PopupMenuItem(
|
||
value: _AudioAction.delete,
|
||
child: ListTile(
|
||
leading: Icon(Icons.delete_outline, color: Colors.red),
|
||
title:
|
||
Text('Törlés', style: TextStyle(color: Colors.red)),
|
||
dense: true,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
]),
|
||
],
|
||
),
|
||
);
|
||
});
|
||
}
|
||
|
||
void _onAction(_AudioAction action, BuildContext context) {
|
||
switch (action) {
|
||
case _AudioAction.caption:
|
||
_editCaption();
|
||
case _AudioAction.delete:
|
||
_confirmDelete();
|
||
}
|
||
}
|
||
|
||
Future<void> _editCaption() async {
|
||
final ctrl = TextEditingController(text: audio.caption);
|
||
await Get.dialog(AlertDialog(
|
||
title: const Text('Felirat'),
|
||
content: TextField(
|
||
controller: ctrl,
|
||
decoration: const InputDecoration(hintText: 'Hangjegyzet leírása...'),
|
||
autofocus: true,
|
||
),
|
||
actions: [
|
||
TextButton(onPressed: Get.back, child: const Text('Mégse')),
|
||
FilledButton(
|
||
onPressed: () async {
|
||
Get.back();
|
||
await NoteAudioService.to.updateCaption(audio, ctrl.text.trim());
|
||
},
|
||
child: const Text('Mentés'),
|
||
),
|
||
],
|
||
));
|
||
}
|
||
|
||
Future<void> _confirmDelete() async {
|
||
final ok = await Get.dialog<bool>(AlertDialog(
|
||
title: const Text('Hangjegyzet törlése'),
|
||
content: const Text('Ez a felvétel véglegesen törlődik.'),
|
||
actions: [
|
||
TextButton(onPressed: Get.back, child: const Text('Mégse')),
|
||
FilledButton(
|
||
style: FilledButton.styleFrom(backgroundColor: Colors.red),
|
||
onPressed: () => Get.back(result: true),
|
||
child: const Text('Törlés'),
|
||
),
|
||
],
|
||
));
|
||
if (ok == true) onDelete();
|
||
}
|
||
|
||
String _formatDate(DateTime dt) =>
|
||
'${dt.year}.${dt.month.toString().padLeft(2, '0')}.'
|
||
'${dt.day.toString().padLeft(2, '0')} '
|
||
'${dt.hour.toString().padLeft(2, '0')}:'
|
||
'${dt.minute.toString().padLeft(2, '0')}';
|
||
}
|
||
|
||
// ─── Segéd widgetek ──────────────────────────────────────────────────────────
|
||
|
||
class _DisabledAudio extends StatelessWidget {
|
||
const _DisabledAudio();
|
||
@override
|
||
Widget build(BuildContext context) => Container(
|
||
height: 50,
|
||
alignment: Alignment.center,
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey.shade100,
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
child: Text('Mentés után adható hangjegyzet',
|
||
style: TextStyle(fontSize: 12, color: Colors.grey.shade500)),
|
||
);
|
||
}
|
||
|
||
class _PulsingDot extends StatefulWidget {
|
||
@override
|
||
State<_PulsingDot> createState() => _PulsingDotState();
|
||
}
|
||
|
||
class _PulsingDotState extends State<_PulsingDot>
|
||
with SingleTickerProviderStateMixin {
|
||
late AnimationController _ctrl;
|
||
late Animation<double> _anim;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_ctrl = AnimationController(
|
||
vsync: this, duration: const Duration(milliseconds: 600))
|
||
..repeat(reverse: true);
|
||
_anim = Tween(begin: 0.3, end: 1.0).animate(_ctrl);
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_ctrl.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) => AnimatedBuilder(
|
||
animation: _anim,
|
||
builder: (_, __) => Container(
|
||
width: 8,
|
||
height: 8,
|
||
decoration: BoxDecoration(
|
||
color: Colors.red.withOpacity(_anim.value),
|
||
shape: BoxShape.circle,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
enum _AudioAction { caption, delete }
|