Tune frame queue and viewport sizing

public/app.js

@@ -95,7 +95,7 @@ elements.form.addEventListener('submit', async (event) => {
     const response = await fetch('/api/session', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ url: elements.url.value }),
+      body: JSON.stringify({ url: elements.url.value, width: getViewportFrameWidth() }),
     });
 
     const payload = await response.json();
@@ -752,7 +752,7 @@ function trimPendingFrameQueue() {
   if (overflow > 0) {
     noteClientTelemetry('pendingQueueOverflowFrames', overflow);
     noteClientTelemetryMax('pendingQueuePeakFrames', state.pendingFrames.length);
-    state.pendingFrames.splice(0, overflow);
+    state.pendingFrames.splice(maxQueuedFrames, overflow);
   }
 }
 
@@ -766,7 +766,7 @@ function trimFrameQueue() {
     return;
   }
 
-  const removed = state.frames.splice(0, overflow);
+  const removed = state.frames.splice(maxQueuedFrames, overflow);
   noteClientTelemetry('decodedQueueOverflowFrames', overflow);
   noteClientTelemetryMax('decodedQueuePeakFrames', state.frames.length + overflow);
 
@@ -816,6 +816,15 @@ function getFrameQueueLimit(seconds, minimum) {
   return Math.max(minimum, Math.ceil(fps * seconds));
 }
 
+function getViewportFrameWidth() {
+  const width = Math.ceil(Math.max(
+    document.documentElement.clientWidth || 0,
+    window.innerWidth || 0,
+  ));
+
+  return clampNumber(width, 160, 1920);
+}
+
 function isLateFrame(timestamp) {
   if (!state.session || state.isSeeking || elements.audio.paused || elements.audio.readyState === 0) {
     return false;