|
2 | 2 |
|
3 | 3 | Convert your videos to the required format for macOS and iOS App Store app previews. |
4 | 4 |
|
| 5 | +**Why this exists:** When uploading MP4 app recordings to Apple's App Store Connect, uploads often fail silently without any indication why. Apple secretly checks for specific video formatting requirements. This tool applies those formats to your video so it can be properly uploaded. |
| 6 | + |
5 | 7 | ## Features |
6 | 8 |
|
7 | 9 | - Convert videos to macOS App Store format (1920×1080) |
8 | 10 | - Convert videos to iOS App Store format (886×1920) |
9 | | -- Add silent audio track (fixes Apple upload issues) |
10 | | -- Fast server-side processing with native FFmpeg |
11 | | -- Progress tracking for upload and download |
12 | | -- Instant preview of converted videos |
| 11 | +- Add silent audio track (fixes common Apple upload rejections) |
| 12 | +- Fast server-side processing with FFmpeg |
| 13 | +- Desktop-only (video processing requires desktop browser) |
| 14 | + |
| 15 | +## Requirements |
| 16 | + |
| 17 | +### System Requirements |
| 18 | + |
| 19 | +- **Node.js** 18.x or higher |
| 20 | +- **FFmpeg** installed on the server (required for video processing) |
| 21 | + |
| 22 | +### Video Requirements |
| 23 | + |
| 24 | +- Format: MP4 |
| 25 | +- Duration: 15-30 seconds |
| 26 | +- Max file size: 500MB |
13 | 27 |
|
14 | 28 | ## Server Requirements |
15 | 29 |
|
16 | | -This application requires FFmpeg to be installed on the server. For optimal performance, follow these installation instructions: |
| 30 | +This application requires FFmpeg to be installed on the server. |
17 | 31 |
|
18 | 32 | ### macOS |
19 | 33 |
|
20 | 34 | ```bash |
21 | | -# Using Homebrew |
22 | 35 | brew install ffmpeg |
23 | | - |
24 | | -# Verify installation |
25 | 36 | ffmpeg -version |
26 | 37 | ``` |
27 | 38 |
|
28 | 39 | ### Ubuntu/Debian |
29 | 40 |
|
30 | 41 | ```bash |
31 | | -# Update package lists |
32 | 42 | sudo apt update |
33 | | - |
34 | | -# Install FFmpeg |
35 | 43 | sudo apt install -y ffmpeg |
36 | | - |
37 | | -# Verify installation |
38 | 44 | ffmpeg -version |
39 | 45 | ``` |
40 | 46 |
|
41 | 47 | ### CentOS/RHEL/Fedora |
42 | 48 |
|
43 | 49 | ```bash |
44 | | -# For CentOS/RHEL 8 or newer and Fedora |
45 | 50 | sudo dnf install -y ffmpeg ffmpeg-devel |
46 | | - |
47 | | -# Verify installation |
48 | 51 | ffmpeg -version |
49 | 52 | ``` |
50 | 53 |
|
51 | | -### Windows Server |
| 54 | +### Windows |
52 | 55 |
|
53 | | -1. Download FFmpeg from the [official website](https://www.ffmpeg.org/download.html) |
54 | | -2. Extract the files to a folder, e.g., `C:\ffmpeg` |
55 | | -3. Add the `bin` folder to your system PATH |
56 | | -4. Verify by running `ffmpeg -version` in the command prompt |
| 56 | +1. Download FFmpeg from [ffmpeg.org/download.html](https://www.ffmpeg.org/download.html) |
| 57 | +2. Extract to `C:\ffmpeg` |
| 58 | +3. Add `C:\ffmpeg\bin` to system PATH |
| 59 | +4. Verify: `ffmpeg -version` |
57 | 60 |
|
58 | 61 | ## Development |
59 | 62 |
|
60 | 63 | ```bash |
61 | 64 | # Install dependencies |
62 | | -pnpm install |
| 65 | +bun install |
63 | 66 |
|
64 | 67 | # Start the development server |
65 | | -pnpm dev |
| 68 | +bun dev |
| 69 | + |
| 70 | +# Run tests |
| 71 | +bun test |
| 72 | + |
| 73 | +# Run tests with coverage |
| 74 | +bun test:coverage |
| 75 | + |
| 76 | +# Lint |
| 77 | +bun lint |
| 78 | + |
| 79 | +# Build for production |
| 80 | +bun run build |
66 | 81 | ``` |
67 | 82 |
|
68 | | -## Building for Production |
| 83 | +## Tech Stack |
69 | 84 |
|
70 | | -```bash |
71 | | -# Build the application |
72 | | -pnpm build |
| 85 | +- **Framework:** Next.js 16 |
| 86 | +- **Language:** TypeScript |
| 87 | +- **Styling:** Tailwind CSS |
| 88 | +- **UI Components:** shadcn/ui + Magic UI |
| 89 | +- **Animation:** Motion (Framer Motion) |
| 90 | +- **Testing:** Vitest + React Testing Library |
| 91 | +- **Video Processing:** FFmpeg (server-side) |
| 92 | + |
| 93 | +## Project Structure |
73 | 94 |
|
74 | | -# Start the production server |
75 | | -pnpm start |
| 95 | +``` |
| 96 | +src/ |
| 97 | +├── app/ # Next.js App Router |
| 98 | +│ ├── api/convert/ # Video conversion API endpoint |
| 99 | +│ └── page.tsx # Main page |
| 100 | +├── components/ |
| 101 | +│ ├── magicui/ # Magic UI components |
| 102 | +│ ├── providers/ # React context providers |
| 103 | +│ ├── ui/ # shadcn/ui components |
| 104 | +│ └── video-convert/ # Video conversion flow |
| 105 | +├── hooks/ # Custom React hooks |
| 106 | +├── lib/ # Utility functions |
| 107 | +├── types/ # TypeScript types |
| 108 | +└── __tests__/ # Test files |
76 | 109 | ``` |
77 | 110 |
|
78 | 111 | ## Deployment |
79 | 112 |
|
80 | | -This application can be deployed to any Node.js hosting platforms that support Next.js, such as: |
| 113 | +Deploy to any Node.js platform that supports Next.js: |
81 | 114 |
|
82 | 115 | - Vercel |
83 | | -- Netlify |
84 | | -- AWS Amplify |
| 116 | +- Railway |
| 117 | +- Render |
85 | 118 | - DigitalOcean App Platform |
86 | | -- Heroku |
| 119 | +- AWS (EC2, ECS, Lambda) |
| 120 | + |
| 121 | +**Important:** Ensure FFmpeg is installed on your deployment server. The app will return a 503 error if FFmpeg is not available. |
| 122 | + |
| 123 | +### Environment Variables |
87 | 124 |
|
88 | | -**Important:** Ensure that FFmpeg is installed on your deployment server for the video conversion to work properly. |
| 125 | +No environment variables are required for basic operation. For production, consider: |
| 126 | + |
| 127 | +```env |
| 128 | +NODE_ENV=production |
| 129 | +``` |
89 | 130 |
|
90 | 131 | ## License |
91 | 132 |
|
|
0 commit comments