loreal-video-optimizer/START_WITH_MAMP.md

🚀 Start with MAMP - Quick Guide

What You Need Running

The app needs TWO things running at the same time:

1. Python Backend (video processing) - Port 5000
2. MAMP Frontend (user interface) - Port 8888 (or your MAMP port)

---

Step 1: Start Python Backend

Open Terminal and run:

cd /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/backend
source ../venv/bin/activate
python app.py

✅ Leave this terminal open! You should see:

Starting Video Optimization Server...
 * Running on http://127.0.0.1:5000

---

Step 2: Configure MAMP

1. Open MAMP application
2. Click Preferences → Web Server
3. Set Document Root to:

   /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/frontend
   

4. Click OK
5. Click Start Servers

---

Step 3: Open in Browser

Go to: http://localhost:8888/index.html

(Or use your MAMP port if different)

---

✅ It's Working When:

• You see the black page with yellow "Video Optimizer" title
• You can drag & drop a video file
• After uploading, you see platform options (Meta, TikTok, YouTube, etc.)
• Video specifications display below each player after conversion
• Mute buttons work independently for each video

---

✨ New Features You'll See

1. Aspect Ratio Warnings

Yellow Warning (Page 1 - Configuration):

• Shows when you select an aspect ratio different from your original video
• Helps prevent accidental distortion before converting

Red Warning (Page 2 - Comparison):

• Shows when aspect ratio was changed during conversion
• Red outline with glow effect around optimized video
• Visual alert to check for distortion

2. Video Specifications

Below each video player:

• Platform - Shows target platform (Optimized) or "Unknown" (Original)
• Resolution - Exact pixel dimensions
• Aspect Ratio - Format ratio (16:9, 1:1, etc.)
• Codec - Video codec used (H264, H265, VP9)
• Bitrate - Video bitrate in kbps
• Duration - Video length
• File Size - Total file size

3. Mute Controls

• 🔊 Mute/🔇 Unmute button for each video
• Listen to one video at a time or both together
• Great for comparing audio quality
• Button highlights when muted

4. File Size Reduction

At the top of comparison page:

• Original file size
• Optimized file size
• Reduction percentage (typically 20-40%)

---

❌ Troubleshooting "Failed to fetch"

Problem: Upload fails with "Failed to fetch"

Check 1: Is Python backend running?

curl http://localhost:5000/api/health

Should return:

{
  "status": "ok",
  "ffmpeg_installed": true
}

Check 2: Open browser console (F12) and look for errors

Check 3: Make sure frontend/config.js has:

API_BASE: 'http://localhost:5000/api'

---

Quick Test

Test Backend Only:

# In terminal
curl http://localhost:5000/api/platforms

Should show a JSON response with platform data.

Test Frontend:

Open http://localhost:8888/index.html in browser - page should load with black background and yellow title.

---

Stop Everything

Stop Backend:

Press Ctrl+C in the terminal running Python

Stop MAMP:

Click "Stop Servers" in MAMP application

---

File Locations

• Frontend files: /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/frontend/
• Backend files: /Users/daveporter/Desktop/CODING-2024/Loreal-FIle-Reduction/backend/
• Config: frontend/config.js (change API endpoint here if needed)

---

Current Status

✅ Python backend is ready (activate venv and run app.py) ✅ All platform configurations loaded (21 total) ✅ FFmpeg is installed and detected ✅ Ready to accept requests from MAMP frontend ✅ New features: Mute controls, video specs, aspect ratio warnings

Next: Configure MAMP and open http://localhost:8888/index.html

---

🎯 Usage Flow

1. Upload - Drag & drop video file
2. Detect - Filename auto-detection works (or manual selection)
3. Warn - Yellow warning if aspect ratio will change
4. Convert - Click button, watch progress bar
5. Compare - See both videos side-by-side with full specs
6. Alert - Red warning and outline if aspect ratio was changed
7. Listen - Use mute controls to compare audio
8. Download - Get optimized file

---

💡 Tips for MAMP Users

1. Always start backend first before opening MAMP
2. Check terminal for backend logs and errors
3. Use browser console (F12) to debug frontend issues
4. Verify document root is set to frontend folder
5. Port 5000 must be available for backend

---

📚 Need More Help?

• MAMP_SETUP.md - Detailed MAMP setup and troubleshooting
• README.md - Complete application documentation
• TESTING.md - Testing procedures

---

Repository: https://bitbucket.org/zlalani/loreal-video-optimizer