diff --git a/compare.html b/compare.html index 3fe220d..247543e 100644 --- a/compare.html +++ b/compare.html @@ -3,197 +3,105 @@ - Compare Tests - Web Page Performance Test + Test Comparison - Web Page Performance Test -
-

Test Comparison

- -
- - - +
+
+ +

Test Comparison

+ ← Back to Dashboard +
+ +
+
Loading comparison...
-
-
- - +
+
+ + +
+

Test B

+
+
+
+ +
+
+
+
+
+ + +
+

Metrics Comparison

+ + + + + + + + + + +
MetricTest ATest BDifference
+
+ + + + diff --git a/compare.js b/compare.js new file mode 100644 index 0000000..77c0954 --- /dev/null +++ b/compare.js @@ -0,0 +1,105 @@ +async function init() { + const params = new URLSearchParams(window.location.search); + const idA = params.get('test1'); + const idB = params.get('test2'); + + if (!idA || !idB) { + document.getElementById('loading').textContent = 'Error: Missing test IDs.'; + return; + } + + try { + const [resA, resB] = await Promise.all([ + fetch(`/reports/${idA}.json`).then(r => r.json()), + fetch(`/reports/${idB}.json`).then(r => r.json()) + ]); + + renderComparison(resA, resB); + } catch (err) { + console.error(err); + document.getElementById('loading').textContent = 'Error loading test results.'; + } +} + +function renderComparison(a, b) { + document.getElementById('loading').style.display = 'none'; + document.getElementById('comparison-content').style.display = 'block'; + + // Render Headers + renderHeader('a', a); + renderHeader('b', b); + + // Render Metrics Table + const metrics = [ + { key: 'performance', label: 'Performance Score', path: 'scores.performance', isScore: true }, + { key: 'lcp', label: 'LCP (ms)', path: 'metrics.lcp' }, + { key: 'tbt', label: 'TBT (ms)', path: 'metrics.tbt' }, + { key: 'cls', label: 'CLS', path: 'metrics.cls', isDecimal: true }, + { key: 'accessibility', label: 'Accessibility', path: 'scores.accessibility', isScore: true }, + { key: 'seo', label: 'SEO', path: 'scores.seo', isScore: true } + ]; + + const tbody = document.getElementById('metrics-body'); + tbody.innerHTML = metrics.map(m => renderMetricRow(m, a, b)).join(''); + + // Render Filmstrips + renderFilmstrip('a', a.filmstrip); + renderFilmstrip('b', b.filmstrip); +} + +function getVal(obj, path) { + return path.split('.').reduce((o, i) => o?.[i], obj); +} + +function renderHeader(col, data) { + document.getElementById(`title-${col}`).innerHTML = ` + ${data.url}
+ ${new Date(data.timestamp).toLocaleString()} + `; + + // Grade + const score = data.scores.performance; + const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D'; + const el = document.getElementById(`grade-${col}`); + el.className = `grade-circle grade-${grade.toLowerCase()}`; + el.querySelector('.grade-letter').textContent = grade; +} + +function renderMetricRow(m, a, b) { + const valA = getVal(a, m.path) || 0; + const valB = getVal(b, m.path) || 0; + + const diff = valB - valA; + let diffStr = ''; + let diffClass = 'diff-neutral'; + + // Logic: Higher is better for Scores, Lower is better for Metrics (LCP, TBT, CLS) + const higherIsBetter = m.isScore; + + if (diff !== 0) { + const isBetter = higherIsBetter ? diff > 0 : diff < 0; + diffClass = isBetter ? 'diff-better' : 'diff-worse'; + const prefix = diff > 0 ? '+' : ''; + diffStr = `${prefix}${m.isDecimal ? diff.toFixed(2) : Math.round(diff)}`; + } + + return ` + + ${m.label} + ${m.isDecimal ? valA.toFixed(2) : Math.round(valA)} + ${m.isDecimal ? valB.toFixed(2) : Math.round(valB)} + ${diffStr} + + `; +} + +function renderFilmstrip(col, frames) { + const el = document.getElementById(`filmstrip-${col}`); + if (!frames || frames.length === 0) { + el.innerHTML = 'No filmstrip data'; + return; + } + el.innerHTML = frames.map(f => ``).join(''); +} + +document.addEventListener('DOMContentLoaded', init); diff --git a/index.html b/index.html index 00b2b3d..e398309 100644 --- a/index.html +++ b/index.html @@ -167,8 +167,8 @@ 📊 View Waterfall Chart - - 🖼️ View Image Gallery + + 🎥 View Video diff --git a/main.js b/main.js index 0611af3..a9bea57 100644 --- a/main.js +++ b/main.js @@ -161,9 +161,9 @@ function displayResults(data) { e.preventDefault(); window.open(`/waterfall.html?id=${data.id}`, '_blank'); }; - document.getElementById('view-images').onclick = (e) => { + document.getElementById('view-video').onclick = (e) => { e.preventDefault(); - window.open(`/images.html?id=${data.id}`, '_blank'); + openVideoModal(data.filmstrip); }; } @@ -543,6 +543,70 @@ async function loadOptimizations(testId) { } } +// Video Player State +let videoFrames = []; +let isPlaying = false; +let currentFrameIndex = 0; +let videoInterval = null; + +function openVideoModal(frames) { + if (!frames || frames.length === 0) return; + + videoFrames = frames; + currentFrameIndex = 0; + isPlaying = false; + + document.getElementById('video-modal').style.display = 'block'; + updateVideoFrame(); +} + +function closeVideoModal() { + stopVideo(); + document.getElementById('video-modal').style.display = 'none'; +} + +function toggleVideoPlay() { + if (isPlaying) { + stopVideo(); + } else { + playVideo(); + } +} + +function playVideo() { + if (isPlaying) return; + isPlaying = true; + document.getElementById('video-play-btn').textContent = '⏸ Pause'; + + if (currentFrameIndex >= videoFrames.length - 1) { + currentFrameIndex = 0; + } + + videoInterval = setInterval(() => { + currentFrameIndex++; + if (currentFrameIndex >= videoFrames.length) { + stopVideo(); + return; + } + updateVideoFrame(); + }, 100); // 10fps +} + +function stopVideo() { + isPlaying = false; + document.getElementById('video-play-btn').textContent = '▶ Play'; + if (videoInterval) clearInterval(videoInterval); +} + +function updateVideoFrame() { + const frame = videoFrames[currentFrameIndex]; + document.getElementById('video-img').src = frame.data; + document.getElementById('video-time').textContent = (frame.timing / 1000).toFixed(1) + 's'; + + const progress = ((currentFrameIndex + 1) / videoFrames.length) * 100; + document.getElementById('video-progress-fill').style.width = `${progress}%`; +} + // Initialization document.addEventListener('DOMContentLoaded', () => { @@ -565,3 +629,78 @@ document.addEventListener('DOMContentLoaded', () => { // Auto-refresh Git badge setInterval(updateVersionBadge, 5 * 60 * 1000); }); + +// ============================================================================ +// Extra Features (Diagnostics & Bulk) +// ============================================================================ + +function toggleSection(id) { + const el = document.getElementById(id); + el.style.display = el.style.display === 'none' ? 'block' : 'none'; +} + +async function runTraceroute() { + const host = document.getElementById('trace-host').value; + const out = document.getElementById('trace-output'); + + if (!host) return; + + out.style.display = 'block'; + out.textContent = 'Running traceroute...'; + + try { + const res = await fetch(`/api/traceroute?host=${host}`); + const data = await res.json(); + out.textContent = data.output; + } catch (e) { + out.textContent = 'Error: ' + e.message; + } +} + +async function runBulkTest() { + const text = document.getElementById('bulk-urls').value; + const urls = text.split('\n').map(u => u.trim()).filter(u => u); + + if (urls.length === 0) { + alert('No URLs provided'); + return; + } + + const progress = document.getElementById('bulk-progress'); + progress.innerHTML = `Starting batch of ${urls.length} tests...`; + + // Simple Frontend orchestration + for (let i = 0; i < urls.length; i++) { + const url = urls[i]; + progress.innerHTML += `
Testing ${url} (${i+1}/${urls.length})...
`; + + try { + // Re-use existing runTest API + // Note: We need a way to reuse the run logic without clicking buttons + // Manually calling fetch here duplicating runTest logic for simplicity + const response = await fetch('/api/run-test', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'x-user-uuid': getUserUuid() + }, + body: JSON.stringify({ + url: url, + isMobile: currentDevice === 'mobile', + captureFilmstrip: false // Disable filmstrip for bulk to save speed? Or keep it? + }) + }); + + if (response.ok) { + progress.innerHTML += `
✅ Complete
`; + } else { + progress.innerHTML += `
❌ Failed
`; + } + } catch (e) { + progress.innerHTML += `
❌ Error: ${e.message}
`; + } + } + + progress.innerHTML += '
Batch Completed!'; + loadHistory(); // Refresh list +} diff --git a/server.js b/server.js index 78a1753..b42dd6b 100644 --- a/server.js +++ b/server.js @@ -138,6 +138,34 @@ app.get("*", (req, res) => { res.sendFile(path.join(__dirname, "index.html")); }); +// API Endpoint: Traceroute +app.get("/api/traceroute", (req, res) => { + const { host } = req.query; + if (!host) return res.status(400).json({ error: "Host required" }); + + // Sanitize host to prevent injection (basic) + if (/[^a-zA-Z0-9.-]/.test(host)) return res.status(400).json({ error: "Invalid host" }); + + const cmd = process.platform === 'win32' ? `tracert -h 10 ${host}` : `traceroute -m 10 ${host}`; + exec(cmd, (error, stdout, stderr) => { + res.json({ output: stdout || stderr }); + }); +}); + +// API Endpoint: Bulk Test +app.post("/api/bulk-test", async (req, res) => { + const { urls, isMobile, runCount = 1 } = req.body; + if (!urls || !Array.isArray(urls)) return res.status(400).json({ error: "URLs array required" }); + + // Mock response - in real world would queue these + // For now, we'll just acknowledge receipt. To implement fully requires a job queue. + // Let's implement a simple "Sequence" runner on the backend? No, that might timeout. + // Better to let frontend orchestrate or return a "Batch ID". + + // We will assume frontend orchestration for simplicity in this Node.js (non-queue) env + res.json({ message: "Bulk test ready", count: urls.length }); +}); + app.listen(PORT, () => { console.log(`🚀 Server running on port ${PORT}`); console.log(`📁 Serving files from: ${__dirname}`);