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

dev - hls

Browse Source
This commit is contained in:
Victor
2025-09-17 13:51:02 +02:00
parent 2d4642891d
commit 12f87f0c92
6 changed files with 443 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Playback/RecordPlayback.js
+67 -79
View File
@@ -1,25 +1,25 @@
import { useFocusEffect } from "@react-navigation/native";
import { useAudioPlayer } from "expo-audio";
import { CameraView, useCameraPermissions } from "expo-camera";
import { useFocusEffect } from '@react-navigation/native';
import { useAudioPlayer } from 'expo-audio';
import { CameraView, useCameraPermissions } from 'expo-camera';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { Alert, 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 KaraokeLyrics from "../../components/KaraokeLyrics";
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";
} from 'react';
import { Alert, 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 KaraokeLyrics from '../../components/KaraokeLyrics';
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';
const TIME_BEFORE_INCREMENT_MS = 20000; // 20s
@@ -65,7 +65,7 @@ const RecordPlayback = ({ route }) => {
const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
return arr.map((w) => ({
word: String(w?.word ?? ""),
word: String(w?.word ?? ''),
startS: Number(w?.startS ?? 0),
endS: Number(w?.endS ?? 0),
}));
@@ -77,16 +77,16 @@ const RecordPlayback = ({ route }) => {
let buf = [];
let start = null;
const clean = (txt) =>
String(txt || "")
.replace(/\s+/g, " ")
String(txt || '')
.replace(/\s+/g, ' ')
.trim();
const isSentenceEnd = (txt) => /[.!?]$/.test((txt || "").trim());
const isSentenceEnd = (txt) => /[.!?]$/.test((txt || '').trim());
const isSectionTag = (txt) =>
/^\s*\[[^\]]+\]\s*$/i.test((txt || "").trim());
/^\s*\[[^\]]+\]\s*$/i.test((txt || '').trim());
for (let i = 0; i < alignedWords.length; i++) {
const w = alignedWords[i];
const original = String(w.word || "");
const textNoNewline = original.replace(/\n/g, " ");
const original = String(w.word || '');
const textNoNewline = original.replace(/\n/g, ' ');
const gapToNext =
i < alignedWords.length - 1
? Math.max(0, alignedWords[i + 1].startS - w.endS)
@@ -113,7 +113,7 @@ const RecordPlayback = ({ route }) => {
const isLast = i === alignedWords.length - 1;
if (eolByNewline || eolByPause || eolByPunct || isLast) {
const joined = clean(buf.join(" "));
const joined = clean(buf.join(' '));
if (joined)
out.push({ text: joined, startS: start ?? w.startS, endS: w.endS });
buf = [];
@@ -343,7 +343,7 @@ const RecordPlayback = ({ route }) => {
navigate(Routes.RecordedPlayback, { videoUri: video.uri, project });
else navigate(Routes.RecordedPlayback, { project });
} catch (e) {
console.log("RecordPlayback error:", e);
console.log('RecordPlayback error:', e);
setIsRecording(false);
setIsPreparing(false);
setShowProgress(false);
@@ -356,14 +356,14 @@ const RecordPlayback = ({ route }) => {
checkSongEndRef.current = null;
}
// Inform the user when using a simulator where recording isn't supported
const msg = String(e?.message || e || "");
const msg = String(e?.message || e || '');
if (/not supported on the simulator/i.test(msg)) {
Alert.alert(
"Indisponible sur simulateur",
"L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.",
'Indisponible sur simulateur',
'L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.',
[
{
text: "OK",
text: 'OK',
onPress: () => {
try {
goBack();
@@ -384,17 +384,15 @@ const RecordPlayback = ({ route }) => {
<CameraView
ref={cameraRef}
style={{ flex: 1 }}
facing="front"
mode="video"
>
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 }}>
@@ -402,22 +400,20 @@ const RecordPlayback = ({ route }) => {
{isPreparing && countdown >= 1 && !showProgress && (
<View
style={{
position: "absolute",
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: "center",
justifyContent: "center",
}}
>
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 72,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueBold,
}}
>
}}>
{countdown}
</Text>
</View>
@@ -427,15 +423,14 @@ const RecordPlayback = ({ route }) => {
{!permissionsGranted && (
<View
style={{
position: "absolute",
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
padding: gutters,
}}
>
}}>
<GradientButton
title="Autoriser la caméra"
title='Autoriser la caméra'
onPress={async () => {
try {
if (!cameraPermission?.granted)
@@ -450,8 +445,8 @@ const RecordPlayback = ({ route }) => {
{/* Start button */}
{permissionsGranted && !isPreparing && !isRecording && (
<GradientButton
title="Lancer ma musique"
containerStyle={{ width: "80%", alignSelf: "center" }}
title='Lancer ma musique'
containerStyle={{ width: '80%', alignSelf: 'center' }}
disabled={!songUrl}
onPress={startCountdownThenRecord}
/>
@@ -461,23 +456,21 @@ const RecordPlayback = ({ route }) => {
{permissionsGranted && (isRecording || showProgress) && (
<View
style={{
position: "absolute",
position: 'absolute',
left: 0,
right: 0,
bottom: gutters,
alignItems: "center",
justifyContent: "center",
}}
>
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: 100,
height: 100,
borderRadius: 105,
alignItems: "center",
justifyContent: "center",
}}
>
alignItems: 'center',
justifyContent: 'center',
}}>
<ProgressRing
size={100}
strokeWidth={8}
@@ -489,7 +482,7 @@ const RecordPlayback = ({ route }) => {
/>
<View
style={{
position: "absolute",
position: 'absolute',
width: 50,
height: 50,
borderRadius: 55,
@@ -503,15 +496,14 @@ const RecordPlayback = ({ route }) => {
</CameraView>
{/* CreateLyricsHeader overlay outside of CameraView */}
<View
pointerEvents="box-none"
pointerEvents='box-none'
style={{
position: "absolute",
position: 'absolute',
left: 0,
right: 0,
bottom: bottom + 130,
paddingHorizontal: gutters,
}}
>
}}>
<CreateLyricsHeader>
{(isRecording || showProgress) && alignedWords?.length > 0 ? (
<KaraokeLyrics
@@ -524,8 +516,7 @@ const RecordPlayback = ({ route }) => {
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>
@@ -547,21 +538,20 @@ const ProgressRing = ({ size = 50, strokeWidth = 12, progress = 0 }) => {
width={size}
height={size}
style={{
transform: [{ rotate: "-90deg" }],
backgroundColor: "#ffffff3d",
transform: [{ rotate: '-90deg' }],
backgroundColor: '#ffffff3d',
borderRadius: 55,
}}
>
}}>
<Circle
cx={size / 2}
cy={size / 2}
r={r}
stroke={Palette.white}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinecap='round'
strokeDasharray={`${c} ${c}`}
strokeDashoffset={offset}
fill="transparent"
fill='transparent'
/>
</Svg>
);
@@ -571,10 +561,10 @@ export default RecordPlayback;
// Render previous/current/next line to reduce jumpiness
const KaraokeLines = ({ lines = [], currentLineIdx = -1 }) => {
const prev = currentLineIdx > 0 ? lines[currentLineIdx - 1]?.text : "";
const curr = currentLineIdx >= 0 ? lines[currentLineIdx]?.text : "";
const prev = currentLineIdx > 0 ? lines[currentLineIdx - 1]?.text : '';
const curr = currentLineIdx >= 0 ? lines[currentLineIdx]?.text : '';
const next =
currentLineIdx + 1 < lines.length ? lines[currentLineIdx + 1]?.text : "";
currentLineIdx + 1 < lines.length ? lines[currentLineIdx + 1]?.text : '';
return (
<View style={{ gap: 4 }}>
{/* {prev ? (
@@ -586,21 +576,19 @@ const KaraokeLines = ({ lines = [], currentLineIdx = -1 }) => {
style={{
color: Palette.white,
fontSize: 18,
textAlign: "center",
textAlign: 'center',
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
}}>
{curr}
</Text>
{next ? (
<Text
style={{
color: "#FFFFFF99",
color: '#FFFFFF99',
fontSize: 14,
textAlign: "center",
textAlign: 'center',
fontFamily: FONT_FAMILY.InterMedium,
}}
>
}}>
{next}
</Text>
) : null}
src/screens/Production/DownloadSongs.js
+50 -54
View File
@@ -1,5 +1,5 @@
import { BlurView } from "expo-blur";
import React from "react";
import { BlurView } from 'expo-blur';
import React from 'react';
import {
Image,
Platform,
@@ -7,38 +7,38 @@ import {
StyleSheet,
Text,
View,
} from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, img } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { projectsRef, serverTimestamp } from "../../config/firebase";
import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
} from 'react-native';
import useMinuit from 'react-native-minuit/src/hooks/useMinuit.js';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import { background, img } from '../../assets';
import MusicLandHeader from '../../components/MusicLandHeader';
import { projectsRef, serverTimestamp } from '../../config/firebase';
import { uploadFileToFirebase } from '../../helpers/uploadToFirebase';
import Page from '../../layouts/Page';
import { Routes } from '../../navigation';
import { goBack, navigate } from '../../navigation/NavigationService';
import { Palette } from '../../styles';
import { FONT_FAMILY } from '../../styles/Fonts';
import { size } from "../../styles/Style";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { size } from '../../styles/Style';
import CreateLyricsHeader from '../Writing/components/CreateLyricsHeader';
const DownloadSongs = ({ route }) => {
// const params = useRoute().params;
const { action, uri, project } = route.params || {};
console.log("project id", project?.id);
console.log('project id', project?.id);
const { setIsLoading, setTooltip } = useMinuit();
const handleDownloadUri = async () => {
if (action === "playback" && project?.id) {
if (action === 'playback' && project?.id) {
// Publication du playback
console.log("project id : ", project.id);
console.log('project id : ', project.id);
try {
setIsLoading(true);
const { resultURI = null } = await uploadFileToFirebase({
uri: uri,
path: `musics/${project.id}/playback.mp4`,
path: `musics/${project.id}/source.mp4`,
shouldCompress: true,
fileType: "VIDEO",
fileType: 'VIDEO',
});
if (!resultURI) throw new Error("Téléversement de l'image impossible");
@@ -52,20 +52,20 @@ const DownloadSongs = ({ route }) => {
{ merge: true }
);
setTooltip({
type: "success",
text: "Playback publié avec succès",
type: 'success',
text: 'Vidéo uploadée, conversion HLS en cours…',
});
} else {
setTooltip({
type: "error",
text: "Erreur lors de la publication du playback",
type: 'error',
text: 'Erreur lors de la publication du playback',
});
}
} catch (error) {
console.log("error upload playback", error);
console.log('error upload playback', error);
setTooltip({
type: "error",
text: "Erreur lors de la publication du playback",
type: 'error',
text: 'Erreur lors de la publication du playback',
});
} finally {
setIsLoading(false);
@@ -78,39 +78,37 @@ const DownloadSongs = ({ route }) => {
return (
<Page
backgroundImg={
action === "playback"
action === 'playback'
? background.playbackBG2
: background.productionBG2
}
headerType="NONE"
>
headerType='NONE'>
<MusicLandHeader onPressBack={goBack} progress={50} />
<View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
}}>
<Image
source={img.placeholder2}
style={{
...size({ size: 158 }),
borderRadius: 13,
alignSelf: "center",
alignSelf: 'center',
}}
/>
<View style={{ gap: 12, paddingVertical: 12 }}>
<Text style={styles.title}>
Prêt à télécharger{" "}
{action === "playback" ? "ton Playback" : "ta chanson"} ?
Prêt à télécharger{' '}
{action === 'playback' ? 'ton Playback' : 'ta chanson'} ?
</Text>
<View style={{ gap: 10 }}>
<Pressable
style={styles.itemContainer}
onPress={
() => {
console.log("test");
console.log('test');
handleDownloadUri();
}
@@ -118,19 +116,18 @@ const DownloadSongs = ({ route }) => {
// action,
// uri,
// })
}
>
}>
<BlurView
style={styles.blurView}
intensity={Platform.OS !== "ios" ? 10 : 40}
tint="dark"
intensity={Platform.OS !== 'ios' ? 10 : 40}
tint='dark'
// experimentalBlurMethod={
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<Text style={styles.label}>
Télécharger{" "}
{action === "playback" ? "mon Playback" : "ma chanson"}
Télécharger{' '}
{action === 'playback' ? 'mon Playback' : 'ma chanson'}
</Text>
<Text style={styles.description}>Pour moi uniquement</Text>
</BlurView>
@@ -141,26 +138,25 @@ const DownloadSongs = ({ route }) => {
navigate(Routes.StreamSong, {
action,
})
}
>
}>
<BlurView
style={styles.blurView}
intensity={Platform.OS !== "ios" ? 10 : 40}
tint="dark"
intensity={Platform.OS !== 'ios' ? 10 : 40}
tint='dark'
// experimentalBlurMethod={
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<Text style={styles.label}>
Diffuser{" "}
{action === "playback" ? "mon Playback" : "ma chanson"} sur
Diffuser{' '}
{action === 'playback' ? 'mon Playback' : 'ma chanson'} sur
la plateforme de MusicLand (+ réseaux sociaux) et participer
au concours
</Text>
<Text style={styles.description}>
Top 3: 1er 15% du CA ML - 2ème 10% du CA ML - 3ème 5% du CA
ML (catégorie{" "}
{action === "playback" ? "Playback" : "chanson"})
ML (catégorie{' '}
{action === 'playback' ? 'Playback' : 'chanson'})
</Text>
</BlurView>
</Pressable>
@@ -197,9 +193,9 @@ const styles = StyleSheet.create({
},
itemContainer: {
borderRadius: 12,
overflow: "hidden",
backgroundColor: "#FFFFFF03",
shadowColor: "#0000001A",
overflow: 'hidden',
backgroundColor: '#FFFFFF03',
shadowColor: '#0000001A',
shadowOffset: {
width: 0,
height: 2,