diff --git a/src/components/PostEditor/PostContent.tsx b/src/components/PostEditor/PostContent.tsx index 93bcede8..fb4a0770 100644 --- a/src/components/PostEditor/PostContent.tsx +++ b/src/components/PostEditor/PostContent.tsx @@ -203,7 +203,7 @@ export default function PostContent({ const mediaUploaderBtnRef = useRef(null) const [posting, setPosting] = useState(false) const [uploadProgresses, setUploadProgresses] = useState< - { file: File; progress: number; cancel: () => void }[] + { file: File; progress: number; cancel: () => void; phase: 'compressing' | 'uploading' }[] >([]) const [showMoreOptions, setShowMoreOptions] = useState(false) const [createCustomEventOpen, setCreateCustomEventOpen] = useState(false) @@ -1490,8 +1490,22 @@ export default function PostContent({ } } + const handleUploadCompressPhase = useCallback((file: File, phase: 'compressing' | 'uploading') => { + setUploadProgresses((prev) => + prev.map((row) => (row.file === file ? { ...row, phase } : row)) + ) + }, []) + const handleUploadStart = (file: File, cancel: () => void) => { - setUploadProgresses((prev) => [...prev, { file, progress: 0, cancel }]) + setUploadProgresses((prev) => [ + ...prev, + { + file, + progress: 0, + cancel, + phase: fileLooksLikeUploadableMedia(file) ? 'compressing' : 'uploading' + } + ]) // Track file for media upload if (fileLooksLikeUploadableMedia(file)) { const mapKey = `${file.name}-${file.size}-${file.lastModified}` @@ -1541,7 +1555,11 @@ export default function PostContent({ const handleUploadProgress = (file: File, progress: number) => { setUploadProgresses((prev) => - prev.map((item) => (item.file === file ? { ...item, progress } : item)) + prev.map((item) => + item.file === file + ? { ...item, progress, phase: progress > 0 ? 'uploading' : item.phase } + : item + ) ) } @@ -2763,6 +2781,7 @@ export default function PostContent({ onUploadProgress={handleUploadProgress} onUploadEnd={handleUploadEnd} onUploadSuccess={handleMediaUploadSuccess} + onUploadCompressPhase={handleUploadCompressPhase} kind={getDeterminedKind} highlightData={isHighlight ? highlightData : undefined} pollCreateData={isPoll ? pollCreateData : undefined} @@ -3024,17 +3043,29 @@ export default function PostContent({ )} {uploadProgresses.length > 0 && - uploadProgresses.map(({ file, progress, cancel }, index) => ( + uploadProgresses.map(({ file, progress, cancel, phase }, index) => (
-
+
{file.name ?? t('Uploading...')}
+
+ {phase === 'compressing' + ? t('Compressing on your device before upload (large videos can take several minutes)…') + : t('Uploading to media server…')} +
-
+ {phase === 'compressing' ? ( +
+ ) : ( +
+ )}