playback

src/screens/Library/MusicDetails.js

@@ -1,8 +1,15 @@
 import { useRoute } from "@react-navigation/core";
 import { Audio } from "expo-audio";
-import React, { useEffect, useMemo, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, View, Image as RNImage } from "react-native";
 import { Image as ExpoImage } from "expo-image";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Pressable,
+  Image as RNImage,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { useGlobal } from "reactn";
 import { background, icons, img } from "../../assets";

src/screens/NewMusicOptions.js

@@ -1,14 +1,14 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { BlurView } from "expo-blur";
 import React, { useMemo } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
-import Page from "../layouts/Page";
 import { ai, background } from "../assets";
-import { BlurView } from "expo-blur";
+import Page from "../layouts/Page";
-import { Palette } from "../styles";
-import { FONT_FAMILY } from "../styles/Fonts";
 import { Routes } from "../navigation";
 import { navigate } from "../navigation/NavigationService";
 import { useUserData } from "../providers/UserDataProvider";
-import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
 import palette from "../styles/Palette";
 
 const CREATE_DATA = [
@@ -58,14 +58,27 @@ const NewMusicOptions = ({ route }) => {
     ? currentProjet.lyrics.length > 0
     : !!currentProjet?.lyrics;
   const hasCover = !!currentProjet?.coverUrl;
+  console.log("current projet cover", currentProjet?.coverUrl);
 
   const isLocked = (index) => {
     // 0: Songwriter, 1: Beatmaker, 2: Producer, 3: Director
-    if (index === 3) return true; // Director toujours verrouillé
+    // Rules:
-    if (!hasProject) return index !== 0; // seulement Songwriter
+    // - If no project: only Songwriter (0) is available.
-    if (hasCover) return index !== 2; // seulement Producer
+    // - If project exists: Songwriter (0) is always available.
-    if (hasLyrics) return !(index === 0 || index === 1); // Songwriter + Beatmaker
+    // - If lyrics exist: Beatmaker (1) becomes available.
-    return index !== 0; // par défaut seulement Songwriter
+    // - If cover exists: Producer (2) and Director (3) become available.
+    if (!hasProject) return index !== 0;
+
+    const allowed = new Set([0]); // songwriter always allowed when project exists
+    if (hasLyrics) {
+      allowed.add(1);
+    }
+    if (hasCover) {
+      allowed.add(2);
+      allowed.add(3);
+    }
+
+    return !allowed.has(index);
   };
 
   const onPressOption = (index, item) => {
@@ -80,6 +93,12 @@ const NewMusicOptions = ({ route }) => {
       case 2:
         navigate(Routes.Production, { action: item.type });
         break;
+      case 3:
+        console.log("test");
+        navigate(Routes.Playback, {
+          action: item.type,
+          project: currentProjet,
+        });
       default:
         break;
     }

src/screens/Playback/Playback.js

@@ -1,15 +1,16 @@
-import { View, Text, StyleSheet, Image } from "react-native";
 import React from "react";
+import { Image, StyleSheet, View } from "react-native";
 import { ai, background } from "../../assets";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import { gutters } from "../../styles";
-import Page from "../../layouts/Page";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { gutters } from "../../styles";
 
-const Playback = () => {
+const Playback = ({ route }) => {
+  const { project } = route.params;
   return (
     <Page headerType="NONE" backgroundImg={background.playbackBG2}>
       <Image source={ai.john} style={styles.img} resizeMode="contain" />
@@ -23,10 +24,10 @@ const Playback = () => {
       >
         <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
           <BorderGradientButton title="Guide du Playbacker" />
-          <BorderGradientButton title="Importer une vidéo" />
+          {/* <BorderGradientButton title="Importer une vidéo" /> */}
           <GradientButton
             title="Enregistrer mon Playback"
-            onPress={() => navigate(Routes.RecordPlayback)}
+            onPress={() => navigate(Routes.RecordPlayback, { project })}
           />
         </View>
       </View>

src/screens/Playback/RecordPlayback.js

@@ -1,21 +1,181 @@
-import { Text, View } from "react-native";
+import { Audio } from "expo-audio";
+import { CameraView, useCameraPermissions } from "expo-camera";
 import React from "react";
-import { CameraView } from "expo-camera";
+import { Text, View } from "react-native";
-import { gutters, Palette } from "../../styles";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack, navigate } from "../../navigation/NavigationService";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { FONT_FAMILY } from "../../styles/Fonts";
 import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
 import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { gutters, Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
-const RecordPlayback = () => {
+const RecordPlayback = ({ route }) => {
   const { top } = useSafeAreaInsets();
+  const { project } = route.params || {};
+
+  // Permissions
+  const [cameraPermission, requestCameraPermission] = useCameraPermissions();
+
+  // Refs
+  const cameraRef = React.useRef(null);
+  const soundRef = React.useRef(null);
+  const countdownTimerRef = React.useRef(null);
+  const stopRequestedRef = React.useRef(false);
+
+  // UI / state
+  const [isPreparing, setIsPreparing] = React.useState(false);
+  const [countdown, setCountdown] = React.useState(0);
+  const [isRecording, setIsRecording] = React.useState(false);
+
+  // Derive song URL robustly
+  const songUrl = project?.songUrl || null;
+
+  React.useEffect(() => {
+    // Request permissions on mount if not granted
+    (async () => {
+      try {
+        if (!cameraPermission?.granted) await requestCameraPermission();
+      } catch (_) {}
+    })();
+    return () => {
+      // Cleanup timers and audio on unmount
+      try {
+        if (countdownTimerRef.current) {
+          global.clearInterval(countdownTimerRef.current);
+          countdownTimerRef.current = null;
+        }
+        (async () => {
+          try {
+            if (soundRef.current) {
+              soundRef.current.setOnPlaybackStatusUpdate(null);
+              await soundRef.current.unloadAsync();
+              soundRef.current = null;
+            }
+          } catch (_) {}
+        })();
+      } catch (_) {}
+    };
+  }, []);
+
+  const startCountdownThenRecord = async () => {
+    console.log("start countdown");
+    if (!songUrl) return;
+    console.log("songUrl exists");
+    setIsPreparing(true);
+    setCountdown(5);
+    // Start music + recording immediately when countdown starts
+    void startRecordingWithMusic();
+    // 5 -> 0 countdown display only
+    countdownTimerRef.current = global.setInterval(() => {
+      setCountdown((c) => {
+        const next = (c || 0) - 1;
+        if (next <= 0) {
+          global.clearInterval(countdownTimerRef.current);
+          countdownTimerRef.current = null;
+        }
+        return Math.max(0, next);
+      });
+    }, 1000);
+  };
+
+  const startRecordingWithMusic = async () => {
+    try {
+      stopRequestedRef.current = false;
+      console.log("stop requested ref is : ", soundRef.current);
+      // Prepare audio
+      if (soundRef.current) {
+        console.log("if sound ref current");
+        try {
+          soundRef.current.setOnPlaybackStatusUpdate(null);
+          await soundRef.current.unloadAsync();
+          console.log("unload sound ref");
+        } catch (_) {}
+        soundRef.current = null;
+      }
+
+      // Ensure audio mode allows playback alongside camera recording
+      try {
+        await Audio.setAudioModeAsync({
+          playsInSilentMode: true,
+          interruptionMode: "mixWithOthers",
+          allowsRecording: true,
+          shouldPlayInBackground: false,
+        });
+      } catch (_) {}
+
+      const { sound } = await Audio.Sound.createAsync(
+        { uri: songUrl },
+        { shouldPlay: false }
+      );
+
+      sound.setOnPlaybackStatusUpdate((status) => {
+        if (!status || !status.isLoaded) return;
+        if (status.didJustFinish && !stopRequestedRef.current) {
+          stopRequestedRef.current = true;
+          try {
+            cameraRef.current?.stopRecording?.();
+          } catch (_) {}
+        }
+      });
+      soundRef.current = sound;
+
+      // Start recording
+      setIsRecording(true);
+      const recordPromise = cameraRef.current?.recordAsync?.({
+        mute: true,
+        maxDuration: 600, // safety cap (10 min)
+      });
+
+      // Start playing
+      await sound.playAsync();
+
+      // Wait for recording to stop (either by song end or manual stop)
+      const video = await recordPromise;
+
+      // Ensure audio stops and cleanup
+      try {
+        const s = soundRef.current;
+        if (s) {
+          s.setOnPlaybackStatusUpdate(null);
+          await s.stopAsync().catch(() => {});
+          await s.unloadAsync().catch(() => {});
+        }
+      } catch (_) {}
+      soundRef.current = null;
+
+      setIsRecording(false);
+      setIsPreparing(false);
+
+      // Navigate to next screen with video uri if available
+      if (video?.uri) {
+        navigate(Routes.RecordedPlayback, { videoUri: video.uri, project });
+      } else {
+        navigate(Routes.RecordedPlayback, { project });
+      }
+    } catch (e) {
+      // Fallback on error
+      setIsRecording(false);
+      setIsPreparing(false);
+      try {
+        soundRef.current?.setOnPlaybackStatusUpdate?.(null);
+        await soundRef.current?.unloadAsync?.();
+      } catch (_) {}
+      soundRef.current = null;
+    }
+  };
+
+  const permissionsGranted = !!cameraPermission?.granted;
 
   return (
     <View style={{ flex: 1 }}>
-      <CameraView style={{ flex: 1 }} facing="front">
+      <CameraView
+        ref={cameraRef}
+        style={{ flex: 1 }}
+        facing="front"
+        mode="video"
+      >
         <View
           style={{
             paddingHorizontal: gutters,
@@ -38,15 +198,68 @@ const RecordPlayback = () => {
                 musique, et s'arrêtera à la fin du morceau.
               </Text>
             </CreateLyricsHeader>
+
+            {/* Centered countdown overlay */}
+            {(isPreparing || isRecording) && countdown > 0 && (
+              <View
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: 72,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.HelveticaNeueBold,
+                  }}
+                >
+                  {countdown}
+                </Text>
               </View>
+            )}
+
+            {/* Permission prompt */}
+            {!permissionsGranted && (
+              <View
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  padding: gutters,
+                }}
+              >
+                <GradientButton
+                  title="Autoriser la caméra"
+                  onPress={async () => {
+                    try {
+                      if (!cameraPermission?.granted)
+                        await requestCameraPermission();
+                    } catch (_) {}
+                  }}
+                />
+              </View>
+            )}
+          </View>
+
+          {/* Start button */}
+          {permissionsGranted && !isPreparing && !isRecording && (
             <GradientButton
               title="Lancer ma musique"
               containerStyle={{
                 width: "80%",
                 alignSelf: "center",
               }}
-            onPress={() => navigate(Routes.RecordedPlayback)}
+              disabled={!songUrl}
+              onPress={startCountdownThenRecord}
             />
+          )}
         </View>
       </CameraView>
     </View>

src/screens/Playback/RecordedPlayback.js

@@ -1,14 +1,14 @@
-import { View, Text, Image } from "react-native";
 import React from "react";
-import Page from "../../layouts/Page";
+import { Image, View } from "react-native";
 import { background, img } from "../../assets";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import Slider from "../../components/Slider";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { gutters } from "../../styles";
-import Slider from "../../components/Slider";
-import GradientButton from "../../components/GradientButton";
-import { Routes } from "../../navigation";
-import BorderGradientButton from "../../components/BorderGradientButton";
 
 const RecordedPlayback = () => {
   return (
@@ -32,9 +32,7 @@ const RecordedPlayback = () => {
         <View
           style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
         >
-          <GradientButton
+          <GradientButton title="Je valide" />
-            title="Je valide"
-          />
           <BorderGradientButton
             title="Je change de décor"
             onPress={() => navigate(Routes.ChooseDecor)}