Update app.py

app.py

@@ -1,230 +1,175 @@
 import os
+import glob
 import urllib.parse
-from urllib.parse import quote
 import gradio as gr
 
 DEFAULT_DIR = "/bucket_data"
 
 # ----------------------------
-# SCANNER (UNCHANGED CORE)
+# BACKEND SCANNER (UNCHANGED)
 # ----------------------------
 def load_live_cctv_dashboard():
-    print("\n⚡ SCAN START")
+    try:
+        print("\n⚡ Rocket-Loading local filesystem assets in a single chunk...")
+        search_path = os.path.join(DEFAULT_DIR, "**", "*")
+        files = glob.glob(search_path, recursive=True)
 
-    image_exts = (".png", ".jpg", ".jpeg", ".webp", ".gif")
-    video_exts = (".mp4", ".mkv", ".avi", ".mov", ".dav", ".ts")
+        image_exts = ('.png', '.jpg', '.jpeg', '.webp', '.gif')
+        video_exts = ('.mp4', '.mkv', '.avi', '.mov', '.dav', '.ts')
 
-    grouped_assets = {}
+        grouped_assets = {}
+        video_count = 0
+        image_count = 0
 
-    for root, dirs, files in os.walk(DEFAULT_DIR):
+        for f in files:
+            if os.path.isdir(f) or ".gitattributes" in f or f.lower().endswith('.7z'):
+                continue
 
-        video_stems = {
-            os.path.splitext(f)[0]
-            for f in files
-            if f.lower().endswith(video_exts)
-        }
+            relative_path = f.replace(f"{DEFAULT_DIR}/", "")
 
-        dirs[:] = [d for d in dirs if d not in video_stems]
+            folder_name = relative_path.split("/")[0] if "/" in relative_path else "Root Directory"
 
-        for filename in files:
-            lower = filename.lower()
+            grouped_assets.setdefault(folder_name, {"images": [], "videos": []})
 
-            if lower.endswith(".7z") or filename == ".gitattributes":
-                continue
+            encoded_path = urllib.parse.quote(os.path.abspath(f))
 
-            full_path = os.path.join(root, filename)
-            relative_path = os.path.relpath(full_path, DEFAULT_DIR).replace("\\", "/")
+            if f.lower().endswith(video_exts):
+                video_count += 1
+                print("added video:", encoded_path)
 
-            folder = relative_path.split("/")[0] if "/" in relative_path else "Root"
-
-            grouped_assets.setdefault(folder, {"videos": [], "images": []})
+                grouped_assets[folder_name]["videos"].append({
+                    "name": os.path.basename(f),
+                    "video_url": encoded_path
+                })
 
-            encoded = quote(relative_path, safe="/")
+            elif f.lower().endswith(image_exts):
+                image_count += 1
 
-            if lower.endswith(video_exts):
-                print("VIDEO:", encoded)
-                grouped_assets[folder]["videos"].append({
-                    "name": filename,
-                    "video_url": encoded
+                grouped_assets[folder_name]["images"].append({
+                    "name": os.path.basename(f),
+                    "image_url": encoded_path
                 })
 
-            elif lower.endswith(image_exts):
-                grouped_assets[folder]["images"].append({
-                    "name": filename,
-                    "image_url": encoded
-                })
+        print(f"✅ Finished: {video_count} videos, {image_count} images")
+        return grouped_assets
 
-    print("⚡ SCAN END\n")
-    return grouped_assets
+    except Exception as e:
+        print("❌ Scan error:", e)
+        return {}
 
 
 # ----------------------------
-# JS: FIXED THUMB HOVER LAYER
+# ONLY FIXED THUMB HOVER JS
 # ----------------------------
 custom_js = """
-function initThumb(placeholder) {
-
-    if (placeholder.dataset.thumbInit === "1") return;
-    const base = placeholder.dataset.thumbBase;
-    if (!base) return;
-
-    placeholder.dataset.thumbInit = "1";
-    placeholder.style.position = "relative";
-    placeholder.style.overflow = "hidden";
-
-    // MAIN IMAGE (THUMBNAIL LAYER - ALWAYS TOP)
-    let img = placeholder.querySelector(".thumb-layer");
-
-    if (!img) {
-        img = document.createElement("img");
-        img.className = "thumb-layer";
-        img.style.cssText = `
-            position:absolute;
-            inset:0;
-            width:100%;
-            height:100%;
-            object-fit:cover;
-            z-index:10;
-            pointer-events:none;
-            transition: opacity 0.3s ease;
-        `;
-        placeholder.appendChild(img);
-    }
-
-    // CONTENT LAYER (icons/text BELOW thumbnail)
-    placeholder.querySelectorAll("span").forEach(el => {
-        el.style.position = "relative";
-        el.style.zIndex = "2";
-    });
+(function () {
+
+    function initThumb(el) {
+        if (!el || el.dataset.thumbInit === "1") return;
+
+        const base = el.dataset.thumbBase;
+        if (!base) return;
+
+        el.dataset.thumbInit = "1";
+
+        let img = el.querySelector("img.thumb");
+        if (!img) {
+            img = document.createElement("img");
+            img.className = "thumb";
+            img.style.cssText = `
+                position:absolute;
+                inset:0;
+                width:100%;
+                height:100%;
+                object-fit:cover;
+                opacity:0;
+                transition:opacity 0.2s ease;
+                pointer-events:none;
+            `;
+            el.style.position = "relative";
+            el.appendChild(img);
+        }
 
-    // load frames
-    let frame = 1;
-    function setFrame(i){
-        img.src = `${base}/thumbnail${i}.webp`;
-    }
+        img.src = `${base}/thumbnail1.webp`;
 
-    setFrame(1);
+        let i = 1;
+        let interval = null;
 
-    const interval = setInterval(() => {
-        frame = frame % 5 + 1;
-        setFrame(frame);
-    }, 2000);
+        el.addEventListener("mouseenter", () => {
+            if (interval) return;
 
-    placeholder.dataset.interval = interval;
-}
+            interval = setInterval(() => {
+                i = (i % 5) + 1;
+                img.src = `${base}/thumbnail${i}.webp`;
+                img.style.opacity = 1;
+            }, 900);
+        });
 
-const observer = new IntersectionObserver(entries => {
-    entries.forEach(e => {
-        const el = e.target;
+        el.addEventListener("mouseleave", () => {
+            clearInterval(interval);
+            interval = null;
+            img.style.opacity = 0;
+        });
+    }
 
-        if (e.isIntersecting) {
-            initThumb(el);
-        } else {
-            if (el.dataset.interval) clearInterval(el.dataset.interval);
-            el.dataset.thumbInit = "0";
-        }
-    });
-}, { rootMargin: "200px", threshold: 0.1 });
+    function scan() {
+        document.querySelectorAll(".video-placeholder").forEach(initThumb);
+    }
 
-function scan(){
-    document.querySelectorAll(".video-placeholder").forEach(el => {
-        observer.observe(el);
-    });
-}
+    const observer = new MutationObserver(scan);
 
-if (document.readyState === "loading")
     document.addEventListener("DOMContentLoaded", scan);
-else scan();
+    observer.observe(document.body, { childList: true, subtree: true });
 
-new MutationObserver(scan).observe(document.body, { childList:true, subtree:true });
+})();
 """
 
 
 # ----------------------------
-# GRADIO UI
+# UI (UNCHANGED EXCEPT DATA ATTR ADDED)
 # ----------------------------
-with gr.Blocks(title="CCTV Viewer", js=custom_js) as demo:
+with gr.Blocks(title="CCTV Explorer", js=custom_js) as demo:
 
-    btn = gr.Button("Refresh")
+    refresh_btn = gr.Button("🔄 Load")
 
-    @gr.render(inputs=btn, triggers=[demo.load, btn.click])
-    def render():
+    @gr.render(inputs=refresh_btn, triggers=[demo.load, refresh_btn.click])
+    def render_ui():
+        assets = load_live_cctv_dashboard()
 
-        data = load_live_cctv_dashboard()
+        if not assets:
+            gr.Markdown("No data")
+            return
 
         html = []
 
-        for folder, media in data.items():
+        for folder, media in assets.items():
 
-            html.append(f"<h2 style='margin-top:20px'>📁 {folder}</h2>")
-
-            # ================= VIDEO GRID (3 PER ROW FIX) =================
-            if media["videos"]:
-                html.append("""
-                <div style="
-                    display:grid;
-                    grid-template-columns:repeat(3, 1fr);
-                    gap:16px;
-                    margin-bottom:30px;
-                ">
-                """)
+            html.append(f"<h2>📁 {folder}</h2>")
 
-                for v in media["videos"]:
+            for v in media["videos"]:
+                base = os.path.splitext(v["video_url"])[0]
+                base_url = f"https://kphfrepo-webdav.hf.space/{base.lstrip('/')}"
 
-                    video_path = v["video_url"]
-                    public_url = f"https://kphfrepo-webdav.hf.space/{video_path}"
-                    thumb_base = os.path.splitext(video_path)[0]
-                    thumb_url = f"https://kphfrepo-webdav.hf.space/{thumb_base}"
-
-                    html.append(f"""
-                    <div style="
-                        border:1px solid #ddd;
-                        border-radius:10px;
-                        overflow:hidden;
-                        height:260px;
+                html.append(f"""
+                <div class="video-placeholder"
+                     data-thumb-base="{base_url}"
+                     style="
+                        width:320px;
+                        height:180px;
+                        background:#111;
+                        margin:10px;
+                        display:inline-block;
                         position:relative;
-                        background:#000;
-                    ">
-
-                        <div class="video-placeholder"
-                            data-video-url="{public_url}"
-                            data-thumb-base="{thumb_url}"
-                            style="
-                                width:100%;
-                                height:100%;
-                                position:relative;
-                                cursor:pointer;
-                                background:#111827;
-                                display:flex;
-                                align-items:center;
-                                justify-content:center;
-                                color:white;
-                            ">
-
-                            <!-- BACKGROUND ICON (BEHIND THUMB) -->
-                            <span style="font-size:2rem; opacity:0.5;">▶</span>
-                            <span style="font-size:12px; margin-top:30px;">Hover preview</span>
-
-                        </div>
-                    </div>
-                    """)
-
-                html.append("</div>")
-
-            # ================= IMAGES =================
-            if media["images"]:
-                html.append("<div style='display:grid;grid-template-columns:repeat(auto-fill,120px);gap:10px;'>")
-
-                for img in media["images"]:
-                    url = f"https://kphfrepo-webdav.hf.space/{img['image_url']}"
-                    html.append(f"""
-                    <img src="{url}" style="width:120px;height:100px;object-fit:cover;border-radius:6px;" />
-                    """)
-
-                html.append("</div>")
+                        overflow:hidden;
+                        border-radius:8px;
+                        cursor:pointer;
+                     ">
+                    <span style="color:white;position:absolute;top:45%;left:45%;">▶</span>
+                </div>
+                """)
 
         gr.HTML("".join(html))
 
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False)
+    demo.launch()