diff --git a/src/pages/view-content/index.tsx b/src/pages/view-content/index.tsx index 9936d3d..8f4a221 100644 --- a/src/pages/view-content/index.tsx +++ b/src/pages/view-content/index.tsx @@ -5,7 +5,7 @@ import { useWebApp } from '@vkruglikov/react-telegram-web-app'; import { Button } from '~/shared/ui/button'; import { usePurchaseContent, useViewContent } from '~/shared/services/content'; import { fromNanoTON } from '~/shared/utils'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { AudioPlayer } from '~/shared/ui/audio-player'; import { useAuth } from '~/shared/services/auth'; import { CongratsModal } from './components/congrats-modal'; @@ -39,16 +39,16 @@ export const ViewContentPage = () => { const statusState = content?.data?.status?.state ?? "uploaded"; const conversionState = content?.data?.conversion?.state; const uploadState = content?.data?.upload?.state; - const statusLabel = useMemo(() => { + const statusMessage = useMemo(() => { switch (statusState) { - case "ready": - return "Готово"; case "processing": - return "Обрабатывается"; + return "Контент обрабатывается"; case "failed": - return "Ошибка"; + return "Ошибка обработки"; + case "ready": + return null; default: - return "Загружено"; + return "Файл загружен"; } }, [statusState]); @@ -56,6 +56,16 @@ export const ViewContentPage = () => { const isAudio = Boolean(content?.data?.content_type?.startsWith('audio')); const isReady = Boolean(mediaUrl); const metadataName = content?.data?.display_options?.metadata?.name; + const contentTitle = metadataName || content?.data?.encrypted?.title || 'Контент'; + const processingDetails = useMemo(() => { + if (!statusMessage) { + return null; + } + return { + conversion: conversionState, + upload: uploadState, + }; + }, [conversionState, statusMessage, uploadState]); const handleBuyContentTON = useCallback(async () => { if (!contentId) { @@ -175,13 +185,27 @@ export const ViewContentPage = () => { } }, [content, refetchContent]); - const haveLicense = useMemo(() => { - document.title = content?.data?.display_options?.metadata?.name; - return ( - content?.data?.have_licenses?.includes('listen') || - content?.data?.have_licenses?.includes('resale') - ); - }, [content]); + const haveLicense = useMemo(() => ( + content?.data?.have_licenses?.includes('listen') || + content?.data?.have_licenses?.includes('resale') + ), [content]); + + const hadLicenseRef = useRef(haveLicense); + + useEffect(() => { + if (haveLicense && !hadLicenseRef.current) { + hadLicenseRef.current = true; + void refetchContent(); + } else if (!haveLicense) { + hadLicenseRef.current = false; + } + }, [haveLicense, refetchContent]); + + useEffect(() => { + if (contentTitle) { + document.title = contentTitle; + } + }, [contentTitle]); useEffect(() => { if (!contentId) { @@ -221,7 +245,7 @@ export const ViewContentPage = () => {
{isCongratsModal && } {isErrorModal && } - {isAudio && + {isReady && isAudio && content?.data?.display_options?.metadata?.image && (
{ )} {isReady ? ( - isAudio ? ( - - ) : ( - + {isAudio ? ( + + ) : ( + - ) - ) : ( -
-

{statusLabel}. Конвертация может занять несколько минут.

- {conversionState && ( -

- Статус конвертера: {conversionState} -

- )} - {uploadState && ( -

- Загрузка: {uploadState} -

- )} -
- )} - -
-

{metadataName}

- {statusLabel} - {/*

Russian

*/} - {/*

2022

*/} -

- {content?.data?.display_options?.metadata?.description} -

-
- -
- {content?.data?.downloadable && ( -
+ )} +
- )} -
); };