diff --git a/app.py b/app.py index 0dbd257..57a1cc4 100644 --- a/app.py +++ b/app.py @@ -114,6 +114,15 @@ def process_video(): # Build filter complex for crop and scale filters = [] + # Add rotation filter if specified + rotation = data.get('rotation', 0) + if rotation == 90: + filters.append('transpose=1') + elif rotation == 180: + filters.append('transpose=2,transpose=2') + elif rotation == 270: + filters.append('transpose=2') + # Add crop filter if specified crop = data.get('crop') if crop: @@ -136,6 +145,11 @@ def process_video(): if filters: cmd.extend(['-vf', ','.join(filters)]) + # Handle audio + mute_audio = data.get('mute_audio', False) + if mute_audio: + cmd.extend(['-an']) # Remove audio + # Output settings for H.264 MP4 cmd.extend([ '-c:v', 'libx264', diff --git a/templates/index.html b/templates/index.html index 5cd7383..7d6a128 100644 --- a/templates/index.html +++ b/templates/index.html @@ -123,8 +123,14 @@ } .video-preview { - margin: 20px 0; + margin: 20px auto; text-align: center; + position: relative; + display: flex; + justify-content: center; + } + + .video-wrapper { position: relative; display: inline-block; } @@ -217,6 +223,41 @@ transform: translateY(0); } + .quick-actions { + display: flex; + gap: 10px; + margin: 15px 0; + flex-wrap: wrap; + } + + .quick-action-btn { + flex: 1; + min-width: 150px; + padding: 10px 16px; + background: white; + color: #667eea; + border: 2px solid #667eea; + border-radius: 6px; + cursor: pointer; + font-weight: 600; + transition: all 0.3s; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + } + + .quick-action-btn:hover { + background: #667eea; + color: white; + transform: translateY(-1px); + } + + .quick-action-btn.active { + background: #667eea; + color: white; + } + .current-time-display { background: white; padding: 10px 15px; @@ -462,17 +503,58 @@

2. Edit Video

- - -
- -
- - +
+ + +
+ +
+ +
+ + +
+
+ + +
+ +
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+
@@ -523,33 +605,6 @@
- -
- -
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
-
@@ -579,6 +634,8 @@ let cropStartY = 0; let cropRect = null; let scalePercentage = 100; + let rotationDegrees = 0; + let muteAudio = false; // Upload area handling const uploadArea = document.getElementById('upload-area'); @@ -808,6 +865,29 @@ currentTimeDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`; }); + // Quick actions + document.getElementById('mute-audio-btn').addEventListener('click', function() { + muteAudio = !muteAudio; + if (muteAudio) { + this.classList.add('active'); + this.textContent = '🔇 Audio Muted'; + } else { + this.classList.remove('active'); + this.textContent = '🔇 Mute Audio'; + } + }); + + document.getElementById('rotate-btn').addEventListener('click', function() { + rotationDegrees = (rotationDegrees + 90) % 360; + if (rotationDegrees === 0) { + this.classList.remove('active'); + this.textContent = '🔄 Rotate 90°'; + } else { + this.classList.add('active'); + this.textContent = `🔄 Rotated ${rotationDegrees}°`; + } + }); + // Set start time button setStartBtn.addEventListener('click', () => { const currentTime = videoPreview.currentTime; @@ -883,7 +963,9 @@ file_id: currentFileId, start_time: startTime, end_time: endTime, - scale_percentage: scalePercentage + scale_percentage: scalePercentage, + rotation: rotationDegrees, + mute_audio: muteAudio }; if (cropWidth > 0 && cropHeight > 0) { @@ -944,6 +1026,8 @@ videoInfo = null; cropMode = false; cropRect = null; + rotationDegrees = 0; + muteAudio = false; videoPreview.src = ''; videoInput.value = ''; @@ -952,6 +1036,12 @@ cropModeBtn.classList.remove('active'); cropModeBtn.textContent = '🎯 Click to Draw Crop Area'; cropHint.style.display = 'none'; + + // Reset quick actions + document.getElementById('mute-audio-btn').classList.remove('active'); + document.getElementById('mute-audio-btn').textContent = '🔇 Mute Audio'; + document.getElementById('rotate-btn').classList.remove('active'); + document.getElementById('rotate-btn').textContent = '🔄 Rotate 90°'; document.getElementById('upload-section').classList.remove('hidden'); document.getElementById('edit-section').classList.add('hidden');