From c9e471ec4cde6aa29a382fd9c02e602b7f34c317 Mon Sep 17 00:00:00 2001
From: Mike Johnston <mike@nervesocket.com>
Date: Mon, 9 Feb 2026 19:11:15 -0500
Subject: [PATCH] move button

---
 templates/index.html | 67 +++++++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index bfba13d..b7bd9f0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -543,10 +543,6 @@
                 <!-- Crop Controls -->
                 <div class="form-group">
                     <label>✂️ Crop Video</label>
-                    <div class="video-controls">
-                        <button class="crop-mode-btn" id="crop-mode-btn">🎯 Click to Draw Crop Area</button>
-                        <p class="crop-hint" id="crop-hint" style="display: none;">Click and drag on the video to select crop area</p>
-                    </div>
                     <div class="crop-controls">
                         <div class="form-row">
                             <div>
@@ -644,8 +640,6 @@
         const processLoader = document.getElementById('process-loader');
         const cropCanvas = document.getElementById('crop-canvas');
         const cropCtx = cropCanvas.getContext('2d');
-        const cropModeBtn = document.getElementById('crop-mode-btn');
-        const cropHint = document.getElementById('crop-hint');
         const videoPreview = document.getElementById('video-preview');
         const currentTimeDisplay = document.getElementById('current-time-display');
         const setStartBtn = document.getElementById('set-start-btn');
@@ -709,6 +703,10 @@
                     <p><strong>Resolution:</strong> ${videoInfo.width}x${videoInfo.height}</p>
                     <p><strong>Duration:</strong> ${videoInfo.duration.toFixed(2)} seconds</p>
                     <p><strong>Codec:</strong> ${videoInfo.codec}</p>
+                    <div style="margin-top: 15px; text-align: center;">
+                        <button class="crop-mode-btn" id="crop-mode-btn">🎯 Click to Draw Crop Area</button>
+                        <p class="crop-hint" id="crop-hint" style="display: none;">Click and drag on the video to select crop area</p>
+                    </div>
                 `;
 
                 // Set default values
@@ -720,6 +718,9 @@
                 // Setup canvas for cropping
                 setupCropCanvas();
 
+                // Setup crop mode button (now that it exists)
+                setupCropButton();
+
                 // Show edit section
                 document.getElementById('upload-section').classList.add('hidden');
                 document.getElementById('edit-section').classList.remove('hidden');
@@ -750,23 +751,28 @@
             cropCanvas.height = video.offsetHeight;
         }
 
-        // Crop mode toggle
-        cropModeBtn.addEventListener('click', () => {
-            cropMode = !cropMode;
-            if (cropMode) {
-                cropCanvas.classList.add('active');
-                cropModeBtn.classList.add('active');
-                cropModeBtn.textContent = '❌ Cancel Crop Selection';
-                cropHint.style.display = 'block';
-                document.getElementById('video-preview').pause();
-            } else {
-                cropCanvas.classList.remove('active');
-                cropModeBtn.classList.remove('active');
-                cropModeBtn.textContent = '🎯 Click to Draw Crop Area';
-                cropHint.style.display = 'none';
-                clearCropCanvas();
-            }
-        });
+        // Setup crop button event listener
+        function setupCropButton() {
+            const cropModeBtn = document.getElementById('crop-mode-btn');
+            const cropHint = document.getElementById('crop-hint');
+            
+            cropModeBtn.addEventListener('click', () => {
+                cropMode = !cropMode;
+                if (cropMode) {
+                    cropCanvas.classList.add('active');
+                    cropModeBtn.classList.add('active');
+                    cropModeBtn.textContent = '❌ Cancel Crop Selection';
+                    cropHint.style.display = 'block';
+                    document.getElementById('video-preview').pause();
+                } else {
+                    cropCanvas.classList.remove('active');
+                    cropModeBtn.classList.remove('active');
+                    cropModeBtn.textContent = '🎯 Click to Draw Crop Area';
+                    cropHint.style.display = 'none';
+                    clearCropCanvas();
+                }
+            });
+        }
 
         // Canvas drawing for crop selection
         let isDrawing = false;
@@ -820,9 +826,15 @@
             
             // Exit crop mode
             cropMode = false;
-            cropModeBtn.classList.remove('active');
-            cropModeBtn.textContent = '🎯 Click to Draw Crop Area';
-            cropHint.style.display = 'none';
+            const cropModeBtn = document.getElementById('crop-mode-btn');
+            const cropHint = document.getElementById('crop-hint');
+            if (cropModeBtn) {
+                cropModeBtn.classList.remove('active');
+                cropModeBtn.textContent = '🎯 Click to Draw Crop Area';
+            }
+            if (cropHint) {
+                cropHint.style.display = 'none';
+            }
             
             // Keep the rectangle visible for a moment
             setTimeout(() => {
@@ -1041,9 +1053,6 @@
             videoInput.value = '';
             clearCropCanvas();
             cropCanvas.classList.remove('active');
-            cropModeBtn.classList.remove('active');
-            cropModeBtn.textContent = '🎯 Click to Draw Crop Area';
-            cropHint.style.display = 'none';
             
             // Reset all form inputs
             document.getElementById('start-time').value = '0';