Update app.py

app.py

@@ -7,6 +7,7 @@ import time
 from datetime import datetime
 from huggingface_hub import HfApi, hf_hub_download
 from werkzeug.utils import secure_filename
+import random
 
 app = Flask(__name__)
 app.secret_key = 'supersecretkey'  # Замените на безопасный ключ в продакшене
@@ -228,8 +229,8 @@ def video_feed():
             .sidebar { position: fixed; left: -220px; top: 0; width: 200px; height: 100%; background: #fff; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); transition: left 0.3s; z-index: 1000; }
             .sidebar.active { left: 0; }
             .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
-            .video-item { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; }
-            .video-item img { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
+            .video-item { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; position: relative; }
+            .video-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
             .auth-links, .upload-btn, .logout-btn, .profile-link { display: block; margin: 10px 0; padding: 10px; background: #3b82f6; color: white; text-align: center; text-decoration: none; border-radius: 8px; }
             .logout-btn { background: #ef4444; }
             .profile-link { background: #10b981; }
@@ -241,7 +242,7 @@ def video_feed():
                 .menu-btn { display: block; }
                 .video-grid { grid-template-columns: 1fr; }
                 .video-item { padding: 10px; }
-                .video-item img { height: 150px; }
+                .video-preview { height: 150px; }
             }
         </style>
     </head>
@@ -263,7 +264,9 @@ def video_feed():
             <div class="video-grid">
                 {% for video in videos %}
                 <a href="{{ url_for('video_page', video_id=video['id']) }}" class="video-item">
-                    <img src="https://via.placeholder.com/300x200?text={{ video['title'] }}" alt="{{ video['title'] }}">
+                    <video class="video-preview" preload="metadata" muted>
+                        <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/videos/{{ video['filename'] }}" type="video/mp4">
+                    </video>
                     <h2>{{ video['title'] }}</h2>
                     <p>{{ video['description'] }}</p>
                     <p>Загрузил: {{ video['uploader'] }} | {{ video['upload_date'] }}</p>
@@ -275,11 +278,21 @@ def video_feed():
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
+            document.addEventListener('DOMContentLoaded', function() {
+                const videos = document.querySelectorAll('.video-preview');
+                videos.forEach(video => {
+                    video.addEventListener('loadedmetadata', function() {
+                        const duration = video.duration;
+                        const randomTime = Math.random() * duration;
+                        video.currentTime = randomTime;
+                    });
+                });
+            });
         </script>
     </body>
     </html>
     '''
-    return render_template_string(html, videos=videos, is_authenticated=is_authenticated, username=username)
+    return render_template_string(html, videos=videos, is_authenticated=is_authenticated, username=username, repo_id=REPO_ID)
 
 # Страница отдельного видео
 @app.route('/video/<video_id>')
@@ -388,7 +401,7 @@ def profile():
             .container { max-width: 800px; margin: 0 auto; padding-left: 220px; transition: padding-left 0.3s; }
             .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
             .video-item { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
-            .video-item img { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
+            .video-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
             .upload-btn, .delete-btn, .profile-link, .logout-btn { display: block; margin: 10px 0; padding: 10px; background: #3b82f6; color: white; text-decoration: none; border-radius: 8px; }
             .delete-btn { background: #ef4444; border: none; cursor: pointer; }
             .profile-link { background: #10b981; }
@@ -401,7 +414,7 @@ def profile():
                 .menu-btn { display: block; }
                 .video-grid { grid-template-columns: 1fr; }
                 .video-item { padding: 10px; }
-                .video-item img { height: 150px; }
+                .video-preview { height: 150px; }
                 .upload-btn, .delete-btn { font-size: 14px; padding: 8px; }
             }
         </style>
@@ -423,7 +436,9 @@ def profile():
                     {% for video in user_videos %}
                     <div class="video-item">
                         <a href="{{ url_for('video_page', video_id=video['id']) }}">
-                            <img src="https://via.placeholder.com/300x200?text={{ video['title'] }}" alt="{{ video['title'] }}">
+                            <video class="video-preview" preload="metadata" muted>
+                                <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/videos/{{ video['filename'] }}" type="video/mp4">
+                            </video>
                             <h3>{{ video['title'] }}</h3>
                         </a>
                         <p>{{ video['description'] }}</p>
@@ -443,11 +458,21 @@ def profile():
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
+            document.addEventListener('DOMContentLoaded', function() {
+                const videos = document.querySelectorAll('.video-preview');
+                videos.forEach(video => {
+                    video.addEventListener('loadedmetadata', function() {
+                        const duration = video.duration;
+                        const randomTime = Math.random() * duration;
+                        video.currentTime = randomTime;
+                    });
+                });
+            });
         </script>
     </body>
     </html>
     '''
-    return render_template_string(html, username=username, user_videos=user_videos)
+    return render_template_string(html, username=username, user_videos=user_videos, repo_id=REPO_ID)
 
 # Страница загрузки видео
 @app.route('/upload', methods=['GET', 'POST'])