Omniclip Documentation

Omniclip is an open-source, browser-based video editor designed for privacy and performance. It uses modern browser APIs like WebCodecs for high-performance rendering directly in the browser.

Key Capabilities:

• Editing: Trimming, splitting, rotating, resizing, and text styling.
• Media Support: Text, Audio, Video (mp4, mov, etc.), and Images.
• Advanced Features: Undo/Redo, transitions, effects (filters), and project management.
• Rendering: Supports various timebases (10-120 fps) and resolutions up to 4k.
• Collaboration: Uses WebRTC for collaborative editing.

Note on Compatibility: Because it relies on WebCodecs, it may not function correctly on older browsers or devices that lack support for these modern APIs.

Omniclip follows a unidirectional data flow model. Data flows in a single direction from actions to state, and from state to components. The architecture is composed of four key layers:

1. State: Holds the application data.
2. Actions: Triggers changes to the state.
3. Controllers: Manages logic and orchestrates actions.
4. Components/Views: The UI layer that renders based on the state.

The project is built using TypeScript and @benev/slate.

To contribute to the Omniclip repository, follow these steps to set up your local environment:

1. Clone the repository:

   git clone git@github.com:omni-media/omniclip.git

2. Install dependencies:

   npm install

3. Build the project:

   npm run build

4. Start the development server:

   npm start

To install the Nippo webfonts, follow these steps to organize your project files:

1. Place the nippo/ folder inside a directory named fonts/.
2. Place the nippo.css file inside your css/ directory.
3. (Optional) If your website filesystem differs from the default, update the url('path') declarations within nippo.css to point to the correct font file locations.
4. Import the nippo.css file at the top of your main stylesheet using the @import rule.

@import url('nippo.css');

To install the Poppins webfont, follow these steps to organize your filesystem and import the styles:

1. Place the poppins/ folder into a directory named fonts/.
2. Place poppins.css into your css/ directory.
3. (Optional) If your website filesystem differs from the default, update the url('path') declarations inside poppins.css to point to the correct font file locations.
4. Import the CSS file at the top of your main stylesheet using @import.

@import url('poppins.css');

You can embed Omniclip's video editing components directly into your own web projects. This allows you to use specific parts of the editor (like the timeline or text tools) or the entire editing experience.

1. Install the package via npm:

   npm install omniclip

2. Register the elements in your JavaScript entry point to make the custom elements available in the DOM:

   import {getComponents, registerElements} from 'omniclip'
   registerElements(getComponents())

3. Add the components to your HTML. You can use specific components or include all of them for the full editor experience:

   • <omni-text></omni-text>: Text editing component.
   • <omni-media></omni-media>: Media handling component.
   • <omni-timeline></omni-timeline>: Timeline management component.

If you are using the Nippo-Variable font family, you can control the font axes using the font-variation-settings rule.

The available axis is:

• wght: Weight, with a range from 200.0 to 700.0.

Once installed, you can apply the Nippo font styles to your elements using the following font-family values:

font-family: Nippo-Extralight;
font-family: Nippo-Light;
font-family: Nippo-Regular;
font-family: Nippo-Medium;
font-family: Nippo-Bold;
font-family: Nippo-Variable;

For the variable font versions (Poppins-Variable or Poppins-VariableItalic), you can control the font weight using the font-variation-settings rule.

The available axis is:

• wght: weight range from 100.0 to 900.0.

Once installed, you can apply the Poppins font family to elements using the following font-family values:

font-family: Poppins-Thin;
font-family: Poppins-ThinItalic;
font-family: Poppins-ExtraLight;
font-family: Poppins-ExtraLightItalic;
font-family: Poppins-Light;
font-family: Poppins-LightItalic;
font-family: Poppins-Regular;
font-family: Poppins-Italic;
font-family: Poppins-Medium;
font-family: Poppins-MediumItalic;
font-family: Poppins-SemiBold;
font-family: Poppins-SemiBoldItalic;
font-family: Poppins-Bold;
font-family: Poppins-BoldItalic;
font-family: Poppins-ExtraBold;
font-family: Poppins-ExtraBoldItalic;
font-family: Poppins-Black;
font-family: Poppins-BlackItalic;
font-family: Poppins-Variable;
font-family: Poppins-VariableItalic;