v4: client-side scraping + fallback to bongda.com.vn link

static/match_detail.js

@@ -1,5 +1,5 @@
-// === VNEWS — Match Detail UI (v3) ===
-// Scrapes bongda.com.vn directly via CORS proxy as fallback
+// === VNEWS — Match Detail UI (v4) ===
+// Client-side scraping with multiple fallback strategies
 (function(){
   if(window._mdLoaded) return;
   window._mdLoaded = true;
@@ -70,6 +70,8 @@
     .md-no-data{text-align:center;color:#666;padding:16px 8px;font-size:12px}
     .md-err{color:#e85d04;font-size:12px;padding:8px;background:#2a1a1a;border-radius:6px;margin-bottom:6px;line-height:1.5}
     .md-warn{color:#f0c040;font-size:12px;padding:8px;background:#2a2a1a;border-radius:6px;margin-bottom:6px;line-height:1.5}
+    .md-open-ext{display:inline-block;margin-top:10px;padding:8px 16px;background:#2d8659;color:#fff;border-radius:8px;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer}
+    .md-open-ext:hover{background:#3a9d6a}
     @keyframes mdspin{to{transform:rotate(360deg)}}
     @keyframes mdpulse{0%,100%{opacity:1}50%{opacity:.5}}
     `;
@@ -90,129 +92,187 @@
 
   // Client-side HTML parser for bongda.com.vn
   function parseBongdaHtml(html, eventId) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    const result = {event_id: eventId, found: false, sections: []};
-    
-    function cl(s) { return (s || '').replace(/\s+/g, ' ').trim(); }
-    
-    // Parse teams
-    const teamsEl = doc.querySelector('.teams');
-    if (teamsEl) {
-      const info = {};
-      const homeEl = teamsEl.querySelector('.team.home') || teamsEl.querySelector('[class*="home"]');
-      if (homeEl) {
-        const nameEl = homeEl.querySelector('p:not(.logo)') || homeEl.querySelector('p');
-        if (nameEl) info.home_team = cl(nameEl.textContent);
-        const logoEl = homeEl.querySelector('img');
-        if (logoEl) info.home_logo = logoEl.getAttribute('src') || '';
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      const result = {event_id: eventId, found: false, sections: []};
+      
+      function cl(s) { return (s || '').replace(/\s+/g, ' ').trim(); }
+      
+      // Parse teams from .teams section
+      const teamsEl = doc.querySelector('.teams');
+      if (teamsEl) {
+        const info = {};
+        const homeEl = teamsEl.querySelector('.team.home') || teamsEl.querySelector('[class*="home"]');
+        if (homeEl) {
+          const nameEl = homeEl.querySelector('p:not(.logo)') || homeEl.querySelector('p');
+          if (nameEl) info.home_team = cl(nameEl.textContent);
+          const logoEl = homeEl.querySelector('img');
+          if (logoEl) info.home_logo = logoEl.getAttribute('src') || '';
+        }
+        const awayEl = teamsEl.querySelector('.team.away') || teamsEl.querySelector('[class*="away"]');
+        if (awayEl) {
+          const nameEl = awayEl.querySelector('p:not(.logo)') || awayEl.querySelector('p');
+          if (nameEl) info.away_team = cl(nameEl.textContent);
+          const logoEl = awayEl.querySelector('img');
+          if (logoEl) info.away_logo = logoEl.getAttribute('src') || '';
+        }
+        const scoreEl = teamsEl.querySelector('.score');
+        if (scoreEl) {
+          const parts = Array.from(scoreEl.querySelectorAll('p')).map(p => cl(p.textContent));
+          if (parts.length >= 2) info.score = parts[0] + ' - ' + parts[1];
+          const label = scoreEl.querySelector('.label');
+          if (label) info.status_label = cl(label.textContent);
+        }
+        if (info.home_team && info.away_team) {
+          result.info = info;
+          result.found = true;
+          result.sections.push('info');
+        }
       }
-      const awayEl = teamsEl.querySelector('.team.away') || teamsEl.querySelector('[class*="away"]');
-      if (awayEl) {
-        const nameEl = awayEl.querySelector('p:not(.logo)') || awayEl.querySelector('p');
-        if (nameEl) info.away_team = cl(nameEl.textContent);
-        const logoEl = awayEl.querySelector('img');
-        if (logoEl) info.away_logo = logoEl.getAttribute('src') || '';
+      
+      // Parse match info
+      const mi = doc.querySelector('.match-info');
+      if (mi) {
+        const te = mi.querySelector('.times') || mi.querySelector('li');
+        if (te) {
+          result.info = result.info || {};
+          result.info.datetime = cl(te.textContent);
+        }
       }
-      const scoreEl = teamsEl.querySelector('.score');
-      if (scoreEl) {
-        const parts = Array.from(scoreEl.querySelectorAll('p')).map(p => cl(p.textContent));
-        if (parts.length >= 2) info.score = parts[0] + ' - ' + parts[1];
-        const label = scoreEl.querySelector('.label');
-        if (label) info.status_label = cl(label.textContent);
+      
+      // Parse timeline
+      const timeline = [];
+      const tlEl = doc.querySelector('.timeline');
+      if (tlEl) {
+        let half = '';
+        for (const c of tlEl.children) {
+          if (!c.tagName) continue;
+          const t = cl(c.textContent);
+          if (!t) continue;
+          if (['H1','H2','Hi���p 1','Hiệp 2'].includes(t)) { half = t; continue; }
+          const m = t.match(/^(\d+'\+?\d*)/);
+          if (m) {
+            timeline.push({time: m[1], text: t.substring(m[0].length).trim(), half: half});
+          } else if (t.length > 5) {
+            timeline.push({time: '', text: t, half: half});
+          }
+        }
       }
-      if (info.home_team && info.away_team) {
-        result.info = info;
-        result.found = true;
-        result.sections.push('info');
+      if (timeline.length > 0) {
+        result.timeline = timeline;
+        result.sections.push('commentaries');
       }
-    }
-    
-    // Parse match info
-    const mi = doc.querySelector('.match-info');
-    if (mi) {
-      const te = mi.querySelector('.times') || mi.querySelector('li');
-      if (te) {
-        result.info = result.info || {};
-        result.info.datetime = cl(te.textContent);
+      
+      // Parse events
+      const events = [];
+      doc.querySelectorAll('.event').forEach(function(el) {
+        const e = {};
+        const cls = el.className || '';
+        e.team = cls.includes('home') ? 'home' : (cls.includes('away') ? 'away' : '');
+        const players = Array.from(el.querySelectorAll('p')).map(p => cl(p.textContent)).filter(Boolean);
+        if (players.length > 0) e.players = players;
+        events.push(e);
+      });
+      if (events.length > 0) {
+        result.events = events;
+        result.sections.push('events');
       }
-    }
-    
-    // Parse timeline
-    const timeline = [];
-    const tlEl = doc.querySelector('.timeline');
-    if (tlEl) {
-      let half = '';
-      for (const c of tlEl.children) {
-        if (!c.tagName) continue;
-        const t = cl(c.textContent);
-        if (!t) continue;
-        if (['H1','H2','Hiệp 1','Hiệp 2'].includes(t)) { half = t; continue; }
-        const m = t.match(/^(\d+'\+?\d*)/);
-        if (m) {
-          timeline.push({time: m[1], text: t.substring(m[0].length).trim(), half: half});
-        } else if (t.length > 5) {
-          timeline.push({time: '', text: t, half: half});
+      
+      // Parse stats
+      let statsHtml = '';
+      for (const sel of ['.match-stats', '[class*="stats"]']) {
+        const el = doc.querySelector(sel);
+        if (el && el.innerHTML.length > 50) { statsHtml = el.innerHTML; break; }
+      }
+      if (statsHtml) {
+        result.stats_html = statsHtml;
+        result.sections.push('stats');
+      }
+      
+      // Parse H2H
+      const h2h = [];
+      for (const sel of ['.head-to-head', '[class*="h2h"]']) {
+        const el = doc.querySelector(sel);
+        if (el && el.innerHTML.length > 50) {
+          el.querySelectorAll('li, tr').forEach(function(it) {
+            const cells = it.querySelectorAll('td, span, p');
+            if (cells.length >= 3) {
+              const m = {
+                date: cl(cells[0]?.textContent || ''),
+                home: cl(cells[1]?.textContent || ''),
+                score: cl(cells[2]?.textContent || ''),
+              };
+              if (cells.length > 3) m.away = cl(cells[3]?.textContent || '');
+              if (m.home) h2h.push(m);
+            }
+          });
+          if (h2h.length > 0) break;
         }
       }
+      if (h2h.length > 0) {
+        result.h2h = h2h;
+        result.sections.push('h2h');
+      }
+      
+      return result;
+    } catch(e) {
+      return {event_id: eventId, found: false, sections: [], error: e.message};
     }
-    if (timeline.length > 0) {
-      result.timeline = timeline;
-      result.sections.push('commentaries');
-    }
-    
-    // Parse events
-    const events = [];
-    doc.querySelectorAll('.event').forEach(function(el) {
-      const e = {};
-      const cls = el.className || '';
-      e.team = cls.includes('home') ? 'home' : (cls.includes('away') ? 'away' : '');
-      const players = Array.from(el.querySelectorAll('p')).map(p => cl(p.textContent)).filter(Boolean);
-      if (players.length > 0) e.players = players;
-      events.push(e);
-    });
-    if (events.length > 0) {
-      result.events = events;
-      result.sections.push('events');
-    }
-    
-    // Parse stats
-    let statsHtml = '';
-    for (const sel of ['.match-stats', '[class*="stats"]']) {
-      const el = doc.querySelector(sel);
-      if (el && el.innerHTML.length > 50) { statsHtml = el.innerHTML; break; }
+  }
+
+  // Fetch HTML via multiple proxy strategies
+  async function fetchBongdaHTML(eventId, matchUrl) {
+    const bongdaUrls = [];
+    if (matchUrl) {
+      const cleanUrl = matchUrl.replace(/\/(preview|centre)\/.*/, '');
+      bongdaUrls.push(cleanUrl + '/centre/', cleanUrl + '/preview/');
     }
-    if (statsHtml) {
-      result.stats_html = statsHtml;
-      result.sections.push('stats');
+    bongdaUrls.push(
+      'https://bongda.com.vn/tran-dau/' + eventId + '/centre/',
+      'https://bongda.com.vn/tran-dau/' + eventId + '/preview/'
+    );
+
+    // Strategy 1: Direct fetch (works if CORS allows)
+    for (const url of bongdaUrls) {
+      try {
+        const r = await fetch(url, {
+          signal: AbortSignal.timeout(10000),
+          headers: {'Accept': 'text/html'}
+        });
+        if (r.ok) {
+          const html = await r.text();
+          if (html.length > 1000 && html.includes('.teams')) {
+            return {html, url, method: 'direct'};
+          }
+        }
+      } catch(e) {}
     }
+
+    // Strategy 2: CORS proxies
+    const proxies = [
+      'https://api.allorigins.win/raw?url=',
+      'https://corsproxy.io/?',
+      'https://api.codetabs.com/v1/proxy?quest=',
+    ];
     
-    // Parse H2H
-    const h2h = [];
-    for (const sel of ['.head-to-head', '[class*="h2h"]']) {
-      const el = doc.querySelector(sel);
-      if (el && el.innerHTML.length > 50) {
-        el.querySelectorAll('li, tr').forEach(function(it) {
-          const cells = it.querySelectorAll('td, span, p');
-          if (cells.length >= 3) {
-            const m = {
-              date: cl(cells[0]?.textContent || ''),
-              home: cl(cells[1]?.textContent || ''),
-              score: cl(cells[2]?.textContent || ''),
-            };
-            if (cells.length > 3) m.away = cl(cells[3]?.textContent || '');
-            if (m.home) h2h.push(m);
+    for (const url of bongdaUrls) {
+      for (const proxy of proxies) {
+        try {
+          const r = await fetch(proxy + encodeURIComponent(url), {
+            signal: AbortSignal.timeout(15000)
+          });
+          if (r.ok) {
+            const html = await r.text();
+            if (html.length > 1000 && html.includes('.teams')) {
+              return {html, url, method: 'proxy:' + proxy};
+            }
           }
-        });
-        if (h2h.length > 0) break;
+        } catch(e) {}
       }
     }
-    if (h2h.length > 0) {
-      result.h2h = h2h;
-      result.sections.push('h2h');
-    }
-    
-    return result;
+
+    return null;
   }
 
   window.loadMatchTab = async function(tab){
@@ -237,7 +297,7 @@
 
     let data = null;
 
-    // Strategy 1: Try server-side /live endpoint
+    // Strategy 1: Server API /live
     try{
       let apiUrl = '/api/match/' + eventId + '/live';
       if(matchUrl) apiUrl += '?page_url=' + encodeURIComponent(matchUrl);
@@ -248,7 +308,7 @@
       }
     } catch(e) {}
 
-    // Strategy 2: Try server-side /detail endpoint
+    // Strategy 2: Server API /detail
     if(!data){
       try{
         let apiUrl = '/api/match/' + eventId + '/detail';
@@ -261,51 +321,24 @@
       } catch(e) {}
     }
 
-    // Strategy 3: Client-side scraping via CORS proxy
+    // Strategy 3: Client-side scraping
     if(!data || !data.found){
-      const bongdaUrls = [];
-      if(matchUrl){
-        const cleanUrl = matchUrl.replace(/\/(preview|centre)\/.*/, '');
-        bongdaUrls.push(cleanUrl + '/centre/', cleanUrl + '/preview/');
-      }
-      bongdaUrls.push(
-        'https://bongda.com.vn/tran-dau/' + eventId + '/centre/',
-        'https://bongda.com.vn/tran-dau/' + eventId + '/preview/'
-      );
-
-      const corsProxies = [
-        'https://api.allorigins.win/raw?url=',
-        'https://corsproxy.io/?',
-      ];
-
-      for(const bUrl of bongdaUrls){
-        for(const proxy of corsProxies){
-          try{
-            const r = await fetch(proxy + encodeURIComponent(bUrl), {signal: AbortSignal.timeout(20000)});
-            if(r.ok){
-              const html = await r.text();
-              if(html && html.length > 1000 && html.includes('.teams')){
-                // Check Portugal/Chile or team names in the HTML
-                data = parseBongdaHtml(html, eventId);
-                if(data.found && data.info && data.info.home_team && data.info.away_team){
-                  el.innerHTML = '<div class="md-no-data" style="font-size:10px;color:#5cb87a;text-align:center;padding:4px">📡 Dữ liệu tải trực tiếp từ bongda.com.vn</div>';
-                  break;
-                }
-                data = null;
-              }
-            }
-          } catch(e) {}
-          if(data && data.found) break;
+      const fetched = await fetchBongdaHTML(eventId, matchUrl);
+      if(fetched){
+        data = parseBongdaHtml(fetched.html, eventId);
+        if(data.found){
+          el.innerHTML = '<div style="font-size:9px;color:#5cb87a;text-align:center;padding:3px;background:#1a2a1f;border-radius:4px;margin-bottom:8px">📡 Dữ liệu tải trực tiếp từ bongda.com.vn' + (fetched.method !== 'direct' ? ' (qua proxy)' : '') + '</div>';
         }
-        if(data && data.found) break;
       }
     }
 
-    // Render
+    // Render or show fallback
     if(data && data.found && data.info && data.info.home_team){
       renderMatchDetail(el, data);
     } else {
-      el.innerHTML = '<div class="md-warn">⚠️ Không có dữ liệu chi tiết cho trận đấu này.<br><small>Event ID: ' + esc(String(eventId)) + '</small><br><button onclick="window.loadMatchTab(\'detail\')" style="margin-top:8px;background:#0066cc;border:none;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">Thử lại</button></div>';
+      // Fallback: show link to bongda.com.vn
+      const bongdaLink = matchUrl || 'https://bongda.com.vn/tran-dau/' + eventId + '/centre/';
+      el.innerHTML = '<div class="md-warn">⚠️ Không thể tải dữ liệu chi tiết tự động.<br><small>Event ID: ' + esc(String(eventId)) + '</small><br><a class="md-open-ext" href="' + esc(bongdaLink) + '" target="_blank" rel="noopener">🔗 Xem trận đấu trên bongda.com.vn</a></div>';
     }
   };
 
@@ -341,7 +374,6 @@
       if(info.away_logo) h += '<img src="'+esc(info.away_logo)+'" alt="'+esc(info.away_team)+'" onerror="this.style.display=\'none\'">';
       h += '<span>'+esc(info.away_team)+'</span></div>';
       h += '</div>';
-      // Info row
       const infoItems = [];
       if(info.datetime) infoItems.push('📅 <b>'+esc(info.datetime)+'</b>');
       if(info.date && !info.datetime) infoItems.push('📅 <b>'+esc(info.date)+'</b>');
@@ -389,7 +421,7 @@
     // 3. H2H matches
     if(data.h2h && data.h2h.length > 0){
       hasAnyContent = true;
-      h += '<div class="md-sec"><div class="md-sec-title">🔄 Lịch sử đối đấu</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Lịch sử đối đầu</div>';
       data.h2h.slice(0, 10).forEach(function(m){
         h += '<div class="md-h2h-item"><span class="md-h2h-date">'+esc(m.date||'')+'</span>';
         if(m.league) h += '<span class="md-h2h-league">'+esc(m.league)+'</span>';
@@ -415,7 +447,7 @@
       h += '</div>';
     }
 
-    // 5. Events (substitutions)
+    // 5. Events
     if(data.events && data.events.length > 0){
       hasAnyContent = true;
       h += '<div class="md-sec"><div class="md-sec-title">🔄 Thay đổi cầu thủ</div><div class="md-events">';