last tickets
This commit is contained in:
Thomas Demirdjian
@@ -0,0 +1,362 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
Image,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
|
||||
import { background } from "../../assets";
|
||||
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
|
||||
import BorderGradientButton from "../../components/BorderGradientButton";
|
||||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||||
import firebase, {
|
||||
projectsRef,
|
||||
serverTimestamp,
|
||||
videosRef,
|
||||
} from "../../config/firebase";
|
||||
import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
|
||||
import useDataFromRef from "../../hooks/useDataFromRef";
|
||||
import Page from "../../layouts/Page";
|
||||
import { Routes } from "../../navigation";
|
||||
import { goBack, navigate } from "../../navigation/NavigationService";
|
||||
import { useUserData, useUser } from "../../providers/UserDataProvider";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { size } from "../../styles/Style";
|
||||
import { getBlobForUrl, releaseBlobUrl } from "../../utils/blobUrlCache";
|
||||
import ClubAdvantagesCard from "../Profile/components/ClubAdvantagesCard";
|
||||
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
||||
import { Image as ExpoImage } from "expo-image";
|
||||
import SubscriptionConfirmModal from "../../components/SubscriptionConfirmModal";
|
||||
import { isWeb } from "../../hooks/useLayoutType";
|
||||
|
||||
const triggerWebDownload = (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`;
|
||||
try {
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = url;
|
||||
anchor.download = filename;
|
||||
anchor.rel = "noopener noreferrer";
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
} catch (error) {
|
||||
console.log("[PlaybackDownload] web download fallback", {
|
||||
message: error?.message,
|
||||
});
|
||||
try {
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
} catch {}
|
||||
}
|
||||
};
|
||||
|
||||
const guessExtension = (inputUri = "") => {
|
||||
const cleaned = inputUri.split("?")[0] || "";
|
||||
const match = cleaned.match(/\.([a-z0-9]+)$/i);
|
||||
if (match && match[1]) return match[1].toLowerCase();
|
||||
if (Platform.OS === "web") return "webm";
|
||||
return "mp4";
|
||||
};
|
||||
|
||||
const uploadSourceRecording = async ({ uri, uid, projectId }) => {
|
||||
console.log("[PlaybackDownload] uploadSourceRecording params", {
|
||||
hasUri: Boolean(uri),
|
||||
uid,
|
||||
projectId,
|
||||
});
|
||||
|
||||
if (!uri) throw new Error("Aucune vidéo trouvée");
|
||||
if (!uid) throw new Error("Utilisateur non authentifié");
|
||||
|
||||
const extension = guessExtension(uri);
|
||||
const sourcePath = `users/${uid}/projects/${projectId}/recordings/source-${Date.now()}.${extension}`;
|
||||
console.log("source path : ", sourcePath);
|
||||
console.log("[PlaybackDownload] uploadSourceRecording source path", {
|
||||
extension,
|
||||
sourcePath,
|
||||
});
|
||||
|
||||
const cachedBlob = getBlobForUrl(uri);
|
||||
console.log("[PlaybackDownload] uploadSourceRecording blob cache", {
|
||||
hasBlob: Boolean(cachedBlob),
|
||||
});
|
||||
|
||||
const { resultURI: videoUrl } = await uploadFileToFirebase({
|
||||
uri,
|
||||
path: sourcePath,
|
||||
shouldCompress: false,
|
||||
fileType: "VIDEO",
|
||||
blob: cachedBlob || undefined,
|
||||
});
|
||||
|
||||
return { sourcePath, videoUrl };
|
||||
};
|
||||
|
||||
const PlaybackDownload = ({ route }) => {
|
||||
const { currentUID } = useUserData();
|
||||
const { hasActiveSubscription } = useUser() || {};
|
||||
const { action, uri, project } = route.params || {};
|
||||
console.log("[PlaybackDownload] route params", {
|
||||
action,
|
||||
projectId: project?.id,
|
||||
hasUri: Boolean(uri),
|
||||
currentUID,
|
||||
});
|
||||
const { setIsLoading, setTooltip } = useMinuit();
|
||||
const [isAfterPlaybackVideoVisible, setIsAfterPlaybackVideoVisible] =
|
||||
useState(false);
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
const hasShownAfterPlaybackRef = useRef(false);
|
||||
|
||||
const { data: video } = useDataFromRef({
|
||||
ref: videosRef.doc("fr"),
|
||||
simpleRef: true,
|
||||
});
|
||||
|
||||
const afterPlaybackUrl = useMemo(() => {
|
||||
if (!video) return null;
|
||||
return video?.afterPlayback;
|
||||
}, [video]);
|
||||
|
||||
useEffect(() => {
|
||||
if (action !== "playback") return;
|
||||
if (!afterPlaybackUrl) return;
|
||||
if (hasShownAfterPlaybackRef.current) return;
|
||||
hasShownAfterPlaybackRef.current = true;
|
||||
setIsAfterPlaybackVideoVisible(true);
|
||||
}, [action, afterPlaybackUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
releaseBlobUrl(uri || null);
|
||||
};
|
||||
}, [uri]);
|
||||
|
||||
const handleDownloadUri = async () => {
|
||||
if (action === "playback" && project?.id) {
|
||||
// Publication du playback
|
||||
console.log("[PlaybackDownload] handleDownloadUri playback", {
|
||||
projectId: project.id,
|
||||
uri,
|
||||
currentUID,
|
||||
});
|
||||
const audioUrl = project?.songUrl || null;
|
||||
if (!audioUrl) {
|
||||
setTooltip({
|
||||
type: "error",
|
||||
text: "Aucune piste audio disponible pour ce projet",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let tempSourcePath = null;
|
||||
try {
|
||||
setIsLoading(true);
|
||||
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] calling upload-mergeVideoAndAudio",
|
||||
payload,
|
||||
);
|
||||
|
||||
const { data: result } = await callable(payload);
|
||||
|
||||
console.log(
|
||||
"[PlaybackDownload] upload-mergeVideoAndAudio result",
|
||||
result,
|
||||
);
|
||||
|
||||
const resultURI = result?.url || null;
|
||||
|
||||
if (resultURI) {
|
||||
await projectsRef.doc(project.id).set(
|
||||
{
|
||||
playbackUrl: resultURI,
|
||||
updatedAt: serverTimestamp(),
|
||||
},
|
||||
{ merge: true },
|
||||
);
|
||||
setTooltip({
|
||||
type: "success",
|
||||
text: "Vidéo uploadée",
|
||||
});
|
||||
triggerWebDownload(resultURI, project?.title);
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setTooltip({
|
||||
type: "error",
|
||||
text: "Erreur lors de la publication du playback",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[PlaybackDownload] error upload playback", {
|
||||
message: error?.message,
|
||||
code: error?.code,
|
||||
name: error?.name,
|
||||
details: error?.details,
|
||||
});
|
||||
if (tempSourcePath) {
|
||||
try {
|
||||
await firebase.storage().ref(tempSourcePath).delete();
|
||||
} catch {}
|
||||
}
|
||||
setTooltip({
|
||||
type: "error",
|
||||
text: String(
|
||||
error?.message || "Erreur lors de la publication du playback",
|
||||
),
|
||||
});
|
||||
} finally {
|
||||
releaseBlobUrl(uri || null);
|
||||
setIsLoading(false);
|
||||
}
|
||||
// Handle playback download
|
||||
} else {
|
||||
// Handle song download
|
||||
}
|
||||
};
|
||||
const continueLabel = hasActiveSubscription
|
||||
? "Publier"
|
||||
: "Publier sans générer de revenus";
|
||||
return (
|
||||
<>
|
||||
<Page
|
||||
backgroundImg={
|
||||
action === "playback"
|
||||
? background.playbackBG2
|
||||
: background.productionBG2
|
||||
}
|
||||
headerType="NONE"
|
||||
>
|
||||
<MusicLandHeader onPressBack={goBack} progress={50} />
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.container}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<CreateLyricsHeader title={"Publier ton playback"} />
|
||||
|
||||
<View style={styles.coverRow}>
|
||||
{project?.coverUrl ? (
|
||||
<ExpoImage
|
||||
source={{ uri: project?.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={handleDownloadUri}>
|
||||
<MaterialCommunityIcons
|
||||
name="download"
|
||||
size={22}
|
||||
color={Palette.white}
|
||||
/>
|
||||
<Text style={styles.downloadText}>Télécharger le playback</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ClubAdvantagesCard style={styles.clubCardSpacing} />
|
||||
|
||||
<BorderGradientButton
|
||||
title={continueLabel}
|
||||
onPress={() => {
|
||||
if (hasActiveSubscription) {
|
||||
navigate(Routes.SongRelease, { action });
|
||||
} else {
|
||||
setShowConfirmModal(true);
|
||||
}
|
||||
}}
|
||||
containerStyle={styles.continueButton}
|
||||
/>
|
||||
</ScrollView>
|
||||
</Page>
|
||||
<SubscriptionConfirmModal
|
||||
continueLabel={"Continuer vers la publication de playback"}
|
||||
isVisible={showConfirmModal}
|
||||
setIsVisible={setShowConfirmModal}
|
||||
onJoinClub={() => navigate(Routes.Payments)}
|
||||
onContinue={() => navigate(Routes.SongRelease, { action })}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlaybackDownload;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
gap: 14,
|
||||
},
|
||||
coverRow: {
|
||||
flexDirection: isWeb ? "row" : "column",
|
||||
alignItems: "center",
|
||||
justifyContent: isWeb ? "center" : "center",
|
||||
gap: 12,
|
||||
},
|
||||
coverImage: {
|
||||
...size({ size: 140 }),
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 255, 255, 0.18)",
|
||||
},
|
||||
downloadTile: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: "#8C4BFF",
|
||||
},
|
||||
downloadText: {
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
fontSize: 15,
|
||||
color: Palette.white,
|
||||
},
|
||||
clubCardSpacing: {
|
||||
marginTop: 10,
|
||||
},
|
||||
continueButton: {
|
||||
marginTop: 10,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user