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

clean new logique

Browse Source
This commit is contained in:
leon-morival
2025-10-23 12:06:36 +02:00
parent 02dbf98928
commit efa6c07cef
4 changed files with 144 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/components/MusicCard.js
+1 -1
View File
@@ -141,7 +141,7 @@ const MusicCard = ({
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<View style={{ gap: 3, flexShrink: 1 }}>
<View style={{ gap: 3, flexShrink: 1, paddingVertical: 11 }}>
<Text numberOfLines={2} style={styles.title}>
{title || "Sans titre"}
</Text>
src/screens/Library/components/SearchResultsList.js
+80 -94
View File
@@ -89,105 +89,91 @@ const SearchResultsList = ({
showsVerticalScrollIndicator={false}
>
{shouldShowMusics && (
<View style={{ paddingHorizontal: 2 }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
{musics.length > 0 && (
<View style={{ gap: 1 }}>
{Array.isArray(musics) &&
musics.slice(0, 6).map((project) => (
<MusicCard
key={project.id}
title={project?.title || "Sans titre"}
subtitle={project?.userName}
imageUri={project?.coverUrl || null}
projectId={project?.id}
likedBy={project?.likedBy || []}
onPress={() => handleMusicPress(project)}
onPressMore={(positionTop) => {
setSelectedProjectId(project.id);
setMenuPosition(positionTop);
setShowMenu(
(previous) =>
!previous ||
positionTop?.top !== (menuPosition?.top ?? null)
);
}}
/>
))}
{musicsLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
<View style={{ gap: 10 }}>
{musics.length > 0 && (
<>
{Array.isArray(musics) &&
musics.slice(0, 6).map((project) => (
<MusicCard
key={project.id}
title={project?.title || "Sans titre"}
subtitle={project?.userName}
imageUri={project?.coverUrl || null}
projectId={project?.id}
likedBy={project?.likedBy || []}
onPress={() => handleMusicPress(project)}
onPressMore={(positionTop) => {
setSelectedProjectId(project.id);
setMenuPosition(positionTop);
setShowMenu(
(previous) =>
!previous ||
positionTop?.top !== (menuPosition?.top ?? null)
);
}}
>
{"Chargement…"}
</Text>
)}
</View>
)}
{musics.length === 0 && !musicsLoading && (
<EmptyText text={"Aucune musique trouvée"} />
)}
</CreateLyricsHeader>
/>
))}
{musicsLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
}}
>
{"Chargement…"}
</Text>
)}
</>
)}
{musics.length === 0 && !musicsLoading && (
<EmptyText text={"Aucune musique trouvée"} />
)}
</View>
)}
{shouldShowPlaybacks && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
{playbacks.length > 0 && (
<View style={{ gap: 10 }}>
{Array.isArray(playbacks) &&
playbacks.slice(0, 6).map((project) => (
<MusicCard
key={project.id}
title={project?.title || "Sans titre"}
subtitle={project?.userName}
imageUri={project?.coverUrl || null}
projectId={project?.id}
likedBy={project?.likedBy || []}
onPress={() => handlePlaybackPress(project)}
onPressMore={(positionTop) => {
setSelectedProjectId(project.id);
setMenuPosition(positionTop);
setShowMenu(
(previous) =>
!previous ||
positionTop?.top !== (menuPosition?.top ?? null)
);
}}
/>
))}
{playbacksLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
<View style={{ gap: 10, paddingTop: 10 }}>
{playbacks.length > 0 && (
<>
{Array.isArray(playbacks) &&
playbacks.slice(0, 6).map((project) => (
<MusicCard
key={project.id}
title={project?.title || "Sans titre"}
subtitle={project?.userName}
imageUri={project?.coverUrl || null}
projectId={project?.id}
likedBy={project?.likedBy || []}
onPress={() => handlePlaybackPress(project)}
onPressMore={(positionTop) => {
setSelectedProjectId(project.id);
setMenuPosition(positionTop);
setShowMenu(
(previous) =>
!previous ||
positionTop?.top !== (menuPosition?.top ?? null)
);
}}
>
{"Chargement…"}
</Text>
)}
</View>
)}
{playbacks.length === 0 && !playbacksLoading && (
<EmptyText text={"Aucun playback trouvé"} />
)}
</CreateLyricsHeader>
/>
))}
{playbacksLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
}}
>
{"Chargement…"}
</Text>
)}
</>
)}
{playbacks.length === 0 && !playbacksLoading && (
<EmptyText text={"Aucun playback trouvé"} />
)}
</View>
)}
{shouldShowUsers && (
src/screens/Playbacks/Playbacks.js
+5 -51
View File
@@ -21,7 +21,6 @@ import {
usersRef,
} from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
@@ -32,13 +31,6 @@ import { size } from "../../styles/Style";
const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
const { currentUID, followUser, unfollowUser } = useUser() || {};
const videoUrl = item?.playbackUrl || null;
const audioSource = useMemo(() => {
const fromSong = item?.songUrl ? { uri: item.songUrl } : null;
return fromSong;
}, [item]);
const hasExternalAudio = !!audioSource;
const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
const [isLiked, setIsLiked] = useState(
currentUID ? initialLikedBy.includes(currentUID) : false
@@ -116,21 +108,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
const creatorName = item?.userName;
const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
id: item?.id
? `playback-${item.id}`
: audioSource?.uri
? `playback-${audioSource.uri}`
: undefined,
title: typeof item?.title === "string" ? item.title : "",
artist: typeof item?.userName === "string" ? item.userName : "",
artwork: item?.coverUrl || null,
coverUrl: item?.coverUrl || null,
metadata: { playbackId: item?.id },
});
const videoPlayer = useVideoPlayer(videoUrl || null, (p) => {
p.loop = false;
p.muted = true;
p.muted = false;
p.timeUpdateEventInterval = 0.2;
});
@@ -138,9 +118,6 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
const toggle = async () => {
try {
if (isActive) {
try {
if (audioPlayer && hasExternalAudio) await audioPlayer.seekTo?.(0);
} catch (e) {}
try {
if (videoPlayer) videoPlayer.currentTime = 0;
} catch (e) {}
@@ -149,41 +126,21 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
try {
if (videoPlayer) videoPlayer.play();
} catch (e) {}
try {
if (audioPlayer && hasExternalAudio) audioPlayer.play?.();
} catch (e) {}
} else {
if (audioPlayer?.playing) await audioPlayer.pause?.();
if (videoPlayer?.playing) videoPlayer.pause();
}
} catch (e) {}
};
toggle();
}, [isActive, audioPlayer, videoPlayer, hasExternalAudio]);
// Micro-correction initiale uniquement pour absorber un léger décalage réseau
useEffect(() => {
if (!isActive || !hasExternalAudio) return;
const t = global.setTimeout(() => {
try {
const a = audioPlayer?.currentTime || 0;
const v = videoPlayer?.currentTime || 0;
if (Math.abs(a - v) > 0.2 && videoPlayer) {
videoPlayer.currentTime = Math.max(0, a);
}
} catch (e) {}
}, 300);
return () => global.clearTimeout(t);
}, [isActive, hasExternalAudio, audioPlayer, videoPlayer]);
}, [isActive, videoPlayer]);
useEffect(() => {
return () => {
try {
if (audioPlayer?.playing) audioPlayer.pause?.();
if (videoPlayer?.playing) videoPlayer.pause();
} catch (e) {}
};
}, [audioPlayer, videoPlayer]);
}, [videoPlayer]);
// Build alignedWords from item musicTimestamps
const alignedWords = useMemo(() => {
@@ -204,14 +161,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
if (!isActive) return;
const id = global.setInterval(() => {
try {
const t = hasExternalAudio
? Number(audioPlayer?.currentTime || 0)
: Number(videoPlayer?.currentTime || 0);
setCurrentTimeS(t);
setCurrentTimeS(Number(videoPlayer?.currentTime || 0));
} catch (e) {}
}, 250);
return () => global.clearInterval(id);
}, [isActive, hasExternalAudio, audioPlayer, videoPlayer]);
}, [isActive, videoPlayer]);
// partage: géré via l'API native Share directement dans l'UI
return (
src/screens/Playbacks/components/PlaybackItem.web.js
+58 -210
View File
@@ -23,7 +23,6 @@ import {
projectsRef,
usersRef,
} from "../../../config/firebase";
import useSharedAudioPlayer from "../../../hooks/useSharedAudioPlayer";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
@@ -37,8 +36,7 @@ const DEBUG_PLAYBACK_WEB = true;
// NOTE: Web-only implementation that uses a native <video> element instead of expo-video
// - No Platform checks
// - Always relies on an external audio track for playback
// - Keeps the muted video visuals in sync with the external audio clock
// - Audio now comes directly from the MP4 playbackUrl
const PlaybackItem = ({
item,
@@ -54,7 +52,7 @@ const PlaybackItem = ({
width: viewportWidth,
height: viewportHeight,
});
const [openComments, setOpenComments] = useState(true);
const [openComments] = useState(true);
const commentInputRef = useRef(null);
const { currentUID, followUser, unfollowUser } = useUser() || {};
@@ -62,13 +60,6 @@ const PlaybackItem = ({
const videoRef = useRef(null); // HTMLVideoElement
const wasActiveRef = useRef(false);
const startedRef = useRef(false);
const debugTickRef = useRef(0);
const pendingSeekRef = useRef(false);
const audioSource = useMemo(() => {
const fromSong = item?.songUrl ? { uri: item.songUrl } : null;
return fromSong;
}, [item?.songUrl]);
const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
const [isLiked, setIsLiked] = useState(
@@ -144,185 +135,77 @@ const PlaybackItem = ({
setIsLiked(currentUID ? lb.includes(currentUID) : false);
}, [item?.likedBy, currentUID]);
const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
id: item?.id
? `playback-${item.id}`
: audioSource?.uri
? `playback-${audioSource.uri}`
: undefined,
title: typeof item?.title === "string" ? item.title : "",
artist: typeof item?.userName === "string" ? item.userName : "",
artwork: item?.coverUrl || null,
coverUrl: item?.coverUrl || null,
metadata: { playbackId: item?.id },
});
useEffect(() => {
startedRef.current = false;
}, [videoUrl]);
// Helpers to normalize and map clocks
const getAudioTimeSeconds = useCallback(() => {
const raw = Number(audioPlayer?.currentTime || 0);
// On web, expo-audio currentTime can be in ms; convert if it looks like ms (>1000)
const seconds = raw > 1000 ? raw / 1000 : raw;
return Number.isFinite(seconds) ? seconds : 0;
}, [audioPlayer]);
const getTargetVideoTime = useCallback(
(el) => {
const sec = getAudioTimeSeconds();
const dur = Number(el?.duration || NaN);
if (Number.isFinite(dur) && dur > 0.3) {
let t = sec % dur;
// Avoid setting time extremely close to the end to prevent immediate loop
const guard = Math.max(0, dur - 0.25);
if (t > guard) t = guard;
return t;
}
return sec;
},
[getAudioTimeSeconds]
);
// --- Playback control helpers (web <video>) ---
const playVideo = useCallback(async () => {
try {
const el = videoRef.current;
if (!el) return;
// Allow autoplay by keeping it muted initially
el.muted = true;
if (el.paused) {
await el.play().catch(() => {});
}
} catch (_e) {}
}, []);
const syncVideoClockToAudio = useCallback(() => {
try {
const el = videoRef.current;
if (!el) return;
const audioTimeS = getAudioTimeSeconds();
const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
if (!audioIsPlaying) return;
const target = getTargetVideoTime(el);
// If not enough data loaded to seek accurately, attach one-time seek on loadeddata
if (el.readyState < 2) {
if (!pendingSeekRef.current) {
pendingSeekRef.current = true;
const handler = () => {
try {
const t = getTargetVideoTime(el);
el.currentTime = t;
if (el.paused) el.play().catch(() => {});
if (DEBUG_PLAYBACK_WEB) {
console.log("[PlaybackItem.web] deferred seek on loadeddata", {
t,
rs: el.readyState,
});
}
} catch (_) {}
pendingSeekRef.current = false;
};
el.addEventListener("loadeddata", handler, { once: true });
}
return;
}
const diff = Math.abs((el.currentTime || 0) - target);
if (diff > 0.5) {
if (DEBUG_PLAYBACK_WEB) {
console.log("[PlaybackItem.web] sync video", {
audioTimeS,
target,
videoTime: Number(el.currentTime || 0),
duration: Number(el.duration || 0),
});
}
el.currentTime = target;
if (el.paused) el.play().catch(() => {});
}
} catch (_e) {}
}, [audioPlayer, getAudioTimeSeconds, getTargetVideoTime]);
// Start/reset when active
// Start/reset when active, using the video's own audio
useEffect(() => {
const el = videoRef.current;
if (!isActive || !el) return;
if (startedRef.current) return;
if (!el) return;
if (!isActive) {
try {
if (!el.paused) el.pause();
} catch (_e) {}
try {
el.muted = true;
} catch (_e) {}
startedRef.current = false;
onBackgroundSync?.({ isPlaying: false });
return;
}
const start = async () => {
try {
if (DEBUG_PLAYBACK_WEB) {
console.log("[PlaybackItem.web] start()", {
isActive,
audioPlaying: !!audioPlayer?.playing,
audioTime: Number(audioPlayer?.currentTime || 0),
videoPaused: el.paused,
videoTime: Number(el.currentTime || 0),
readyState: el.readyState,
});
if (!startedRef.current) {
startedRef.current = true;
const resetToStart = () => {
try {
el.currentTime = 0;
} catch (_e) {}
};
if (el.readyState >= 1) {
resetToStart();
} else {
const handleLoaded = () => {
resetToStart();
};
el.addEventListener("loadeddata", handleLoaded, { once: true });
}
}
// 1) Start the visual first to guarantee motion
await playVideo();
// 2) Try to start audio, but don't force sync until it's actually playing
if (audioPlayer && !audioPlayer.playing) {
try {
await audioPlayer.play?.();
} catch (_e) {}
}
// 3) Choose the best clock available for initial background sync
const audioTimeS = getAudioTimeSeconds();
const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
const videoTime = Number(el.currentTime || 0);
const clockTime = audioIsPlaying ? getTargetVideoTime(el) : videoTime;
onBackgroundSync?.({
currentTime: Number.isFinite(clockTime) ? clockTime : 0,
isPlaying: audioIsPlaying || !el.paused,
el.muted = false;
await el.play().catch((error) => {
if (DEBUG_PLAYBACK_WEB) {
console.log("[PlaybackItem.web] play() rejected", error);
}
});
startedRef.current = true;
} catch (_e) {}
onBackgroundSync?.({
currentTime: Number(el.currentTime || 0),
isPlaying: !el.paused,
});
} catch (_e) {
if (DEBUG_PLAYBACK_WEB) {
console.log("[PlaybackItem.web] start error", _e);
}
}
};
start();
return () => {};
}, [
isActive,
playVideo,
audioPlayer,
syncVideoClockToAudio,
onBackgroundSync,
]);
useEffect(() => {
if (isActive) return;
try {
if (audioPlayer?.playing) audioPlayer.pause?.();
} catch (_e) {}
const el = videoRef.current;
if (!el) return;
try {
if (!el.paused) el.pause();
el.muted = true;
} catch (_e) {}
startedRef.current = false;
}, [isActive, audioPlayer]);
}, [isActive, videoUrl, onBackgroundSync]);
// Pause all on unmount
useEffect(() => {
const el = videoRef.current; // snapshot ref for cleanup
const el = videoRef.current;
return () => {
try {
if (audioPlayer?.playing) audioPlayer.pause?.();
if (el && !el.paused) el.pause();
} catch (_e) {}
onBackgroundSync?.({ isPlaying: false });
};
}, [audioPlayer, onBackgroundSync]);
}, [onBackgroundSync]);
// Lyrics timing
// Lyrics timing based on video clock
const alignedWords = useMemo(() => {
const idx = Number(item?.songIndex) || 0;
const ts = item?.musicTimestamps?.[idx];
@@ -340,53 +223,18 @@ const PlaybackItem = ({
const id = setInterval(() => {
try {
const el = videoRef.current;
const audioTimeS = getAudioTimeSeconds();
const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
const videoTime = Number(el?.currentTime || 0);
// Lyrics: real audio seconds (normalized), not modulo
const timeForLyrics =
audioIsPlaying && Number.isFinite(audioTimeS)
? audioTimeS
: Number.isFinite(videoTime)
? videoTime
: 0;
setCurrentTimeS(timeForLyrics);
// Keep video roughly in sync with audio only when audio is genuinely playing
if (audioIsPlaying) {
syncVideoClockToAudio();
}
const safeTime = Number.isFinite(videoTime) ? videoTime : 0;
setCurrentTimeS(safeTime);
onBackgroundSync?.({
// Background video: use the same modulo/clamped target as the main video to avoid loop-thrashing
currentTime: getTargetVideoTime(el),
isPlaying: audioIsPlaying || (!!el && !el.paused),
currentTime: safeTime,
isPlaying: !!el && !el.paused,
});
if (DEBUG_PLAYBACK_WEB) {
const n = (debugTickRef.current = (debugTickRef.current + 1) % 4);
if (n === 0) {
console.log("[PlaybackItem.web] tick", {
audioPlaying: !!audioPlayer?.playing,
audioTimeS,
videoPaused: !!el?.paused,
videoTime,
started: startedRef.current,
});
}
}
} catch (_e) {}
}, 250);
return () => clearInterval(id);
}, [
isActive,
audioPlayer,
syncVideoClockToAudio,
onBackgroundSync,
getAudioTimeSeconds,
getTargetVideoTime,
]);
}, [isActive, onBackgroundSync]);
useEffect(() => {
if (!onBackgroundSync) return undefined;
@@ -497,7 +345,7 @@ const PlaybackItem = ({
ref={videoRef}
src={videoUrl}
playsInline
muted
muted={!isActive}
preload="auto"
// Using web CSS properties here on purpose
style={{