@twick/timeline / Exports

@twick/timeline

Table of contents

Classes

• AudioElement
• CaptionElement
• CircleElement
• ElementAdder
• ElementAnimation
• ElementCloner
• ElementDeserializer
• ElementFrameEffect
• ElementRemover
• ElementSerializer
• ElementSplitter
• ElementTextEffect
• ElementUpdater
• ElementValidator
• IconElement
• ImageElement
• RectElement
• TextElement
• TimelineEditor
• Track
• TrackElement
• ValidationError
• VideoElement

Interfaces

• ElementVisitor
• SplitResult
• TimelineProviderProps

Type Aliases

• Animation
• AudioProps
• CaptionProps
• CircleProps
• Colors
• ElementJSON
• Fonts
• Frame
• FrameEffect
• FrameEffectProps
• IconProps
• ImageProps
• ObjectFit
• Position
• ProjectJSON
• RectProps
• Size
• SizeArray
• TextAlign
• TextEffect
• TextProps
• TimelineContextType
• TrackJSON
• VideoProps

Variables

• CAPTION_COLOR
• CAPTION_FONT
• CAPTION_STYLE
• CAPTION_STYLE_OPTIONS
• PLAYER_STATE
• PROCESS_STATE
• TIMELINE_ACTION
• TIMELINE_ELEMENT_TYPE
• WORDS_PER_PHRASE

Functions

• TimelineProvider
• canSplitElement
• extractVideoAudio
• generateShortUuid
• getCurrentElements
• getDecimalNumber
• getTotalDuration
• isElementId
• isTrackId
• useTimelineContext

Type Aliases

Animation

Ƭ Animation: Object

Type declaration

Name	Type
animate?	"enter" | "exit" | "both"
direction?	"up" | "down" | "left" | "right" | "center"
intensity?	number
interval?	number
mode?	"in" | "out"
name	string

Defined in

packages/timeline/src/types/index.ts:129

---

AudioProps

Ƭ AudioProps: Object

Type declaration

Name	Type
loop?	boolean
playbackRate?	number
src	string
time?	number
volume?	number

Defined in

packages/timeline/src/types/index.ts:62

---

CaptionProps

Ƭ CaptionProps: Object

Type declaration

Name	Type
color?	{ background?: string ; highlight?: string ; text?: string }
color.background?	string
color.highlight?	string
color.text?	string
font?	{ family?: string ; fill?: string ; size?: number }
font.family?	string
font.fill?	string
font.size?	number
pos?	{ x: number ; y: number }
pos.x	number
pos.y	number

Defined in

packages/timeline/src/types/index.ts:70

---

CircleProps

Ƭ CircleProps: Object

Type declaration

Name	Type
fill	string
radius	number

Defined in

packages/timeline/src/types/index.ts:87

---

Colors

Ƭ Colors: Object

Type declaration

Name	Type
background?	string
highlight?	string
text?	string

Defined in

packages/timeline/src/types/index.ts:1

---

ElementJSON

Ƭ ElementJSON: Object

Type declaration

Name	Type
animation?	Animation
backgroundColor?	string
e	number
frame?	Frame
frameEffects?	FrameEffect[]
id	string
mediaDuration?	number
name	string
objectFit?	ObjectFit
props?	{ [key: string]: any; capStyle?: string ; hWords?: Record<string, any> ; mute?: boolean ; play?: boolean ; playbackRate?: number ; size?: [number, number] ; src?: string ; text?: string ; time?: number ; videoFilter?: string }
props.capStyle?	string
props.hWords?	Record<string, any>
props.mute?	boolean
props.play?	boolean
props.playbackRate?	number
props.size?	[number, number]
props.src?	string
props.text?	string
props.time?	number
props.videoFilter?	string
s	number
t?	string
textEffect?	TextEffect
trackId	string
trackType?	string
type	string

Defined in

packages/timeline/src/types/index.ts:138

---

Fonts

Ƭ Fonts: Object

Type declaration

Name	Type
family?	string
size?	number
style?	string
weight?	number

Defined in

packages/timeline/src/types/index.ts:7

---

Frame

Ƭ Frame: Object

Type declaration

Name	Type
fill?	string
size?	[number, number]
stroke?	string
strokeWidth?	number
x?	number
y?	number

Defined in

packages/timeline/src/types/index.ts:33

---

FrameEffect

Ƭ FrameEffect: Object

Type declaration

Name	Type
e	number
props	FrameEffectProps
s	number

Defined in

packages/timeline/src/types/index.ts:52

---

FrameEffectProps

Ƭ FrameEffectProps: Object

Type declaration

Name	Type
elementPosition?	Position
framePosition	Position
frameShape	"circle" | "rect"
frameSize	SizeArray
objectFit?	ObjectFit
radius?	number
transitionDuration?	number
transitionEasing?	string

Defined in

packages/timeline/src/types/index.ts:42

---

IconProps

Ƭ IconProps: Object

Type declaration

Name	Type
size	Size
src	string

Defined in

packages/timeline/src/types/index.ts:92

---

ImageProps

Ƭ ImageProps: Object

Type declaration

Name	Type
mediaFilter?	string
src	string

Defined in

packages/timeline/src/types/index.ts:97

---

ObjectFit

Ƭ ObjectFit: "cover" | "contain" | "fill" | "none"

Defined in

packages/timeline/src/types/index.ts:58

---

Position

Ƭ Position: Object

Type declaration

Name	Type
x	number
y	number

Defined in

packages/timeline/src/types/index.ts:14

---

ProjectJSON

Ƭ ProjectJSON: Object

Type declaration

Name	Type
tracks	TrackJSON[]
version	number

Defined in

packages/timeline/src/types/index.ts:185

---

RectProps

Ƭ RectProps: Object

Type declaration

Name	Type
fill	string
height	number
width	number

Defined in

packages/timeline/src/types/index.ts:102

---

Size

Ƭ Size: Object

Type declaration

Name	Type
height	number
width	number

Defined in

packages/timeline/src/types/index.ts:26

---

SizeArray

Ƭ SizeArray: [number, number]

Defined in

packages/timeline/src/types/index.ts:31

---

TextAlign

Ƭ TextAlign: "left" | "center" | "right"

Defined in

packages/timeline/src/types/index.ts:60

---

TextEffect

Ƭ TextEffect: Object

Type declaration

Name	Type
bufferTime?	number
delay?	number
duration?	number
name	string

Defined in

packages/timeline/src/types/index.ts:19

---

TextProps

Ƭ TextProps: Object

Type declaration

Name	Type
fill?	string
fontFamily?	string
fontSize?	number
fontStyle?	"normal" | "italic"
fontWeight?	number
lineWidth?	number
rotation?	number
stroke?	string
text	string
textAlign?	TextAlign

Defined in

packages/timeline/src/types/index.ts:108

---

TimelineContextType

Ƭ TimelineContextType: Object

Type declaration

Name	Type
canRedo	boolean
canUndo	boolean
changeLog	number
contextId	string
editor	TimelineEditor
present	ProjectJSON | null
selectedItem	Track | TrackElement | null
setSelectedItem	(item: Track | TrackElement | null) => void
setTimelineAction	(type: string, payload: any) => void
timelineAction	{ payload: any ; type: string }
timelineAction.payload	any
timelineAction.type	string
totalDuration	number

Defined in

packages/timeline/src/context/timeline-context.tsx:19

---

TrackJSON

Ƭ TrackJSON: Object

Type declaration

Name	Type
allowOverlap?	boolean
elements	ElementJSON[]
id	string
name	string
props?	{ capStyle?: string ; colors?: Colors ; font?: Fonts ; hWords?: Record<string, any> ; pos?: Position ; wordsPerPhrase?: number }
props.capStyle?	string
props.colors?	Colors
props.font?	Fonts
props.hWords?	Record<string, any>
props.pos?	Position
props.wordsPerPhrase?	number
type	string

Defined in

packages/timeline/src/types/index.ts:169

---

VideoProps

Ƭ VideoProps: Object

Type declaration

Name	Type
mediaFilter?	string
playbackRate?	number
src	string
time?	number
volume?	number

Defined in

packages/timeline/src/types/index.ts:121

Variables

CAPTION_COLOR

• Const CAPTION_COLOR: Object

Type declaration

Name	Type
bgColor	string
highlight	string
text	string

Defined in

packages/timeline/src/utils/constants.ts:32

---

CAPTION_FONT

• Const CAPTION_FONT: Object

Type declaration

Name	Type
size	number

Defined in

packages/timeline/src/utils/constants.ts:28

---

CAPTION_STYLE

• Const CAPTION_STYLE: Object

Type declaration

Name	Type
WORD_BG_HIGHLIGHT	string
WORD_BY_WORD	string
WORD_BY_WORD_WITH_BG	string

Defined in

packages/timeline/src/utils/constants.ts:7

---

CAPTION_STYLE_OPTIONS

• Const CAPTION_STYLE_OPTIONS: Object

Defined in

packages/timeline/src/utils/constants.ts:13

---

PLAYER_STATE

• Const PLAYER_STATE: Object

Type declaration

Name	Type
PAUSED	string
PLAYING	string
REFRESH	string

Defined in

packages/timeline/src/utils/constants.ts:1

---

PROCESS_STATE

• Const PROCESS_STATE: Object

Type declaration

Name	Type
COMPLETED	string
FAILED	string
IDLE	string
PROCESSING	string

Defined in

packages/timeline/src/utils/constants.ts:58

---

TIMELINE_ACTION

• Const TIMELINE_ACTION: Object

Type declaration

Name	Type
NONE	string
ON_PLAYER_UPDATED	string
SET_PLAYER_STATE	string
UPDATE_PLAYER_DATA	string

Defined in

packages/timeline/src/utils/constants.ts:40

---

TIMELINE_ELEMENT_TYPE

• Const TIMELINE_ELEMENT_TYPE: Object

Type declaration

Name	Type
AUDIO	string
CAPTION	string
CIRCLE	string
ICON	string
IMAGE	string
RECT	string
TEXT	string
VIDEO	string

Defined in

packages/timeline/src/utils/constants.ts:47

---

WORDS_PER_PHRASE

• Const WORDS_PER_PHRASE: 4

Defined in

packages/timeline/src/utils/constants.ts:38

Functions

TimelineProvider

▸ TimelineProvider(«destructured»): Element

Parameters

Name	Type
«destructured»	TimelineProviderProps

Returns

Element

Defined in

packages/timeline/src/context/timeline-context.tsx:152

---

canSplitElement

▸ canSplitElement(element, currentTime): boolean

Parameters

Name	Type
element	TrackElement
currentTime	number

Returns

boolean

Defined in

packages/timeline/src/utils/timeline.utils.ts:57

---

extractVideoAudio

▸ extractVideoAudio(tracks, duration): Promise<any>

Parameters

Name	Type
tracks	Track[]
duration	number

Returns

Promise<any>

Defined in

packages/timeline/src/utils/timeline.utils.ts:64

---

generateShortUuid

▸ generateShortUuid(): string

Returns

string

Defined in

packages/timeline/src/utils/timeline.utils.ts:25

---

getCurrentElements

▸ getCurrentElements(currentTime, tracks): Readonly<TrackElement>[]

Parameters

Name	Type
currentTime	number
tracks	Track[]

Returns

Readonly<TrackElement>[]

Defined in

packages/timeline/src/utils/timeline.utils.ts:33

---

getDecimalNumber

▸ getDecimalNumber(num, precision?): number

Parameters

Name	Type	Default value
num	number	undefined
precision	number	3

Returns

number

Defined in

packages/timeline/src/utils/timeline.utils.ts:7

---

getTotalDuration

▸ getTotalDuration(tracks): number

Parameters

Name	Type
tracks	TrackJSON[]

Returns

number

Defined in

packages/timeline/src/utils/timeline.utils.ts:11

---

isElementId

▸ isElementId(id): boolean

Parameters

Name	Type
id	string

Returns

boolean

Defined in

packages/timeline/src/utils/timeline.utils.ts:61

---

isTrackId

▸ isTrackId(id): boolean

Parameters

Name	Type
id	string

Returns

boolean

Defined in

packages/timeline/src/utils/timeline.utils.ts:62

---

useTimelineContext

▸ useTimelineContext(): TimelineContextType

Returns

TimelineContextType

Defined in

packages/timeline/src/context/timeline-context.tsx:186