revert: app_wrapper.py back to previous version (before comment/counter changes)

app_wrapper.py

@@ -13,24 +13,6 @@ SHORTS_EXTRA_CSS = """
 .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)}
-/* Right side action buttons */
-.tiktok-right-actions{position:absolute;right:10px;bottom:140px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:8}
-.tiktok-right-btn{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
-.tiktok-right-btn span{font-size:10px;font-weight:600}
-/* Comment panel */
-.tiktok-cmt-panel{position:absolute;right:0;bottom:0;left:0;height:55%;background:rgba(17,17,17,.97);z-index:20;transform:translateY(100%);transition:transform .3s;border-radius:14px 14px 0 0;padding:12px;overflow-y:auto}
-.tiktok-cmt-panel.open{transform:translateY(0)}
-.tiktok-cmt-panel .cmt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
-.tiktok-cmt-panel .cmt-header h4{color:#fff;font-size:14px;margin:0}
-.tiktok-cmt-panel .cmt-close{background:none;border:none;color:#aaa;font-size:20px;cursor:pointer}
-.tiktok-cmt-panel .cmt-list{max-height:calc(100% - 100px);overflow-y:auto;margin-bottom:8px}
-.tiktok-cmt-panel .cmt-item{background:#222;border-radius:8px;padding:8px 10px;margin-bottom:6px}
-.tiktok-cmt-panel .cmt-item b{color:#5cb87a;font-size:12px}
-.tiktok-cmt-panel .cmt-item p{color:#ccc;font-size:12px;margin:3px 0 0}
-.tiktok-cmt-panel .cmt-item small{color:#666;font-size:10px}
-.tiktok-cmt-panel .cmt-form{display:flex;gap:6px;align-items:center}
-.tiktok-cmt-panel .cmt-input{flex:1;padding:8px;background:#222;border:1px solid #444;border-radius:8px;color:#eee;font-size:12px}
-.tiktok-cmt-panel .cmt-send{background:#2d8659;color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:12px;cursor:pointer}
 """
 FULLWIDTH_CSS = """
 body,.gradio-container,.main,.contain{margin:0!important;padding:0!important;max-width:100%!important;width:100%!important}
@@ -134,99 +116,16 @@ def _btk(ordered,sl):
         po=app.safe_url(v.get("poster",""));pa=f' poster="{po}"' if po else ""
         vs=v["src"];aid=app.make_id(v["link"]);s=app.slug(v["title"])
         orig_url=app.esc(v["link"])
-        # Share uses bdpShareOriginal (already exists in app.py JS)
-        share_js=f"event.stopPropagation();window.bdpShareOriginal('{app.esc(v['title'])}','{orig_url}');window.bdpIncCounter('{aid}','shares')"
-        # Comment toggle
-        cmt_js=f"event.stopPropagation();this.closest('.tiktok-slide').querySelector('.tiktok-cmt-panel').classList.toggle('open')"
-        # View counter increment on slide activation (done via data attribute)
+        sj=f"event.stopPropagation();window.bdpShareOriginal('{app.esc(v['title'])}','{orig_url}')"
         vt=f'<video class="tiktok-video" playsinline preload="metadata"{pa} data-hls-src="{vs}" muted loop></video>' if v.get("vtype")=="hls" else f'<video class="tiktok-video" playsinline preload="metadata"{pa} muted loop><source src="{app.safe_url(vs)}" type="video/mp4"></video>'
         fb='<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>'
-
-        # Right side action buttons with counters
-        right_actions = f'''<div class="tiktok-right-actions">
-<button class="tiktok-right-btn" onclick="event.stopPropagation();" data-views="{aid}">&#x1f441;<span id="vc-{aid}">0</span></button>
-<button class="tiktok-right-btn" onclick="{cmt_js}">&#x1f4ac;<span id="cc-{aid}">0</span></button>
-<button class="tiktok-right-btn" onclick="{share_js}">&#x1f4e4;<span id="sc-{aid}">0</span></button>
-</div>'''
-
-        # Comment panel
-        cmt_panel = f'''<div class="tiktok-cmt-panel" onclick="event.stopPropagation();">
-<div class="cmt-header"><h4>\U0001f4ac B\u00ecnh lu\u1eadn</h4><button class="cmt-close" onclick="this.closest('.tiktok-cmt-panel').classList.remove('open')">\u2715</button></div>
-<div class="cmt-list" id="tcl-{aid}"></div>
-<div class="cmt-form">
-<input class="cmt-input" id="tcn-{aid}" placeholder="T\u00ean..." maxlength="30">
-<input class="cmt-input" id="tct-{aid}" placeholder="B\u00ecnh lu\u1eadn..." maxlength="200">
-<button class="cmt-send" onclick="window.bdpTikTokCmt('{aid}')">G\u1eedi</button>
-</div>
-</div>'''
-
-        slides.append(f'<div class="tiktok-slide" data-index="{vi}" data-aid="{aid}">{vt}<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 {badge}">{sl}</span><p class="tiktok-title">{v["title"]}</p></div>{right_actions}{fb}{cmt_panel}<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>')
+        slides.append(f'<div class="tiktok-slide" data-index="{vi}" data-aid="{aid}">{vt}<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 {badge}">{sl}</span><p class="tiktok-title">{v["title"]}</p><div class="tiktok-actions"><button class="tiktok-action-btn" onclick="{sj}">\U0001f4e4 Chia s\u1ebb</button></div></div>{fb}<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>')
         img=app.safe_url(v.get("img")or v.get("poster",""))
         cards.append(f'<div class="bdp-card" onclick="window.bdpOpen(\'{app.esc(v["link"])}\',\'{aid}\',\'{s}\')"><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 {badge}">{sl}</span><h3 class="bdp-card-title">{v["title"]}</h3></div></div>')
     grid=f'<div class="bdp-wrap"><div class="bdp-topbar"><span>\U0001f3ac Video</span><span>{len(ordered)} video</span></div><div class="bdp-grid">{"".join(cards)}</div></div>'
     return f'<div class="tiktok-fullscreen-container" id="tiktok-fullscreen-feed"><div class="tiktok-fullscreen-feed">{"".join(slides)}</div></div>{grid}'
 
 app.read_article=_pra
-
-# ══ Patch JS: add counter + comment functions ══
-_orig_js = app.JS_FUNC
-if "bdpTikTokCmt" not in _orig_js:
-    _js = """
-/* TikTok comment + counters */
-window.bdpIncCounter=function(aid,type){
-    var k='bdp_'+type+'_'+aid;
-    var n=parseInt(localStorage.getItem(k)||'0')+1;
-    localStorage.setItem(k,n);
-    var el=document.getElementById((type==='shares'?'sc':type==='views'?'vc':'cc')+'-'+aid);
-    if(el)el.textContent=n;
-};
-window.bdpTikTokCmt=function(aid){
-    var n=document.getElementById('tcn-'+aid);
-    var t=document.getElementById('tct-'+aid);
-    if(!n||!t)return;
-    var nm=n.value.trim(),tx=t.value.trim();
-    if(!nm||!tx){window.bdpToast('Nh\\u1eadp t\\u00ean v\\u00e0 b\\u00ecnh lu\\u1eadn');return;}
-    var k='bdp_cmt_'+aid;
-    var c=JSON.parse(localStorage.getItem(k)||'[]');
-    c.push({name:nm,text:tx,date:new Date().toLocaleString('vi-VN')});
-    localStorage.setItem(k,JSON.stringify(c));
-    t.value='';
-    window.bdpIncCounter(aid,'comments');
-    window.bdpRenderTikTokCmt(aid);
-    window.bdpToast('\\u2705 \\u0110\\u00e3 g\\u1eedi!');
-};
-window.bdpRenderTikTokCmt=function(aid){
-    var l=document.getElementById('tcl-'+aid);if(!l)return;
-    var c=JSON.parse(localStorage.getItem('bdp_cmt_'+aid)||'[]');
-    if(!c.length){l.innerHTML='<p style="color:#666;font-size:11px;">Ch\\u01b0a c\\u00f3 b\\u00ecnh lu\\u1eadn</p>';return;}
-    var h='';for(var i=c.length-1;i>=0;i--){var x=c[i];h+='<div class="cmt-item"><b>'+x.name+'</b> <small>'+x.date+'</small><p>'+x.text.replace(/</g,'&lt;')+'</p></div>';}
-    l.innerHTML=h;
-};
-/* Init counters on slide visible */
-window.bdpInitCounters=function(){
-    document.querySelectorAll('.tiktok-slide[data-aid]').forEach(function(sl){
-        var aid=sl.getAttribute('data-aid');if(!aid||sl._cInit)return;sl._cInit=true;
-        var vc=parseInt(localStorage.getItem('bdp_views_'+aid)||'0');
-        var sc=parseInt(localStorage.getItem('bdp_shares_'+aid)||'0');
-        var cc=parseInt(localStorage.getItem('bdp_comments_'+aid)||'0');
-        var ve=document.getElementById('vc-'+aid);if(ve)ve.textContent=vc;
-        var se=document.getElementById('sc-'+aid);if(se)se.textContent=sc;
-        var ce=document.getElementById('cc-'+aid);if(ce)ce.textContent=cc;
-        window.bdpRenderTikTokCmt(aid);
-    });
-};
-setInterval(window.bdpInitCounters,1000);
-/* Increment view when video plays */
-var _origActivate=window._tikTokActivate;
-"""
-    idx = _orig_js.rfind("var hh=window.location.hash")
-    if idx > 0:
-        app.JS_FUNC = _orig_js[:idx] + _js + "\n" + _orig_js[idx:]
-    else:
-        idx = _orig_js.rfind("}")
-        if idx > 0:
-            app.JS_FUNC = _orig_js[:idx] + _js + "\n" + _orig_js[idx:]
-
 app.demo.css=app.CSS
 demo=app.demo
 if __name__=="__main__":demo.launch()