update

src/screens/Playback/Playback.js

@@ -0,0 +1,46 @@
+import { View, Text, StyleSheet, Image } from "react-native";
+import React from "react";
+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 { Routes } from "../../navigation";
+
+const Playback = () => {
+  return (
+    <Page headerType="NONE" backgroundImg={background.playbackBG2}>
+      <Image source={ai.john} style={styles.img} resizeMode="contain" />
+      <MusicLandHeader onPressBack={goBack} progress={25} />
+      <View
+        style={{
+          flex: 1,
+          paddingBottom: gutters * 2,
+          justifyContent: "flex-end",
+        }}
+      >
+        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
+          <BorderGradientButton title="Guide du Playbacker" />
+          <BorderGradientButton title="Importer une vidéo" />
+          <GradientButton
+            title="Enregistrer mon Playback"
+            onPress={() => navigate(Routes.RecordPlayback)}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Playback;
+
+const styles = StyleSheet.create({
+  img: {
+    width: "100%",
+    height: "70%",
+    position: "absolute",
+    bottom: -40,
+  },
+});

src/screens/Playback/PlaybackOnboarding.js

@@ -0,0 +1,29 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters } from "../../styles";
+import GradientButton from "../../components/GradientButton";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const PlaybackOnboarding = () => {
+  return (
+    <Page backgroundImg={background.playbackBG} headerType="NONE">
+      <View
+        style={{
+          flex: 1,
+          paddingBottom: gutters * 2,
+          justifyContent: "flex-end",
+        }}
+      >
+        <GradientButton
+          title="Commence"
+          onPress={() => navigate(Routes.Playback)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default PlaybackOnboarding;

src/screens/Playback/RecordPlayback.js

@@ -0,0 +1,56 @@
+import { Text, View } from "react-native";
+import React from "react";
+import { CameraView } from "expo-camera";
+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 { Routes } from "../../navigation";
+
+const RecordPlayback = () => {
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <CameraView style={{ flex: 1 }} facing="front">
+        <View
+          style={{
+            paddingHorizontal: gutters,
+            paddingTop: top,
+            flex: 1,
+            paddingBottom: gutters * 2,
+          }}
+        >
+          <MusicLandHeader progress={9} onPressBack={goBack} />
+          <View style={{ flex: 1, marginTop: 11 }}>
+            <CreateLyricsHeader>
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterMedium,
+                }}
+              >
+                L'enregistrement de ta vidéo commencera lorsque tu lanceras ta
+                musique, et s'arrêtera à la fin du morceau.
+              </Text>
+            </CreateLyricsHeader>
+          </View>
+          <GradientButton
+            title="Lancer ma musique"
+            containerStyle={{
+              width: "80%",
+              alignSelf: "center",
+            }}
+            onPress={() => navigate(Routes.RecordedPlayback)}
+          />
+        </View>
+      </CameraView>
+    </View>
+  );
+};
+
+export default RecordPlayback;

src/screens/Playback/RecordedPlayback.js

@@ -0,0 +1,48 @@
+import { View, Text, Image } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+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 (
+    <Page backgroundImg={background.playbackBG2} headerType="NONE">
+      <MusicLandHeader progress={19} onPressBack={goBack} />
+      <View
+        style={{ flex: 1, paddingTop: 12, gap: 14, paddingBottom: gutters * 2 }}
+      >
+        <View style={{ flex: 1, gap: 22 }}>
+          <Image
+            source={img.placeholder3}
+            style={{
+              width: "80%",
+              flex: 1,
+              alignSelf: "center",
+              borderRadius: 16,
+            }}
+          />
+          <Slider value="0:00" maxValue="2:00" />
+        </View>
+        <View
+          style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
+        >
+          <GradientButton
+            title="Je veux devenir Playbacker"
+            containerStyle={{}}
+            onPress={() => navigate(Routes.PlaybackOnboarding)}
+          />
+          <BorderGradientButton title="Je change de décor" />
+          <BorderGradientButton title="Recommencer" />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default RecordedPlayback;