feat: close v1 feature gaps — freemium gating, video/audio infrastructure, EAS build config

- Add access control service with 3 free workouts (IDs 1, 11, 43), paywall gating on workout detail and lock indicators on explore grid - Wire VideoPlayer into player background and workout detail preview - Add placeholder HLS video URLs to 5 sample workouts (Apple test streams) - Add test audio URLs to music service MOCK_TRACKS for all vibes - Switch RevenueCat API key to env-based with sandbox fallback - Create eas.json with development/preview/production build profiles - Update app.json with iOS privacy descriptions (HealthKit, Camera) and non-exempt encryption flag - Create collection detail screen (route crash fix) - Replace hardcoded profile stats with real activity store data - Add unlockWithPremium i18n key in EN/FR/DE/ES
2026-03-24 12:20:56 +01:00
parent cd065d07c3
commit a042c348c1
16 changed files with 452 additions and 34 deletions
--- a/app/(tabs)/explore.tsx
+++ b/app/(tabs)/explore.tsx
@@ -8,7 +8,9 @@ import Ionicons from '@expo/vector-icons/Ionicons'

 import { useTranslation } from 'react-i18next'
 import { useHaptics } from '@/src/shared/hooks'
+import { usePurchases } from '@/src/shared/hooks/usePurchases'
 import { useWorkouts, useCollections, useFeaturedWorkouts, useTrainers } from '@/src/shared/hooks/useSupabaseData'
+import { isFreeWorkout } from '@/src/shared/services/access'
 import { StyledText } from '@/src/shared/components/StyledText'

 import { useThemeColors, BRAND } from '@/src/shared/theme'
@@ -108,9 +110,11 @@ function CollectionCard({
 function WorkoutCard({
  workout,
  onPress,
+  isLocked,
 }: {
  workout: Workout
  onPress: () => void
+  isLocked?: boolean
 }) {
  const colors = useThemeColors()
  const categoryColor = CATEGORY_COLORS[workout.category]
@@ -133,9 +137,15 @@ function WorkoutCard({
        </StyledText>
      </View>

+      {isLocked && (
+        <View style={styles.lockBadge}>
+          <Ionicons name="lock-closed" size={10} color="#FFFFFF" />
+        </View>
+      )}
+
      <View style={styles.playArea}>
        <View style={[styles.playCircle, { backgroundColor: categoryColor + '20' }]}>
-          <Ionicons name="play" size={18} color={categoryColor} />
+          <Ionicons name={isLocked ? 'lock-closed' : 'play'} size={18} color={categoryColor} />
        </View>
      </View>

@@ -209,6 +219,7 @@ export default function ExploreScreen() {
  const router = useRouter()
  const haptics = useHaptics()
  const colors = useThemeColors()
+  const { isPremium } = usePurchases()

  const [filters, setFilters] = useState<FilterState>({
    category: 'all',
@@ -319,6 +330,7 @@ export default function ExploreScreen() {
                  key={workout.id}
                  workout={workout}
                  onPress={() => handleWorkoutPress(workout.id)}
+                  isLocked={!isPremium && !isFreeWorkout(workout.id)}
                />
              ))}
            </View>
@@ -398,6 +410,7 @@ export default function ExploreScreen() {
                key={workout.id}
                workout={workout}
                onPress={() => handleWorkoutPress(workout.id)}
+                isLocked={!isPremium && !isFreeWorkout(workout.id)}
              />
            ))}
          </View>
@@ -516,6 +529,17 @@ const styles = StyleSheet.create({
    paddingVertical: 3,
    borderRadius: RADIUS.SM,
  },
+  lockBadge: {
+    position: 'absolute',
+    top: SPACING[3],
+    left: SPACING[3],
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
  playArea: {
    position: 'absolute',
    top: 0,
--- a/app/(tabs)/profile.tsx
+++ b/app/(tabs)/profile.tsx
@@ -18,7 +18,7 @@ import * as Linking from 'expo-linking'
 import Constants from 'expo-constants'
 import { useTranslation } from 'react-i18next'
 import { useMemo, useState } from 'react'
-import { useUserStore } from '@/src/shared/stores'
+import { useUserStore, useActivityStore } from '@/src/shared/stores'
 import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
 import { useThemeColors, BRAND } from '@/src/shared/theme'
 import type { ThemeColors } from '@/src/shared/theme/types'
@@ -78,12 +78,14 @@ export default function ProfileScreen() {
  const planLabel = isPremium ? 'TabataFit+' : t('profile.freePlan')
  const avatarInitial = profile.name?.[0]?.toUpperCase() || 'U'

-  // Mock stats (replace with real data from activityStore when available)
-  const stats = {
-    workouts: 47,
-    streak: 12,
-    calories: 12500,
-  }
+  // Real stats from activity store
+  const history = useActivityStore((s) => s.history)
+  const streak = useActivityStore((s) => s.streak)
+  const stats = useMemo(() => ({
+    workouts: history.length,
+    streak: streak.current,
+    calories: history.reduce((sum, r) => sum + (r.calories ?? 0), 0),
+  }), [history, streak])

  const handleSignOut = () => {
    updateProfile({
--- a/app/collection/[id].tsx
+++ b/app/collection/[id].tsx
@@ -0,0 +1,249 @@
+/**
+ * TabataFit Collection Detail Screen
+ * Shows collection info + list of workouts in that collection
+ */
+
+import { useMemo } from 'react'
+import { View, StyleSheet, ScrollView, Pressable } from 'react-native'
+import { useRouter, useLocalSearchParams } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { LinearGradient } from 'expo-linear-gradient'
+import Ionicons from '@expo/vector-icons/Ionicons'
+import { useTranslation } from 'react-i18next'
+
+import { useHaptics } from '@/src/shared/hooks'
+import { useCollection } from '@/src/shared/hooks/useSupabaseData'
+import { getWorkoutById } from '@/src/shared/data'
+import { useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
+import { StyledText } from '@/src/shared/components/StyledText'
+import { track } from '@/src/shared/services/analytics'
+
+import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
+import type { ThemeColors } from '@/src/shared/theme/types'
+import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
+import { RADIUS } from '@/src/shared/constants/borderRadius'
+
+export default function CollectionDetailScreen() {
+  const insets = useSafeAreaInsets()
+  const router = useRouter()
+  const haptics = useHaptics()
+  const { t } = useTranslation()
+  const { id } = useLocalSearchParams<{ id: string }>()
+
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
+
+  const { data: collection, isLoading } = useCollection(id)
+
+  // Resolve workouts from collection's workoutIds
+  const rawWorkouts = useMemo(() => {
+    if (!collection) return []
+    return collection.workoutIds
+      .map((wId) => getWorkoutById(wId))
+      .filter(Boolean) as NonNullable<ReturnType<typeof getWorkoutById>>[]
+  }, [collection])
+
+  const workouts = useTranslatedWorkouts(rawWorkouts)
+
+  const handleBack = () => {
+    haptics.selection()
+    router.back()
+  }
+
+  const handleWorkoutPress = (workoutId: string) => {
+    haptics.buttonTap()
+    track('collection_workout_tapped', {
+      collection_id: id,
+      workout_id: workoutId,
+    })
+    router.push(`/workout/${workoutId}`)
+  }
+
+  if (isLoading) {
+    return (
+      <View style={[styles.container, styles.centered, { paddingTop: insets.top }]}>
+        <StyledText size={17} color={colors.text.tertiary}>Loading...</StyledText>
+      </View>
+    )
+  }
+
+  if (!collection) {
+    return (
+      <View style={[styles.container, styles.centered, { paddingTop: insets.top }]}>
+        <Ionicons name="folder-open-outline" size={48} color={colors.text.tertiary} />
+        <StyledText size={17} color={colors.text.tertiary} style={{ marginTop: SPACING[3] }}>
+          Collection not found
+        </StyledText>
+      </View>
+    )
+  }
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Pressable onPress={handleBack} style={styles.backButton}>
+          <Ionicons name="chevron-back" size={24} color={colors.text.primary} />
+        </Pressable>
+        <StyledText size={22} weight="bold" color={colors.text.primary} numberOfLines={1} style={{ flex: 1, textAlign: 'center' }}>
+          {collection.title}
+        </StyledText>
+        <View style={styles.backButton} />
+      </View>
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Hero Card */}
+        <View style={styles.heroCard}>
+          <LinearGradient
+            colors={collection.gradient ?? [BRAND.PRIMARY, '#FF3B30']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+          <View style={styles.heroContent}>
+            <StyledText size={48} color="#FFFFFF" style={styles.heroIcon}>
+              {collection.icon}
+            </StyledText>
+            <StyledText size={28} weight="bold" color="#FFFFFF">
+              {collection.title}
+            </StyledText>
+            <StyledText size={15} color="rgba(255,255,255,0.8)" style={{ marginTop: SPACING[1] }}>
+              {collection.description}
+            </StyledText>
+            <StyledText size={13} weight="semibold" color="rgba(255,255,255,0.6)" style={{ marginTop: SPACING[2] }}>
+              {t('plurals.workout', { count: workouts.length })}
+            </StyledText>
+          </View>
+        </View>
+
+        {/* Workout List */}
+        <StyledText
+          size={20}
+          weight="bold"
+          color={colors.text.primary}
+          style={{ marginTop: SPACING[6], marginBottom: SPACING[3] }}
+        >
+          {t('screens:explore.workouts')}
+        </StyledText>
+
+        {workouts.map((workout) => (
+          <Pressable
+            key={workout.id}
+            style={styles.workoutCard}
+            onPress={() => handleWorkoutPress(workout.id)}
+          >
+            <View style={[styles.workoutAvatar, { backgroundColor: BRAND.PRIMARY }]}>
+              <Ionicons name="flame" size={20} color="#FFFFFF" />
+            </View>
+            <View style={styles.workoutInfo}>
+              <StyledText size={17} weight="semibold" color={colors.text.primary}>
+                {workout.title}
+              </StyledText>
+              <StyledText size={13} color={colors.text.tertiary}>
+                {t('durationLevel', {
+                  duration: workout.duration,
+                  level: t(`levels.${workout.level.toLowerCase()}`),
+                })}
+              </StyledText>
+            </View>
+            <View style={styles.workoutMeta}>
+              <StyledText size={13} color={BRAND.PRIMARY}>
+                {t('units.calUnit', { count: workout.calories })}
+              </StyledText>
+              <Ionicons name="chevron-forward" size={16} color={colors.text.tertiary} />
+            </View>
+          </Pressable>
+        ))}
+
+        {workouts.length === 0 && (
+          <View style={styles.emptyState}>
+            <Ionicons name="barbell-outline" size={48} color={colors.text.tertiary} />
+            <StyledText size={17} color={colors.text.tertiary} style={{ marginTop: SPACING[3] }}>
+              No workouts in this collection
+            </StyledText>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    centered: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      paddingVertical: SPACING[3],
+    },
+    backButton: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    heroCard: {
+      height: 200,
+      borderRadius: RADIUS.XL,
+      overflow: 'hidden',
+      ...colors.shadow.lg,
+    },
+    heroContent: {
+      flex: 1,
+      padding: SPACING[5],
+      justifyContent: 'flex-end',
+    },
+    heroIcon: {
+      marginBottom: SPACING[2],
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },
+    workoutCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: SPACING[3],
+      paddingHorizontal: SPACING[4],
+      backgroundColor: colors.bg.surface,
+      borderRadius: RADIUS.LG,
+      marginBottom: SPACING[2],
+      gap: SPACING[3],
+    },
+    workoutAvatar: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    workoutInfo: {
+      flex: 1,
+      gap: 2,
+    },
+    workoutMeta: {
+      alignItems: 'flex-end',
+      gap: 4,
+    },
+    emptyState: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: SPACING[12],
+    },
+  })
+}
--- a/app/player/[id].tsx
+++ b/app/player/[id].tsx
@@ -36,6 +36,7 @@ import { useTranslatedWorkout } from '@/src/shared/data/useTranslatedData'
 import { useWatchSync } from '@/src/features/watch'

 import { track } from '@/src/shared/services/analytics'
+import { VideoPlayer } from '@/src/shared/components/VideoPlayer'
 import { BRAND, PHASE_COLORS, GRADIENTS, darkColors } from '@/src/shared/theme'
 import type { ThemeColors } from '@/src/shared/theme/types'
 import { TYPOGRAPHY } from '@/src/shared/constants/typography'
@@ -461,9 +462,12 @@ export default function PlayerScreen() {
    <View style={styles.container}>
      <StatusBar hidden />

-      {/* Background gradient */}
-      <LinearGradient
-        colors={[colors.bg.base, colors.bg.surface]}
+      {/* Background video or gradient fallback */}
+      <VideoPlayer
+        videoUrl={workout?.videoUrl}
+        gradientColors={[colors.bg.base, colors.bg.surface]}
+        mode="background"
+        isPlaying={timer.isRunning && !timer.isPaused}
        style={StyleSheet.absoluteFill}
      />

--- a/app/workout/[id].tsx
+++ b/app/workout/[id].tsx
@@ -14,9 +14,12 @@ import { Host, Button, HStack } from '@expo/ui/swift-ui'
 import { glassEffect, padding } from '@expo/ui/swift-ui/modifiers'

 import { useHaptics } from '@/src/shared/hooks'
+import { usePurchases } from '@/src/shared/hooks/usePurchases'
 import { track } from '@/src/shared/services/analytics'
+import { canAccessWorkout } from '@/src/shared/services/access'
 import { getWorkoutById } 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 type { ThemeColors } from '@/src/shared/theme/types'
@@ -35,6 +38,7 @@ export default function WorkoutDetailScreen() {
  const { t } = useTranslation()
  const { id } = useLocalSearchParams<{ id: string }>()
  const [isSaved, setIsSaved] = useState(false)
+  const { isPremium } = usePurchases()

  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])
@@ -62,7 +66,18 @@ export default function WorkoutDetailScreen() {
    )
  }

+  const isLocked = !canAccessWorkout(workout.id, isPremium)
+
  const handleStartWorkout = () => {
+    if (isLocked) {
+      haptics.buttonTap()
+      track('paywall_triggered', {
+        source: 'workout_detail',
+        workout_id: workout.id,
+      })
+      router.push('/paywall')
+      return
+    }
    haptics.phaseChange()
    router.push(`/player/${workout.id}`)
  }
@@ -110,6 +125,13 @@ export default function WorkoutDetailScreen() {
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
        showsVerticalScrollIndicator={false}
      >
+        {/* Video Preview Hero */}
+        <VideoPlayer
+          videoUrl={workout.videoUrl}
+          mode="preview"
+          isPlaying={true}
+          style={styles.videoPreview}
+        />
        {/* Quick stats */}
        <View style={styles.quickStats}>
          <View style={[styles.statBadge, { backgroundColor: 'rgba(255, 107, 53, 0.15)' }]}>
@@ -184,11 +206,17 @@ export default function WorkoutDetailScreen() {
        <Pressable
          style={({ pressed }) => [
            styles.startButton,
+            isLocked && styles.lockedButton,
            pressed && styles.startButtonPressed,
          ]}
          onPress={handleStartWorkout}
        >
-          <RNText style={styles.startButtonText}>{t('screens:workout.startWorkout')}</RNText>
+          {isLocked && (
+            <Ionicons name="lock-closed" size={18} color="#FFFFFF" style={{ marginRight: 8 }} />
+          )}
+          <RNText style={styles.startButtonText}>
+            {isLocked ? t('screens:workout.unlockWithPremium') : t('screens:workout.startWorkout')}
+          </RNText>
        </Pressable>
      </View>
    </View>
@@ -235,6 +263,14 @@ function createStyles(colors: ThemeColors) {
      height: 44,
    },

+    // Video Preview
+    videoPreview: {
+      height: 220,
+      borderRadius: RADIUS.XL,
+      overflow: 'hidden' as const,
+      marginBottom: SPACING[4],
+    },
+
    // Quick Stats
    quickStats: {
      flexDirection: 'row',
@@ -380,6 +416,12 @@ function createStyles(colors: ThemeColors) {
      backgroundColor: BRAND.PRIMARY,
      alignItems: 'center',
      justifyContent: 'center',
+      flexDirection: 'row',
+    },
+    lockedButton: {
+      backgroundColor: colors.bg.surface,
+      borderWidth: 1,
+      borderColor: BRAND.PRIMARY,
    },
    startButtonPressed: {
      backgroundColor: BRAND.PRIMARY_DARK,