last fixes, home and videos

src/screens/Playback/RecordPlayback.js

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Text, View } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Circle } from "react-native-svg";
 import alert from "../../components/Alert";
@@ -30,6 +30,11 @@ const log =
     ? (...args) => console.log(LOG_PREFIX, ...args)
     : () => {};
 
+const CAMERA_FACING_OPTIONS = [
+  { label: "Avant", value: "front" },
+  { label: "Arrière", value: "back" },
+];
+
 const RecordPlayback = ({ route }) => {
   const { top, bottom } = useSafeAreaInsets();
   const { project } = route.params || {};
@@ -63,6 +68,7 @@ const RecordPlayback = ({ route }) => {
   const [isRecording, setIsRecording] = useState(false);
   const [showProgress, setShowProgress] = useState(false);
   const [progressInfo, setProgressInfo] = useState({ pos: 0, dur: 0 });
+  const [cameraFacing, setCameraFacing] = useState("front");
 
   // Musique
   const songUrl = project?.songUrl || null;
@@ -612,7 +618,7 @@ const RecordPlayback = ({ route }) => {
       <CameraView
         ref={cameraRef}
         style={{ flex: 1 }}
-        facing="front"
+        facing={cameraFacing}
         mode="video"
         mute
       >
@@ -626,6 +632,14 @@ const RecordPlayback = ({ route }) => {
         >
           <MusicLandHeader progress={9} onPressBack={goBack} />
 
+          <View style={{ marginTop: 12, alignItems: "flex-end" }}>
+            <CameraFacingSelector
+              value={cameraFacing}
+              onChange={setCameraFacing}
+              disabled={!permissionsGranted || isPreparing || isRecording}
+            />
+          </View>
+
           <View style={{ flex: 1, marginTop: 11 }}>
             {/* Overlay de compte à rebours : on affiche 5→1 pour éviter l'effet visuel à 1 */}
             {isPreparing && countdown >= 1 && !showProgress && (
@@ -836,3 +850,49 @@ const KaraokeLines = ({ lines = [], currentLineIdx = -1 }) => {
     </View>
   );
 };
+
+const CameraFacingSelector = ({ value = "front", onChange, disabled = false }) => {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        backgroundColor: "rgba(0,0,0,0.35)",
+        borderRadius: 999,
+        padding: 4,
+        gap: 4,
+        opacity: disabled ? 0.6 : 1,
+      }}
+      pointerEvents={disabled ? "none" : "auto"}
+    >
+      {CAMERA_FACING_OPTIONS.map((option) => {
+        const isActive = option.value === value;
+        return (
+          <TouchableOpacity
+            key={option.value}
+            activeOpacity={0.8}
+            onPress={() => {
+              if (typeof onChange === "function") onChange(option.value);
+            }}
+            disabled={isActive}
+            style={{
+              paddingVertical: 6,
+              paddingHorizontal: 14,
+              borderRadius: 999,
+              backgroundColor: isActive ? Palette.white : "transparent",
+            }}
+          >
+            <Text
+              style={{
+                color: isActive ? Palette.black : Palette.white,
+                fontFamily: FONT_FAMILY.InterMedium,
+                fontSize: 14,
+              }}
+            >
+              {option.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};