Update app.py

app.py

@@ -317,57 +317,15 @@ USER_TEMPLATE = """
             background-color: var(--card-bg);
             padding: 12px var(--padding);
             border-radius: var(--border-radius);
-            display: flex;
-            align-items: center;
+            display: flex; align-items: center; justify-content: space-between;
             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-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-info { flex-grow: 1; margin-right: 10px; overflow: hidden; }
         .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;
@@ -386,6 +344,33 @@ 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%;
@@ -422,6 +407,12 @@ 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 }};
@@ -437,6 +428,10 @@ 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;
@@ -475,45 +470,9 @@ 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');
@@ -526,18 +485,31 @@ 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 = downloadUrl;
+                downloadLink.href = `/download/${encodeURIComponent(file.filename)}?initData=${encodeURIComponent(userInitData)}`;
                 downloadLink.setAttribute('download', file.filename);
                 downloadLink.title = 'Скачать файл';
                 downloadLink.onclick = (e) => e.stopPropagation();
                 fileActionsDiv.appendChild(downloadLink);
+                li.appendChild(fileInfoDiv);
                 li.appendChild(fileActionsDiv);
                 fileListUl.appendChild(li);
             });
@@ -648,19 +620,67 @@ USER_TEMPLATE = """
                 uploadStatusDiv.style.color = 'red';
             } finally {
                 progressBar.style.display = 'none';
-                if (currentFiles.length > 0 && fileInput.files.length > 0) { // Check also fileInput as currentFiles might not be reset on some errors
+                if (currentFiles.length > 0) { // Re-check currentFiles for enabling upload button
                     uploadButton.classList.add('enabled');
                     uploadButton.disabled = false;
-                } else { // Default to disabled if no files or error
+                } else {
                     uploadButton.classList.remove('enabled');
                     uploadButton.disabled = true;
-                    selectedFilesDiv.textContent = 'Файлы не выбраны'; // Ensure this is accurate
-                    fileInput.value = ''; // Clear file input on final step
-                    currentFiles = [];
+                    selectedFilesDiv.textContent = 'Файлы не выбраны';
                 }
             }
         }
 
+         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.");
@@ -866,12 +886,46 @@ ADMIN_USER_FILES_TEMPLATE = """
         .file-table td { font-size: 0.95em; word-break: break-word; }
         .filename { font-weight: 500; }
         .filesize, .filedate { color: var(--admin-secondary); font-size: 0.9em; }
-        .actions a {
-            display: inline-block; padding: 6px 12px; background-color: var(--admin-primary); color: white;
-            text-decoration: none; border-radius: 6px; font-size: 0.85em; transition: background-color 0.2s ease;
+        .actions a, .actions button {
+            display: inline-block; padding: 6px 10px; margin-left: 8px; border-radius: 6px;
+            text-decoration: none; font-size: 0.85em; font-weight: 500; cursor: pointer;
+            border: none; transition: opacity 0.2s ease, background-color 0.2s ease;
+            vertical-align: middle;
         }
-        .actions a:hover { background-color: #0b5ed7; }
+        .actions a:hover, .actions button:hover { opacity: 0.8; }
+        .actions .download-btn { background-color: var(--admin-primary); color: white; }
+        .actions .view-btn { background-color: #6f42c1; color: white; }
+
         .no-files { text-align: center; color: var(--admin-secondary); margin-top: 2rem; font-size: 1.1em; }
+
+        .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: fadeInAdmin 0.3s ease-out;
+        }
+        @keyframes fadeInAdmin { 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(--admin-bg);
+        }
+        .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;
+        }
+
          @media screen and (max-width: 768px) {
              .file-table { border: 0; box-shadow: none; }
              .file-table thead { display: none; }
@@ -892,6 +946,7 @@ ADMIN_USER_FILES_TEMPLATE = """
         <a href="{{ url_for('admin_panel') }}" class="back-link">← Назад к списку пользователей</a>
         <h1>Файлы пользователя</h1>
         <div class="user-identifier">{{ user_info.first_name or '' }} {{ user_info.last_name or '' }} (ID: {{ user_id }})</div>
+
         {% if files %}
             <table class="file-table">
                 <thead>
@@ -904,14 +959,19 @@ ADMIN_USER_FILES_TEMPLATE = """
                     </tr>
                 </thead>
                 <tbody>
-                    {% for file in files|sort(attribute='uploaded_at_ts', reverse=true) %}
+                    {% for file_item in files|sort(attribute='uploaded_at_ts', reverse=true) %}
                         <tr>
-                            <td data-label="Имя файла" class="filename">{{ file.filename }}</td>
-                            <td data-label="Размер" class="filesize">{{ file.size | filesizeformat if file.size else 'N/A' }}</td>
-                            <td data-label="Дата" class="filedate">{{ file.uploaded_at_str or 'N/A' }}</td>
-                            <td data-label="Тип">{{ file.content_type or 'N/A' }}</td>
+                            <td data-label="Имя файла" class="filename">{{ file_item.filename }}</td>
+                            <td data-label="Размер" class="filesize">{{ file_item.size | filesizeformat if file_item.size else 'N/A' }}</td>
+                            <td data-label="Дата" class="filedate">{{ file_item.uploaded_at_str or 'N/A' }}</td>
+                            <td data-label="Тип">{{ file_item.content_type or 'N/A' }}</td>
                             <td data-label="Действия" class="actions">
-                                <a href="{{ url_for('admin_download_file', user_id=user_id, filename=file.filename) }}" target="_blank">Скачать</a>
+                                {% set mime_type = file_item.content_type or '' %}
+                                {% if mime_type.startswith('image/') or mime_type.startswith('video/') or mime_type.startswith('audio/') %}
+                                <button class="view-btn" title="Просмотр"
+                                    onclick="openAdminViewer('{{ user_id }}', '{{ file_item.filename | e }}', '{{ mime_type | e }}')">👁️</button>
+                                {% endif %}
+                                <a href="{{ url_for('admin_download_file', user_id=user_id, filename=file_item.filename) }}" class="download-btn">Скачать</a>
                             </td>
                         </tr>
                     {% endfor %}
@@ -921,6 +981,14 @@ ADMIN_USER_FILES_TEMPLATE = """
             <p class="no-files">У этого пользователя нет загруженных файлов.</p>
         {% endif %}
     </div>
+
+    <div id="adminViewerModal" class="modal">
+      <span class="modal-close" id="adminModalCloseBtn">×</span>
+      <div id="adminModalContent" class="modal-content">
+      </div>
+      <div id="adminModalCaption" class="modal-caption"></div>
+    </div>
+
      <script>
          function formatBytes(bytes, decimals = 2) {
              if (!+bytes) return '0 Bytes'
@@ -930,6 +998,62 @@ ADMIN_USER_FILES_TEMPLATE = """
              const i = Math.floor(Math.log(bytes) / Math.log(k))
              return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
          }
+
+        const adminModal = document.getElementById('adminViewerModal');
+        const adminModalContent = document.getElementById('adminModalContent');
+        const adminModalCaption = document.getElementById('adminModalCaption');
+        const adminModalCloseBtn = document.getElementById('adminModalCloseBtn');
+
+        function openAdminViewer(userId, filename, mimeType) {
+            adminModal.style.display = 'block';
+            adminModalContent.innerHTML = '';
+            adminModalCaption.textContent = filename;
+
+            const viewUrl = `/admin/view/${encodeURIComponent(userId)}/${encodeURIComponent(filename)}`;
+            let element;
+
+            if (mimeType.startsWith('image/')) {
+                element = document.createElement('img');
+                element.src = viewUrl;
+                element.alt = filename;
+            } else if (mimeType.startsWith('video/')) {
+                element = document.createElement('video');
+                element.src = viewUrl;
+                element.controls = true;
+                element.autoplay = true;
+            } else if (mimeType.startsWith('audio/')) {
+                element = document.createElement('audio');
+                element.src = viewUrl;
+                element.controls = true;
+                element.autoplay = true;
+                element.style.padding = '20px';
+            }
+
+            if (element) {
+                adminModalContent.appendChild(element);
+            } else {
+                adminModalCaption.textContent = 'Предпросмотр недоступен для этого типа файла.';
+            }
+        }
+
+        function closeAdminViewer() {
+            adminModal.style.display = 'none';
+            const mediaElement = adminModalContent.querySelector('video, audio');
+            if (mediaElement) {
+                mediaElement.pause();
+                mediaElement.src = '';
+            }
+            adminModalContent.innerHTML = '';
+        }
+
+        if(adminModalCloseBtn) adminModalCloseBtn.onclick = closeAdminViewer;
+        if(adminModal) {
+            adminModal.onclick = function(event) {
+                if (event.target === adminModal) {
+                    closeAdminViewer();
+                }
+            };
+        }
      </script>
 </body>
 </html>
@@ -1100,10 +1224,9 @@ def admin_user_files(user_id):
                                   user_info=user_info,
                                   files=files)
 
-@app.route('/admin/download/<user_id>/<path:filename>', methods=['GET'])
-def admin_download_file(user_id, filename):
+def _admin_serve_file(user_id, filename, as_attachment):
     user_id_str = str(user_id)
-    logging.info(f"Admin request to download file '{filename}' for user {user_id}")
+    logging.info(f"Admin serving file '{filename}' for user {user_id_str}, as_attachment={as_attachment}")
     api = get_hf_api(write=False)
     if not api:
         return "Server error: Cannot connect to storage.", 500
@@ -1123,22 +1246,30 @@ def admin_download_file(user_id, filename):
             force_download=False,
             etag_timeout=10
         )
-        logging.info(f"Admin download: File {path_in_repo} cached at {local_file_path}")
         content_type = mimetypes.guess_type(filename)[0] or 'application/octet-stream'
         if file_metadata and 'content_type' in file_metadata:
              content_type = file_metadata['content_type'] or content_type
         return send_file(
             local_file_path,
             mimetype=content_type,
-            as_attachment=True,
-            download_name=filename
+            as_attachment=as_attachment,
+            download_name=filename if as_attachment else None
         )
     except EntryNotFoundError:
-        logging.error(f"Admin download: File not found on Hugging Face: {path_in_repo}")
+        logging.error(f"Admin serving: File not found on Hugging Face: {path_in_repo}")
         return "File not found on storage.", 404
     except Exception as e:
-        logging.error(f"Admin download: Error for file {path_in_repo}: {e}", exc_info=True)
-        return "Server error during download.", 500
+        logging.error(f"Admin serving: Error for file {path_in_repo}: {e}", exc_info=True)
+        return "Server error during file serving.", 500
+
+@app.route('/admin/download/<user_id>/<path:filename>', methods=['GET'])
+def admin_download_file(user_id, filename):
+    return _admin_serve_file(user_id, filename, as_attachment=True)
+
+@app.route('/admin/view/<user_id>/<path:filename>', methods=['GET'])
+def admin_view_file(user_id, filename):
+    return _admin_serve_file(user_id, filename, as_attachment=False)
+
 
 @app.route('/admin/download_metadata', methods=['POST'])
 def admin_trigger_download_metadata():