Update templates/video.html

templates/video.html

@@ -234,6 +234,106 @@
         .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>
@@ -342,6 +442,23 @@
                     </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">
@@ -441,10 +558,80 @@
         // --- دیتابیس حافظه مرورگر برای ذخیره سوابق ---
         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); }; }); },
+            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); }; 
+            }); },
             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); }); }
+            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);
+                });
+            }
         };
             
         // --- سیستم احراز و اعتبار ---
@@ -599,6 +786,18 @@
             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'; 
         }
         
@@ -910,8 +1109,18 @@
                 
                 setTimeout(() => {
                     gallerySeparator.style.display = 'none';
-                    statusSection.classList.remove('active');
-                    aiLoader.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';
+                    
                     restartSection.style.display = 'block';
                     setUiLock(false);
                     setGenerateButtonState("ساخت ویدیو جادویی", false);
@@ -1121,10 +1330,111 @@
             } 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(); } 
+            try { 
+                await projectDB.init(); 
+                await initializeForm(); 
+                await loadStoredProject(); 
+                await loadHistoryImages(); 
+            } 
             catch (error) { console.error("Failed to init DB or load project:", error); } 
         });