Upload static/app_v2.js

static/app_v2.js

@@ -1,6 +1,6 @@
 /**
  * VNEWS Frontend v2 - Shorts Dantri/SKDS removed, VTV Digital CDN
- * v2.3 - Fixed: VTV6/VTV10 CDN swap, prependWallPost TTS selectors restored
+ * v2.4 - Fixed: prependWallPost detached-element bug, makeShortVideo UI update, slide viewer for rewrite posts
  */
 function _proxyImg(url){
   if(!url || typeof url !== 'string') return '';
@@ -52,7 +52,7 @@ async function loadHome(){
     const sc=featuredData.status==='live'?'':'upcoming';
     const st=featuredData.status==='live'?`🔴 ${featuredData.minute||'LIVE'}`:`⏰ ${featuredData.time}`;
     const area=document.getElementById('home-featured-area');
-    if(area) area.innerHTML=`<div class="featured-match" onclick="openMatch('${featuredData.event_id}')"><div class="fm-league">${featuredData.league}</div><div class="fm-teams"><div class="fm-team"><img src="${_proxyImg(featuredData.home_logo)}" onerror="this.style.display='none'"><span>${featuredData.home}</span></div><div class="fm-score">${featuredData.score||'VS'}</div><div class="fm-team"><img src="${_proxyImg(featuredData.away_logo)}" onerror="this.style.display='none'"><span>featuredData.away}</span></div></div><div class="fm-status ${sc}">${st}</div></div>`;
+    if(area) area.innerHTML=`<div class="featured-match" onclick="openMatch('${featuredData.event_id}')"><div class="fm-league">${featuredData.league}</div><div class="fm-teams"><div class="fm-team"><img src="${_proxyImg(featuredData.home_logo)}" onerror="this.style.display='none'"><span>${featuredData.home}</span></div><div class="fm-score">${featuredData.score||'VS'}</div><div class="fm-team"><img src="${_proxyImg(featuredData.away_logo)}" onerror="this.style.display='none'"><span>${featuredData.away}</span></div></div><div class="fm-status ${sc}">${st}</div></div>`;
   }
 
   _wallPosts = (wallData && wallData.posts) || [];
@@ -187,9 +187,8 @@ async function makeShortVideo(postId, btn, voice, speed, emotion){
       const el = document.getElementById(itemId);
       if(el){
         const idx = _wallPosts.indexOf(p);
-        el.outerHTML = makeWallItem(p, idx);
-        const newEl = document.getElementById(itemId);
-        if(newEl) newEl.className = 'wall-item wall-item-new';
+        el.insertAdjacentHTML('afterend', makeWallItem(p, idx));
+        el.remove();
       }
     }
   }catch(e){
@@ -367,9 +366,7 @@ function prependWallPost(post){
     }
     return;
   }
-  const div=document.createElement('div');
-  div.outerHTML=makeWallItem(post,0);
-  track.prepend(div);
+  track.insertAdjacentHTML('afterbegin', makeWallItem(post, 0));
   track.scrollTo({left:0,behavior:'smooth'});
 }
 
@@ -416,7 +413,9 @@ function makeShortVideo(postId, btn, voice, speed, emotion){
   toast('⏳ Đang tạo...');
   fetch('/api/ai/short/'+encodeURIComponent(postId),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({voice,emotion,speed:speed||1.2})}).then(r=>r.json()).then(j=>{if(j.error)throw new Error(j.error);toast('✅ OK!');}).catch(e=>toast('❌ '+e.message));
 }
-function readWallPost(idx){const p=_wallPosts&&_wallPosts[idx];if(!p)return;readArticle(p.url||'','','',p.title,p.text);}
+function readWallPost(idx){const p=_wallPosts&&_wallPosts[idx];if(!p)return;if(p.slides&&p.slides.length){readSlidePost(idx);return}readArticle(p.url||'','','',p.title,p.text);}
+/** Show rewrite slide viewer - vertical slides with text+image */
+function readSlidePost(idx){const p=_wallPosts[idx];if(!p||!p.slides)return;showView('view-article');const el=document.getElementById('view-article');let h=`<button class="back-btn" onclick="switchCat('home')">← Tường AI</button><div class="slide-viewer" style="padding:12px;max-width:600px;margin:0 auto">`;p.slides.forEach((s,i)=>{h+=`<div class="slide-card" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:16px;margin-bottom:12px"><div class="slide-num" style="color:#5cb87a;font-size:12px;font-weight:700;margin-bottom:6px">Slide ${s.index||i+1}/${p.slides.length}</div>${s.image?`<img src="${_proxyImg(s.image)}" style="width:100%;max-height:300px;object-fit:cover;border-radius:8px;margin-bottom:8px" loading="lazy" onerror="this.style.display=\'none\'">`:''}<p style="color:#ddd;font-size:14px;line-height:1.6;margin:0">${esc(s.text)}</p></div>`;});h+=`</div>`;el.innerHTML=h;}
 function readNewsTab(tab){loadNewsTab();}
 function loadNewsTab(){const el=document.getElementById('view-cat');if(!el)return;el.innerHTML='<div class="loading">Đang tải tin tức...</div>';fetch('/api/homepage').then(r=>r.json()).then(articles=>{if(!articles||!articles.length){el.innerHTML='<div class="loading">Không có tin</div>';return}let h='<div class="grid">';articles.forEach(a=>{const src=a.source||'vne';const badge=a.group||a.source||'';h+=`<div class="card" onclick="readArticle('${esc(a.link)}')"><div class="card-img">${a.img?`<img src="${_proxyImg(a.img)}" loading="lazy" onerror="this.style.display=\'none\'">`:''}</div><div class="card-body"><span class="badge badge-${src}">${esc(badge)}</span><div class="card-title">${esc(a.title)}</div></div></div>`;});h+='</div>';el.innerHTML=h;}).catch(()=>{el.innerHTML='<div class="loading">Lỗi tải</div>';});}