update readme and context

README.md

@@ -1,15 +1,52 @@
 # 🎬 Simple Video Editor
 
-A lightweight, web-based video editor with an intuitive interface for basic video editing tasks. Built with Flask and FFmpeg, it allows you to trim, crop, resize, and convert videos to H.264 MP4 format.
+A lightweight, web-based video editor with an intuitive interface for basic video editing tasks. Built with Flask and FFmpeg, it allows you to trim, crop, scale, rotate, and convert videos to H.264 MP4 format with interactive visual controls.
 
 ## ✨ Features
 
+### Video Input/Output
 - **📹 Video Upload**: Drag and drop or browse to upload videos (supports MP4, AVI, MOV, MKV, WMV, FLV, WebM)
-- **⏱️ Trim**: Cut videos by specifying start and end times
-- **✂️ Crop**: Crop videos by defining X/Y position and dimensions
-- **📐 Resize**: Change output resolution with preset options (4K, 1080p, 720p, 480p) or custom dimensions
 - **🎯 H.264 Export**: All videos are exported as H.264 MP4 with optimized settings
-- **🖥️ Intuitive UI**: Clean, modern interface with real-time video preview
+- **💾 Smart Filenames**: Downloads preserve original filename with "_processed" suffix and unique timestamp
+- **📊 Video Info**: Displays resolution, duration, codec details
+
+### Editing Features
+
+#### ⏱️ Trim Video
+- **Visual Time Selection**: Play video and click buttons to set trim points at current playback position
+- **Live Time Display**: Shows current video position in real-time (MM:SS.ms format)
+- **Manual Input**: Fine-tune start/end times with precise second inputs
+
+#### ✂️ Crop Video
+- **Interactive Canvas Selection**: Click and draw directly on video to select crop area
+- **Visual Feedback**: Semi-transparent overlay shows what will be removed
+- **Real-time Dimensions**: Displays actual video pixel dimensions while dragging
+- **Manual Input**: Enter exact crop position (X/Y) and dimensions
+- **Automatic Adjustment**: Ensures even dimensions for H.264 compatibility
+
+#### 📐 Output Scale
+- **Percentage-based Scaling**: Scale from 10% to 100% in 5% increments
+- **Preset Options**: Quick buttons for 100%, 75%, 50%, 25%
+- **Smart Cropping**: Scale applies to cropped area (if crop selected) or original video
+- **Live Preview**: Shows final output resolution with even dimensions
+
+#### 💾 Compression Quality
+- **CRF Control**: Adjust H.264 quality from CRF 18 (best) to 32 (smallest)
+- **Smart Presets**: Best Quality, High, Balanced, Low, Smallest File
+- **Visual Feedback**: Shows quality label and CRF value in real-time
+- **File Size Control**: Balance between quality and file size
+
+#### ⚡ Quick Actions
+- **🔇 Mute Audio**: Remove audio track completely
+- **🔄 Rotate**: Rotate video 90°, 180°, 270° or back to original
+- **Visual State**: Buttons show active state and rotation amount
+
+### User Experience
+- **🖥️ Centered Video Preview**: Large, centered video display for easier editing
+- **📱 Responsive Design**: Clean, modern gradient interface
+- **🎨 Visual Feedback**: Button states, loading indicators, error messages
+- **🔄 Reset Controls**: Start over or process another video with clean state
+- **💡 Helpful Hints**: Contextual tips explain how each feature works
 
 ## 🚀 Quick Start
 
@@ -32,26 +69,41 @@ A lightweight, web-based video editor with an intuitive interface for basic vide
    ```
 
 3. **Run the Application**:
-   ```powershell
-   python app.py
-   ```
+The editor provides features in logical order:
 
-4. **Open in Browser**:
-   Navigate to `http://localhost:5000`
+#### 1. Trim Video
+- **Play the video** and pause at desired point
+- Click **"⏮️ Set Start Here"** to mark the beginning
+- Play to the end point and click **"⏭️ Set End Here"**
+- Current video position shows in real-time above buttons
+- Fine-tune with manual second inputs if needed
 
-### Option 2: Run with Docker
+#### 2. Crop Video
+- Click **"🎯 Click to Draw Crop Area"** button (under video info)
+- **Click and drag** on the video to select the area to keep
+- Purple rectangle shows selected area with pixel dimensions
+- Darkened area shows what will be removed
+- Release mouse to apply crop coordinates
+- Or manually enter X/Y position and width/height values
 
-#### Prerequisites
-- Docker installed
-- Docker Compose installed
+#### 3. Output Scale
+- Use slider to scale from 10% to 100%
+- Click preset buttons for quick scaling (100%, 75%, 50%, 25%)
+- Scale applies to cropped area, or full video if no crop
+- Example: 200x400 crop at 50% = 100x200 output
+- Dimensions automatically rounded to even numbers for H.264
 
-#### Steps
-
-1. **Build and Run**:
-   ```bash
-   docker-compose up --build
-   ```
+#### 4. Compression Quality
+- Adjust slider from CRF 18 (best quality) to 32 (smallest file)
+- Default is CRF 23 (balanced)
+- Lower CRF = larger files, better quality
+- Higher CRF = smaller files, more compression
+- Use presets: Best Quality, High, Balanced, Low, Smallest File
 
+#### 5. Quick Actions
+- **Mute Audio**: Click to remove audio track entirely
+- **Rotate 90°**: Click repeatedly to rotate (90° → 180° → 270° → 0°)
+- Buttons show active state when applied
 2. **Open in Browser**:
    Navigate to `http://localhost:5000`
 
@@ -88,15 +140,19 @@ A lightweight, web-based video editor with an intuitive interface for basic vide
 - **Y Position**: Vertical starting point for crop (0 = top edge)
 - **Crop Width**: Width of the cropped area
 - **Crop Height**: Height of the cropped area
-- Leave empty to skip cropping
-
-### Step 3: Process and Download
-- Click **"🎬 Process Video"** to start encoding
-- Wait for processing to complete (time depends on video length and settings)
-- Click **"⬇️ Download Video"** to save the processed file
-
-## 🛠️ Technical Details
+- Leave eUser-adjustable (18-32, default 23)
+  - Audio codec: AAC at 128kbps (unless muted)
+  - Rotation: FFmpeg transpose filter
+  - Even dimensions: Automatic rounding for H.264 compatibility
+  - Fast start enabled for web streaming
 
+### Frontend
+- Pure HTML, CSS, and JavaScript (no frameworks)
+- HTML5 Canvas for interactive crop selection
+- Real-time video metadata display
+- Responsive gradient design
+- Drag-and-drop file upload
+- Live updating scales and quality indicators
 ### Backend
 - **Framework**: Flask 3.0
 - **Video Processing**: FFmpeg with libx264 encoder
@@ -118,10 +174,17 @@ A lightweight, web-based video editor with an intuitive interface for basic vide
 ```
 editor/
 ├── app.py                 # Flask backend application
-├── templates/
-│   └── index.html        # Frontend UI
-├── requirements.txt      # Python dependencies
-├── Dockerfile           # Docker image configuration
+The quality is now user-adjustable via the UI. Default backend settings in `app.py`:
+```python
+'-crf', str(quality),  # User-selected CRF (18-32)
+'-preset', 'medium',  # ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
+```
+
+### Scaling and Dimensions
+Scale is percentage-based and ensures H.264 compatibility:
+```python
+# Force even dimensions
+scale_filter = f"scale=trunc(iw*{scale_percentage/100}/2)*2:trunc(ih*{scale_percentage/100}/2)*2"
 ├── docker-compose.yml   # Docker Compose configuration
 ├── .gitignore          # Git ignore rules
 ├── uploads/            # Temporary upload storage (auto-created)
@@ -131,6 +194,11 @@ editor/
 ## 🔧 Configuration
 
 ### File Size Limit
+- Odd dimensions error: The app now auto-rounds to even dimensions
+
+### Crop selection not accurate
+- The displayed dimensions while dragging show actual video pixels (not screen pixels)
+- Canvas automatically scales between display size and actual video resolution
 Edit in `app.py`:
 ```python
 app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB
@@ -159,21 +227,40 @@ Edit in `app.py` (process_video function):
 - Check FFmpeg console output in the terminal
 
 ### Upload fails
-- Verify file size is under 500MB
-- Check file format is supported
-- Ensure `uploads/` folder has write permissions
+- Ve<56> Feature Workflow Examples
 
-## 🔒 Security Considerations
+### Example 1: Create Social Media Clip
+1. Upload full-length video
+2. Play and set start/end to extract 15-second segment
+3. Draw crop to make it vertical (9:16)
+4. Scale to 50% for smaller file
+5. Set quality to "High" (CRF 21)
+6. Process and download
 
-**Note**: This application is designed for local or self-hosted use. For production deployment:
+### Example 2: Fix Phone Video
+1. Upload sideways phone video
+2. Click "Rotate 90°" once or multiple times
+3. Optionally crop edges
+4. Keep scale at 100%
+5. Set quality to "Balanced" (CRF 23)
+6. Process and download
 
-1. Add authentication/authorization
-2. Implement rate limiting
-3. Validate and sanitize all inputs
-4. Add HTTPS support
-5. Configure proper CORS policies
-6. Implement file cleanup routines
-7. Add virus scanning for uploaded files
+### Example 3: Create Silent GIF-style Video
+1. Upload video
+2. Trim to desired segment
+3. Click "Mute Audio"
+4. Scale to 25% for tiny file size
+5. Set quality to "Low" (CRF 26)
+6. Process for small, silent video
+
+## 🎯 Design Philosophy
+
+This editor prioritizes:
+- **Simplicity**: No complex timeline or multi-track editing
+- **Visual Feedback**: See exactly what you're doing with live previews
+- **Speed**: Quick single-video processing without render queues
+- **Accessibility**: No installation needed (web-based)
+- **Self-hosting**: Run locally or deploy privately with Docker
 
 ## 📝 License
 
@@ -181,6 +268,11 @@ This project is provided as-is for personal and educational use.
 
 ## 🤝 Contributing
 
+Feel free to fork, modify, and submit pull requests for improvements!
+This project is provided as-is for personal and educational use.
+
+## 🤝 Contributing
+
 Feel free to fork, modify, and submit pull requests for improvements!
 
 ## 💡 Future Enhancements