css-only: video 3:4 ratio for all TikTok feeds + shorts thumbnail 3:4

app_wrapper.py

@@ -8,14 +8,18 @@ import app
 
 # ══ CSS Patches ══
 SHORTS_EXTRA_CSS = """
-/* Shorts feed: video 9:16 crop center */
-.shorts-feed-mode .tiktok-video{object-fit:cover!important}
+/* ALL TikTok feeds: video 3:4 crop center */
+.tiktok-fullscreen-container .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 for highlight */
-.tiktok-fullscreen-container.fullheight-mode .tiktok-video{object-fit:cover!important}
+/* Contain toggle: show full video */
+.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)}
 .tiktok-fullheight-btn.active{background:rgba(92,184,122,.5)}
+/* Shorts thumbnail override to 3:4 */
+.vslide-shorts-thumb{aspect-ratio:3/4!important}
+.vslide-shorts-item{flex:0 0 120px!important}
+@media(min-width:768px){.vslide-shorts-item{flex:0 0 140px!important}}
 """
 
 FULLWIDTH_CSS = """
@@ -43,7 +47,7 @@ div[class*="svelte"]{padding-left:0!important;padding-right:0!important}
 
 if "vslide-shorts-item" not in app.CSS:
     app.CSS += SHORTS_CSS
-if "shorts-feed-mode" not in app.CSS:
+if "3:4 crop center" not in app.CSS:
     app.CSS += SHORTS_EXTRA_CSS
 if "FULLWIDTH: kill all Gradio padding" not in app.CSS:
     app.CSS += FULLWIDTH_CSS
@@ -92,11 +96,11 @@ def _patched_render_homepage(articles, *args, **kwargs):
     return html
 app.render_homepage_html = _patched_render_homepage
 
-# ══ Patch render_video_page_html: fullheight button ══
+# ══ Patch render_video_page_html: contain toggle button ══
 _orig_render_video_page = app.render_video_page_html
 def _patched_render_video_page():
     html = _orig_render_video_page()
-    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>'
+    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>'
     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
@@ -214,9 +218,8 @@ 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>'
 
-        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>'
+        # Contain toggle button for all feeds
+        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>'
 
         slides.append(f'''<div class="tiktok-slide" data-index="{vi}" data-aid="{aid}">
 {vtag}
@@ -232,7 +235,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>
-{fullheight_btn}
+{contain_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,8 +254,7 @@ 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>'''
 
-    mode_class = "shorts-feed-mode" if is_shorts else ""
-    return f'''<div class="tiktok-fullscreen-container {mode_class}" id="tiktok-fullscreen-feed">
+    return f'''<div class="tiktok-fullscreen-container" id="tiktok-fullscreen-feed">
 <div class="tiktok-fullscreen-feed">{''.join(slides)}</div>
 </div>
 {grid_html}'''