Create app.py

app.py

@@ -0,0 +1,95 @@
+from flask import Flask, render_template_string, send_from_directory
+import os
+import glob
+
+app = Flask(__name__)
+
+VIDEO_DIR = "/data"
+
+def get_videos():
+    videos = []
+    if os.path.exists(VIDEO_DIR):
+        for ext in ['*.mp4', '*.mkv', '*.avi', '*.mov', '*.webm']:
+            videos.extend(glob.glob(os.path.join(VIDEO_DIR, ext)))
+    return sorted(videos)
+
+HTML_TEMPLATE = """
+<!DOCTYPE html>
+<html>
+<head>
+    <title>🎬 Premium Capcut Course</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: system-ui, sans-serif; background: #0f0f1a; color: #fff; padding: 1rem; }
+        .header { background: linear-gradient(135deg, #1a1a2e, #16213e); padding: 1.5rem; text-align: center; border-bottom: 3px solid #00b4ff; }
+        .header h1 { color: #00b4ff; font-size: 2rem; }
+        .container { max-width: 1200px; margin: 0 auto; padding: 1rem; display: flex; flex-wrap: wrap; gap: 1.5rem; }
+        .player-wrapper { flex: 3; min-width: 300px; background: #000; border-radius: 1rem; overflow: hidden; }
+        .player-wrapper video { width: 100%; height: auto; display: block; }
+        .playlist { flex: 1; min-width: 200px; background: #1a1a2e; border-radius: 1rem; padding: 1rem; max-height: 500px; overflow-y: auto; }
+        .playlist h3 { color: #00b4ff; margin-bottom: 1rem; }
+        .playlist button { display: block; width: 100%; padding: 0.75rem; margin-bottom: 0.5rem; background: #2a2a4e; color: #fff; border: none; border-radius: 0.5rem; cursor: pointer; text-align: left; font-size: 0.9rem; }
+        .playlist button:hover { background: #00b4ff; color: #000; }
+        .playlist button.active { background: #00b4ff; color: #000; }
+        .stats { text-align: center; padding: 1rem; color: #666; }
+        @media (max-width: 768px) { .container { flex-direction: column; } }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>🎬 Premium Capcut Editing Course</h1>
+        <p style="color: #888;">Master Video Editing Like a Pro</p>
+    </div>
+
+    <div class="container">
+        <div class="player-wrapper">
+            <video id="videoPlayer" controls autoplay style="width:100%; height:auto;">
+                <source src="" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+        <div class="playlist">
+            <h3>📚 Lectures</h3>
+            {% for video in videos %}
+            <button onclick="playVideo('{{ video }}')" class="{% if loop.first %}active{% endif %}">
+                ▶️ {{ video|replace('/data/', '')|replace('.mp4', '') }}
+            </button>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="stats">📊 Total Videos: {{ videos|length }}</div>
+
+    <script>
+        function playVideo(path) {
+            const player = document.getElementById('videoPlayer');
+            player.querySelector('source').src = path;
+            player.load();
+            player.play();
+
+            // Highlight active
+            document.querySelectorAll('.playlist button').forEach(b => b.classList.remove('active'));
+            document.querySelectorAll('.playlist button').forEach(b => {
+                if (b.textContent.includes(path.replace('/data/', ''))) {
+                    b.classList.add('active');
+                }
+            });
+        }
+    </script>
+</body>
+</html>
+"""
+
+@app.route('/')
+def index():
+    videos = get_videos()
+    return render_template_string(HTML_TEMPLATE, videos=videos)
+
+@app.route('/data/<path:filename>')
+def serve_video(filename):
+    return send_from_directory('/data', filename)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)