previews and back to edit button

app.py

@@ -211,6 +211,20 @@ def download_video(file_id):
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
+@app.route('/preview/<file_id>')
+def preview_video(file_id):
+    """Serve processed video for inline preview"""
+    try:
+        output_filename = f"{file_id}_processed.mp4"
+        output_path = os.path.join(app.config['OUTPUT_FOLDER'], output_filename)
+        
+        if not os.path.exists(output_path):
+            return jsonify({'error': 'File not found'}), 404
+        
+        return send_file(output_path, mimetype='video/mp4')
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
 @app.route('/cleanup/<file_id>', methods=['DELETE'])
 def cleanup_files(file_id):
     """Clean up uploaded and processed files"""

templates/index.html

@@ -596,7 +596,7 @@
                             <span>Quality: <span class="scale-value" id="quality-value-display">High</span></span>
                             <span style="color: #6c757d;">CRF: <strong id="crf-value-display">23</strong></span>
                         </div>
-                        <input type="range" class="scale-slider" id="quality-slider" min="18" max="50" value="23" step="1">
+                        <input type="range" class="scale-slider" id="quality-slider" min="18" max="42" value="23" step="1">
                         <div class="resolution-preview">
                             <p style="margin: 0;">💡 <strong>Lower CRF</strong> = Better quality, larger file. <strong>Higher CRF</strong> = More compressed, smaller file.</p>
                         </div>
@@ -606,7 +606,7 @@
                             <button class="preset-btn" data-quality="23">Balanced</button>
                             <button class="preset-btn" data-quality="26">Compressed</button>
                             <button class="preset-btn" data-quality="30">Small File</button>
-                            <button class="preset-btn" data-quality="50">Dog 💩</button>
+                            <button class="preset-btn" data-quality="40">Dog 💩</button>
                         </div>
                     </div>
                 </div>
@@ -637,8 +637,16 @@
             <div class="section hidden" id="download-section">
                 <h2>3. Download Processed Video</h2>
                 <p style="margin-bottom: 20px;">Your video has been processed successfully!</p>
+                
+                <div class="video-preview">
+                    <div class="video-wrapper">
+                        <video id="processed-video-preview" controls style="max-width: 100%; max-height: 500px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);"></video>
+                    </div>
+                </div>
+                
                 <div class="button-group">
                     <button class="btn" id="download-btn">⬇️ Download Video</button>
+                    <button class="btn btn-secondary" id="back-to-edit-btn">✏️ Make More Changes</button>
                     <button class="btn btn-secondary" id="new-video-btn">🎬 Process Another Video</button>
                 </div>
             </div>
@@ -987,11 +995,12 @@
             
             // Update quality label
             let qualityLabel = 'Balanced';
-            if (compressionQuality <= 19) qualityLabel = 'Best Quality';
-            else if (compressionQuality <= 22) qualityLabel = 'High';
+            if (compressionQuality <= 19) qualityLabel = 'Overkill';
+            else if (compressionQuality <= 22) qualityLabel = 'Quality';
             else if (compressionQuality <= 25) qualityLabel = 'Balanced';
-            else if (compressionQuality <= 28) qualityLabel = 'Low';
-            else qualityLabel = 'Smallest File';
+            else if (compressionQuality <= 28) qualityLabel = 'Compressed';
+            else if (compressionQuality <= 32) qualityLabel = 'Small File';
+            else qualityLabel = 'Dog 💩';
             
             qualityValueDisplay.textContent = qualityLabel;
         }
@@ -1068,6 +1077,10 @@
                     throw new Error(data.error || 'Processing failed');
                 }
 
+                // Load processed video preview
+                const processedVideoPreview = document.getElementById('processed-video-preview');
+                processedVideoPreview.src = `/preview/${currentFileId}`;
+                
                 // Show download section
                 document.getElementById('edit-section').classList.add('hidden');
                 document.getElementById('download-section').classList.remove('hidden');
@@ -1086,10 +1099,23 @@
             window.location.href = `/download/${currentFileId}`;
         });
 
+        // Back to edit button
+        document.getElementById('back-to-edit-btn').addEventListener('click', backToEdit);
+        
         // Reset buttons
         document.getElementById('reset-btn').addEventListener('click', resetApp);
         document.getElementById('new-video-btn').addEventListener('click', resetApp);
         
+        function backToEdit() {
+            // Go back to edit section without resetting values
+            document.getElementById('download-section').classList.add('hidden');
+            document.getElementById('edit-section').classList.remove('hidden');
+            
+            // Clear the processed video preview to free memory
+            const processedVideoPreview = document.getElementById('processed-video-preview');
+            processedVideoPreview.src = '';
+        }
+
         async function resetApp() {
             if (currentFileId) {
                 await fetch(`/cleanup/${currentFileId}`, { method: 'DELETE' });