Trim Component

Getting Started

The below code will give you the full Trim Component within your application to play with.

note

type="disabled" only disabled processing, that is when you press the done button.

The rest of the component is fully fucntionally

You can find an interactive demo at api.modfy.video/components

import {Trim} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} type="disabled" />

)

}

Processing

You can learn the basics of processing here

Specific to the Trim component, the callback function in other(change to manual) mode is:

callback(start:number, end:number) => void

You can use this to manually trim the video if you want to

Themes

Examples of themes are shown below

Light Themes

Autumn

import {Trim, Autumn} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} theme={Autumn} type="disabled" />

)

}

Amethyst

import {Trim,Amethyst} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} theme={Amethyst} type="disabled" />

)

}

Lapis

import {Trim, Lapis} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} theme={Lapis} type="disabled" />

)

}

Dark Themes

Atlantis

import {Trim,Atlantis} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} theme={Atlantis} type="disabled" />

)

}

Amethyst Dark

import {Trim,AmethystDark} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} theme={AmethystDark} type="disabled" />

)

}

Lapis Dark

import {Trim, LapisDark} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} theme={LapisDark} type="disabled" />

)

}

Custom Themes

You can easily customize the color of all the elements using custom themes

1. Extend a theme you like or defaultTheme
2. Update the colors you want to change
3. Use theme

import {Trim, DefaultTheme} from '@modfy/react-video-components'

class CustomTheme extends DefaultTheme {

textColor : 'red'

}

const Component = () => {

return (

<Trim src={"/video.mp4"} type="disabled"

theme={CustomTheme}

/>

)

}

These are the following properties you can customize in your themes

interface Theme {

primaryColor: string

textColor: string

textSecondaryColor: string

backgroundColor: string

highlightColor: string

disabledColor: string

accentColor: string

thumbColor: string

thumbHoverColor: string

}

Customization

The below are the full range of customizable properties for style.

type TrimProps ={

src: string

text?: {

fileName?: string

buttonName?: string

}

font?: 'Inter' | 'inherit'

}

1. text The text object just contains the text you can edit or modify
2. font By default, the font used is Inter you can overwrite it and use inherit

An example of some basic customization would be

import {Trim} from '@modfy/react-video-components'

const Component = () => {

return (

<Trim src={"/video.mp4"} type="disabled"

text={{buttonName: 'Finish'}}

font="inherit"

/>

)

}