489 lines
16 KiB
Dart
489 lines
16 KiB
Dart
import 'dart:io';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:path_provider/path_provider.dart';
|
|
import 'package:permission_handler/permission_handler.dart';
|
|
import 'package:record/record.dart';
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
import 'package:ta_tahsin/core/baseurl/base_url.dart';
|
|
import 'package:ta_tahsin/core/theme.dart';
|
|
import 'package:http/http.dart' as http;
|
|
import 'dart:convert';
|
|
import 'dart:async';
|
|
import 'package:audioplayers/audioplayers.dart';
|
|
import 'package:http_parser/http_parser.dart';
|
|
|
|
class LatihanPage extends StatefulWidget {
|
|
final int id;
|
|
final int currentStep;
|
|
|
|
const LatihanPage({super.key, required this.id, required this.currentStep});
|
|
|
|
@override
|
|
_LatihanPageState createState() => _LatihanPageState();
|
|
}
|
|
|
|
class _LatihanPageState extends State<LatihanPage> {
|
|
final _record = AudioRecorder();
|
|
late Future<List<dynamic>> latihanData;
|
|
bool isRecording = false;
|
|
int timer = 10;
|
|
late Timer countdownTimer;
|
|
String timerText = "10";
|
|
final AudioPlayer _audioPlayer = AudioPlayer();
|
|
bool isAudioPlaying = false;
|
|
String? recordedFilePath;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
latihanData = fetchLatihanData(widget.id);
|
|
|
|
_audioPlayer.onPlayerStateChanged.listen((PlayerState state) {
|
|
if (state == PlayerState.completed) {
|
|
setState(() {
|
|
isAudioPlaying = false;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
Future<List<dynamic>> fetchLatihanData(int id_submateri) async {
|
|
final response = await http.get(
|
|
Uri.parse('${BaseUrl.baseUrl}/latihan/$id_submateri'),
|
|
);
|
|
|
|
if (response.statusCode == 200) {
|
|
return json.decode(response.body)['data'];
|
|
} else {
|
|
throw Exception('Failed to load latihan');
|
|
}
|
|
}
|
|
|
|
|
|
// Fungsi untuk memulai timer dan mulai merekam
|
|
void startTimer() {
|
|
setState(() {
|
|
isRecording = true;
|
|
timer = 10;
|
|
timerText = timer.toString();
|
|
});
|
|
|
|
countdownTimer = Timer.periodic(Duration(seconds: 1), (timer) {
|
|
if (this.timer > 0) {
|
|
setState(() {
|
|
this.timer--;
|
|
timerText = this.timer.toString();
|
|
});
|
|
} else {
|
|
countdownTimer.cancel();
|
|
stopRecording();
|
|
}
|
|
});
|
|
|
|
// Mulai merekam
|
|
_startRecording();
|
|
}
|
|
|
|
|
|
Future<void> _startRecording() async {
|
|
if (await Permission.microphone.request().isGranted) {
|
|
final directory = Directory.systemTemp;
|
|
final fileName = DateTime.now().millisecondsSinceEpoch.toString();
|
|
final path = '${directory.path}/record_voice_$fileName.m4a'; // Pastikan file disimpan dengan ekstensi .m4a
|
|
await _record.start(
|
|
const RecordConfig(),
|
|
path: path,
|
|
);
|
|
setState(() {
|
|
recordedFilePath = path;
|
|
});
|
|
}
|
|
}
|
|
|
|
// Future<void> uploadRecording(String filePath, int subMateriId, int idLatihan) async {
|
|
// SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
// String? authToken = prefs.getString('token');
|
|
// var uri = Uri.parse('${BaseUrl.baseUrl}/upload_audio');
|
|
// var request = http.MultipartRequest('POST', uri);
|
|
|
|
// final extension = filePath.split('.').last.toLowerCase();
|
|
// if (!['m4a', 'mp3', 'wav'].contains(extension)) {
|
|
// print("File format is not supported. Please use m4a, mp3, or wav.");
|
|
// return;
|
|
// }
|
|
|
|
|
|
// var file = await http.MultipartFile.fromPath(
|
|
// 'recorded_audio',
|
|
// filePath,
|
|
// contentType: MediaType('audio', 'm4a'),
|
|
// );
|
|
// request.files.add(file);
|
|
|
|
// // Tambahkan sub_materi_id dan id_latihan
|
|
// request.fields['sub_materi_id'] = subMateriId.toString();
|
|
// request.fields['id_latihan'] = idLatihan.toString();
|
|
|
|
// request.headers.addAll({
|
|
// 'Authorization': 'Bearer $authToken',
|
|
// 'Accept': 'application/json',
|
|
// });
|
|
|
|
// try {
|
|
// var response = await request.send();
|
|
// var responseBody = await response.stream.bytesToString();
|
|
|
|
// if (response.statusCode == 200) {
|
|
// print('Upload berhasil!');
|
|
// print('Response body: $responseBody');
|
|
// } else {
|
|
// print('Gagal mengupload file: ${response.statusCode}');
|
|
// print('Response body: $responseBody');
|
|
// }
|
|
// } catch (e) {
|
|
// print('Terjadi kesalahan saat mengupload: $e');
|
|
// }
|
|
// }
|
|
|
|
|
|
Future<void> uploadRecording(String filePath, int subMateriId, int idLatihan) async {
|
|
SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
String? authToken = prefs.getString('token');
|
|
var uri = Uri.parse('${BaseUrl.baseUrl}/upload_audio');
|
|
var request = http.MultipartRequest('POST', uri);
|
|
|
|
final extension = filePath.split('.').last.toLowerCase();
|
|
if (!['m4a', 'mp3', 'wav'].contains(extension)) {
|
|
print("File format is not supported. Please use m4a, mp3, or wav.");
|
|
return;
|
|
}
|
|
|
|
var file = await http.MultipartFile.fromPath(
|
|
'recorded_audio',
|
|
filePath,
|
|
contentType: MediaType('audio', 'm4a'),
|
|
);
|
|
request.files.add(file);
|
|
|
|
request.fields['sub_materi_id'] = subMateriId.toString();
|
|
request.fields['id_latihan'] = idLatihan.toString();
|
|
|
|
request.headers.addAll({
|
|
'Authorization': 'Bearer $authToken',
|
|
'Accept': 'application/json',
|
|
});
|
|
|
|
try {
|
|
var response = await request.send();
|
|
var responseBody = await response.stream.bytesToString();
|
|
|
|
if (response.statusCode == 200) {
|
|
print('Upload berhasil!');
|
|
print('Response body: $responseBody');
|
|
|
|
// Parse response body
|
|
final decoded = json.decode(responseBody);
|
|
|
|
// Ambil id dari progress
|
|
final int progressId = decoded['progress']['id'];
|
|
|
|
// Simpan id ke SharedPreferences
|
|
await storeProgressId(progressId);
|
|
} else {
|
|
print('Gagal mengupload file: ${response.statusCode}');
|
|
print('Response body: $responseBody');
|
|
}
|
|
} catch (e) {
|
|
print('Terjadi kesalahan saat mengupload: $e');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
Future<void> stopRecording() async {
|
|
await _record.stop();
|
|
// await uploadRecording(recordedFilePath!);
|
|
|
|
// Check if the widget is still mounted before calling setState
|
|
if (mounted) {
|
|
setState(() {
|
|
isRecording = false;
|
|
});
|
|
}
|
|
|
|
// Get the latihan id from the latihanData list using the current step
|
|
final latihanList = await latihanData; // Fetch the data again if not already fetched
|
|
final latihan = latihanList[widget.currentStep]; // Get the latihan at current step
|
|
final idLatihan = latihan['id']; // Use the 'id' from latihan data
|
|
|
|
|
|
// Debug print to show the file path and latihan ID
|
|
debugPrint('ID Latihan: $idLatihan');
|
|
debugPrint('File Path: $recordedFilePath');
|
|
|
|
// After stopping the recording, save the audio file name/path to the backend
|
|
if (recordedFilePath != null) {
|
|
// saveRecordedAudioName(idLatihan, recordedFilePath!); // Pass the latihan ID to the save function
|
|
await uploadRecording(recordedFilePath!, widget.id, idLatihan);
|
|
}
|
|
}
|
|
|
|
Future<void> storeProgressId(int idProgress) async {
|
|
SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
List<int> progressIds = prefs.getStringList('progressIds')?.map((e) => int.parse(e)).toList() ?? [];
|
|
progressIds.add(idProgress); // Add the new id to the list
|
|
|
|
// Store the list as a string (in SharedPreferences)
|
|
await prefs.setStringList('progressIds', progressIds.map((e) => e.toString()).toList());
|
|
debugPrint("Stored progress IDs: $progressIds");
|
|
}
|
|
|
|
void stopTimer() {
|
|
countdownTimer.cancel();
|
|
stopRecording();
|
|
setState(() {
|
|
isRecording = false;
|
|
timer = 10;
|
|
timerText = timer.toString();
|
|
});
|
|
}
|
|
|
|
|
|
void playAudio(String audioUrl) async {
|
|
|
|
await _audioPlayer.play(AssetSource(audioUrl));
|
|
setState(() {
|
|
isAudioPlaying = true;
|
|
});
|
|
print("Audio playing...");
|
|
}
|
|
|
|
Future<void> clearProgressIds() async {
|
|
SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
await prefs.remove('progressIds');
|
|
debugPrint("progressIds cleared from SharedPreferences.");
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.close),
|
|
onPressed: () async {
|
|
await clearProgressIds(); // Hapus data sebelum navigasi
|
|
context.go('/navigasi');
|
|
},
|
|
),
|
|
actions: [
|
|
Expanded(
|
|
child: Center(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(3, (index) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 4.0),
|
|
child: CircleAvatar(
|
|
radius: 12,
|
|
backgroundColor: index <= widget.currentStep
|
|
? secondPrimaryColor
|
|
: Colors.grey,
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
body: FutureBuilder<List<dynamic>>(
|
|
future: latihanData,
|
|
builder: (context, snapshot) {
|
|
if (snapshot.connectionState == ConnectionState.waiting) {
|
|
return Center(child: CircularProgressIndicator());
|
|
} else if (snapshot.hasError) {
|
|
return Center(child: Text('Error: ${snapshot.error}'));
|
|
} else if (!snapshot.hasData || snapshot.data == null || snapshot.data!.isEmpty) {
|
|
return Center(child: Text('Tidak ada latihan tersedia'));
|
|
}
|
|
|
|
|
|
final latihanList = snapshot.data!;
|
|
final latihan = latihanList[widget.currentStep];
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
SizedBox(height: 10),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.lightbulb,
|
|
color: secondPrimaryColor,
|
|
size: 40,
|
|
),
|
|
const SizedBox(width: 5),
|
|
Container(
|
|
padding: const EdgeInsets.all(5),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: Colors.grey,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Dengarkan, ikuti dan rekam',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: blackColor,
|
|
),
|
|
textAlign: TextAlign.start,
|
|
),
|
|
Text(
|
|
'pelafalanmu terhadap lafadz ini',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: blackColor,
|
|
),
|
|
textAlign: TextAlign.start,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 5),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 35.0, vertical: 40.0),
|
|
margin: const EdgeInsets.symmetric(vertical: 10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(15),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
spreadRadius: 5,
|
|
blurRadius: 10,
|
|
),
|
|
],
|
|
color: Colors.white,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.only(bottom: 40.0),
|
|
child: Text(
|
|
"Ucapkan potongan kata ini",
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: secondPrimaryColor,
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
latihan['potongan_ayat'],
|
|
style: TextStyle(
|
|
fontSize: 19,
|
|
color: blackColor,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 20),
|
|
Text(
|
|
latihan['latin_text'],
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
color: Colors.black,
|
|
fontStyle: FontStyle.italic,
|
|
),
|
|
),
|
|
const SizedBox(height: 30),
|
|
IconButton(
|
|
onPressed: isRecording ? null : () {
|
|
|
|
playAudio('audio/${latihan['correct_audio']}');
|
|
},
|
|
icon: Icon(
|
|
isAudioPlaying ? Icons.volume_up : Icons.volume_down,
|
|
size: 50,
|
|
color: isRecording ? greysColor : secondPrimaryColor,
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 5.0),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
|
child: ElevatedButton(
|
|
onPressed: isAudioPlaying ? null : () {
|
|
if (!isRecording) {
|
|
startTimer();
|
|
} else {
|
|
stopTimer();
|
|
|
|
context.go(
|
|
'/pelafalan',
|
|
extra: {
|
|
'id': widget.id,
|
|
'currentStep': widget.currentStep,
|
|
'latihanData': snapshot.data,
|
|
'recordedFilePath': recordedFilePath,
|
|
},
|
|
);
|
|
}
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: isAudioPlaying ? greysColor : secondPrimaryColor,
|
|
shape: const CircleBorder(),
|
|
padding: const EdgeInsets.all(10),
|
|
),
|
|
child: Icon(
|
|
isRecording ? Icons.stop : Icons.mic,
|
|
size: 40,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_record.dispose();
|
|
_audioPlayer.dispose();
|
|
if (countdownTimer.isActive) {
|
|
countdownTimer.cancel(); // Cancel the timer
|
|
}
|
|
super.dispose();
|
|
}
|
|
}
|