Preserve Flutter mirror-os codebase
This commit is contained in:
Chris
@@ -0,0 +1,512 @@
|
||||
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';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user