feat: 24h article videos render in TikTok 9:16 fullscreen mode

app_wrapper.py

@@ -1,4 +1,4 @@
-"""Entry point that adds shorts carousel then imports app."""
+"""Entry point that adds shorts carousel + TikTok-style article video, then imports app."""
 import sys, os
 
 # 1. First import shorts_carousel module
@@ -8,32 +8,34 @@ from shorts_carousel import scrape_24h_news_shorts, render_shorts_carousel, SHOR
 # 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)}
+"""
+
 # Patch CSS
 if "vslide-shorts-item" not in app.CSS:
     app.CSS += SHORTS_CSS
-
-# Patch fetch_homepage to include shorts
-_orig_fetch_homepage = app.fetch_homepage
-def _patched_fetch_homepage():
-    result = _orig_fetch_homepage()
-    return result
-app.fetch_homepage = _patched_fetch_homepage
+if "bdp-tiktok-article-video" not in app.CSS:
+    app.CSS += TIKTOK_ARTICLE_CSS
 
 # Patch render_homepage_html to include shorts carousel
 _orig_render_homepage = app.render_homepage_html
 def _patched_render_homepage(articles, *args, **kwargs):
     html = _orig_render_homepage(articles, *args, **kwargs)
-    # Fetch shorts and prepend carousel
     try:
         shorts = scrape_24h_news_shorts()[:15]
         shorts_html = render_shorts_carousel(shorts, app.esc, app.safe_url, app.make_id, app.slug)
         if shorts_html:
-            # Insert after bdp-wrap opening but before the video carousel
             insert_point = html.find('<div class="vslide-wrap">')
             if insert_point > 0:
                 html = html[:insert_point] + shorts_html + html[insert_point:]
             else:
-                # Insert at start of bdp-wrap content
                 insert_point = html.find('<div class="bdp-wrap">') + len('<div class="bdp-wrap">')
                 if insert_point > len('<div class="bdp-wrap">'):
                     html = html[:insert_point] + shorts_html + html[insert_point:]
@@ -42,6 +44,40 @@ 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
+
 # Re-create the Gradio demo with patched CSS
 app.demo.css = app.CSS