456 lines
14 KiB
JavaScript
456 lines
14 KiB
JavaScript
import { useFocusEffect } from "@react-navigation/native";
|
|
import { useAudioPlayer } from "expo-audio";
|
|
import { CameraView, useCameraPermissions } from "expo-camera";
|
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
import { Platform, Text, View } from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import Svg, { Circle } from "react-native-svg";
|
|
import GradientButton from "../../components/GradientButton";
|
|
import MusicLandHeader from "../../components/MusicLandHeader";
|
|
import { increment, projectsRef } from "../../config/firebase";
|
|
import { Routes } from "../../navigation";
|
|
import { goBack, navigate } from "../../navigation/NavigationService";
|
|
import { gutters, Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
|
|
|
/**
|
|
* RecordPlayback — refactor robuste du compteur
|
|
*
|
|
* Correction de l'auto-start : on garde un flag countdownActiveRef pour
|
|
* empêcher l'effet de se déclencher tant que le timer n'a pas réellement démarré.
|
|
* On affiche 5→1 puis on bascule (pas de 0 visible) pour éviter le "bloqué sur 1".
|
|
*/
|
|
|
|
const TIME_BEFORE_INCREMENT_MS = 20000; // 20s
|
|
|
|
const RecordPlayback = ({ route }) => {
|
|
const { top } = useSafeAreaInsets();
|
|
const { project } = route.params || {};
|
|
|
|
// Permissions
|
|
const [cameraPermission, requestCameraPermission] = useCameraPermissions();
|
|
|
|
// Refs
|
|
const cameraRef = useRef(null);
|
|
const countdownTimerRef = useRef(null);
|
|
const listenTimerRef = useRef(null);
|
|
const checkSongEndRef = useRef(null);
|
|
const stopRequestedRef = useRef(false);
|
|
const startedRef = useRef(false); // empêche les doubles démarrages
|
|
const countdownActiveRef = useRef(false); // évite le déclenchement avant 1er tick
|
|
|
|
// Compteurs vues
|
|
const listenedMsRef = useRef(0);
|
|
const incrementDoneRef = useRef(false);
|
|
|
|
// UI / state
|
|
const [isPreparing, setIsPreparing] = useState(false);
|
|
const [countdown, setCountdown] = useState(0);
|
|
const [isRecording, setIsRecording] = useState(false);
|
|
const [showProgress, setShowProgress] = useState(false);
|
|
const [progressInfo, setProgressInfo] = useState({ pos: 0, dur: 0 });
|
|
|
|
// Musique
|
|
const songUrl = project?.songUrl || null;
|
|
const player = useAudioPlayer(songUrl ? { uri: songUrl } : undefined);
|
|
|
|
useEffect(() => {
|
|
listenedMsRef.current = 0;
|
|
incrementDoneRef.current = false;
|
|
}, [songUrl]);
|
|
|
|
// Poll player -> progress ring
|
|
useEffect(() => {
|
|
if (!player) return;
|
|
const id = setInterval(() => {
|
|
try {
|
|
const dur = (player?.duration || 0) * 1000;
|
|
const pos = (player?.currentTime || 0) * 1000;
|
|
setProgressInfo({ pos, dur });
|
|
} catch (_) {}
|
|
}, 250);
|
|
return () => clearInterval(id);
|
|
}, [player]);
|
|
|
|
// Permissions au mount + cleanup
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
if (!cameraPermission?.granted) await requestCameraPermission();
|
|
} catch (_) {}
|
|
})();
|
|
return () => {
|
|
try {
|
|
if (countdownTimerRef.current) clearInterval(countdownTimerRef.current);
|
|
if (listenTimerRef.current) clearInterval(listenTimerRef.current);
|
|
if (checkSongEndRef.current) clearInterval(checkSongEndRef.current);
|
|
countdownTimerRef.current = null;
|
|
listenTimerRef.current = null;
|
|
checkSongEndRef.current = null;
|
|
} catch (_) {}
|
|
};
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// Reset complet
|
|
const resetSession = useCallback(async () => {
|
|
try {
|
|
if (countdownTimerRef.current) {
|
|
clearInterval(countdownTimerRef.current);
|
|
countdownTimerRef.current = null;
|
|
}
|
|
if (listenTimerRef.current) {
|
|
clearInterval(listenTimerRef.current);
|
|
listenTimerRef.current = null;
|
|
}
|
|
if (checkSongEndRef.current) {
|
|
clearInterval(checkSongEndRef.current);
|
|
checkSongEndRef.current = null;
|
|
}
|
|
|
|
startedRef.current = false;
|
|
stopRequestedRef.current = false;
|
|
countdownActiveRef.current = false;
|
|
listenedMsRef.current = 0;
|
|
incrementDoneRef.current = false;
|
|
|
|
setIsPreparing(false);
|
|
setIsRecording(false);
|
|
setShowProgress(false);
|
|
setCountdown(0);
|
|
|
|
if (player) {
|
|
try {
|
|
if (player.playing) await player.pause?.();
|
|
await player.seekTo?.(0);
|
|
} catch (_) {}
|
|
}
|
|
} catch (_) {}
|
|
}, [player]);
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
void resetSession();
|
|
return () => {};
|
|
}, [resetSession])
|
|
);
|
|
|
|
// Lancer le compte à rebours (le tick décrémente uniquement)
|
|
const startCountdownThenRecord = async () => {
|
|
if (!songUrl) return;
|
|
await resetSession();
|
|
setIsPreparing(true);
|
|
setShowProgress(false);
|
|
setCountdown(5);
|
|
|
|
// On démarre l'intervalle puis on active le flag
|
|
if (countdownTimerRef.current) {
|
|
clearInterval(countdownTimerRef.current);
|
|
countdownTimerRef.current = null;
|
|
}
|
|
countdownTimerRef.current = setInterval(() => {
|
|
setCountdown((c) => Math.max(0, c - 1));
|
|
}, 1000);
|
|
countdownActiveRef.current = true;
|
|
};
|
|
|
|
// Quand le compteur a réellement démarré ET atteint 0, on démarre
|
|
useEffect(() => {
|
|
if (!isPreparing) return;
|
|
if (!countdownActiveRef.current) return; // évite l'auto-start
|
|
|
|
if (countdown === 0 && !startedRef.current) {
|
|
startedRef.current = true;
|
|
if (countdownTimerRef.current) {
|
|
clearInterval(countdownTimerRef.current);
|
|
countdownTimerRef.current = null;
|
|
}
|
|
countdownActiveRef.current = false;
|
|
// Bascule après rendu de la frame courante
|
|
requestAnimationFrame(() => {
|
|
setIsPreparing(false);
|
|
setShowProgress(true);
|
|
void startRecordingWithMusic();
|
|
});
|
|
}
|
|
}, [countdown, isPreparing]);
|
|
|
|
const startRecordingWithMusic = async () => {
|
|
try {
|
|
stopRequestedRef.current = false;
|
|
listenedMsRef.current = 0;
|
|
incrementDoneRef.current = false;
|
|
|
|
setIsRecording(true);
|
|
setShowProgress(true);
|
|
const recordPromise = cameraRef.current?.recordAsync?.({
|
|
mute: true,
|
|
maxDuration: 600,
|
|
});
|
|
|
|
if (player && songUrl) {
|
|
try {
|
|
await player.seekTo?.(0);
|
|
} catch (_) {}
|
|
await player.play?.();
|
|
}
|
|
|
|
// Incrément des vues
|
|
if (!listenTimerRef.current && project?.id) {
|
|
listenTimerRef.current = setInterval(async () => {
|
|
try {
|
|
if (player?.playing) {
|
|
listenedMsRef.current += 500;
|
|
if (
|
|
!incrementDoneRef.current &&
|
|
listenedMsRef.current >= TIME_BEFORE_INCREMENT_MS
|
|
) {
|
|
incrementDoneRef.current = true;
|
|
try {
|
|
await projectsRef
|
|
.doc(project.id)
|
|
.set({ views: increment(1) }, { merge: true });
|
|
} catch (_) {}
|
|
}
|
|
}
|
|
} catch (_) {}
|
|
}, 500);
|
|
}
|
|
|
|
// Fin du morceau -> stop recording
|
|
if (!checkSongEndRef.current) {
|
|
checkSongEndRef.current = setInterval(() => {
|
|
try {
|
|
if (!player) return;
|
|
const duration = (player?.duration || 0) * 1000;
|
|
const currentTime = (player?.currentTime || 0) * 1000;
|
|
if (
|
|
(!player.playing && !stopRequestedRef.current) ||
|
|
(duration > 0 && currentTime >= duration - 600)
|
|
) {
|
|
stopRequestedRef.current = true;
|
|
if (checkSongEndRef.current) {
|
|
clearInterval(checkSongEndRef.current);
|
|
checkSongEndRef.current = null;
|
|
}
|
|
try {
|
|
cameraRef.current?.stopRecording?.();
|
|
} catch (_) {}
|
|
}
|
|
} catch (_) {}
|
|
}, 500);
|
|
}
|
|
|
|
const video = await recordPromise;
|
|
|
|
if (checkSongEndRef.current) {
|
|
clearInterval(checkSongEndRef.current);
|
|
checkSongEndRef.current = null;
|
|
}
|
|
try {
|
|
if (player?.playing) await player.pause?.();
|
|
} catch (_) {}
|
|
if (listenTimerRef.current) {
|
|
clearInterval(listenTimerRef.current);
|
|
listenTimerRef.current = null;
|
|
}
|
|
|
|
setIsRecording(false);
|
|
setShowProgress(false);
|
|
|
|
if (video?.uri)
|
|
navigate(Routes.RecordedPlayback, { videoUri: video.uri, project });
|
|
else navigate(Routes.RecordedPlayback, { project });
|
|
} catch (e) {
|
|
console.log("RecordPlayback error:", e);
|
|
setIsRecording(false);
|
|
setIsPreparing(false);
|
|
setShowProgress(false);
|
|
if (listenTimerRef.current) {
|
|
clearInterval(listenTimerRef.current);
|
|
listenTimerRef.current = null;
|
|
}
|
|
if (checkSongEndRef.current) {
|
|
clearInterval(checkSongEndRef.current);
|
|
checkSongEndRef.current = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
const permissionsGranted = !!cameraPermission?.granted;
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<CameraView
|
|
ref={cameraRef}
|
|
style={{ flex: 1 }}
|
|
facing="front"
|
|
mode="video"
|
|
>
|
|
<View
|
|
style={{
|
|
paddingHorizontal: gutters,
|
|
paddingTop: top,
|
|
flex: 1,
|
|
paddingBottom: gutters * 2,
|
|
}}
|
|
>
|
|
<MusicLandHeader progress={9} onPressBack={goBack} />
|
|
|
|
<View style={{ flex: 1, marginTop: 11 }}>
|
|
<CreateLyricsHeader
|
|
disableBlur={Platform.OS !== "ios"}
|
|
containerStyle={{ backgroundColor: Palette.ultraLightBlack }}
|
|
>
|
|
<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>
|
|
|
|
{/* Overlay de compte à rebours : on affiche 5→1 pour éviter l'effet visuel à 1 */}
|
|
{isPreparing && countdown >= 1 && !showProgress && (
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 72,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.HelveticaNeueBold,
|
|
}}
|
|
>
|
|
{countdown}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Permission prompt */}
|
|
{!permissionsGranted && (
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
padding: gutters,
|
|
}}
|
|
>
|
|
<GradientButton
|
|
title="Autoriser la caméra"
|
|
onPress={async () => {
|
|
try {
|
|
if (!cameraPermission?.granted)
|
|
await requestCameraPermission();
|
|
} catch (_) {}
|
|
}}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Start button */}
|
|
{permissionsGranted && !isPreparing && !isRecording && (
|
|
<GradientButton
|
|
title="Lancer ma musique"
|
|
containerStyle={{ width: "80%", alignSelf: "center" }}
|
|
disabled={!songUrl}
|
|
onPress={startCountdownThenRecord}
|
|
/>
|
|
)}
|
|
|
|
{/* Progress circulaire */}
|
|
{permissionsGranted && (isRecording || showProgress) && (
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: gutters,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 105,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<ProgressRing
|
|
size={100}
|
|
strokeWidth={8}
|
|
progress={
|
|
progressInfo.dur
|
|
? Math.min(1, (progressInfo.pos || 0) / progressInfo.dur)
|
|
: 0
|
|
}
|
|
/>
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 55,
|
|
backgroundColor: Palette.white,
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</CameraView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// Progress ring SVG
|
|
const ProgressRing = ({ size = 50, strokeWidth = 12, progress = 0 }) => {
|
|
const r = size / 2 - strokeWidth / 2;
|
|
const c = 2 * Math.PI * r;
|
|
const clamped = Math.max(0, Math.min(1, progress || 0));
|
|
const offset = c * (1 - clamped);
|
|
return (
|
|
<Svg
|
|
width={size}
|
|
height={size}
|
|
style={{
|
|
transform: [{ rotate: "-90deg" }],
|
|
backgroundColor: "#ffffff3d",
|
|
borderRadius: 55,
|
|
}}
|
|
>
|
|
<Circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={r}
|
|
stroke={Palette.white}
|
|
strokeWidth={strokeWidth}
|
|
strokeLinecap="round"
|
|
strokeDasharray={`${c} ${c}`}
|
|
strokeDashoffset={offset}
|
|
fill="transparent"
|
|
/>
|
|
</Svg>
|
|
);
|
|
};
|
|
|
|
export default RecordPlayback;
|