Chris
513 lines
17 KiB
Dart
513 lines
17 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:media_kit_video/media_kit_video.dart';
|
|
import 'package:mirror_protocol/mirror_protocol.dart';
|
|
import 'package:mirror_ui/mirror_ui.dart';
|
|
import '../providers/display_state_provider.dart';
|
|
import '../providers/player_provider.dart';
|
|
|
|
class WorkoutScreen extends ConsumerWidget {
|
|
const WorkoutScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final workout = ref.watch(displayStateProvider.select((s) => s.workout));
|
|
final program = ref.watch(displayStateProvider.select((s) => s.program));
|
|
final playback = ref.watch(displayStateProvider.select((s) => s.playback));
|
|
|
|
// Program session takes priority if active
|
|
if (program != null && program.phase != 'completed') {
|
|
return _buildProgramSession(context, ref, program, playback);
|
|
}
|
|
|
|
if (workout == null || workout.phase == WorkoutPhase.idle) {
|
|
return _buildIdle(context);
|
|
}
|
|
|
|
return switch (workout.phase) {
|
|
WorkoutPhase.browsing => _buildBrowsing(context),
|
|
WorkoutPhase.playing => _buildPlaying(context, workout, playback),
|
|
WorkoutPhase.resting => _buildResting(context, workout),
|
|
WorkoutPhase.completed => _buildCompleted(context),
|
|
_ => _buildIdle(context),
|
|
};
|
|
}
|
|
|
|
// --- Program session rendering ---
|
|
|
|
Widget _buildProgramSession(
|
|
BuildContext context,
|
|
WidgetRef ref,
|
|
ProgramSessionState program,
|
|
PlaybackState? playback,
|
|
) {
|
|
return switch (program.phase) {
|
|
'playing' => _buildProgramVideo(context, ref, program, playback),
|
|
'youtube' => _buildProgramYouTube(context, program),
|
|
'instruction' => _buildProgramInstruction(context, program),
|
|
_ => _buildCompleted(context),
|
|
};
|
|
}
|
|
|
|
Widget _buildProgramVideo(
|
|
BuildContext context,
|
|
WidgetRef ref,
|
|
ProgramSessionState program,
|
|
PlaybackState? playback,
|
|
) {
|
|
if (playback == null) return _buildIdle(context);
|
|
|
|
final progress = playback.duration.inMilliseconds > 0
|
|
? playback.position.inMilliseconds / playback.duration.inMilliseconds
|
|
: 0.0;
|
|
|
|
return Container(
|
|
color: Colors.black,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
Consumer(
|
|
builder: (context, ref, _) {
|
|
final controller = ref.watch(videoControllerProvider);
|
|
return Video(controller: controller);
|
|
},
|
|
),
|
|
if (playback.isPlaying == false)
|
|
const Center(
|
|
child: Icon(Icons.pause_circle_filled, size: 120, color: Colors.white70),
|
|
),
|
|
// Program info top-right
|
|
Positioned(
|
|
top: 30,
|
|
right: 30,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black54,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
program.programName,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: MirrorTheme.accent,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'Set ${program.currentSet}/${program.totalSets}',
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Bottom overlay with title and progress
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(40),
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [Colors.transparent, Colors.black87],
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
playback.title,
|
|
style: Theme.of(context).textTheme.headlineMedium,
|
|
),
|
|
const SizedBox(height: 12),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(2),
|
|
child: LinearProgressIndicator(
|
|
value: progress,
|
|
minHeight: 4,
|
|
backgroundColor: Colors.white24,
|
|
color: MirrorTheme.accent,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'${_formatDuration(playback.position)} / ${_formatDuration(playback.duration)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
fontFamily: MirrorTheme.fontMono,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
_buildProgramProgressBar(context, program),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProgramYouTube(BuildContext context, ProgramSessionState program) {
|
|
return Container(
|
|
color: MirrorTheme.background,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 80),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.smart_display, size: 64, color: MirrorTheme.accent),
|
|
const SizedBox(height: 24),
|
|
Text(
|
|
program.workoutName,
|
|
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
|
color: MirrorTheme.textSecondary,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 48),
|
|
TimerDisplay(seconds: program.timerRemaining),
|
|
const SizedBox(height: 32),
|
|
Text(
|
|
'Set ${program.currentSet}/${program.totalSets}',
|
|
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
|
color: MirrorTheme.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
'Follow along with YouTube reference',
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
color: MirrorTheme.textMuted,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Program progress at bottom
|
|
Positioned(
|
|
bottom: 40,
|
|
left: 40,
|
|
right: 40,
|
|
child: _buildProgramProgressBar(context, program),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProgramInstruction(BuildContext context, ProgramSessionState program) {
|
|
return Container(
|
|
color: MirrorTheme.background,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 80),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
program.workoutName,
|
|
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
|
color: MirrorTheme.textSecondary,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 48),
|
|
TimerDisplay(seconds: program.timerRemaining),
|
|
const SizedBox(height: 32),
|
|
Text(
|
|
'Set ${program.currentSet}/${program.totalSets}',
|
|
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
|
color: MirrorTheme.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
'${program.currentExerciseIndex + 1} of ${program.exercises.length}',
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
color: MirrorTheme.textMuted,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Program progress at bottom
|
|
Positioned(
|
|
bottom: 40,
|
|
left: 40,
|
|
right: 40,
|
|
child: _buildProgramProgressBar(context, program),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProgramProgressBar(BuildContext context, ProgramSessionState program) {
|
|
final total = program.exercises.length;
|
|
if (total == 0) return const SizedBox.shrink();
|
|
|
|
return ClipRRect(
|
|
borderRadius: BorderRadius.circular(4),
|
|
child: SizedBox(
|
|
height: 8,
|
|
child: Row(
|
|
children: List.generate(total, (i) {
|
|
final Color color;
|
|
if (i < program.currentExerciseIndex) {
|
|
color = MirrorTheme.success; // completed
|
|
} else if (i == program.currentExerciseIndex) {
|
|
color = MirrorTheme.accent; // current
|
|
} else {
|
|
color = MirrorTheme.surfaceLight; // remaining
|
|
}
|
|
return Expanded(
|
|
child: Container(
|
|
margin: EdgeInsets.only(right: i < total - 1 ? 2 : 0),
|
|
color: color,
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// --- Standard workout rendering ---
|
|
|
|
Widget _buildIdle(BuildContext context) {
|
|
return Container(
|
|
color: MirrorTheme.background,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.fitness_center, size: 64, color: MirrorTheme.textMuted),
|
|
const SizedBox(height: 24),
|
|
Text(
|
|
'Browse workouts on your phone',
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
color: MirrorTheme.textMuted,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'mirror.local:9090',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: MirrorTheme.accent,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBrowsing(BuildContext context) {
|
|
return Container(
|
|
color: MirrorTheme.background,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.phone_android, size: 48, color: MirrorTheme.accent),
|
|
const SizedBox(height: 24),
|
|
Text(
|
|
'Select a workout on your phone',
|
|
style: Theme.of(context).textTheme.headlineMedium,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPlaying(BuildContext context, WorkoutSessionState workout, PlaybackState? playback) {
|
|
if (playback == null) return _buildIdle(context);
|
|
|
|
final progress = playback.duration.inMilliseconds > 0
|
|
? playback.position.inMilliseconds / playback.duration.inMilliseconds
|
|
: 0.0;
|
|
|
|
return Container(
|
|
color: Colors.black,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
// Real video output
|
|
Consumer(
|
|
builder: (context, ref, _) {
|
|
final controller = ref.watch(videoControllerProvider);
|
|
return Video(controller: controller);
|
|
},
|
|
),
|
|
|
|
// Paused indicator
|
|
if (!playback.isPlaying)
|
|
const Center(
|
|
child: Icon(Icons.pause_circle_filled, size: 120, color: Colors.white70),
|
|
),
|
|
|
|
// Queue indicator
|
|
if (workout.queue.length > 1)
|
|
Positioned(
|
|
top: 30,
|
|
right: 30,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black54,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Text(
|
|
'${workout.currentIndex + 1} / ${workout.queue.length}',
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
),
|
|
),
|
|
|
|
// Bottom overlay
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(40),
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [Colors.transparent, Colors.black87],
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
playback.title,
|
|
style: Theme.of(context).textTheme.headlineMedium,
|
|
),
|
|
const SizedBox(height: 12),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(2),
|
|
child: LinearProgressIndicator(
|
|
value: progress,
|
|
minHeight: 4,
|
|
backgroundColor: Colors.white24,
|
|
color: MirrorTheme.accent,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'${_formatDuration(playback.position)} / ${_formatDuration(playback.duration)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
fontFamily: MirrorTheme.fontMono,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildResting(BuildContext context, WorkoutSessionState workout) {
|
|
final nextTitle = workout.currentIndex < workout.queue.length
|
|
? workout.queue[workout.currentIndex].title
|
|
: '';
|
|
|
|
return Container(
|
|
color: MirrorTheme.background,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
'REST',
|
|
style: Theme.of(context).textTheme.labelLarge?.copyWith(
|
|
color: MirrorTheme.accent,
|
|
letterSpacing: 8,
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
const SizedBox(height: 40),
|
|
TimerDisplay(seconds: workout.restRemaining),
|
|
const SizedBox(height: 40),
|
|
if (nextTitle.isNotEmpty)
|
|
Text(
|
|
'Up next: $nextTitle',
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
color: MirrorTheme.textMuted,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildCompleted(BuildContext context) {
|
|
return Container(
|
|
color: MirrorTheme.background,
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.check_circle, size: 96, color: MirrorTheme.success),
|
|
const SizedBox(height: 24),
|
|
Text(
|
|
'DONE',
|
|
style: Theme.of(context).textTheme.displaySmall?.copyWith(
|
|
color: MirrorTheme.success,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
'Session complete',
|
|
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
|
color: MirrorTheme.textMuted,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
String _formatDuration(Duration d) {
|
|
final minutes = d.inMinutes;
|
|
final seconds = (d.inSeconds % 60).toString().padLeft(2, '0');
|
|
return '$minutes:$seconds';
|
|
}
|
|
}
|