Skip to main content

​
Development setup

Get started with Video Compressor development by setting up your local environment.
1

Clone the repository

Clone the project to your local machine:
git clone https://github.com/hhussain04/videocompressor.git
cd videocompressor
2

Install dependencies

Install the required npm packages:
npm install
This installs:
  • electron (v25.0.0) - Development dependency
  • fluent-ffmpeg (v2.1.2) - FFmpeg wrapper
  • ffmpeg-static (v5.0.0) - Bundled FFmpeg binary
3

Start the application

Launch the Electron app in development mode:
npm start
This runs the electron . command as defined in package.json:6.
The application uses Electron v25.0.0. Make sure you have Node.js 14.0.0 or higher installed.

​
Code structure

Understanding the project structure will help you make effective contributions.

​
Main files

Purpose: Electron main process entry pointKey responsibilities:
  • Create and manage the browser window (main.js:4-16)
  • Handle application lifecycle events (main.js:18-28)
  • Configure security settings and Node.js integration
When to modify:
  • Adding new windows or dialogs
  • Changing window configuration
  • Implementing IPC handlers
  • Adding menu items or tray icons
Purpose: Renderer process logic and video compressionKey responsibilities:
  • Initialize FFmpeg with bundled binary (renderer.js:1-7)
  • Handle file selection and validation (renderer.js:14-20)
  • Execute video compression with progress tracking (renderer.js:32-51)
  • Display compressed videos (renderer.js:57-80)
When to modify:
  • Changing compression settings
  • Adding new FFmpeg features
  • Implementing additional UI interactions
  • Modifying error handling or progress tracking
Purpose: Preload script for version informationKey responsibilities:
  • Display Chrome, Node.js, and Electron versions (preload.js:7-9)
  • Run before the renderer process loads
When to modify:
  • Adding secure IPC communication
  • Exposing safe APIs to the renderer
  • Implementing context bridge for better security
Purpose: Application user interfaceKey components:
  • File input for video selection (index.html:11)
  • Compress button to trigger compression (index.html:12)
  • Progress bar for visual feedback (index.html:15-17)
  • Video container for displaying compressed videos (index.html:14)
When to modify:
  • Adding new UI elements
  • Restructuring the layout
  • Adding new tabs or sections
Purpose: Application styling and themeKey features:
  • Dark theme with Discord-inspired colors (styles.css:3-4)
  • Centered flexbox layout (styles.css:7-11)
  • Styled buttons with hover effects (styles.css:22-34)
  • Animated progress bar (styles.css:36-49)
When to modify:
  • Changing the color scheme
  • Updating component styles
  • Adding responsive design

​
Key functions

Creates the main application window with configured security settings.
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  win.loadFile('index.html');
}
Handles the entire video compression workflow from file selection to output.Flow:
  1. Validates file selection
  2. Reads file as ArrayBuffer
  3. Writes to temporary location
  4. Processes with FFmpeg
  5. Tracks progress and handles errors
  6. Saves to output directory
  7. Cleans up temporary files
Loads and displays compressed videos from the output directory.Features:
  • Reads all files from videooutputs directory
  • Filters for MP4 files
  • Creates video elements with controls
  • Handles loading errors

​
Testing approach

While the project doesn’t currently have automated tests, you should manually test your changes.

​
Manual testing checklist

1

Test compression functionality

  • Select various video formats (MP4, AVI, MOV, etc.)
  • Verify progress bar updates correctly
  • Check that compressed videos play properly
  • Ensure temporary files are cleaned up
2

Test error handling

  • Try compressing invalid or corrupted files
  • Test with very large files
  • Verify error messages display correctly
  • Confirm temporary cleanup happens on errors
3

Test UI interactions

  • Click “View Compressed Videos” tab
  • Verify video playback controls work
  • Test window resizing behavior
  • Check responsive layout at different sizes
4

Test on multiple platforms

  • Windows: Verify window close behavior
  • macOS: Test activate event (clicking dock icon)
  • Linux: Check window manager compatibility
Keep the Developer Tools open during testing (View > Toggle Developer Tools) to monitor console logs and catch JavaScript errors.

​
Console logging

The application includes extensive console logging for debugging:
renderer.js:15,18,26,30,37,42,48
console.log('Compress button clicked');
console.log('No video file selected');
console.log('File loaded into buffer');
console.log('File saved to temporary path:', tempPath);
console.log('Compression progress:', percent + '%');
console.log('Compression complete');
console.error('Compression error:', err);
When adding new features, include similar console logging to aid debugging and testing.

​
How to submit contributions

Follow these guidelines when contributing to the project.

​
Before you start

1

Check existing issues

Review open issues to see if your contribution is already being discussed or worked on.
2

Create an issue

For new features or significant changes, create an issue to discuss your proposal before starting work.
3

Fork the repository

Fork the project to your own GitHub account to work on your changes.

​
Making changes

1

Create a feature branch

Create a descriptive branch name:
git checkout -b feature/add-video-filters
git checkout -b fix/progress-bar-accuracy
git checkout -b docs/update-readme
2

Write clean code

  • Follow the existing code style and formatting
  • Add comments for complex logic
  • Include console logging for debugging
  • Keep functions focused and single-purpose
3

Test thoroughly

Use the manual testing checklist above to verify your changes work correctly.

​
Submitting your contribution

1

Commit your changes

Write clear, descriptive commit messages:
git add .
git commit -m "Add support for custom output directories"
git commit -m "Fix progress bar not resetting after errors"
git commit -m "Update documentation for FFmpeg options"
2

Push to your fork

Push your branch to your GitHub fork:
git push origin feature/add-video-filters
3

Create a pull request

Open a pull request from your fork to the main repository.Include in your PR description:
  • What problem does this solve?
  • How does it work?
  • What testing have you done?
  • Screenshots (for UI changes)
Maintainers will review your pull request and may request changes or ask questions. Be responsive to feedback and willing to make adjustments.

​
Code review guidelines

When your PR is under review:
  • Respond to comments and questions promptly
  • Make requested changes in new commits (don’t force push)
  • Be open to suggestions and alternative approaches
  • Update your PR description if the scope changes

​
Common contribution areas

Here are some areas where contributions are especially welcome:
  • Add support for more compression formats
  • Implement video filters (brightness, contrast, etc.)
  • Add audio compression options
  • Support batch processing multiple files
  • Design a settings panel for compression options
  • Add drag-and-drop file support
  • Implement dark/light theme toggle
  • Create a better video gallery view
  • Implement proper IPC communication
  • Enable context isolation
  • Remove direct Node.js integration
  • Add input validation and sanitization
  • Optimize memory usage for large files
  • Add chunked file reading
  • Implement compression queue
  • Cache compressed videos metadata
  • Add code comments
  • Create architecture diagrams
  • Write API documentation
  • Add troubleshooting guides

​
License

This project is available under the MIT License.
By contributing to this project, you agree that your contributions will be licensed under the MIT License.

​
MIT License terms

The MIT License is a permissive license that allows:
  • Commercial use
  • Modification
  • Distribution
  • Private use
The only requirement is that the license and copyright notice must be included in all copies or substantial portions of the software.
You can find the full license text in the LICENSE file in the project root.

​
Getting help

If you need assistance while contributing:
  • Check existing documentation and code comments
  • Review closed issues for similar problems
  • Open a new issue with your question
  • Reference specific files and line numbers when asking questions
Include relevant console logs, error messages, and steps to reproduce when reporting issues.

Build docs developers (and LLMs) love

Get started for freeTalk to us