feat: shorts opens fullscreen TikTok feed (swipe between shorts) + 9:16 crop center

app_wrapper.py

@@ -1,30 +1,37 @@
-"""Entry point that adds shorts carousel + TikTok-style article video, then imports app."""
-import sys, os
+"""Entry point that adds shorts TikTok feed + carousel, then imports app."""
+import sys, os, re as _re
 
-# 1. First import shorts_carousel module
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
-from shorts_carousel import scrape_24h_news_shorts, render_shorts_carousel, SHORTS_CSS
+from shorts_carousel import scrape_24h_news_shorts, render_shorts_carousel, SHORTS_CSS, _extract_24h_video_url
 
-# 2. Now import and monkey-patch app
 import app
 
-# Extra CSS for TikTok-style article video (9:16)
-TIKTOK_ARTICLE_CSS = """
-/* TikTok-style video in article (9:16) */
-.bdp-tiktok-article-video{position:relative;width:100%;max-width:400px;margin:14px auto;aspect-ratio:9/16;background:#000;border-radius:14px;overflow:hidden}
-.bdp-tiktok-article-video video{width:100%;height:100%;object-fit:contain;display:block}
-.bdp-tiktok-article-video .tiktok-unmute-hint{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:5px 10px;border-radius:14px;cursor:pointer;z-index:4}
-.bdp-tiktok-article-video .tiktok-seek-controls{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;gap:30px;z-index:4}
-.bdp-tiktok-article-video .tiktok-seek-btn{background:rgba(0,0,0,.4);color:#fff;border:none;padding:6px 12px;border-radius:16px;font-size:11px;cursor:pointer;backdrop-filter:blur(4px)}
+# ══ Extra CSS ══
+SHORTS_TIKTOK_CSS = """
+/* Shorts TikTok Feed (9:16 fullscreen) */
+.shorts-tiktok-container{width:100%;background:#000;position:relative;height:calc(100vh - 60px);max-height:900px;min-height:500px}
+.shorts-tiktok-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
+.shorts-tiktok-feed::-webkit-scrollbar{display:none}
+.shorts-slide{height:calc(100vh - 60px);max-height:900px;min-height:500px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center;justify-content:center;background:#000}
+.shorts-slide video{width:100%;height:100%;object-fit:cover;display:block}
+.shorts-slide .tiktok-bottom{position:absolute;bottom:0;left:0;right:0;padding:16px 14px 24px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}
+.shorts-slide .tiktok-title{color:#fff;font-size:14px;font-weight:600;margin:4px 0 8px;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.shorts-slide .tiktok-counter{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:3px 10px;border-radius:12px;z-index:4}
+.shorts-slide .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}
+.shorts-slide .shorts-seek{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:40px;z-index:6;opacity:0;transition:opacity .3s;pointer-events:none}
+.shorts-slide.show-controls .shorts-seek{opacity:1;pointer-events:auto}
+.shorts-seek button{background:rgba(0,0,0,.5);color:#fff;border:none;padding:8px 14px;border-radius:20px;font-size:12px;cursor:pointer;font-weight:600}
+.shorts-slide .shorts-pause{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;line-height:70px;text-align:center}
+.shorts-slide.paused .shorts-pause{display:block}
+.shorts-back-btn{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.15);color:#fff;border:none;padding:6px 16px;border-radius:18px;font-size:12px;cursor:pointer;z-index:10;backdrop-filter:blur(4px)}
 """
 
-# Patch CSS
 if "vslide-shorts-item" not in app.CSS:
     app.CSS += SHORTS_CSS
-if "bdp-tiktok-article-video" not in app.CSS:
-    app.CSS += TIKTOK_ARTICLE_CSS
+if "shorts-tiktok-container" not in app.CSS:
+    app.CSS += SHORTS_TIKTOK_CSS
 
-# Patch render_homepage_html to include shorts carousel
+# ══ Patch render_homepage_html ══
 _orig_render_homepage = app.render_homepage_html
 def _patched_render_homepage(articles, *args, **kwargs):
     html = _orig_render_homepage(articles, *args, **kwargs)
@@ -44,41 +51,199 @@ def _patched_render_homepage(articles, *args, **kwargs):
     return html
 app.render_homepage_html = _patched_render_homepage
 
-# Patch render_article_html: when 24h article has video, show in TikTok 9:16 style
-_orig_render_article = app.render_article_html
-def _patched_render_article(article):
-    html = _orig_render_article(article)
-    # Only patch 24h articles that have video
-    if article.get("source") == "24h" and any(item.get("type") == "video" for item in article.get("body", [])):
-        # Replace standard video-wrap with TikTok 9:16 container
-        html = html.replace(
-            '<div class="bdp-video-wrap">',
-            '<div class="bdp-tiktok-article-video">'
-        )
-        # Add seek controls and unmute hint after each video tag
-        # Find video tags and add controls
-        import re as _re
-        def _add_controls(match):
-            video_html = match.group(0)
-            controls = (
-                '<div class="tiktok-unmute-hint" onclick="var v=this.parentElement.querySelector(\'video\');v.muted=!v.muted;this.textContent=v.muted?\'🔇 Bật tiếng\':\'🔊 Đang phát\'">🔇 Bật tiếng</div>'
-                '<div class="tiktok-seek-controls">'
-                '<button class="tiktok-seek-btn" onclick="var v=this.closest(\'.bdp-tiktok-article-video\').querySelector(\'video\');v.currentTime=Math.max(0,v.currentTime-10)">⏪ 10s</button>'
-                '<button class="tiktok-seek-btn" onclick="var v=this.closest(\'.bdp-tiktok-article-video\').querySelector(\'video\');v.currentTime=Math.min(v.duration||9999,v.currentTime+10)">10s ⏩</button>'
-                '</div>'
-            )
-            return video_html + controls
-        html = _re.sub(r'</video>', lambda m: '</video>' + 
-            '<div class="tiktok-unmute-hint" onclick="var v=this.parentElement.querySelector(\'video\');v.muted=!v.muted;this.textContent=v.muted?\'🔇 Bật tiếng\':\'🔊 Đang phát\'">🔇 Bật tiếng</div>'
-            '<div class="tiktok-seek-controls">'
-            '<button class="tiktok-seek-btn" onclick="var v=this.closest(\'.bdp-tiktok-article-video\').querySelector(\'video\');v.currentTime=Math.max(0,v.currentTime-10)">⏪ 10s</button>'
-            '<button class="tiktok-seek-btn" onclick="var v=this.closest(\'.bdp-tiktok-article-video\').querySelector(\'video\');v.currentTime=Math.min(v.duration||9999,v.currentTime+10)">10s ⏩</button>'
-            '</div>',
-            html, count=1)
-    return html
-app.render_article_html = _patched_render_article
+# ══ Patch read_article: when 24h article → render as shorts TikTok feed ══
+_orig_read_article = app.read_article
+def _patched_read_article(url):
+    if not url or url == "#" or len(url) < 10:
+        return "<p>Không tìm thấy bài viết.</p>"
+    # Check if this is a 24h article opened from shorts - render TikTok feed
+    if "24h.com.vn" in url:
+        return _render_shorts_tiktok_feed(url)
+    return _orig_read_article(url)
+
+def _render_shorts_tiktok_feed(current_url):
+    """Render a TikTok-style fullscreen feed of shorts videos.
+    Shows the clicked video first, then others from the shorts list."""
+    from concurrent.futures import ThreadPoolExecutor, as_completed
+    
+    # Get all shorts
+    try:
+        all_shorts = scrape_24h_news_shorts()[:15]
+    except:
+        all_shorts = []
+    
+    if not all_shorts:
+        return _orig_read_article(current_url)
+    
+    # Fetch video URLs in parallel
+    def _fetch_video(art):
+        vid = _extract_24h_video_url(art["link"])
+        if vid:
+            return {"title": art["title"], "link": art["link"], "src": vid["src"],
+                    "poster": vid["poster"], "vtype": vid["vtype"]}
+        return None
+    
+    videos = []
+    with ThreadPoolExecutor(max_workers=6) as ex:
+        futures = {ex.submit(_fetch_video, a): a for a in all_shorts}
+        for f in as_completed(futures):
+            try:
+                r = f.result()
+                if r:
+                    videos.append(r)
+            except:
+                pass
+    
+    if not videos:
+        return _orig_read_article(current_url)
+    
+    # Reorder: put current video first
+    current_aid = app.make_id(current_url)
+    ordered = []
+    rest = []
+    for v in videos:
+        if app.make_id(v["link"]) == current_aid:
+            ordered.insert(0, v)
+        else:
+            rest.append(v)
+    ordered.extend(rest)
+    
+    # Build TikTok feed HTML
+    slides = []
+    for vi, v in enumerate(ordered):
+        poster = app.safe_url(v.get("poster", ""))
+        poster_attr = f' poster="{poster}"' if poster else ""
+        vsrc = v["src"]
+        vtype = v.get("vtype", "hls")
+        aid = app.make_id(v["link"])
+        sl = app.slug(v["title"])
+        share_js = f"event.stopPropagation();window.bdpShareHash('{app.esc(v['title'])}','{sl}','{aid}')"
+        
+        if vtype == "hls":
+            video_tag = f'<video class="shorts-video" playsinline preload="metadata"{poster_attr} data-hls-src="{vsrc}" muted loop></video>'
+        else:
+            video_tag = f'<video class="shorts-video" playsinline preload="metadata"{poster_attr} muted loop><source src="{app.safe_url(vsrc)}" type="video/mp4"></video>'
+        
+        slides.append(f'''<div class="shorts-slide" data-index="{vi}">
+{video_tag}
+<div class="shorts-pause">\u25b6</div>
+<div class="shorts-seek">
+<button onclick="event.stopPropagation();var v=this.closest('.shorts-slide').querySelector('video');v.currentTime=Math.max(0,v.currentTime-10)">\u23ea 10s</button>
+<button onclick="event.stopPropagation();var v=this.closest('.shorts-slide').querySelector('video');v.currentTime=Math.min(v.duration||9999,v.currentTime+10)">10s \u23e9</button>
+</div>
+<div class="tiktok-bottom">
+<p class="tiktok-title">{v["title"]}</p>
+<div class="tiktok-actions">
+<button class="tiktok-action-btn" onclick="{share_js}">\U0001f4e4 Chia s\u1ebb</button>
+</div>
+</div>
+<div class="tiktok-unmute-hint" onclick="var f=this.closest('.shorts-tiktok-feed');var vd=this.closest('.shorts-slide').querySelector('video');vd.muted=!vd.muted;var m=vd.muted;f.querySelectorAll('video').forEach(function(x){{x.muted=m}});f.querySelectorAll('.tiktok-unmute-hint').forEach(function(h){{h.textContent=m?'\U0001f507 B\u1eadt ti\u1ebfng':'\U0001f50a \u0110ang ph\u00e1t'}});">\U0001f507 B\u1eadt ti\u1ebfng</div>
+<span class="tiktok-counter">{vi+1}/{len(ordered)}</span>
+</div>''')
+    
+    back_btn = '<button class="shorts-back-btn" onclick="document.querySelector(\'[id=\\\'btn-read-article\\\'] button,button:has(+ [id=\\\'btn-read-article\\\'])\')?.click();var bb=document.querySelectorAll(\'button\');bb.forEach(function(b){if(b.textContent.indexOf(\'Quay\')>-1)b.click()});">\u2190 Quay l\u1ea1i</button>'
+    
+    return f'''<div class="shorts-tiktok-container" id="shorts-tiktok-feed">
+{back_btn}
+<div class="shorts-tiktok-feed">{''.join(slides)}</div>
+</div>'''
+
+app.read_article = _patched_read_article
+
+# ══ Add JS for shorts TikTok feed initialization ══
+_orig_js = app.JS_FUNC
+# Inject shorts feed init into the JS
+_shorts_js_patch = """
+/* ══ Shorts TikTok Feed ══ */
+function initShortsFeed(container){
+    if(container._sInit) return;
+    container._sInit=true;
+    var feed=container.querySelector('.shorts-tiktok-feed');
+    if(!feed) return;
+    var slides=feed.querySelectorAll('.shorts-slide');
+    if(!slides.length) return;
+
+    slides.forEach(function(sl){
+        var v=sl.querySelector('video[data-hls-src]');
+        if(v) initHlsVideo(v);
+        var v2=sl.querySelector('video:not([data-hls-src])');
+        if(v2&&!v2._initDone){v2._initDone=true;v2.load();}
+    });
+
+    var currentIdx=-1;
+    function tryPlay(v){var p=v.play();if(p&&p.catch)p.catch(function(){setTimeout(function(){v.play().catch(function(){});},500);});}
+
+    function activateSlide(idx){
+        if(idx===currentIdx) return;
+        slides.forEach(function(sl,i){
+            var v=sl.querySelector('video');
+            if(!v) return;
+            if(i===idx){v.currentTime=0;tryPlay(v);sl.classList.remove('paused');}
+            else{v.pause();sl.classList.remove('paused');}
+        });
+        currentIdx=idx;
+    }
+
+    var scrollT=null;
+    feed.addEventListener('scroll',function(){
+        if(scrollT)clearTimeout(scrollT);
+        scrollT=setTimeout(function(){
+            var rect=feed.getBoundingClientRect();
+            var center=rect.top+rect.height/2;
+            var best=-1,bestD=99999;
+            slides.forEach(function(sl,i){
+                var r=sl.getBoundingClientRect();
+                var d=Math.abs(r.top+r.height/2-center);
+                if(d<bestD){bestD=d;best=i;}
+            });
+            if(best>=0)activateSlide(best);
+        },150);
+    });
+
+    setTimeout(function(){activateSlide(0);},800);
+
+    slides.forEach(function(sl){
+        var v=sl.querySelector('video');
+        if(v){
+            var hideT=null;
+            v.addEventListener('click',function(e){
+                e.preventDefault();
+                if(sl.classList.contains('show-controls')){
+                    if(v.paused){tryPlay(v);sl.classList.remove('paused');}
+                    else{v.pause();sl.classList.add('paused');}
+                    sl.classList.remove('show-controls');
+                } else {
+                    sl.classList.add('show-controls');
+                    if(hideT)clearTimeout(hideT);
+                    hideT=setTimeout(function(){sl.classList.remove('show-controls');},3000);
+                }
+            });
+        }
+    });
+}
+"""
+
+# Inject before the MutationObserver section
+_orig_js = _orig_js.replace(
+    "new MutationObserver(function(muts)",
+    _shorts_js_patch + "\nnew MutationObserver(function(muts)"
+)
+
+# Add shorts feed detection to MutationObserver
+_orig_js = _orig_js.replace(
+    "n.querySelectorAll('.tiktok-fullscreen-container').forEach(initTikTokFullscreen);",
+    "n.querySelectorAll('.tiktok-fullscreen-container').forEach(initTikTokFullscreen);\n    n.querySelectorAll('.shorts-tiktok-container').forEach(initShortsFeed);\n    if(n.classList && n.classList.contains('shorts-tiktok-container')) initShortsFeed(n);"
+)
+
+# Add to setInterval too
+_orig_js = _orig_js.replace(
+    "document.querySelectorAll('.tiktok-fullscreen-container').forEach(initTikTokFullscreen);",
+    "document.querySelectorAll('.tiktok-fullscreen-container').forEach(initTikTokFullscreen);\n    document.querySelectorAll('.shorts-tiktok-container').forEach(initShortsFeed);"
+)
+
+app.JS_FUNC = _orig_js
 
-# Re-create the Gradio demo with patched CSS
+# Re-create demo with patched CSS and JS
 app.demo.css = app.CSS
 
 # Export demo for Gradio to find