last tickets
This commit is contained in:
Thomas Demirdjian
@@ -0,0 +1,485 @@
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { Image as ExpoImage } from "expo-image";
|
||||
import {
|
||||
Linking,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import * as FileSystem from "expo-file-system";
|
||||
import * as Sharing from "expo-sharing";
|
||||
import BorderGradientButton from "../../components/BorderGradientButton";
|
||||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||||
import Page from "../../layouts/Page";
|
||||
import { Routes } from "../../navigation/Routes";
|
||||
import { goBack, navigate } from "../../navigation/NavigationService";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
import { gutters, Palette, Style } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
||||
import { background } from "../../assets";
|
||||
import { getStageAction } from "../../utils/projectStages";
|
||||
import ClubAdvantagesCard from "../Profile/components/ClubAdvantagesCard";
|
||||
import useGlobalLoading from "../../hooks/useGlobalLoading";
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import { isWeb } from "../../hooks/useLayoutType";
|
||||
import { getArtistDisplayName } from "../../utils/artistName";
|
||||
import { toDate } from "../../utils/dateFormatting";
|
||||
import SubscriptionConfirmModal from "../../components/SubscriptionConfirmModal";
|
||||
|
||||
const SongDownload = ({ route }) => {
|
||||
const {
|
||||
project: routeProject,
|
||||
selectedOption: routeSelectedOption,
|
||||
coverOptions: routeCoverOptions,
|
||||
} = route?.params || {};
|
||||
const { selectedProject, updateProjectData, hasActiveSubscription } =
|
||||
useUser();
|
||||
const { setLoading } = useGlobalLoading();
|
||||
const [isDownloading, setIsDownloading] = useState(false);
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
|
||||
const projectForStage = useMemo(
|
||||
() => routeProject || selectedProject || null,
|
||||
[routeProject, selectedProject],
|
||||
);
|
||||
|
||||
const coverOptions = useMemo(() => {
|
||||
if (Array.isArray(routeCoverOptions) && routeCoverOptions.length) {
|
||||
return routeCoverOptions.filter(Boolean);
|
||||
}
|
||||
if (Array.isArray(projectForStage?.cover?.options)) {
|
||||
return projectForStage.cover.options.filter(Boolean);
|
||||
}
|
||||
return [];
|
||||
}, [projectForStage?.cover?.options, routeCoverOptions]);
|
||||
|
||||
const selectedOption = useMemo(() => {
|
||||
if (routeSelectedOption) {
|
||||
return routeSelectedOption;
|
||||
}
|
||||
const selectedId =
|
||||
projectForStage?.cover?.selectedOptionId ||
|
||||
projectForStage?.cover?.selectedOption?.id ||
|
||||
null;
|
||||
if (selectedId && coverOptions.length) {
|
||||
const match = coverOptions.find((option) => option?.id === selectedId);
|
||||
if (match) return match;
|
||||
}
|
||||
return coverOptions[0] || null;
|
||||
}, [coverOptions, projectForStage?.cover, routeSelectedOption]);
|
||||
|
||||
const coverUrl =
|
||||
selectedOption?.finalUrl ||
|
||||
selectedOption?.generatedUrl ||
|
||||
projectForStage?.coverUrl ||
|
||||
projectForStage?.cover?.result ||
|
||||
projectForStage?.cover?.generatedBackground ||
|
||||
null;
|
||||
const trackTitle =
|
||||
typeof projectForStage?.title === "string" && projectForStage.title.trim()
|
||||
? projectForStage.title.trim()
|
||||
: "Musicland Track";
|
||||
|
||||
const continueFlow = useCallback(async () => {
|
||||
if (!selectedOption) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await setLoading(true, { message: "Sauvegarde de ta pochette..." });
|
||||
const existingCover = projectForStage?.cover || {};
|
||||
const finalUrl =
|
||||
selectedOption.finalUrl || selectedOption.generatedUrl || coverUrl;
|
||||
const nextCoverData = {
|
||||
...existingCover,
|
||||
options: coverOptions,
|
||||
selectedOptionId: selectedOption.id,
|
||||
result: finalUrl,
|
||||
generatedBackground:
|
||||
selectedOption.generatedUrl || selectedOption.finalUrl || null,
|
||||
};
|
||||
await updateProjectData({
|
||||
cover: nextCoverData,
|
||||
coverUrl: finalUrl,
|
||||
});
|
||||
const nextProject = {
|
||||
...projectForStage,
|
||||
cover: nextCoverData,
|
||||
coverUrl: finalUrl,
|
||||
};
|
||||
const nextPlaybackStage = getStageAction("director", nextProject);
|
||||
const targetRoute = nextPlaybackStage?.route || Routes.Playback;
|
||||
const params = nextPlaybackStage?.params || { project: nextProject };
|
||||
navigate(targetRoute, params);
|
||||
} catch (error) {
|
||||
console.log("[SongDownload] continue error", error?.message);
|
||||
} finally {
|
||||
await setLoading(false);
|
||||
}
|
||||
}, [
|
||||
coverOptions,
|
||||
coverUrl,
|
||||
navigate,
|
||||
projectForStage,
|
||||
selectedOption,
|
||||
setLoading,
|
||||
updateProjectData,
|
||||
]);
|
||||
|
||||
const handleContinue = useCallback(() => {
|
||||
if (hasActiveSubscription) {
|
||||
continueFlow();
|
||||
return;
|
||||
}
|
||||
setShowConfirmModal(true);
|
||||
}, [continueFlow, hasActiveSubscription]);
|
||||
|
||||
const handleDownload = useCallback(async () => {
|
||||
const downloadUrl =
|
||||
projectForStage?.songUrl ||
|
||||
projectForStage?.playbackUrl ||
|
||||
selectedOption?.finalUrl ||
|
||||
selectedOption?.generatedUrl ||
|
||||
null;
|
||||
if (!downloadUrl || isDownloading) {
|
||||
return;
|
||||
}
|
||||
|
||||
await setLoading(true, { message: "Préparation du téléchargement..." });
|
||||
const artist = getArtistDisplayName(projectForStage, "MusicLand");
|
||||
const createdDate = toDate(projectForStage?.createdAt) || new Date();
|
||||
const createdLabel = createdDate
|
||||
? createdDate.toISOString().split("T")[0]
|
||||
: "";
|
||||
|
||||
const triggerWebDownload = async (url, title) => {
|
||||
setIsDownloading(true);
|
||||
await setLoading(true, { message: "Préparation du téléchargement..." });
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error(`download_failed_${response.status}`);
|
||||
}
|
||||
const contentType =
|
||||
response.headers.get("content-type") || "audio/mpeg";
|
||||
const baseName =
|
||||
String(trackTitle || "musicland-track")
|
||||
.replace(/[\\/:*?"<>|]+/g, "-")
|
||||
.trim() || "musicland-track";
|
||||
const filename = `${baseName}.mp3`;
|
||||
const buffer = await response.arrayBuffer();
|
||||
|
||||
if (contentType.includes("audio")) {
|
||||
const toSynchSafe = (size) => {
|
||||
const out = new Uint8Array(4);
|
||||
out[0] = (size >> 21) & 0x7f;
|
||||
out[1] = (size >> 14) & 0x7f;
|
||||
out[2] = (size >> 7) & 0x7f;
|
||||
out[3] = size & 0x7f;
|
||||
return out;
|
||||
};
|
||||
|
||||
const concatBytes = (...arrays) => {
|
||||
const totalLength = arrays.reduce(
|
||||
(sum, arr) => sum + arr.length,
|
||||
0,
|
||||
);
|
||||
const result = new Uint8Array(totalLength);
|
||||
let offset = 0;
|
||||
arrays.forEach((arr) => {
|
||||
result.set(arr, offset);
|
||||
offset += arr.length;
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
const buildTextFrame = (id, value) => {
|
||||
const encoder = new TextEncoder();
|
||||
const textBytes = encoder.encode(value || "");
|
||||
const data = concatBytes(new Uint8Array([0x03]), textBytes);
|
||||
const header = concatBytes(
|
||||
new TextEncoder().encode(id),
|
||||
toSynchSafe(data.length),
|
||||
new Uint8Array([0x00, 0x00]),
|
||||
);
|
||||
return concatBytes(header, data);
|
||||
};
|
||||
|
||||
const buildApicFrame = (imageBytes, mime) => {
|
||||
if (!imageBytes) return null;
|
||||
const encoder = new TextEncoder();
|
||||
const mimeBytes = encoder.encode(mime || "image/jpeg");
|
||||
const data = concatBytes(
|
||||
new Uint8Array([0x03]),
|
||||
mimeBytes,
|
||||
new Uint8Array([0x00]), // mime terminator
|
||||
new Uint8Array([0x03]), // front cover
|
||||
new Uint8Array([0x00]), // empty description
|
||||
new Uint8Array(imageBytes),
|
||||
);
|
||||
const header = concatBytes(
|
||||
new TextEncoder().encode("APIC"),
|
||||
toSynchSafe(data.length),
|
||||
new Uint8Array([0x00, 0x00]),
|
||||
);
|
||||
return concatBytes(header, data);
|
||||
};
|
||||
|
||||
const buildId3Tag = (audioBytes, coverBytes, coverMime) => {
|
||||
const frames = [];
|
||||
frames.push(buildTextFrame("TIT2", trackTitle));
|
||||
frames.push(buildTextFrame("TPE1", artist));
|
||||
frames.push(buildTextFrame("TDRC", createdLabel));
|
||||
const apic = buildApicFrame(coverBytes, coverMime);
|
||||
if (apic) frames.push(apic);
|
||||
|
||||
const framesData = concatBytes(...frames);
|
||||
const header = concatBytes(
|
||||
new TextEncoder().encode("ID3"),
|
||||
new Uint8Array([0x04, 0x00]), // version 2.4.0
|
||||
new Uint8Array([0x00]), // flags
|
||||
toSynchSafe(framesData.length),
|
||||
);
|
||||
return concatBytes(header, framesData, audioBytes);
|
||||
};
|
||||
|
||||
const fetchCoverBytes = async () => {
|
||||
if (!coverUrl) return { bytes: null, mime: null };
|
||||
try {
|
||||
const res = await fetch(coverUrl);
|
||||
const mime = res.headers?.get("content-type") || "image/jpeg";
|
||||
const bufferImage = await res.arrayBuffer();
|
||||
return { bytes: new Uint8Array(bufferImage), mime };
|
||||
} catch {
|
||||
return { bytes: null, mime: null };
|
||||
}
|
||||
};
|
||||
|
||||
const { bytes: coverBytes, mime: coverMime } =
|
||||
await fetchCoverBytes();
|
||||
const merged = buildId3Tag(
|
||||
new Uint8Array(buffer),
|
||||
coverBytes,
|
||||
coverMime,
|
||||
);
|
||||
const blob = new Blob([merged], { type: contentType });
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const downloadLink = document.createElement("a");
|
||||
downloadLink.href = blobUrl;
|
||||
downloadLink.download = filename;
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
} else {
|
||||
const blob = await response.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const downloadLink = document.createElement("a");
|
||||
downloadLink.href = blobUrl;
|
||||
downloadLink.download = filename;
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
}
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isWeb) {
|
||||
await triggerWebDownload(downloadUrl, projectForStage?.title);
|
||||
await setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDownloading(true);
|
||||
try {
|
||||
const baseName =
|
||||
String(trackTitle || "musicland-track")
|
||||
.replace(/[\\/:*?"<>|]+/g, "-")
|
||||
.trim() || "musicland-track";
|
||||
const fileName = `${baseName}.mp3`;
|
||||
const targetUri = `${FileSystem.cacheDirectory || ""}${fileName}`;
|
||||
|
||||
const downloadResult = await FileSystem.downloadAsync(
|
||||
downloadUrl,
|
||||
targetUri,
|
||||
);
|
||||
if (!downloadResult?.uri) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Platform.OS === "android") {
|
||||
const permissions =
|
||||
await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
|
||||
if (!permissions.granted || !permissions.directoryUri) {
|
||||
return;
|
||||
}
|
||||
const base64 = await FileSystem.readAsStringAsync(downloadResult.uri, {
|
||||
encoding: FileSystem.EncodingType.Base64,
|
||||
});
|
||||
try {
|
||||
const destUri =
|
||||
await FileSystem.StorageAccessFramework.createFileAsync(
|
||||
permissions.directoryUri,
|
||||
fileName,
|
||||
"audio/mpeg",
|
||||
);
|
||||
await FileSystem.writeAsStringAsync(destUri, base64, {
|
||||
encoding: FileSystem.EncodingType.Base64,
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("[SongDownload] SAF write error", error?.message);
|
||||
}
|
||||
} else {
|
||||
if (await Sharing.isAvailableAsync()) {
|
||||
try {
|
||||
await Sharing.shareAsync(downloadResult.uri, {
|
||||
mimeType: "audio/mpeg",
|
||||
dialogTitle: "Enregistrer la musique",
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("[SongDownload] share error", error?.message);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await Linking.openURL(downloadResult.uri);
|
||||
} catch (error) {
|
||||
console.log(
|
||||
"[SongDownload] open local file error",
|
||||
error?.message,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[SongDownload] native download open error", error?.message);
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
await setLoading(false);
|
||||
}
|
||||
}, [coverUrl, isDownloading, projectForStage, selectedOption, trackTitle]);
|
||||
|
||||
return (
|
||||
<Page backgroundImg={background.studioBG2} headerType="NONE">
|
||||
<MusicLandHeader onPressBack={goBack} progress={84} />
|
||||
<ScrollView
|
||||
contentContainerStyle={[
|
||||
styles.container,
|
||||
!isWeb && styles.containerMobile,
|
||||
styles.scrollContent,
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<CreateLyricsHeader title="Ta pochette est validée" />
|
||||
<View style={styles.coverRow}>
|
||||
{coverUrl ? (
|
||||
<ExpoImage
|
||||
source={{ uri: coverUrl }}
|
||||
style={styles.coverImage}
|
||||
contentFit="cover"
|
||||
/>
|
||||
) : (
|
||||
<View style={[styles.coverImage, styles.coverPlaceholder]}>
|
||||
<Text style={styles.placeholderText}>Aucune pochette</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Pressable style={styles.downloadTile} onPress={handleDownload}>
|
||||
<MaterialCommunityIcons
|
||||
name="download"
|
||||
size={22}
|
||||
color={Palette.white}
|
||||
/>
|
||||
<Text style={styles.downloadText}>Télécharger la musique</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ClubAdvantagesCard style={styles.clubCardSpacing} />
|
||||
|
||||
<BorderGradientButton
|
||||
title={
|
||||
hasActiveSubscription
|
||||
? "Continuer"
|
||||
: "Continuer sans générer de revenus"
|
||||
}
|
||||
onPress={handleContinue}
|
||||
containerStyle={styles.continueButton}
|
||||
/>
|
||||
</ScrollView>
|
||||
<SubscriptionConfirmModal
|
||||
isVisible={showConfirmModal}
|
||||
setIsVisible={setShowConfirmModal}
|
||||
onJoinClub={() => navigate(Routes.Payments)}
|
||||
onContinue={continueFlow}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
paddingHorizontal: gutters * 1.2,
|
||||
paddingBottom: gutters * 1.8,
|
||||
paddingTop: gutters,
|
||||
gap: gutters * 1.2,
|
||||
},
|
||||
containerMobile: {
|
||||
paddingHorizontal: 0,
|
||||
paddingBottom: gutters * 1.2,
|
||||
paddingTop: gutters * 0.8,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: gutters * 2.6,
|
||||
},
|
||||
coverRow: {
|
||||
flexDirection: isWeb ? "row" : "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: gutters * 0.8,
|
||||
},
|
||||
coverImage: {
|
||||
width: 150,
|
||||
height: 150,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 255, 255, 0.18)",
|
||||
},
|
||||
coverPlaceholder: {
|
||||
...Style.centered,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
},
|
||||
placeholderText: {
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
color: Palette.grayMid,
|
||||
},
|
||||
downloadTile: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
paddingVertical: gutters * 0.9,
|
||||
paddingHorizontal: gutters * 1.2,
|
||||
borderRadius: 14,
|
||||
backgroundColor: "#8C4BFF",
|
||||
borderWidth: 0,
|
||||
},
|
||||
downloadText: {
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
fontSize: 15,
|
||||
color: Palette.white,
|
||||
},
|
||||
clubCardSpacing: {
|
||||
marginTop: gutters * 0.5,
|
||||
},
|
||||
continueButton: {
|
||||
marginTop: gutters * 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
export default SongDownload;
|
||||
Reference in New Issue
Block a user