dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-18 04:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert main.js optimization to fix broken website

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 11:49:47 +11:00
parent c90dc96d12
commit deaa23f8bd
1 changed files with 52 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
main.js
View File

@@ -696,86 +696,71 @@ async function downloadVideo() {
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
// Calculate total duration from the last frame's timing
downloadBtn.disabled = false;
downloadBtn.textContent = '⬇ Download';
};
recorder.onerror = (e) => {
console.error('MediaRecorder error:', e);
throw new Error('Recording failed');
};
// Start with timeslice to ensure proper chunking and duration
recorder.start(100); // Request data every 100ms
// Calculate frame duration based on filmstrip timing
const totalDuration = videoFrames[videoFrames.length - 1].timing; const totalDuration = videoFrames[videoFrames.length - 1].timing;
console.log(`Compiling video: ${videoFrames.length} source frames, total ${totalDuration}ms`); const frameDuration = totalDuration / videoFrames.length;
// We will generate a frame for every 1/30th of a second console.log(`Rendering ${videoFrames.length} frames over ${totalDuration}ms (${frameDuration}ms per frame)`);
const frameInterval = 1000 / fps; // ~33.33ms
const totalOutputFrames = Math.ceil(totalDuration / frameInterval);
// Pre-load all images // Render frames with proper timing
const loadedImages = await Promise.all(videoFrames.map(async frame => { for (let i = 0; i < videoFrames.length; i++) {
const img = new Image(); const img = new Image();
img.crossOrigin = 'anonymous'; img.crossOrigin = 'anonymous';
return new Promise((resolve, reject) => {
img.onload = () => resolve({ img, timing: frame.timing }); await new Promise((resolve, reject) => {
img.onerror = () => resolve(null); // Skip failed frames img.onload = resolve;
img.src = frame.data; img.onerror = () => reject(new Error('Failed to load frame'));
img.src = videoFrames[i].data;
}); });
}));
const validImages = loadedImages.filter(i => i !== null); // Render this frame multiple times to fill the duration
const renderCount = Math.max(1, Math.ceil(frameDuration / 33)); // 33ms per render at 30fps
// Generate video frames for (let r = 0; r < renderCount; r++) {
for (let i = 0; i < totalOutputFrames; i++) { // Black background
const currentTime = i * frameInterval; ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Find the image that should be displayed at this time // Center and scale image
// It's the latest image whose timing is <= currentTime const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
let currentImage = validImages[0]; const x = (canvas.width - img.width * scale) / 2;
for (let j = 0; j < validImages.length; j++) { const y = (canvas.height - img.height * scale) / 2;
if (validImages[j].timing <= currentTime) { ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
currentImage = validImages[j];
} else { // Add timestamp overlay
break; ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
} ctx.fillRect(10, canvas.height - 50, 200, 40);
ctx.fillStyle = '#fff';
ctx.font = 'bold 24px Arial';
ctx.fillText(`${(videoFrames[i].timing / 1000).toFixed(1)}s`, 20, canvas.height - 20);
// Wait for next frame at 30fps
await new Promise(r => setTimeout(r, 33));
} }
// Draw frame
// Clear and draw black background
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Center and scale image (Contain)
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
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 // Add a small delay before stopping to ensure all data is captured
const outputBlob = encoder.compile(); await new Promise(r => setTimeout(r, 200));
const url = URL.createObjectURL(outputBlob);
const a = document.createElement('a'); // Stop recording after all frames are rendered
a.href = url; recorder.stop();
a.download = `page-load-${Date.now()}.webm`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} catch (error) { } catch (error) {
console.error('Video download error:', 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.`); 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.disabled = false;
downloadBtn.textContent = '⬇ Download'; downloadBtn.textContent = '⬇ Download';
} }