Update templates/video.html

templates/video.html

@@ -139,6 +139,12 @@
         #generateButton:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow); }
         #generateButton:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; }
         
+        #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1.25rem; letter-spacing: 0.5px; animation: badge-fade-in 0.6s 0.5s ease-out backwards; }
+        #subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); }
+        #subscription-status-badge.paid-badge { background: linear-gradient(45deg, var(--accent-premium), #ffca2c); color: #333; box-shadow: 0 4px 10px var(--accent-premium-glow); }
+        #credit-info-section { margin-top: 1.5rem; margin-bottom: 0.5rem; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); text-align: center; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); border: 1px solid var(--input-border); display: none; }
+        #upgrade-button { margin-top: 1rem; width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: 700; background: linear-gradient(95deg, #FFD54F, #FFC107 100%); color: #212529; border: none; border-radius: var(--radius-btn); cursor: pointer; box-shadow: 0 8px 20px -5px rgba(255, 193, 7, 0.3); display: none; }
+
         #results-container { min-height: 250px; position: relative; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; }
         #statusSection { display: none; width: 100%; }
         #statusSection.active { display: block; animation: fadeIn 0.5s; }
@@ -214,7 +220,8 @@
                 </div>
                 <h1>استودیو ویدیو هوش مصنوعی</h1>
                 <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی به ویدیو سینمایی تبدیل کنید</p>
-                <p class="instruction">ابتدا تصویر خود را با فلاکس پرو تولید کنید و بعد تصویر خود را اینجا آپلود کرده و ویدیوی خود را بسازید.</p>
+                <p class="instruction">ابتدا تصویر خود را تولید کرده و اینجا آپلود کنید تا ویدیوی خود را بسازید.</p>
+                <div id="subscription-status-badge" style="display:inline-block;"></div>
             </div>
         </header>
         <main>
@@ -251,11 +258,14 @@
                         </div>
                         <div class="slider-wrapper">
                             <svg class="slider-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"></path></svg>
-                            <input type="range" id="durationSlider" min="0.5" max="5.0" value="5.0" step="0.1">
+                            <input type="range" id="durationSlider" min="1.0" max="5.0" value="5.0" step="1.0">
                             <svg class="slider-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                         </div>
                     </div>
                     
+                    <div id="credit-info-section"></div>
+                    <button id="upgrade-button">⭐️ ارتقا به نسخه کامل و نامحدود</button>
+                    
                     <button id="generateButton">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg>
                         <span>ساخت ویدیو جادویی</span>
@@ -390,9 +400,8 @@
         </div>
     </div>
 
-
     <script>
-        // دیتابیس حافظه مرورگر برای ذخیره سوابق تصاویر و ویدیوها
+        // --- دیتابیس حافظه مرورگر برای ذخیره سوابق ---
         const projectDB = {
             db: null,
             init() { return new Promise((resolve, reject) => { const request = indexedDB.open('AIStudioDB_V2', 1); request.onupgradeneeded = event => { const db = event.target.result; if (!db.objectStoreNames.contains('projectState')) { db.createObjectStore('projectState'); } }; request.onsuccess = event => { this.db = event.target.result; resolve(); }; request.onerror = event => { console.error('IndexedDB error:', event.target.errorCode); reject(event.target.errorCode); }; }); },
@@ -401,7 +410,52 @@
             delete(key) { return new Promise((resolve, reject) => { if (!this.db) return reject("DB not initialized"); const transaction = this.db.transaction(['projectState'], 'readwrite'); const store = transaction.objectStore('projectState'); const request = store.delete(key); request.onsuccess = () => resolve(); request.onerror = (event) => reject(event.target.error); }); }
         };
             
-        // DOM Elements
+        // --- سیستم احراز و اعتبار ---
+        let userSubscriptionStatus = 'free', userFingerprint = null, countdownInterval = null; const PREMIUM_PAGE_ID = '1149636';
+        async function getBrowserFingerprint() { const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset(), "canvas-test"]; const fingerprintString = components.join('---'); let hash = 0; for (let i = 0; i < fingerprintString.length; i++) { hash = ((hash << 5) - hash) + fingerprintString.charCodeAt(i); hash |= 0; } return 'fp_' + Math.abs(hash).toString(16); }
+        function isUserPaid(userObject) { return userObject?.isLogin && userObject.accessible_pages?.some(p => p == PREMIUM_PAGE_ID); }
+        function updateUIForSubscriptionStatus(status) { 
+            userSubscriptionStatus = status; const creditInfoDiv = document.getElementById('credit-info-section'); const upgradeBtn = document.getElementById('upgrade-button'); const genBtn = document.getElementById('generateButton'); const subscriptionBadge = document.getElementById('subscription-status-badge'); 
+            if (status === 'paid') { 
+                subscriptionBadge.textContent = 'نسخه نامحدود'; subscriptionBadge.className = 'paid-badge'; creditInfoDiv.style.display = 'none'; upgradeBtn.style.display = 'none'; genBtn.disabled = false; if(countdownInterval) clearInterval(countdownInterval); 
+            } else { 
+                subscriptionBadge.textContent = 'نسخه رایگان'; subscriptionBadge.className = 'free-badge'; checkFreeUserCredit(); 
+            } 
+            subscriptionBadge.style.display = 'inline-block'; 
+        }
+        async function checkFreeUserCredit() { 
+            if (!userFingerprint) return; const creditInfoDiv = document.getElementById('credit-info-section'); const upgradeBtn = document.getElementById('upgrade-button'); const genBtn = document.getElementById('generateButton'); 
+            try { 
+                const response = await fetch('/api/check-credit', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) }); 
+                const result = await response.json(); 
+                if (userSubscriptionStatus !== 'paid') { creditInfoDiv.style.display = 'block'; } 
+                if (result.limit_reached) { 
+                    genBtn.disabled = true; upgradeBtn.style.display = 'block'; startCountdown(result.reset_timestamp); 
+                } else { 
+                    genBtn.disabled = false; upgradeBtn.style.display = 'none'; if(countdownInterval) clearInterval(countdownInterval); creditInfoDiv.textContent = `شما ${result.credits_remaining} اعتبار ساخت ویدیوی رایگان در این هفته دارید.`; 
+                } 
+            } catch (error) { creditInfoDiv.textContent = "خطا در بررسی اعتبار."; genBtn.disabled = true; } 
+        }
+        function startCountdown(resetTimestamp) { 
+            if (countdownInterval) clearInterval(countdownInterval); const creditInfoDiv = document.getElementById('credit-info-section'); 
+            const updateTimer = () => { 
+                const timeLeft = Math.max(0, resetTimestamp - (Date.now() / 1000)); 
+                if (timeLeft === 0) { clearInterval(countdownInterval); creditInfoDiv.textContent = 'در حال بروزرسانی اعتبار...'; setTimeout(checkFreeUserCredit, 2000); return; } 
+                const d = Math.floor(timeLeft / 86400); const h = Math.floor((timeLeft % 86400) / 3600); const m = Math.floor((timeLeft % 3600) / 60); 
+                creditInfoDiv.textContent = `اعتبار شما تمام شده. زمان باقی‌مانده: ${d} روز و ${h} ساعت و ${m} دقیقه`; 
+            }; 
+            updateTimer(); countdownInterval = setInterval(updateTimer, 60000); 
+        }
+        window.addEventListener('message', (event) => { 
+            if (event.data?.type === 'USER_DATA_RESPONSE') { 
+                if (event.data.error || !event.data.payload) { updateUIForSubscriptionStatus('free'); return; } 
+                try { const userObject = JSON.parse(event.data.payload); updateUIForSubscriptionStatus(isUserPaid(userObject) ? 'paid' : 'free'); } 
+                catch (e) { updateUIForSubscriptionStatus('free'); } 
+            } 
+        });
+        document.getElementById('upgrade-button').addEventListener('click', () => { parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); });
+
+        // --- DOM Elements ---
         const mainControls = document.getElementById('main-controls');
         const resultsContainer = document.getElementById('results-container');
         const latestResultWrapper = document.getElementById('latest-result-wrapper');
@@ -447,7 +501,7 @@
         const customReportSection = document.getElementById('custom-report-section');
         const reportSuccessMessage = document.getElementById('report-success-message');
         
-        // State Variables
+        // --- State Variables ---
         let currentImageFile = null, currentImageObjectURL = null, lastAttemptedPayload = null, pollTimer = null;
         let videoBlobs = new Map(); 
         let originalUserPromptForExtension = '';
@@ -688,21 +742,21 @@
             }
         }
 
-        // اگر مایل باشید ادغام ویدیوها در بک‌اند انجام شود، این تابع فرضی باقی می‌ماند
-        // در غیر این صورت فقط ویدیو جدید را ذخیره می‌کنیم
         async function mergeVideosOnServer(baseVideoBlob, newClipBlob) {
             try {
-                setAiLoaderText("میکس ویدیوها در سرور..."); setProgressBar(95); addStatusMessage('ارسال ویدیوها برای میکس در مرورگر / سرور...', 'info');
-                // از آنجا که API /api/merge-videos در کد شما نبود، فقط ویدیوی جدید را برمی‌گردانیم تا فعلاً ارور ندهد
-                // شما می‌توانید در بک‌اند Flask خود این را اضافه کنید.
-                const formData = new FormData(); formData.append('base_video', baseVideoBlob, 'base.mp4'); formData.append('new_clip', newClipBlob, 'new.mp4');
-                const response = await fetch('/api/merge-videos', { method: 'POST', body: formData }).catch(()=>null);
+                setAiLoaderText("میکس ویدیوها در سرور..."); setProgressBar(95); addStatusMessage('ارسال ویدیوها برای میکس در سرور...', 'info');
+                
+                const formData = new FormData(); 
+                formData.append('base_video', baseVideoBlob, 'base.mp4'); 
+                formData.append('new_clip', newClipBlob, 'new.mp4');
+                
+                const response = await fetch('/api/merge-videos', { method: 'POST', body: formData });
                 
-                if (response && response.ok) { 
+                if (response.ok) { 
                     return await response.blob();
                 } else {
-                    addStatusMessage('هشدار: سیستم میکس ویدیو روی سرور یافت نشد، فقط کلیپ جدید نمایش داده می‌شود.', 'error');
-                    return newClipBlob; // در صورت عدم وجود این API، کلیپ جدید جایگزین می‌شود
+                    const errText = await response.text();
+                    throw new Error(errText);
                 }
             } catch (error) { 
                 showCriticalError(`خطا در میکس ویدیو در سرور: ${error.message}`); 
@@ -726,6 +780,12 @@
                 } else { 
                     finalBlob = newClipBlob;
                     infoText = `ویدیو اولیه`;
+                    
+                    if (userSubscriptionStatus === 'free') { 
+                        addStatusMessage('ویدیو ساخته شد، در حال ثبت اعتبار...', 'info'); 
+                        try { await fetch('/api/use-credit', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) }); checkFreeUserCredit(); } 
+                        catch (creditError) { console.error("Error deducting credit:", creditError); } 
+                    }
                 }
 
                 const existingLatestCard = latestResultWrapper.querySelector('.video-result-card');
@@ -807,7 +867,7 @@
                         addStatusMessage(`دستور شما ترجمه شد: ${data.translated}`, 'success');
                     }
                     setProgressBar(30);
-                    setAiLoaderText('۲/۳: در حال پردازش ویدیو در سرور (ممکن است چند دقیقه طول بکشد)...');
+                    setAiLoaderText('۲/۳: در حال ساخت ویدیو در گیت‌هاب (حدود ۲ تا ۵ دقیقه زمان می‌برد)...');
                     
                     let progressValue = 30;
                     pollTimer = setInterval(async () => {
@@ -827,7 +887,7 @@
                                 await handleVideoResult(newClipBlob, data.run_id);
                             } else {
                                 if (progressValue < 90) {
-                                    progressValue += 2;
+                                    progressValue += 1;
                                     setProgressBar(progressValue);
                                 }
                             }
@@ -855,7 +915,6 @@
                     if (!videoElement) { showCriticalError("ویدیوی مرجع برای گرفتن فریم آخر پیدا نشد!"); return; }
                     addStatusMessage('در حال گرفتن آخرین فریم از ویدیو...', 'info');
                     try { 
-                        // تبدیل Blob به File تا با سرور سازگارتر باشد
                         const rawBlob = await captureLastFrame(videoElement); 
                         imageToProcess = new File([rawBlob], "last_frame.png", { type: "image/png" });
                     } catch (e) { 
@@ -880,6 +939,24 @@
             }
             
             lastAttemptedPayload = { imageFile: imageToProcess, userPrompt: promptToUse, duration: parseFloat(durationSlider.value), isExtension: isExtensionRequest, baseVideoBlob, clipCount };
+
+            // چک کردن سیستم اعتبار برای کاربران رایگان قبل از شروع پردازش
+            if (userSubscriptionStatus !== 'paid') {
+                try {
+                    const response = await fetch('/api/check-credit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fingerprint: userFingerprint }) });
+                    const result = await response.json();
+                    if (result.limit_reached) {
+                        updateUIForSubscriptionStatus('free');
+                        showCriticalError("محدودیت ساخت ویدیوی رایگان شما برای این هفته به پایان رسیده است.");
+                        return;
+                    }
+                } catch (err) {
+                    const errorMessage = !navigator.onLine ? "عدم اتصال به اینترنت." : "خطا در سیستم اعتبار.";
+                    showCriticalError(errorMessage);
+                    return;
+                }
+            }
+
             await proceedWithVideoGeneration();
         }
 
@@ -950,7 +1027,13 @@
             } catch(error) { console.error("Could not load project from DB:", error); }
         }
         
-        document.addEventListener('DOMContentLoaded', async () => { try { await projectDB.init(); await initializeForm(); await loadStoredProject(); } catch (error) { console.error("Failed to init DB or load project:", error); } });
+        document.addEventListener('DOMContentLoaded', async () => { 
+            userFingerprint = await getBrowserFingerprint(); 
+            parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); 
+            try { await projectDB.init(); await initializeForm(); await loadStoredProject(); } 
+            catch (error) { console.error("Failed to init DB or load project:", error); } 
+        });
+        
         durationSlider.addEventListener('input', () => { const value = parseFloat(durationSlider.value); durationValueDisplay.textContent = `${value.toFixed(1)} ثانیه`; updateSliderStyle(durationSlider); });
         
         function captureFrameAtTime(videoElement, time) {