feat: icon category grid + auto-hide seek buttons + video slide→TikTok fix

app.py

@@ -37,6 +37,30 @@ CATEGORIES = {
     "🇻🇳 Bóng Đá VN":         "bdp::https://bongdaplus.vn/bong-da-viet-nam::Bóng Đá",
     "🔄 Chuyển Nhượng":        "bdp::https://bongdaplus.vn/tin-chuyen-nhuong::Bóng Đá",
 }
+
+# Mapping for icon grid: (icon, short_label, hash_slug)
+CAT_ICONS = [
+    ("🏠","Trang Chủ","trang-chu"),
+    ("🎬","Video","video"),
+    ("📰","Thời Sự","thoi-su"),
+    ("🌍","Thế Giới","the-gioi"),
+    ("💰","Kinh Doanh","kinh-doanh"),
+    ("💻","Công Nghệ","cong-nghe"),
+    ("🔬","Khoa Học","khoa-hoc"),
+    ("🎬","Giải Trí","giai-tri"),
+    ("🏥","Sức Khỏe","suc-khoe"),
+    ("🎓","Giáo Dục","giao-duc"),
+    ("✈️","Du Lịch","du-lich"),
+    ("⚽","Thể Thao","the-thao"),
+    ("⚽","Bóng Đá QT","bong-da-qt"),
+    ("🏴󠁧󠁢󠁥󠁮󠁧󠁿","Ngoại Hạng Anh","ngoai-hang-anh"),
+    ("🇪🇸","La Liga","la-liga"),
+    ("🏆","Champions League","champions-league"),
+    ("🇻🇳","Bóng Đá VN","bong-da-vn"),
+    ("🔄","Chuyển Nhượng","chuyen-nhuong"),
+]
+CAT_KEYS = list(CATEGORIES.keys())
+CAT_HASH_TO_KEY = {ci[2]: CAT_KEYS[i] for i, ci in enumerate(CAT_ICONS)}
 HOMEPAGE_SOURCES = [
     ("vne","https://vnexpress.net/thoi-su","Thời Sự"),
     ("vne","https://vnexpress.net/the-gioi","Thế Giới"),
@@ -480,7 +504,7 @@ def render_video_carousel_html(videos):
         link = v.get("link","#")
         title = v.get("title","")
         aid = make_id(link); sl = slug(title)
-        click_js = f"window.bdpOpen('{esc(link)}','{aid}','{sl}')"
+        click_js = f"window.bdpOpenTikTok('{esc(link)}','{aid}')"
         items.append(f'''<div class="vslide-item" onclick="{click_js}">
 <div class="vslide-thumb"><img src="{img}" alt="" class="bdp-lazy-img">
 <div class="vslide-play">▶</div><span class="vslide-badge vslide-badge-24h">24h</span></div>
@@ -722,7 +746,7 @@ footer,.built-with{display:none!important}
 .bdp-header h1{color:#fff;font-size:20px;margin:0;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.4)}
 .bdp-header p{color:rgba(255,255,255,.6);font-size:11px;margin:2px 0 0}
 @media(min-width:768px){.bdp-header h1{font-size:26px}.bdp-header{padding:20px}}
-.controls-row{padding:0 8px!important;background:#111!important}
+.controls-row{padding:0!important;background:#111!important;height:0!important;overflow:hidden!important;margin:0!important;opacity:0;pointer-events:none;position:absolute}
 .controls-row>div{background:#111!important;border:none!important}
 .controls-row label{color:#aaa!important;font-size:12px!important}
 .controls-row .wrap{border-color:#333!important;background:#1a1a1a!important}
@@ -830,15 +854,27 @@ footer,.built-with{display:none!important}
 .tiktok-unmute-hint{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:6px 12px;border-radius:18px;cursor:pointer;z-index:4;backdrop-filter:blur(4px);transition:opacity .3s}
 .tiktok-pause-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;font-size:28px;z-index:5;pointer-events:none;display:none;align-items:center;justify-content:center;line-height:70px;text-align:center}
 .tiktok-slide.paused .tiktok-pause-icon{display:block}
-.tiktok-seek-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:40px;z-index:6;pointer-events:auto}
-.tiktok-seek-btn{background:rgba(0,0,0,.4);color:#fff;border:none;padding:8px 14px;border-radius:20px;font-size:12px;cursor:pointer;backdrop-filter:blur(4px);font-weight:600;opacity:.7;transition:opacity .2s}
+.tiktok-seek-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:40px;z-index:6;pointer-events:auto;opacity:0;transition:opacity .3s;pointer-events:none}
+.tiktok-slide.show-controls .tiktok-seek-controls{opacity:1;pointer-events:auto}
+.tiktok-seek-btn{background:rgba(0,0,0,.4);color:#fff;border:none;padding:8px 14px;border-radius:20px;font-size:12px;cursor:pointer;backdrop-filter:blur(4px);font-weight:600;transition:opacity .2s}
 .tiktok-seek-btn:hover{opacity:1}
 .tiktok-seek-btn:active{transform:scale(.9)}
 .vslide-badge{position:absolute;top:6px;left:6px;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;z-index:2}
 .vslide-badge-24h{background:#e67e22;color:#fff}
-"""
 
-# ══════════════════════════════════════════════════════════════════════════════
+/* ══ Category Icon Grid ══ */
+.cat-grid-wrap{padding:6px 8px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#111}
+.cat-grid-wrap::-webkit-scrollbar{display:none}
+.cat-grid{display:flex;gap:6px;min-width:max-content}
+.cat-icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;padding:7px 4px 5px;border-radius:10px;cursor:pointer;transition:background .15s,transform .1s;background:#1a1a1a;border:1.5px solid transparent;user-select:none;-webkit-tap-highlight-color:transparent;text-decoration:none}
+.cat-icon-btn:hover{background:#252525;transform:scale(1.04)}
+.cat-icon-btn:active{transform:scale(.95)}
+.cat-icon-btn.active{background:#1a3a2a;border-color:#5cb87a}
+.cat-icon-emoji{font-size:22px;line-height:1.2}
+.cat-icon-label{font-size:9.5px;color:#aaa;margin-top:2px;white-space:nowrap;font-weight:500;text-align:center;max-width:68px;overflow:hidden;text-overflow:ellipsis}
+.cat-icon-btn.active .cat-icon-label{color:#5cb87a;font-weight:700}
+@media(min-width:768px){.cat-icon-btn{min-width:72px;padding:8px 6px 6px}.cat-icon-emoji{font-size:25px}.cat-icon-label{font-size:10.5px;max-width:76px}}
+"""
 HEAD_META = """
 <meta name="description" content="Tin tức tổng hợp nhanh nhất - VnExpress, BongDaPlus, 24h">
 <meta property="og:title" content="Tin Tức Việt Nam - Tổng Hợp">
@@ -882,6 +918,48 @@ window.bdpSlideScroll=function(dir,trackId){
     if(track){track.scrollBy({left:dir*260,behavior:'smooth'});}
 };
 
+/* ══ Category Icon Grid ══ */
+window.bdpSelectCat=function(catKey,hashSlug){
+    window.location.hash='#cat/'+hashSlug;
+    /* Update active state visually */
+    document.querySelectorAll('.cat-icon-btn').forEach(function(b){
+        b.classList.toggle('active',b.getAttribute('data-cat')===catKey);
+    });
+    /* Trigger Gradio dropdown change */
+    window._bdpSetDropdown(catKey);
+};
+
+window._bdpSetDropdown=function(catKey){
+    var container=document.getElementById('cat-dropdown');
+    if(!container){
+        var all=document.querySelectorAll('.controls-row .wrap, .controls-row [data-testid]');
+        container=all.length?all[0].closest('[id]'):null;
+    }
+    if(!container) container=document.querySelector('.controls-row');
+    if(!container) return;
+    /* Gradio 4+ dropdown: find the input, set value, fire events */
+    var inp=container.querySelector('input');
+    if(!inp) return;
+    try{
+        var nativeSet=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,'value').set;
+        nativeSet.call(inp,catKey);
+    }catch(e){inp.value=catKey;}
+    inp.dispatchEvent(new Event('input',{bubbles:true}));
+    inp.dispatchEvent(new Event('change',{bubbles:true}));
+    /* Force open dropdown and click the matching option */
+    inp.focus();
+    inp.dispatchEvent(new KeyboardEvent('keydown',{key:'ArrowDown',bubbles:true}));
+    setTimeout(function(){
+        var opts=document.querySelectorAll('[role="option"], li.item');
+        for(var i=0;i<opts.length;i++){
+            if(opts[i].textContent.trim()===catKey||opts[i].innerText.trim()===catKey){
+                opts[i].click();
+                return;
+            }
+        }
+    },150);
+};
+
 function gc(a){try{return JSON.parse(localStorage.getItem('bdp_cmt_'+a))||[];}catch(e){return[];}}
 function sc(a,c){try{localStorage.setItem('bdp_cmt_'+a,JSON.stringify(c));}catch(e){}}
 window.bdpRenderCmt=function(a){var l=document.getElementById('cmt-list-'+a);if(!l)return;var c=gc(a);if(!c.length){l.innerHTML='<div class="bdp-cmt-empty">Chưa có bình luận. Hãy là người đầu tiên!</div>';return;}var h='';for(var i=c.length-1;i>=0;i--){var x=c[i];h+='<div class="bdp-cmt-item"><span class="bdp-cmt-author">'+x.name+'</span><span class="bdp-cmt-date">'+x.date+'</span><div class="bdp-cmt-body">'+x.text.replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</div></div>';}l.innerHTML=h;};
@@ -907,39 +985,32 @@ window.bdpSeek=function(btn,sec){
 window.bdpOpenTikTok=function(url,aid){
     /* Switch to Video tab and scroll TikTok feed to matching video */
     try{localStorage.setItem('bdp_url_'+aid,url);}catch(e){}
-    /* Find the dropdown and switch to Video Tổng Hợp */
-    var dd=document.querySelector('.controls-row select, .controls-row input[role="listbox"]');
-    if(!dd){
-        /* Gradio dropdown: find the actual element */
-        var labels=document.querySelectorAll('.controls-row .wrap');
-        labels.forEach(function(l){
-            var inp=l.querySelector('input');
-            if(inp){
-                inp.value='🎬 Video Tổng Hợp';
-                inp.dispatchEvent(new Event('input',{bubbles:true}));
-                /* Also try clicking the option */
-                setTimeout(function(){
-                    var opts=document.querySelectorAll('[role="option"]');
-                    opts.forEach(function(o){if(o.textContent.indexOf('Video')>-1)o.click();});
-                },200);
-            }
-        });
-    }
-    /* After switching, scroll to the matching video in TikTok feed */
-    setTimeout(function(){
+    window.location.hash='#cat/video';
+    /* Update icon grid active state */
+    document.querySelectorAll('.cat-icon-btn').forEach(function(b){
+        b.classList.toggle('active',b.getAttribute('data-hash')==='video');
+    });
+    /* Trigger Gradio dropdown to Video Tổng Hợp */
+    window._bdpSetDropdown('\uD83C\uDFAC Video Tổng Hợp');
+    /* After content loads, scroll to the matching video in TikTok feed */
+    var attempts=0;
+    var finder=setInterval(function(){
+        attempts++;
         var feed=document.querySelector('.tiktok-fullscreen-feed');
-        if(!feed) return;
-        /* Find slide with matching link */
-        var slides=feed.querySelectorAll('.tiktok-slide');
-        var targetIdx=-1;
-        slides.forEach(function(sl,i){
-            if(sl.getAttribute('data-aid')===aid) targetIdx=i;
-        });
-        if(targetIdx>=0 && slides[targetIdx]){
-            slides[targetIdx].scrollIntoView({behavior:'smooth'});
+        if(feed){
+            clearInterval(finder);
+            var slides=feed.querySelectorAll('.tiktok-slide');
+            var targetIdx=-1;
+            slides.forEach(function(sl,i){
+                if(sl.getAttribute('data-aid')===aid) targetIdx=i;
+            });
+            if(targetIdx>=0 && slides[targetIdx]){
+                slides[targetIdx].scrollIntoView({behavior:'smooth'});
+            }
+            window.scrollTo({top:0,behavior:'smooth'});
         }
-        window.scrollTo({top:0,behavior:'smooth'});
-    },1500);
+        if(attempts>30) clearInterval(finder);
+    },300);
 };
 window.bdpTikTokUnmute=function(hint){
     var feed=hint.closest('.tiktok-fullscreen-feed')||hint.closest('.tiktok-feed');
@@ -1019,15 +1090,23 @@ function initTikTokFullscreen(container){
     /* Start first video after short delay for HLS init */
     setTimeout(function(){activateSlide(0);},800);
 
-    /* Tap to pause/play */
+    /* Tap to pause/play + show/hide seek controls */
     slides.forEach(function(sl){
         var v=sl.querySelector('.tiktok-video');
+        var hideTimer=null;
+        function showSeekControls(){
+            sl.classList.add('show-controls');
+            if(hideTimer) clearTimeout(hideTimer);
+            hideTimer=setTimeout(function(){sl.classList.remove('show-controls');},3000);
+        }
         if(v){
             v.addEventListener('click',function(e){
                 e.preventDefault();
                 if(v.paused){tryPlay(v);sl.classList.remove('paused');}
                 else{v.pause();sl.classList.add('paused');}
+                showSeekControls();
             });
+            v.addEventListener('touchstart',function(){showSeekControls();},{passive:true});
         }
     });
 }
@@ -1049,31 +1128,54 @@ setInterval(function(){
 },1500);
 
 var hh=window.location.hash;
-if(hh&&hh.startsWith('#/')){var ps=hh.slice(2).split('/');if(ps.length>=2){var aid=ps[ps.length-1];try{var url=localStorage.getItem('bdp_url_'+aid);if(url)setTimeout(function(){window.bdpOpen(url,aid,ps.slice(0,-1).join('/'));},2000);}catch(e){}}}
+if(hh&&hh.startsWith('#cat/')){
+    /* Category hash: #cat/video, #cat/thoi-su, etc. */
+    var catSlug=hh.slice(5);
+    var catMap={""" + ",".join(f"'{ci[2]}':'{esc(CAT_KEYS[i])}'" for i,ci in enumerate(CAT_ICONS)) + """};
+    if(catMap[catSlug]){
+        setTimeout(function(){
+            window._bdpSetDropdown(catMap[catSlug]);
+            document.querySelectorAll('.cat-icon-btn').forEach(function(b){
+                b.classList.toggle('active',b.getAttribute('data-hash')===catSlug);
+            });
+        },1500);
+    }
+} else if(hh&&hh.startsWith('#/')){var ps=hh.slice(2).split('/');if(ps.length>=2){var aid=ps[ps.length-1];try{var url=localStorage.getItem('bdp_url_'+aid);if(url)setTimeout(function(){window.bdpOpen(url,aid,ps.slice(0,-1).join('/'));},2000);}catch(e){}}}
 }
 """
 
 # ══════════════════════════════════════════════════════════════════════════════
+def _build_cat_grid_html():
+    """Build the category icon grid HTML."""
+    items = []
+    for i, (icon, label, hslug) in enumerate(CAT_ICONS):
+        cat_key = CAT_KEYS[i]
+        active = " active" if i == 0 else ""
+        click_js = f"window.bdpSelectCat('{esc(cat_key)}','{hslug}')"
+        items.append(f'<div class="cat-icon-btn{active}" data-cat="{esc(cat_key)}" data-hash="{hslug}" onclick="{click_js}"><span class="cat-icon-emoji">{icon}</span><span class="cat-icon-label">{label}</span></div>')
+    return f'<div class="cat-grid-wrap"><div class="cat-grid">{"".join(items)}</div></div>'
+
 with gr.Blocks(title="Tin Tức Việt Nam",css=CSS,head=HEAD_META,js=JS_FUNC,theme=gr.themes.Base(),fill_width=True) as demo:
     gr.HTML('<div class="bdp-header"><h1>📰 Tin Tức Việt Nam</h1><p>VnExpress · BongDaPlus · 24h · Thời sự · Thế giới · Kinh doanh · Công nghệ · Thể thao · Giải trí · Video</p></div>')
+    gr.HTML(_build_cat_grid_html())
     article_url=gr.Textbox(value="",visible=False,elem_id="article-url-input")
     with gr.Row(elem_classes=["controls-row"]):
-        cat=gr.Dropdown(choices=list(CATEGORIES.keys()),value="🏠 Trang Chủ (Nổi Bật)",label="Chuyên mục",scale=3,interactive=True)
+        cat=gr.Dropdown(choices=list(CATEGORIES.keys()),value="🏠 Trang Chủ (Nổi Bật)",label="Chuyên mục",scale=3,interactive=True,elem_id="cat-dropdown")
         ref_btn=gr.Button("🔄 Làm mới",variant="primary",scale=1)
-        back_btn=gr.Button("← Quay lại",variant="secondary",scale=1,visible=False)
+    back_btn=gr.Button("← Quay lại",variant="secondary",visible=False)
     news_list=gr.HTML()
     article_view=gr.HTML(visible=False)
     read_btn=gr.Button("Đọc",visible=False,elem_id="btn-read-article")
     def show_article(url):
         if not url or url=="#" or len(url)<10:
-            return gr.update(visible=True),gr.update(visible=False),gr.update(visible=False),gr.update(visible=False),""
-        return (gr.update(visible=False),gr.update(value=read_article(url),visible=True),gr.update(visible=False),gr.update(visible=True),"")
+            return gr.update(visible=True),gr.update(visible=False),gr.update(visible=False),""
+        return (gr.update(visible=False),gr.update(value=read_article(url),visible=True),gr.update(visible=True),"")
     def show_list(c):
-        return (gr.update(value=fetch_news_list(c),visible=True),gr.update(visible=False),gr.update(visible=True),gr.update(visible=False))
-    read_btn.click(fn=show_article,inputs=[article_url],outputs=[news_list,article_view,ref_btn,back_btn,article_url])
-    back_btn.click(fn=show_list,inputs=[cat],outputs=[news_list,article_view,ref_btn,back_btn])
-    ref_btn.click(fn=show_list,inputs=[cat],outputs=[news_list,article_view,ref_btn,back_btn])
-    cat.change(fn=show_list,inputs=[cat],outputs=[news_list,article_view,ref_btn,back_btn])
+        return (gr.update(value=fetch_news_list(c),visible=True),gr.update(visible=False),gr.update(visible=False))
+    read_btn.click(fn=show_article,inputs=[article_url],outputs=[news_list,article_view,back_btn,article_url])
+    back_btn.click(fn=show_list,inputs=[cat],outputs=[news_list,article_view,back_btn])
+    ref_btn.click(fn=show_list,inputs=[cat],outputs=[news_list,article_view,back_btn])
+    cat.change(fn=show_list,inputs=[cat],outputs=[news_list,article_view,back_btn])
     timer=gr.Timer(value=REFRESH_SECONDS,active=True)
     timer.tick(fn=fetch_news_list,inputs=cat,outputs=news_list)
     demo.load(fn=fetch_news_list,inputs=cat,outputs=news_list)