playbacks record

package.json

@@ -45,6 +45,7 @@
     "expo-dev-client": "~5.0.20",
     "expo-device": "~7.0.3",
     "expo-document-picker": "~13.0.3",
+    "expo-file-system": "~18.0.12",
     "expo-font": "~13.0.4",
     "expo-haptics": "~14.0.1",
     "expo-image": "~2.0.7",

src/navigation/MainStack.js

@@ -16,7 +16,7 @@ import ChooseDecor from "../screens/Playback/ChooseDecor";
 import CreatingDecor from "../screens/Playback/CreatingDecor";
 import Playback from "../screens/Playback/Playback";
 import PlaybackOnboarding from "../screens/Playback/PlaybackOnboarding";
-import RecordPlayback from "../screens/Playback/RecordPlayback.web";
+import RecordPlayback from "../screens/Playback/RecordPlayback";
 import RecordedPlayback from "../screens/Playback/RecordedPlayback";
 import VideoFinalize from "../screens/Playback/VideoFinalize";
 import PrivacyPolicy from "../screens/PrivacyPolicy";

src/screens/Library/Library.web.js

@@ -217,34 +217,24 @@ const Library = () => {
               ...Style.defaultBorder,
             }}
           >
-            {hasMyMusic && (
-              <View style={{ flex: 1 }}>
-                <MyMusic />
-              </View>
-            )}
-            {hasPlaylists && (
-              <View style={{ flex: 1 }}>
-                <MyPlaylist />
-              </View>
-            )}
+            <View style={{ flex: 1 }}>
+              <MyMusic />
+            </View>
+            <View style={{ flex: 1 }}>
+              <MyPlaylist />
+            </View>
           </BlurView>
 
           <View style={{ flexDirection: "row", gap: 20 }}>
-            {hasBackTracks && (
-              <View style={{ flex: 1 }}>
-                <BackTracks />
-              </View>
-            )}
-            {hasLikedMusic && (
-              <View style={{ flex: 1 }}>
-                <LikedMusic />
-              </View>
-            )}
-            {hasLikedPlayback && (
-              <View style={{ flex: 1 }}>
-                <LikedPlayback />
-              </View>
-            )}
+            <View style={{ flex: 1 }}>
+              <BackTracks />
+            </View>
+            <View style={{ flex: 1 }}>
+              <LikedMusic />
+            </View>
+            <View style={{ flex: 1 }}>
+              <LikedPlayback />
+            </View>
           </View>
 
           {!hasAnySection && (

src/screens/Library/components/LikedPlayback.js

@@ -35,6 +35,7 @@ const LikedPlayback = () => {
           liked: true,
         })
       }
+      onPressPlus={() => navigate(Routes.WritingLyrics)}
     >
       <View>
         {items.length > 0 && (

src/screens/Production/DownloadSongs.js

@@ -32,12 +32,23 @@ const guessExtension = (inputUri = "") => {
 };
 
 const uploadSourceRecording = async ({ uri, uid, projectId }) => {
+  console.log("[DownloadSongs] uploadSourceRecording params", {
+    hasUri: Boolean(uri),
+    uid,
+    projectId,
+  });
+
   if (!uri) throw new Error("Aucune vidéo trouvée");
   if (!uid) throw new Error("Utilisateur non authentifié");
 
   const extension = guessExtension(uri);
   const sourcePath = `users/${uid}/projects/${projectId}/recordings/source-${Date.now()}.${extension}`;
 
+  console.log("[DownloadSongs] uploadSourceRecording source path", {
+    extension,
+    sourcePath,
+  });
+
   await uploadFileToFirebase({
     uri,
     path: sourcePath,
@@ -51,13 +62,22 @@ const uploadSourceRecording = async ({ uri, uid, projectId }) => {
 const DownloadSongs = ({ route }) => {
   const { currentUID } = useUserData();
   const { action, uri, project } = route.params || {};
-  console.log("project id", project?.id);
+  console.log("[DownloadSongs] route params", {
+    action,
+    projectId: project?.id,
+    hasUri: Boolean(uri),
+    currentUID,
+  });
   const { setIsLoading, setTooltip } = useMinuit();
 
   const handleDownloadUri = async () => {
     if (action === "playback" && project?.id) {
       // Publication du playback
-      console.log("project id : ", project.id);
+      console.log("[DownloadSongs] handleDownloadUri playback", {
+        projectId: project.id,
+        uri,
+        currentUID,
+      });
       let tempSourcePath = null;
       try {
         setIsLoading(true);
@@ -72,14 +92,20 @@ const DownloadSongs = ({ route }) => {
           .functions()
           .httpsCallable("upload-uploadProjectMedia");
 
-        const { data: result } = await callable({
+        const payload = {
           sourcePath,
           projectId: project.id,
           storagePath: `users/${currentUID}/projects/${project.id}/playback.mp4`,
           projectField: "playbackUrl",
           deleteSource: true,
           metadata: { source: "downloadSongs" },
-        });
+        };
+
+        console.log("[DownloadSongs] calling upload-uploadProjectMedia", payload);
+
+        const { data: result } = await callable(payload);
+
+        console.log("[DownloadSongs] upload-uploadProjectMedia result", result);
 
         const resultURI = result?.url || null;
 
@@ -102,7 +128,12 @@ const DownloadSongs = ({ route }) => {
           });
         }
       } catch (error) {
-        console.log("[DownloadSongs] error upload playback", error);
+        console.log("[DownloadSongs] error upload playback", {
+          message: error?.message,
+          code: error?.code,
+          name: error?.name,
+          details: error?.details,
+        });
         if (tempSourcePath) {
           try {
             await firebase.storage().ref(tempSourcePath).delete();
@@ -110,7 +141,9 @@ const DownloadSongs = ({ route }) => {
         }
         setTooltip({
           type: "error",
-          text: String(error?.message || "Erreur lors de la publication du playback"),
+          text: String(
+            error?.message || "Erreur lors de la publication du playback"
+          ),
         });
       } finally {
         setIsLoading(false);

src/screens/Studio/GeneratingSong.js

@@ -236,8 +236,9 @@ const GeneratingSong = () => {
               source={ai.theo}
               style={{
                 width: "100%",
-                height: isWeb ? 300 : "100%",
+                height: isWeb ? 300 : "60%",
                 right: -10,
+                top: 50,
               }}
               resizeMode="contain"
             />

src/screens/cover/PouchReady.js

@@ -1,6 +1,6 @@
 import { useIsFocused } from "@react-navigation/native";
 import { Image as ExpoImage } from "expo-image";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { ActivityIndicator, Alert, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, icons } from "../../assets";
@@ -22,7 +22,7 @@ const PouchReady = () => {
   const isGenerating = selectedProject?.coverStatus === "GENERATING";
   const isFocused = useIsFocused();
 
-  const generateCover = async () => {
+  const generateCover = useCallback(async () => {
     if (!selectedProjectId) return;
     try {
       await setIsLoading(true);
@@ -37,7 +37,7 @@ const PouchReady = () => {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [selectedProjectId, setIsLoading]);
 
   async function validateCover() {
     try {
@@ -62,6 +62,16 @@ const PouchReady = () => {
       !selectedProject?.cover?.generatedBackground &&
       selectedProject?.coverStatus !== "GENERATING"
     ) {
+      if (isWeb) {
+        if (typeof window !== "undefined") {
+          const shouldGenerate = window.confirm("Générer une pochette ?");
+          if (shouldGenerate) {
+            generateCover();
+          }
+        }
+        return;
+      }
+
       Alert.alert("Attention", "Générer une pochette ?", [
         {
           text: "Oui",
@@ -72,7 +82,7 @@ const PouchReady = () => {
         },
       ]);
     }
-  }, [selectedProject, isFocused]);
+  }, [generateCover, isFocused, selectedProject]);
 
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">