From e8f37fc9892d841539bc1bb097bafc1b39db64a5 Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Thu, 16 Oct 2025 16:58:31 -0400
Subject: [PATCH] Add video specifications display and fix sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Features:
- Display detailed video specs below each player (original and optimized)
- Show resolution, codec, bitrate, duration, file size, aspect ratio, and platform
- Fix video player sizing to 100% width with proper max-width constraints
- Specs displayed in clean, easy-to-read format with yellow highlights
- Shows conversion details including input and output specifications

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.js     | 34 ++++++++++++++++++++++++++++++++++
 frontend/index.html |  6 ++++++
 frontend/style.css  | 34 +++++++++++++++++++++++++++++++++-
 3 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/frontend/app.js b/frontend/app.js
index 61d3cdb..188e5ca 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -345,11 +345,45 @@ function displayComparison(data) {
     originalSource.src = `${API_BASE}/stream/original/${currentFileId}`;
     optimizedSource.src = `${API_BASE}/stream/optimized/${currentFileId}`;
 
+    // Display video specifications
+    displayVideoSpecs('originalSpecs', {
+        resolution: `${currentVideoInfo.width}×${currentVideoInfo.height}`,
+        codec: currentVideoInfo.codec.toUpperCase(),
+        bitrate: `${currentVideoInfo.bitrate} kbps`,
+        duration: formatDuration(currentVideoInfo.duration),
+        fileSize: formatBytes(data.input_size),
+        aspectRatio: currentVideoInfo.aspect_ratio
+    });
+
+    const conversionDetails = data.conversion_details;
+    displayVideoSpecs('optimizedSpecs', {
+        resolution: conversionDetails.resolution,
+        codec: conversionDetails.codec.replace('lib', '').toUpperCase(),
+        bitrate: conversionDetails.bitrate,
+        duration: formatDuration(conversionDetails.duration),
+        fileSize: formatBytes(data.output_size),
+        platform: conversionDetails.platform.charAt(0).toUpperCase() + conversionDetails.platform.slice(1),
+        aspectRatio: conversionDetails.aspect_ratio
+    });
+
     // Reload videos
     originalVideo.load();
     optimizedVideo.load();
 }
 
+function displayVideoSpecs(elementId, specs) {
+    const specsElement = document.getElementById(elementId);
+    specsElement.innerHTML = `
+        ${specs.platform ? `<div class="spec-row"><span class="spec-label">Platform:</span><span class="spec-value">${specs.platform}</span></div>` : ''}
+        <div class="spec-row"><span class="spec-label">Resolution:</span><span class="spec-value">${specs.resolution}</span></div>
+        <div class="spec-row"><span class="spec-label">Aspect Ratio:</span><span class="spec-value">${specs.aspectRatio}</span></div>
+        <div class="spec-row"><span class="spec-label">Codec:</span><span class="spec-value">${specs.codec}</span></div>
+        <div class="spec-row"><span class="spec-label">Bitrate:</span><span class="spec-value">${specs.bitrate}</span></div>
+        <div class="spec-row"><span class="spec-label">Duration:</span><span class="spec-value">${specs.duration}</span></div>
+        <div class="spec-row"><span class="spec-label">File Size:</span><span class="spec-value">${specs.fileSize}</span></div>
+    `;
+}
+
 // Video Playback Controls
 function syncPlayback() {
     originalVideo.currentTime = 0;
diff --git a/frontend/index.html b/frontend/index.html
index 60c8cfe..fa439da 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -98,6 +98,9 @@
                         <source id="originalSource" type="video/mp4">
                         Your browser does not support the video tag.
                     </video>
+                    <div class="video-specs" id="originalSpecs">
+                        <!-- Video specs will be populated here -->
+                    </div>
                     <div class="video-controls">
                         <button class="btn-mute" id="muteOriginal">🔊 Mute</button>
                         <button class="btn-secondary" id="downloadOriginal">Download Original</button>
@@ -110,6 +113,9 @@
                         <source id="optimizedSource" type="video/mp4">
                         Your browser does not support the video tag.
                     </video>
+                    <div class="video-specs" id="optimizedSpecs">
+                        <!-- Video specs will be populated here -->
+                    </div>
                     <div class="video-controls">
                         <button class="btn-mute" id="muteOptimized">🔊 Mute</button>
                         <button class="btn-secondary" id="downloadOptimized">Download Optimized</button>
diff --git a/frontend/style.css b/frontend/style.css
index eb47a18..f424d83 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -363,11 +363,43 @@ body {
 
 .video-player {
     width: 100%;
+    max-width: 100%;
+    height: auto;
     border-radius: 6px;
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
     background-color: #000000;
 }
 
+.video-specs {
+    background-color: var(--primary-black);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    font-size: 0.8125rem;
+}
+
+.video-specs .spec-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.video-specs .spec-row:last-child {
+    border-bottom: none;
+}
+
+.video-specs .spec-label {
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.video-specs .spec-value {
+    color: var(--primary-yellow);
+    font-weight: 600;
+}
+
 .video-controls {
     display: flex;
     gap: 0.5rem;