ThaMunsta/video-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move button
All checks were successful
Build Images and Deploy / Update-PROD-Stack (push) Successful in 1m13s
Details

Browse Source
This commit is contained in:
Mike Johnston
2026-02-09 19:11:15 -05:00
parent 824601a704
commit c9e471ec4c
1 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
templates/index.html
View File

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