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

fix music url structure

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-09-02 13:17:19 +02:00
parent 98367af0b7
commit d634c55aaa
8 changed files with 141 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/index.js
-4
View File
@@ -210,10 +210,6 @@ export const tutorial = {
tasks: tutorialTasks,
};
export const mockups = {
loginAppDashboard,
};
export const background = {
writingBG,
studioBG,
src/hooks/useDataFromRef.js
+3 -6
View File
@@ -55,9 +55,6 @@ export default function useDataFromRef({
if (!_.isEqual(data, initialState)) {
onUpdate(initialState);
}
console.log("Reset state", initialState);
setEndReached(false);
setLastVisible(null);
setData(initialState);
@@ -113,7 +110,7 @@ export default function useDataFromRef({
if (e.code === "firestore/permission-denied") {
console.warn(
"Permission denied for ref: ",
ref?._collectionPath?.relativeName
ref?._collectionPath?.relativeName,
);
} else {
console.log(e);
@@ -143,14 +140,14 @@ export default function useDataFromRef({
if (e.code === "firestore/permission-denied") {
console.warn(
"Permission denied for ref: ",
ref?._collectionPath?.relativeName
ref?._collectionPath?.relativeName,
);
} else {
console.log(e);
}
await updateData([]);
setLoading(false);
}
},
);
};
src/screens/Library/Library.js
+2 -2
View File
@@ -40,10 +40,10 @@ const Library = () => {
<MyMusic />
<BackTracks />
<LikedMusic />
<MyClips />
{/*<MyClips />*/}
<MyPlaylist />
<LikedPlayback />
<LikedClips />
{/*<LikedClips />*/}
</ScrollView>
</View>
</Page>
src/screens/Library/MusicDetails.js
+51 -79
View File
@@ -1,7 +1,14 @@
import { useRoute } from "@react-navigation/core";
import { Audio } from "expo-audio";
import { useAudioPlayer } from "expo-audio";
import React, { useEffect, useMemo, useState } from "react";
import { Pressable, ScrollView, StyleSheet, Text, View, Image as RNImage } from "react-native";
import {
Pressable,
ScrollView,
StyleSheet,
Text,
View,
Image as RNImage,
} from "react-native";
import { Image as ExpoImage } from "expo-image";
import { SheetManager } from "react-native-actions-sheet";
import { useGlobal } from "reactn";
@@ -19,6 +26,10 @@ import Page from "../../layouts/Page";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import Style, { gutters, size } from "../../styles/Style";
import {
responsiveHeight,
responsiveWidth,
} from "react-native-responsive-dimensions";
// 20 secondes
const timeBeforeIncrement = 20000;
@@ -37,9 +48,7 @@ const MusicDetails = () => {
const timerRef = React.useRef(null);
const { data: project } = useDataFromRef({
ref: projectId
? firebase.firestore().collection("projects").doc(projectId)
: null,
ref: projectId ? projectsRef.doc(projectId) : null,
simpleRef: true,
listener: true,
condition: !!projectId,
@@ -64,61 +73,27 @@ const MusicDetails = () => {
const title = project?.title || "Sans titre";
const artist = owner?.userName || "MusicLand";
const coverUrl = project?.coverUrl || null;
const songUrl = useMemo(() => {
if (project?.song?.url) return project.song.url;
const arr = Array.isArray(project?.musicUrls) ? project.musicUrls : [];
return arr[0] || null;
}, [project]);
const songUrl = project?.songUrl || null;
const soundRef = React.useRef(null);
const player = useAudioPlayer(songUrl ? { uri: songUrl } : undefined);
// Load/unload audio with expo-audio for reliable status updates on iOS/Android
// Reset counters when the track changes
useEffect(() => {
let isMounted = true;
const load = async () => {
try {
// Unload previous
if (soundRef.current) {
await soundRef.current.unloadAsync();
soundRef.current.setOnPlaybackStatusUpdate(null);
soundRef.current = null;
}
// Reset listen tracking per song load
listenedMsRef.current = 0;
incrementDoneRef.current = false;
if (!songUrl) return;
const { sound } = await Audio.Sound.createAsync(
{ uri: songUrl },
{ shouldPlay: false }
);
sound.setOnPlaybackStatusUpdate((status) => {
if (!isMounted) return;
if (!status || !status.isLoaded) return;
const pos = status.positionMillis || 0;
const dur = status.durationMillis || 0;
setProgressInfo({ pos, dur });
setIsPlaying(!!status.isPlaying);
});
soundRef.current = sound;
} catch (e) {
console.log("Audio load error", e?.message);
}
};
load();
return () => {
isMounted = false;
(async () => {
try {
if (soundRef.current) {
await soundRef.current.unloadAsync();
soundRef.current.setOnPlaybackStatusUpdate(null);
soundRef.current = null;
}
} catch (_) {}
})();
};
}, [songUrl]);
// Poll player state to update progress and play state
useEffect(() => {
const id = setInterval(() => {
const dur = (player?.duration || 0) * 1000;
const pos = (player?.currentTime || 0) * 1000;
setProgressInfo({ pos, dur });
setIsPlaying(!!player?.playing);
}, 300);
return () => clearInterval(id);
}, [player]);
// Start/stop a timer to accumulate listened milliseconds while playing
useEffect(() => {
const clearTimer = () => {
@@ -163,15 +138,13 @@ const MusicDetails = () => {
};
const togglePlay = async () => {
const sound = soundRef.current;
if (!sound || !songUrl) return;
if (!player || !songUrl) return;
try {
const status = await sound.getStatusAsync();
if (status?.isLoaded && status.isPlaying) {
await sound.pauseAsync();
if (player.playing) {
await player.pause?.();
setIsPlaying(false);
} else {
await sound.playAsync();
await player.play?.();
setIsPlaying(true);
}
} catch (e) {
@@ -183,9 +156,8 @@ const MusicDetails = () => {
try {
const dur = progressInfo.dur || 0;
const pos = Math.floor(dur * ratio);
const sound = soundRef.current;
if (sound && dur > 0) {
await sound.setPositionAsync(pos);
if (player && dur > 0) {
await player.seekTo?.(Math.floor((pos || 0) / 1000));
}
} catch (e) {
console.log("MusicDetails seek error", e?.message);
@@ -196,8 +168,7 @@ const MusicDetails = () => {
try {
const cur = Math.floor((progressInfo.pos || 0) / 1000);
const next = Math.max(0, cur + deltaSeconds);
const sound = soundRef.current;
if (sound) await sound.setPositionAsync(next * 1000);
if (player) await player.seekTo?.(next);
} catch (e) {
console.log("MusicDetails seekBy error", e?.message);
}
@@ -241,10 +212,9 @@ const MusicDetails = () => {
paddingTop: 20,
paddingBottom: gutters * 2,
}}
// stickyHeaderIndices={[1]}
>
<View style={{ gap: 28 }}>
{coverUrl ? (
{coverUrl && (
<ExpoImage
source={{ uri: coverUrl }}
cachePolicy="memory-disk"
@@ -253,8 +223,6 @@ const MusicDetails = () => {
transition={150}
style={styles.img}
/>
) : (
<RNImage source={img.placeholder4} style={styles.img} />
)}
<View style={{ ...Style.containerSpaceBetween }}>
<View>
@@ -298,22 +266,22 @@ const MusicDetails = () => {
</View>
</View>
</View>
{songUrl && (
<View style={{ paddingTop: 22 }}>
<Slider
value={fmt(progressInfo.pos)}
maxValue={fmt(progressInfo.dur)}
progress={
progressInfo.dur ? (progressInfo.pos || 0) / progressInfo.dur : 0
progressInfo.dur
? (progressInfo.pos || 0) / progressInfo.dur
: 0
}
seekEnabled={!!songUrl}
onSeekStart={async () => {
try {
const sound = soundRef.current;
const status = await sound?.getStatusAsync?.();
wasPlayingBeforeSeek.current =
!!status?.isLoaded && !!status?.isPlaying;
if (status?.isLoaded && status?.isPlaying) {
await sound.pauseAsync();
wasPlayingBeforeSeek.current = !!player?.playing;
if (player?.playing) {
await player.pause?.();
setIsPlaying(false);
}
} catch (e) {
@@ -323,9 +291,8 @@ const MusicDetails = () => {
onSeek={onSeek}
onSeekEnd={async () => {
try {
const sound = soundRef.current;
if (sound && wasPlayingBeforeSeek.current) {
await sound.playAsync();
if (player && wasPlayingBeforeSeek.current) {
await player.play?.();
setIsPlaying(true);
}
wasPlayingBeforeSeek.current = false;
@@ -334,7 +301,9 @@ const MusicDetails = () => {
}
}}
/>
<View style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}>
<View
style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}
>
{/* Previous (rewind 10s) */}
<Pressable onPress={() => seekBy(-10)}>
<RNImage
@@ -371,6 +340,7 @@ const MusicDetails = () => {
</Pressable>
</View>
</View>
)}
{description?.length > 0 && (
<View style={{ marginTop: 30, gap: 20 }}>
<Text
@@ -402,6 +372,8 @@ const styles = StyleSheet.create({
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
width: responsiveWidth(70),
marginBottom: responsiveHeight(1),
},
name: {
fontSize: 16,
src/screens/Library/Research.js
-7
View File
@@ -239,13 +239,6 @@ const Research = () => {
/>
<View style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ paddingTop: 2 }}>
{(!selected &&
!projectsLoading &&
!usersLoading &&
filteredProjects.length === 0 &&
filteredUsers.length === 0) && (
<EmptyText text={"Aucun résultat"} />
)}
{((!selected && (filteredProjects.length > 0 || projectsLoading)) ||
selected === "Musiques") && (
<View style={{ paddingHorizontal: 2 }}>
src/screens/Library/components/MusicCard.js
+15 -3
View File
@@ -1,6 +1,13 @@
import { BlurView } from "expo-blur";
import React, { useEffect, useRef, useState } from "react";
import { Platform, Pressable, StyleSheet, Text, View, Image as RNImage } from "react-native";
import {
Platform,
Pressable,
StyleSheet,
Text,
View,
Image as RNImage,
} from "react-native";
import { Image as ExpoImage } from "expo-image";
import { useGlobal } from "reactn";
import { icons, img } from "../../../assets";
@@ -8,6 +15,7 @@ import { arrayRemove, arrayUnion, projectsRef } from "../../../config/firebase";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { size } from "../../../styles/Style";
import { responsiveWidth } from "react-native-responsive-dimensions";
const MusicCard = ({
onPress,
@@ -90,7 +98,7 @@ const MusicCard = ({
/>
) : (
<RNImage
source={img.placeholder2}
source={img.placeholder}
style={{ ...size({ size: 60 }), borderRadius: 12 }}
/>
)}
@@ -107,7 +115,9 @@ const MusicCard = ({
}
>
<View>
<Text style={styles.title}>{title || "Sans titre"}</Text>
<Text numberOfLines={2} style={styles.title}>
{title || "Sans titre"}
</Text>
<Text style={styles.subTitle}>{subtitle || "MusicLand"}</Text>
</View>
<View
@@ -160,6 +170,8 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.OwnersRegular,
lineHeight: 18,
width: responsiveWidth(45),
},
subTitle: {
fontSize: 12,
src/screens/NewMusicOptions.js
+8 -5
View File
@@ -30,8 +30,8 @@ const CREATE_DATA = [
img: ai.bena,
bg: background.productionBG,
label: "Bena",
desc: "Come back when you want\nto publish the song!",
type: "Producer",
desc: "Come back when you want\nto generate cover!",
type: "Designer",
},
{
img: ai.john,
@@ -72,15 +72,18 @@ const NewMusicOptions = ({ route }) => {
if (isLocked(index)) return;
switch (index) {
case 0:
navigate(Routes.WritingLyrics, {});
navigate(Routes.WritingLyrics, {
projectId: currentProjet?.id || null,
});
break;
case 1:
navigate(Routes.Studio, { action: item.type });
navigate(Routes.Compose, { projectId: currentProjet.id });
break;
case 2:
navigate(Routes.Production, { action: item.type });
navigate(Routes.PouchReady, { projectId: currentProjet.id });
break;
default:
navigate(Routes.PouchReady, { projectId: currentProjet.id });
break;
}
};
src/screens/Studio/SongReady.js
+1 -1
View File
@@ -124,7 +124,7 @@ const SongReady = () => {
.doc(projectId)
.set(
{
song: { index: selectedIndex, url },
songUrl: url,
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
},
{ merge: true },