';
}
itemsEl.innerHTML = html;
container.style.display = 'block';
} catch (error) {
console.error('Failed to load optimizations:', error);
}
}
// 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}%`;
}
async function downloadVideo() {
if (!videoFrames || videoFrames.length === 0) {
alert('No video data to download');
return;
}
const downloadBtn = document.getElementById('video-download-btn');
downloadBtn.disabled = true;
downloadBtn.textContent = 'âŗ Compiling...';
try {
// Initialize Whammy video encoder with 30 FPS
const fps = 30;
const encoder = new Whammy(fps);
// Create canvas for high-quality rendering (1920x1080)
const canvas = document.createElement('canvas');
canvas.width = 1920;
canvas.height = 1080;
const ctx = canvas.getContext('2d');
// Calculate total duration from the last frame's timing
const totalDuration = videoFrames[videoFrames.length - 1].timing;
console.log(`Compiling video: ${videoFrames.length} source frames, total ${totalDuration}ms`);
// We will generate a frame for every 1/30th of a second
const frameInterval = 1000 / fps; // ~33.33ms
let totalOutputFrames = Math.ceil(totalDuration / frameInterval);
// Ensure at least one frame if duration is 0 or very small
if (totalOutputFrames <= 0) totalOutputFrames = 1;
console.log(`Generating ${totalOutputFrames} output frames`);
// Pre-load all images
const loadedImages = await Promise.all(videoFrames.map(async frame => {
const img = new Image();
img.crossOrigin = 'anonymous';
return new Promise((resolve, reject) => {
img.onload = () => resolve({ img, timing: frame.timing });
img.onerror = () => resolve(null); // Skip failed frames
img.src = frame.data;
});
}));
const validImages = loadedImages.filter(i => i !== null);
if (validImages.length === 0) {
throw new Error("Failed to load any source images");
}
// Generate video frames
for (let i = 0; i < totalOutputFrames; i++) {
const currentTime = i * frameInterval;
// Find the image that should be displayed at this time
// It's the latest image whose timing is <= currentTime
let currentImage = validImages[0];
for (let j = 0; j < validImages.length; j++) {
if (validImages[j].timing <= currentTime) {
currentImage = validImages[j];
} else {
break;
}
}
// Draw frame
// Clear and draw black background
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Center and scale image (Contain)
if (currentImage && currentImage.img) {
const scale = Math.min(canvas.width / currentImage.img.width, canvas.height / currentImage.img.height);
const x = (canvas.width - currentImage.img.width * scale) / 2;
const y = (canvas.height - currentImage.img.height * scale) / 2;
// Use high quality image smoothing
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(currentImage.img, x, y, currentImage.img.width * scale, currentImage.img.height * scale);
}
// Add timestamp overlay (crisp text)
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(20, canvas.height - 70, 220, 50);
ctx.fillStyle = '#fff';
ctx.font = 'bold 32px Arial';
ctx.fillText(`${(currentTime / 1000).toFixed(1)}s`, 40, canvas.height - 35);
// Add frame to encoder
// Note: add() might parse the webp immediately, so this must happen
encoder.add(canvas);
// Yield to UI thread occasionally to prevent freezing
if (i % 15 === 0) await new Promise(r => setTimeout(r, 0));
}
// Compile and download
const outputBlob = encoder.compile();
const url = URL.createObjectURL(outputBlob);
// Trigger download
const a = document.createElement('a');
a.href = url;
a.download = `page-load-${Date.now()}.webm`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} catch (error) {
console.error('Video download error:', error);
alert(`Failed to create video: ${error.message}\n\nYour browser may not support this feature. Try using Chrome or Edge.`);
} finally {
downloadBtn.disabled = false;
downloadBtn.textContent = 'âŦ Download';
}
}
// Initialization
document.addEventListener('DOMContentLoaded', () => {
// Ensure we have an identity
const userUuid = getUserUuid();
console.log('User Identity:', userUuid);
updateVersionBadge();
loadHistory();
// Attach event listener programmatically
const runBtn = document.getElementById('run-btn');
if (runBtn) {
runBtn.addEventListener('click', runTest);
console.log('Run Test button listener attached');
} else {
console.error('Run Test button not found');
}
// 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 += `