Update app.py

app.py

@@ -317,15 +317,57 @@ USER_TEMPLATE = """
             background-color: var(--card-bg);
             padding: 12px var(--padding);
             border-radius: var(--border-radius);
-            display: flex; align-items: center; justify-content: space-between;
+            display: flex;
+            align-items: center;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             transition: background-color 0.2s ease;
             word-break: break-word;
         }
         .file-item:hover { background-color: rgba(255, 255, 255, 0.08); }
-        .file-info { flex-grow: 1; margin-right: 10px; overflow: hidden; }
+
+        .file-preview-area {
+            flex-shrink: 0;
+            width: 80px;
+            height: 80px;
+            margin-right: var(--padding);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0,0,0,0.05);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .file-preview-image,
+        .file-preview-video {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+        .file-preview-video {
+            width: 100%;
+            height: 100%;
+        }
+        .file-preview-audio {
+            width: 100%;
+            transform: scale(0.85);
+            transform-origin: center;
+        }
+        .file-preview-icon {
+            font-size: 0.8em;
+            font-weight: bold;
+            color: var(--tg-theme-hint-color);
+            padding: 5px;
+            text-align: center;
+            text-transform: uppercase;
+            word-break: break-all;
+            line-height: 1.2;
+        }
+
+        .file-info { flex-grow: 1; margin-right: 10px; overflow: hidden; min-width: 0;}
         .file-name { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .file-meta { font-size: 0.8em; color: var(--tg-theme-hint-color); }
+        .file-actions { flex-shrink: 0; }
         .file-actions a, .file-actions button {
             display: inline-block;
             padding: 6px 10px;
@@ -344,33 +386,6 @@ USER_TEMPLATE = """
         .loading, .no-files { text-align: center; padding: 20px; color: var(--tg-theme-hint-color); }
         .progress-bar { width: 100%; background-color: #ddd; border-radius: 4px; height: 8px; margin-top: 5px; display: none; }
         .progress-bar-inner { height: 100%; width: 0%; background-color: var(--tg-theme-button-color); border-radius: 4px; transition: width 0.1s linear; }
-        .modal {
-            display: none; position: fixed; z-index: 1001;
-            left: 0; top: 0; width: 100%; height: 100%;
-            overflow: auto; background-color: rgba(0,0,0,0.8);
-            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
-            animation: fadeIn 0.3s ease-out;
-        }
-        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-        .modal-content {
-            margin: auto; display: block; max-width: 90%; max-height: 85%;
-            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-        }
-        .modal-content img, .modal-content video, .modal-content audio {
-            display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto;
-            background-color: var(--tg-theme-bg-color);
-        }
-         .modal-close {
-            position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px;
-            font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 1002;
-            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
-        }
-        .modal-close:hover, .modal-close:focus { color: #bbb; text-decoration: none; }
-        .modal-caption {
-            margin: auto; display: block; width: 80%; max-width: 700px; text-align: center;
-            color: #ccc; padding: 10px 0; height: 50px; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
-            background: rgba(0,0,0,0.5); border-radius: 8px;
-        }
         .spinner {
             border: 4px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
@@ -407,12 +422,6 @@ USER_TEMPLATE = """
             </ul>
         </section>
     </div>
-    <div id="viewerModal" class="modal">
-      <span class="modal-close" id="modalCloseBtn">×</span>
-      <div id="modalContent" class="modal-content">
-      </div>
-      <div id="modalCaption" class="modal-caption"></div>
-    </div>
     <script>
         const tg = window.Telegram.WebApp;
         const MAX_FILES = {{ max_files }};
@@ -428,10 +437,6 @@ USER_TEMPLATE = """
         const loadingSpinner = document.getElementById('loading-spinner');
         const progressBar = document.getElementById('progress-bar');
         const progressBarInner = document.getElementById('progress-bar-inner');
-        const modal = document.getElementById('viewerModal');
-        const modalContent = document.getElementById('modalContent');
-        const modalCaption = document.getElementById('modalCaption');
-        const modalCloseBtn = document.getElementById('modalCloseBtn');
 
         function applyTheme(themeParams) {
             const root = document.documentElement;
@@ -470,9 +475,45 @@ USER_TEMPLATE = """
             }
             noFilesMessage.style.display = 'none';
             files.sort((a, b) => b.uploaded_at_ts - a.uploaded_at_ts);
+
             files.forEach(file => {
                 const li = document.createElement('li');
                 li.classList.add('file-item');
+
+                const previewDiv = document.createElement('div');
+                previewDiv.classList.add('file-preview-area');
+                const downloadUrl = `/download/${encodeURIComponent(file.filename)}?initData=${encodeURIComponent(userInitData)}`;
+                const mimeType = file.content_type || '';
+
+                if (mimeType.startsWith('image/')) {
+                    const img = document.createElement('img');
+                    img.src = downloadUrl;
+                    img.alt = file.filename;
+                    img.classList.add('file-preview-image');
+                    previewDiv.appendChild(img);
+                } else if (mimeType.startsWith('video/')) {
+                    const video = document.createElement('video');
+                    video.src = downloadUrl;
+                    video.controls = true;
+                    video.classList.add('file-preview-video');
+                    video.preload = "metadata";
+                    previewDiv.appendChild(video);
+                } else if (mimeType.startsWith('audio/')) {
+                    const audio = document.createElement('audio');
+                    audio.src = downloadUrl;
+                    audio.controls = true;
+                    audio.classList.add('file-preview-audio');
+                    audio.preload = "metadata";
+                    previewDiv.appendChild(audio);
+                } else {
+                    const iconPlaceholder = document.createElement('div');
+                    iconPlaceholder.classList.add('file-preview-icon');
+                    const ext = file.filename.split('.').pop().toLowerCase() || 'file';
+                    iconPlaceholder.textContent = ext.substring(0,4);
+                    previewDiv.appendChild(iconPlaceholder);
+                }
+                li.appendChild(previewDiv);
+
                 const fileInfoDiv = document.createElement('div');
                 fileInfoDiv.classList.add('file-info');
                 const fileNameSpan = document.createElement('span');
@@ -485,31 +526,18 @@ USER_TEMPLATE = """
                 const size = file.size ? formatBytes(file.size) : '';
                 fileMetaSpan.textContent = `${date}${size ? ' - ' + size : ''}`;
                 fileInfoDiv.appendChild(fileMetaSpan);
+                li.appendChild(fileInfoDiv);
+
                 const fileActionsDiv = document.createElement('div');
                 fileActionsDiv.classList.add('file-actions');
-                const mimeType = file.content_type || '';
-                if (mimeType.startsWith('image/') || mimeType.startsWith('video/') || mimeType.startsWith('audio/')) {
-                    const viewButton = document.createElement('button');
-                    viewButton.textContent = '👁️';
-                    viewButton.classList.add('view-btn');
-                    viewButton.style.backgroundColor = '#6f42c1';
-                    viewButton.style.color = 'white';
-                    viewButton.title = 'Просмотр';
-                    viewButton.onclick = (e) => {
-                        e.stopPropagation();
-                        openViewer(file);
-                    };
-                    fileActionsDiv.appendChild(viewButton);
-                }
                 const downloadLink = document.createElement('a');
                 downloadLink.classList.add('download-btn');
                 downloadLink.textContent = 'Скачать';
-                downloadLink.href = `/download/${encodeURIComponent(file.filename)}?initData=${encodeURIComponent(userInitData)}`;
-                downloadLink.target = '_blank';
+                downloadLink.href = downloadUrl;
+                downloadLink.setAttribute('download', file.filename);
                 downloadLink.title = 'Скачать файл';
                 downloadLink.onclick = (e) => e.stopPropagation();
                 fileActionsDiv.appendChild(downloadLink);
-                li.appendChild(fileInfoDiv);
                 li.appendChild(fileActionsDiv);
                 fileListUl.appendChild(li);
             });
@@ -620,67 +648,19 @@ USER_TEMPLATE = """
                 uploadStatusDiv.style.color = 'red';
             } finally {
                 progressBar.style.display = 'none';
-                if (currentFiles.length > 0) {
+                if (currentFiles.length > 0 && fileInput.files.length > 0) { // Check also fileInput as currentFiles might not be reset on some errors
                     uploadButton.classList.add('enabled');
                     uploadButton.disabled = false;
-                } else {
+                } else { // Default to disabled if no files or error
                     uploadButton.classList.remove('enabled');
                     uploadButton.disabled = true;
-                    selectedFilesDiv.textContent = 'Файлы не выбраны';
+                    selectedFilesDiv.textContent = 'Файлы не выбраны'; // Ensure this is accurate
+                    fileInput.value = ''; // Clear file input on final step
+                    currentFiles = [];
                 }
             }
         }
 
-         function openViewer(file) {
-             modal.style.display = 'block';
-             modalContent.innerHTML = '';
-             modalCaption.textContent = file.filename;
-             const mimeType = file.content_type || '';
-             const downloadUrl = `/download/${encodeURIComponent(file.filename)}?initData=${encodeURIComponent(userInitData)}`;
-             let element;
-             if (mimeType.startsWith('image/')) {
-                 element = document.createElement('img');
-                 element.src = downloadUrl;
-                 element.alt = file.filename;
-             } else if (mimeType.startsWith('video/')) {
-                 element = document.createElement('video');
-                 element.src = downloadUrl;
-                 element.controls = true;
-                 element.autoplay = true;
-             } else if (mimeType.startsWith('audio/')) {
-                 element = document.createElement('audio');
-                 element.src = downloadUrl;
-                 element.controls = true;
-                 element.autoplay = true;
-                 element.style.padding = '20px';
-             }
-             if (element) {
-                 modalContent.appendChild(element);
-                 if (tg.HapticFeedback) {
-                     tg.HapticFeedback.impactOccurred('light');
-                 }
-             } else {
-                 modalCaption.textContent = 'Предпросмотр недоступен для этого типа файла.';
-             }
-         }
-
-         function closeViewer() {
-             modal.style.display = 'none';
-             const mediaElement = modalContent.querySelector('video, audio');
-             if (mediaElement) {
-                 mediaElement.pause();
-                 mediaElement.src = '';
-             }
-             modalContent.innerHTML = '';
-         }
-
-         modalCloseBtn.onclick = closeViewer;
-         modal.onclick = function(event) {
-             if (event.target === modal) {
-                 closeViewer();
-             }
-         };
-
         function setupTelegram() {
              if (!tg || !tg.initData) {
                  console.error("Telegram WebApp script not loaded or initData is missing.");