big refacto change all flows

src/screens/Playback/Playback.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { Alert, Image, StyleSheet, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { ai, background } from "../../assets";
@@ -10,6 +10,7 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { gutters } from "../../styles";
+import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 
 const Playback = ({ route }) => {
   const { project } = route.params;
@@ -17,6 +18,7 @@ const Playback = ({ route }) => {
   const songIndex = project?.songIndex;
   const sunoTaskId = project?.sunoTaskId;
   const { setIsLoading } = useMinuit();
+  const [showIntro, setShowIntro] = useState(false);
 
   const onPressRecord = useCallback(async () => {
     try {
@@ -43,7 +45,7 @@ const Playback = ({ route }) => {
         console.log("getSunoTimestamps failed", data?.error || data);
         Alert.alert(
           "Timestamps",
-          "Impossible de récupérer les timestamps pour ce playback pour le moment. Tu peux quand même continuer."
+          "Impossible de récupérer les timestamps pour ce playback pour le moment. Tu peux quand même continuer.",
         );
       }
 
@@ -53,7 +55,7 @@ const Playback = ({ route }) => {
       console.log("getSunoTimestamps error", e?.message || e);
       Alert.alert(
         "Timestamps",
-        "Une erreur est survenue lors de la génération des timestamps. Tu peux quand même continuer."
+        "Une erreur est survenue lors de la génération des timestamps. Tu peux quand même continuer.",
       );
       await setIsLoading(false);
     }
@@ -71,7 +73,10 @@ const Playback = ({ route }) => {
         }}
       >
         <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
-          <BorderGradientButton title="Guide du Playbacker" />
+          <BorderGradientButton
+            title="Guide du Playbacker"
+            onPress={() => setShowIntro(true)}
+          />
           {/* <BorderGradientButton title="Importer une vidéo" /> */}
           <GradientButton
             title="Enregistrer mon Playback"
@@ -79,6 +84,10 @@ const Playback = ({ route }) => {
           />
         </View>
       </View>
+      <FullscreenIntroVideo
+        visible={showIntro}
+        onClose={() => setShowIntro(false)}
+      />
     </Page>
   );
 };