update viewContent page

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 (
+    const haveLicense = useMemo(() => (
         content?.data?.have_licenses?.includes('listen') ||
         content?.data?.have_licenses?.includes('resale')
-        );
-    }, [content]);
+    ), [content]);
+
+    const hadLicenseRef = useRef<boolean>(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 = () => {
         <main className={'min-h-screen flex w-full flex-col gap-[50px] px-4 '}>
             {isCongratsModal && <CongratsModal onConfirm={handleConfirmCongrats} />}
             {isErrorModal && <ErrorModal onConfirm={handleErrorModal} />}
-            {isAudio &&
+            {isReady && isAudio &&
                 content?.data?.display_options?.metadata?.image && (
                     <div className={'mt-[30px] h-[314px] w-full'}>
                         <img
@@ -233,7 +257,8 @@ export const ViewContentPage = () => {
                 )}
 
             {isReady ? (
-                isAudio ? (
+                <>
+                    {isAudio ? (
                         <AudioPlayer src={mediaUrl ?? ''} />
                     ) : (
                         <ReactPlayer
@@ -251,28 +276,10 @@ export const ViewContentPage = () => {
                             }}
                             url={mediaUrl}
                         />
-                )
-            ) : (
-                <div className={'rounded-xl bg-slate-900/60 p-4 text-center text-sm text-slate-200'}>
-                    <p>{statusLabel}. Конвертация может занять несколько минут.</p>
-                    {conversionState && (
-                        <p className={'mt-2 text-xs text-slate-400'}>
-                            Статус конвертера: {conversionState}
-                        </p>
-                    )}
-                    {uploadState && (
-                        <p className={'mt-1 text-xs text-slate-400'}>
-                            Загрузка: {uploadState}
-                        </p>
-                    )}
-                </div>
                     )}
 
                     <section className={'flex flex-col'}>
                         <h1 className={'text-[20px] font-bold'}>{metadataName}</h1>
-                <span className={'mt-1 text-xs text-slate-400'}>{statusLabel}</span>
-                {/*<h2>Russian</h2>*/}
-                {/*<h2>2022</h2>*/}
                         <p className={'mt-2 text-[12px]'}>
                             {content?.data?.display_options?.metadata?.description}
                         </p>
@@ -320,6 +327,34 @@ export const ViewContentPage = () => {
                             />
                         )}
                     </div>
+                </>
+            ) : (
+                <div className="flex flex-1 flex-col items-center justify-center py-16">
+                    <div className="max-w-md rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-8 text-center shadow-lg shadow-black/30">
+                        <h1 className="text-lg font-semibold text-slate-100">
+                            Контент скоро будет здесь
+                        </h1>
+                        <p className="mt-3 text-sm text-slate-300">
+                            Мы уже обрабатываем загруженный файл и обновим страницу автоматически, как только появится доступ к полному контенту.
+                        </p>
+                        {statusMessage && (
+                            <p className="mt-4 text-[12px] text-slate-500">
+                                Текущее состояние: {statusMessage}
+                            </p>
+                        )}
+                        {processingDetails?.conversion && (
+                            <p className="mt-2 text-[12px] text-slate-500">
+                                Статус конвертера: {processingDetails.conversion}
+                            </p>
+                        )}
+                        {processingDetails?.upload && (
+                            <p className="mt-2 text-[12px] text-slate-500">
+                                Загрузка: {processingDetails.upload}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            )}
         </main>
     );
 };