Update player.html

player.html

@@ -25,7 +25,12 @@
         .player-team a { color: #f97316; text-decoration: none; }
         .player-team a:hover { text-decoration: underline; }
         .mention-count-header { font-size: 48px; font-weight: bold; color: #f97316; }
-        .mention-count-label { font-size: 14px; color: #888; text-transform: uppercase; }
+        .mention-count-label { font-size: 14px; color: #888; text-transform: uppercase; margin-bottom: 20px; }
+        .period-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 15px; }
+        .period-stat { background: #f8f9fa; border-radius: 8px; padding: 12px; text-align: center; }
+        .period-label { font-size: 12px; color: #888; font-weight: 600; margin-bottom: 4px; }
+        .period-mentions { font-size: 20px; font-weight: bold; color: #f97316; }
+        .period-rank { font-size: 11px; color: #666; margin-top: 2px; }
         .section-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #f97316; }
         .mentions-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
         .mention-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
@@ -65,8 +70,13 @@
         <div class="player-header">
             <div class="player-name" id="playerName">Loading...</div>
             <div class="player-team" id="playerTeam"></div>
-            <div class="mention-count-header" id="totalMentions">-</div>
-            <div class="mention-count-label">mentions</div>
+            <div class="period-stats" id="periodStats">
+                <div class="period-stat"><div class="period-label">6h</div><div class="period-mentions">-</div><div class="period-rank"></div></div>
+                <div class="period-stat"><div class="period-label">12h</div><div class="period-mentions">-</div><div class="period-rank"></div></div>
+                <div class="period-stat"><div class="period-label">24h</div><div class="period-mentions">-</div><div class="period-rank"></div></div>
+                <div class="period-stat"><div class="period-label">48h</div><div class="period-mentions">-</div><div class="period-rank"></div></div>
+                <div class="period-stat"><div class="period-label">7d</div><div class="period-mentions">-</div><div class="period-rank"></div></div>
+            </div>
         </div>
         <div class="section-title">Recent Mentions</div>
         <div class="mentions-list" id="mentionsList"><div class="loading"><div class="spinner"></div><p>Loading...</p></div></div>
@@ -111,9 +121,12 @@
         function processText(text) {
             if (!text) return '';
             let escaped = escapeHtml(text);
-            // Match URLs with or without https://
-            escaped = escaped.replace(/(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g, '<a href="$1" target="_blank">$1</a>');
-            escaped = escaped.replace(/(?<![:\/])(www\.[^\s<]+[^<.,:;"')\]\s])/g, '<a href="https://$1" target="_blank">$1</a>');
+            // Match URLs - https://, http://, and common short domains
+            escaped = escaped.replace(/(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/gi, '<a href="$1" target="_blank">$1</a>');
+            // Match youtu.be, bit.ly, etc without protocol
+            escaped = escaped.replace(/(?<![\/\w])((?:youtu\.be|bit\.ly|t\.co|tinyurl\.com|goo\.gl)\/[^\s<]+[^<.,:;"')\]\s])/gi, '<a href="https://$1" target="_blank">$1</a>');
+            // Match www. URLs
+            escaped = escaped.replace(/(?<![\/\w])(www\.[^\s<]+[^<.,:;"')\]\s])/gi, '<a href="https://$1" target="_blank">$1</a>');
             for (const player of allPlayers) {
                 if (player === playerName) continue;
                 const regex = new RegExp(`\\b(${player.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})\\b`, 'gi');
@@ -141,11 +154,21 @@
                 if (info.team) document.getElementById('playerTeam').innerHTML = `<a href="/team/${encodeURIComponent(info.team)}">${info.team}</a>`;
                 if (info.teammates?.length) document.getElementById('relatedGrid').innerHTML = info.teammates.map(t => `<a href="/player/${encodeURIComponent(t)}" class="related-link">${t}</a>`).join('');
                 else document.getElementById('relatedGrid').innerHTML = '<p style="color:#888">No teammates</p>';
-            } catch (e) {}
+                
+                // Populate period stats
+                if (info.period_stats) {
+                    document.getElementById('periodStats').innerHTML = info.period_stats.map(p => `
+                        <div class="period-stat">
+                            <div class="period-label">${p.label}</div>
+                            <div class="period-mentions">${p.mentions}</div>
+                            <div class="period-rank">${p.rank ? '#' + p.rank : '-'}</div>
+                        </div>
+                    `).join('');
+                }
+            } catch (e) { console.error(e); }
             
             try {
                 const mentions = await (await fetch(`/api/mentions/${encodeURIComponent(playerName)}?limit=50`)).json();
-                document.getElementById('totalMentions').textContent = mentions.length;
                 if (!mentions.length) { document.getElementById('mentionsList').innerHTML = '<div class="empty-state"><h3>No mentions found</h3></div>'; return; }
                 document.getElementById('mentionsList').innerHTML = mentions.map(m => {
                     const avatarUrl = m.author_avatar || 'https://cdn.bsky.app/img/avatar/plain/did:plc:default/default@jpeg';