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

clear last tickets

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-11-25 14:58:06 +01:00
parent 72852ad92b
commit ee9cc5dccd
31 changed files with 1009 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/HitParade/HitParade.js
+32 -3
View File
@@ -11,6 +11,7 @@ import {
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, icons } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import ShareBtn from "../../components/ShareBtn/ShareBtn";
import { projectsRef } from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
@@ -20,6 +21,7 @@ import { navigate } from "../../navigation/NavigationService";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import MobileCoinBadge from "../../components/MobileCoinBadge";
import PlaybacksCard from "./components/PlaybacksCard";
import SongCard from "./components/SongCard";
const HitParade = () => {
@@ -51,6 +53,18 @@ const HitParade = () => {
return [arr.slice(0, 5), arr.slice(5)];
}, [topPlaybacks]);
const resolvePlaybackThumbnail = useCallback((project) => {
const candidates = [
project?.thumbnailUrl,
project?.songThumbnailUrl,
project?.coverUrl,
];
const uri = candidates.find(
(value) => typeof value === "string" && value.trim().length > 0,
);
return uri || null;
}, []);
// === RENDUS PAR PLATEFORME ===
const renderSongsMobile = () => (
<FlatList
@@ -91,7 +105,7 @@ const HitParade = () => {
rank={index + 1}
title={item?.title || "Sans titre"}
artist={item?.userName}
coverUrl={item?.coverUrl || null}
thumbnailUrl={resolvePlaybackThumbnail(item)}
onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}
/>
)}
@@ -167,7 +181,7 @@ const HitParade = () => {
rank={idx + 1}
title={item?.title || "Sans titre"}
artist={"MusicLand"}
coverUrl={item?.coverUrl || null}
thumbnailUrl={resolvePlaybackThumbnail(item)}
onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}
/>
))}
@@ -182,7 +196,7 @@ const HitParade = () => {
rank={5 + idx + 1}
title={item?.title || "Sans titre"}
artist={"MusicLand"}
coverUrl={item?.coverUrl || null}
thumbnailUrl={resolvePlaybackThumbnail(item)}
onPress={() =>
navigate(Routes.Playbacks, { projectId: item.id })
}
@@ -221,6 +235,21 @@ const HitParade = () => {
blurIntensity={isWeb ? 0 : 0}
showCoin={false}
>
{!isWeb ? (
<View
style={{
width: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: 12,
marginBottom: 4,
}}
>
<MobileCoinBadge style={{ flexShrink: 1 }} />
<ShareBtn label="Partager" style={{ flexShrink: 0 }} />
</View>
) : null}
<View style={{ gap: 12, flex: 1 }}>
<Image
source={icons.musicLandLogo}
src/screens/HitParade/components/PlaybacksCard.js
+6 -1
View File
@@ -9,9 +9,14 @@ const PlaybacksCard = ({
rank = 1,
title = "Sans titre",
artist = "MusicLand",
thumbnailUrl = null,
coverUrl = null,
onPress = () => null,
}) => {
const resolveUri = (value) =>
typeof value === "string" && value.trim().length > 0 ? value : null;
const imageUri = resolveUri(thumbnailUrl) ?? resolveUri(coverUrl);
return (
<Pressable onPress={onPress}>
<BlurView
@@ -45,7 +50,7 @@ const PlaybacksCard = ({
{rank}
</Text>
<Image
source={coverUrl ? { uri: coverUrl } : img.placeholder3}
source={imageUri ? { uri: imageUri } : img.placeholder3}
style={{ width: 67, height: 108, borderRadius: 16 }}
/>
<View>
src/screens/Library/Library.js
+17
View File
@@ -11,6 +11,8 @@ import {
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, icons } from "../../assets";
import SearchBar from "../../components/SearchBar";
import MobileCoinBadge from "../../components/MobileCoinBadge";
import ShareBtn from "../../components/ShareBtn/ShareBtn";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
@@ -57,6 +59,21 @@ const Library = () => {
return (
<Page backgroundImg={background.libraryBG} headerType="NONE">
{Platform.OS !== "web" ? (
<View
style={{
width: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: 12,
marginBottom: 6,
}}
>
<MobileCoinBadge style={{ flexShrink: 1 }} />
<ShareBtn label="Partager" style={{ flexShrink: 0 }} />
</View>
) : null}
<View style={{ gap: 17, paddingBottom: 20 }}>
<Image
source={icons.musicLandLogo}
src/screens/Library/MusicDetails.js
+12 -69
View File
@@ -24,7 +24,7 @@ import {
import { useGlobal } from "reactn";
import { background, icons } from "../../assets";
import PressableScale from "../../components/PressableScale";
import Slider from "../../components/Slider";
import ProgressSlider from "../../components/player/ProgressSlider";
import { increment, projectsRef, usersRef } from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
import usePlayer from "../../hooks/usePlayer";
@@ -61,9 +61,6 @@ const MusicDetails = ({ route }) => {
const projectId = params?.projectId || null;
const [fav, setFav] = useState(false);
const [currentUID] = useGlobal("currentUID");
const wasPlayingBeforeSeek = useRef(false);
const hasCapturedSeekStateRef = useRef(false);
const lastSeekTargetMsRef = useRef(null);
const listenedMsRef = useRef(0);
const incrementDoneRef = useRef(false);
const timerRef = useRef(null);
@@ -292,15 +289,6 @@ const MusicDetails = ({ route }) => {
return clearTimer;
}, [isTrackPlaying, projectId]);
const fmt = (ms) => {
const total = Math.max(0, Math.floor((ms || 0) / 1000));
const m = Math.floor(total / 60)
.toString()
.padStart(1, "0");
const s = (total % 60).toString().padStart(2, "0");
return `${m}:${s}`;
};
const togglePlay = useCallback(async () => {
if (!trackDescriptor) return;
try {
@@ -328,41 +316,30 @@ const MusicDetails = ({ route }) => {
const handleSliderSeekStart = useCallback(async () => {
if (!trackDescriptor) return;
lastSeekTargetMsRef.current = null;
if (!hasCapturedSeekStateRef.current) {
hasCapturedSeekStateRef.current = true;
wasPlayingBeforeSeek.current = isTrackPlaying;
}
try {
if (!isCurrentTrack) {
await ensureLoaded({ startPositionMs: positionMs, autoPlay: false });
}
if (isTrackPlaying) {
await pauseTrack();
}
} catch (e) {
console.log("MusicDetails seek start error", e?.message);
}
}, [
trackDescriptor,
isTrackPlaying,
isCurrentTrack,
ensureLoaded,
positionMs,
pauseTrack,
]);
const handleSliderSeek = useCallback(
async (ratio) => {
async (targetMs) => {
const dur = sliderDurationMs || 0;
if (!trackDescriptor || dur <= 0) return;
const targetMs = Math.max(0, Math.floor(dur * ratio));
lastSeekTargetMsRef.current = targetMs;
const bounded = Math.max(0, Math.min(dur, Math.floor(targetMs)));
try {
if (!isCurrentTrack) {
await ensureLoaded({ startPositionMs: targetMs, autoPlay: false });
await ensureLoaded({ startPositionMs: bounded, autoPlay: false });
} else {
await seekTrackTo(targetMs);
await seekTrackTo(bounded);
}
} catch (e) {
console.log("MusicDetails seek error", e?.message);
@@ -424,37 +401,6 @@ const MusicDetails = ({ route }) => {
resumeTrack,
]);
const handleSliderSeekEnd = useCallback(async () => {
const targetMs =
typeof lastSeekTargetMsRef.current === "number"
? Math.max(0, lastSeekTargetMsRef.current)
: null;
try {
if (wasPlayingBeforeSeek.current) {
if (!isCurrentTrack) {
await ensureLoaded({
startPositionMs:
targetMs !== null && Number.isFinite(targetMs)
? targetMs
: positionMs,
autoPlay: true,
});
} else {
if (targetMs !== null && Number.isFinite(targetMs)) {
await seekTrackTo(targetMs);
}
await resumeTrack();
}
}
} catch (e) {
console.log("MusicDetails seek end error", e?.message);
} finally {
wasPlayingBeforeSeek.current = false;
hasCapturedSeekStateRef.current = false;
lastSeekTargetMsRef.current = null;
}
}, [ensureLoaded, isCurrentTrack, positionMs, resumeTrack, seekTrackTo]);
const handleSeekBySeconds = useCallback(
async (deltaSeconds) => {
if (!trackDescriptor) return;
@@ -888,18 +834,15 @@ const MusicDetails = ({ route }) => {
</View>
{songUrl && (
<View style={{ paddingTop: 22 }}>
<Slider
value={fmt(positionMs)}
maxValue={fmt(sliderDurationMs)}
progress={
sliderDurationMs
? Math.min(1, Math.max(0, (positionMs || 0) / sliderDurationMs))
: 0
}
seekEnabled={!!songUrl}
<ProgressSlider
positionMs={positionMs}
durationMs={sliderDurationMs}
isPlaying={isTrackPlaying}
onSeekStart={handleSliderSeekStart}
onSeek={handleSliderSeek}
onSeekEnd={handleSliderSeekEnd}
onPause={pauseTrack}
onPlay={resumeTrack}
disabled={!songUrl}
/>
<View
style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}
src/screens/Library/MusicDetails.web.js
+12 -82
View File
@@ -26,7 +26,7 @@ import {
import { useGlobal } from "reactn";
import { background, icons } from "../../assets";
import PressableScale from "../../components/PressableScale";
import Slider from "../../components/Slider";
import ProgressSlider from "../../components/player/ProgressSlider";
import { increment, projectsRef, usersRef } from "../../config/firebase";
import { ensureAuthenticated } from "../../utils/authRedirect";
import useDataFromRef from "../../hooks/useDataFromRef";
@@ -66,8 +66,6 @@ const MusicDetails = ({ route }) => {
const [fav, setFav] = useState(false);
const [currentUID] = useGlobal("currentUID");
const [, setTooltip] = useGlobal("_tooltip");
const wasPlayingBeforeSeek = React.useRef(false);
const lastSeekTargetMs = React.useRef(null);
const listenedMsRef = React.useRef(0);
const incrementDoneRef = React.useRef(false);
const timerRef = React.useRef(null);
@@ -394,15 +392,6 @@ const MusicDetails = ({ route }) => {
return clearTimer;
}, [isPlaying, projectId]);
const fmt = (ms) => {
const total = Math.max(0, Math.floor((ms || 0) / 1000));
const m = Math.floor(total / 60)
.toString()
.padStart(1, "0");
const s = (total % 60).toString().padStart(2, "0");
return `${m}:${s}`;
};
const togglePlay = useCallback(async () => {
if (!trackDescriptor) return;
try {
@@ -434,54 +423,32 @@ const MusicDetails = ({ route }) => {
const handleSliderSeekStart = useCallback(async () => {
if (!trackDescriptor) return;
try {
console.log("[MusicDetails.web] handleSliderSeekStart", {
isCurrentTrack,
isTrackPlaying,
positionMs,
durationMs,
});
lastSeekTargetMs.current = null;
wasPlayingBeforeSeek.current = isTrackPlaying;
if (!isCurrentTrack) {
await ensureLoaded({
startPositionMs: positionMs,
autoPlay: false,
});
}
if (isTrackPlaying) {
await pauseTrack();
}
} catch (e) {
console.log("MusicDetails seek start error", e?.message);
}
}, [
trackDescriptor,
isTrackPlaying,
isCurrentTrack,
ensureLoaded,
positionMs,
pauseTrack,
lastSeekTargetMs,
durationMs,
]);
const handleSliderSeek = useCallback(
async (ratio) => {
async (targetMs) => {
const dur = sliderDurationMs || 0;
if (!trackDescriptor || dur <= 0) return;
const targetMs = Math.max(0, Math.floor(dur * ratio));
lastSeekTargetMs.current = targetMs;
console.log("[MusicDetails.web] handleSliderSeek", {
ratio,
durationMs: dur,
targetMs,
isCurrentTrack,
});
const bounded = Math.max(0, Math.min(dur, Math.floor(targetMs)));
try {
if (!isCurrentTrack) {
await ensureLoaded({ startPositionMs: targetMs, autoPlay: false });
await ensureLoaded({ startPositionMs: bounded, autoPlay: false });
} else {
await seekTrackTo(targetMs);
await seekTrackTo(bounded);
}
} catch (e) {
console.log("MusicDetails seek error", e?.message);
@@ -553,42 +520,6 @@ const MusicDetails = ({ route }) => {
trackDescriptor,
]);
const handleSliderSeekEnd = useCallback(async () => {
const targetMs =
typeof lastSeekTargetMs.current === "number"
? Math.max(0, lastSeekTargetMs.current)
: null;
console.log("[MusicDetails.web] handleSliderSeekEnd", {
targetMs,
wasPlayingBeforeSeek: wasPlayingBeforeSeek.current,
isCurrentTrack,
positionMs,
});
try {
if (wasPlayingBeforeSeek.current) {
if (!isCurrentTrack) {
await ensureLoaded({
startPositionMs:
targetMs !== null && Number.isFinite(targetMs)
? targetMs
: positionMs,
autoPlay: true,
});
} else {
if (targetMs !== null && Number.isFinite(targetMs)) {
await seekTrackTo(targetMs);
}
await resumeTrack();
}
}
} catch (e) {
console.log("MusicDetails seek end error", e?.message);
} finally {
wasPlayingBeforeSeek.current = false;
lastSeekTargetMs.current = null;
}
}, [ensureLoaded, isCurrentTrack, positionMs, resumeTrack, seekTrackTo]);
const handleSeekBySeconds = useCallback(
async (deltaSeconds) => {
if (!trackDescriptor) return;
@@ -1140,16 +1071,15 @@ const MusicDetails = ({ route }) => {
/>
</PressableScale>
</View>
<Slider
value={fmt(positionMs)}
maxValue={fmt(sliderDurationMs)}
progress={
sliderDurationMs ? (positionMs || 0) / sliderDurationMs : 0
}
seekEnabled={!!songUrl}
<ProgressSlider
positionMs={positionMs}
durationMs={sliderDurationMs}
isPlaying={isPlaying}
onSeekStart={handleSliderSeekStart}
onSeek={handleSliderSeek}
onSeekEnd={handleSliderSeekEnd}
onPause={pauseTrack}
onPlay={resumeTrack}
disabled={!songUrl}
/>
</View>
)}
src/screens/Library/components/LikedMusic.js
+27 -4
View File
@@ -1,5 +1,5 @@
import { Image as ExpoImage } from "expo-image";
import React, { useState } from "react";
import React, { useCallback, useState } from "react";
import {
FlatList,
Pressable,
@@ -33,6 +33,29 @@ const LikedMusic = () => {
Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
);
const navigateToMusicDetails = useNavigateToMusicDetails();
const resolveCoverUri = useCallback((project) => {
if (!project) return null;
const isValid = (value) =>
typeof value === "string" && value.trim().length > 0;
if (isValid(project?.coverUrl)) {
return project.coverUrl;
}
const cover = project?.cover || {};
const coverCandidates = [
cover?.result,
cover?.finalUrl,
cover?.generatedBackground,
];
if (Array.isArray(cover?.options)) {
coverCandidates.push(
...cover.options.flatMap((option) => [
option?.finalUrl,
option?.generatedUrl,
])
);
}
return coverCandidates.find(isValid) || null;
}, []);
return (
<CardContainer
label="Musiques likées"
@@ -43,7 +66,7 @@ const LikedMusic = () => {
liked: true,
})
}
onPressPlus={() => navigate(Routes.WritingLyrics)}
onPressPlus={() => navigate(Routes.HitParade)}
>
{items.length > 0 ? (
<FlatList
@@ -66,9 +89,9 @@ const LikedMusic = () => {
})
}
>
{item?.coverUrl ? (
{resolveCoverUri(item) ? (
<ExpoImage
source={{ uri: item.coverUrl }}
source={{ uri: resolveCoverUri(item) }}
cachePolicy="memory-disk"
priority="high"
contentFit="cover"
src/screens/Library/components/LikedPlayback.js
+1 -1
View File
@@ -39,7 +39,7 @@ const LikedPlayback = () => {
liked: true,
})
}
onPressPlus={() => navigate(Routes.WritingLyrics)}
onPressPlus={() => navigate(Routes.Playbacks)}
>
<View>
{items.length > 0 ? (
src/screens/Playback/RecordPlayback.js
+2 -1
View File
@@ -26,6 +26,7 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
const TIME_BEFORE_INCREMENT_MS = 20000; // 20s
const COUNTDOWN_SECONDS = 10;
const LOG_PREFIX = "[RecordPlayback]";
const log =
typeof __DEV__ === "undefined" || __DEV__
@@ -410,7 +411,7 @@ const RecordPlayback = ({ route }) => {
}
setIsPreparing(true);
setShowProgress(false);
setCountdown(5);
setCountdown(COUNTDOWN_SECONDS);
// On démarre l'intervalle puis on active le flag
if (countdownTimerRef.current) {
src/screens/Playback/RecordPlayback.web.js
+7 -6
View File
@@ -28,6 +28,7 @@ import RestartSpinnerIcon from "../../assets/UI/RestartSpinnerIcon";
import { registerBlobUrl, releaseBlobUrl } from "../../utils/blobUrlCache";
const TIME_BEFORE_INCREMENT_MS = 20000;
const COUNTDOWN_SECONDS = __DEV__ ? 1 : 10;
const WEB_PREVIEW_WIDTH = 360;
const toSeconds = (v) => {
@@ -318,7 +319,7 @@ const RecordPlayback = ({ route }) => {
setLooping(!!originalLoopingValueRef.current.value);
}
};
}, [setLooping])
}, [setLooping]),
);
useFocusEffect(
@@ -327,7 +328,7 @@ const RecordPlayback = ({ route }) => {
return () => {
void resetSessionRef.current?.();
};
}, [])
}, []),
);
useEffect(() => {
@@ -359,7 +360,7 @@ const RecordPlayback = ({ route }) => {
!navigator.mediaDevices?.getUserMedia
) {
setMediaError(
new Error("La capture vidéo n'est pas supportée sur ce navigateur")
new Error("La capture vidéo n'est pas supportée sur ce navigateur"),
);
setMediaReady(false);
return;
@@ -473,7 +474,7 @@ const RecordPlayback = ({ route }) => {
perfStartRef.current != null
? Math.max(
0,
(performance.now() - perfStartRef.current - pausedTotal) / 1000
(performance.now() - perfStartRef.current - pausedTotal) / 1000,
)
: 0;
@@ -588,7 +589,7 @@ const RecordPlayback = ({ route }) => {
},
},
],
{ cancelable: false }
{ cancelable: false },
);
}
}
@@ -603,7 +604,7 @@ const RecordPlayback = ({ route }) => {
setIsPaused(false);
isPausedRef.current = false;
setIsPreparing(true);
setCountdown(5);
setCountdown(COUNTDOWN_SECONDS);
if (countdownTimerRef.current) clearInterval(countdownTimerRef.current);
countdownTimerRef.current = setInterval(() => {
setCountdown((c) => {
src/screens/Playback/RecordedPlayback.js
+25 -30
View File
@@ -7,7 +7,7 @@ import { background, icons } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import Slider from "../../components/Slider";
import ProgressSlider from "../../components/player/ProgressSlider";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
@@ -34,19 +34,8 @@ const RecordedPlayback = ({ route }) => {
dur: 0,
isPlaying: false,
});
const wasPlayingBeforeSeek = useRef(false);
const playbackEndedRef = useRef(false);
// Format mm:ss
const fmt = (ms) => {
const total = Math.max(0, Math.floor((ms || 0) / 1000));
const m = Math.floor(total / 60)
.toString()
.padStart(1, "0");
const s = (total % 60).toString().padStart(2, "0");
return `${m}:${s}`;
};
// Start both players on mount
const stopPlayback = useCallback(async () => {
try {
@@ -94,32 +83,37 @@ const RecordedPlayback = ({ route }) => {
return () => global.clearInterval(id);
}, [audioPlayer, videoPlayer]);
const onSeek = async (ratio) => {
const onSeek = async (targetMs) => {
try {
const dur = progressInfo.dur || 0;
const pos = Math.floor(dur * ratio);
const pos = Math.max(0, Math.min(dur, Math.floor(targetMs)));
if (audioPlayer && dur > 0)
await audioPlayer.seekTo?.(Math.floor(pos / 1000));
if (videoPlayer) videoPlayer.currentTime = Math.max(0, pos / 1000);
} catch (e) {}
};
const onSeekStart = async () => {
const onSeekStart = useCallback(() => {
playbackEndedRef.current = false;
}, []);
const pauseDuringSeek = useCallback(async () => {
try {
wasPlayingBeforeSeek.current = !!audioPlayer?.playing;
playbackEndedRef.current = false;
if (audioPlayer?.playing) await audioPlayer.pause?.();
} catch (e) {}
try {
if (videoPlayer?.playing) videoPlayer.pause();
} catch (e) {}
};
const onSeekEnd = async () => {
}, [audioPlayer, videoPlayer]);
const resumeAfterSeek = useCallback(async () => {
try {
if (wasPlayingBeforeSeek.current) {
if (audioPlayer) await audioPlayer.play?.();
if (videoPlayer) videoPlayer.play();
}
if (audioPlayer) await audioPlayer.play?.();
} catch (e) {}
};
try {
if (videoPlayer) videoPlayer.play();
} catch (e) {}
}, [audioPlayer, videoPlayer]);
const sliderProgress = useMemo(() => {
return progressInfo.dur
@@ -190,14 +184,15 @@ const RecordedPlayback = ({ route }) => {
}}
/>
)}
<Slider
value={fmt(progressInfo.pos)}
maxValue={fmt(progressInfo.dur)}
progress={sliderProgress}
seekEnabled={!!songUrl}
<ProgressSlider
positionMs={progressInfo.pos}
durationMs={progressInfo.dur}
isPlaying={progressInfo.isPlaying}
onSeek={onSeek}
onSeekStart={onSeekStart}
onSeekEnd={onSeekEnd}
onPause={pauseDuringSeek}
onPlay={resumeAfterSeek}
disabled={!songUrl}
/>
<Pressable
onPress={handleTogglePlayback}
src/screens/Playback/RecordedPlayback.web.js
+43 -14
View File
@@ -142,6 +142,7 @@ const RecordedPlayback = ({ route }) => {
const sliderProgress = useMemo(() => {
return progress.durS > 0 ? Math.min(1, progress.posS / progress.durS) : 0;
}, [progress]);
const pendingSeekRef = useRef(null);
useEffect(() => {
const duration = progress?.durS || 0;
@@ -154,22 +155,48 @@ const RecordedPlayback = ({ route }) => {
const remaining = Math.max(0, duration - position);
if (remaining <= 0.35 && !playbackEndedRef.current) {
playbackEndedRef.current = true;
void stopPlayback();
void (async () => {
await stopPlayback();
try {
if (audioPlayer) await audioPlayer.seekTo?.(0);
} catch {}
try {
if (videoElRef.current) {
videoElRef.current.currentTime = 0;
}
} catch {}
})();
}
}, [progress, stopPlayback]);
}, [progress, stopPlayback, audioPlayer]);
const onSeek = async (ratio) => {
try {
const onSeek = useCallback(
async (ratio) => {
const durS = Number(progress.durS || 0);
const target = durS * ratio; // secondes
if (audioPlayer && durS > 0) {
await audioPlayer.seekTo?.(Math.floor(target)); // seek en secondes
}
if (videoElRef.current && videoUri) {
videoElRef.current.currentTime = Math.max(0, target);
}
const target = durS > 0 ? durS * ratio : 0; // secondes
const promise = (async () => {
try {
if (audioPlayer && durS > 0) {
await audioPlayer.seekTo?.(Math.max(0, target));
}
if (videoElRef.current && videoUri) {
videoElRef.current.currentTime = Math.max(0, target);
}
} catch {}
})();
pendingSeekRef.current = promise;
await promise;
},
[audioPlayer, progress.durS, videoUri],
);
const waitForPendingSeek = useCallback(async () => {
const promise = pendingSeekRef.current;
pendingSeekRef.current = null;
if (!promise) return;
try {
await promise;
} catch {}
};
}, []);
const wasPlayingRef = useRef(false);
const isSeekingRef = useRef(false);
@@ -178,6 +205,7 @@ const RecordedPlayback = ({ route }) => {
if (isSeekingRef.current) return;
isSeekingRef.current = true;
wasPlayingRef.current = !!audioPlayer?.playing;
pendingSeekRef.current = null;
playbackEndedRef.current = false;
if (audioPlayer?.playing) await audioPlayer.pause?.();
if (videoElRef.current && !videoElRef.current.paused) {
@@ -188,14 +216,15 @@ const RecordedPlayback = ({ route }) => {
const onSeekEnd = useCallback(async () => {
try {
if (!isSeekingRef.current) return;
await waitForPendingSeek();
isSeekingRef.current = false;
if (wasPlayingRef.current) {
if (audioPlayer) await audioPlayer.play?.();
if (audioPlayer) await audioPlayer.resume?.();
if (videoElRef.current && videoUri)
videoElRef.current.play().catch(() => {});
}
} catch {}
}, [audioPlayer, videoUri]);
}, [audioPlayer, videoUri, waitForPendingSeek]);
const handleTogglePlayback = useCallback(async () => {
try {
src/screens/Production/PlaybackDownload.js
+150 -15
View File
@@ -35,25 +35,48 @@ import { Image as ExpoImage } from "expo-image";
import SubscriptionConfirmModal from "../../components/SubscriptionConfirmModal";
import { isWeb } from "../../hooks/useLayoutType";
const triggerWebDownload = (url, title) => {
const triggerWebDownload = async (url, title) => {
if (Platform.OS !== "web") return;
if (!url) return;
if (typeof document === "undefined") return;
const baseName = (title || "Playback").toString().trim() || "Playback";
const sanitized = baseName.replace(/[\\/:*?"<>|]/g, "-");
const filename = `${sanitized}.mp4`;
const extension = guessExtension(url) || "mp4";
const filename = `${sanitized}.${extension}`;
try {
const response = await fetch(url);
if (!response.ok || response.type === "opaque") {
throw new Error(`download_failed_${response.status || "opaque"}`);
}
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const anchor = document.createElement("a");
anchor.href = url;
anchor.href = blobUrl;
anchor.download = filename;
anchor.rel = "noopener noreferrer";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(blobUrl);
} catch (error) {
console.log("[PlaybackDownload] web download fallback", {
message: error?.message,
});
try {
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = filename;
anchor.rel = "noopener noreferrer";
anchor.target = "_blank";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
return;
} catch (fallbackError) {
console.log("[PlaybackDownload] anchor fallback failed", {
message: fallbackError?.message,
});
}
try {
window.open(url, "_blank", "noopener,noreferrer");
} catch {}
@@ -94,7 +117,7 @@ const uploadSourceRecording = async ({ uri, uid, projectId }) => {
const { resultURI: videoUrl } = await uploadFileToFirebase({
uri,
path: sourcePath,
shouldCompress: false,
shouldCompress: true,
fileType: "VIDEO",
blob: cachedBlob || undefined,
});
@@ -116,6 +139,10 @@ const PlaybackDownload = ({ route }) => {
const [isAfterPlaybackVideoVisible, setIsAfterPlaybackVideoVisible] =
useState(false);
const [showConfirmModal, setShowConfirmModal] = useState(false);
const [pendingPlaybackUrl, setPendingPlaybackUrl] = useState(
project?.playbackUrl || null,
);
const [isPublishing, setIsPublishing] = useState(false);
const hasShownAfterPlaybackRef = useRef(false);
const { data: video } = useDataFromRef({
@@ -136,6 +163,12 @@ const PlaybackDownload = ({ route }) => {
setIsAfterPlaybackVideoVisible(true);
}, [action, afterPlaybackUrl]);
useEffect(() => {
if (project?.playbackUrl) {
setPendingPlaybackUrl(project.playbackUrl);
}
}, [project?.playbackUrl]);
useEffect(() => {
return () => {
releaseBlobUrl(uri || null);
@@ -143,7 +176,12 @@ const PlaybackDownload = ({ route }) => {
}, [uri]);
const handleDownloadUri = async () => {
if (isPublishing) return;
if (action === "playback" && project?.id) {
if (pendingPlaybackUrl) {
await triggerWebDownload(pendingPlaybackUrl, project?.title);
return;
}
// Publication du playback
console.log("[PlaybackDownload] handleDownloadUri playback", {
projectId: project.id,
@@ -194,18 +232,12 @@ const PlaybackDownload = ({ route }) => {
const resultURI = result?.url || null;
if (resultURI) {
await projectsRef.doc(project.id).set(
{
playbackUrl: resultURI,
updatedAt: serverTimestamp(),
},
{ merge: true },
);
setPendingPlaybackUrl(resultURI);
setTooltip({
type: "success",
text: "Vidéo uploadée",
text: "Playback prêt à télécharger",
});
triggerWebDownload(resultURI, project?.title);
await triggerWebDownload(resultURI, project?.title);
if (tempSourcePath) {
try {
await firebase.storage().ref(tempSourcePath).delete();
@@ -249,6 +281,109 @@ const PlaybackDownload = ({ route }) => {
// Handle song download
}
};
const handlePublish = async () => {
if (isPublishing) return;
if (!project?.id) {
if (action === "playback") {
setTooltip({
type: "success",
text: "Playback publié !",
});
navigate(Routes.Home);
} else {
navigate(Routes.SongRelease, { action });
}
return;
}
let tempSourcePath = null;
let playbackUrlToSave = pendingPlaybackUrl || project?.playbackUrl || null;
const audioUrl = project?.songUrl || null;
if (!audioUrl && !playbackUrlToSave) {
setTooltip({
type: "error",
text: "Aucune piste audio disponible pour ce projet",
});
return;
}
try {
setIsPublishing(true);
setIsLoading(true);
if (!playbackUrlToSave) {
const { sourcePath, videoUrl } = await uploadSourceRecording({
uri,
uid: currentUID,
projectId: project.id,
});
tempSourcePath = sourcePath;
const callable = firebase
.functions()
.httpsCallable("upload-mergeVideoAndAudio");
const payload = {
projectId: project?.id,
videoUrl,
audioUrl,
storagePath: `users/${currentUID}/projects/${project.id}/playback.mp4`,
};
console.log("[PlaybackDownload] publish: calling merge", payload);
const { data: result } = await callable(payload);
playbackUrlToSave = result?.url || null;
if (!playbackUrlToSave) {
throw new Error("merge_failed");
}
setPendingPlaybackUrl(playbackUrlToSave);
}
await projectsRef.doc(project.id).set(
{
playbackUrl: playbackUrlToSave,
updatedAt: serverTimestamp(),
},
{ merge: true },
);
if (action === "playback") {
setTooltip({
type: "success",
text: "Playback publié !",
});
navigate(Routes.Home);
} else {
navigate(Routes.SongRelease, { action });
}
} catch (error) {
console.log("[PlaybackDownload] publish error", {
message: error?.message,
code: error?.code,
name: error?.name,
details: error?.details,
});
setTooltip({
type: "error",
text: String(error?.message || "Publication impossible"),
});
} finally {
if (tempSourcePath) {
try {
await firebase.storage().ref(tempSourcePath).delete();
} catch (cleanupError) {
console.log("[PlaybackDownload] unable to delete temp source", {
message: cleanupError?.message,
code: cleanupError?.code,
});
}
}
setIsPublishing(false);
setIsLoading(false);
}
};
const continueLabel = hasActiveSubscription
? "Publier"
: "Publier sans générer de revenus";
@@ -298,7 +433,7 @@ const PlaybackDownload = ({ route }) => {
title={continueLabel}
onPress={() => {
if (hasActiveSubscription) {
navigate(Routes.SongRelease, { action });
handlePublish();
} else {
setShowConfirmModal(true);
}
@@ -312,7 +447,7 @@ const PlaybackDownload = ({ route }) => {
isVisible={showConfirmModal}
setIsVisible={setShowConfirmModal}
onJoinClub={() => navigate(Routes.Payments)}
onContinue={() => navigate(Routes.SongRelease, { action })}
onContinue={handlePublish}
/>
</>
);
src/screens/Production/StreamSong.js
+11 -1
View File
@@ -5,6 +5,7 @@ import MusicLandHeader from "../../components/MusicLandHeader";
import GradientButton from "../../components/GradientButton";
import { background, img } from "../../assets";
import { goBack, navigate } from "../../navigation/NavigationService";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { size } from "../../styles/Style";
@@ -20,6 +21,7 @@ const StreamSong = () => {
const project = params?.project || null;
const { hasActiveSubscription } = useUser() || {};
const userHasActiveSubscription = hasActiveSubscription;
const { setTooltip } = useMinuit();
useEffect(() => {
if (action && action !== "playback") {
@@ -36,11 +38,19 @@ const StreamSong = () => {
: "Rejoindre le Club MusicLand";
const handlePrimaryAction = useCallback(() => {
if (userHasActiveSubscription) {
if (action === "playback") {
setTooltip({
type: "success",
text: "Playback publié !",
});
navigate(Routes.Home);
return;
}
navigate(Routes.SongRelease, { action });
return;
}
navigate(Routes.Payments);
}, [action, userHasActiveSubscription]);
}, [action, setTooltip, userHasActiveSubscription]);
return (
<Page
src/screens/Profile/ManageSubscription.js
+12 -5
View File
@@ -375,10 +375,17 @@ const ManageSubscription = ({ navigation }) => {
typeof coinsPerMonth === "number" && Number.isFinite(coinsPerMonth)
? Math.round(coinsPerMonth)
: null;
const grantStrategy =
typeof currentUserData?.subscriptionGrantStrategy === "string"
? currentUserData.subscriptionGrantStrategy
: null;
const isUpfrontGrant = grantStrategy === "upfront";
const nextGrantTimestamp =
currentUserData?.subscriptionNextGrantAt ||
currentUserData?.subscriptionGrantNextAt ||
null;
isUpfrontGrant
? null
: currentUserData?.subscriptionNextGrantAt ||
currentUserData?.subscriptionGrantNextAt ||
null;
const nextGrantRawDate = toDate(nextGrantTimestamp);
const now = new Date();
@@ -390,7 +397,7 @@ const ManageSubscription = ({ navigation }) => {
: null;
const fallbackInitialGrant =
isAnnual && createdAtDate
!isUpfrontGrant && isAnnual && createdAtDate
? computeFirstAnnualGrantFromCreation(createdAtDate)
: null;
const futureFallbackGrant =
@@ -409,7 +416,7 @@ const ManageSubscription = ({ navigation }) => {
}
const nextGrantLabel =
resolvedNextGrantDate && isAnnual
resolvedNextGrantDate && isAnnual && !isUpfrontGrant
? formatDate(resolvedNextGrantDate)
: null;
src/screens/Profile/Profile.js
+82 -30
View File
@@ -19,8 +19,10 @@ import { useGlobal } from "reactn";
import { background, icons } from "../../assets";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import MoreMenu from "../../components/MoreMenu";
import MobileCoinBadge from "../../components/MobileCoinBadge";
import PressableScale from "../../components/PressableScale";
import ProfilePicture from "../../components/ProfilePicture";
import ShareBtn from "../../components/ShareBtn/ShareBtn";
import firebase, {
projectsRef,
serverTimestamp,
@@ -33,7 +35,7 @@ import useLayoutType from "../../hooks/useLayoutType";
import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate, push } from "../../navigation/NavigationService";
import { navigate, push, goBack } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
@@ -69,15 +71,15 @@ const Profile = () => {
const [webUploadMessage, setWebUploadMessage] = useState("");
const selfDisplayName = useMemo(
() => getArtistDisplayName(currentUserData, "MusicLand"),
[currentUserData]
[currentUserData],
);
const targetDisplayName = useMemo(
() => getArtistDisplayName(userData, "MusicLand"),
[userData]
[userData],
);
const profileTitle = useMemo(
() => getArtistDisplayName(isSelf ? currentUserData : userData, "Profil"),
[currentUserData, isSelf, userData]
[currentUserData, isSelf, userData],
);
const navigateToMusicDetails = useNavigateToMusicDetails();
const onPressMenu = (item) => {
@@ -96,7 +98,7 @@ const Profile = () => {
setFollowers(
Array.isArray(currentUserData?.followedBy)
? currentUserData.followedBy.length
: 0
: 0,
);
return;
}
@@ -175,7 +177,7 @@ const Profile = () => {
profilePictureURL: resultURI,
updatedAt: serverTimestamp(),
},
{ merge: true }
{ merge: true },
);
const authUser = firebase.auth().currentUser;
@@ -237,7 +239,8 @@ const Profile = () => {
setSelectedProjectId(item.id);
setMenuPosition(posTop);
setShowMenu(
(prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
(prev) =>
!prev || posTop?.top !== (menuPosition?.top ?? null),
);
}}
/>
@@ -329,26 +332,43 @@ const Profile = () => {
const displayedPlaybacks = Array.isArray(displayedPlaybacksSource)
? displayedPlaybacksSource.filter((project) => project?.playbackUrl)
: [];
const showHeader = isWeb;
const showBackButton = !params?.noBack && !isWeb;
return (
<Page
backgroundImg={isWeb ? background.profileWebBG : background.profileWebBG}
headerType="NAVIGATE"
headerType={showHeader ? "NAVIGATE" : "NONE"}
hideBackButton={params?.noBack}
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
containerStyle={{
backgroundColor: isWeb ? "transparent" : "#0000004D",
paddingTop: showHeader ? undefined : 0,
}}
rightComponent={() =>
!isWeb && isSelf ? (
<PressableScale onPress={handleOpenSettings}>
<Feather name="settings" size={24} color={Palette.white} />
</PressableScale>
) : null
}
>
{!isWeb ? (
<View style={styles.mobileTopRow}>
<View style={styles.mobileTopLeft}>
{showBackButton ? (
<Pressable
onPress={goBack}
hitSlop={16}
style={styles.backButton}
>
<Image
source={icons.chevronDown}
style={styles.backIcon}
resizeMode="contain"
/>
</Pressable>
) : null}
<MobileCoinBadge />
</View>
<ShareBtn label="Partager" style={styles.mobileShareButton} />
</View>
) : null}
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
<View style={{ borderRadius: 20, overflow: "hidden" }}>
<BlurView
@@ -362,21 +382,16 @@ const Profile = () => {
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
{isWeb && isSelf && (
<PressableScale
style={{
zIndex: 2,
position: "absolute",
right: 10,
top: 10,
}}
onPress={handleOpenSettings}
>
<Feather name="settings" size={24} color={Palette.white} />
</PressableScale>
)}
<View style={{ alignItems: "center" }}>
{isSelf && (
<PressableScale
onPress={handleOpenSettings}
hitSlop={10}
style={styles.settingsButton}
>
<Feather name="settings" size={20} color={Palette.white} />
</PressableScale>
)}
<View style={styles.avatarWrapper}>
<ProfilePicture
uri={
@@ -392,7 +407,7 @@ const Profile = () => {
style={styles.editAvatarButton}
onPress={() =>
onChangeProfilePicture(
loaderMessages.profilePhotoUploadWeb
loaderMessages.profilePhotoUploadWeb,
)
}
disabled={updatingPhoto}
@@ -567,6 +582,30 @@ const Profile = () => {
export default Profile;
const styles = StyleSheet.create({
mobileTopRow: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 8,
},
mobileTopLeft: {
flexDirection: "row",
alignItems: "center",
gap: 10,
flexShrink: 1,
},
mobileShareButton: {
flexShrink: 0,
},
backButton: {
paddingVertical: 6,
paddingRight: 2,
},
backIcon: {
...Style.iconSmall,
...Style.mirrorHorizontal,
transform: [{ rotate: "90deg" }],
},
value: {
fontSize: 16,
color: Palette.white,
@@ -609,6 +648,19 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
settingsButton: {
position: "absolute",
top: -6,
right: -6,
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: Palette.transparentBlack,
borderWidth: 1,
borderColor: Palette.white,
zIndex: 2,
...Style.containerCenter,
},
editAvatarButton: {
position: "absolute",
bottom: 4,
src/screens/Profile/components/ClubAdvantagesCard.js
+11 -18
View File
@@ -16,39 +16,32 @@ const ICON_BASE_ACCENT = "#A96BFF";
const CLUB_ADVANTAGES = [
{
title: "Revenus partagés",
description: "Gagne sur tes écoutes et ta popularité.",
iconType: "vector",
iconName: "currency-usd",
accent: "#F8C24D",
},
{
title: "Concours hit du mois",
description: "Vise le podium du mois et empoche la récompense.",
iconType: "vector",
iconName: "chart-line",
accent: "#7AE0FF",
},
{
title: "Crédits mensuels",
title: "Gagne des crédits avec ton abonnement",
description: "Des crédits premium tous les mois pour créer plus.",
iconType: "image",
icon: icons.coin,
accent: ICON_BASE_ACCENT,
},
{
title: "Gagne le double de cashprice grace à ton adésion au club",
description: "Cashprice doublé pour les membres du Club Musicland.",
iconType: "vector",
iconName: "chart-line",
accent: "#F8C24D",
},
];
const ClubAdvantagesCard = ({ style, isDev = false }) => {
const navigation = useNavigation();
const { hasActiveSubscription } = useUserData() || {};
const [useWebLayout, setUseWebLayout] = React.useState(isWeb);
const [useWebLayout, setUseWebLayout] = React.useState(isDev ? isWeb : false);
const advantages = CLUB_ADVANTAGES;
React.useEffect(() => {
if (!isDev) {
setUseWebLayout(isWeb);
setUseWebLayout(false);
}
}, [isDev, isWeb]);
}, [isDev]);
const title = hasActiveSubscription
? "Tu profites déjà du Club Musicland"
src/screens/Studio/SongReady.js
+19 -33
View File
@@ -20,7 +20,7 @@ import CreditAmount from "../../components/CreditAmount";
import GradientButton from "../../components/GradientButton";
import ValidateModal from "../../components/modal/ValidateModal";
import MusicLandHeader from "../../components/MusicLandHeader";
import Slider from "../../components/Slider";
import ProgressSlider from "../../components/player/ProgressSlider";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
@@ -35,14 +35,6 @@ import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
const MUSIC_GENERATION_COIN_COST = 8;
const SONG_OPTIONS_PER_GENERATION = 2;
const REGENERATE_MODAL_MAX_WIDTH = 540;
const formatTime = (ms) => {
const totalSeconds = Math.max(0, Math.floor((ms || 0) / 1000));
const minutes = Math.floor(totalSeconds / 60)
.toString()
.padStart(1, "0");
const seconds = (totalSeconds % 60).toString().padStart(2, "0");
return `${minutes}:${seconds}`;
};
const SongReady = () => {
const {
@@ -368,7 +360,6 @@ const SongOptionCard = ({
const [progressInfo, setProgressInfo] = useState({ pos: 0, dur: 0 });
const [isPlaying, setIsPlaying] = useState(false);
const wasPlayingBeforeSeek = useRef(false);
useEffect(() => {
registerPlayer(index, player);
@@ -422,10 +413,10 @@ const SongOptionCard = ({
return () => clearInterval(id);
}, [player]);
const handleSeek = async (ratio) => {
const handleSeek = async (targetMs) => {
if (!player || !progressInfo?.dur) return;
const dur = progressInfo.dur || 0;
const pos = Math.max(0, Math.floor(dur * ratio));
const pos = Math.max(0, Math.min(dur, Math.floor(targetMs)));
try {
await player.seekTo?.(Math.floor(pos / 1000));
setProgressInfo((prev) => ({ ...prev, pos }));
@@ -434,11 +425,13 @@ const SongOptionCard = ({
}
};
const handleSeekStart = async () => {
const handleSeekStart = () => {
onSelect(index);
};
const pauseDuringSeek = async () => {
if (!player) return;
try {
wasPlayingBeforeSeek.current = !!player.playing;
if (player.playing) {
await player.pause?.();
}
@@ -447,20 +440,16 @@ const SongOptionCard = ({
}
};
const handleSeekEnd = async () => {
const resumeAfterSeek = async () => {
if (!player) return;
try {
if (wasPlayingBeforeSeek.current) {
if (player.resume) {
await player.resume?.();
} else {
await player.play?.();
}
if (player.resume) {
await player.resume?.();
} else {
await player.play?.();
}
} catch (error) {
console.log("SongReady resume after seek", error?.message);
} finally {
wasPlayingBeforeSeek.current = false;
}
};
@@ -515,18 +504,15 @@ const SongOptionCard = ({
marginBottom: responsiveHeight(1),
}}
>{`Morceau ${index + 1}`}</Text>
<Slider
value={formatTime(progressInfo?.pos)}
maxValue={formatTime(progressInfo?.dur)}
progress={
progressInfo?.dur
? (progressInfo.pos || 0) / progressInfo.dur
: 0
}
seekEnabled={!!url}
<ProgressSlider
positionMs={progressInfo?.pos}
durationMs={progressInfo?.dur}
isPlaying={isPlaying}
onSeekStart={handleSeekStart}
onSeek={handleSeek}
onSeekEnd={handleSeekEnd}
onPause={pauseDuringSeek}
onPlay={resumeAfterSeek}
disabled={!url}
/>
</View>
<Pressable
src/screens/Payments.js → src/screens/Subscriptions.js
+45 -132
View File
@@ -290,11 +290,6 @@ const normalizePlans = (plans = [], periodKey) => {
);
};
const PLAN_SEGMENTS = [
{ key: "monthly", label: "Mensuel" },
{ key: "annual", label: "Annuel" },
];
const HERO_IMAGE_WIDTH = isWeb ? 1280 : 700;
const HERO_IMAGE_HEIGHT = isWeb ? 760 : 360;
const PAGE_BACKGROUND_COLOR = "#303438";
@@ -303,7 +298,7 @@ const SUBSCRIPTION_DISCLAIMER =
const CARD_MIN_HEIGHT = isWeb ? 320 : 240;
const CREDITS_PER_MUSIC = 8;
export default function Payments() {
export default function Subscriptions() {
const route = useRoute();
const insets = useSafeAreaInsets();
const isMobile = !isWeb;
@@ -315,32 +310,22 @@ export default function Payments() {
const initialSubscriptionPack =
initialPack && initialPack !== "packs" ? initialPack : null;
const backgroundImage = isMobile ? background.homeBG : background.bgTrans;
const {
subscriptions,
isCatalogLoading,
catalogError,
createSubscriptionCheckout,
} = useStripe();
const [selectedPriceIds, setSelectedPriceIds] = React.useState({
monthly: null,
annual: null,
});
const [billingPeriod, setBillingPeriod] = React.useState("monthly");
const [selectedPriceId, setSelectedPriceId] = React.useState(null);
const [processingPriceId, setProcessingPriceId] = React.useState(null);
const [errorMessage, setErrorMessage] = React.useState(null);
const initialPackHandledRef = React.useRef(false);
const normalizedPlans = React.useMemo(
() => ({
monthly: normalizePlans(subscriptions?.monthly, "monthly"),
annual: normalizePlans(subscriptions?.annual, "annual"),
}),
[subscriptions?.monthly, subscriptions?.annual]
() => normalizePlans(subscriptions?.annual, "annual"),
[subscriptions?.annual]
);
const hasAnyPlan =
(normalizedPlans?.monthly?.length || 0) > 0 ||
(normalizedPlans?.annual?.length || 0) > 0;
const hasAnyPlan = (normalizedPlans?.length || 0) > 0;
const isLoadingPlans = isCatalogLoading && !hasAnyPlan;
const combinedErrorMessage = errorMessage || catalogError;
@@ -352,85 +337,67 @@ export default function Payments() {
const shouldApplyPack =
Boolean(initialSubscriptionPack) && !initialPackHandledRef.current;
let matchedPeriod = null;
let matchedPriceId = null;
if (shouldApplyPack && normalizedPlans) {
if (shouldApplyPack && normalizedPlans?.length) {
const desired = initialSubscriptionPack.trim().toLowerCase();
for (const [periodKey, mapping] of Object.entries(
PACK_PRICE_ID_BY_PERIOD
)) {
const candidateId = mapping[desired];
if (!candidateId) continue;
const exists = (normalizedPlans[periodKey] || []).some(
const candidateId = PACK_PRICE_ID_BY_PERIOD?.annual?.[desired];
if (candidateId) {
const exists = normalizedPlans.some(
(plan) => plan?.priceId === candidateId
);
if (exists) {
matchedPeriod = periodKey;
matchedPriceId = candidateId;
break;
}
}
if (!matchedPriceId) {
const matched = normalizedPlans.find((plan) => {
const label = (plan?.product?.name || plan?.nickname || "")
.toString()
.toLowerCase();
return label.includes(desired);
});
if (matched?.priceId) {
matchedPriceId = matched.priceId;
}
}
}
setSelectedPriceIds((current) => {
const next = { ...current };
PLAN_SEGMENTS.forEach(({ key }) => {
const periodPlans = normalizedPlans[key] || [];
if (!periodPlans.length) {
next[key] = null;
return;
}
const alreadySelected = periodPlans.some(
(plan) => plan.priceId === next[key]
);
if (shouldApplyPack && matchedPeriod === null) {
const matched = periodPlans.find((plan) => {
const label = (plan?.product?.name || plan?.nickname || "")
.toString()
.toLowerCase();
return label.includes(initialSubscriptionPack);
});
if (matched) {
matchedPeriod = key;
matchedPriceId = matched.priceId;
}
}
next[key] = alreadySelected ? next[key] : periodPlans[0].priceId;
});
if (matchedPeriod && matchedPriceId) {
next[matchedPeriod] = matchedPriceId;
setSelectedPriceId((current) => {
if (matchedPriceId) {
return matchedPriceId;
}
return next;
const hasCurrent = normalizedPlans?.some(
(plan) => plan.priceId === current
);
if (hasCurrent) {
return current;
}
return normalizedPlans?.[0]?.priceId || null;
});
if (matchedPeriod && matchedPriceId) {
setBillingPeriod(matchedPeriod);
initialPackHandledRef.current = true;
} else if (shouldApplyPack && !isCatalogLoading) {
if (matchedPriceId || (shouldApplyPack && !isCatalogLoading)) {
initialPackHandledRef.current = true;
}
}, [normalizedPlans, initialSubscriptionPack, isCatalogLoading]);
}, [
initialSubscriptionPack,
isCatalogLoading,
normalizedPlans,
]);
const currentPlans = normalizedPlans[billingPeriod] || [];
const selectedPriceId = selectedPriceIds[billingPeriod];
const currentPlans = normalizedPlans || [];
const handleSelect = React.useCallback(
(priceId) => {
setSelectedPriceIds((current) => ({
...current,
[billingPeriod]: priceId,
}));
setSelectedPriceId(priceId);
setProcessingPriceId(null);
},
[billingPeriod]
[]
);
const handleCheckout = React.useCallback(async () => {
@@ -443,7 +410,7 @@ export default function Payments() {
try {
await createSubscriptionCheckout(selectedPriceId);
} catch (error) {
console.error("[Payments] checkout error", error);
console.error("[Subscriptions] checkout error", error);
setErrorMessage(
error?.message ||
"Une erreur est survenue lors de la création de la session Stripe."
@@ -453,26 +420,6 @@ export default function Payments() {
}
}, [selectedPriceId, createSubscriptionCheckout]);
React.useEffect(() => {
setSelectedPriceIds((current) => {
if (current[billingPeriod]) {
return current;
}
const fallback = currentPlans[0]?.priceId || null;
if (!fallback) {
return current;
}
return {
...current,
[billingPeriod]: fallback,
};
});
}, [billingPeriod, currentPlans]);
React.useEffect(() => {
setProcessingPriceId(null);
}, [billingPeriod]);
const isProcessing = Boolean(processingPriceId);
const isActionDisabled = !selectedPriceId || isProcessing || isLoadingPlans;
const actionButtonTitle = isProcessing
@@ -509,41 +456,7 @@ export default function Payments() {
);
}, [combinedErrorMessage]);
const renderSegmentedControl = React.useCallback(() => {
return (
<View
style={[
styles.segmentedControl,
isMobile && styles.segmentedControlMobile,
]}
>
{PLAN_SEGMENTS.map(({ key, label }) => {
const isActive = billingPeriod === key;
return (
<Pressable
key={key}
onPress={() => setBillingPeriod(key)}
style={[
styles.segmentButton,
isActive && styles.segmentButtonActive,
]}
accessibilityRole="button"
accessibilityState={{ selected: isActive }}
>
<Text
style={[
styles.segmentLabel,
isActive && styles.segmentLabelActive,
]}
>
{label}
</Text>
</Pressable>
);
})}
</View>
);
}, [billingPeriod, isMobile]);
const renderSegmentedControl = React.useCallback(() => null, []);
const renderMobilePlanItem = React.useCallback(
({ item }) => (