Trim Component

Trim Components

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
Amethyst
Lapis

Autumn Theme

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


const Component = () => {

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

Dark Themes#

Atlantis
Amethyst Dark
Lapis Dark

Atlantis Theme

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


const Component = () => {

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

Custom Themes#

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

Extend a theme you like or defaultTheme
Update the colors you want to change
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'
}

text The text object just contains the text you can edit or modify
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"
        />
    )
}