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-26 15:33:22 +01:00
parent ee9cc5dccd
commit d7b14bd873
25 changed files with 1692 additions and 1967 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/cover/PhotoCover.js
+61 -1
View File
@@ -1,5 +1,5 @@
import { Image as ExpoImage } from "expo-image";
import React from "react";
import React, { useEffect, useRef, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
@@ -11,9 +11,17 @@ import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { useUserData } from "../../providers/UserDataProvider";
import { gutters, Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ProgressBar from "../../components/ProgressBar";
const COVER_PROGRESS_MAX = 98;
const COVER_PROGRESS_INTERVAL_MS = 500;
const COVER_FAKE_DURATION_MS = 2 * 60 * 1000;
const PhotoCover = () => {
const [coverProgress, setCoverProgress] = useState(0);
const progressIntervalRef = useRef(null);
const progressStartRef = useRef(null);
const { selectedProject } = useUserData();
const isGenerating = selectedProject?.coverStatus === "GENERATING";
const coverGenerationMessage = isWeb
@@ -29,6 +37,46 @@ const PhotoCover = () => {
coverOptions?.[0]?.finalUrl ||
coverOptions?.[0]?.generatedUrl ||
null;
const coverProgressValue = Math.max(
0,
Math.min(100, Math.round(coverProgress)),
);
useEffect(() => {
const clearProgressInterval = () => {
if (progressIntervalRef.current) {
global.clearInterval(progressIntervalRef.current);
progressIntervalRef.current = null;
}
};
if (!isGenerating || coverUrl) {
clearProgressInterval();
progressStartRef.current = null;
setCoverProgress(coverUrl ? 100 : 0);
return clearProgressInterval;
}
progressStartRef.current = new Date();
setCoverProgress(0);
clearProgressInterval();
progressIntervalRef.current = global.setInterval(() => {
const start = progressStartRef.current;
if (!start) return;
const elapsed = Date.now() - start.getTime();
const ratio = Math.max(
0,
Math.min(1, elapsed / COVER_FAKE_DURATION_MS),
);
const next = COVER_PROGRESS_MAX * ratio;
setCoverProgress((prev) => {
if (prev >= COVER_PROGRESS_MAX) return COVER_PROGRESS_MAX;
return next >= COVER_PROGRESS_MAX ? COVER_PROGRESS_MAX : next;
});
}, COVER_PROGRESS_INTERVAL_MS);
return clearProgressInterval;
}, [coverUrl, isGenerating]);
return (
<Page backgroundImg={background.studioBG2} headerType="NONE">
@@ -91,6 +139,18 @@ const PhotoCover = () => {
Génération en cours.
</Text>
)}
<View style={{ alignItems: "center", gap: 10 }}>
<ProgressBar gradient progress={coverProgressValue} />
<Text
style={{
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
fontSize: 13,
}}
>
{coverProgressValue}%
</Text>
</View>
</>
) : (
<Text
src/screens/cover/PouchReady.js
+70 -26
View File
@@ -1,6 +1,6 @@
import { BlurView } from "expo-blur";
import { Image as ExpoImage } from "expo-image";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
ActivityIndicator,
Image,
@@ -28,6 +28,7 @@ import { gutters, Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { getStageAction } from "../../utils/projectStages";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ProgressBar from "../../components/ProgressBar";
const COVER_STYLE_PRESETS = [
"Cyberpunk",
@@ -37,6 +38,9 @@ const COVER_STYLE_PRESETS = [
"Livre de coloriage",
"Shooting",
];
const COVER_PROGRESS_MAX = 98;
const COVER_PROGRESS_INTERVAL_MS = 500;
const COVER_FAKE_DURATION_MS = 2 * 60 * 1000;
const PouchReady = () => {
const { selectedProjectId, selectedProject, updateProjectData } = useUser();
@@ -81,6 +85,9 @@ const PouchReady = () => {
const [isSelecting, setIsSelecting] = useState(false);
const [isAwaitingGenerationStart, setIsAwaitingGenerationStart] =
useState(false);
const [coverProgress, setCoverProgress] = useState(0);
const coverProgressIntervalRef = useRef(null);
const coverProgressStartRef = useRef(null);
const showGenerationLoading = useCallback(async () => {
setIsAwaitingGenerationStart(true);
@@ -184,6 +191,48 @@ const PouchReady = () => {
},
]
: [];
const isCoverLoading =
isGenerating && !hasGeneratedOptions && !coverPreviewUrl;
const coverProgressValue = Math.max(
0,
Math.min(100, Math.round(coverProgress)),
);
useEffect(() => {
const clearProgressInterval = () => {
if (coverProgressIntervalRef.current) {
global.clearInterval(coverProgressIntervalRef.current);
coverProgressIntervalRef.current = null;
}
};
if (!isCoverLoading) {
clearProgressInterval();
coverProgressStartRef.current = null;
setCoverProgress(hasGeneratedOptions || coverPreviewUrl ? 100 : 0);
return clearProgressInterval;
}
coverProgressStartRef.current = new Date();
setCoverProgress(0);
clearProgressInterval();
coverProgressIntervalRef.current = global.setInterval(() => {
const start = coverProgressStartRef.current;
if (!start) return;
const elapsed = Date.now() - start.getTime();
const ratio = Math.max(
0,
Math.min(1, elapsed / COVER_FAKE_DURATION_MS),
);
const next = COVER_PROGRESS_MAX * ratio;
setCoverProgress((prev) => {
if (prev >= COVER_PROGRESS_MAX) return COVER_PROGRESS_MAX;
return next >= COVER_PROGRESS_MAX ? COVER_PROGRESS_MAX : next;
});
}, COVER_PROGRESS_INTERVAL_MS);
return clearProgressInterval;
}, [isCoverLoading, hasGeneratedOptions, coverPreviewUrl]);
const handleSelectOption = useCallback(
async (option) => {
@@ -234,12 +283,6 @@ const PouchReady = () => {
});
}, [coverOptions, navigate, selectedOption, selectedProject]);
const primaryActionTitle = hasGeneratedOptions
? "Valider la pochette"
: isGenerating
? "Veuillez patienter..."
: "En attente de la génération";
const isPrimaryActionDisabled =
isGenerating ||
(hasGeneratedOptions ? !selectedOption || isSelecting : true);
@@ -274,10 +317,9 @@ const PouchReady = () => {
? "Ta pochette est prête!"
: "Génération de la pochette"
}
// subTitle="Qu’en penses-tu ?"
/>
<View style={{ flex: 1, ...Style.containerCenter }}>
<View style={{ width: "80%", gap: 24 }}>
<View style={{ width: isWeb ? "80%" : "100%", gap: 24 }}>
<View
style={{
width: "100%",
@@ -354,16 +396,6 @@ const PouchReady = () => {
);
})
) : (
// <View
// style={{
// width: isWeb ? 300 : "100%",
// height: 300,
// borderRadius: 20,
// backgroundColor: "#00000040",
// alignSelf: "center",
// ...Style.containerCenter,
// }}
// >
<>
{isGenerating && (
<View
@@ -404,6 +436,18 @@ const PouchReady = () => {
Génération en cours.
</Text>
)}
<View style={{ alignItems: "center", gap: 10 }}>
<ProgressBar gradient progress={coverProgressValue} />
<Text
style={{
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
fontSize: 13,
}}
>
{coverProgressValue}%
</Text>
</View>
</View>
)}
</>
@@ -550,7 +594,7 @@ const PouchReady = () => {
<View
style={{
paddingBottom: gutters * 2,
width: "80%",
width: isWeb ? "80%" : "100%",
alignSelf: "center",
gap: 12,
}}
@@ -565,11 +609,12 @@ const PouchReady = () => {
disabled={isGenerating}
/>
)}
<GradientButton
title={primaryActionTitle}
disabled={isPrimaryActionDisabled}
onPress={onValidatePicture}
/>
{hasGeneratedOptions && (
<GradientButton
title={"Valider la pochette"}
onPress={onValidatePicture}
/>
)}
</View>
</Page>
);
@@ -760,7 +805,6 @@ const styles = StyleSheet.create({
marginLeft: 12,
},
modeColumn: {
flex: 1,
gap: 12,
minWidth: 240,
},