Update app.py

app.py

@@ -1,95 +1,428 @@
-from flask import Flask, render_template_string, send_from_directory
+from flask import Flask, request, jsonify, render_template_string, send_from_directory
 import os
 import glob
+import re
 
 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>
+<html lang="en">
 <head>
-    <title>🎬 Premium Capcut Course</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🔥 PREMIUM CAPCUT COURSE 🔥</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <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; } }
+        body {
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            background: #0a0a15;
+            color: #fff;
+            min-height: 100vh;
+        }
+        /* ===== HEADER ===== */
+        .header {
+            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%);
+            padding: 2rem 1rem;
+            text-align: center;
+            border-bottom: 3px solid #00f5ff;
+            position: relative;
+            overflow: hidden;
+        }
+        .header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle at center, rgba(0, 245, 255, 0.05) 0%, transparent 70%);
+            animation: glow 10s infinite;
+        }
+        @keyframes glow {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .header h1 {
+            font-size: 2.8rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, #00f5ff, #00b4ff, #ff6b6b);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            position: relative;
+            z-index: 1;
+        }
+        .header p {
+            color: #888;
+            font-size: 1.1rem;
+            margin-top: 0.5rem;
+            position: relative;
+            z-index: 1;
+        }
+        .header .badge {
+            display: inline-block;
+            background: #00f5ff20;
+            border: 1px solid #00f5ff;
+            color: #00f5ff;
+            padding: 0.25rem 1.2rem;
+            border-radius: 2rem;
+            font-size: 0.8rem;
+            margin-top: 0.5rem;
+            position: relative;
+            z-index: 1;
+        }
+        /* ===== CONTAINER ===== */
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            gap: 2rem;
+        }
+        /* ===== VIDEO PLAYER ===== */
+        .player-wrapper {
+            background: #000;
+            border-radius: 1.5rem;
+            overflow: hidden;
+            border: 1px solid #1a1a3e;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+            position: relative;
+        }
+        .player-wrapper video {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        .video-info {
+            padding: 1rem 1.5rem;
+            background: #0f0f1a;
+            border-top: 1px solid #1a1a3e;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .video-info .title {
+            font-weight: 600;
+            color: #00f5ff;
+            font-size: 1.1rem;
+        }
+        .video-info .counter {
+            color: #666;
+            font-size: 0.85rem;
+        }
+        /* ===== PLAYLIST ===== */
+        .playlist {
+            background: #0f0f1a;
+            border-radius: 1.5rem;
+            border: 1px solid #1a1a3e;
+            padding: 1.5rem;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        .playlist::-webkit-scrollbar { width: 4px; }
+        .playlist::-webkit-scrollbar-track { background: #0f0f1a; }
+        .playlist::-webkit-scrollbar-thumb { background: #00f5ff; border-radius: 2rem; }
+        .playlist h3 {
+            color: #00f5ff;
+            font-size: 1.2rem;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .playlist h3 span { color: #666; font-size: 0.8rem; font-weight: 400; }
+        .playlist-item {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            padding: 0.7rem 1rem;
+            margin-bottom: 0.5rem;
+            background: #1a1a2e;
+            border-radius: 0.75rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        .playlist-item:hover {
+            background: #22224a;
+            border-color: #00f5ff40;
+            transform: translateX(4px);
+        }
+        .playlist-item.active {
+            background: #00f5ff20;
+            border-color: #00f5ff;
+        }
+        .playlist-item .num {
+            color: #666;
+            font-size: 0.8rem;
+            font-weight: 600;
+            min-width: 28px;
+        }
+        .playlist-item .name {
+            flex: 1;
+            font-size: 0.9rem;
+            color: #ccc;
+        }
+        .playlist-item .duration {
+            color: #555;
+            font-size: 0.75rem;
+        }
+        .playlist-item .play-icon {
+            color: #00f5ff;
+            font-size: 0.9rem;
+        }
+        /* ===== STATS BAR ===== */
+        .stats-bar {
+            display: flex;
+            justify-content: center;
+            gap: 3rem;
+            padding: 1.5rem;
+            background: #0f0f1a;
+            border-radius: 1.5rem;
+            border: 1px solid #1a1a3e;
+            margin-top: 2rem;
+        }
+        .stats-bar .stat {
+            text-align: center;
+        }
+        .stats-bar .stat .num {
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: #00f5ff;
+        }
+        .stats-bar .stat .label {
+            color: #666;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 0.2rem;
+        }
+        /* ===== RESPONSIVE ===== */
+        @media (max-width: 992px) {
+            .grid { grid-template-columns: 1fr; }
+            .playlist { max-height: 300px; }
+            .header h1 { font-size: 2rem; }
+        }
+        @media (max-width: 600px) {
+            .stats-bar { flex-wrap: wrap; gap: 1rem; }
+            .header h1 { font-size: 1.5rem; }
+            .video-info { flex-direction: column; gap: 0.5rem; text-align: center; }
+        }
+        /* ===== FOOTER ===== */
+        .footer {
+            text-align: center;
+            padding: 2rem;
+            color: #444;
+            font-size: 0.85rem;
+            border-top: 1px solid #1a1a2e;
+            margin-top: 2rem;
+        }
+        .footer .dev {
+            color: #00f5ff;
+        }
     </style>
 </head>
 <body>
-    <div class="header">
-        <h1>🎬 Premium Capcut Editing Course</h1>
-        <p style="color: #888;">Master Video Editing Like a Pro</p>
-    </div>
+    <!-- HEADER -->
+    <header class="header">
+        <h1>🎬 Premium Capcut Course</h1>
+        <p>Master Video Editing — All Lectures in One Place</p>
+        <span class="badge"><i class="fas fa-bolt"></i> PREMIUM 4K</span>
+    </header>
 
+    <!-- MAIN -->
     <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 class="grid">
+            <!-- Player -->
+            <div class="player-wrapper">
+                <video id="videoPlayer" controls>
+                    <source src="" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <div class="video-info">
+                    <span class="title" id="currentTitle">🎬 Select a lecture</span>
+                    <span class="counter" id="videoCounter">0 / 0</span>
+                </div>
+            </div>
+
+            <!-- Playlist -->
+            <div class="playlist">
+                <h3>📚 Lectures <span id="totalCount"></span></h3>
+                <div id="playlistContainer"></div>
+            </div>
         </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 %}
+
+        <!-- Stats -->
+        <div class="stats-bar">
+            <div class="stat">
+                <div class="num" id="statTotal">0</div>
+                <div class="label">Total Lectures</div>
+            </div>
+            <div class="stat">
+                <div class="num" id="statSize">0 GB</div>
+                <div class="label">Total Size</div>
+            </div>
+            <div class="stat">
+                <div class="num">⚡</div>
+                <div class="label">Premium Quality</div>
+            </div>
+            <div class="stat">
+                <div class="num" id="statDuration">0m</div>
+                <div class="label">Total Duration</div>
+            </div>
         </div>
     </div>
 
-    <div class="stats">📊 Total Videos: {{ videos|length }}</div>
+    <!-- FOOTER -->
+    <footer class="footer">
+        Made with ❤️ by <span class="dev">Gopal Parmar</span> | Premium Capcut Course
+    </footer>
 
     <script>
-        function playVideo(path) {
+        // ===== DATA FROM API =====
+        let videos = [];
+
+        async function loadVideos() {
+            try {
+                const res = await fetch('/api/videos');
+                const data = await res.json();
+                videos = data.videos || [];
+                renderPlaylist();
+                updateStats();
+                if (videos.length > 0) {
+                    playVideo(0);
+                }
+            } catch (e) {
+                console.error('Error loading videos:', e);
+            }
+        }
+
+        function renderPlaylist() {
+            const container = document.getElementById('playlistContainer');
+            container.innerHTML = '';
+            document.getElementById('totalCount').textContent = `(${videos.length})`;
+
+            videos.forEach((v, i) => {
+                const div = document.createElement('div');
+                div.className = 'playlist-item';
+                div.dataset.index = i;
+                div.innerHTML = `
+                    <span class="num">${String(i+1).padStart(2, '0')}</span>
+                    <span class="name">${v.name.replace(/\.[^.]+$/, '')}</span>
+                    <span class="play-icon"><i class="fas fa-play-circle"></i></span>
+                `;
+                div.addEventListener('click', () => playVideo(i));
+                container.appendChild(div);
+            });
+        }
+
+        function playVideo(index) {
+            const video = videos[index];
+            if (!video) return;
+
             const player = document.getElementById('videoPlayer');
-            player.querySelector('source').src = path;
+            player.querySelector('source').src = video.url;
             player.load();
             player.play();
 
+            document.getElementById('currentTitle').textContent = `🎬 ${video.name.replace(/\.[^.]+$/, '')}`;
+            document.getElementById('videoCounter').textContent = `${index+1} / ${videos.length}`;
+
             // 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');
-                }
+            document.querySelectorAll('.playlist-item').forEach((el, i) => {
+                el.classList.toggle('active', i === index);
             });
         }
+
+        function updateStats() {
+            document.getElementById('statTotal').textContent = videos.length;
+            const totalSize = videos.reduce((acc, v) => acc + (v.size || 0), 0);
+            document.getElementById('statSize').textContent = (totalSize / (1024*1024*1024)).toFixed(1) + ' GB';
+            // Fake duration for demo
+            document.getElementById('statDuration').textContent = (videos.length * 12) + 'm';
+        }
+
+        // Keyboard shortcut: Next/Prev with Arrow keys
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                const current = document.querySelector('.playlist-item.active');
+                if (current) {
+                    const next = current.nextElementSibling;
+                    if (next) next.click();
+                }
+            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                const current = document.querySelector('.playlist-item.active');
+                if (current) {
+                    const prev = current.previousElementSibling;
+                    if (prev) prev.click();
+                }
+            }
+        });
+
+        // Load on page load
+        document.addEventListener('DOMContentLoaded', loadVideos);
     </script>
 </body>
 </html>
 """
 
+# ========== HELPERS ==========
+def get_videos():
+    videos = []
+    if not os.path.exists(VIDEO_DIR):
+        return videos
+    for ext in ['*.mp4', '*.mkv', '*.avi', '*.mov', '*.webm']:
+        videos.extend(glob.glob(os.path.join(VIDEO_DIR, ext)))
+    videos = sorted(videos)
+    result = []
+    for i, v in enumerate(videos):
+        size = os.path.getsize(v) if os.path.exists(v) else 0
+        result.append({
+            "id": i + 1,
+            "name": os.path.basename(v),
+            "url": f"/data/{os.path.basename(v)}",
+            "size": size,
+            "path": v
+        })
+    return result
+
+# ========== ROUTES ==========
 @app.route('/')
 def index():
-    videos = get_videos()
-    return render_template_string(HTML_TEMPLATE, videos=videos)
+    return render_template_string(HTML_TEMPLATE)
 
 @app.route('/data/<path:filename>')
 def serve_video(filename):
-    return send_from_directory('/data', filename)
+    return send_from_directory(VIDEO_DIR, filename, as_attachment=False)
+
+@app.route('/api/videos')
+def api_videos():
+    videos = get_videos()
+    return jsonify({
+        "total": len(videos),
+        "videos": videos,
+        "status": "success"
+    })
+
+@app.route('/api/video/<int:video_id>')
+def api_video(video_id):
+    videos = get_videos()
+    if 1 <= video_id <= len(videos):
+        return jsonify({
+            "video": videos[video_id - 1],
+            "status": "success"
+        })
+    return jsonify({"error": "Video not found"}), 404
+
+@app.route('/health')
+def health():
+    return jsonify({"status": "healthy", "videos": len(get_videos())})
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860, debug=False)