Fix: highlight fullheight TikTok layout, prevent slide deletion after load"

patch_extra.py

@@ -1,7 +1,6 @@
-"""Extra CSS/JS fixes injected AFTER main PATCH_INJECT."""
+"""Extra CSS/JS: livescore, highlight TikTok layout, prevent slide deletion."""
 EXTRA_FIX = r'''
 <style>
-/* Force correct position for Short AI interaction buttons */
 .tiktok-slide{position:relative!important}
 .tiktok-right{position:absolute!important;right:8px!important;bottom:100px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;z-index:5!important}
 .tiktok-right-btn{display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;background:none!important;border:0!important;color:#fff!important;font-size:10px!important;cursor:pointer!important}
@@ -9,29 +8,22 @@ EXTRA_FIX = r'''
 .tiktok-right-btn .count{font-size:10px!important;color:#ddd!important}
 #short-progress-toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:#2d8659;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;z-index:99998;box-shadow:0 4px 12px rgba(0,0,0,.4);display:none;white-space:nowrap}
 #ai-short-home,.ai-short-home,.ai-short-card-final,[id*="ai-shorts-patched"]{display:none!important}
-
-/* ============================================ */
-/* LIVESCORE COMPREHENSIVE CSS                  */
-/* Covers: fixtures, live, results, BXH,        */
-/* match overlay (commentary, stats)            */
-/* ============================================ */
-
-/* --- General ls-content --- */
+/* === HIGHLIGHT PLAYER: fullheight TikTok style === */
+.vp-wrap{aspect-ratio:1/1!important;width:100%!important;max-height:100vh!important;background:#000!important}
+.vp-wrap.wide{aspect-ratio:16/9!important}
+.vp-wrap video,.vp-wrap iframe{width:100%!important;height:100%!important;object-fit:contain!important}
+/* === LIVESCORE CSS === */
 .ls-content{max-height:480px;overflow-y:auto;padding:0 6px 8px;font-size:12px;color:#ddd}
 .ls-content ul,.ls-content ol{list-style:none;padding:0;margin:0}
 .ls-content li{padding:0;margin:0}
 .ls-content a{color:#5cb87a;text-decoration:none}
 .ls-content img{max-width:100%;vertical-align:middle}
-
-/* --- League group headers --- */
 .ls-content .matchs-league,.ls-content .league-group{list-style:none;padding:0;margin:0}
 .ls-content .title-content,.ls-content .league-title,.ls-content .group-title,.ls-content .league-header{display:flex;gap:6px;align-items:center;background:#222;border-radius:4px;margin:4px 0;padding:5px 8px}
 .ls-content .title-content img,.ls-content .league-title img,.ls-content .group-title img,.ls-content .league-header img{width:18px;height:18px;object-fit:contain}
 .ls-content .title-content strong,.ls-content .league-title strong,.ls-content .league-title span,.ls-content .group-title strong,.ls-content .league-header strong,.ls-content .league-header span{font-size:11px;color:#ccc;font-weight:700}
-
-/* --- Match items (fixtures/live/results) --- */
 .ls-content .match-detail,.ls-content .match-item,.ls-content .fixture-item{padding:6px;border-bottom:1px solid #262626;cursor:pointer}
-.ls-content .match-detail:hover,.ls-content .match-item:hover,.ls-content .fixture-item:hover{background:#1a2a1f}
+.ls-content .match-detail:hover,.ls-content .match-item:hover{background:#1a2a1f}
 .ls-content .match,.ls-content .match-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
 .ls-content .datetime,.ls-content .match-time,.ls-content .time,.ls-content .kick-off{width:100%;font-size:9px;color:#888}
 .ls-content .teams,.ls-content .match-teams{display:flex;width:100%;align-items:center;gap:4px}
@@ -40,21 +32,19 @@ EXTRA_FIX = r'''
 .ls-content .team .logo img,.ls-content .match-team .logo img,.ls-content .team-logo img{width:18px;height:18px;object-fit:contain}
 .ls-content .home-team{justify-content:flex-end;text-align:right}
 .ls-content .status,.ls-content .match-score,.ls-content .score,.ls-content .result{flex:0 0 54px;text-align:center}
-.ls-content .status a,.ls-content .match-score a,.ls-content .score a,.ls-content .result a{color:#fff;text-decoration:none;font-weight:800;font-size:12px}
-.ls-content .status span,.ls-content .match-score span,.ls-content .score span{display:block}
+.ls-content .status a,.ls-content .match-score a,.ls-content .score a{color:#fff;text-decoration:none;font-weight:800;font-size:12px}
+.ls-content .status span,.ls-content .match-score span{display:block}
 .ls-content .status .label,.ls-content .match-status,.ls-content .status-label{font-size:8px;color:#888;display:block}
 .ls-content .status .label.live,.ls-content .match-status.live,.ls-content .live-label,.ls-content .is-live{color:#e74c3c;font-weight:700;animation:pulse-live 1.5s infinite}
 @keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.5}}
 .ls-content .vs,.ls-content .score-vs{color:#fff;font-weight:800}
 .ls-content .info,.ls-content .btns,.ls-content .match-info,.ls-content .extra-info{display:none}
-
-/* --- BXH Tables (standings) --- */
 .ls-content table,.mo-body table{width:100%;border-collapse:collapse;font-size:11px;color:#ccc}
 .ls-content table th,.mo-body table th{background:#222;color:#999;padding:5px 4px;text-align:left;font-size:10px;border-bottom:1px solid #333;position:sticky;top:0;z-index:1}
 .ls-content table td,.mo-body table td{padding:4px 3px;border-bottom:1px solid #1a1a1a}
 .ls-content table tr:hover td,.mo-body table tr:hover td{background:#1a2a1f}
 .ls-content table .team-name,.ls-content table .club-name,.ls-content table .club,.mo-body table .team-name,.mo-body table .club-name{display:flex;align-items:center;gap:4px;white-space:nowrap}
-.ls-content table .team-name img,.ls-content table .club-name img,.ls-content table .club img,.mo-body table .team-name img,.mo-body table .club-name img{width:16px;height:16px;object-fit:contain}
+.ls-content table .team-name img,.ls-content table .club-name img,.mo-body table .team-name img{width:16px;height:16px;object-fit:contain}
 .ls-content table .highlight,.ls-content table .top,.ls-content table .ucl,.mo-body table .highlight{color:#5cb87a;font-weight:700}
 .ls-content table .relegation,.ls-content table .bottom{color:#e74c3c}
 .ls-content table .pos,.ls-content table .rank{width:20px;text-align:center;font-weight:700;color:#999}
@@ -63,14 +53,12 @@ EXTRA_FIX = r'''
 .ls-content table .form .w,.ls-content table .recent .w{background:#2d8659;color:#fff}
 .ls-content table .form .d,.ls-content table .recent .d{background:#f0c040;color:#111}
 .ls-content table .form .l,.ls-content table .recent .l{background:#c0392b;color:#fff}
-
-/* --- Match Overlay (commentary/diễn biến + stats) --- */
 .mo-body{padding:8px;overflow-x:auto;font-size:12px;color:#ddd}
 .mo-body ul,.mo-body ol{list-style:none;padding:0;margin:0}
 .mo-body li{padding:5px 0;border-bottom:1px solid #222}
 .mo-body .commentary-item,.mo-body .event-item,.mo-body .comment-row{display:flex;gap:8px;padding:6px 4px;border-bottom:1px solid #1f1f1f;align-items:flex-start}
 .mo-body .commentary-item:hover,.mo-body .event-item:hover{background:#1a2a1f}
-.mo-body .minute,.mo-body .event-time,.mo-body .time-col{flex:0 0 36px;font-size:10px;color:#5cb87a;font-weight:700;text-align:right;padding-top:2px}
+.mo-body .minute,.mo-body .event-time,.mo-body .time-col{flex:0 0 36px;font-size:10px;color:#5cb87a;font-weight:700;text-align:right}
 .mo-body .comment-text,.mo-body .event-text,.mo-body .description,.mo-body .text-col{flex:1;font-size:12px;line-height:1.45;color:#ccc}
 .mo-body .event-icon,.mo-body .icon-col{flex:0 0 24px;text-align:center;font-size:14px}
 .mo-body .goal,.mo-body .goal-event{color:#f0c040;font-weight:700}
@@ -78,35 +66,47 @@ EXTRA_FIX = r'''
 .mo-body .yellow-card,.mo-body .yellow{color:#f0c040}
 .mo-body .substitution,.mo-body .sub{color:#5cb87a}
 .mo-body .halftime,.mo-body .period-break,.mo-body .half-time{background:#222;text-align:center;padding:8px;font-size:11px;color:#999;border-radius:4px;margin:8px 0}
-
-/* --- Stats tab (player performance / match stats) --- */
 .mo-body .stat-row,.mo-body .stats-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #1f1f1f}
 .mo-body .stat-label,.mo-body .stat-name{flex:1;text-align:center;font-size:11px;color:#999}
 .mo-body .stat-home,.mo-body .stat-val-home{flex:1;text-align:right;font-size:12px;font-weight:700;color:#eee}
 .mo-body .stat-away,.mo-body .stat-val-away{flex:1;text-align:left;font-size:12px;font-weight:700;color:#eee}
-.mo-body .stat-bar,.mo-body .progress-bar{height:6px;background:#333;border-radius:3px;overflow:hidden;flex:2}
-.mo-body .stat-bar-fill,.mo-body .progress-fill{height:100%;background:#2d8659;border-radius:3px}
+.mo-body .stat-bar{height:6px;background:#333;border-radius:3px;overflow:hidden;flex:2}
+.mo-body .stat-bar-fill{height:100%;background:#2d8659;border-radius:3px}
 .mo-body .player-item,.mo-body .player-row{display:flex;gap:6px;padding:5px 4px;border-bottom:1px solid #1f1f1f;align-items:center}
 .mo-body .player-item img,.mo-body .player-row img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#333}
 .mo-body .player-name{font-size:11px;color:#eee;flex:1}
 .mo-body .player-rating,.mo-body .player-score{font-size:12px;font-weight:800;color:#f0c040;padding:2px 6px;background:#222;border-radius:4px}
-.mo-body .player-stats{font-size:10px;color:#888}
 .mo-body .section-title,.mo-body .group-header{font-size:12px;font-weight:700;color:#5cb87a;padding:8px 0 4px;border-bottom:1px solid #333;margin-top:8px}
-.mo-body .lineup,.mo-body .formation{padding:8px 0}
-.mo-body .lineup .player,.mo-body .formation .player{display:inline-flex;align-items:center;gap:4px;background:#222;border-radius:12px;padding:3px 8px;margin:2px;font-size:10px;color:#ccc}
-.mo-body .lineup .player img,.mo-body .formation .player img{width:16px;height:16px;border-radius:50%}
-.mo-body .lineup .player .number,.mo-body .formation .player .number{color:#5cb87a;font-weight:700}
 </style>
 <div id="short-progress-toast"></div>
 <script>
 (function(){
-// Kill old renderers that create duplicate Short AI slides
-window.renderAIShortHome=function(){};
+// === PREVENT OLD JS FROM DESTROYING SLIDES ===
+// Only kill renderers that create DUPLICATE slides, not our new ones
 window.renderAIShorts7=function(){};
 window.renderTopicWallE=function(){};
 window.renderAiShorts=function(){};
-setInterval(function(){document.querySelectorAll('#ai-short-home,.ai-short-home,[id*="ai-shorts-patched"]').forEach(function(el){el.remove()});},2000);
-// Progress toast for short creation
+// Override renderAIShortHome only if it's not ours
+if(window.renderAIShortHome&&window.renderAIShortHome.toString().indexOf('short-ai-final-slide')===-1){
+  window.renderAIShortHome=function(){};
+}
+// Remove only old duplicate elements, NOT #short-ai-final-slide or [data-wall-live]
+setInterval(function(){
+  document.querySelectorAll('#ai-short-home,.ai-short-home').forEach(function(el){
+    if(el.id!=='short-ai-final-slide')el.remove();
+  });
+},3000);
+// Prevent ensureNewsShortsHome from running repeatedly and wiping DOM
+var _ensureRan=false;
+var _origEnsure=window.ensureNewsShortsHome;
+window.ensureNewsShortsHome=function(){if(_ensureRan)return;_ensureRan=true;if(_origEnsure)try{_origEnsure();}catch(e){}};
+
+// === BLOCK /api/shorts?refresh=1 for first 8s (faster initial load) ===
+var _origFetch=window.fetch,_allowRefresh=false;
+window.fetch=function(url,opts){try{if(String(url).includes('/api/shorts?refresh=1')&&!_allowRefresh)url='/api/shorts';}catch(e){}return _origFetch.call(this,url,opts);};
+setTimeout(function(){_allowRefresh=true;},8000);
+
+// === PROGRESS TOAST ===
 window.showShortProgress=function(msg){var t=document.getElementById('short-progress-toast');if(t){t.textContent=msg;t.style.display='block';}};
 window.hideShortProgress=function(){var t=document.getElementById('short-progress-toast');if(t)t.style.display='none';};
 window.makeShortFromPost=async function(pid,btn){
@@ -114,17 +114,11 @@ window.makeShortFromPost=async function(pid,btn){
   if(btn){btn.disabled=true;btn.textContent='Đang tạo...';}
   try{
     var r=await fetch('/api/ai/short/'+pid,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({voice:'nu',emotion:'neutral',speed:1.2})});
-    var j=await r.json();
-    if(!r.ok||j.error)throw new Error(j.error||'Lỗi');
-    showShortProgress('✅ Đã tạo Short AI!');
-    setTimeout(hideShortProgress,3000);
+    var j=await r.json();if(!r.ok||j.error)throw new Error(j.error||'Lỗi');
+    showShortProgress('✅ Đã tạo Short AI!');setTimeout(hideShortProgress,3000);
     if(typeof renderShortAISlide==='function')renderShortAISlide();
-  }catch(e){
-    showShortProgress('❌ Lỗi: '+e.message);
-    setTimeout(hideShortProgress,4000);
-  }finally{
-    if(btn){btn.disabled=false;btn.textContent='🎬 Tạo Short AI';}
-  }
+  }catch(e){showShortProgress('❌ '+e.message);setTimeout(hideShortProgress,4000);}
+  finally{if(btn){btn.disabled=false;btn.textContent='🎬 Tạo Short AI';}}
 };
 })();
 </script>