fix: simpler JS scroll for video cards - no escape issues

app_wrapper.py

@@ -4,16 +4,13 @@ sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 from shorts_carousel import scrape_24h_news_shorts, render_shorts_carousel, SHORTS_CSS, _extract_24h_video_url
 import app
 
-# ══ Disable auto-refresh timer ══
 app.REFRESH_SECONDS = 9999
 
-# ══ CSS ══
 SHORTS_EXTRA_CSS = """
 .shorts-feed-mode .tiktok-video{object-fit:cover!important}
 .tiktok-fullscreen-container{width:100%!important;max-width:100%!important;border-radius:0!important;height:80vh!important;max-height:680px!important;min-height:400px!important}
 .tiktok-fullscreen-feed{height:100%!important}
 .tiktok-slide{height:80vh!important;max-height:680px!important;min-height:400px!important}
-/* Highlight video default 1:1 (square crop center) */
 .tiktok-fullscreen-container:not(.shorts-feed-mode) .tiktok-video{object-fit:cover!important}
 .tiktok-fullscreen-container.contain-mode .tiktok-video{object-fit:contain!important}
 .tiktok-fullheight-btn{position:absolute;bottom:70px;right:12px;background:rgba(255,255,255,.15);color:#fff;border:none;padding:6px 12px;border-radius:16px;font-size:11px;cursor:pointer;z-index:8;backdrop-filter:blur(6px)}
@@ -33,7 +30,6 @@ if "vslide-shorts-item" not in app.CSS: app.CSS += SHORTS_CSS
 if "shorts-feed-mode" not in app.CSS: app.CSS += SHORTS_EXTRA_CSS
 if "FULLWIDTH" not in app.CSS: app.CSS += FULLWIDTH_CSS
 
-# ══ Patches ══
 def _fixed_extract(url):
     vid=_extract_24h_video_url(url)
     if not vid:return []
@@ -63,7 +59,6 @@ app.render_homepage_html=_php
 _orig_vp=app.render_video_page_html
 def _pvp():
     html=_orig_vp()
-    # Add contain toggle button (default is 1:1 cover, button switches to contain)
     btn='<button class="tiktok-fullheight-btn" onclick="event.stopPropagation();var c=this.closest(\'.tiktok-fullscreen-container\');c.classList.toggle(\'contain-mode\');var on=c.classList.contains(\'contain-mode\');c.querySelectorAll(\'.tiktok-fullheight-btn\').forEach(function(b){b.classList.toggle(\'active\',on);b.textContent=on?\'\\u2922 1:1\':\'\\u2B07 Contain\';});">\u2B07 Contain</button>'
     return html.replace('<div class="tiktok-unmute-hint"',btn+'<div class="tiktok-unmute-hint"')
 app.render_video_page_html=_pvp
@@ -84,9 +79,7 @@ def _pra(url):
                 return [{"title":a["title"]+(f" (P{i+1})" if len(ps)>1 else ""),"link":a["link"],"img":a.get("img",""),"src":p,"poster":v["poster"],"vtype":"hls"} for i,p in enumerate(ps)]
             with ThreadPoolExecutor(8) as ex:
                 results=list(ex.map(_f,arts))
-            vids=[]
-            for r in results:
-                if r:vids.extend(r)
+            vids=[item for r in results if r for item in r]
             if vids:
                 ca=app.make_id(url);ordered=[v for v in vids if app.make_id(v["link"])==ca]+[v for v in vids if app.make_id(v["link"])!=ca]
                 return _btk(ordered,"24h")
@@ -103,9 +96,7 @@ def _pra(url):
                 return [{"title":a["title"],"link":a["link"],"img":a.get("img",""),"src":e["mp4"],"poster":e.get("poster",""),"vtype":"mp4"}]
             with ThreadPoolExecutor(6) as ex:
                 results=list(ex.map(_fb,bl))
-            vids=[]
-            for r in results:
-                if r:vids.extend(r)
+            vids=[item for r in results if r for item in r]
             if vids:
                 ca=app.make_id(url);ordered=[v for v in vids if app.make_id(v["link"])==ca]+[v for v in vids if app.make_id(v["link"])!=ca]
                 return _btk(ordered,"BDP")
@@ -113,7 +104,7 @@ def _pra(url):
 
 def _btk(ordered,sl):
     badge="bdp-badge-24h" if sl=="24h" else "bdp-badge-bdp"
-    is_shorts = sl=="24h"
+    is_shorts=sl=="24h"
     slides=[];cards=[]
     for vi,v in enumerate(ordered):
         po=app.safe_url(v.get("poster",""));pa=f' poster="{po}"' if po else ""
@@ -121,12 +112,13 @@ def _btk(ordered,sl):
         orig_url=app.esc(v["link"])
         sj=f"event.stopPropagation();window.bdpShareOriginal('{app.esc(v['title'])}','{orig_url}')"
         vt=f'<video class="tiktok-video" playsinline preload="metadata"{pa} data-hls-src="{vs}" muted loop></video>' if v.get("vtype")=="hls" else f'<video class="tiktok-video" playsinline preload="metadata"{pa} muted loop><source src="{app.safe_url(vs)}" type="video/mp4"></video>'
-        # Contain toggle (default = 1:1 cover crop)
         cb='<button class="tiktok-fullheight-btn" onclick="event.stopPropagation();var c=this.closest(\'.tiktok-fullscreen-container\');c.classList.toggle(\'contain-mode\');var on=c.classList.contains(\'contain-mode\');c.querySelectorAll(\'.tiktok-fullheight-btn\').forEach(function(b){b.classList.toggle(\'active\',on);b.textContent=on?\'\\u2922 1:1\':\'\\u2B07 Contain\';});">\u2B07 Contain</button>'
         slides.append(f'<div class="tiktok-slide" data-index="{vi}" data-aid="{aid}">{vt}<div class="tiktok-pause-icon">\u25b6</div><div class="tiktok-seek-controls"><button class="tiktok-seek-btn" onclick="event.stopPropagation();window.bdpSeek(this,-10)">\u23ea 10s</button><button class="tiktok-seek-btn" onclick="event.stopPropagation();window.bdpSeek(this,10)">10s \u23e9</button></div><div class="tiktok-bottom"><span class="bdp-badge {badge}">{sl}</span><p class="tiktok-title">{v["title"]}</p><div class="tiktok-actions"><button class="tiktok-action-btn" onclick="{sj}">\U0001f4e4 Chia s\u1ebb</button></div></div>{cb}<div class="tiktok-unmute-hint" onclick="window.bdpTikTokUnmute(this)">\U0001f507 B\u1eadt ti\u1ebfng</div><span class="tiktok-counter">{vi+1}/{len(ordered)}</span></div>')
         img=app.safe_url(v.get("img")or v.get("poster",""))
-        # Cards use JS scroll instead of bdpOpen (no page reload)
-        cards.append(f'<div class="bdp-card" onclick="event.stopPropagation();var sl=document.querySelector(\'[data-index=\\\'{vi}\\\']\');if(sl){{sl.scrollIntoView({{behavior:\\\'smooth\\\'}});window.scrollTo(0,0);}}"><div class="bdp-card-img"><img src="{img}" alt="" class="bdp-lazy-img"><div class="bdp-play-overlay">\u25b6</div></div><div class="bdp-card-body"><span class="bdp-badge {badge}">{sl}</span><h3 class="bdp-card-title">{v["title"]}</h3></div></div>')
+        # Click card scrolls to that slide index in the feed (no server reload)
+        cards.append(f'<div class="bdp-card" data-goto="{vi}" onclick="var f=document.querySelector(\'.tiktok-fullscreen-feed\');if(f){{var t=f.querySelectorAll(\'.tiktok-slide\')[{vi}];if(t){{t.scrollIntoView();window.scrollTo(0,0);}}}}">'
+            f'<div class="bdp-card-img"><img src="{img}" alt="" class="bdp-lazy-img"><div class="bdp-play-overlay">\u25b6</div></div>'
+            f'<div class="bdp-card-body"><span class="bdp-badge {badge}">{sl}</span><h3 class="bdp-card-title">{v["title"]}</h3></div></div>')
     grid=f'<div class="bdp-wrap"><div class="bdp-topbar"><span>\U0001f3ac Video</span><span>{len(ordered)} video</span></div><div class="bdp-grid">{"".join(cards)}</div></div>'
     mode_class="shorts-feed-mode" if is_shorts else ""
     return f'<div class="tiktok-fullscreen-container {mode_class}" id="tiktok-fullscreen-feed"><div class="tiktok-fullscreen-feed">{"".join(slides)}</div></div>{grid}'