Update templates/video.html

templates/video.html

@@ -234,106 +234,6 @@
         .frame-preview-item span { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
         #frame-loader { border: 4px solid var(--input-border); border-top: 4px solid var(--accent-primary); border-radius: 50%; width: 40px; height: 40px; animation: ring-rotate 1s linear infinite; margin: 2rem auto; }
 
-        /* استایل‌های سابقه تصاویر */
-        .history-item {
-            background: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: var(--radius-input);
-            padding: 0.75rem;
-            box-shadow: var(--shadow-sm);
-            display: flex;
-            flex-direction: column;
-            gap: 0.75rem;
-            transition: var(--transition-smooth);
-        }
-        .history-item:hover {
-            box-shadow: var(--shadow-md);
-            border-color: var(--accent-primary);
-        }
-        .history-item img {
-            width: 100%;
-            height: 160px;
-            object-fit: cover;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: var(--transition-smooth);
-        }
-        .history-item img:hover {
-            filter: brightness(0.9);
-        }
-        .history-item-details {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            display: flex;
-            flex-direction: column;
-            gap: 0.3rem;
-        }
-        .history-item-prompt {
-            font-weight: 700;
-            color: var(--text-primary);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            margin-bottom: 0.2rem;
-        }
-        .history-item-meta {
-            display: flex;
-            justify-content: space-between;
-            background: var(--input-bg);
-            padding: 0.2rem 0.5rem;
-            border-radius: 4px;
-            font-size: 0.8rem;
-        }
-        .history-item-meta span {
-            font-weight: 600;
-            color: var(--accent-primary);
-        }
-        .history-delete-btn {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 44px;
-            height: 44px;
-            background-color: rgba(229, 62, 62, 0.9);
-            color: white;
-            border: none;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-            z-index: 10;
-        }
-        .history-delete-btn:hover {
-            background-color: var(--danger-color-hover);
-            transform: translate(-50%, -50%) scale(1.15);
-        }
-        #clear-history-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.5rem 1rem;
-            border-radius: var(--radius-btn);
-            border: 1px solid var(--danger-color);
-            background: transparent;
-            color: var(--danger-color);
-            font-family: var(--app-font);
-            font-weight: 600;
-            font-size: 0.9rem;
-            cursor: pointer;
-            transition: var(--transition-smooth);
-        }
-        #clear-history-btn:hover {
-            background-color: var(--danger-color);
-            color: white !important;
-            transform: translateY(-2px);
-        }
-
         @media (max-width: 768px) { main { padding: 3rem 1.5rem; } h1 { font-size: 2.2rem; } .generator-container { height: 250px; } .text-overlay { font-size: 18px; } #previous-results-wrapper { grid-template-columns: 1fr; } }
     </style>
 </head>
@@ -442,23 +342,6 @@
                     </div>
                 </div>
             </div>
-
-            <!-- بخش جدید سابقه تصاویر ساخته شده -->
-            <div class="form-group" style="margin-top: 3.5rem;">
-                <div class="form-label" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
-                    <div style="display: flex; align-items: center; gap: 0.75rem;">
-                        <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                        سابقه تصاویر ساخته شده
-                    </div>
-                    <button id="clear-history-btn">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
-                        حذف همه
-                    </button>
-                </div>
-                <div id="image-history-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;">
-                    <!-- آیتم‌های سابقه از طریق JS لود می‌شوند -->
-                </div>
-            </div>
             
             <div id="restart-section" style="display: none; text-align: center; margin-top: 2rem;">
                 <button id="btnRestart" class="video-button">
@@ -558,80 +441,10 @@
         // --- دیتابیس حافظه مرورگر برای ذخیره سوابق ---
         const projectDB = {
             db: null,
-            init() { return new Promise((resolve, reject) => { 
-                const request = indexedDB.open('AIStudioDB_V2', 2); 
-                request.onupgradeneeded = event => { 
-                    const db = event.target.result; 
-                    if (!db.objectStoreNames.contains('projectState')) { 
-                        db.createObjectStore('projectState'); 
-                    } 
-                    if (!db.objectStoreNames.contains('imageHistory')) { 
-                        db.createObjectStore('imageHistory', { keyPath: 'id' }); 
-                    }
-                }; 
-                request.onsuccess = event => { this.db = event.target.result; resolve(); }; 
-                request.onerror = event => { console.error('IndexedDB error:', event.target.errorCode); reject(event.target.errorCode); }; 
-            }); },
+            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); }; }); },
             save(key, value) { 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.put(value, key); request.onsuccess = () => resolve(); request.onerror = (event) => reject(event.target.error); }); },
             get(key) { return new Promise((resolve, reject) => { if (!this.db) return reject("DB not initialized"); const transaction = this.db.transaction(['projectState'], 'readonly'); const store = transaction.objectStore('projectState'); const request = store.get(key); request.onsuccess = () => resolve(request.result); request.onerror = (event) => reject(event.target.error); }); },
-            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); }); },
-            
-            // --- بخش توابع سابقه تصاویر ساخته شده ---
-            saveHistoryImage(item) {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        const allItems = await this.getHistoryImages();
-                        const transaction = this.db.transaction(['imageHistory'], 'readwrite');
-                        const store = transaction.objectStore('imageHistory');
-                        
-                        // نگهداری فقط 50 مورد آخر
-                        if (allItems.length >= 50) {
-                            const itemsToDelete = allItems.slice(49);
-                            for (const oldItem of itemsToDelete) {
-                                store.delete(oldItem.id);
-                            }
-                        }
-                        
-                        const request = store.put(item);
-                        request.onsuccess = () => resolve();
-                        request.onerror = (event) => reject(event.target.error);
-                    } catch (err) {
-                        reject(err);
-                    }
-                });
-            },
-            getHistoryImages() {
-                return new Promise((resolve, reject) => {
-                    if (!this.db) return reject("DB not initialized");
-                    const transaction = this.db.transaction(['imageHistory'], 'readonly');
-                    const store = transaction.objectStore('imageHistory');
-                    const request = store.getAll();
-                    request.onsuccess = () => {
-                        let items = request.result;
-                        items.sort((a, b) => b.timestamp - a.timestamp); // نزولی بر اساس زمان
-                        resolve(items);
-                    };
-                    request.onerror = (event) => reject(event.target.error);
-                });
-            },
-            deleteHistoryImage(id) {
-                return new Promise((resolve, reject) => {
-                    const transaction = this.db.transaction(['imageHistory'], 'readwrite');
-                    const store = transaction.objectStore('imageHistory');
-                    const request = store.delete(id);
-                    request.onsuccess = () => resolve();
-                    request.onerror = (event) => reject(event.target.error);
-                });
-            },
-            clearAllHistoryImages() {
-                return new Promise((resolve, reject) => {
-                    const transaction = this.db.transaction(['imageHistory'], 'readwrite');
-                    const store = transaction.objectStore('imageHistory');
-                    const request = store.clear();
-                    request.onsuccess = () => resolve();
-                    request.onerror = (event) => reject(event.target.error);
-                });
-            }
+            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); }); }
         };
             
         // --- سیستم احراز و اعتبار ---
@@ -786,18 +599,6 @@
             statusMessagesDiv.innerHTML = ''; 
             clearInterval(fakeProgressInterval);
             tvProgressBar.style.width = '0%';
-            
-            // بازگردانی استایل‌های تلویزیون به حالت اولیه
-            const generatorContainer = document.querySelector('.generator-container');
-            if(generatorContainer) {
-                generatorContainer.style.animation = 'pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1)';
-                generatorContainer.style.boxShadow = '0 0 40px rgba(56, 189, 248, 0.3)';
-                generatorContainer.style.borderColor = '#38bdf8';
-            }
-            const particles = document.querySelector('.particles');
-            if(particles) particles.style.display = 'block';
-            loaderTextOverlay.textContent = "در حال پردازش ویدیو...";
-
             aiLoader.style.display = 'none'; 
         }
         
@@ -1109,18 +910,8 @@
                 
                 setTimeout(() => {
                     gallerySeparator.style.display = 'none';
-                    
-                    // جلوگیری از محو شدن تلویزیون و نمایش موفقیت
-                    loaderTextOverlay.textContent = "ویدیوی شما آماده است!";
-                    const generatorContainer = document.querySelector('.generator-container');
-                    if(generatorContainer) {
-                        generatorContainer.style.animation = 'none';
-                        generatorContainer.style.boxShadow = '0 0 30px rgba(15, 212, 168, 0.4)';
-                        generatorContainer.style.borderColor = 'var(--success-color)';
-                    }
-                    const particles = document.querySelector('.particles');
-                    if(particles) particles.style.display = 'none';
-                    
+                    statusSection.classList.remove('active');
+                    aiLoader.style.display = 'none'; 
                     restartSection.style.display = 'block';
                     setUiLock(false);
                     setGenerateButtonState("ساخت ویدیو جادویی", false);
@@ -1330,111 +1121,10 @@
             } catch(error) { console.error("Could not load project from DB:", error); }
         }
         
-        // --- توابع رابط کاربری سابقه تصاویر ---
-        async function loadHistoryImages() {
-            try {
-                const images = await projectDB.getHistoryImages();
-                const container = document.getElementById('image-history-container');
-                container.innerHTML = '';
-                
-                if (images.length === 0) {
-                    container.innerHTML = '<p style="grid-column: 1 / -1; text-align: center; color: var(--text-tertiary); background: var(--input-bg); padding: 2rem; border-radius: var(--radius-card); border: 2px dashed var(--input-border);">سابقه‌ای وجود ندارد</p>';
-                    return;
-                }
-                
-                images.forEach(item => {
-                    const div = document.createElement('div');
-                    div.className = 'history-item';
-                    
-                    const objectURL = URL.createObjectURL(item.blob);
-                    
-                    div.innerHTML = `
-                        <div style="position: relative;">
-                            <img src="${objectURL}" alt="Generated Image" onclick="toggleDeleteBtn(this)">
-                            <button class="history-delete-btn" title="حذف تصویر" onclick="deleteHistoryItem(${item.id}, this)">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 20px; height: 20px;"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-                            </button>
-                        </div>
-                        <div class="history-item-details">
-                            <div class="history-item-prompt" title="${item.prompt || ''}">${item.prompt || 'بدون متن'}</div>
-                            <div class="history-item-meta">مدل: <span>${item.model || 'نامشخص'}</span></div>
-                            <div class="history-item-meta">اندازه: <span>${item.size || 'نامشخص'}</span></div>
-                        </div>
-                    `;
-                    container.appendChild(div);
-                });
-            } catch (err) {
-                console.error('Error loading history:', err);
-            }
-        }
-
-        window.toggleDeleteBtn = function(imgElement) {
-            const btn = imgElement.nextElementSibling;
-            const allBtns = document.querySelectorAll('.history-delete-btn');
-            
-            allBtns.forEach(b => {
-                if (b !== btn) {
-                    b.style.opacity = '0';
-                    b.style.visibility = 'hidden';
-                }
-            });
-
-            if (btn.style.opacity === '1') {
-                btn.style.opacity = '0';
-                btn.style.visibility = 'hidden';
-            } else {
-                btn.style.opacity = '1';
-                btn.style.visibility = 'visible';
-            }
-        };
-
-        window.deleteHistoryItem = async function(id, btnElement) {
-            try {
-                await projectDB.deleteHistoryImage(id);
-                await loadHistoryImages();
-            } catch (err) {
-                console.error('Error deleting item:', err);
-            }
-        };
-
-        document.getElementById('clear-history-btn').addEventListener('click', async () => {
-            if (confirm('آیا از حذف تمام تصاویر سابقه اطمینان دارید؟')) {
-                try {
-                    await projectDB.clearAllHistoryImages();
-                    await loadHistoryImages();
-                } catch (err) {
-                    console.error('Error clearing history:', err);
-                }
-            }
-        });
-
-        // این تابع به صورت گلوبال در دسترس است تا از سایر بخش‌ها بتوان تصاویر جدید را به سابقه اضافه کرد
-        window.addGeneratedImageToHistory = async function(blob, prompt, model, size) {
-            const item = {
-                id: Date.now(),
-                timestamp: Date.now(),
-                blob: blob,
-                prompt: prompt || 'بدون متن',
-                model: model || 'نامشخص',
-                size: size || 'نامشخص'
-            };
-            try {
-                await projectDB.saveHistoryImage(item);
-                await loadHistoryImages();
-            } catch (e) {
-                console.error("Error saving image to history:", e);
-            }
-        };
-
         document.addEventListener('DOMContentLoaded', async () => { 
             userFingerprint = await getBrowserFingerprint(); 
             parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); 
-            try { 
-                await projectDB.init(); 
-                await initializeForm(); 
-                await loadStoredProject(); 
-                await loadHistoryImages(); 
-            } 
+            try { await projectDB.init(); await initializeForm(); await loadStoredProject(); } 
             catch (error) { console.error("Failed to init DB or load project:", error); } 
         });