mirror of
https://gitlab.com/Zer0interrupt/recipe-manager.git
synced 2026-11-02 07:28:25 -05:00
551 lines
21 KiB
Dart
551 lines
21 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:wakelock_plus/wakelock_plus.dart';
|
|
import '../../core/constants/app_theme.dart';
|
|
import '../../core/models/recipe.dart';
|
|
|
|
class DetectedDuration {
|
|
final int totalMinutes;
|
|
final String label;
|
|
|
|
DetectedDuration({required this.totalMinutes, required this.label});
|
|
}
|
|
|
|
class CookModeScreen extends StatefulWidget {
|
|
final Recipe recipe;
|
|
|
|
const CookModeScreen({super.key, required this.recipe});
|
|
|
|
@override
|
|
State<CookModeScreen> createState() => _CookModeScreenState();
|
|
}
|
|
|
|
class _CookModeScreenState extends State<CookModeScreen> {
|
|
int _currentStepIndex = 0;
|
|
double _scaleMultiplier = 1.0;
|
|
final PageController _pageController = PageController();
|
|
|
|
// Countdown Timer State
|
|
Timer? _activeTimer;
|
|
int _timerSecondsRemaining = 0;
|
|
bool _isTimerRunning = false;
|
|
int _currentTimerMinutes = 0;
|
|
|
|
// Stopwatch Mode State
|
|
Timer? _stopwatchTimer;
|
|
int _stopwatchSeconds = 0;
|
|
bool _isStopwatchRunning = false;
|
|
bool _showStopwatch = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// Keep screen on during cooking session so hands don't need to touch phone
|
|
WakelockPlus.enable();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
WakelockPlus.disable();
|
|
_activeTimer?.cancel();
|
|
_stopwatchTimer?.cancel();
|
|
_pageController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _startTimer(int minutes) {
|
|
_activeTimer?.cancel();
|
|
HapticFeedback.mediumImpact();
|
|
setState(() {
|
|
_currentTimerMinutes = minutes;
|
|
_timerSecondsRemaining = minutes * 60;
|
|
_isTimerRunning = true;
|
|
});
|
|
|
|
_activeTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
|
|
if (_timerSecondsRemaining <= 1) {
|
|
timer.cancel();
|
|
setState(() {
|
|
_isTimerRunning = false;
|
|
_timerSecondsRemaining = 0;
|
|
});
|
|
HapticFeedback.vibrate();
|
|
if (mounted) {
|
|
showDialog(
|
|
context: context,
|
|
builder: (ctx) => AlertDialog(
|
|
backgroundColor: AppTheme.surfaceElevated,
|
|
title: const Text('Timer Finished! ⏰'),
|
|
content: Text('Your ${minutes}-minute timer has ended.'),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(ctx),
|
|
child: const Text('OK', style: TextStyle(color: AppTheme.primary)),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} else {
|
|
setState(() {
|
|
_timerSecondsRemaining--;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
void _toggleStopwatch() {
|
|
HapticFeedback.lightImpact();
|
|
if (_isStopwatchRunning) {
|
|
_stopwatchTimer?.cancel();
|
|
setState(() => _isStopwatchRunning = false);
|
|
} else {
|
|
setState(() => _isStopwatchRunning = true);
|
|
_stopwatchTimer = Timer.periodic(const Duration(seconds: 1), (_) {
|
|
if (mounted) {
|
|
setState(() => _stopwatchSeconds++);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
void _resetStopwatch() {
|
|
HapticFeedback.lightImpact();
|
|
_stopwatchTimer?.cancel();
|
|
setState(() {
|
|
_isStopwatchRunning = false;
|
|
_stopwatchSeconds = 0;
|
|
});
|
|
}
|
|
|
|
String _formatTimerTime(int totalSeconds) {
|
|
final h = totalSeconds ~/ 3600;
|
|
final m = (totalSeconds % 3600) ~/ 60;
|
|
final s = totalSeconds % 60;
|
|
if (h > 0) {
|
|
return '${h.toString().padLeft(2, '0')}:${m.toString().padLeft(2, '0')}:${s.toString().padLeft(2, '0')}';
|
|
}
|
|
return '${m.toString().padLeft(2, '0')}:${s.toString().padLeft(2, '0')}';
|
|
}
|
|
|
|
List<DetectedDuration> _detectDurationsInStep(String text) {
|
|
final List<DetectedDuration> results = [];
|
|
final regex = RegExp(
|
|
r'(?:for\s+)?(\d+(?:\.\d+)?)\s*(?:-|to)?\s*(\d+(?:\.\d+)?)?\s*(hours?|hrs?|minutes?|mins?|seconds?|secs?)\b',
|
|
caseSensitive: false,
|
|
);
|
|
|
|
final matches = regex.allMatches(text);
|
|
for (final match in matches) {
|
|
final firstNum = match.group(1);
|
|
final secondNum = match.group(2);
|
|
final unit = match.group(3)?.toLowerCase() ?? '';
|
|
|
|
final numStr = secondNum ?? firstNum;
|
|
if (numStr == null) continue;
|
|
final val = double.tryParse(numStr);
|
|
if (val == null || val <= 0) continue;
|
|
|
|
int minutes = 0;
|
|
if (unit.startsWith('h')) {
|
|
minutes = (val * 60).round();
|
|
} else if (unit.startsWith('s')) {
|
|
minutes = (val / 60).ceil();
|
|
if (minutes < 1) minutes = 1;
|
|
} else {
|
|
minutes = val.round();
|
|
}
|
|
|
|
if (minutes > 0 && !results.any((d) => d.totalMinutes == minutes)) {
|
|
results.add(DetectedDuration(
|
|
totalMinutes: minutes,
|
|
label: '${match.group(0)?.trim()}',
|
|
));
|
|
}
|
|
}
|
|
return results;
|
|
}
|
|
|
|
void _showIngredientsSheet() {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
backgroundColor: Colors.transparent,
|
|
isScrollControlled: true,
|
|
builder: (ctx) => DraggableScrollableSheet(
|
|
initialChildSize: 0.65,
|
|
minChildSize: 0.4,
|
|
maxChildSize: 0.9,
|
|
builder: (_, controller) => Container(
|
|
decoration: const BoxDecoration(
|
|
color: AppTheme.surfaceElevated,
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
|
),
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Center(
|
|
child: Container(
|
|
width: 40,
|
|
height: 4,
|
|
margin: const EdgeInsets.only(bottom: 16),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.border,
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
const Icon(Icons.restaurant_menu_rounded, color: AppTheme.primary, size: 22),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'Ingredients (${_scaleMultiplier}x)',
|
|
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
|
|
),
|
|
const Spacer(),
|
|
IconButton(
|
|
icon: const Icon(Icons.close, size: 20),
|
|
onPressed: () => Navigator.pop(ctx),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
Expanded(
|
|
child: widget.recipe.ingredients.isEmpty
|
|
? const Center(child: Text('No ingredients found.', style: TextStyle(color: AppTheme.textMuted)))
|
|
: ListView.separated(
|
|
controller: controller,
|
|
itemCount: widget.recipe.ingredients.length,
|
|
separatorBuilder: (_, __) => const Divider(color: AppTheme.border, height: 1),
|
|
itemBuilder: (c, idx) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 10),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('• ', style: TextStyle(color: AppTheme.primary, fontSize: 16)),
|
|
Expanded(
|
|
child: Text(
|
|
widget.recipe.ingredients[idx],
|
|
style: const TextStyle(fontSize: 15, color: Colors.white, height: 1.3),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final totalSteps = widget.recipe.instructions.isNotEmpty ? widget.recipe.instructions.length : 1;
|
|
final currentStepText = (widget.recipe.instructions.isNotEmpty && _currentStepIndex < widget.recipe.instructions.length)
|
|
? widget.recipe.instructions[_currentStepIndex]
|
|
: '';
|
|
final detectedTimers = _detectDurationsInStep(currentStepText);
|
|
|
|
return Scaffold(
|
|
backgroundColor: Colors.black,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.black,
|
|
title: Text(widget.recipe.title, maxLines: 1, overflow: TextOverflow.ellipsis),
|
|
actions: [
|
|
// Ingredients Peek Sheet Button
|
|
IconButton(
|
|
tooltip: 'View Ingredients',
|
|
icon: const Icon(Icons.restaurant_menu_rounded, color: AppTheme.secondary),
|
|
onPressed: _showIngredientsSheet,
|
|
),
|
|
// Stopwatch Toggle Button
|
|
IconButton(
|
|
tooltip: 'Stopwatch',
|
|
icon: Icon(
|
|
Icons.timer_outlined,
|
|
color: _isStopwatchRunning || _showStopwatch ? AppTheme.primary : Colors.white70,
|
|
),
|
|
onPressed: () {
|
|
setState(() {
|
|
_showStopwatch = !_showStopwatch;
|
|
});
|
|
},
|
|
),
|
|
// Scale selector
|
|
PopupMenuButton<double>(
|
|
initialValue: _scaleMultiplier,
|
|
tooltip: 'Scale Servings',
|
|
icon: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.surfaceElevated,
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: AppTheme.border),
|
|
),
|
|
child: Text(
|
|
'${_scaleMultiplier}x',
|
|
style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13, color: AppTheme.primary),
|
|
),
|
|
),
|
|
onSelected: (val) => setState(() => _scaleMultiplier = val),
|
|
itemBuilder: (ctx) => const [
|
|
PopupMenuItem(value: 0.5, child: Text('0.5x Servings')),
|
|
PopupMenuItem(value: 1.0, child: Text('1.0x (Original)')),
|
|
PopupMenuItem(value: 1.5, child: Text('1.5x Servings')),
|
|
PopupMenuItem(value: 2.0, child: Text('2.0x Double Servings')),
|
|
],
|
|
),
|
|
const SizedBox(width: 8),
|
|
],
|
|
),
|
|
body: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
// Top: Active Countdown Timer Pill (if active)
|
|
if (_isTimerRunning || _timerSecondsRemaining > 0)
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.primary.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: AppTheme.primary),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.timer_rounded, color: AppTheme.primary),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
'Timer: ${_formatTimerTime(_timerSecondsRemaining)}',
|
|
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w800, color: AppTheme.primary),
|
|
),
|
|
const Spacer(),
|
|
IconButton(
|
|
icon: const Icon(Icons.stop_circle_rounded, color: AppTheme.danger),
|
|
onPressed: () {
|
|
_activeTimer?.cancel();
|
|
setState(() {
|
|
_isTimerRunning = false;
|
|
_timerSecondsRemaining = 0;
|
|
});
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Top: Stopwatch Pill (if shown or running)
|
|
if (_showStopwatch || _isStopwatchRunning || _stopwatchSeconds > 0)
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.surfaceElevated,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: AppTheme.secondary),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.av_timer_rounded, color: AppTheme.secondary, size: 22),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
'Stopwatch: ${_formatTimerTime(_stopwatchSeconds)}',
|
|
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w800, color: AppTheme.secondary),
|
|
),
|
|
const Spacer(),
|
|
IconButton(
|
|
visualDensity: VisualDensity.compact,
|
|
icon: Icon(
|
|
_isStopwatchRunning ? Icons.pause_circle_filled_rounded : Icons.play_circle_fill_rounded,
|
|
color: AppTheme.primary,
|
|
size: 26,
|
|
),
|
|
onPressed: _toggleStopwatch,
|
|
),
|
|
IconButton(
|
|
visualDensity: VisualDensity.compact,
|
|
icon: const Icon(Icons.restart_alt_rounded, color: AppTheme.textMuted, size: 22),
|
|
onPressed: _resetStopwatch,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Step Progress Bar
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(4),
|
|
child: LinearProgressIndicator(
|
|
value: (totalSteps > 0) ? (_currentStepIndex + 1) / totalSteps : 1.0,
|
|
backgroundColor: AppTheme.surfaceElevated,
|
|
color: AppTheme.primary,
|
|
minHeight: 6,
|
|
),
|
|
),
|
|
),
|
|
|
|
// Step Carousel (Large readable text)
|
|
Expanded(
|
|
child: widget.recipe.instructions.isEmpty
|
|
? const Center(child: Text('No instructions found for this recipe.', style: TextStyle(color: AppTheme.textMuted)))
|
|
: PageView.builder(
|
|
controller: _pageController,
|
|
itemCount: totalSteps,
|
|
onPageChanged: (i) => setState(() => _currentStepIndex = i),
|
|
itemBuilder: (ctx, index) {
|
|
final stepText = widget.recipe.instructions[index];
|
|
final stepDurations = _detectDurationsInStep(stepText);
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.all(24.0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
'STEP ${index + 1} OF $totalSteps',
|
|
style: const TextStyle(
|
|
color: AppTheme.primary,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w800,
|
|
letterSpacing: 1.2,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
stepText,
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 22,
|
|
height: 1.5,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
// Smart Auto-detected Timers for this step
|
|
if (stepDurations.isNotEmpty) ...[
|
|
const SizedBox(height: 20),
|
|
Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: stepDurations.map((d) {
|
|
return ActionChip(
|
|
backgroundColor: AppTheme.primary.withOpacity(0.18),
|
|
side: const BorderSide(color: AppTheme.primary),
|
|
avatar: const Icon(Icons.bolt_rounded, size: 16, color: AppTheme.primary),
|
|
label: Text(
|
|
'Start ${d.totalMinutes}m Timer',
|
|
style: const TextStyle(
|
|
color: AppTheme.primary,
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
onPressed: () => _startTimer(d.totalMinutes),
|
|
);
|
|
}).toList(),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
|
|
// Bottom Quick Timers & Nav Buttons
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
|
|
decoration: const BoxDecoration(
|
|
color: AppTheme.surface,
|
|
border: Border(top: BorderSide(color: AppTheme.border)),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// Quick timer shortcuts
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Text('Quick Timer: ', style: TextStyle(fontSize: 12, color: AppTheme.textMuted)),
|
|
_buildTimerChip(5),
|
|
const SizedBox(width: 8),
|
|
_buildTimerChip(10),
|
|
const SizedBox(width: 8),
|
|
_buildTimerChip(15),
|
|
const SizedBox(width: 8),
|
|
_buildTimerChip(30),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// Nav Buttons
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: OutlinedButton.icon(
|
|
onPressed: _currentStepIndex > 0
|
|
? () => _pageController.previousPage(duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
|
|
: null,
|
|
icon: const Icon(Icons.arrow_back_rounded),
|
|
label: const Text('Previous'),
|
|
),
|
|
),
|
|
const SizedBox(width: 14),
|
|
Expanded(
|
|
child: ElevatedButton.icon(
|
|
onPressed: _currentStepIndex < totalSteps - 1
|
|
? () => _pageController.nextPage(duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
|
|
: () => Navigator.pop(context),
|
|
icon: Icon(_currentStepIndex < totalSteps - 1 ? Icons.arrow_forward_rounded : Icons.check_circle_rounded),
|
|
label: Text(_currentStepIndex < totalSteps - 1 ? 'Next Step' : 'Finish'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTimerChip(int minutes) {
|
|
return InkWell(
|
|
onTap: () => _startTimer(minutes),
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.surfaceElevated,
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: AppTheme.border),
|
|
),
|
|
child: Text(
|
|
'${minutes}m',
|
|
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: AppTheme.primary),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|