web modals

src/screens/Studio/SongReady.js

@@ -11,6 +11,7 @@ import ValidateModal from "../../components/modal/ValidateModal";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import Slider from "../../components/Slider";
 import firebase from "../../config/firebase";
+import alert from "../../components/Alert";
 import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -18,6 +19,7 @@ import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { Style } from "../../styles";
 import { gutters, size } from "../../styles/Style";
+import { isWeb } from "../../hooks/useLayoutType";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const SongReady = () => {
@@ -193,6 +195,31 @@ const SongReady = () => {
     };
   }, [player0, player1]);
 
+  const handleChooseTrack = () => {
+    if (isWeb) {
+      alert(
+        "Attention !",
+        "Lorsque tu clique sur valider, tu ne pourra plus changer ni le texte ni la mélodie.",
+        [
+          {
+            text: "Retour",
+            style: "cancel",
+          },
+          {
+            text: "Valider",
+            style: "confirm",
+            onPress: () => {
+              validateSelection();
+            },
+          },
+        ],
+        { cancelable: false }
+      );
+      return;
+    }
+    setShowValidateModal(true);
+  };
+
   return (
     <Page headerType="NONE" backgroundImg={background.studioBG2} maxWidth={800}>
       <MusicLandHeader
@@ -337,15 +364,17 @@ const SongReady = () => {
         />
         <GradientButton
           title="Choisir ce morceau"
-          onPress={() => setShowValidateModal(true)}
+          onPress={handleChooseTrack}
           disabled={!musicUrls?.length}
         />
       </View>
-      <ValidateModal
+      {!isWeb && (
-        visible={showValidateModal}
+        <ValidateModal
-        onClose={() => setShowValidateModal(false)}
+          visible={showValidateModal}
-        onPressValidate={validateSelection}
+          onClose={() => setShowValidateModal(false)}
-      />
+          onPressValidate={validateSelection}
+        />
+      )}
     </Page>
   );
 };