Spaces:

albumup
/

file

Sleeping

App Files Files Community

albumup commited on Jan 22, 2025

Commit

1e9923c

verified ·

1 Parent(s): 983b7ef

Update app.py

Browse files

Files changed (1) hide show

app.py +237 -15

app.py CHANGED Viewed

@@ -215,36 +215,45 @@ async def view_album(album_id: str):
     for file in album['files']:
         file_url = f"/upload/{file['path']}"
         file_type = get_file_type(file['filename'])
         preview_html = ""
         if file_type == 'image':
             preview_html = f"""
-                <div class="preview-container">
-                    <img src="{file_url}" alt="{file['filename']}" onclick="openModal('{file_url}')">
                 </div>
             """
         elif file_type == 'video':
             preview_html = f"""
-                <div class="preview-container">
-                    <video onclick="openModal('{file_url}')" style="cursor: pointer;">
                         <source src="{file_url}" type="{file['content_type']}">
-                        Your browser does not support the video tag.
                     </video>
                 </div>
             """
         else:
             preview_html = f"""
                 <div class="preview-container">
-                    <p>No preview available for {file['filename']}</p>
                 </div>
             """
         file_list_html += f"""
-        <div class="file-item">
             {preview_html}
-            <p>{file['filename']}</p>
-            <a href="{file_url}" class="button" onclick="openModal('{file_url}'); return false;">View</a>
-            <a href="{file_url}?download=true" class="button" target="_blank">Download</a>
         </div>
         """
@@ -254,14 +263,227 @@ async def view_album(album_id: str):
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Album View - {album['albumName']}</title>
     </head>
     <body>
-        <h1>{album['albumName']}</h1>
-        <a href="/album/{album_id}/download" class="button">Download All Files as ZIP</a>
-        <div class="file-grid">
             {file_list_html}
         </div>
     </body>
     </html>
     """
@@ -379,4 +601,4 @@ async def retry_upload(upload_url, file_content, content_type, max_retries=5):
 if __name__ == "__main__":
     import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=8000)

     for file in album['files']:
         file_url = f"/upload/{file['path']}"
         file_type = get_file_type(file['filename'])
+        download_url = f"{file_url}?download=true"
         preview_html = ""
         if file_type == 'image':
             preview_html = f"""
+                <div class="preview-container" onclick="openModal('{file_url}')">
+                    <img src="{file_url}" alt="{file['filename']}" loading="lazy">
                 </div>
             """
         elif file_type == 'video':
             preview_html = f"""
+                <div class="preview-container" onclick="openModal('{file_url}')">
+                    <video>
                         <source src="{file_url}" type="{file['content_type']}">
                     </video>
+                    <div class="play-icon">▶</div>
                 </div>
             """
         else:
             preview_html = f"""
                 <div class="preview-container">
+                    <div class="file-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+                        </svg>
+                    </div>
                 </div>
             """
         file_list_html += f"""
+        <div class="file-card">
             {preview_html}
+            <div class="file-info">
+                <span class="filename">{file['filename']}</span>
+                <div class="actions">
+                    <a href="{file_url}" target="_blank" class="action-btn view">View</a>
+                    <a href="{download_url}" class="action-btn download">Download</a>
+                </div>
+            </div>
         </div>
         """
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{album['albumName']}</title>
+        <style>
+            body {{
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                margin: 0;
+                padding: 20px;
+                background-color: #f5f5f5;
+            }}
+            .album-header {{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 30px;
+                flex-wrap: wrap;
+                gap: 15px;
+            }}
+            .grid-container {{
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+                gap: 20px;
+                padding: 10px;
+            }}
+            .file-card {{
+                background: white;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                overflow: hidden;
+                transition: transform 0.2s;
+            }}
+            .file-card:hover {{
+                transform: translateY(-2px);
+            }}
+            .preview-container {{
+                position: relative;
+                background: #f8f9fa;
+                cursor: pointer;
+                aspect-ratio: 1;
+            }}
+            .preview-container img,
+            .preview-container video {{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }}
+            .file-info {{
+                padding: 15px;
+            }}
+            .filename {{
+                display: block;
+                font-size: 0.9em;
+                color: #333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-bottom: 10px;
+            }}
+            .actions {{
+                display: flex;
+                gap: 8px;
+            }}
+            .action-btn {{
+                flex: 1;
+                padding: 8px 12px;
+                text-align: center;
+                border-radius: 6px;
+                font-size: 0.85em;
+                text-decoration: none;
+                transition: all 0.2s;
+            }}
+            .view {{
+                background: #007bff;
+                color: white;
+            }}
+            .view:hover {{
+                background: #0056b3;
+            }}
+            .download {{
+                background: #28a745;
+                color: white;
+            }}
+            .download:hover {{
+                background: #218838;
+            }}
+            .play-icon {{
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-size: 2.5em;
+                color: white;
+                text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                opacity: 0.9;
+            }}
+            .file-icon {{
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #666;
+            }}
+            .file-icon svg {{
+                width: 50%;
+                height: 50%;
+            }}
+            /* Modal styles */
+            .modal {{
+                display: none;
+                position: fixed;
+                z-index: 1000;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0,0,0,0.9);
+                justify-content: center;
+                align-items: center;
+            }}
+            .modal-content {{
+                max-width: 90%;
+                max-height: 90%;
+                background: black;
+            }}
+            .modal-media {{
+                max-width: 100%;
+                max-height: 80vh;
+                object-fit: contain;
+            }}
+            .close-modal {{
+                position: absolute;
+                top: 20px;
+                right: 30px;
+                color: white;
+                font-size: 40px;
+                cursor: pointer;
+                z-index: 1001;
+            }}
+            @media (max-width: 768px) {{
+                .grid-container {{
+                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                }}
+                .album-header {{
+                    flex-direction: column;
+                    align-items: flex-start;
+                }}
+            }}
+        </style>
     </head>
     <body>
+        <div class="album-header">
+            <h1>{album['albumName']}</h1>
+            <a href="/album/{album_id}/download" class="download-all-btn">Download All as ZIP</a>
+        </div>
+        <div class="grid-container">
             {file_list_html}
         </div>
+        <div id="modal" class="modal" onclick="closeModal()">
+            <span class="close-modal">&times;</span>
+            <div class="modal-content">
+                <img id="modal-media" class="modal-media" src="" alt="">
+                <video id="modal-video" class="modal-media" controls style="display: none;"></video>
+            </div>
+        </div>
+        <script>
+            function openModal(url) {{
+                const modal = document.getElementById('modal');
+                const imgModal = document.getElementById('modal-media');
+                const videoModal = document.getElementById('modal-video');
+                if (url.includes('.mp4') || url.includes('.webm')) {{
+                    videoModal.style.display = 'block';
+                    imgModal.style.display = 'none';
+                    videoModal.src = url;
+                }} else {{
+                    imgModal.style.display = 'block';
+                    videoModal.style.display = 'none';
+                    imgModal.src = url;
+                }}
+                modal.style.display = 'flex';
+            }}
+            function closeModal() {{
+                document.getElementById('modal').style.display = 'none';
+                document.getElementById('modal-video').pause();
+            }}
+            // Close modal when clicking outside content
+            window.onclick = function(event) {{
+                const modal = document.getElementById('modal');
+                if (event.target === modal) {{
+                    closeModal();
+                }}
+            }}
+        </script>
     </body>
     </html>
     """
 if __name__ == "__main__":
     import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)