move button

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,7 +751,11 @@
             cropCanvas.height = video.offsetHeight;
         }
 
-        // Crop mode toggle
+        // 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) {
@@ -767,6 +772,7 @@
                     clearCropCanvas();
                 }
             });
+        }
 
         // Canvas drawing for crop selection
         let isDrawing = false;
@@ -820,9 +826,15 @@
             
             // Exit crop mode
             cropMode = false;
+            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';