8926de58e5
- Extract player UI into src/features/player/ components (TimerRing, BurnBar, etc.) - Add transparent stack headers for workout/[id] and program/[id] screens - Refactor workout/[id], program/[id], complete/[id] screens - Add player feature tests and useTimer integration tests - Add data layer exports and test setup improvements
550 lines
17 KiB
TypeScript
550 lines
17 KiB
TypeScript
/**
|
|
* TabataFit Player Screen
|
|
* Thin orchestrator — all UI extracted to src/features/player/
|
|
* FORCE DARK — always uses darkColors regardless of system theme
|
|
*/
|
|
|
|
import React, { useRef, useEffect, useCallback, useState } from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Pressable,
|
|
Animated,
|
|
StatusBar,
|
|
useWindowDimensions,
|
|
} from 'react-native'
|
|
import { useRouter, useLocalSearchParams } from 'expo-router'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import { BlurView } from 'expo-blur'
|
|
import { useKeepAwake } from 'expo-keep-awake'
|
|
import { Icon } from '@/src/shared/components/Icon'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { useTimer } from '@/src/shared/hooks/useTimer'
|
|
import { useHaptics } from '@/src/shared/hooks/useHaptics'
|
|
import { useAudio } from '@/src/shared/hooks/useAudio'
|
|
import { useMusicPlayer } from '@/src/shared/hooks/useMusicPlayer'
|
|
import { useActivityStore } from '@/src/shared/stores'
|
|
import { getWorkoutById, getTrainerById, getWorkoutAccentColor } from '@/src/shared/data'
|
|
import { useTranslatedWorkout } from '@/src/shared/data/useTranslatedData'
|
|
import { useWatchSync } from '@/src/features/watch'
|
|
|
|
import { track } from '@/src/shared/services/analytics'
|
|
import { VideoPlayer } from '@/src/shared/components/VideoPlayer'
|
|
import { PHASE_COLORS, GRADIENTS, darkColors } from '@/src/shared/theme'
|
|
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
|
import { SPACING } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
|
|
import {
|
|
TimerRing,
|
|
PhaseIndicator,
|
|
ExerciseDisplay,
|
|
RoundIndicator,
|
|
PlayerControls,
|
|
BurnBar,
|
|
StatsOverlay,
|
|
CoachEncouragement,
|
|
NowPlaying,
|
|
} from '@/src/features/player'
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
|
|
function formatTime(seconds: number) {
|
|
const mins = Math.floor(seconds / 60)
|
|
const secs = seconds % 60
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
// ─── Main Screen ─────────────────────────────────────────────────────────────
|
|
|
|
export default function PlayerScreen() {
|
|
useKeepAwake()
|
|
const router = useRouter()
|
|
const { id } = useLocalSearchParams<{ id: string }>()
|
|
const insets = useSafeAreaInsets()
|
|
const haptics = useHaptics()
|
|
const { t } = useTranslation()
|
|
const { width: SCREEN_WIDTH } = useWindowDimensions()
|
|
const addWorkoutResult = useActivityStore((s) => s.addWorkoutResult)
|
|
|
|
const colors = darkColors
|
|
|
|
const rawWorkout = getWorkoutById(id ?? '1')
|
|
const workout = useTranslatedWorkout(rawWorkout)
|
|
const trainer = rawWorkout ? getTrainerById(rawWorkout.trainerId) : undefined
|
|
const trainerColor = getWorkoutAccentColor(id ?? '1')
|
|
const timer = useTimer(rawWorkout ?? null)
|
|
const audio = useAudio()
|
|
|
|
// Music player — synced with workout timer
|
|
const music = useMusicPlayer({
|
|
vibe: workout?.musicVibe ?? 'electronic',
|
|
isPlaying: timer.isRunning && !timer.isPaused,
|
|
})
|
|
|
|
const [showControls, setShowControls] = useState(true)
|
|
const [heartRate, setHeartRate] = useState<number | null>(null)
|
|
|
|
// Watch sync integration
|
|
const { isAvailable: isWatchAvailable, sendWorkoutState } = useWatchSync({
|
|
onPlay: () => {
|
|
timer.resume()
|
|
track('watch_control_play', { workout_id: workout?.id ?? id })
|
|
},
|
|
onPause: () => {
|
|
timer.pause()
|
|
track('watch_control_pause', { workout_id: workout?.id ?? id })
|
|
},
|
|
onSkip: () => {
|
|
timer.skip()
|
|
haptics.selection()
|
|
track('watch_control_skip', { workout_id: workout?.id ?? id })
|
|
},
|
|
onStop: () => {
|
|
haptics.phaseChange()
|
|
timer.stop()
|
|
router.back()
|
|
track('watch_control_stop', { workout_id: workout?.id ?? id })
|
|
},
|
|
onHeartRateUpdate: (hr: number) => setHeartRate(hr),
|
|
})
|
|
|
|
// Animation refs
|
|
const timerScaleAnim = useRef(new Animated.Value(0.8)).current
|
|
const phaseColor = PHASE_COLORS[timer.phase].fill
|
|
|
|
// ─── Actions ─────────────────────────────────────────────────────────────
|
|
|
|
const startTimer = useCallback(() => {
|
|
timer.start()
|
|
haptics.buttonTap()
|
|
if (workout) {
|
|
track('workout_started', {
|
|
workout_id: workout.id,
|
|
workout_title: workout.title,
|
|
duration: workout.duration,
|
|
level: workout.level,
|
|
})
|
|
}
|
|
}, [timer, haptics, workout])
|
|
|
|
const togglePause = useCallback(() => {
|
|
const workoutId = workout?.id ?? id ?? ''
|
|
if (timer.isPaused) {
|
|
timer.resume()
|
|
track('workout_resumed', { workout_id: workoutId })
|
|
} else {
|
|
timer.pause()
|
|
track('workout_paused', { workout_id: workoutId })
|
|
}
|
|
haptics.selection()
|
|
}, [timer, haptics, workout, id])
|
|
|
|
const stopWorkout = useCallback(() => {
|
|
haptics.phaseChange()
|
|
timer.stop()
|
|
router.back()
|
|
}, [router, timer, haptics])
|
|
|
|
const completeWorkout = useCallback(() => {
|
|
haptics.workoutComplete()
|
|
if (workout) {
|
|
track('workout_completed', {
|
|
workout_id: workout.id,
|
|
workout_title: workout.title,
|
|
calories: timer.calories,
|
|
duration: workout.duration,
|
|
rounds: workout.rounds,
|
|
})
|
|
addWorkoutResult({
|
|
id: Date.now().toString(),
|
|
workoutId: workout.id,
|
|
completedAt: Date.now(),
|
|
calories: timer.calories,
|
|
durationMinutes: workout.duration,
|
|
rounds: workout.rounds,
|
|
completionRate: 1,
|
|
})
|
|
}
|
|
router.replace(`/complete/${workout?.id ?? '1'}`)
|
|
}, [router, workout, timer.calories, haptics, addWorkoutResult])
|
|
|
|
const handleSkip = useCallback(() => {
|
|
timer.skip()
|
|
haptics.selection()
|
|
}, [timer, haptics])
|
|
|
|
const toggleControls = useCallback(() => {
|
|
setShowControls((s) => !s)
|
|
}, [])
|
|
|
|
// ─── Animations & side-effects ───────────────────────────────────────────
|
|
|
|
// Entrance animation
|
|
useEffect(() => {
|
|
Animated.spring(timerScaleAnim, {
|
|
toValue: 1,
|
|
friction: 6,
|
|
tension: 100,
|
|
useNativeDriver: true,
|
|
}).start()
|
|
}, [])
|
|
|
|
// Phase change animation + audio
|
|
useEffect(() => {
|
|
timerScaleAnim.setValue(0.9)
|
|
Animated.spring(timerScaleAnim, {
|
|
toValue: 1,
|
|
friction: 4,
|
|
tension: 150,
|
|
useNativeDriver: true,
|
|
}).start()
|
|
haptics.phaseChange()
|
|
if (timer.phase === 'COMPLETE') {
|
|
audio.workoutComplete()
|
|
} else if (timer.isRunning) {
|
|
audio.phaseStart()
|
|
}
|
|
}, [timer.phase])
|
|
|
|
// Countdown beep + haptic for last 3 seconds
|
|
useEffect(() => {
|
|
if (timer.isRunning && timer.timeRemaining <= 3 && timer.timeRemaining > 0) {
|
|
audio.countdownBeep()
|
|
haptics.countdownTick()
|
|
}
|
|
}, [timer.timeRemaining])
|
|
|
|
// Sync workout state with Apple Watch
|
|
useEffect(() => {
|
|
if (!isWatchAvailable || !timer.isRunning) return
|
|
sendWorkoutState({
|
|
phase: timer.phase,
|
|
timeRemaining: timer.timeRemaining,
|
|
currentRound: timer.currentRound,
|
|
totalRounds: timer.totalRounds,
|
|
currentExercise: timer.currentExercise,
|
|
nextExercise: timer.nextExercise,
|
|
calories: timer.calories,
|
|
isPaused: timer.isPaused,
|
|
isPlaying: timer.isRunning && !timer.isPaused,
|
|
})
|
|
}, [
|
|
timer.phase, timer.timeRemaining, timer.currentRound,
|
|
timer.totalRounds, timer.currentExercise, timer.nextExercise,
|
|
timer.calories, timer.isPaused, timer.isRunning, isWatchAvailable,
|
|
])
|
|
|
|
// ─── Render ──────────────────────────────────────────────────────────────
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar hidden />
|
|
|
|
{/* Background video or gradient fallback */}
|
|
<VideoPlayer
|
|
videoUrl={workout?.videoUrl}
|
|
gradientColors={[colors.bg.base, colors.bg.surface]}
|
|
mode="background"
|
|
isPlaying={timer.isRunning && !timer.isPaused}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
|
|
{/* Phase background tint */}
|
|
<View style={[styles.phaseBg, { backgroundColor: phaseColor }]} />
|
|
|
|
{/* Main content */}
|
|
<Pressable style={styles.content} onPress={toggleControls}>
|
|
{/* Header */}
|
|
{showControls && (
|
|
<View style={[styles.header, { paddingTop: insets.top + SPACING[4] }]}>
|
|
<Pressable onPress={stopWorkout} style={styles.closeBtn}>
|
|
<BlurView
|
|
intensity={colors.glass.blurLight}
|
|
tint={colors.glass.blurTint}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<Icon name="xmark" size={24} tintColor={colors.text.primary} />
|
|
</Pressable>
|
|
<View style={styles.headerCenter}>
|
|
<Text style={styles.title}>{workout?.title ?? 'Workout'}</Text>
|
|
<Text style={styles.subtitle}>
|
|
{t('durationLevel', {
|
|
duration: workout?.duration ?? 0,
|
|
level: t(`levels.${(workout?.level ?? 'beginner').toLowerCase()}`),
|
|
})}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.closeBtn} />
|
|
</View>
|
|
)}
|
|
|
|
{/* Stats overlay — above timer ring */}
|
|
{showControls && timer.isRunning && !timer.isComplete && (
|
|
<View style={styles.statsContainer}>
|
|
<StatsOverlay
|
|
calories={timer.calories}
|
|
heartRate={heartRate}
|
|
elapsedRounds={timer.currentRound - 1}
|
|
totalRounds={timer.totalRounds}
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
{/* Timer ring + inner text */}
|
|
<Animated.View
|
|
style={[styles.timerContainer, { transform: [{ scale: timerScaleAnim }] }]}
|
|
>
|
|
<TimerRing progress={timer.progress} phase={timer.phase} />
|
|
<View style={styles.timerInner}>
|
|
<PhaseIndicator phase={timer.phase} />
|
|
<Text selectable style={styles.timerTime}>
|
|
{formatTime(timer.timeRemaining)}
|
|
</Text>
|
|
<RoundIndicator current={timer.currentRound} total={timer.totalRounds} />
|
|
</View>
|
|
</Animated.View>
|
|
|
|
{/* Exercise name + coach encouragement */}
|
|
{!timer.isComplete && (
|
|
<>
|
|
<ExerciseDisplay
|
|
exercise={timer.currentExercise}
|
|
nextExercise={timer.nextExercise}
|
|
/>
|
|
<CoachEncouragement
|
|
phase={timer.phase}
|
|
currentRound={timer.currentRound}
|
|
totalRounds={timer.totalRounds}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{/* Complete state */}
|
|
{timer.isComplete && (
|
|
<View style={styles.completeSection}>
|
|
<Text style={styles.completeTitle}>{t('screens:player.workoutComplete')}</Text>
|
|
<Text style={[styles.completeSubtitle, { color: trainerColor }]}>{t('screens:player.greatJob')}</Text>
|
|
<View style={styles.completeStats}>
|
|
<View style={styles.completeStat}>
|
|
<Text selectable style={styles.completeStatValue}>{timer.totalRounds}</Text>
|
|
<Text style={styles.completeStatLabel}>{t('screens:player.rounds')}</Text>
|
|
</View>
|
|
<View style={styles.completeStat}>
|
|
<Text selectable style={styles.completeStatValue}>{timer.calories}</Text>
|
|
<Text style={styles.completeStatLabel}>{t('screens:player.calories')}</Text>
|
|
</View>
|
|
<View style={styles.completeStat}>
|
|
<Text selectable style={styles.completeStatValue}>{workout?.duration ?? 4}</Text>
|
|
<Text style={styles.completeStatLabel}>{t('screens:player.minutes')}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Player controls */}
|
|
{showControls && !timer.isComplete && (
|
|
<View style={[styles.controls, { paddingBottom: insets.bottom + SPACING[6] }]}>
|
|
<PlayerControls
|
|
isRunning={timer.isRunning}
|
|
isPaused={timer.isPaused}
|
|
onStart={startTimer}
|
|
onPause={() => { timer.pause(); haptics.selection(); track('workout_paused', { workout_id: workout?.id ?? id ?? '' }) }}
|
|
onResume={() => { timer.resume(); haptics.selection(); track('workout_resumed', { workout_id: workout?.id ?? id ?? '' }) }}
|
|
onStop={stopWorkout}
|
|
onSkip={handleSkip}
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
{/* Complete CTA */}
|
|
{timer.isComplete && (
|
|
<View style={[styles.controls, { paddingBottom: insets.bottom + SPACING[6] }]}>
|
|
<Pressable style={styles.doneButton} onPress={completeWorkout}>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<Text style={styles.doneButtonText}>{t('common:done')}</Text>
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
|
|
{/* Burn bar */}
|
|
{showControls && timer.isRunning && !timer.isComplete && (
|
|
<View style={[styles.burnBarContainer, { bottom: insets.bottom + 140 }]}>
|
|
<BlurView
|
|
intensity={colors.glass.blurMedium}
|
|
tint={colors.glass.blurTint}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<BurnBar currentCalories={timer.calories} avgCalories={workout?.calories ?? 45} />
|
|
</View>
|
|
)}
|
|
|
|
{/* Now Playing music pill */}
|
|
{showControls && timer.isRunning && !timer.isComplete && (
|
|
<View style={[styles.nowPlayingContainer, { bottom: insets.bottom + 220 }]}>
|
|
<NowPlaying
|
|
track={music.currentTrack}
|
|
isReady={music.isReady}
|
|
onSkipTrack={music.nextTrack}
|
|
/>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ─── Styles ──────────────────────────────────────────────────────────────────
|
|
|
|
const colors = darkColors
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.bg.base,
|
|
},
|
|
phaseBg: {
|
|
...StyleSheet.absoluteFillObject,
|
|
opacity: 0.15,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
},
|
|
|
|
// Header
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: SPACING[4],
|
|
},
|
|
closeBtn: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderColor: colors.border.glass,
|
|
},
|
|
headerCenter: {
|
|
alignItems: 'center',
|
|
},
|
|
title: {
|
|
...TYPOGRAPHY.HEADLINE,
|
|
color: colors.text.primary,
|
|
},
|
|
subtitle: {
|
|
...TYPOGRAPHY.CAPTION_1,
|
|
color: colors.text.tertiary,
|
|
},
|
|
|
|
// Stats overlay
|
|
statsContainer: {
|
|
marginTop: SPACING[4],
|
|
marginHorizontal: SPACING[4],
|
|
},
|
|
|
|
// Timer
|
|
timerContainer: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: SPACING[6],
|
|
},
|
|
timerInner: {
|
|
position: 'absolute',
|
|
alignItems: 'center',
|
|
},
|
|
timerTime: {
|
|
...TYPOGRAPHY.TIMER_NUMBER,
|
|
color: colors.text.primary,
|
|
fontVariant: ['tabular-nums'],
|
|
},
|
|
|
|
// Controls
|
|
controls: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
alignItems: 'center',
|
|
},
|
|
|
|
// Burn Bar
|
|
burnBarContainer: {
|
|
position: 'absolute',
|
|
left: SPACING[4],
|
|
right: SPACING[4],
|
|
height: 72,
|
|
borderRadius: RADIUS.LG,
|
|
borderCurve: 'continuous',
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderColor: colors.border.glass,
|
|
padding: SPACING[3],
|
|
},
|
|
|
|
// Now Playing
|
|
nowPlayingContainer: {
|
|
position: 'absolute',
|
|
left: SPACING[6],
|
|
right: SPACING[6],
|
|
},
|
|
|
|
// Complete
|
|
completeSection: {
|
|
alignItems: 'center',
|
|
marginTop: SPACING[8],
|
|
},
|
|
completeTitle: {
|
|
...TYPOGRAPHY.LARGE_TITLE,
|
|
color: colors.text.primary,
|
|
},
|
|
completeSubtitle: {
|
|
...TYPOGRAPHY.TITLE_3,
|
|
marginTop: SPACING[1],
|
|
},
|
|
completeStats: {
|
|
flexDirection: 'row',
|
|
marginTop: SPACING[6],
|
|
gap: SPACING[8],
|
|
},
|
|
completeStat: {
|
|
alignItems: 'center',
|
|
},
|
|
completeStatValue: {
|
|
...TYPOGRAPHY.TITLE_1,
|
|
color: colors.text.primary,
|
|
fontVariant: ['tabular-nums'],
|
|
},
|
|
completeStatLabel: {
|
|
...TYPOGRAPHY.CAPTION_1,
|
|
color: colors.text.tertiary,
|
|
marginTop: SPACING[1],
|
|
},
|
|
doneButton: {
|
|
width: 200,
|
|
height: 56,
|
|
borderRadius: RADIUS.GLASS_BUTTON,
|
|
borderCurve: 'continuous',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
...colors.shadow.BRAND_GLOW,
|
|
},
|
|
doneButtonText: {
|
|
...TYPOGRAPHY.BUTTON_MEDIUM,
|
|
color: colors.text.primary,
|
|
letterSpacing: 1,
|
|
},
|
|
})
|