feat: fixes and formatter
This commit is contained in:
@@ -1,179 +1,160 @@
|
||||
import { useRoute } from "@react-navigation/native";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { Linking, StyleSheet, Text, View } from "react-native";
|
||||
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
|
||||
import { background } from "../../assets";
|
||||
import AppCheckbox from "../../components/AppCheckbox";
|
||||
import BorderGradientButton from "../../components/BorderGradientButton";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||||
import alert from "../../components/Alert";
|
||||
import firebase, { projectsRef, serverTimestamp } from "../../config/firebase";
|
||||
import Page from "../../layouts/Page";
|
||||
import { goBack } from "../../navigation/NavigationService";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
import { Palette, gutters } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { useRoute } from '@react-navigation/native'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { Linking, StyleSheet, Text, View } from 'react-native'
|
||||
import useMinuit from 'react-native-minuit/src/hooks/useMinuit.js'
|
||||
import { background } from '../../assets'
|
||||
import AppCheckbox from '../../components/AppCheckbox'
|
||||
import BorderGradientButton from '../../components/BorderGradientButton'
|
||||
import GradientButton from '../../components/GradientButton'
|
||||
import MusicLandHeader from '../../components/MusicLandHeader'
|
||||
import alert from '../../components/Alert'
|
||||
import firebase, { projectsRef, serverTimestamp } from '../../config/firebase'
|
||||
import Page from '../../layouts/Page'
|
||||
import { goBack } from '../../navigation/NavigationService'
|
||||
import { useUser } from '../../providers/UserDataProvider'
|
||||
import { Palette, gutters } from '../../styles'
|
||||
import { FONT_FAMILY } from '../../styles/Fonts'
|
||||
|
||||
const PublishYoutube = () => {
|
||||
const route = useRoute();
|
||||
const routeProjectId = route?.params?.projectId ?? null;
|
||||
const { userProjects = [], selectedProject } = useUser();
|
||||
const { setTooltip } = useMinuit();
|
||||
const route = useRoute()
|
||||
const routeProjectId = route?.params?.projectId ?? null
|
||||
const { userProjects = [], selectedProject } = useUser()
|
||||
const { setTooltip } = useMinuit()
|
||||
|
||||
const project = useMemo(() => {
|
||||
if (routeProjectId) {
|
||||
return (
|
||||
userProjects.find((item) => item?.id === routeProjectId) ||
|
||||
selectedProject ||
|
||||
null
|
||||
);
|
||||
return userProjects.find((item) => item?.id === routeProjectId) || selectedProject || null
|
||||
}
|
||||
if (selectedProject?.id) {
|
||||
return selectedProject;
|
||||
return selectedProject
|
||||
}
|
||||
return userProjects.length ? userProjects[0] : null;
|
||||
}, [routeProjectId, selectedProject, userProjects]);
|
||||
return userProjects.length ? userProjects[0] : null
|
||||
}, [routeProjectId, selectedProject, userProjects])
|
||||
|
||||
const projectId = project?.id || routeProjectId || null;
|
||||
const projectId = project?.id || routeProjectId || null
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [hasAcceptedPublication, setHasAcceptedPublication] = useState(true);
|
||||
const youtubeUrl = project?.youtubeUrl ?? null;
|
||||
const youtubeStatus = project?.youtubeStatus ?? null;
|
||||
const youtubeError = project?.youtubeError ?? null;
|
||||
const playbackReady = !!project?.playbackUrl;
|
||||
const hasYoutubePublication = !!youtubeUrl;
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [hasAcceptedPublication, setHasAcceptedPublication] = useState(true)
|
||||
const youtubeUrl = project?.youtubeUrl ?? null
|
||||
const youtubeStatus = project?.youtubeStatus ?? null
|
||||
const youtubeError = project?.youtubeError ?? null
|
||||
const playbackReady = !!project?.playbackUrl
|
||||
const hasYoutubePublication = !!youtubeUrl
|
||||
const isPublishing = useMemo(
|
||||
() =>
|
||||
["PUBLISHING", "UPLOADING", "PROCESSING", "QUEUED"].includes(
|
||||
youtubeStatus
|
||||
),
|
||||
() => ['PUBLISHING', 'UPLOADING', 'PROCESSING', 'QUEUED'].includes(youtubeStatus),
|
||||
[youtubeStatus]
|
||||
);
|
||||
)
|
||||
const publishDisabled =
|
||||
saving ||
|
||||
isPublishing ||
|
||||
!playbackReady ||
|
||||
!projectId ||
|
||||
!hasAcceptedPublication;
|
||||
saving || isPublishing || !playbackReady || !projectId || !hasAcceptedPublication
|
||||
const publishButtonLabel = isPublishing
|
||||
? "Publication en cours..."
|
||||
? 'Publication en cours...'
|
||||
: hasYoutubePublication
|
||||
? "Mettre à jour sur YouTube"
|
||||
: "Publier sur YouTube";
|
||||
? 'Mettre à jour sur YouTube'
|
||||
: 'Publier sur YouTube'
|
||||
const statusMessage = useMemo(() => {
|
||||
if (!playbackReady) {
|
||||
return "Termine la création de ton playback avec Theo pour débloquer la publication YouTube.";
|
||||
return 'Termine la création de ton playback avec Theo pour débloquer la publication YouTube.'
|
||||
}
|
||||
if (isPublishing) {
|
||||
return "La publication de ta vidéo est en cours... Patiente un instant.";
|
||||
return 'La publication de ta vidéo est en cours... Patiente un instant.'
|
||||
}
|
||||
if (youtubeError || youtubeStatus === "FAILED") {
|
||||
return "La dernière tentative de publication a échoué. Tu peux réessayer ci-dessous.";
|
||||
if (youtubeError || youtubeStatus === 'FAILED') {
|
||||
return 'La dernière tentative de publication a échoué. Tu peux réessayer ci-dessous.'
|
||||
}
|
||||
if (hasYoutubePublication) {
|
||||
return "Ta vidéo est publiée sur la chaîne YouTube MusicLand. Tu peux la partager dès maintenant.";
|
||||
return 'Ta vidéo est publiée sur la chaîne YouTube MusicLand. Tu peux la partager dès maintenant.'
|
||||
}
|
||||
return "Partage ton playback sur la chaîne YouTube MusicLand.";
|
||||
}, [
|
||||
hasYoutubePublication,
|
||||
isPublishing,
|
||||
playbackReady,
|
||||
youtubeError,
|
||||
youtubeStatus,
|
||||
]);
|
||||
return 'Partage ton playback sur la chaîne YouTube MusicLand.'
|
||||
}, [hasYoutubePublication, isPublishing, playbackReady, youtubeError, youtubeStatus])
|
||||
|
||||
const handleOpenYoutube = useCallback(async () => {
|
||||
if (!youtubeUrl) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
try {
|
||||
await Linking.openURL(youtubeUrl);
|
||||
await Linking.openURL(youtubeUrl)
|
||||
} catch (_error) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
type: 'error',
|
||||
text: "Impossible d'ouvrir le lien YouTube",
|
||||
});
|
||||
})
|
||||
}
|
||||
}, [setTooltip, youtubeUrl]);
|
||||
}, [setTooltip, youtubeUrl])
|
||||
|
||||
const handleMarkPublished = useCallback(async () => {
|
||||
if (!projectId) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
text: "Sélectionnez un projet avant de publier",
|
||||
});
|
||||
return;
|
||||
type: 'error',
|
||||
text: 'Sélectionnez un projet avant de publier',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!playbackReady) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
type: 'error',
|
||||
text: "Aucun playback n'est disponible pour la publication",
|
||||
});
|
||||
return;
|
||||
})
|
||||
return
|
||||
}
|
||||
setSaving(true);
|
||||
setSaving(true)
|
||||
try {
|
||||
const publishCallable = firebase
|
||||
.functions()
|
||||
.httpsCallable("youtube-publishPlaybackToYoutube");
|
||||
await publishCallable({ projectId });
|
||||
const publishCallable = firebase.functions().httpsCallable('youtube-publishPlaybackToYoutube')
|
||||
await publishCallable({ projectId })
|
||||
setTooltip?.({
|
||||
type: "success",
|
||||
text: "Publication lancée sur YouTube",
|
||||
});
|
||||
type: 'success',
|
||||
text: 'Publication lancée sur YouTube',
|
||||
})
|
||||
} catch (error) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
text: error?.message || "Impossible de lancer la publication",
|
||||
});
|
||||
type: 'error',
|
||||
text: error?.message || 'Impossible de lancer la publication',
|
||||
})
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setSaving(false)
|
||||
}
|
||||
}, [playbackReady, projectId, setTooltip]);
|
||||
}, [playbackReady, projectId, setTooltip])
|
||||
|
||||
const handleConfirmPublish = useCallback(() => {
|
||||
if (!hasAcceptedPublication) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
text: "Confirme la diffusion sur Musicland et YouTube avant de publier",
|
||||
});
|
||||
return;
|
||||
type: 'error',
|
||||
text: 'Confirme la diffusion sur Musicland et YouTube avant de publier',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (publishDisabled) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
const confirmTitle = hasYoutubePublication
|
||||
? "Confirmer la mise à jour"
|
||||
: "Confirmer la publication";
|
||||
? 'Confirmer la mise à jour'
|
||||
: 'Confirmer la publication'
|
||||
const confirmDescription = hasYoutubePublication
|
||||
? "La vidéo existe déjà sur YouTube. Confirme que tu souhaites remplacer la version publiée."
|
||||
: "Confirme que tu souhaites publier ce playback sur la chaîne YouTube MusicLand. Il sera visible publiquement.";
|
||||
? 'La vidéo existe déjà sur YouTube. Confirme que tu souhaites remplacer la version publiée.'
|
||||
: 'Confirme que tu souhaites publier ce playback sur la chaîne YouTube MusicLand. Il sera visible publiquement.'
|
||||
alert(confirmTitle, confirmDescription, [
|
||||
{ text: "Annuler", style: "cancel" },
|
||||
{ text: 'Annuler', style: 'cancel' },
|
||||
{
|
||||
text: hasYoutubePublication ? "Mettre à jour" : "Je confirme",
|
||||
text: hasYoutubePublication ? 'Mettre à jour' : 'Je confirme',
|
||||
onPress: handleMarkPublished,
|
||||
},
|
||||
]);
|
||||
])
|
||||
}, [
|
||||
handleMarkPublished,
|
||||
hasAcceptedPublication,
|
||||
hasYoutubePublication,
|
||||
publishDisabled,
|
||||
setTooltip,
|
||||
]);
|
||||
])
|
||||
|
||||
const handleResetPublication = useCallback(async () => {
|
||||
if (!projectId) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
text: "Sélectionnez un projet avant de réinitialiser",
|
||||
});
|
||||
return;
|
||||
type: 'error',
|
||||
text: 'Sélectionnez un projet avant de réinitialiser',
|
||||
})
|
||||
return
|
||||
}
|
||||
setSaving(true);
|
||||
setSaving(true)
|
||||
try {
|
||||
await projectsRef.doc(projectId).set(
|
||||
{
|
||||
@@ -181,25 +162,25 @@ const PublishYoutube = () => {
|
||||
youtubeUrl: null,
|
||||
youtubeVideoId: null,
|
||||
youtubePublishedAt: null,
|
||||
youtubeStatus: "IDLE",
|
||||
youtubeStatus: 'IDLE',
|
||||
youtubeError: null,
|
||||
updatedAt: serverTimestamp(),
|
||||
},
|
||||
{ merge: true }
|
||||
);
|
||||
)
|
||||
setTooltip?.({
|
||||
type: "success",
|
||||
text: "Publication YouTube réinitialisée",
|
||||
});
|
||||
type: 'success',
|
||||
text: 'Publication YouTube réinitialisée',
|
||||
})
|
||||
} catch (error) {
|
||||
setTooltip?.({
|
||||
type: "error",
|
||||
text: error?.message || "Réinitialisation impossible",
|
||||
});
|
||||
type: 'error',
|
||||
text: error?.message || 'Réinitialisation impossible',
|
||||
})
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setSaving(false)
|
||||
}
|
||||
}, [projectId, setTooltip]);
|
||||
}, [projectId, setTooltip])
|
||||
|
||||
return (
|
||||
<Page backgroundImg={background.playbackBG2} headerType="NONE">
|
||||
@@ -209,21 +190,19 @@ const PublishYoutube = () => {
|
||||
flex: 1,
|
||||
paddingHorizontal: gutters,
|
||||
paddingBottom: gutters * 2,
|
||||
justifyContent: "space-between",
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<View style={{ alignItems: "center", gap: 18 }}>
|
||||
<View style={{ alignItems: 'center', gap: 18 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
color: Palette.white,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{hasYoutubePublication
|
||||
? "Ta vidéo est déjà sur YouTube"
|
||||
: "Publier sur YouTube"}
|
||||
{hasYoutubePublication ? 'Ta vidéo est déjà sur YouTube' : 'Publier sur YouTube'}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
@@ -231,7 +210,7 @@ const PublishYoutube = () => {
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
color: Palette.white,
|
||||
opacity: 0.9,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
}}
|
||||
>
|
||||
@@ -243,7 +222,7 @@ const PublishYoutube = () => {
|
||||
fontSize: 13,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
color: Palette.red,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{youtubeError}
|
||||
@@ -255,7 +234,7 @@ const PublishYoutube = () => {
|
||||
fontSize: 13,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
color: Palette.white,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
opacity: 0.8,
|
||||
}}
|
||||
numberOfLines={2}
|
||||
@@ -268,9 +247,7 @@ const PublishYoutube = () => {
|
||||
<View style={styles.consentContainer}>
|
||||
<AppCheckbox
|
||||
selected={hasAcceptedPublication}
|
||||
onPress={() =>
|
||||
setHasAcceptedPublication((prevState) => !prevState)
|
||||
}
|
||||
onPress={() => setHasAcceptedPublication((prevState) => !prevState)}
|
||||
label="J'accepte la diffusion de mon contenu sur Musicland et YouTube."
|
||||
/>
|
||||
<Text style={styles.consentDescription}>
|
||||
@@ -300,8 +277,8 @@ const PublishYoutube = () => {
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
consentContainer: {
|
||||
@@ -313,6 +290,6 @@ const styles = StyleSheet.create({
|
||||
color: Palette.white,
|
||||
opacity: 0.8,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
export default PublishYoutube;
|
||||
export default PublishYoutube
|
||||
|
||||
Reference in New Issue
Block a user