fix: shorts uses same tiktok-slide classes (auto-init by existing JS), fullwidth, no inline script

app_wrapper.py

@@ -1,4 +1,4 @@
-"""Entry point that adds shorts TikTok feed + carousel, then imports app."""
+"""Entry point: shorts carousel + TikTok-style shorts playback (reusing existing JS)."""
 import sys, os
 
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
@@ -7,31 +7,19 @@ from shorts_carousel import scrape_24h_news_shorts, render_shorts_carousel, SHOR
 import app
 
 # ══ 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:fixed;top:70px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.2);color:#fff;border:none;padding:6px 16px;border-radius:18px;font-size:12px;cursor:pointer;z-index:10;backdrop-filter:blur(4px)}
+SHORTS_EXTRA_CSS = """
+/* Shorts feed: override video to 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}
 """
 
 if "vslide-shorts-item" not in app.CSS:
     app.CSS += SHORTS_CSS
-if "shorts-tiktok-container" not in app.CSS:
-    app.CSS += SHORTS_TIKTOK_CSS
+if "shorts-feed-mode" not in app.CSS:
+    app.CSS += SHORTS_EXTRA_CSS
 
-# ══ Patch render_homepage_html ══
+# ══ Patch render_homepage_html: add shorts carousel ══
 _orig_render_homepage = app.render_homepage_html
 def _patched_render_homepage(articles, *args, **kwargs):
     html = _orig_render_homepage(articles, *args, **kwargs)
@@ -51,99 +39,20 @@ def _patched_render_homepage(articles, *args, **kwargs):
     return html
 app.render_homepage_html = _patched_render_homepage
 
-# ══ Inline JS for shorts feed (embedded in HTML, not in head) ══
-SHORTS_INLINE_JS = '''<script>
-(function(){
-function initSF(){
-    var c=document.getElementById('shorts-tiktok-feed');
-    if(!c||c._sInit)return;c._sInit=true;
-    var feed=c.querySelector('.shorts-tiktok-feed');
-    if(!feed)return;
-    var slides=feed.querySelectorAll('.shorts-slide');
-    if(!slides.length)return;
-
-    function initHls(v){
-        if(v._hlsI)return;v._hlsI=true;
-        var src=v.getAttribute('data-hls-src');if(!src)return;
-        if(v.canPlayType('application/vnd.apple.mpegURL')){v.src=src;}
-        else if(window.Hls&&Hls.isSupported()){var h=new Hls();h.loadSource(src);h.attachMedia(v);}
-        else{v.src=src;}
-    }
-
-    slides.forEach(function(sl){
-        var v=sl.querySelector('video[data-hls-src]');
-        if(v)initHls(v);
-        var v2=sl.querySelector('video:not([data-hls-src])');
-        if(v2&&!v2._ld){v2._ld=true;v2.load();}
-    });
-
-    var cur=-1;
-    function tryP(v){var p=v.play();if(p&&p.catch)p.catch(function(){setTimeout(function(){v.play().catch(function(){});},500);});}
-    function activate(idx){
-        if(idx===cur)return;
-        slides.forEach(function(sl,i){
-            var v=sl.querySelector('video');if(!v)return;
-            if(i===idx){v.currentTime=0;tryP(v);sl.classList.remove('paused');}
-            else{v.pause();sl.classList.remove('paused');}
-        });
-        cur=idx;
-    }
-
-    var sT=null;
-    feed.addEventListener('scroll',function(){
-        if(sT)clearTimeout(sT);
-        sT=setTimeout(function(){
-            var rect=feed.getBoundingClientRect();
-            var ctr=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-ctr);
-                if(d<bestD){bestD=d;best=i;}
-            });
-            if(best>=0)activate(best);
-        },150);
-    });
-    setTimeout(function(){activate(0);},800);
-
-    slides.forEach(function(sl){
-        var v=sl.querySelector('video');
-        if(v){
-            var hT=null;
-            v.addEventListener('click',function(e){
-                e.preventDefault();
-                if(sl.classList.contains('show-controls')){
-                    if(v.paused){tryP(v);sl.classList.remove('paused');}
-                    else{v.pause();sl.classList.add('paused');}
-                    sl.classList.remove('show-controls');
-                }else{
-                    sl.classList.add('show-controls');
-                    if(hT)clearTimeout(hT);
-                    hT=setTimeout(function(){sl.classList.remove('show-controls');},3000);
-                }
-            });
-        }
-    });
-}
-// Run on load and poll
-initSF();
-setInterval(initSF,1000);
-var obs=new MutationObserver(function(){initSF();});
-obs.observe(document.body,{childList:true,subtree:true});
-})();
-</script>'''
-
-# ══ Patch read_article: 24h articles → shorts TikTok feed ══
+# ══ Patch read_article: 24h URLs → 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>"
     if "24h.com.vn" in url:
-        return _render_shorts_tiktok_feed(url)
+        result = _render_shorts_tiktok_feed(url)
+        if result:
+            return result
     return _orig_read_article(url)
 
 def _render_shorts_tiktok_feed(current_url):
-    """Render fullscreen TikTok feed of ALL shorts. Clicked video first."""
+    """Render shorts as TikTok feed using SAME classes as highlight TikTok
+    so the existing JS (initTikTokFullscreen in app.py) auto-initializes it."""
     from concurrent.futures import ThreadPoolExecutor, as_completed
 
     try:
@@ -152,8 +61,7 @@ def _render_shorts_tiktok_feed(current_url):
         all_shorts = []
 
     if not all_shorts:
-        # Fallback to normal article view
-        return app.render_article_html(app.scrape_24h_article(current_url))
+        return None  # fallback to normal article
 
     # Fetch video URLs in parallel
     def _fetch_video(art):
@@ -173,7 +81,7 @@ def _render_shorts_tiktok_feed(current_url):
             except: pass
 
     if not videos:
-        return app.render_article_html(app.scrape_24h_article(current_url))
+        return None  # fallback
 
     # Reorder: clicked video first
     current_aid = app.make_id(current_url)
@@ -186,7 +94,8 @@ def _render_shorts_tiktok_feed(current_url):
             rest.append(v)
     ordered.extend(rest)
 
-    # Build TikTok slides
+    # Build slides using SAME classes as highlight TikTok feed
+    # This way initTikTokFullscreen() from app.py will auto-init it
     slides = []
     for vi, v in enumerate(ordered):
         poster = app.safe_url(v.get("poster", ""))
@@ -197,26 +106,29 @@ def _render_shorts_tiktok_feed(current_url):
         share_js = f"event.stopPropagation();window.bdpShareHash('{app.esc(v['title'])}','{sl}','{aid}')"
 
         if v.get("vtype") == "hls":
-            vtag = f'<video playsinline preload="metadata"{poster_attr} data-hls-src="{vsrc}" muted loop></video>'
+            vtag = f'<video class="tiktok-video" playsinline preload="metadata"{poster_attr} data-hls-src="{vsrc}" muted loop></video>'
         else:
-            vtag = f'<video playsinline preload="metadata"{poster_attr} muted loop><source src="{app.safe_url(vsrc)}" type="video/mp4"></video>'
+            vtag = f'<video class="tiktok-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}">
+        slides.append(f'''<div class="tiktok-slide" data-index="{vi}" data-aid="{aid}">
 {vtag}
-<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 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 bdp-badge-24h">24h</span>
 <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 class="tiktok-unmute-hint" onclick="var vd=this.closest('.shorts-slide').querySelector('video');vd.muted=!vd.muted;this.textContent=vd.muted?'\U0001f507 B\u1eadt ti\u1ebfng':'\U0001f50a \u0110ang ph\u00e1t'">\U0001f507 B\u1eadt ti\u1ebfng</div>
+</div>
+<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>''')
 
-    # Build video list cards below the feed
+    # Video list cards below
     list_cards = []
     for v in ordered:
         img = app.safe_url(v.get("img") or v.get("poster",""))
@@ -225,17 +137,18 @@ def _render_shorts_tiktok_feed(current_url):
         click = f"window.bdpOpen('{app.esc(v['link'])}','{aid}','{sl}')"
         list_cards.append(f'''<div class="bdp-card" onclick="{click}">
 <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 bdp-badge-24h">24h</span>
+<div class="bdp-card-body"><span class="bdp-badge bdp-badge-24h">24h Shorts</span>
 <h3 class="bdp-card-title">{v["title"]}</h3></div></div>''')
 
-    grid_html = f'''<div class="bdp-wrap"><div class="bdp-topbar"><span>\U0001f4f1 Shorts</span><span>{len(ordered)} video</span></div>
+    grid_html = f'''<div class="bdp-wrap"><div class="bdp-topbar"><span>\U0001f4f1 Shorts Tin T\u1ee9c</span><span>{len(ordered)} video</span></div>
 <div class="bdp-grid">{''.join(list_cards)}</div></div>'''
 
-    return f'''<div class="shorts-tiktok-container" id="shorts-tiktok-feed">
-<div class="shorts-tiktok-feed">{''.join(slides)}</div>
+    # Use class "tiktok-fullscreen-container" + "tiktok-fullscreen-feed" + "shorts-feed-mode"
+    # so existing JS auto-inits AND CSS applies object-fit:cover for 9:16 crop
+    return f'''<div class="tiktok-fullscreen-container shorts-feed-mode" id="tiktok-fullscreen-feed">
+<div class="tiktok-fullscreen-feed">{''.join(slides)}</div>
 </div>
-{grid_html}
-{SHORTS_INLINE_JS}'''
+{grid_html}'''
 
 app.read_article = _patched_read_article