playback
This commit is contained in:
@@ -1,21 +1,181 @@
|
||||
import { Text, View } from "react-native";
|
||||
import { Audio } from "expo-audio";
|
||||
import { CameraView, useCameraPermissions } from "expo-camera";
|
||||
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 { Text, View } from "react-native";
|
||||
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 MusicLandHeader from "../../components/MusicLandHeader";
|
||||
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";
|
||||
|
||||
const RecordPlayback = () => {
|
||||
const RecordPlayback = ({ route }) => {
|
||||
const { top } = useSafeAreaInsets();
|
||||
const { project } = route.params || {};
|
||||
|
||||
// Permissions
|
||||
const [cameraPermission, requestCameraPermission] = useCameraPermissions();
|
||||
|
||||
// Refs
|
||||
const cameraRef = React.useRef(null);
|
||||
const soundRef = React.useRef(null);
|
||||
const countdownTimerRef = React.useRef(null);
|
||||
const stopRequestedRef = React.useRef(false);
|
||||
|
||||
// UI / state
|
||||
const [isPreparing, setIsPreparing] = React.useState(false);
|
||||
const [countdown, setCountdown] = React.useState(0);
|
||||
const [isRecording, setIsRecording] = React.useState(false);
|
||||
|
||||
// Derive song URL robustly
|
||||
const songUrl = project?.songUrl || null;
|
||||
|
||||
React.useEffect(() => {
|
||||
// Request permissions on mount if not granted
|
||||
(async () => {
|
||||
try {
|
||||
if (!cameraPermission?.granted) await requestCameraPermission();
|
||||
} catch (_) {}
|
||||
})();
|
||||
return () => {
|
||||
// Cleanup timers and audio on unmount
|
||||
try {
|
||||
if (countdownTimerRef.current) {
|
||||
global.clearInterval(countdownTimerRef.current);
|
||||
countdownTimerRef.current = null;
|
||||
}
|
||||
(async () => {
|
||||
try {
|
||||
if (soundRef.current) {
|
||||
soundRef.current.setOnPlaybackStatusUpdate(null);
|
||||
await soundRef.current.unloadAsync();
|
||||
soundRef.current = null;
|
||||
}
|
||||
} catch (_) {}
|
||||
})();
|
||||
} catch (_) {}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startCountdownThenRecord = async () => {
|
||||
console.log("start countdown");
|
||||
if (!songUrl) return;
|
||||
console.log("songUrl exists");
|
||||
setIsPreparing(true);
|
||||
setCountdown(5);
|
||||
// Start music + recording immediately when countdown starts
|
||||
void startRecordingWithMusic();
|
||||
// 5 -> 0 countdown display only
|
||||
countdownTimerRef.current = global.setInterval(() => {
|
||||
setCountdown((c) => {
|
||||
const next = (c || 0) - 1;
|
||||
if (next <= 0) {
|
||||
global.clearInterval(countdownTimerRef.current);
|
||||
countdownTimerRef.current = null;
|
||||
}
|
||||
return Math.max(0, next);
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const startRecordingWithMusic = async () => {
|
||||
try {
|
||||
stopRequestedRef.current = false;
|
||||
console.log("stop requested ref is : ", soundRef.current);
|
||||
// Prepare audio
|
||||
if (soundRef.current) {
|
||||
console.log("if sound ref current");
|
||||
try {
|
||||
soundRef.current.setOnPlaybackStatusUpdate(null);
|
||||
await soundRef.current.unloadAsync();
|
||||
console.log("unload sound ref");
|
||||
} catch (_) {}
|
||||
soundRef.current = null;
|
||||
}
|
||||
|
||||
// Ensure audio mode allows playback alongside camera recording
|
||||
try {
|
||||
await Audio.setAudioModeAsync({
|
||||
playsInSilentMode: true,
|
||||
interruptionMode: "mixWithOthers",
|
||||
allowsRecording: true,
|
||||
shouldPlayInBackground: false,
|
||||
});
|
||||
} catch (_) {}
|
||||
|
||||
const { sound } = await Audio.Sound.createAsync(
|
||||
{ uri: songUrl },
|
||||
{ shouldPlay: false }
|
||||
);
|
||||
|
||||
sound.setOnPlaybackStatusUpdate((status) => {
|
||||
if (!status || !status.isLoaded) return;
|
||||
if (status.didJustFinish && !stopRequestedRef.current) {
|
||||
stopRequestedRef.current = true;
|
||||
try {
|
||||
cameraRef.current?.stopRecording?.();
|
||||
} catch (_) {}
|
||||
}
|
||||
});
|
||||
soundRef.current = sound;
|
||||
|
||||
// Start recording
|
||||
setIsRecording(true);
|
||||
const recordPromise = cameraRef.current?.recordAsync?.({
|
||||
mute: true,
|
||||
maxDuration: 600, // safety cap (10 min)
|
||||
});
|
||||
|
||||
// Start playing
|
||||
await sound.playAsync();
|
||||
|
||||
// Wait for recording to stop (either by song end or manual stop)
|
||||
const video = await recordPromise;
|
||||
|
||||
// Ensure audio stops and cleanup
|
||||
try {
|
||||
const s = soundRef.current;
|
||||
if (s) {
|
||||
s.setOnPlaybackStatusUpdate(null);
|
||||
await s.stopAsync().catch(() => {});
|
||||
await s.unloadAsync().catch(() => {});
|
||||
}
|
||||
} catch (_) {}
|
||||
soundRef.current = null;
|
||||
|
||||
setIsRecording(false);
|
||||
setIsPreparing(false);
|
||||
|
||||
// Navigate to next screen with video uri if available
|
||||
if (video?.uri) {
|
||||
navigate(Routes.RecordedPlayback, { videoUri: video.uri, project });
|
||||
} else {
|
||||
navigate(Routes.RecordedPlayback, { project });
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback on error
|
||||
setIsRecording(false);
|
||||
setIsPreparing(false);
|
||||
try {
|
||||
soundRef.current?.setOnPlaybackStatusUpdate?.(null);
|
||||
await soundRef.current?.unloadAsync?.();
|
||||
} catch (_) {}
|
||||
soundRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const permissionsGranted = !!cameraPermission?.granted;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<CameraView style={{ flex: 1 }} facing="front">
|
||||
<CameraView
|
||||
ref={cameraRef}
|
||||
style={{ flex: 1 }}
|
||||
facing="front"
|
||||
mode="video"
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: gutters,
|
||||
@@ -38,15 +198,68 @@ const RecordPlayback = () => {
|
||||
musique, et s'arrêtera à la fin du morceau.
|
||||
</Text>
|
||||
</CreateLyricsHeader>
|
||||
|
||||
{/* Centered countdown overlay */}
|
||||
{(isPreparing || isRecording) && countdown > 0 && (
|
||||
<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>
|
||||
<GradientButton
|
||||
title="Lancer ma musique"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={() => navigate(Routes.RecordedPlayback)}
|
||||
/>
|
||||
|
||||
{/* Start button */}
|
||||
{permissionsGranted && !isPreparing && !isRecording && (
|
||||
<GradientButton
|
||||
title="Lancer ma musique"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
disabled={!songUrl}
|
||||
onPress={startCountdownThenRecord}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</CameraView>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user