refactor: extract player components, add stack headers, add tests
- 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
This commit is contained in:
Millian Lamiaux
@@ -119,6 +119,13 @@ function RootLayoutInner() {
|
||||
<Stack.Screen
|
||||
name="workout/[id]"
|
||||
options={{
|
||||
headerShown: true,
|
||||
headerTransparent: true,
|
||||
headerBlurEffect: colors.colorScheme === 'dark' ? 'dark' : 'light',
|
||||
headerShadowVisible: false,
|
||||
headerTitle: '',
|
||||
headerBackButtonDisplayMode: 'minimal',
|
||||
headerTintColor: colors.colorScheme === 'dark' ? '#FFFFFF' : '#000000',
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
/>
|
||||
@@ -128,6 +135,19 @@ function RootLayoutInner() {
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="program/[id]"
|
||||
options={{
|
||||
headerShown: true,
|
||||
headerTransparent: true,
|
||||
headerBlurEffect: colors.colorScheme === 'dark' ? 'dark' : 'light',
|
||||
headerShadowVisible: false,
|
||||
headerTitle: '',
|
||||
headerBackButtonDisplayMode: 'minimal',
|
||||
headerTintColor: colors.colorScheme === 'dark' ? '#FFFFFF' : '#000000',
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="collection/[id]"
|
||||
options={{
|
||||
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
} 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 { Icon, type IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
@@ -24,7 +23,7 @@ import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useActivityStore, useUserStore } from '@/src/shared/stores'
|
||||
import { getWorkoutById, getPopularWorkouts } from '@/src/shared/data'
|
||||
import { getWorkoutById, getPopularWorkouts, getTrainerById, getWorkoutAccentColor } from '@/src/shared/data'
|
||||
import { useTranslatedWorkout, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
|
||||
import { SyncConsentModal } from '@/src/shared/components/SyncConsentModal'
|
||||
import { enableSync } from '@/src/shared/services/sync'
|
||||
@@ -95,6 +94,7 @@ function PrimaryButton({
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const colors = useThemeColors()
|
||||
const isDark = colors.colorScheme === 'dark'
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
const scaleAnim = useRef(new Animated.Value(1)).current
|
||||
|
||||
@@ -121,14 +121,15 @@ function PrimaryButton({
|
||||
onPressOut={handlePressOut}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Animated.View style={[styles.primaryButton, { transform: [{ scale: scaleAnim }] }]}>
|
||||
<LinearGradient
|
||||
colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<RNText style={styles.primaryButtonText}>{children}</RNText>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.primaryButton,
|
||||
{ backgroundColor: isDark ? '#FFFFFF' : '#000000', transform: [{ scale: scaleAnim }] },
|
||||
]}
|
||||
>
|
||||
<RNText style={[styles.primaryButtonText, { color: isDark ? '#000000' : '#FFFFFF' }]}>
|
||||
{children}
|
||||
</RNText>
|
||||
</Animated.View>
|
||||
</Pressable>
|
||||
)
|
||||
@@ -190,11 +191,13 @@ function StatCard({
|
||||
value,
|
||||
label,
|
||||
icon,
|
||||
accentColor,
|
||||
delay = 0,
|
||||
}: {
|
||||
value: string | number
|
||||
label: string
|
||||
icon: IconName
|
||||
accentColor: string
|
||||
delay?: number
|
||||
}) {
|
||||
const colors = useThemeColors()
|
||||
@@ -215,14 +218,14 @@ function StatCard({
|
||||
return (
|
||||
<Animated.View style={[styles.statCard, { transform: [{ scale: scaleAnim }] }]}>
|
||||
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
||||
<Icon name={icon} size={24} tintColor={BRAND.PRIMARY} />
|
||||
<Icon name={icon} size={24} tintColor={accentColor} />
|
||||
<RNText style={styles.statValue}>{value}</RNText>
|
||||
<RNText style={styles.statLabel}>{label}</RNText>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
function BurnBarResult({ percentile }: { percentile: number }) {
|
||||
function BurnBarResult({ percentile, accentColor }: { percentile: number; accentColor: string }) {
|
||||
const { t } = useTranslation()
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
@@ -245,9 +248,9 @@ function BurnBarResult({ percentile }: { percentile: number }) {
|
||||
return (
|
||||
<View style={styles.burnBarContainer}>
|
||||
<RNText style={styles.burnBarTitle}>{t('screens:complete.burnBar')}</RNText>
|
||||
<RNText style={styles.burnBarResult}>{t('screens:complete.burnBarResult', { percentile })}</RNText>
|
||||
<RNText style={[styles.burnBarResult, { color: accentColor }]}>{t('screens:complete.burnBarResult', { percentile })}</RNText>
|
||||
<View style={styles.burnBarTrack}>
|
||||
<Animated.View style={[styles.burnBarFill, { width: barWidth }]} />
|
||||
<Animated.View style={[styles.burnBarFill, { width: barWidth, backgroundColor: accentColor }]} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
@@ -269,6 +272,8 @@ export default function WorkoutCompleteScreen() {
|
||||
|
||||
const rawWorkout = getWorkoutById(id ?? '1')
|
||||
const workout = useTranslatedWorkout(rawWorkout)
|
||||
const trainer = rawWorkout ? getTrainerById(rawWorkout.trainerId) : undefined
|
||||
const trainerColor = getWorkoutAccentColor(id ?? '1')
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const recentWorkouts = history.slice(0, 1)
|
||||
@@ -378,20 +383,20 @@ export default function WorkoutCompleteScreen() {
|
||||
|
||||
{/* Stats Grid */}
|
||||
<View style={styles.statsGrid}>
|
||||
<StatCard value={resultCalories} label={t('screens:complete.caloriesLabel')} icon="flame.fill" delay={100} />
|
||||
<StatCard value={resultMinutes} label={t('screens:complete.minutesLabel')} icon="clock.fill" delay={200} />
|
||||
<StatCard value="100%" label={t('screens:complete.completeLabel')} icon="checkmark.circle.fill" delay={300} />
|
||||
<StatCard value={resultCalories} label={t('screens:complete.caloriesLabel')} icon="flame.fill" accentColor={trainerColor} delay={100} />
|
||||
<StatCard value={resultMinutes} label={t('screens:complete.minutesLabel')} icon="clock.fill" accentColor={trainerColor} delay={200} />
|
||||
<StatCard value="100%" label={t('screens:complete.completeLabel')} icon="checkmark.circle.fill" accentColor={trainerColor} delay={300} />
|
||||
</View>
|
||||
|
||||
{/* Burn Bar */}
|
||||
<BurnBarResult percentile={burnBarPercentile} />
|
||||
<BurnBarResult percentile={burnBarPercentile} accentColor={trainerColor} />
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
{/* Streak */}
|
||||
<View style={styles.streakSection}>
|
||||
<View style={styles.streakBadge}>
|
||||
<Icon name="flame.fill" size={32} tintColor={BRAND.PRIMARY} />
|
||||
<View style={[styles.streakBadge, { backgroundColor: trainerColor + '26' }]}>
|
||||
<Icon name="flame.fill" size={32} tintColor={trainerColor} />
|
||||
</View>
|
||||
<View style={styles.streakInfo}>
|
||||
<RNText style={styles.streakTitle}>{t('screens:complete.streakTitle', { count: streak.current })}</RNText>
|
||||
@@ -421,12 +426,8 @@ export default function WorkoutCompleteScreen() {
|
||||
style={styles.recommendedCard}
|
||||
>
|
||||
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
||||
<View style={styles.recommendedThumb}>
|
||||
<LinearGradient
|
||||
colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<Icon name="flame.fill" size={24} tintColor="#FFFFFF" />
|
||||
<View style={[styles.recommendedThumb, { backgroundColor: trainerColor + '20' }]}>
|
||||
<Icon name="flame.fill" size={24} tintColor={trainerColor} />
|
||||
</View>
|
||||
<RNText style={styles.recommendedTitleText} numberOfLines={1}>{w.title}</RNText>
|
||||
<RNText style={styles.recommendedDurationText}>{t('units.minUnit', { count: w.duration })}</RNText>
|
||||
@@ -500,7 +501,6 @@ function createStyles(colors: ThemeColors) {
|
||||
},
|
||||
primaryButtonText: {
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '700',
|
||||
},
|
||||
buttonIcon: {
|
||||
@@ -588,7 +588,6 @@ function createStyles(colors: ThemeColors) {
|
||||
},
|
||||
burnBarResult: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
color: BRAND.PRIMARY,
|
||||
marginTop: SPACING[1],
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
@@ -600,7 +599,6 @@ function createStyles(colors: ThemeColors) {
|
||||
},
|
||||
burnBarFill: {
|
||||
height: '100%',
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
borderRadius: 4,
|
||||
},
|
||||
|
||||
@@ -622,7 +620,6 @@ function createStyles(colors: ThemeColors) {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,35 +1,40 @@
|
||||
/**
|
||||
* TabataFit Program Detail Screen
|
||||
* Shows week progression and workout list
|
||||
* Clean scrollable layout — native header, Apple Fitness+ style
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import {
|
||||
View,
|
||||
Text as RNText,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
Pressable,
|
||||
Animated,
|
||||
} from 'react-native'
|
||||
import { Stack, useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useProgramStore } from '@/src/shared/stores'
|
||||
import { PROGRAMS } from '@/src/shared/data/programs'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
import { track } from '@/src/shared/services/analytics'
|
||||
|
||||
import { useThemeColors, BRAND } from '@/src/shared/theme'
|
||||
import type { ThemeColors } from '@/src/shared/theme/types'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { SPRING } from '@/src/shared/constants/animations'
|
||||
import type { ProgramId } from '@/src/shared/types'
|
||||
import type { IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 28,
|
||||
TITLE: 24,
|
||||
TITLE_2: 20,
|
||||
HEADLINE: 17,
|
||||
BODY: 16,
|
||||
CAPTION: 13,
|
||||
SMALL: 12,
|
||||
// Per-program accent colors (matches home screen cards)
|
||||
const PROGRAM_ACCENT: Record<ProgramId, { color: string; icon: IconName }> = {
|
||||
'upper-body': { color: '#FF6B35', icon: 'dumbbell' },
|
||||
'lower-body': { color: '#30D158', icon: 'figure.walk' },
|
||||
'full-body': { color: '#5AC8FA', icon: 'flame' },
|
||||
}
|
||||
|
||||
export default function ProgramDetailScreen() {
|
||||
@@ -40,25 +45,53 @@ export default function ProgramDetailScreen() {
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
|
||||
const isDark = colors.colorScheme === 'dark'
|
||||
|
||||
const program = PROGRAMS[programId]
|
||||
const accent = PROGRAM_ACCENT[programId] ?? PROGRAM_ACCENT['full-body']
|
||||
const selectProgram = useProgramStore((s) => s.selectProgram)
|
||||
const progress = useProgramStore((s) => s.programsProgress[programId])
|
||||
const isWeekUnlocked = useProgramStore((s) => s.isWeekUnlocked)
|
||||
const getCurrentWorkout = useProgramStore((s) => s.getCurrentWorkout)
|
||||
const completion = useProgramStore((s) => s.getProgramCompletion(programId))
|
||||
|
||||
// CTA entrance animation
|
||||
const ctaAnim = useRef(new Animated.Value(0)).current
|
||||
useEffect(() => {
|
||||
Animated.sequence([
|
||||
Animated.delay(300),
|
||||
Animated.spring(ctaAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.GENTLE,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (program) {
|
||||
track('program_detail_viewed', {
|
||||
program_id: programId,
|
||||
program_title: program.title,
|
||||
})
|
||||
}
|
||||
}, [programId])
|
||||
|
||||
if (!program) {
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<StyledText color={colors.text.primary}>Program not found</StyledText>
|
||||
</View>
|
||||
<>
|
||||
<Stack.Screen options={{ headerTitle: '' }} />
|
||||
<View style={[s.container, s.centered, { backgroundColor: colors.bg.base }]}>
|
||||
<RNText style={[TYPOGRAPHY.BODY, { color: colors.text.primary }]}>
|
||||
{t('programs.notFound', { defaultValue: 'Program not found' })}
|
||||
</RNText>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const handleStartProgram = () => {
|
||||
haptics.buttonTap()
|
||||
haptics.phaseChange()
|
||||
selectProgram(programId)
|
||||
const currentWorkout = getCurrentWorkout(programId)
|
||||
if (currentWorkout) {
|
||||
@@ -66,460 +99,494 @@ export default function ProgramDetailScreen() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleWorkoutPress = (workoutId: string, weekNumber: number) => {
|
||||
const handleWorkoutPress = (workoutId: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${workoutId}`)
|
||||
}
|
||||
|
||||
const hasStarted = progress.completedWorkoutIds.length > 0
|
||||
const ctaBg = isDark ? '#FFFFFF' : '#000000'
|
||||
const ctaTextColor = isDark ? '#000000' : '#FFFFFF'
|
||||
|
||||
const ctaLabel = hasStarted
|
||||
? progress.isProgramCompleted
|
||||
? t('programs.restartProgram')
|
||||
: t('programs.continueTraining')
|
||||
: t('programs.startProgram')
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Pressable style={styles.backButton} onPress={() => router.back()}>
|
||||
<Icon name="arrow.left" size={24} color={colors.text.primary} />
|
||||
</Pressable>
|
||||
<StyledText size={FONTS.TITLE} weight="bold" color={colors.text.primary}>
|
||||
{program.title}
|
||||
</StyledText>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
<>
|
||||
<Stack.Screen options={{ headerTitle: '' }} />
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 120 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Program Overview */}
|
||||
<View style={styles.overviewSection}>
|
||||
<StyledText size={FONTS.BODY} color={colors.text.secondary} style={styles.description}>
|
||||
<View style={[s.container, { backgroundColor: colors.bg.base }]}>
|
||||
<ScrollView
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
contentContainerStyle={[
|
||||
s.scrollContent,
|
||||
{ paddingBottom: insets.bottom + 100 },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Icon + Title */}
|
||||
<View style={s.titleRow}>
|
||||
<View style={[s.programIcon, { backgroundColor: accent.color + '18' }]}>
|
||||
<Icon name={accent.icon} size={22} tintColor={accent.color} />
|
||||
</View>
|
||||
<View style={s.titleContent}>
|
||||
<RNText selectable style={[s.title, { color: colors.text.primary }]}>
|
||||
{program.title}
|
||||
</RNText>
|
||||
<RNText style={[s.subtitle, { color: colors.text.tertiary }]}>
|
||||
{program.durationWeeks} {t('programs.weeks')} · {program.totalWorkouts} {t('programs.workouts')}
|
||||
</RNText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<RNText style={[s.description, { color: colors.text.secondary }]}>
|
||||
{program.description}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
|
||||
{/* Stats Row */}
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statBox}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
||||
{program.durationWeeks}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary}>
|
||||
{t('programs.weeks')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.statBox}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
||||
{program.totalWorkouts}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary}>
|
||||
{t('programs.workouts')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.statBox}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
||||
4
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary}>
|
||||
{t('programs.minutes')}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Equipment */}
|
||||
<View style={styles.equipmentSection}>
|
||||
<StyledText size={FONTS.CAPTION} weight="semibold" color={colors.text.secondary}>
|
||||
{t('programs.equipment')}
|
||||
</StyledText>
|
||||
<View style={styles.equipmentList}>
|
||||
{program.equipment.required.map((item) => (
|
||||
<View key={item} style={styles.equipmentTag}>
|
||||
<StyledText size={12} color={colors.text.primary}>
|
||||
{item}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
{program.equipment.optional.map((item) => (
|
||||
<View key={item} style={[styles.equipmentTag, styles.optionalTag]}>
|
||||
<StyledText size={12} color={colors.text.tertiary}>
|
||||
{item} {t('programs.optional')}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Focus Areas */}
|
||||
<View style={styles.focusSection}>
|
||||
<StyledText size={FONTS.CAPTION} weight="semibold" color={colors.text.secondary}>
|
||||
{t('programs.focusAreas')}
|
||||
</StyledText>
|
||||
<View style={styles.focusList}>
|
||||
{program.focusAreas.map((area) => (
|
||||
<View key={area} style={styles.focusTag}>
|
||||
<StyledText size={12} color={colors.text.primary}>
|
||||
{area}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Progress Overview */}
|
||||
{progress.completedWorkoutIds.length > 0 && (
|
||||
<View style={styles.progressSection}>
|
||||
<View style={styles.progressHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
|
||||
{t('programs.yourProgress')}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.BODY} weight="semibold" color={BRAND.PRIMARY}>
|
||||
{completion}%
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.progressBarContainer}>
|
||||
<View style={[styles.progressBar, { backgroundColor: colors.bg.surface }]}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressFill,
|
||||
{
|
||||
width: `${completion}%`,
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{/* Stats Card */}
|
||||
<View style={[s.card, { backgroundColor: colors.bg.surface }]}>
|
||||
<View style={s.statsRow}>
|
||||
<View style={s.statItem}>
|
||||
<RNText style={[s.statValue, { color: accent.color }]}>
|
||||
{program.durationWeeks}
|
||||
</RNText>
|
||||
<RNText style={[s.statLabel, { color: colors.text.tertiary }]}>
|
||||
{t('programs.weeks')}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.statDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.statItem}>
|
||||
<RNText style={[s.statValue, { color: accent.color }]}>
|
||||
{program.totalWorkouts}
|
||||
</RNText>
|
||||
<RNText style={[s.statLabel, { color: colors.text.tertiary }]}>
|
||||
{t('programs.workouts')}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.statDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.statItem}>
|
||||
<RNText style={[s.statValue, { color: accent.color }]}>
|
||||
4
|
||||
</RNText>
|
||||
<RNText style={[s.statLabel, { color: colors.text.tertiary }]}>
|
||||
{t('programs.minutes')}
|
||||
</RNText>
|
||||
</View>
|
||||
</View>
|
||||
<StyledText size={FONTS.CAPTION} color={colors.text.tertiary}>
|
||||
{progress.completedWorkoutIds.length} {t('programs.of')} {program.totalWorkouts} {t('programs.workoutsComplete')}
|
||||
</StyledText>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Weeks */}
|
||||
<View style={styles.weeksSection}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary} style={styles.weeksTitle}>
|
||||
{/* Equipment & Focus */}
|
||||
<View style={s.tagsSection}>
|
||||
{program.equipment.required.length > 0 && (
|
||||
<>
|
||||
<RNText style={[s.tagSectionLabel, { color: colors.text.secondary }]}>
|
||||
{t('programs.equipment')}
|
||||
</RNText>
|
||||
<View style={s.tagRow}>
|
||||
{program.equipment.required.map((item) => (
|
||||
<View key={item} style={[s.tag, { backgroundColor: colors.bg.surface }]}>
|
||||
<RNText style={[s.tagText, { color: colors.text.primary }]}>
|
||||
{item}
|
||||
</RNText>
|
||||
</View>
|
||||
))}
|
||||
{program.equipment.optional.map((item) => (
|
||||
<View key={item} style={[s.tag, { backgroundColor: colors.bg.surface, opacity: 0.7 }]}>
|
||||
<RNText style={[s.tagText, { color: colors.text.tertiary }]}>
|
||||
{item} {t('programs.optional')}
|
||||
</RNText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<RNText style={[s.tagSectionLabel, { color: colors.text.secondary, marginTop: SPACING[4] }]}>
|
||||
{t('programs.focusAreas')}
|
||||
</RNText>
|
||||
<View style={s.tagRow}>
|
||||
{program.focusAreas.map((area) => (
|
||||
<View key={area} style={[s.tag, { backgroundColor: accent.color + '15' }]}>
|
||||
<RNText style={[s.tagText, { color: accent.color }]}>
|
||||
{area}
|
||||
</RNText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Separator */}
|
||||
<View style={[s.separator, { backgroundColor: colors.border.glassLight }]} />
|
||||
|
||||
{/* Progress (if started) */}
|
||||
{hasStarted && (
|
||||
<View style={[s.card, { backgroundColor: colors.bg.surface, marginBottom: SPACING[5] }]}>
|
||||
<View style={s.progressHeader}>
|
||||
<RNText style={[TYPOGRAPHY.HEADLINE, { color: colors.text.primary }]}>
|
||||
{t('programs.yourProgress')}
|
||||
</RNText>
|
||||
<RNText style={[TYPOGRAPHY.HEADLINE, { color: accent.color, fontVariant: ['tabular-nums'] }]}>
|
||||
{completion}%
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.progressTrack, { backgroundColor: colors.border.glassLight }]}>
|
||||
<View
|
||||
style={[
|
||||
s.progressFill,
|
||||
{
|
||||
width: `${completion}%`,
|
||||
backgroundColor: accent.color,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
<RNText style={[TYPOGRAPHY.FOOTNOTE, { color: colors.text.tertiary, marginTop: SPACING[2] }]}>
|
||||
{progress.completedWorkoutIds.length} {t('programs.of')} {program.totalWorkouts} {t('programs.workoutsComplete')}
|
||||
</RNText>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Training Plan */}
|
||||
<RNText style={[s.sectionTitle, { color: colors.text.primary }]}>
|
||||
{t('programs.trainingPlan')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
|
||||
{program.weeks.map((week) => {
|
||||
const isUnlocked = isWeekUnlocked(programId, week.weekNumber)
|
||||
const isCurrentWeek = progress.currentWeek === week.weekNumber
|
||||
const weekCompletion = week.workouts.filter(w =>
|
||||
const weekCompletion = week.workouts.filter((w) =>
|
||||
progress.completedWorkoutIds.includes(w.id)
|
||||
).length
|
||||
|
||||
return (
|
||||
<View key={week.weekNumber} style={styles.weekCard}>
|
||||
<View
|
||||
key={week.weekNumber}
|
||||
style={[s.card, { backgroundColor: colors.bg.surface, marginBottom: SPACING[3] }]}
|
||||
>
|
||||
{/* Week Header */}
|
||||
<View style={styles.weekHeader}>
|
||||
<View style={styles.weekTitleRow}>
|
||||
<StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>
|
||||
<View style={s.weekHeader}>
|
||||
<View style={s.weekTitleRow}>
|
||||
<RNText style={[TYPOGRAPHY.HEADLINE, { color: colors.text.primary, flex: 1 }]}>
|
||||
{week.title}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
{!isUnlocked && (
|
||||
<Icon name="lock.fill" size={16} color={colors.text.tertiary} />
|
||||
<Icon name="lock.fill" size={16} color={colors.text.hint} />
|
||||
)}
|
||||
{isCurrentWeek && isUnlocked && (
|
||||
<View style={styles.currentBadge}>
|
||||
<StyledText size={11} weight="semibold" color="#FFFFFF">
|
||||
<View style={[s.currentBadge, { backgroundColor: accent.color }]}>
|
||||
<RNText style={[s.currentBadgeText, { color: '#FFFFFF' }]}>
|
||||
{t('programs.current')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<StyledText size={FONTS.CAPTION} color={colors.text.secondary}>
|
||||
<RNText style={[TYPOGRAPHY.FOOTNOTE, { color: colors.text.secondary, marginTop: 2 }]}>
|
||||
{week.description}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
{weekCompletion > 0 && (
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary} style={styles.weekProgress}>
|
||||
<RNText style={[TYPOGRAPHY.CAPTION_1, { color: colors.text.hint, marginTop: SPACING[2] }]}>
|
||||
{weekCompletion}/{week.workouts.length} {t('programs.complete')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Week Workouts */}
|
||||
{isUnlocked && (
|
||||
<View style={styles.workoutsList}>
|
||||
{week.workouts.map((workout, index) => {
|
||||
const isCompleted = progress.completedWorkoutIds.includes(workout.id)
|
||||
const isLocked = !isCompleted && index > 0 &&
|
||||
!progress.completedWorkoutIds.includes(week.workouts[index - 1].id) &&
|
||||
week.weekNumber === progress.currentWeek
|
||||
{isUnlocked &&
|
||||
week.workouts.map((workout, index) => {
|
||||
const isCompleted = progress.completedWorkoutIds.includes(workout.id)
|
||||
const isWorkoutLocked =
|
||||
!isCompleted &&
|
||||
index > 0 &&
|
||||
!progress.completedWorkoutIds.includes(week.workouts[index - 1].id) &&
|
||||
week.weekNumber === progress.currentWeek
|
||||
|
||||
return (
|
||||
return (
|
||||
<View key={workout.id}>
|
||||
<View style={[s.workoutSep, { backgroundColor: colors.border.glassLight }]} />
|
||||
<Pressable
|
||||
key={workout.id}
|
||||
style={[
|
||||
styles.workoutItem,
|
||||
isCompleted && styles.workoutCompleted,
|
||||
isLocked && styles.workoutLocked,
|
||||
style={({ pressed }) => [
|
||||
s.workoutRow,
|
||||
isWorkoutLocked && { opacity: 0.4 },
|
||||
pressed && !isWorkoutLocked && { opacity: 0.6 },
|
||||
]}
|
||||
onPress={() => !isLocked && handleWorkoutPress(workout.id, week.weekNumber)}
|
||||
disabled={isLocked}
|
||||
onPress={() => !isWorkoutLocked && handleWorkoutPress(workout.id)}
|
||||
disabled={isWorkoutLocked}
|
||||
>
|
||||
<View style={styles.workoutNumber}>
|
||||
<View style={s.workoutIcon}>
|
||||
{isCompleted ? (
|
||||
<Icon name="checkmark.circle.fill" size={24} color={BRAND.SUCCESS} />
|
||||
) : isLocked ? (
|
||||
<Icon name="lock.fill" size={20} color={colors.text.tertiary} />
|
||||
<Icon name="checkmark.circle.fill" size={22} color={BRAND.SUCCESS} />
|
||||
) : isWorkoutLocked ? (
|
||||
<Icon name="lock.fill" size={18} color={colors.text.hint} />
|
||||
) : (
|
||||
<StyledText size={14} weight="semibold" color={colors.text.primary}>
|
||||
<RNText style={[s.workoutIndex, { color: colors.text.tertiary }]}>
|
||||
{index + 1}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.workoutInfo}>
|
||||
<StyledText
|
||||
size={14}
|
||||
weight={isCompleted ? "medium" : "semibold"}
|
||||
color={isLocked ? colors.text.tertiary : colors.text.primary}
|
||||
style={isCompleted && styles.completedText}
|
||||
<View style={s.workoutInfo}>
|
||||
<RNText
|
||||
style={[
|
||||
TYPOGRAPHY.BODY,
|
||||
{ color: isWorkoutLocked ? colors.text.hint : colors.text.primary },
|
||||
isCompleted && { textDecorationLine: 'line-through' },
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{workout.title}
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary}>
|
||||
{workout.exercises.length} {t('programs.exercises')} • {workout.duration} {t('programs.min')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
<RNText style={[TYPOGRAPHY.CAPTION_1, { color: colors.text.tertiary }]}>
|
||||
{workout.exercises.length} {t('programs.exercises')} · {workout.duration} {t('programs.min')}
|
||||
</RNText>
|
||||
</View>
|
||||
{!isLocked && !isCompleted && (
|
||||
<Icon name="chevron.right" size={20} color={colors.text.tertiary} />
|
||||
{!isWorkoutLocked && !isCompleted && (
|
||||
<Icon name="chevron.right" size={16} color={colors.text.hint} />
|
||||
)}
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ScrollView>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
|
||||
<Pressable style={styles.ctaButton} onPress={handleStartProgram}>
|
||||
<LinearGradient
|
||||
colors={['#FF6B35', '#FF3B30']}
|
||||
style={styles.ctaGradient}
|
||||
{/* CTA */}
|
||||
<Animated.View
|
||||
style={[
|
||||
s.bottomBar,
|
||||
{
|
||||
backgroundColor: colors.bg.base,
|
||||
paddingBottom: insets.bottom + SPACING[3],
|
||||
opacity: ctaAnim,
|
||||
transform: [
|
||||
{
|
||||
translateY: ctaAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [30, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Pressable
|
||||
style={({ pressed }) => [
|
||||
s.ctaButton,
|
||||
{ backgroundColor: ctaBg },
|
||||
pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] },
|
||||
]}
|
||||
onPress={handleStartProgram}
|
||||
>
|
||||
<StyledText size={16} weight="bold" color="#FFFFFF">
|
||||
{progress.completedWorkoutIds.length === 0
|
||||
? t('programs.startProgram')
|
||||
: progress.isProgramCompleted
|
||||
? t('programs.restartProgram')
|
||||
: t('programs.continueTraining')
|
||||
}
|
||||
</StyledText>
|
||||
<Icon name="arrow.right" size={20} color="#FFFFFF" style={styles.ctaIcon} />
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
<RNText style={[s.ctaText, { color: ctaTextColor }]}>
|
||||
{ctaLabel}
|
||||
</RNText>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function createStyles(colors: ThemeColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.bg.base,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
// ─── Styles ──────────────────────────────────────────────────────────────────
|
||||
|
||||
// Header
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingVertical: SPACING[3],
|
||||
},
|
||||
backButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
placeholder: {
|
||||
width: 40,
|
||||
},
|
||||
const s = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
centered: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[2],
|
||||
},
|
||||
|
||||
// Overview
|
||||
overviewSection: {
|
||||
marginTop: SPACING[2],
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
description: {
|
||||
marginBottom: SPACING[5],
|
||||
lineHeight: 24,
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
marginBottom: SPACING[5],
|
||||
paddingVertical: SPACING[4],
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
},
|
||||
statBox: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
// Title
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
programIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.MD,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
titleContent: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
...TYPOGRAPHY.TITLE_1,
|
||||
},
|
||||
subtitle: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
marginTop: 2,
|
||||
},
|
||||
|
||||
// Equipment
|
||||
equipmentSection: {
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
equipmentList: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
equipmentTag: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
},
|
||||
optionalTag: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
// Description
|
||||
description: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
lineHeight: 24,
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
|
||||
// Focus
|
||||
focusSection: {
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
focusList: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
focusTag: {
|
||||
backgroundColor: `${BRAND.PRIMARY}15`,
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
},
|
||||
// Card
|
||||
card: {
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
overflow: 'hidden',
|
||||
padding: SPACING[4],
|
||||
},
|
||||
|
||||
// Progress
|
||||
progressSection: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
padding: SPACING[4],
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
progressHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
progressBarContainer: {
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
progressBar: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
// Stats
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
statItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
},
|
||||
statValue: {
|
||||
...TYPOGRAPHY.TITLE_1,
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
statLabel: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
textTransform: 'uppercase' as const,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
statDivider: {
|
||||
width: StyleSheet.hairlineWidth,
|
||||
height: 32,
|
||||
},
|
||||
|
||||
// Weeks
|
||||
weeksSection: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
weeksTitle: {
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
weekCard: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
marginBottom: SPACING[4],
|
||||
overflow: 'hidden',
|
||||
},
|
||||
weekHeader: {
|
||||
padding: SPACING[4],
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border.glass,
|
||||
},
|
||||
weekTitleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: SPACING[1],
|
||||
},
|
||||
currentBadge: {
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: 2,
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
weekProgress: {
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
// Tags
|
||||
tagsSection: {
|
||||
marginTop: SPACING[5],
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
tagSectionLabel: {
|
||||
...TYPOGRAPHY.FOOTNOTE,
|
||||
fontWeight: '600',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
tagRow: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
},
|
||||
tag: {
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
},
|
||||
tagText: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
},
|
||||
|
||||
// Workouts List
|
||||
workoutsList: {
|
||||
padding: SPACING[2],
|
||||
},
|
||||
workoutItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[3],
|
||||
borderRadius: RADIUS.MD,
|
||||
},
|
||||
workoutCompleted: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
workoutLocked: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
workoutNumber: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: SPACING[3],
|
||||
},
|
||||
workoutInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
completedText: {
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
// Separator
|
||||
separator: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
|
||||
// Bottom Bar
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: colors.bg.base,
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[3],
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border.glass,
|
||||
},
|
||||
ctaButton: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
ctaGradient: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: SPACING[4],
|
||||
},
|
||||
ctaIcon: {
|
||||
marginLeft: SPACING[2],
|
||||
},
|
||||
})
|
||||
}
|
||||
// Progress
|
||||
progressHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
progressTrack: {
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 3,
|
||||
},
|
||||
|
||||
// Section title
|
||||
sectionTitle: {
|
||||
...TYPOGRAPHY.TITLE_2,
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
|
||||
// Week header
|
||||
weekHeader: {
|
||||
marginBottom: SPACING[1],
|
||||
},
|
||||
weekTitleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[2],
|
||||
},
|
||||
currentBadge: {
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: 2,
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
currentBadgeText: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
fontWeight: '600',
|
||||
},
|
||||
|
||||
// Workout row
|
||||
workoutSep: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginLeft: SPACING[4] + 28,
|
||||
},
|
||||
workoutRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
gap: SPACING[3],
|
||||
},
|
||||
workoutIcon: {
|
||||
width: 28,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
workoutIndex: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
fontVariant: ['tabular-nums'],
|
||||
fontWeight: '600',
|
||||
},
|
||||
workoutInfo: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
|
||||
// Bottom bar
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[3],
|
||||
},
|
||||
ctaButton: {
|
||||
height: 54,
|
||||
borderRadius: RADIUS.MD,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
ctaText: {
|
||||
...TYPOGRAPHY.BUTTON_LARGE,
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,14 +1,23 @@
|
||||
/**
|
||||
* TabataFit Pre-Workout Detail Screen
|
||||
* Clean modal with workout info
|
||||
* Clean scrollable layout — native header, no hero
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo } from 'react'
|
||||
import { View, Text as RNText, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import {
|
||||
View,
|
||||
Text as RNText,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
Pressable,
|
||||
Animated,
|
||||
} from 'react-native'
|
||||
import { Stack } from 'expo-router'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { VideoPlayer } from '@/src/shared/components/VideoPlayer'
|
||||
import { Image } from 'expo-image'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
@@ -16,19 +25,43 @@ import { usePurchases } from '@/src/shared/hooks/usePurchases'
|
||||
import { useUserStore } from '@/src/shared/stores'
|
||||
import { track } from '@/src/shared/services/analytics'
|
||||
import { canAccessWorkout } from '@/src/shared/services/access'
|
||||
import { getWorkoutById } from '@/src/shared/data'
|
||||
import { getWorkoutById, getTrainerById, getWorkoutAccentColor } from '@/src/shared/data'
|
||||
import { useTranslatedWorkout, useMusicVibeLabel } from '@/src/shared/data/useTranslatedData'
|
||||
import { VideoPlayer } from '@/src/shared/components/VideoPlayer'
|
||||
|
||||
import { useThemeColors, BRAND } from '@/src/shared/theme'
|
||||
import { useThemeColors } from '@/src/shared/theme'
|
||||
import type { ThemeColors } from '@/src/shared/theme/types'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { SPRING } from '@/src/shared/constants/animations'
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ─── Save Button (headerRight) ───────────────────────────────────────────────
|
||||
|
||||
function SaveButton({
|
||||
isSaved,
|
||||
onPress,
|
||||
colors,
|
||||
}: {
|
||||
isSaved: boolean
|
||||
onPress: () => void
|
||||
colors: ThemeColors
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => pressed && { opacity: 0.6 }}
|
||||
>
|
||||
<Icon
|
||||
name={isSaved ? 'heart.fill' : 'heart'}
|
||||
size={22}
|
||||
color={isSaved ? '#FF3B30' : colors.text.primary}
|
||||
/>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Screen ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function WorkoutDetailScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
@@ -41,11 +74,26 @@ export default function WorkoutDetailScreen() {
|
||||
const { isPremium } = usePurchases()
|
||||
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
const isDark = colors.colorScheme === 'dark'
|
||||
|
||||
const rawWorkout = getWorkoutById(id ?? '1')
|
||||
const workout = useTranslatedWorkout(rawWorkout)
|
||||
const musicVibeLabel = useMusicVibeLabel(rawWorkout?.musicVibe ?? '')
|
||||
const trainer = rawWorkout ? getTrainerById(rawWorkout.trainerId) : undefined
|
||||
const accentColor = getWorkoutAccentColor(id ?? '1')
|
||||
|
||||
// CTA entrance
|
||||
const ctaAnim = useRef(new Animated.Value(0)).current
|
||||
useEffect(() => {
|
||||
Animated.sequence([
|
||||
Animated.delay(300),
|
||||
Animated.spring(ctaAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.GENTLE,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (workout) {
|
||||
@@ -58,24 +106,34 @@ export default function WorkoutDetailScreen() {
|
||||
}
|
||||
}, [workout?.id])
|
||||
|
||||
const isSaved = savedWorkouts.includes(workout?.id?.toString() ?? '')
|
||||
const toggleSave = () => {
|
||||
if (!workout) return
|
||||
haptics.selection()
|
||||
toggleSavedWorkout(workout.id.toString())
|
||||
}
|
||||
|
||||
if (!workout) {
|
||||
return (
|
||||
<View style={[styles.container, styles.centered]}>
|
||||
<RNText style={{ color: colors.text.primary, fontSize: 17 }}>{t('screens:workout.notFound')}</RNText>
|
||||
</View>
|
||||
<>
|
||||
<Stack.Screen options={{ headerTitle: '' }} />
|
||||
<View style={[s.container, s.centered, { backgroundColor: colors.bg.base }]}>
|
||||
<RNText style={{ color: colors.text.primary, fontSize: 17 }}>
|
||||
{t('screens:workout.notFound')}
|
||||
</RNText>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const isSaved = savedWorkouts.includes(workout.id.toString())
|
||||
const isLocked = !canAccessWorkout(workout.id, isPremium)
|
||||
const exerciseCount = workout.exercises?.length || 1
|
||||
const repeatCount = Math.max(1, Math.floor((workout.rounds || exerciseCount) / exerciseCount))
|
||||
|
||||
const handleStartWorkout = () => {
|
||||
if (isLocked) {
|
||||
haptics.buttonTap()
|
||||
track('paywall_triggered', {
|
||||
source: 'workout_detail',
|
||||
workout_id: workout.id,
|
||||
})
|
||||
track('paywall_triggered', { source: 'workout_detail', workout_id: workout.id })
|
||||
router.push('/paywall')
|
||||
return
|
||||
}
|
||||
@@ -83,356 +141,403 @@ export default function WorkoutDetailScreen() {
|
||||
router.push(`/player/${workout.id}`)
|
||||
}
|
||||
|
||||
const toggleSave = () => {
|
||||
haptics.selection()
|
||||
toggleSavedWorkout(workout.id.toString())
|
||||
}
|
||||
const ctaBg = isDark ? '#FFFFFF' : '#000000'
|
||||
const ctaText = isDark ? '#000000' : '#FFFFFF'
|
||||
const ctaLockedBg = isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'
|
||||
const ctaLockedText = colors.text.primary
|
||||
|
||||
const exerciseCount = workout.exercises?.length || 1
|
||||
const repeatCount = Math.max(1, Math.floor((workout.rounds || exerciseCount) / exerciseCount))
|
||||
const equipmentText = workout.equipment.length > 0
|
||||
? workout.equipment.join(' · ')
|
||||
: t('screens:workout.noEquipment', { defaultValue: 'No equipment needed' })
|
||||
|
||||
return (
|
||||
<View testID="workout-detail-screen" style={styles.container}>
|
||||
{/* Header with SwiftUI glass button */}
|
||||
<View style={[styles.header, { paddingTop: insets.top + SPACING[3] }]}>
|
||||
<RNText style={styles.headerTitle} numberOfLines={1}>
|
||||
{workout.title}
|
||||
</RNText>
|
||||
<>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerRight: () => (
|
||||
<SaveButton isSaved={isSaved} onPress={toggleSave} colors={colors} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Save button */}
|
||||
<Pressable style={styles.saveButton} onPress={toggleSave}>
|
||||
<BlurView intensity={40} tint="dark" style={styles.saveButtonBlur}>
|
||||
<Icon
|
||||
name={isSaved ? 'heart.fill' : 'heart'}
|
||||
size={22}
|
||||
color={isSaved ? '#FF3B30' : '#FFFFFF'}
|
||||
/>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View testID="workout-detail-screen" style={[s.container, { backgroundColor: colors.bg.base }]}>
|
||||
<ScrollView
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
contentContainerStyle={[
|
||||
s.scrollContent,
|
||||
{ paddingBottom: insets.bottom + 100 },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Thumbnail / Video Preview */}
|
||||
{rawWorkout?.thumbnailUrl ? (
|
||||
<View style={s.mediaContainer}>
|
||||
<Image
|
||||
source={rawWorkout.thumbnailUrl}
|
||||
style={s.thumbnail}
|
||||
contentFit="cover"
|
||||
transition={200}
|
||||
/>
|
||||
</View>
|
||||
) : rawWorkout?.videoUrl ? (
|
||||
<View style={s.mediaContainer}>
|
||||
<VideoPlayer
|
||||
videoUrl={rawWorkout.videoUrl}
|
||||
gradientColors={['#1C1C1E', '#2C2C2E']}
|
||||
mode="preview"
|
||||
isPlaying={false}
|
||||
style={s.thumbnail}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{/* Content */}
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Video Preview Hero */}
|
||||
<VideoPlayer
|
||||
videoUrl={workout.videoUrl}
|
||||
mode="preview"
|
||||
isPlaying={true}
|
||||
style={styles.videoPreview}
|
||||
testID="workout-video-preview"
|
||||
/>
|
||||
{/* Quick stats */}
|
||||
<View style={styles.quickStats}>
|
||||
<View style={[styles.statBadge, { backgroundColor: 'rgba(255, 107, 53, 0.15)' }]}>
|
||||
<Icon name="dumbbell.fill" size={14} color={BRAND.PRIMARY} />
|
||||
<RNText style={[styles.statBadgeText, { color: BRAND.PRIMARY }]}>
|
||||
{/* Title */}
|
||||
<RNText selectable style={[s.title, { color: colors.text.primary }]}>
|
||||
{workout.title}
|
||||
</RNText>
|
||||
|
||||
{/* Trainer */}
|
||||
{trainer && (
|
||||
<RNText style={[s.trainerName, { color: accentColor }]}>
|
||||
with {trainer.name}
|
||||
</RNText>
|
||||
)}
|
||||
|
||||
{/* Inline metadata */}
|
||||
<View style={s.metaRow}>
|
||||
<View style={s.metaItem}>
|
||||
<Icon name="clock" size={15} tintColor={colors.text.tertiary} />
|
||||
<RNText style={[s.metaText, { color: colors.text.secondary }]}>
|
||||
{workout.duration} {t('units.minUnit', { count: workout.duration })}
|
||||
</RNText>
|
||||
</View>
|
||||
<RNText style={[s.metaDot, { color: colors.text.hint }]}>·</RNText>
|
||||
<View style={s.metaItem}>
|
||||
<Icon name="flame" size={15} tintColor={colors.text.tertiary} />
|
||||
<RNText style={[s.metaText, { color: colors.text.secondary }]}>
|
||||
{workout.calories} {t('units.calUnit', { count: workout.calories })}
|
||||
</RNText>
|
||||
</View>
|
||||
<RNText style={[s.metaDot, { color: colors.text.hint }]}>·</RNText>
|
||||
<RNText style={[s.metaText, { color: colors.text.secondary }]}>
|
||||
{t(`levels.${(workout.level ?? 'Beginner').toLowerCase()}`)}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[styles.statBadge, { backgroundColor: colors.bg.surface }]}>
|
||||
<Icon name="clock.fill" size={14} color={colors.text.secondary} />
|
||||
<RNText style={styles.statBadgeText}>{t('units.minUnit', { count: workout.duration })}</RNText>
|
||||
</View>
|
||||
<View style={[styles.statBadge, { backgroundColor: colors.bg.surface }]}>
|
||||
<Icon name="flame.fill" size={14} color={colors.text.secondary} />
|
||||
<RNText style={styles.statBadgeText}>{t('units.calUnit', { count: workout.calories })}</RNText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Equipment */}
|
||||
<View style={styles.section}>
|
||||
<RNText style={styles.sectionTitle}>{t('screens:workout.whatYoullNeed')}</RNText>
|
||||
{workout.equipment.map((item, index) => (
|
||||
<View key={index} style={styles.equipmentItem}>
|
||||
<Icon name="checkmark.circle.fill" size={20} color="#30D158" />
|
||||
<RNText style={styles.equipmentText}>{item}</RNText>
|
||||
{/* Equipment */}
|
||||
<RNText style={[s.equipmentText, { color: colors.text.tertiary }]}>
|
||||
{equipmentText}
|
||||
</RNText>
|
||||
|
||||
{/* Separator */}
|
||||
<View style={[s.separator, { backgroundColor: colors.border.glassLight }]} />
|
||||
|
||||
{/* Timing Card */}
|
||||
<View style={[s.card, { backgroundColor: colors.bg.surface }]}>
|
||||
<View style={s.timingRow}>
|
||||
<View style={s.timingItem}>
|
||||
<RNText style={[s.timingValue, { color: accentColor }]}>
|
||||
{workout.prepTime}s
|
||||
</RNText>
|
||||
<RNText style={[s.timingLabel, { color: colors.text.tertiary }]}>
|
||||
{t('screens:workout.prep', { defaultValue: 'Prep' })}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.timingDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.timingItem}>
|
||||
<RNText style={[s.timingValue, { color: accentColor }]}>
|
||||
{workout.workTime}s
|
||||
</RNText>
|
||||
<RNText style={[s.timingLabel, { color: colors.text.tertiary }]}>
|
||||
{t('screens:workout.work', { defaultValue: 'Work' })}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.timingDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.timingItem}>
|
||||
<RNText style={[s.timingValue, { color: accentColor }]}>
|
||||
{workout.restTime}s
|
||||
</RNText>
|
||||
<RNText style={[s.timingLabel, { color: colors.text.tertiary }]}>
|
||||
{t('screens:workout.rest', { defaultValue: 'Rest' })}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.timingDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.timingItem}>
|
||||
<RNText style={[s.timingValue, { color: accentColor }]}>
|
||||
{workout.rounds}
|
||||
</RNText>
|
||||
<RNText style={[s.timingLabel, { color: colors.text.tertiary }]}>
|
||||
{t('screens:workout.rounds', { defaultValue: 'Rounds' })}
|
||||
</RNText>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
{/* Exercises Card */}
|
||||
<RNText style={[s.sectionTitle, { color: colors.text.primary }]}>
|
||||
{t('screens:workout.exercises', { count: workout.rounds })}
|
||||
</RNText>
|
||||
|
||||
{/* Exercises */}
|
||||
<View style={styles.section}>
|
||||
<RNText style={styles.sectionTitle}>{t('screens:workout.exercises', { count: workout.rounds })}</RNText>
|
||||
<View style={styles.exercisesList}>
|
||||
<View style={[s.card, { backgroundColor: colors.bg.surface }]}>
|
||||
{workout.exercises.map((exercise, index) => (
|
||||
<View key={index} style={styles.exerciseRow}>
|
||||
<View style={styles.exerciseNumber}>
|
||||
<RNText style={styles.exerciseNumberText}>{index + 1}</RNText>
|
||||
<View key={index}>
|
||||
<View style={s.exerciseRow}>
|
||||
<RNText style={[s.exerciseIndex, { color: accentColor }]}>
|
||||
{index + 1}
|
||||
</RNText>
|
||||
<RNText selectable style={[s.exerciseName, { color: colors.text.primary }]}>
|
||||
{exercise.name}
|
||||
</RNText>
|
||||
<RNText style={[s.exerciseDuration, { color: colors.text.tertiary }]}>
|
||||
{exercise.duration}s
|
||||
</RNText>
|
||||
</View>
|
||||
<RNText style={styles.exerciseName}>{exercise.name}</RNText>
|
||||
<RNText style={styles.exerciseDuration}>{exercise.duration}s</RNText>
|
||||
{index < workout.exercises.length - 1 && (
|
||||
<View style={[s.exerciseSep, { backgroundColor: colors.border.glassLight }]} />
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
<View style={styles.repeatNote}>
|
||||
<Icon name="repeat" size={16} color={colors.text.tertiary} />
|
||||
<RNText style={styles.repeatText}>{t('screens:workout.repeatRounds', { count: repeatCount })}</RNText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
{/* Music */}
|
||||
<View style={styles.section}>
|
||||
<RNText style={styles.sectionTitle}>{t('screens:workout.music')}</RNText>
|
||||
<View style={styles.musicCard}>
|
||||
<View style={styles.musicIcon}>
|
||||
<Icon name="music.note.list" size={24} color={BRAND.PRIMARY} />
|
||||
{repeatCount > 1 && (
|
||||
<View style={s.repeatRow}>
|
||||
<Icon name="repeat" size={13} color={colors.text.hint} />
|
||||
<RNText style={[s.repeatText, { color: colors.text.hint }]}>
|
||||
{t('screens:workout.repeatRounds', { count: repeatCount })}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={styles.musicInfo}>
|
||||
<RNText style={styles.musicName}>{t('screens:workout.musicMix', { vibe: musicVibeLabel })}</RNText>
|
||||
<RNText style={styles.musicDescription}>{t('screens:workout.curatedForWorkout')}</RNText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Fixed Start Button */}
|
||||
<View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
|
||||
<BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<Pressable
|
||||
testID={isLocked ? 'workout-unlock-button' : 'workout-start-button'}
|
||||
style={({ pressed }) => [
|
||||
styles.startButton,
|
||||
isLocked && styles.lockedButton,
|
||||
pressed && styles.startButtonPressed,
|
||||
]}
|
||||
onPress={handleStartWorkout}
|
||||
>
|
||||
{isLocked && (
|
||||
<Icon name="lock.fill" size={18} color="#FFFFFF" style={{ marginRight: 8 }} />
|
||||
)}
|
||||
<RNText testID="workout-cta-text" style={styles.startButtonText}>
|
||||
{isLocked ? t('screens:workout.unlockWithPremium') : t('screens:workout.startWorkout')}
|
||||
</RNText>
|
||||
</Pressable>
|
||||
|
||||
{/* Music */}
|
||||
<View style={s.musicRow}>
|
||||
<Icon name="music.note" size={14} tintColor={colors.text.hint} />
|
||||
<RNText style={[s.musicText, { color: colors.text.tertiary }]}>
|
||||
{t('screens:workout.musicMix', { vibe: musicVibeLabel })}
|
||||
</RNText>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* CTA */}
|
||||
<Animated.View
|
||||
style={[
|
||||
s.bottomBar,
|
||||
{
|
||||
backgroundColor: colors.bg.base,
|
||||
paddingBottom: insets.bottom + SPACING[3],
|
||||
opacity: ctaAnim,
|
||||
transform: [
|
||||
{
|
||||
translateY: ctaAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [30, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Pressable
|
||||
testID={isLocked ? 'workout-unlock-button' : 'workout-start-button'}
|
||||
style={({ pressed }) => [
|
||||
s.ctaButton,
|
||||
{ backgroundColor: isLocked ? ctaLockedBg : ctaBg },
|
||||
isLocked && { borderWidth: 1, borderColor: colors.border.glass },
|
||||
pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] },
|
||||
]}
|
||||
onPress={handleStartWorkout}
|
||||
>
|
||||
{isLocked && (
|
||||
<Icon name="lock.fill" size={16} color={ctaLockedText} style={{ marginRight: 8 }} />
|
||||
)}
|
||||
<RNText
|
||||
testID="workout-cta-text"
|
||||
style={[s.ctaText, { color: isLocked ? ctaLockedText : ctaText }]}
|
||||
>
|
||||
{isLocked ? t('screens:workout.unlockWithPremium') : t('screens:workout.startWorkout')}
|
||||
</RNText>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ─── Styles ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function createStyles(colors: ThemeColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.bg.base,
|
||||
},
|
||||
centered: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
const s = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
centered: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[2],
|
||||
},
|
||||
|
||||
// Header
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingBottom: SPACING[3],
|
||||
},
|
||||
headerTitle: {
|
||||
flex: 1,
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
color: colors.text.primary,
|
||||
marginRight: SPACING[3],
|
||||
},
|
||||
saveButton: {
|
||||
width: LAYOUT.TOUCH_TARGET,
|
||||
height: LAYOUT.TOUCH_TARGET,
|
||||
borderRadius: LAYOUT.TOUCH_TARGET / 2,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
saveButtonBlur: {
|
||||
width: LAYOUT.TOUCH_TARGET,
|
||||
height: LAYOUT.TOUCH_TARGET,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
// Media
|
||||
mediaContainer: {
|
||||
height: 200,
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
thumbnail: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
|
||||
// Video Preview
|
||||
videoPreview: {
|
||||
height: 220,
|
||||
borderRadius: RADIUS.XL,
|
||||
overflow: 'hidden' as const,
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
// Title
|
||||
title: {
|
||||
...TYPOGRAPHY.TITLE_1,
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
|
||||
// Quick Stats
|
||||
quickStats: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[2],
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
statBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[2],
|
||||
borderRadius: RADIUS.FULL,
|
||||
gap: SPACING[1],
|
||||
},
|
||||
statBadgeText: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
color: colors.text.secondary,
|
||||
fontWeight: '600',
|
||||
},
|
||||
// Trainer
|
||||
trainerName: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
|
||||
// Section
|
||||
section: {
|
||||
paddingVertical: SPACING[3],
|
||||
},
|
||||
sectionTitle: {
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
color: colors.text.primary,
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
// Metadata
|
||||
metaRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
metaItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
metaText: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
},
|
||||
metaDot: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
},
|
||||
|
||||
// Divider
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: colors.border.glass,
|
||||
marginVertical: SPACING[2],
|
||||
},
|
||||
// Equipment
|
||||
equipmentText: {
|
||||
...TYPOGRAPHY.FOOTNOTE,
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
|
||||
// Equipment
|
||||
equipmentItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
equipmentText: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
color: colors.text.secondary,
|
||||
},
|
||||
// Separator
|
||||
separator: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
|
||||
// Exercises
|
||||
exercisesList: {
|
||||
gap: SPACING[2],
|
||||
},
|
||||
exerciseRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[4],
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
gap: SPACING[3],
|
||||
},
|
||||
exerciseNumber: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
exerciseNumberText: {
|
||||
...TYPOGRAPHY.CALLOUT,
|
||||
color: BRAND.PRIMARY,
|
||||
fontWeight: '700',
|
||||
},
|
||||
exerciseName: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
color: colors.text.primary,
|
||||
flex: 1,
|
||||
},
|
||||
exerciseDuration: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
color: colors.text.tertiary,
|
||||
},
|
||||
repeatNote: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[2],
|
||||
paddingHorizontal: SPACING[2],
|
||||
},
|
||||
repeatText: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
color: colors.text.tertiary,
|
||||
},
|
||||
// Card
|
||||
card: {
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
|
||||
// Music
|
||||
musicCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: SPACING[4],
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
gap: SPACING[3],
|
||||
},
|
||||
musicIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
musicInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
musicName: {
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
color: colors.text.primary,
|
||||
},
|
||||
musicDescription: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
color: colors.text.tertiary,
|
||||
marginTop: 2,
|
||||
},
|
||||
// Timing
|
||||
timingRow: {
|
||||
flexDirection: 'row',
|
||||
paddingVertical: SPACING[4],
|
||||
},
|
||||
timingItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
},
|
||||
timingDivider: {
|
||||
width: StyleSheet.hairlineWidth,
|
||||
alignSelf: 'stretch',
|
||||
},
|
||||
timingValue: {
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
timingLabel: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
textTransform: 'uppercase' as const,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
|
||||
// Bottom Bar
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[4],
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border.glass,
|
||||
},
|
||||
// Section
|
||||
sectionTitle: {
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
|
||||
// Start Button
|
||||
startButton: {
|
||||
height: 56,
|
||||
borderRadius: RADIUS.LG,
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
lockedButton: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: BRAND.PRIMARY,
|
||||
},
|
||||
startButtonPressed: {
|
||||
backgroundColor: BRAND.PRIMARY_DARK,
|
||||
transform: [{ scale: 0.98 }],
|
||||
},
|
||||
startButtonText: {
|
||||
...TYPOGRAPHY.HEADLINE,
|
||||
color: '#FFFFFF',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
})
|
||||
}
|
||||
// Exercise
|
||||
exerciseRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[4],
|
||||
},
|
||||
exerciseIndex: {
|
||||
...TYPOGRAPHY.FOOTNOTE,
|
||||
fontVariant: ['tabular-nums'],
|
||||
width: 24,
|
||||
},
|
||||
exerciseName: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
flex: 1,
|
||||
},
|
||||
exerciseDuration: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
fontVariant: ['tabular-nums'],
|
||||
marginLeft: SPACING[3],
|
||||
},
|
||||
exerciseSep: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginLeft: SPACING[4] + 24,
|
||||
marginRight: SPACING[4],
|
||||
},
|
||||
repeatRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[2],
|
||||
paddingLeft: 24,
|
||||
},
|
||||
repeatText: {
|
||||
...TYPOGRAPHY.FOOTNOTE,
|
||||
},
|
||||
|
||||
// Music
|
||||
musicRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[5],
|
||||
},
|
||||
musicText: {
|
||||
...TYPOGRAPHY.FOOTNOTE,
|
||||
},
|
||||
|
||||
// Bottom bar
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[3],
|
||||
},
|
||||
ctaButton: {
|
||||
height: 54,
|
||||
borderRadius: RADIUS.MD,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
ctaText: {
|
||||
...TYPOGRAPHY.BUTTON_LARGE,
|
||||
},
|
||||
})
|
||||
|
||||
181
src/__tests__/features/player.test.ts
Normal file
181
src/__tests__/features/player.test.ts
Normal file
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* Player feature unit tests
|
||||
* Tests constants, getCoachMessage, and component prop contracts
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import {
|
||||
TIMER_RING_SIZE,
|
||||
TIMER_RING_STROKE,
|
||||
COACH_MESSAGES,
|
||||
getCoachMessage,
|
||||
} from '../../features/player/constants'
|
||||
|
||||
describe('Player constants', () => {
|
||||
describe('TIMER_RING_SIZE', () => {
|
||||
it('should be a positive number', () => {
|
||||
expect(TIMER_RING_SIZE).toBeGreaterThan(0)
|
||||
expect(TIMER_RING_SIZE).toBe(280)
|
||||
})
|
||||
})
|
||||
|
||||
describe('TIMER_RING_STROKE', () => {
|
||||
it('should be a positive number', () => {
|
||||
expect(TIMER_RING_STROKE).toBeGreaterThan(0)
|
||||
expect(TIMER_RING_STROKE).toBe(12)
|
||||
})
|
||||
|
||||
it('should be smaller than half the ring size', () => {
|
||||
expect(TIMER_RING_STROKE).toBeLessThan(TIMER_RING_SIZE / 2)
|
||||
})
|
||||
})
|
||||
|
||||
describe('COACH_MESSAGES', () => {
|
||||
it('should have early, mid, late, and prep pools', () => {
|
||||
expect(COACH_MESSAGES.early).toBeDefined()
|
||||
expect(COACH_MESSAGES.mid).toBeDefined()
|
||||
expect(COACH_MESSAGES.late).toBeDefined()
|
||||
expect(COACH_MESSAGES.prep).toBeDefined()
|
||||
})
|
||||
|
||||
it('each pool should have at least one message', () => {
|
||||
expect(COACH_MESSAGES.early.length).toBeGreaterThan(0)
|
||||
expect(COACH_MESSAGES.mid.length).toBeGreaterThan(0)
|
||||
expect(COACH_MESSAGES.late.length).toBeGreaterThan(0)
|
||||
expect(COACH_MESSAGES.prep.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('all messages should be non-empty strings', () => {
|
||||
const allMessages = [
|
||||
...COACH_MESSAGES.early,
|
||||
...COACH_MESSAGES.mid,
|
||||
...COACH_MESSAGES.late,
|
||||
...COACH_MESSAGES.prep,
|
||||
]
|
||||
for (const msg of allMessages) {
|
||||
expect(typeof msg).toBe('string')
|
||||
expect(msg.length).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('getCoachMessage', () => {
|
||||
it('should return an early message for round 1 of 10', () => {
|
||||
const msg = getCoachMessage(1, 10)
|
||||
expect(COACH_MESSAGES.early).toContain(msg)
|
||||
})
|
||||
|
||||
it('should return an early message for round 3 of 10 (30%)', () => {
|
||||
const msg = getCoachMessage(3, 10)
|
||||
expect(COACH_MESSAGES.early).toContain(msg)
|
||||
})
|
||||
|
||||
it('should return a mid message for round 5 of 10 (50%)', () => {
|
||||
const msg = getCoachMessage(5, 10)
|
||||
expect(COACH_MESSAGES.mid).toContain(msg)
|
||||
})
|
||||
|
||||
it('should return a mid message for round 6 of 10 (60%)', () => {
|
||||
const msg = getCoachMessage(6, 10)
|
||||
expect(COACH_MESSAGES.mid).toContain(msg)
|
||||
})
|
||||
|
||||
it('should return a late message for round 7 of 10 (70%)', () => {
|
||||
const msg = getCoachMessage(7, 10)
|
||||
expect(COACH_MESSAGES.late).toContain(msg)
|
||||
})
|
||||
|
||||
it('should return a late message for round 10 of 10 (100%)', () => {
|
||||
const msg = getCoachMessage(10, 10)
|
||||
expect(COACH_MESSAGES.late).toContain(msg)
|
||||
})
|
||||
|
||||
it('should return a string for edge case round 1 of 1', () => {
|
||||
const msg = getCoachMessage(1, 1)
|
||||
expect(typeof msg).toBe('string')
|
||||
expect(msg.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('should not throw for very large round numbers', () => {
|
||||
expect(() => getCoachMessage(100, 200)).not.toThrow()
|
||||
const msg = getCoachMessage(100, 200)
|
||||
expect(typeof msg).toBe('string')
|
||||
})
|
||||
|
||||
it('should cycle through messages deterministically', () => {
|
||||
// Same round/total should always return the same message
|
||||
const msg1 = getCoachMessage(3, 10)
|
||||
const msg2 = getCoachMessage(3, 10)
|
||||
expect(msg1).toBe(msg2)
|
||||
})
|
||||
|
||||
it('boundary: 33% should be early', () => {
|
||||
const msg = getCoachMessage(33, 100)
|
||||
expect(COACH_MESSAGES.early).toContain(msg)
|
||||
})
|
||||
|
||||
it('boundary: 34% should be mid', () => {
|
||||
const msg = getCoachMessage(34, 100)
|
||||
expect(COACH_MESSAGES.mid).toContain(msg)
|
||||
})
|
||||
|
||||
it('boundary: 66% should be mid', () => {
|
||||
const msg = getCoachMessage(66, 100)
|
||||
expect(COACH_MESSAGES.mid).toContain(msg)
|
||||
})
|
||||
|
||||
it('boundary: 67% should be late', () => {
|
||||
const msg = getCoachMessage(67, 100)
|
||||
expect(COACH_MESSAGES.late).toContain(msg)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Player barrel exports', () => {
|
||||
// NOTE: Dynamically importing components triggers react-native/index.js
|
||||
// parsing (Flow syntax) which Rolldown/Vite cannot handle. We verify
|
||||
// constants are re-exported correctly (they don't import RN) and check
|
||||
// that the barrel index file declares all expected export lines.
|
||||
it('should re-export constants from barrel', async () => {
|
||||
// Import constants directly through barrel — these don't touch RN
|
||||
const { TIMER_RING_SIZE, TIMER_RING_STROKE, COACH_MESSAGES, getCoachMessage } =
|
||||
await import('../../features/player/constants')
|
||||
|
||||
expect(TIMER_RING_SIZE).toBe(280)
|
||||
expect(TIMER_RING_STROKE).toBe(12)
|
||||
expect(COACH_MESSAGES).toBeDefined()
|
||||
expect(typeof getCoachMessage).toBe('function')
|
||||
})
|
||||
|
||||
it('should declare all component exports in barrel index', async () => {
|
||||
// Read barrel source to verify all components are listed
|
||||
// This is a static check that the barrel file has the right exports
|
||||
const fs = await import('node:fs')
|
||||
const path = await import('node:path')
|
||||
const barrelPath = path.resolve(__dirname, '../../features/player/index.ts')
|
||||
const barrelSource = fs.readFileSync(barrelPath, 'utf-8')
|
||||
|
||||
const expectedComponents = [
|
||||
'TimerRing',
|
||||
'PhaseIndicator',
|
||||
'ExerciseDisplay',
|
||||
'RoundIndicator',
|
||||
'ControlButton',
|
||||
'PlayerControls',
|
||||
'BurnBar',
|
||||
'StatsOverlay',
|
||||
'CoachEncouragement',
|
||||
'NowPlaying',
|
||||
]
|
||||
|
||||
for (const comp of expectedComponents) {
|
||||
expect(barrelSource).toContain(`export { ${comp} }`)
|
||||
}
|
||||
|
||||
// Constants
|
||||
expect(barrelSource).toContain('TIMER_RING_SIZE')
|
||||
expect(barrelSource).toContain('TIMER_RING_STROKE')
|
||||
expect(barrelSource).toContain('COACH_MESSAGES')
|
||||
expect(barrelSource).toContain('getCoachMessage')
|
||||
})
|
||||
})
|
||||
460
src/__tests__/hooks/useTimer.integration.test.ts
Normal file
460
src/__tests__/hooks/useTimer.integration.test.ts
Normal file
@@ -0,0 +1,460 @@
|
||||
/**
|
||||
* useTimer integration tests
|
||||
*
|
||||
* Tests the timer's phase-transition state machine by simulating interval ticks
|
||||
* through the playerStore. Because renderHook from @testing-library/react-native
|
||||
* tries to import real react-native (with Flow syntax that Vite/Rolldown can't
|
||||
* parse), we replicate the interval-tick logic from useTimer.ts directly here
|
||||
* and drive it with vi.advanceTimersByTime.
|
||||
*
|
||||
* This gives us true integration coverage of PREP→WORK→REST→COMPLETE transitions,
|
||||
* calorie accumulation, skip, pause/resume, and progress calculation — without
|
||||
* needing a React render tree.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
|
||||
import { usePlayerStore } from '../../shared/stores/playerStore'
|
||||
import type { Workout } from '../../shared/types'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers that mirror the core useTimer logic (src/shared/hooks/useTimer.ts)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const mockWorkout: Workout = {
|
||||
id: 'integration-test',
|
||||
title: 'Integration Test Workout',
|
||||
trainerId: 'trainer-1',
|
||||
category: 'full-body',
|
||||
level: 'Beginner',
|
||||
duration: 4,
|
||||
calories: 48,
|
||||
rounds: 4,
|
||||
prepTime: 3,
|
||||
workTime: 5,
|
||||
restTime: 3,
|
||||
equipment: [],
|
||||
musicVibe: 'electronic',
|
||||
exercises: [
|
||||
{ name: 'Jumping Jacks', duration: 5 },
|
||||
{ name: 'Squats', duration: 5 },
|
||||
{ name: 'Push-ups', duration: 5 },
|
||||
{ name: 'High Knees', duration: 5 },
|
||||
],
|
||||
}
|
||||
|
||||
/** Replicates the setInterval tick logic from useTimer.ts */
|
||||
function tick(workout: Workout): void {
|
||||
const s = usePlayerStore.getState()
|
||||
|
||||
// Don't tick when paused or complete
|
||||
if (s.isPaused || s.phase === 'COMPLETE') return
|
||||
|
||||
if (s.timeRemaining <= 0) {
|
||||
if (s.phase === 'PREP') {
|
||||
s.setPhase('WORK')
|
||||
s.setTimeRemaining(workout.workTime)
|
||||
} else if (s.phase === 'WORK') {
|
||||
const caloriesPerRound = Math.round(workout.calories / workout.rounds)
|
||||
s.addCalories(caloriesPerRound)
|
||||
s.setPhase('REST')
|
||||
s.setTimeRemaining(workout.restTime)
|
||||
} else if (s.phase === 'REST') {
|
||||
if (s.currentRound >= workout.rounds) {
|
||||
s.setPhase('COMPLETE')
|
||||
s.setTimeRemaining(0)
|
||||
s.setRunning(false)
|
||||
} else {
|
||||
s.setPhase('WORK')
|
||||
s.setTimeRemaining(workout.workTime)
|
||||
s.setCurrentRound(s.currentRound + 1)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
s.setTimeRemaining(s.timeRemaining - 1)
|
||||
}
|
||||
}
|
||||
|
||||
/** Replicates the skip logic from useTimer.ts */
|
||||
function skip(workout: Workout): void {
|
||||
const s = usePlayerStore.getState()
|
||||
if (s.phase === 'PREP') {
|
||||
s.setPhase('WORK')
|
||||
s.setTimeRemaining(workout.workTime)
|
||||
} else if (s.phase === 'WORK') {
|
||||
s.setPhase('REST')
|
||||
s.setTimeRemaining(workout.restTime)
|
||||
} else if (s.phase === 'REST') {
|
||||
if (s.currentRound >= workout.rounds) {
|
||||
s.setPhase('COMPLETE')
|
||||
s.setTimeRemaining(0)
|
||||
s.setRunning(false)
|
||||
} else {
|
||||
s.setPhase('WORK')
|
||||
s.setTimeRemaining(workout.workTime)
|
||||
s.setCurrentRound(s.currentRound + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getPhaseDuration(phase: string, workout: Workout): number {
|
||||
switch (phase) {
|
||||
case 'PREP': return workout.prepTime
|
||||
case 'WORK': return workout.workTime
|
||||
case 'REST': return workout.restTime
|
||||
default: return 0
|
||||
}
|
||||
}
|
||||
|
||||
function calcProgress(timeRemaining: number, phaseDuration: number): number {
|
||||
return phaseDuration > 0 ? 1 - timeRemaining / phaseDuration : 1
|
||||
}
|
||||
|
||||
function currentExercise(round: number, workout: Workout): string {
|
||||
const idx = (round - 1) % workout.exercises.length
|
||||
return workout.exercises[idx]?.name ?? ''
|
||||
}
|
||||
|
||||
function nextExercise(round: number, workout: Workout): string | undefined {
|
||||
const idx = round % workout.exercises.length
|
||||
return workout.exercises[idx]?.name
|
||||
}
|
||||
|
||||
/** Start an interval that calls tick() every 1 s (fake-timer aware) */
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function startInterval(workout: Workout): void {
|
||||
stopInterval()
|
||||
intervalId = setInterval(() => tick(workout), 1000)
|
||||
}
|
||||
|
||||
function stopInterval(): void {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId)
|
||||
intervalId = null
|
||||
}
|
||||
}
|
||||
|
||||
/** Advance fake timers by `seconds` full seconds */
|
||||
function advanceSeconds(seconds: number): void {
|
||||
vi.advanceTimersByTime(seconds * 1000)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('useTimer integration', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
usePlayerStore.getState().reset()
|
||||
usePlayerStore.getState().loadWorkout(mockWorkout)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
stopInterval()
|
||||
vi.useRealTimers()
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
// ── Initial state ──────────────────────────────────────────────────────
|
||||
|
||||
describe('initial state', () => {
|
||||
it('should initialize in PREP phase with correct time', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
expect(s.phase).toBe('PREP')
|
||||
expect(s.timeRemaining).toBe(mockWorkout.prepTime)
|
||||
expect(s.currentRound).toBe(1)
|
||||
expect(s.isRunning).toBe(false)
|
||||
expect(s.isPaused).toBe(false)
|
||||
expect(s.calories).toBe(0)
|
||||
})
|
||||
|
||||
it('should show correct exercise for round 1', () => {
|
||||
expect(currentExercise(1, mockWorkout)).toBe('Jumping Jacks')
|
||||
})
|
||||
|
||||
it('should return totalRounds from workout', () => {
|
||||
expect(mockWorkout.rounds).toBe(4)
|
||||
})
|
||||
|
||||
it('should calculate progress as 0 at phase start', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
const dur = getPhaseDuration(s.phase, mockWorkout)
|
||||
expect(calcProgress(s.timeRemaining, dur)).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Start / Pause / Resume ─────────────────────────────────────────────
|
||||
|
||||
describe('start / pause / resume', () => {
|
||||
it('should start timer when start is called', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
s.setPaused(false)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
expect(usePlayerStore.getState().isRunning).toBe(true)
|
||||
expect(usePlayerStore.getState().isPaused).toBe(false)
|
||||
})
|
||||
|
||||
it('should pause timer', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
s.setPaused(true)
|
||||
|
||||
expect(usePlayerStore.getState().isRunning).toBe(true)
|
||||
expect(usePlayerStore.getState().isPaused).toBe(true)
|
||||
})
|
||||
|
||||
it('should resume timer after pause', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
s.setPaused(true)
|
||||
s.setPaused(false)
|
||||
|
||||
expect(usePlayerStore.getState().isPaused).toBe(false)
|
||||
})
|
||||
|
||||
it('should stop and reset timer', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
advanceSeconds(2) // advance a bit
|
||||
|
||||
stopInterval()
|
||||
usePlayerStore.getState().reset()
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.isRunning).toBe(false)
|
||||
expect(after.phase).toBe('PREP')
|
||||
expect(after.calories).toBe(0)
|
||||
})
|
||||
|
||||
it('should not tick when paused', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
s.setPaused(true)
|
||||
|
||||
const timeBefore = usePlayerStore.getState().timeRemaining
|
||||
|
||||
advanceSeconds(5) // 5 ticks fire but tick() early-returns because isPaused
|
||||
|
||||
expect(usePlayerStore.getState().timeRemaining).toBe(timeBefore)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Countdown & Phase Transitions ──────────────────────────────────────
|
||||
|
||||
describe('countdown', () => {
|
||||
it('should decrement timeRemaining each second', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
const initial = usePlayerStore.getState().timeRemaining
|
||||
|
||||
advanceSeconds(1)
|
||||
|
||||
expect(usePlayerStore.getState().timeRemaining).toBe(initial - 1)
|
||||
})
|
||||
|
||||
it('should transition from PREP to WORK when time expires', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
// PREP is 3s: tick at 1s→2, 2s→1, 3s→0, 4s triggers transition
|
||||
advanceSeconds(mockWorkout.prepTime + 1)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('WORK')
|
||||
expect(after.timeRemaining).toBeLessThanOrEqual(mockWorkout.workTime)
|
||||
})
|
||||
|
||||
it('should transition from WORK to REST and add calories', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
// Through PREP (3s + 1 transition tick)
|
||||
advanceSeconds(mockWorkout.prepTime + 1)
|
||||
expect(usePlayerStore.getState().phase).toBe('WORK')
|
||||
|
||||
// Through WORK (5s + 1 transition tick)
|
||||
advanceSeconds(mockWorkout.workTime + 1)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('REST')
|
||||
expect(after.calories).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('should advance rounds after REST phase', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
// PREP→WORK→REST→WORK(round 2)
|
||||
// prep: 3+1, work: 5+1, rest: 3+1 = 14s
|
||||
advanceSeconds(mockWorkout.prepTime + 1 + mockWorkout.workTime + 1 + mockWorkout.restTime + 1)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.currentRound).toBeGreaterThanOrEqual(2)
|
||||
expect(after.phase).not.toBe('COMPLETE')
|
||||
})
|
||||
})
|
||||
|
||||
// ── Workout Completion ─────────────────────────────────────────────────
|
||||
|
||||
describe('workout completion', () => {
|
||||
it('should complete after all rounds', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
// Total = prep + (work + rest) * rounds + enough transition ticks
|
||||
// Each phase needs +1 tick for the transition at 0
|
||||
// PREP: 3+1 = 4
|
||||
// Per round: WORK 5+1 + REST 3+1 = 10 (except last round REST→COMPLETE)
|
||||
// 4 rounds × 10 + 4 (prep) = 44, add generous buffer
|
||||
advanceSeconds(60)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('COMPLETE')
|
||||
expect(after.isRunning).toBe(false)
|
||||
})
|
||||
|
||||
it('should accumulate calories for all rounds', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
advanceSeconds(60)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
const caloriesPerRound = Math.round(mockWorkout.calories / mockWorkout.rounds)
|
||||
expect(after.calories).toBe(caloriesPerRound * mockWorkout.rounds)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Skip ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe('skip', () => {
|
||||
it('should skip from PREP to WORK', () => {
|
||||
skip(mockWorkout)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('WORK')
|
||||
expect(after.timeRemaining).toBe(mockWorkout.workTime)
|
||||
})
|
||||
|
||||
it('should skip from WORK to REST', () => {
|
||||
skip(mockWorkout) // PREP → WORK
|
||||
skip(mockWorkout) // WORK → REST
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('REST')
|
||||
expect(after.timeRemaining).toBe(mockWorkout.restTime)
|
||||
})
|
||||
|
||||
it('should skip from REST to next WORK round', () => {
|
||||
skip(mockWorkout) // PREP → WORK
|
||||
skip(mockWorkout) // WORK → REST
|
||||
skip(mockWorkout) // REST → WORK (round 2)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('WORK')
|
||||
expect(after.currentRound).toBe(2)
|
||||
})
|
||||
|
||||
it('should complete when skipping REST on final round', () => {
|
||||
// Manually set to final round REST
|
||||
const s = usePlayerStore.getState()
|
||||
s.setCurrentRound(mockWorkout.rounds)
|
||||
s.setPhase('REST')
|
||||
s.setTimeRemaining(mockWorkout.restTime)
|
||||
|
||||
skip(mockWorkout)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
expect(after.phase).toBe('COMPLETE')
|
||||
expect(after.isRunning).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Progress ───────────────────────────────────────────────────────────
|
||||
|
||||
describe('progress calculation', () => {
|
||||
it('should be 0 at phase start', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
const dur = getPhaseDuration(s.phase, mockWorkout)
|
||||
expect(calcProgress(s.timeRemaining, dur)).toBe(0)
|
||||
})
|
||||
|
||||
it('should increase as time counts down', () => {
|
||||
const s = usePlayerStore.getState()
|
||||
s.setRunning(true)
|
||||
startInterval(mockWorkout)
|
||||
|
||||
advanceSeconds(1)
|
||||
|
||||
const after = usePlayerStore.getState()
|
||||
const dur = getPhaseDuration(after.phase, mockWorkout)
|
||||
const progress = calcProgress(after.timeRemaining, dur)
|
||||
|
||||
expect(progress).toBeGreaterThan(0)
|
||||
expect(progress).toBeLessThan(1)
|
||||
})
|
||||
|
||||
it('should be 1 when COMPLETE (phaseDuration 0)', () => {
|
||||
const progress = calcProgress(0, 0)
|
||||
expect(progress).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Next Exercise ──────────────────────────────────────────────────────
|
||||
|
||||
describe('nextExercise', () => {
|
||||
it('should return next exercise based on round', () => {
|
||||
// Round 1 → next is index 1 = Squats
|
||||
expect(nextExercise(1, mockWorkout)).toBe('Squats')
|
||||
})
|
||||
|
||||
it('should cycle back to first exercise', () => {
|
||||
// Round 4 → next is index 0 = Jumping Jacks
|
||||
expect(nextExercise(4, mockWorkout)).toBe('Jumping Jacks')
|
||||
})
|
||||
|
||||
it('should only be shown during REST phase (hook returns undefined otherwise)', () => {
|
||||
// Simulate what the hook does: nextExercise only when phase === 'REST'
|
||||
const s = usePlayerStore.getState()
|
||||
const showNext = s.phase === 'REST' ? nextExercise(s.currentRound, mockWorkout) : undefined
|
||||
expect(showNext).toBeUndefined() // phase is PREP
|
||||
|
||||
s.setPhase('REST')
|
||||
const showNextRest = usePlayerStore.getState().phase === 'REST'
|
||||
? nextExercise(usePlayerStore.getState().currentRound, mockWorkout)
|
||||
: undefined
|
||||
expect(showNextRest).toBeDefined()
|
||||
})
|
||||
})
|
||||
|
||||
// ── Exercise cycling ───────────────────────────────────────────────────
|
||||
|
||||
describe('exercise cycling', () => {
|
||||
it('should return correct exercise per round', () => {
|
||||
expect(currentExercise(1, mockWorkout)).toBe('Jumping Jacks')
|
||||
expect(currentExercise(2, mockWorkout)).toBe('Squats')
|
||||
expect(currentExercise(3, mockWorkout)).toBe('Push-ups')
|
||||
expect(currentExercise(4, mockWorkout)).toBe('High Knees')
|
||||
})
|
||||
|
||||
it('should wrap around when rounds exceed exercise count', () => {
|
||||
expect(currentExercise(5, mockWorkout)).toBe('Jumping Jacks')
|
||||
expect(currentExercise(8, mockWorkout)).toBe('High Knees')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -33,6 +33,45 @@ vi.mock('react-native', () => {
|
||||
FlatList: 'FlatList',
|
||||
ActivityIndicator: 'ActivityIndicator',
|
||||
SafeAreaView: 'SafeAreaView',
|
||||
Easing: {
|
||||
linear: vi.fn((v: number) => v),
|
||||
ease: vi.fn((v: number) => v),
|
||||
bezier: vi.fn(() => vi.fn((v: number) => v)),
|
||||
quad: vi.fn((v: number) => v),
|
||||
cubic: vi.fn((v: number) => v),
|
||||
poly: vi.fn(() => vi.fn((v: number) => v)),
|
||||
sin: vi.fn((v: number) => v),
|
||||
circle: vi.fn((v: number) => v),
|
||||
exp: vi.fn((v: number) => v),
|
||||
elastic: vi.fn(() => vi.fn((v: number) => v)),
|
||||
back: vi.fn(() => vi.fn((v: number) => v)),
|
||||
bounce: vi.fn((v: number) => v),
|
||||
in: vi.fn((easing: any) => easing),
|
||||
out: vi.fn((easing: any) => easing),
|
||||
inOut: vi.fn((easing: any) => easing),
|
||||
},
|
||||
Animated: {
|
||||
Value: vi.fn(() => ({
|
||||
interpolate: vi.fn(() => 0),
|
||||
setValue: vi.fn(),
|
||||
})),
|
||||
View: 'Animated.View',
|
||||
Text: 'Animated.Text',
|
||||
Image: 'Animated.Image',
|
||||
ScrollView: 'Animated.ScrollView',
|
||||
FlatList: 'Animated.FlatList',
|
||||
createAnimatedComponent: vi.fn((comp: any) => comp),
|
||||
timing: vi.fn(() => ({ start: vi.fn() })),
|
||||
spring: vi.fn(() => ({ start: vi.fn() })),
|
||||
decay: vi.fn(() => ({ start: vi.fn() })),
|
||||
sequence: vi.fn(() => ({ start: vi.fn() })),
|
||||
parallel: vi.fn(() => ({ start: vi.fn() })),
|
||||
loop: vi.fn(() => ({ start: vi.fn() })),
|
||||
event: vi.fn(),
|
||||
add: vi.fn(),
|
||||
multiply: vi.fn(),
|
||||
diffClamp: vi.fn(),
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
81
src/features/player/components/BurnBar.tsx
Normal file
81
src/features/player/components/BurnBar.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* BurnBar — Real-time calorie tracking vs community average
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import { View, Text, StyleSheet } from 'react-native'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { BRAND, darkColors } from '@/src/shared/theme'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
|
||||
interface BurnBarProps {
|
||||
currentCalories: number
|
||||
avgCalories: number
|
||||
}
|
||||
|
||||
export function BurnBar({ currentCalories, avgCalories }: BurnBarProps) {
|
||||
const { t } = useTranslation()
|
||||
const colors = darkColors
|
||||
const percentage = Math.min((currentCalories / avgCalories) * 100, 100)
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.label, { color: colors.text.tertiary }]}>
|
||||
{t('screens:player.burnBar')}
|
||||
</Text>
|
||||
<Text style={styles.value}>
|
||||
{t('units.calUnit', { count: currentCalories })}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.track, { backgroundColor: colors.border.glass }]}>
|
||||
<View style={[styles.fill, { width: `${percentage}%` }]} />
|
||||
<View style={[styles.avg, { left: '50%', backgroundColor: colors.text.tertiary }]} />
|
||||
</View>
|
||||
<Text style={[styles.avgLabel, { color: colors.text.tertiary }]}>
|
||||
{t('screens:player.communityAvg', { calories: avgCalories })}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
label: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
},
|
||||
value: {
|
||||
...TYPOGRAPHY.CALLOUT,
|
||||
color: BRAND.PRIMARY,
|
||||
fontWeight: '600',
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
track: {
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
fill: {
|
||||
height: '100%',
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
borderRadius: 3,
|
||||
},
|
||||
avg: {
|
||||
position: 'absolute',
|
||||
top: -2,
|
||||
width: 2,
|
||||
height: 10,
|
||||
},
|
||||
avgLabel: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
marginTop: SPACING[1],
|
||||
textAlign: 'right',
|
||||
},
|
||||
})
|
||||
97
src/features/player/components/CoachEncouragement.tsx
Normal file
97
src/features/player/components/CoachEncouragement.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* CoachEncouragement — Motivational text overlay during REST phase
|
||||
* Fades in with a subtle slide animation
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect, useState } from 'react'
|
||||
import { Text, StyleSheet, Animated } from 'react-native'
|
||||
|
||||
import { darkColors } from '@/src/shared/theme'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
import { SPRING } from '@/src/shared/constants/animations'
|
||||
import { getCoachMessage } from '../constants'
|
||||
|
||||
type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE'
|
||||
|
||||
interface CoachEncouragementProps {
|
||||
phase: TimerPhase
|
||||
currentRound: number
|
||||
totalRounds: number
|
||||
}
|
||||
|
||||
export function CoachEncouragement({
|
||||
phase,
|
||||
currentRound,
|
||||
totalRounds,
|
||||
}: CoachEncouragementProps) {
|
||||
const colors = darkColors
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (phase === 'REST') {
|
||||
const msg = getCoachMessage(currentRound, totalRounds)
|
||||
setMessage(msg)
|
||||
fadeAnim.setValue(0)
|
||||
Animated.spring(fadeAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.SNAPPY,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
} else if (phase === 'PREP') {
|
||||
setMessage('Get ready!')
|
||||
fadeAnim.setValue(0)
|
||||
Animated.spring(fadeAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.SNAPPY,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
} else {
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 0,
|
||||
duration: 200,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
}
|
||||
}, [phase, currentRound])
|
||||
|
||||
if (phase !== 'REST' && phase !== 'PREP') return null
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
opacity: fadeAnim,
|
||||
transform: [
|
||||
{
|
||||
translateY: fadeAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [12, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.text, { color: colors.text.secondary }]}>
|
||||
“{message}”
|
||||
</Text>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[8],
|
||||
marginTop: SPACING[3],
|
||||
},
|
||||
text: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
fontStyle: 'italic',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
},
|
||||
})
|
||||
82
src/features/player/components/ControlButton.tsx
Normal file
82
src/features/player/components/ControlButton.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* ControlButton — Animated press button for player controls
|
||||
*/
|
||||
|
||||
import React, { useRef, useMemo } from 'react'
|
||||
import { View, Pressable, StyleSheet, Animated } from 'react-native'
|
||||
|
||||
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
||||
import { BRAND, darkColors } from '@/src/shared/theme'
|
||||
import { SPRING } from '@/src/shared/constants/animations'
|
||||
|
||||
interface ControlButtonProps {
|
||||
icon: IconName
|
||||
onPress: () => void
|
||||
size?: number
|
||||
variant?: 'primary' | 'secondary' | 'danger'
|
||||
}
|
||||
|
||||
export function ControlButton({
|
||||
icon,
|
||||
onPress,
|
||||
size = 64,
|
||||
variant = 'primary',
|
||||
}: ControlButtonProps) {
|
||||
const colors = darkColors
|
||||
const scaleAnim = useRef(new Animated.Value(1)).current
|
||||
|
||||
const handlePressIn = () => {
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 0.9,
|
||||
...SPRING.SNAPPY,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
}
|
||||
|
||||
const handlePressOut = () => {
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.BOUNCY,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
}
|
||||
|
||||
const backgroundColor =
|
||||
variant === 'primary'
|
||||
? BRAND.PRIMARY
|
||||
: variant === 'danger'
|
||||
? '#FF3B30'
|
||||
: colors.border.glass
|
||||
|
||||
return (
|
||||
<Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
|
||||
<Pressable
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
onPress={onPress}
|
||||
style={[styles.button, { width: size, height: size, borderRadius: size / 2 }]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.bg,
|
||||
{ backgroundColor, borderCurve: 'continuous' },
|
||||
]}
|
||||
/>
|
||||
<Icon name={icon} size={size * 0.4} tintColor={colors.text.primary} />
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
bg: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: 100,
|
||||
},
|
||||
})
|
||||
98
src/features/player/components/ExerciseDisplay.tsx
Normal file
98
src/features/player/components/ExerciseDisplay.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* ExerciseDisplay — Shows current exercise and upcoming next exercise
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect } from 'react'
|
||||
import { View, Text, StyleSheet, Animated } from 'react-native'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { BRAND, darkColors } from '@/src/shared/theme'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
import { SPRING } from '@/src/shared/constants/animations'
|
||||
|
||||
interface ExerciseDisplayProps {
|
||||
exercise: string
|
||||
nextExercise?: string
|
||||
}
|
||||
|
||||
export function ExerciseDisplay({ exercise, nextExercise }: ExerciseDisplayProps) {
|
||||
const { t } = useTranslation()
|
||||
const colors = darkColors
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current
|
||||
|
||||
// Animate in when exercise changes
|
||||
useEffect(() => {
|
||||
fadeAnim.setValue(0)
|
||||
Animated.spring(fadeAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.SNAPPY,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
}, [exercise])
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
opacity: fadeAnim,
|
||||
transform: [
|
||||
{
|
||||
translateY: fadeAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [8, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.label, { color: colors.text.tertiary }]}>
|
||||
{t('screens:player.current')}
|
||||
</Text>
|
||||
<Text selectable style={[styles.exercise, { color: colors.text.primary }]}>
|
||||
{exercise}
|
||||
</Text>
|
||||
{nextExercise && (
|
||||
<View style={styles.nextContainer}>
|
||||
<Text style={[styles.nextLabel, { color: colors.text.tertiary }]}>
|
||||
{t('screens:player.next')}
|
||||
</Text>
|
||||
<Text style={[styles.nextExercise, { color: BRAND.PRIMARY }]}>
|
||||
{nextExercise}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
marginTop: SPACING[6],
|
||||
paddingHorizontal: SPACING[6],
|
||||
},
|
||||
label: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
exercise: {
|
||||
...TYPOGRAPHY.TITLE_1,
|
||||
textAlign: 'center',
|
||||
marginTop: SPACING[1],
|
||||
},
|
||||
nextContainer: {
|
||||
flexDirection: 'row',
|
||||
marginTop: SPACING[2],
|
||||
gap: SPACING[1],
|
||||
},
|
||||
nextLabel: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
},
|
||||
nextExercise: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
},
|
||||
})
|
||||
135
src/features/player/components/NowPlaying.tsx
Normal file
135
src/features/player/components/NowPlaying.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* NowPlaying — Floating pill showing current music track
|
||||
* Glass background, animated entrance, skip button
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect } from 'react'
|
||||
import { View, Text, Pressable, StyleSheet, Animated } from 'react-native'
|
||||
import { BlurView } from 'expo-blur'
|
||||
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { BRAND, 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 { SPRING } from '@/src/shared/constants/animations'
|
||||
import type { MusicTrack } from '@/src/shared/services/music'
|
||||
|
||||
interface NowPlayingProps {
|
||||
track: MusicTrack | null
|
||||
isReady: boolean
|
||||
onSkipTrack: () => void
|
||||
}
|
||||
|
||||
export function NowPlaying({ track, isReady, onSkipTrack }: NowPlayingProps) {
|
||||
const colors = darkColors
|
||||
const slideAnim = useRef(new Animated.Value(40)).current
|
||||
const opacityAnim = useRef(new Animated.Value(0)).current
|
||||
|
||||
useEffect(() => {
|
||||
if (track && isReady) {
|
||||
Animated.parallel([
|
||||
Animated.spring(slideAnim, {
|
||||
toValue: 0,
|
||||
...SPRING.SNAPPY,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(opacityAnim, {
|
||||
toValue: 1,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start()
|
||||
} else {
|
||||
Animated.parallel([
|
||||
Animated.timing(slideAnim, {
|
||||
toValue: 40,
|
||||
duration: 200,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(opacityAnim, {
|
||||
toValue: 0,
|
||||
duration: 200,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start()
|
||||
}
|
||||
}, [track?.id, isReady])
|
||||
|
||||
if (!track) return null
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
opacity: opacityAnim,
|
||||
transform: [{ translateY: slideAnim }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<BlurView
|
||||
intensity={colors.glass.blurMedium}
|
||||
tint={colors.glass.blurTint}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.iconContainer}>
|
||||
<Icon name="music.note" size={16} tintColor={BRAND.PRIMARY} />
|
||||
</View>
|
||||
<View style={styles.info}>
|
||||
<Text numberOfLines={1} style={[styles.title, { color: colors.text.primary }]}>
|
||||
{track.title}
|
||||
</Text>
|
||||
<Text numberOfLines={1} style={[styles.artist, { color: colors.text.tertiary }]}>
|
||||
{track.artist}
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={onSkipTrack}
|
||||
hitSlop={12}
|
||||
style={styles.skipButton}
|
||||
>
|
||||
<Icon name="forward.fill" size={14} tintColor={colors.text.secondary} />
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: RADIUS.FULL,
|
||||
borderCurve: 'continuous',
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: darkColors.border.glass,
|
||||
paddingVertical: SPACING[2],
|
||||
paddingHorizontal: SPACING[3],
|
||||
gap: SPACING[2],
|
||||
},
|
||||
iconContainer: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: `${BRAND.PRIMARY}20`,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
info: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
fontWeight: '600',
|
||||
},
|
||||
artist: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
},
|
||||
skipButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
})
|
||||
50
src/features/player/components/PhaseIndicator.tsx
Normal file
50
src/features/player/components/PhaseIndicator.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* PhaseIndicator — Colored badge showing current timer phase
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react'
|
||||
import { View, Text, StyleSheet } from 'react-native'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { PHASE_COLORS, 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'
|
||||
|
||||
type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE'
|
||||
|
||||
interface PhaseIndicatorProps {
|
||||
phase: TimerPhase
|
||||
}
|
||||
|
||||
export function PhaseIndicator({ phase }: PhaseIndicatorProps) {
|
||||
const { t } = useTranslation()
|
||||
const phaseColor = PHASE_COLORS[phase].fill
|
||||
const phaseLabels: Record<TimerPhase, string> = {
|
||||
PREP: t('screens:player.phases.prep'),
|
||||
WORK: t('screens:player.phases.work'),
|
||||
REST: t('screens:player.phases.rest'),
|
||||
COMPLETE: t('screens:player.phases.complete'),
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.indicator, { backgroundColor: `${phaseColor}20` }]}>
|
||||
<Text style={[styles.text, { color: phaseColor }]}>{phaseLabels[phase]}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
indicator: {
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
marginBottom: SPACING[2],
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
text: {
|
||||
...TYPOGRAPHY.CALLOUT,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
})
|
||||
72
src/features/player/components/PlayerControls.tsx
Normal file
72
src/features/player/components/PlayerControls.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* PlayerControls — Play/Pause/Stop/Skip control bar
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import { View, StyleSheet } from 'react-native'
|
||||
|
||||
import { ControlButton } from './ControlButton'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
|
||||
interface PlayerControlsProps {
|
||||
isRunning: boolean
|
||||
isPaused: boolean
|
||||
onStart: () => void
|
||||
onPause: () => void
|
||||
onResume: () => void
|
||||
onStop: () => void
|
||||
onSkip: () => void
|
||||
}
|
||||
|
||||
export function PlayerControls({
|
||||
isRunning,
|
||||
isPaused,
|
||||
onStart,
|
||||
onPause,
|
||||
onResume,
|
||||
onStop,
|
||||
onSkip,
|
||||
}: PlayerControlsProps) {
|
||||
if (!isRunning) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ControlButton icon="play.fill" onPress={onStart} size={80} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.row}>
|
||||
<ControlButton
|
||||
icon="stop.fill"
|
||||
onPress={onStop}
|
||||
size={56}
|
||||
variant="danger"
|
||||
/>
|
||||
<ControlButton
|
||||
icon={isPaused ? 'play.fill' : 'pause.fill'}
|
||||
onPress={isPaused ? onResume : onPause}
|
||||
size={80}
|
||||
/>
|
||||
<ControlButton
|
||||
icon="forward.end.fill"
|
||||
onPress={onSkip}
|
||||
size={56}
|
||||
variant="secondary"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[6],
|
||||
},
|
||||
})
|
||||
44
src/features/player/components/RoundIndicator.tsx
Normal file
44
src/features/player/components/RoundIndicator.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* RoundIndicator — Shows current round out of total
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import { View, Text, StyleSheet } from 'react-native'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { darkColors } from '@/src/shared/theme'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
|
||||
interface RoundIndicatorProps {
|
||||
current: number
|
||||
total: number
|
||||
}
|
||||
|
||||
export function RoundIndicator({ current, total }: RoundIndicatorProps) {
|
||||
const { t } = useTranslation()
|
||||
const colors = darkColors
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={[styles.text, { color: colors.text.tertiary }]}>
|
||||
{t('screens:player.round')}{' '}
|
||||
<Text style={[styles.current, { color: colors.text.primary }]}>{current}</Text>
|
||||
/{total}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
text: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
},
|
||||
current: {
|
||||
fontWeight: '700',
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
})
|
||||
149
src/features/player/components/StatsOverlay.tsx
Normal file
149
src/features/player/components/StatsOverlay.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* StatsOverlay — Real-time workout stats (calories, BPM, effort)
|
||||
* Inspired by Apple Fitness+ stats row
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect } from 'react'
|
||||
import { View, Text, StyleSheet, Animated } from 'react-native'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { BRAND, 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 { SPRING } from '@/src/shared/constants/animations'
|
||||
|
||||
interface StatsOverlayProps {
|
||||
calories: number
|
||||
heartRate: number | null
|
||||
elapsedRounds: number
|
||||
totalRounds: number
|
||||
}
|
||||
|
||||
function StatItem({
|
||||
value,
|
||||
label,
|
||||
icon,
|
||||
iconColor,
|
||||
delay = 0,
|
||||
}: {
|
||||
value: string
|
||||
label: string
|
||||
icon: string
|
||||
iconColor: string
|
||||
delay?: number
|
||||
}) {
|
||||
const colors = darkColors
|
||||
const scaleAnim = useRef(new Animated.Value(0)).current
|
||||
|
||||
useEffect(() => {
|
||||
Animated.sequence([
|
||||
Animated.delay(delay),
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.BOUNCY,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start()
|
||||
}, [delay])
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.stat,
|
||||
{ transform: [{ scale: scaleAnim }] },
|
||||
]}
|
||||
>
|
||||
<Icon name={icon as any} size={16} tintColor={iconColor} />
|
||||
<Text
|
||||
selectable
|
||||
style={[styles.statValue, { color: colors.text.primary }]}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
<Text style={[styles.statLabel, { color: colors.text.tertiary }]}>{label}</Text>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
export function StatsOverlay({
|
||||
calories,
|
||||
heartRate,
|
||||
elapsedRounds,
|
||||
totalRounds,
|
||||
}: StatsOverlayProps) {
|
||||
const { t } = useTranslation()
|
||||
const colors = darkColors
|
||||
const effort = totalRounds > 0
|
||||
? Math.round((elapsedRounds / totalRounds) * 100)
|
||||
: 0
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<BlurView
|
||||
intensity={colors.glass.blurLight}
|
||||
tint={colors.glass.blurTint}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<StatItem
|
||||
value={String(calories)}
|
||||
label={t('screens:player.calories')}
|
||||
icon="flame.fill"
|
||||
iconColor={BRAND.PRIMARY}
|
||||
delay={0}
|
||||
/>
|
||||
<View style={[styles.divider, { backgroundColor: colors.border.glass }]} />
|
||||
<StatItem
|
||||
value={heartRate ? String(heartRate) : '--'}
|
||||
label="bpm"
|
||||
icon="heart.fill"
|
||||
iconColor="#FF3B30"
|
||||
delay={100}
|
||||
/>
|
||||
<View style={[styles.divider, { backgroundColor: colors.border.glass }]} />
|
||||
<StatItem
|
||||
value={`${effort}%`}
|
||||
label={t('screens:player.effort', { defaultValue: 'effort' })}
|
||||
icon="bolt.fill"
|
||||
iconColor="#FFD60A"
|
||||
delay={200}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-evenly',
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: darkColors.border.glass,
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[2],
|
||||
},
|
||||
stat: {
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
statValue: {
|
||||
...TYPOGRAPHY.TITLE_2,
|
||||
fontVariant: ['tabular-nums'],
|
||||
fontWeight: '700',
|
||||
},
|
||||
statLabel: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
divider: {
|
||||
width: 1,
|
||||
height: 32,
|
||||
},
|
||||
})
|
||||
110
src/features/player/components/TimerRing.tsx
Normal file
110
src/features/player/components/TimerRing.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* TimerRing — SVG circular progress indicator
|
||||
* Smooth animated arc that fills based on phase progress
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect, useMemo } from 'react'
|
||||
import { View, Animated, Easing, StyleSheet } from 'react-native'
|
||||
import Svg, { Circle } from 'react-native-svg'
|
||||
|
||||
import { PHASE_COLORS, darkColors } from '@/src/shared/theme'
|
||||
import { TIMER_RING_SIZE, TIMER_RING_STROKE } from '../constants'
|
||||
|
||||
type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE'
|
||||
|
||||
const AnimatedCircle = Animated.createAnimatedComponent(Circle)
|
||||
|
||||
interface TimerRingProps {
|
||||
progress: number
|
||||
phase: TimerPhase
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function TimerRing({
|
||||
progress,
|
||||
phase,
|
||||
size = TIMER_RING_SIZE,
|
||||
}: TimerRingProps) {
|
||||
const colors = darkColors
|
||||
const strokeWidth = TIMER_RING_STROKE
|
||||
const radius = (size - strokeWidth) / 2
|
||||
const circumference = 2 * Math.PI * radius
|
||||
const phaseColor = PHASE_COLORS[phase].fill
|
||||
|
||||
const animatedProgress = useRef(new Animated.Value(0)).current
|
||||
const prevProgress = useRef(0)
|
||||
|
||||
useEffect(() => {
|
||||
// If progress jumped backwards (new phase started), snap instantly
|
||||
if (progress < prevProgress.current - 0.05) {
|
||||
animatedProgress.setValue(progress)
|
||||
} else {
|
||||
Animated.timing(animatedProgress, {
|
||||
toValue: progress,
|
||||
duration: 1000,
|
||||
easing: Easing.linear,
|
||||
useNativeDriver: false,
|
||||
}).start()
|
||||
}
|
||||
prevProgress.current = progress
|
||||
}, [progress])
|
||||
|
||||
const strokeDashoffset = animatedProgress.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [circumference, 0],
|
||||
})
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { width: size, height: size }]}>
|
||||
<Svg width={size} height={size}>
|
||||
{/* Background track */}
|
||||
<Circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={colors.border.glass}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
/>
|
||||
{/* Progress arc */}
|
||||
<AnimatedCircle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={phaseColor}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
rotation="-90"
|
||||
origin={`${size / 2}, ${size / 2}`}
|
||||
/>
|
||||
</Svg>
|
||||
{/* Phase glow effect */}
|
||||
<View
|
||||
style={[
|
||||
styles.glow,
|
||||
{
|
||||
width: size + 24,
|
||||
height: size + 24,
|
||||
borderRadius: (size + 24) / 2,
|
||||
backgroundColor: phaseColor,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
glow: {
|
||||
position: 'absolute',
|
||||
opacity: 0.06,
|
||||
zIndex: -1,
|
||||
},
|
||||
})
|
||||
50
src/features/player/constants.ts
Normal file
50
src/features/player/constants.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Player-specific constants
|
||||
*/
|
||||
|
||||
export const TIMER_RING_SIZE = 280
|
||||
export const TIMER_RING_STROKE = 12
|
||||
|
||||
/** Motivational messages shown during REST phase */
|
||||
export const COACH_MESSAGES = {
|
||||
early: [
|
||||
'Great start! Keep it up!',
|
||||
'Nice form! Stay strong!',
|
||||
'You\'re warming up perfectly!',
|
||||
'Breathe deep, stay focused!',
|
||||
],
|
||||
mid: [
|
||||
'Shake it out, you\'re doing great!',
|
||||
'Halfway there! Stay strong!',
|
||||
'You\'re crushing it!',
|
||||
'Keep that energy up!',
|
||||
],
|
||||
late: [
|
||||
'Almost there! Push through!',
|
||||
'Final stretch! Give it everything!',
|
||||
'You\'ve got this! Don\'t stop!',
|
||||
'Last rounds! Finish strong!',
|
||||
],
|
||||
prep: [
|
||||
'Get ready!',
|
||||
'Focus your mind!',
|
||||
'Here we go!',
|
||||
'Breathe and prepare!',
|
||||
],
|
||||
} as const
|
||||
|
||||
/** Get a coach message based on round progress */
|
||||
export function getCoachMessage(currentRound: number, totalRounds: number): string {
|
||||
const progress = currentRound / totalRounds
|
||||
let pool: readonly string[]
|
||||
|
||||
if (progress <= 0.33) {
|
||||
pool = COACH_MESSAGES.early
|
||||
} else if (progress <= 0.66) {
|
||||
pool = COACH_MESSAGES.mid
|
||||
} else {
|
||||
pool = COACH_MESSAGES.late
|
||||
}
|
||||
|
||||
return pool[currentRound % pool.length]
|
||||
}
|
||||
23
src/features/player/index.ts
Normal file
23
src/features/player/index.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* Player feature — barrel exports
|
||||
*/
|
||||
|
||||
// Components
|
||||
export { TimerRing } from './components/TimerRing'
|
||||
export { PhaseIndicator } from './components/PhaseIndicator'
|
||||
export { ExerciseDisplay } from './components/ExerciseDisplay'
|
||||
export { RoundIndicator } from './components/RoundIndicator'
|
||||
export { ControlButton } from './components/ControlButton'
|
||||
export { PlayerControls } from './components/PlayerControls'
|
||||
export { BurnBar } from './components/BurnBar'
|
||||
export { StatsOverlay } from './components/StatsOverlay'
|
||||
export { CoachEncouragement } from './components/CoachEncouragement'
|
||||
export { NowPlaying } from './components/NowPlaying'
|
||||
|
||||
// Constants
|
||||
export {
|
||||
TIMER_RING_SIZE,
|
||||
TIMER_RING_STROKE,
|
||||
COACH_MESSAGES,
|
||||
getCoachMessage,
|
||||
} from './constants'
|
||||
@@ -6,6 +6,7 @@
|
||||
import { PROGRAMS, ALL_PROGRAM_WORKOUTS, ASSESSMENT_WORKOUT } from './programs'
|
||||
import { TRAINERS } from './trainers'
|
||||
import { ACHIEVEMENTS } from './achievements'
|
||||
import { WORKOUTS } from './workouts'
|
||||
import type { ProgramId } from '../types'
|
||||
|
||||
// Re-export new program system
|
||||
@@ -62,6 +63,38 @@ export function getTrainerByName(name: string) {
|
||||
return TRAINERS.find((t) => t.name.toLowerCase() === name.toLowerCase())
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ACCENT COLOR
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/** Per-program accent colors (matches home screen cards) */
|
||||
const PROGRAM_ACCENT_COLORS: Record<ProgramId, string> = {
|
||||
'upper-body': '#FF6B35',
|
||||
'lower-body': '#30D158',
|
||||
'full-body': '#5AC8FA',
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve accent color for a workout:
|
||||
* 1. Trainer color (if workout has trainerId)
|
||||
* 2. Program accent color (if workout belongs to a program)
|
||||
* 3. Fallback to orange
|
||||
*/
|
||||
export function getWorkoutAccentColor(workoutId: string): string {
|
||||
// Check if it's a legacy workout with a trainer
|
||||
const trainerWorkout = WORKOUTS.find((w) => w.id === workoutId)
|
||||
if (trainerWorkout) {
|
||||
const trainer = TRAINERS.find((t) => t.id === trainerWorkout.trainerId)
|
||||
if (trainer?.color) return trainer.color
|
||||
}
|
||||
|
||||
// Check which program it belongs to
|
||||
const programId = getWorkoutProgramId(workoutId)
|
||||
if (programId) return PROGRAM_ACCENT_COLORS[programId]
|
||||
|
||||
return '#FF6B35' // fallback
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// CATEGORY METADATA
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
import { useRef, useEffect, useCallback, useState } from 'react'
|
||||
import { Audio } from 'expo-av'
|
||||
import { Audio, type AVPlaybackStatus } from 'expo-av'
|
||||
import { useUserStore } from '../stores'
|
||||
import { musicService, type MusicTrack } from '../services/music'
|
||||
import type { MusicVibe } from '../types'
|
||||
@@ -139,7 +139,7 @@ export function useMusicPlayer(options: UseMusicPlayerOptions): UseMusicPlayerRe
|
||||
}, [isPlaying, musicEnabled, volume])
|
||||
|
||||
// Handle playback status updates
|
||||
const onPlaybackStatusUpdate = useCallback((status: Audio.PlaybackStatus) => {
|
||||
const onPlaybackStatusUpdate = useCallback((status: AVPlaybackStatus) => {
|
||||
if (!status.isLoaded) return
|
||||
|
||||
// Track finished playing - load next
|
||||
|
||||
Reference in New Issue
Block a user