revert: app_wrapper.py back to previous version (before 3:4 change)

app_wrapper.py

@@ -8,12 +8,12 @@ import app
 
 # ══ CSS Patches ══
 SHORTS_EXTRA_CSS = """
-/* ALL TikTok feeds: video 3:4 crop center */
-.tiktok-fullscreen-container .tiktok-video{object-fit:cover!important}
+/* Shorts feed: video 9:16 crop center */
+.shorts-feed-mode .tiktok-video{object-fit:cover!important}
 /* TikTok feed fullwidth */
 .tiktok-fullscreen-container{width:100%!important;max-width:100%!important;border-radius:0!important}
-/* Fullheight toggle - switch back to contain */
-.tiktok-fullscreen-container.contain-mode .tiktok-video{object-fit:contain!important}
+/* Fullheight toggle for highlight */
+.tiktok-fullscreen-container.fullheight-mode .tiktok-video{object-fit:cover!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)}
 .tiktok-fullheight-btn.active{background:rgba(92,184,122,.5)}
 """
@@ -43,11 +43,21 @@ div[class*="svelte"]{padding-left:0!important;padding-right:0!important}
 
 if "vslide-shorts-item" not in app.CSS:
     app.CSS += SHORTS_CSS
-if "3:4 crop center" not in app.CSS:
+if "shorts-feed-mode" not in app.CSS:
     app.CSS += SHORTS_EXTRA_CSS
 if "FULLWIDTH: kill all Gradio padding" not in app.CSS:
     app.CSS += FULLWIDTH_CSS
 
+# ══ Override app._extract_24h_video_urls with fixed multi-part version ══
+def _fixed_extract_24h_video_urls(article_url):
+    vid = _extract_24h_video_url(article_url)
+    if not vid:
+        return []
+    all_parts = vid.get("all_parts", [vid["src"]])
+    poster = vid.get("poster", "")
+    return [{"src": p, "poster": poster, "vtype": "hls"} for p in all_parts]
+app._extract_24h_video_urls = _fixed_extract_24h_video_urls
+
 # ══ Fix homepage slider: bdpOpenTikTok → bdpOpen with 3 params ══
 _orig_render_video_slider = getattr(app, 'render_video_slider_html', None)
 if _orig_render_video_slider:
@@ -82,22 +92,11 @@ def _patched_render_homepage(articles, *args, **kwargs):
     return html
 app.render_homepage_html = _patched_render_homepage
 
-# ══ Override app._extract_24h_video_urls with fixed multi-part version ══
-def _fixed_extract_24h_video_urls(article_url):
-    vid = _extract_24h_video_url(article_url)
-    if not vid:
-        return []
-    all_parts = vid.get("all_parts", [vid["src"]])
-    poster = vid.get("poster", "")
-    return [{"src": p, "poster": poster, "vtype": "hls"} for p in all_parts]
-app._extract_24h_video_urls = _fixed_extract_24h_video_urls
-
-# ══ Patch render_video_page_html: contain toggle button (default is 3:4 cover) ══
+# ══ Patch render_video_page_html: fullheight button ══
 _orig_render_video_page = app.render_video_page_html
 def _patched_render_video_page():
     html = _orig_render_video_page()
-    # Button toggles to "contain" mode (show full video without crop)
-    toggle_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 3:4\':\'\\u2B07 Contain\';});">\u2B07 Contain</button>'
+    toggle_btn = '<button class="tiktok-fullheight-btn" onclick="event.stopPropagation();var c=this.closest(\'.tiktok-fullscreen-container\');c.classList.toggle(\'fullheight-mode\');var on=c.classList.contains(\'fullheight-mode\');c.querySelectorAll(\'.tiktok-fullheight-btn\').forEach(function(b){b.classList.toggle(\'active\',on);b.textContent=on?\'\\u2B07 Contain\':\'\\u2922 Fullheight\';});">\u2922 Fullheight</button>'
     html = html.replace('<div class="tiktok-unmute-hint"', toggle_btn + '<div class="tiktok-unmute-hint"')
     return html
 app.render_video_page_html = _patched_render_video_page
@@ -145,7 +144,6 @@ def _render_bdp_tiktok_feed(current_url):
     return _build_tiktok_html(videos, current_url, "BDP")
 
 def _render_24h_tiktok_feed(current_url):
-    """Render 24h highlight video in TikTok feed. Multi-part expanded."""
     from concurrent.futures import ThreadPoolExecutor, as_completed
     try:
         all_articles = app.scrape_24h_video_list()[:20]
@@ -201,6 +199,7 @@ def _build_tiktok_html(videos, current_url, source_label):
     ordered.extend(rest)
 
     badge_cls = "bdp-badge-24h" if source_label == "24h" else "bdp-badge-bdp"
+    is_shorts = source_label == "24h"
 
     slides = []
     for vi, v in enumerate(ordered):
@@ -215,8 +214,9 @@ def _build_tiktok_html(videos, current_url, source_label):
         else:
             vtag = f'<video class="tiktok-video" playsinline preload="metadata"{poster_attr} muted loop><source src="{app.safe_url(vsrc)}" type="video/mp4"></video>'
 
-        # Contain toggle button (default is 3:4 cover, button switches to contain)
-        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 3:4\':\'\\u2B07 Contain\';});">\u2B07 Contain</button>'
+        fullheight_btn = ''
+        if not is_shorts:
+            fullheight_btn = '<button class="tiktok-fullheight-btn" onclick="event.stopPropagation();var c=this.closest(\'.tiktok-fullscreen-container\');c.classList.toggle(\'fullheight-mode\');var on=c.classList.contains(\'fullheight-mode\');c.querySelectorAll(\'.tiktok-fullheight-btn\').forEach(function(b){b.classList.toggle(\'active\',on);b.textContent=on?\'\\u2B07 Contain\':\'\\u2922 Fullheight\';});">\u2922 Fullheight</button>'
 
         slides.append(f'''<div class="tiktok-slide" data-index="{vi}" data-aid="{aid}">
 {vtag}
@@ -232,7 +232,7 @@ def _build_tiktok_html(videos, current_url, source_label):
 <button class="tiktok-action-btn" onclick="{share_js}">\U0001f4e4 Chia s\u1ebb</button>
 </div>
 </div>
-{contain_btn}
+{fullheight_btn}
 <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>''')
@@ -251,7 +251,8 @@ def _build_tiktok_html(videos, current_url, source_label):
     grid_html = f'''<div class="bdp-wrap"><div class="bdp-topbar"><span>\U0001f3ac Video</span><span>{len(ordered)} video</span></div>
 <div class="bdp-grid">{''.join(list_cards)}</div></div>'''
 
-    return f'''<div class="tiktok-fullscreen-container" id="tiktok-fullscreen-feed">
+    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_html}'''