leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

playback

Browse Source
This commit is contained in:
leon-morival
2025-09-02 13:18:20 +02:00
parent 98367af0b7
commit 2a821182c5
5 changed files with 285 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/MusicDetails.js
+9 -2
View File
@@ -1,8 +1,15 @@
import { useRoute } from "@react-navigation/core";
import { Audio } from "expo-audio";
import React, { useEffect, useMemo, useState } from "react";
import { Pressable, ScrollView, StyleSheet, Text, View, Image as RNImage } from "react-native";
import { Image as ExpoImage } from "expo-image";
import React, { useEffect, useMemo, useState } from "react";
import {
Pressable,
Image as RNImage,
ScrollView,
StyleSheet,
Text,
View,
} from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { useGlobal } from "reactn";
import { background, icons, img } from "../../assets";
src/screens/NewMusicOptions.js
+29 -10
View File
@@ -1,14 +1,14 @@
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { BlurView } from "expo-blur";
import React, { useMemo } from "react";
import { Image, Platform, Pressable, Text, View } from "react-native";
import Page from "../layouts/Page";
import { ai, background } from "../assets";
import { BlurView } from "expo-blur";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import Page from "../layouts/Page";
import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService";
import { useUserData } from "../providers/UserDataProvider";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import palette from "../styles/Palette";
const CREATE_DATA = [
@@ -58,14 +58,27 @@ const NewMusicOptions = ({ route }) => {
? currentProjet.lyrics.length > 0
: !!currentProjet?.lyrics;
const hasCover = !!currentProjet?.coverUrl;
console.log("current projet cover", currentProjet?.coverUrl);
const isLocked = (index) => {
// 0: Songwriter, 1: Beatmaker, 2: Producer, 3: Director
if (index === 3) return true; // Director toujours verrouillé
if (!hasProject) return index !== 0; // seulement Songwriter
if (hasCover) return index !== 2; // seulement Producer
if (hasLyrics) return !(index === 0 || index === 1); // Songwriter + Beatmaker
return index !== 0; // par défaut seulement Songwriter
// Rules:
// - If no project: only Songwriter (0) is available.
// - If project exists: Songwriter (0) is always available.
// - If lyrics exist: Beatmaker (1) becomes available.
// - If cover exists: Producer (2) and Director (3) become available.
if (!hasProject) return index !== 0;
const allowed = new Set([0]); // songwriter always allowed when project exists
if (hasLyrics) {
allowed.add(1);
}
if (hasCover) {
allowed.add(2);
allowed.add(3);
}
return !allowed.has(index);
};
const onPressOption = (index, item) => {
@@ -80,6 +93,12 @@ const NewMusicOptions = ({ route }) => {
case 2:
navigate(Routes.Production, { action: item.type });
break;
case 3:
console.log("test");
navigate(Routes.Playback, {
action: item.type,
project: currentProjet,
});
default:
break;
}
src/screens/Playback/Playback.js
+9 -8
View File
@@ -1,15 +1,16 @@
import { View, Text, StyleSheet, Image } from "react-native";
import React from "react";
import { Image, StyleSheet, View } from "react-native";
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 MusicLandHeader from "../../components/MusicLandHeader";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters } from "../../styles";
const Playback = () => {
const Playback = ({ route }) => {
const { project } = route.params;
return (
<Page headerType="NONE" backgroundImg={background.playbackBG2}>
<Image source={ai.john} style={styles.img} resizeMode="contain" />
@@ -23,10 +24,10 @@ const Playback = () => {
>
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
<BorderGradientButton title="Guide du Playbacker" />
<BorderGradientButton title="Importer une vidéo" />
{/* <BorderGradientButton title="Importer une vidéo" /> */}
<GradientButton
title="Enregistrer mon Playback"
onPress={() => navigate(Routes.RecordPlayback)}
onPress={() => navigate(Routes.RecordPlayback, { project })}
/>
</View>
</View>
src/screens/Playback/RecordPlayback.js
+223 -10
View File
@@ -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>
{/* Start button */}
{permissionsGranted && !isPreparing && !isRecording && (
<GradientButton
title="Lancer ma musique"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => navigate(Routes.RecordedPlayback)}
disabled={!songUrl}
onPress={startCountdownThenRecord}
/>
)}
</View>
</CameraView>
</View>
src/screens/Playback/RecordedPlayback.js
+7 -9
View File
@@ -1,14 +1,14 @@
import { View, Text, Image } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { Image, View } from "react-native";
import { background, img } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import Slider from "../../components/Slider";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
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 (
@@ -32,9 +32,7 @@ const RecordedPlayback = () => {
<View
style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
>
<GradientButton
title="Je valide"
/>
<GradientButton title="Je valide" />
<BorderGradientButton
title="Je change de décor"
onPress={() => navigate(Routes.ChooseDecor)}