OpenCut/.cursor/rules/codebase-index.mdc

1716 lines
39 KiB
Plaintext

---
alwaysApply: true
---
# video-editor-oss Codebase Index
**This file provides an index of exported functions, types, interfaces, classes, and constants in your codebase.**
Updated in real-time by Twiggy. Use this to discover existing utilities and avoid duplicating code.
## How to Use
When implementing new features:
1. Check if similar functionality already exists
2. Reuse existing types and utilities
3. Understand the API surface of your codebase
```typescript
## apps/web/src/constants
editor-constants.ts
export const PLATFORM_LAYOUTS: Record<TPlatformLayout, string>
export const PANEL_CONFIG
export-constants.ts
export const DEFAULT_EXPORT_OPTIONS
export const EXPORT_MIME_TYPES
font-constants.ts
export interface FontOption {
value: string
label: string
category: "system" | "google" | "custom"
weights?: number[]
hasClassName?: boolean
}
export const FONT_OPTIONS: FontOption[]
export const DEFAULT_FONT
export type FontFamily = (typeof FONT_OPTIONS)[number]["value"]
export const getFontByValue = (value: string): FontOption | undefined => ...
export const getGoogleFonts = (): FontOption[] => ...
export const getSystemFonts = (): FontOption[] => ...
language-constants.ts
export const LANGUAGES
project-constants.ts
export const DEFAULT_CANVAS_PRESETS: TCanvasSize[]
export const FPS_PRESETS
export const BLUR_INTENSITY_PRESETS: { label: string; value: number }[]
export const DEFAULT_CANVAS_SIZE: TCanvasSize
export const DEFAULT_FPS
export const DEFAULT_BLUR_INTENSITY
export const DEFAULT_COLOR
site-constants.ts
export const SITE_URL
export const SITE_INFO
export type ExternalTool = {
name: string;
description: string;
url: string;
icon: React.ElementType;
}
export const EXTERNAL_TOOLS: ExternalTool[]
export const DEFAULT_LOGO_URL
export const SOCIAL_LINKS
export type Sponsor = {
name: string;
url: string;
logo: string;
description: string;
}
export const SPONSORS: Sponsor[]
stickers-constants.ts
export const STICKER_CATEGORIES
export const STICKER_CATEGORY_CONFIG: Record<
(typeof STICKER_CATEGORIES)[number],
string | undefined
>
text-constants.ts
export const DEFAULT_TEXT_ELEMENT: Omit<TextElement, "id">
timeline-constants.tsx
export const TRACK_COLORS: Record<TrackType, { background: string }>
export const TRACK_HEIGHTS: Record<TrackType, number>
export const TRACK_GAP
export const TIMELINE_CONSTANTS
export const TRACK_ICONS: Record<TrackType, React.ReactNode>
transcription-constants.ts
export const TRANSCRIPTION_LANGUAGES
export const TRANSCRIPTION_MODELS: TranscriptionModel[]
export const DEFAULT_TRANSCRIPTION_MODEL: TranscriptionModelId
export const DEFAULT_CHUNK_LENGTH_SECONDS
export const DEFAULT_STRIDE_SECONDS
export const DEFAULT_WORDS_PER_CAPTION
export const MIN_CAPTION_DURATION_SECONDS
## apps/web/src/core
index.ts
export class EditorCore {
instance: EditorCore | null
command: CommandManager
playback: PlaybackManager
timeline: TimelineManager
scenes: ScenesManager
project: ProjectManager
media: MediaManager
renderer: RendererManager
save: SaveManager
static getInstance(): EditorCore
static reset(): void
}
## apps/web/src/hooks
use-editor.ts
export function useEditor(): EditorCore
use-file-upload.ts
export function useFileUpload({
accept,
multiple,
onFilesSelected,
}: UseFileUploadOptions = {})
use-infinite-scroll.ts
export function useInfiniteScroll({
onLoadMore,
hasMore,
isLoading,
threshold = 200,
enabled = true,
}: UseInfiniteScrollOptions)
use-keybindings.ts
export function useKeybindingsListener()
export function useKeybindingDisabler()
export const bindings
use-keyboard-shortcuts-help.ts
export interface KeyboardShortcut {
id: string
keys: string[]
description: string
category: string
action: TAction
icon?: React.ReactNode
}
export function useKeyboardShortcutsHelp()
use-mobile.ts
export function useIsMobile()
use-raf-loop.ts
export function useRafLoop(callback: ({ time }: { time: number }) => void)
use-reveal-item.ts
export function useRevealItem(
highlightId: string | null,
onClearHighlight: () => void,
highlightDuration = 1000,
)
use-sound-search.ts
export function useSoundSearch({
query,
commercialOnly,
}: {
query: string;
commercialOnly: boolean;
})
## apps/web/src/hooks/actions
use-action-handler.ts
export function useActionHandler(
action: A,
handler: TActionFunc<A>,
isActive: TActionHandlerOptions,
)
use-editor-actions.ts
export function useEditorActions()
## apps/web/src/hooks/timeline
use-edge-auto-scroll.ts
export function useEdgeAutoScroll({
isActive,
getMouseClientX,
rulerScrollRef,
tracksScrollRef,
contentWidth,
edgeThreshold = 100,
maxScrollSpeed = 15,
}: UseEdgeAutoScrollParams): void
use-scroll-sync.ts
export function useScrollSync({
rulerScrollRef,
tracksScrollRef,
trackLabelsScrollRef,
bookmarksScrollRef,
}: UseScrollSyncProps)
use-selection-box.ts
export function useSelectionBox({
containerRef,
onSelectionComplete,
isEnabled = true,
tracksScrollRef,
zoomLevel,
}: UseSelectionBoxProps)
use-snap-indicator-position.ts
export function useSnapIndicatorPosition({
snapPoint,
zoomLevel,
tracks,
timelineRef,
trackLabelsRef,
tracksScrollRef,
}: UseSnapIndicatorPositionParams): SnapIndicatorPosition
use-timeline-drag-drop.ts
export function useTimelineDragDrop({
containerRef,
zoomLevel,
isSnappingEnabled = true,
}: UseTimelineDragDropProps)
use-timeline-playhead.ts
export function useTimelinePlayhead({
zoomLevel,
rulerRef,
rulerScrollRef,
tracksScrollRef,
playheadRef,
}: UseTimelinePlayheadProps)
use-timeline-seek.ts
export function useTimelineSeek({
playheadRef,
trackLabelsRef,
rulerScrollRef,
tracksScrollRef,
zoomLevel,
duration,
isSelecting,
clearSelectedElements,
seek,
}: UseTimelineSeekProps)
use-timeline-snapping.ts
export interface SnapPoint {
time: number
type: "element-start" | "element-end" | "playhead"
elementId?: string
trackId?: string
}
export interface SnapResult {
snappedTime: number
snapPoint: SnapPoint | null
snapDistance: number
}
export interface UseTimelineSnappingOptions {
snapThreshold?: number
enableElementSnapping?: boolean
enablePlayheadSnapping?: boolean
}
export function useTimelineSnapping({
snapThreshold = 10,
enableElementSnapping = true,
enablePlayheadSnapping = true,
}: UseTimelineSnappingOptions = {})
use-timeline-zoom.ts
export function useTimelineZoom({
containerRef,
isInTimeline = false,
minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
}: UseTimelineZoomProps): UseTimelineZoomReturn
## apps/web/src/hooks/timeline/element
use-element-interaction.ts
export function useElementInteraction({
zoomLevel,
timelineRef,
tracksContainerRef,
tracksScrollRef,
snappingEnabled,
onSnapPointChange,
}: UseElementInteractionProps)
use-element-resize.ts
export interface ResizeState {
elementId: string
side: "left" | "right"
startX: number
initialTrimStart: number
initialTrimEnd: number
initialStartTime: number
initialDuration: number
}
export function useTimelineElementResize({
element,
track,
zoomLevel,
onSnapPointChange,
onResizeStateChange,
}: UseTimelineElementResizeProps)
use-element-selection.ts
export function useElementSelection()
## apps/web/src/lib
drag-data.ts
export function setDragData({
dataTransfer,
dragData,
}: {
dataTransfer: DataTransfer;
dragData: TimelineDragData;
}): void
export function getDragData({
dataTransfer,
}: {
dataTransfer: DataTransfer;
}): TimelineDragData | null
export function hasDragData({
dataTransfer,
}: {
dataTransfer: DataTransfer;
}): boolean
export function clearDragData(): void
export.ts
export function getExportMimeType({
format,
}: {
format: ExportFormat;
}): string
export function getExportFileExtension({
format,
}: {
format: ExportFormat;
}): string
iconify-api.ts
export const ICONIFY_HOSTS
export interface IconSet {
prefix: string
name: string
total: number
author?: {
name: string;
url?: string;
}
license?: {
title: string;
spdx?: string;
url?: string;
}
samples?: string[]
category?: string
palette?: boolean
}
export interface IconSearchResult {
icons: string[]
total: number
limit: number
start: number
collections: Record<string, IconSet>
}
export interface CollectionInfo {
prefix: string
total: number
title?: string
uncategorized?: string[]
categories?: Record<string, string[]>
hidden?: string[]
aliases?: Record<string, string>
}
export function getCollections(
category?: string,
): Promise<Record<string, IconSet>>
export function getCollection(
prefix: string,
): Promise<CollectionInfo | null>
export function searchIcons(
query: string,
limit: number = 64,
prefixes?: string[],
category?: string,
): Promise<IconSearchResult>
export function buildIconSvgUrl(
host: string,
iconName: string,
params?: {
color?: string;
width?: number;
height?: number;
flip?: "horizontal" | "vertical" | "horizontal,vertical";
rotate?: number | string;
},
): string
export function getIconSvgUrl(
iconName: string,
params?: Parameters<typeof buildIconSvgUrl>[2],
): string
export function downloadSvgAsText(
iconName: string,
params?: Parameters<typeof getIconSvgUrl>[1],
): Promise<string>
export function svgToFile(svgText: string, fileName: string): File
export const POPULAR_COLLECTIONS
export function getCategoriesFromCollections(
collections: Record<string, IconSet>,
): string[]
rate-limit.ts
export const baseRateLimit
export function checkRateLimit({ request }: { request: Request })
scenes.ts
export function getMainScene({ scenes }: { scenes: TScene[] }): TScene | null
export function ensureMainScene({ scenes }: { scenes: TScene[] }): TScene[]
export function buildDefaultScene({
name,
isMain,
}: {
name: string;
isMain: boolean;
}): TScene
export function canDeleteScene({ scene }: { scene: TScene }): {
canDelete: boolean;
reason?: string;
}
export function getFallbackSceneAfterDelete({
scenes,
deletedSceneId,
currentSceneId,
}: {
scenes: TScene[];
deletedSceneId: string;
currentSceneId: string | null;
}): TScene | null
export function findCurrentScene({
scenes,
currentSceneId,
}: {
scenes: TScene[];
currentSceneId: string;
}): TScene | null
export function updateSceneInArray({
scenes,
sceneId,
updates,
}: {
scenes: TScene[];
sceneId: string;
updates: Partial<TScene>;
}): TScene[]
time.ts
export function roundToFrame({
time,
fps,
}: {
time: number;
fps: number;
}): number
export function formatTimeCode({
timeInSeconds,
format = "HH:MM:SS:CS",
fps,
}: {
timeInSeconds: number;
format?: TTimeCode;
fps?: number;
}): string
export function parseTimeCode({
timeCode,
format = "HH:MM:SS:CS",
fps,
}: {
timeCode: string;
format?: TTimeCode;
fps: number;
}): number | null
export function guessTimeCodeFormat({
timeCode,
}: {
timeCode: string;
}): TTimeCode | null
export function timeToFrame({
time,
fps,
}: {
time: number;
fps: number;
}): number
export function frameToTime({
frame,
fps,
}: {
frame: number;
fps: number;
}): number
export function snapTimeToFrame({
time,
fps,
}: {
time: number;
fps: number;
}): number
export function getSnappedSeekTime({
rawTime,
duration,
fps,
}: {
rawTime: number;
duration: number;
fps: number;
}): number
## apps/web/src/lib/actions
definitions.ts
export type TActionCategory = | "playback"
| "navigation"
| "editing"
| "selection"
| "history"
| "timeline"
| "controls"
export interface TActionDefinition {
description: string
category: TActionCategory
defaultShortcuts?: ShortcutKey[]
args?: Record<string, unknown>
}
export const ACTIONS
export type TAction = keyof typeof ACTIONS
export function getActionDefinition(action: TAction): TActionDefinition
export function getDefaultShortcuts(): Record<ShortcutKey, TAction>
registry.ts
export function bindAction(
action: A,
handler: TActionFunc<A>,
)
export function unbindAction(
action: A,
handler: TActionFunc<A>,
)
export const invokeAction = (
action: A,
args?: TArgOfAction<A>,
trigger?: TInvocationTrigger,
) => ...
types.ts
export type TActionArgsMap = {
"seek-forward": { seconds: number } | undefined;
"seek-backward": { seconds: number } | undef...
export type TActionWithArgs = keyof TActionArgsMap
export type TActionWithOptionalArgs = | TActionWithNoArgs
| TKeysWithValueUndefined<TActionArgsMap>
export type TActionWithNoArgs = Exclude<TAction, TActionWithArgs>
export type TArgOfAction<A extends TAction> = A extends TActionWithArgs
? TActionArgsMap[A]
: undefined
export type TActionFunc<A extends TAction> = A extends TActionWithArgs
? (arg: TArgOfAction<A>, trigger?: TInvocationTrigger) => void
: (_?:...
export type TInvocationTrigger = "keypress" | "mouseclick"
export type TBoundActionList = {
[A in TAction]?: Array<TActionFunc<A>>;
}
export type TActionHandlerOptions = | MutableRefObject<boolean>
| boolean
| undefined
## apps/web/src/lib/auth
server.ts
export const auth
export type Auth = typeof auth
## apps/web/src/lib/blog
query.ts
export function getPosts()
export function getTags()
export function getSinglePost({ slug }: { slug: string })
export function getCategories()
export function getAuthors()
export function processHtmlContent({
html,
}: {
html: string;
}): Promise<string>
## apps/web/src/lib/db
index.ts
export const db
schema.ts
export const users
export const sessions
export const accounts
export const verifications
## apps/web/src/lib/gradients
canvas.ts
export function drawCssBackground({
ctx,
width,
height,
css,
}: {
ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
width: number;
height: number;
css: string;
}): void
parser.ts
export type GradientOrientation = LinearOrientation | Array<RadialOrientation>
export type Color = | { type: "hex"; value: string }
| { type: "literal"; value: string }
| { type: "rgb"; value: A...
export type ColorStop = Color & { length?: Distance }
export type GradientAst = {
type: GradientType;
orientation: GradientOrientation | undefined;
colorStops: Array<ColorSto...
export const parseGradient = ({
code,
}: {
code: string;
}): Array<GradientAst> => ...
export const GradientParser
## apps/web/src/lib/media
audio.ts
export type CollectedAudioElement = Omit<
AudioElement,
"type" | "mediaId" | "volume" | "id" | "name" | "sourceType" | "sourceUrl"
...
export function createAudioContext(): AudioContext
export interface DecodedAudio {
samples: Float32Array
sampleRate: number
}
export function decodeAudioToFloat32({
audioBlob,
}: {
audioBlob: Blob;
}): Promise<DecodedAudio>
export function collectAudioElements({
tracks,
mediaAssets,
audioContext,
}: {
tracks: TimelineTrack[];
mediaAssets: MediaAsset[];
audioContext: AudioContext;
}): Promise<CollectedAudioElement[]>
export function collectAudioMixSources({
tracks,
mediaAssets,
}: {
tracks: TimelineTrack[];
mediaAssets: MediaAsset[];
}): Promise<AudioMixSource[]>
export function createTimelineAudioBuffer({
tracks,
mediaAssets,
duration,
sampleRate = 44100,
}: {
tracks: TimelineTrack[];
mediaAssets: MediaAsset[];
duration: number;
sampleRate?: number;
}): Promise<AudioBuffer | null>
media-utils.ts
export const SUPPORTS_AUDIO: readonly MediaType[]
export function mediaSupportsAudio({
media,
}: {
media: MediaAsset | null | undefined;
}): boolean
export const getMediaTypeFromFile = ({
file,
}: {
file: File;
}): MediaType | null => ...
mediabunny.ts
export function getVideoInfo({
videoFile,
}: {
videoFile: File;
}): Promise<{
duration: number;
width: number;
height: number;
fps: number;
}>
export const extractTimelineAudio = ({
tracks,
mediaAssets,
totalDuration,
onProgress,
}: {
tracks: TimelineTrack[];
mediaAssets: MediaAsset[];
totalDuration: number;
onProgress?: (progress: number) => void;
}): Promise<Blob> => ...
processing.ts
export interface ProcessedMediaAsset extends Omit<MediaAsset, "id">
export function generateThumbnail({
videoFile,
timeInSeconds,
}: {
videoFile: File;
timeInSeconds: number;
}): Promise<string>
export function processMediaAssets({
files,
onProgress,
}: {
files: FileList | File[];
onProgress?: ({ progress }: { progress: number }) => void;
}): Promise<ProcessedMediaAsset[]>
## apps/web/src/lib/timeline
bookmarks.ts
export function findBookmarkIndex({
bookmarks,
frameTime,
}: {
bookmarks: number[];
frameTime: number;
}): number
export function isBookmarkAtTime({
bookmarks,
frameTime,
}: {
bookmarks: number[];
frameTime: number;
}): boolean
export function toggleBookmarkInArray({
bookmarks,
frameTime,
}: {
bookmarks: number[];
frameTime: number;
}): number[]
export function removeBookmarkFromArray({
bookmarks,
frameTime,
}: {
bookmarks: number[];
frameTime: number;
}): number[]
export function getFrameTime({
time,
fps,
}: {
time: number;
fps: number;
}): number
drop-utils.ts
export function computeDropTarget({
elementType,
mouseX,
mouseY,
tracks,
playheadTime,
isExternalDrop,
elementDuration,
pixelsPerSecond,
zoomLevel,
verticalDragDirection,
startTimeOverride,
excludeElementId,
}: ComputeDropTargetParams): DropTarget
export function getDropLineY({
dropTarget,
tracks,
}: {
dropTarget: DropTarget;
tracks: TimelineTrack[];
}): number
element-utils.ts
export function canElementHaveAudio(
element: TimelineElement,
)
export function canElementBeHidden(
element: TimelineElement,
)
export function hasMediaId(
element: TimelineElement,
)
export function requiresMediaId({
element,
}: {
element: CreateTimelineElement;
}): boolean
export function checkElementOverlaps({
elements,
}: {
elements: TimelineElement[];
}): boolean
export function resolveElementOverlaps({
elements,
}: {
elements: TimelineElement[];
}): TimelineElement[]
export function wouldElementOverlap({
elements,
startTime,
endTime,
excludeElementId,
}: {
elements: TimelineElement[];
startTime: number;
endTime: number;
excludeElementId?: string;
}): boolean
export function buildTextElement({
raw,
startTime,
}: {
raw: Partial<Omit<TextElement, "type" | "id">>;
startTime: number;
}): CreateTimelineElement
export function buildStickerElement({
iconName,
startTime,
}: {
iconName: string;
startTime: number;
}): CreateStickerElement
export function buildUploadAudioElement({
mediaId,
name,
duration,
startTime,
buffer,
}: {
mediaId: string;
name: string;
duration: number;
startTime: number;
buffer?: AudioBuffer;
}): CreateUploadAudioElement
export function buildLibraryAudioElement({
sourceUrl,
name,
duration,
startTime,
buffer,
}: {
sourceUrl: string;
name: string;
duration: number;
startTime: number;
buffer?: AudioBuffer;
}): CreateLibraryAudioElement
index.ts
export function calculateTotalDuration({
tracks,
}: {
tracks: TimelineTrack[];
}): number
track-utils.ts
export function canTracktHaveAudio(
track: TimelineTrack,
)
export function canTrackBeHidden(
track: TimelineTrack,
)
export function getTrackColor({ type }: { type: TrackType })
export function getTrackClasses({ type }: { type: TrackType })
export function getTrackHeight({ type }: { type: TrackType }): number
export function getCumulativeHeightBefore({
tracks,
trackIndex,
}: {
tracks: Array<{ type: TrackType }>;
trackIndex: number;
}): number
export function getTotalTracksHeight({
tracks,
}: {
tracks: Array<{ type: TrackType }>;
}): number
export function buildEmptyTrack({
id,
type,
name,
}: {
id: string;
type: TrackType;
name?: string;
}): TimelineTrack
export function getDefaultInsertIndexForTrack({
tracks,
trackType,
}: {
tracks: TimelineTrack[];
trackType: TrackType;
}): number
export function getHighestInsertIndexForTrack({
tracks,
trackType,
}: {
tracks: TimelineTrack[];
trackType: TrackType;
}): number
export function isMainTrack(track: TimelineTrack)
export function getMainTrack({
tracks,
}: {
tracks: TimelineTrack[];
}): TimelineTrack | null
export function ensureMainTrack({
tracks,
}: {
tracks: TimelineTrack[];
}): TimelineTrack[]
export function canElementGoOnTrack({
elementType,
trackType,
}: {
elementType: ElementType;
trackType: TrackType;
}): boolean
export function validateElementTrackCompatibility({
element,
track,
}: {
element: { type: ElementType };
track: { type: TrackType };
}): { isValid: boolean; errorMessage?: string }
zoom-utils.ts
export function getTimelineZoomMin({
duration,
containerWidth,
}: {
duration: number;
containerWidth: number | null | undefined;
}): number
## apps/web/src/lib/transcription
caption.ts
export function buildCaptionChunks({
segments,
wordsPerChunk = DEFAULT_WORDS_PER_CAPTION,
minDuration = MIN_CAPTION_DURATION_SECONDS,
}: {
segments: TranscriptionSegment[];
wordsPerChunk?: number;
minDuration?: number;
}): CaptionChunk[]
## apps/web/src/services/media
video-cache.ts
export class VideoCache {
sinks
initPromises
async getFrameAt({
mediaId,
file,
time,
}: {
mediaId: string;
file: File;
time: number;
}): Promise<WrappedCanvas | null>
clearVideo({ mediaId }: { mediaId: string }): void
clearAll(): void
getStats()
}
export const videoCache
## apps/web/src/services/renderer
canvas-renderer.ts
export type CanvasRendererParams = {
width: number;
height: number;
fps: number;
}
export class CanvasRenderer {
canvas: OffscreenCanvas | HTMLCanvasElement
context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D
width: number
height: number
fps: number
constructor({ width, height, fps }: CanvasRendererParams)
setSize({ width, height }: { width: number; height: number })
async render({ node, time }: { node: BaseNode; time: number })
async renderToCanvas({
node,
time,
targetCanvas,
}: {
node: BaseNode;
time: number;
targetCanvas: HTMLCanvasElement;
})
}
scene-builder.ts
export type BuildSceneParams = {
canvasSize: TCanvasSize;
tracks: TimelineTrack[];
mediaAssets: MediaAsset[];
duration: numb...
export function buildScene(params: BuildSceneParams)
scene-exporter.ts
export type ExportFormat = "mp4" | "webm"
export type ExportQuality = "low" | "medium" | "high" | "very_high"
export type SceneExporterEvents = {
progress: [progress: number];
complete: [buffer: ArrayBuffer];
error: [error: Error];
cance...
export class SceneExporter extends EventEmitter<SceneExporterEvents> {
renderer: CanvasRenderer
format: ExportFormat
quality: ExportQuality
includeAudio: boolean
audioBuffer: AudioBuffer
cancelled
constructor(params: ExportParams)
cancel()
async export(rootNode: RootNode)
}
## apps/web/src/services/storage
indexeddb-adapter.ts
export class IndexedDBAdapter implements StorageAdapter<T> {
dbName: string
storeName: string
version: number
constructor(dbName: string, storeName: string, version = 1)
async get(key: string): Promise<T | null>
async set(key: string, value: T): Promise<void>
async remove(key: string): Promise<void>
async list(): Promise<string[]>
async getAll(): Promise<T[]>
async clear(): Promise<void>
}
opfs-adapter.ts
export class OPFSAdapter implements StorageAdapter<File> {
directoryName: string
constructor(directoryName = "media")
async get(key: string): Promise<File | null>
async set(key: string, file: File): Promise<void>
async remove(key: string): Promise<void>
async list(): Promise<string[]>
async clear(): Promise<void>
static isSupported(): boolean
}
storage-service.ts
export const storageService
types.ts
export interface StorageAdapter<T> {
get(key: string): Promise<T | null>
set(key: string, value: T): Promise<void>
remove(key: string): Promise<void>
list(): Promise<string[]>
clear(): Promise<void>
}
export interface MediaAssetData {
id: string
name: string
type: MediaType
size: number
lastModified: number
width?: number
height?: number
duration?: number
fps?: number
ephemeral?: boolean
thumbnailUrl?: string
sourceStickerIconName?: string
}
export type SerializedScene = Omit<TScene, "createdAt" | "updatedAt"> & {
createdAt: string;
updatedAt: string;
}
export type SerializedProjectMetadata = Omit<
TProjectMetadata,
"createdAt" | "updatedAt"
> & {
createdAt: string;
updatedAt: string;
}
export type SerializedProject = Omit<TProject, "metadata" | "scenes"> & {
metadata: SerializedProjectMetadata;
scenes: Serializ...
export interface StorageConfig {
projectsDb: string
mediaDb: string
savedSoundsDb: string
version: number
}
## apps/web/src/services/transcription
index.ts
export const transcriptionService
worker.ts
export type WorkerMessage = | { type: "init"; modelId: string }
| { type: "transcribe"; audio: Float32Array; language: strin...
export type WorkerResponse = | { type: "init-progress"; progress: number }
| { type: "init-complete" }
| { type: "init-error...
## apps/web/src/stores
assets-panel-store.ts
export const TAB_KEYS
export type Tab = (typeof TAB_KEYS)[number]
export const tabs
export const useAssetsPanelStore
editor-store.ts
export const useEditorStore
keybindings-store.ts
export const defaultKeybindings: KeybindingConfig
export interface KeybindingConflict {
key: ShortcutKey
existingAction: TActionWithOptionalArgs
newAction: TActionWithOptionalArgs
}
export const useKeybindingsStore
panel-store.ts
export interface PanelSizes {
tools: number
preview: number
properties: number
mainContent: number
timeline: number
}
export type PanelId = keyof PanelSizes
export const usePanelStore
sounds-store.ts
export const useSoundsStore
stickers-store.ts
export const useStickersStore
text-properties-store.ts
export type TextPropertiesTab = "text" | "transform"
export interface TextPropertiesTabMeta {
value: TextPropertiesTab
label: string
}
export const TEXT_PROPERTIES_TABS: ReadonlyArray<TextPropertiesTabMeta>
export function isTextPropertiesTab(value: string)
export const useTextPropertiesStore
timeline-store.ts
export const useTimelineStore
## apps/web/src/types
assets.ts
export type MediaType = "image" | "video" | "audio"
export interface MediaAsset extends Omit<MediaAssetData, "size" | "lastModified"> {
file: File
url?: string
}
blog.ts
export type Post = {
id: string;
slug: string;
title: string;
content: string;
description: string;
coverImage...
export type Pagination = {
limit: number;
currpage: number;
nextPage: number | null;
prevPage: number | null;
totalIt...
export type MarblePostList = {
posts: Post[];
pagination: Pagination;
}
export type MarblePost = {
post: Post;
}
export type Tag = {
id: string;
name: string;
slug: string;
}
export type MarbleTag = {
tag: Tag;
}
export type MarbleTagList = {
tags: Tag[];
pagination: Pagination;
}
export type Category = {
id: string;
name: string;
slug: string;
}
export type MarbleCategory = {
category: Category;
}
export type MarbleCategoryList = {
categories: Category[];
pagination: Pagination;
}
export type Author = {
id: string;
name: string;
image: string;
}
export type MarbleAuthor = {
author: Author;
}
export type MarbleAuthorList = {
authors: Author[];
pagination: Pagination;
}
drag.ts
export interface MediaDragData extends BaseDragData {
type: "media"
mediaType: "image" | "video" | "audio"
}
export interface TextDragData extends BaseDragData {
type: "text"
content: string
}
export interface StickerDragData extends BaseDragData {
type: "sticker"
iconName: string
}
export type TimelineDragData = MediaDragData | TextDragData | StickerDragData
editor.ts
export type TPlatformLayout = "tiktok"
export.ts
export const EXPORT_QUALITY_VALUES
export const EXPORT_FORMAT_VALUES
export type ExportFormat = (typeof EXPORT_FORMAT_VALUES)[number]
export type ExportQuality = (typeof EXPORT_QUALITY_VALUES)[number]
export interface ExportOptions {
format: ExportFormat
quality: ExportQuality
fps?: number
includeAudio?: boolean
onProgress?: ({ progress }: { progress: number }) => void
onCancel?: () => boolean
}
export interface ExportResult {
success: boolean
buffer?: ArrayBuffer
error?: string
cancelled?: boolean
}
keybinding.ts
export type ModifierKeys = | "ctrl"
| "alt"
| "shift"
| "ctrl+shift"
| "alt+shift"
| "ctrl+alt"
| "ctrl+alt+shift"
export type Key = | "a"
| "b"
| "c"
| "d"
| "e"
| "f"
| "g"
| "h"
| "i"
| "j"
| "k"
| "l"
| "m"
| "n"
...
export type ModifierBasedShortcutKey = `${ModifierKeys}+${Key}`
export type SingleCharacterShortcutKey = `${Key}`
export type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey
export type KeybindingConfig = {
[key in ShortcutKey]?: TActionWithOptionalArgs;
}
language.ts
export type Language = (typeof LANGUAGES)[number]
export type LanguageCode = Language["code"]
project.ts
export type TBackground = | {
type: "color";
color: string;
}
| {
type: "blur";
blurIntensity: number;
}
export interface TCanvasSize {
width: number
height: number
}
export interface TProjectMetadata {
id: string
name: string
thumbnail?: string
createdAt: Date
updatedAt: Date
}
export interface TProjectSettings {
fps: number
canvasSize: TCanvasSize
originalCanvasSize?: TCanvasSize | null
background: TBackground
}
export interface TProject {
metadata: TProjectMetadata
scenes: TScene[]
currentSceneId: string
settings: TProjectSettings
version: number
}
sounds.ts
export interface SoundEffect {
id: number
name: string
description: string
url: string
previewUrl?: string
downloadUrl?: string
duration: number
filesize: number
type: string
channels: number
bitrate: number
bitdepth: number
samplerate: number
username: string
tags: string[]
license: string
created: string
downloads: number
rating: number
ratingCount: number
}
export interface SavedSound {
id: number
name: string
username: string
previewUrl?: string
downloadUrl?: string
duration: number
tags: string[]
license: string
savedAt: string
}
export interface SavedSoundsData {
sounds: SavedSound[]
lastModified: string
}
stickers.ts
export type StickerCategory = (typeof STICKER_CATEGORIES)[number]
time.ts
export type TTimeCode = "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF"
timeline.ts
export interface TScene {
id: string
name: string
isMain: boolean
tracks: TimelineTrack[]
bookmarks: number[]
createdAt: Date
updatedAt: Date
}
export type TrackType = "video" | "text" | "audio" | "sticker"
export interface VideoTrack extends BaseTrack {
type: "video"
elements: (VideoElement | ImageElement)[]
isMain: boolean
muted: boolean
hidden: boolean
}
export interface TextTrack extends BaseTrack {
type: "text"
elements: TextElement[]
hidden: boolean
}
export interface AudioTrack extends BaseTrack {
type: "audio"
elements: AudioElement[]
muted: boolean
}
export interface StickerTrack extends BaseTrack {
type: "sticker"
elements: StickerElement[]
hidden: boolean
}
export type TimelineTrack = VideoTrack | TextTrack | AudioTrack | StickerTrack
export interface Transform {
scale: number
position: {
x: number;
y: number;
}
rotate: number
}
export interface UploadAudioElement extends BaseAudioElement {
sourceType: "upload"
mediaId: string
}
export interface LibraryAudioElement extends BaseAudioElement {
sourceType: "library"
sourceUrl: string
}
export type AudioElement = UploadAudioElement | LibraryAudioElement
export interface VideoElement extends BaseTimelineElement {
type: "video"
mediaId: string
muted?: boolean
hidden?: boolean
transform: Transform
opacity: number
}
export interface ImageElement extends BaseTimelineElement {
type: "image"
mediaId: string
hidden?: boolean
transform: Transform
opacity: number
}
export interface TextElement extends BaseTimelineElement {
type: "text"
content: string
fontSize: number
fontFamily: string
color: string
backgroundColor: string
textAlign: "left" | "center" | "right"
fontWeight: "normal" | "bold"
fontStyle: "normal" | "italic"
textDecoration: "none" | "underline" | "line-through"
hidden?: boolean
transform: Transform
opacity: number
}
export interface StickerElement extends BaseTimelineElement {
type: "sticker"
iconName: string
hidden?: boolean
transform: Transform
opacity: number
color?: string
}
export type TimelineElement = | AudioElement
| VideoElement
| ImageElement
| TextElement
| StickerElement
export type ElementType = TimelineElement["type"]
export type CreateUploadAudioElement = Omit<UploadAudioElement, "id">
export type CreateLibraryAudioElement = Omit<LibraryAudioElement, "id">
export type CreateAudioElement = | CreateUploadAudioElement
| CreateLibraryAudioElement
export type CreateVideoElement = Omit<VideoElement, "id">
export type CreateImageElement = Omit<ImageElement, "id">
export type CreateTextElement = Omit<TextElement, "id">
export type CreateStickerElement = Omit<StickerElement, "id">
export type CreateTimelineElement = | CreateAudioElement
| CreateVideoElement
| CreateImageElement
| CreateTextElement
| CreateSt...
export interface ElementDragState {
isDragging: boolean
elementId: string | null
trackId: string | null
startMouseX: number
startMouseY: number
startElementTime: number
clickOffsetTime: number
currentTime: number
currentMouseY: number
}
export interface DropTarget {
trackIndex: number
isNewTrack: boolean
insertPosition: "above" | "below" | null
xPosition: number
}
export interface ComputeDropTargetParams {
elementType: ElementType
mouseX: number
mouseY: number
tracks: TimelineTrack[]
playheadTime: number
isExternalDrop: boolean
elementDuration: number
pixelsPerSecond: number
zoomLevel: number
verticalDragDirection?: "up" | "down" | null
startTimeOverride?: number
excludeElementId?: string
}
export interface ClipboardItem {
trackId: string
trackType: TrackType
element: CreateTimelineElement
}
transcription.ts
export type TranscriptionLanguage = LanguageCode | "auto"
export interface TranscriptionSegment {
text: string
start: number
end: number
}
export interface TranscriptionResult {
text: string
segments: TranscriptionSegment[]
language: string
}
export type TranscriptionStatus = | "idle"
| "loading-model"
| "transcribing"
| "complete"
| "error"
export interface TranscriptionProgress {
status: TranscriptionStatus
progress: number
message?: string
}
export type TranscriptionModelId = | "whisper-tiny"
| "whisper-small"
| "whisper-medium"
| "whisper-large-v3-turbo"
export interface TranscriptionModel {
id: TranscriptionModelId
name: string
huggingFaceId: string
description: string
}
export interface CaptionChunk {
text: string
startTime: number
duration: number
}
## apps/web/src/utils
browser.ts
export function isTypableDOMElement({
element,
}: {
element: HTMLElement;
}): boolean
date.ts
export function formatDate({ date }: { date: Date }): string
geometry.ts
export function dimensionToAspectRatio({
width,
height,
}: {
width: number;
height: number;
}): string
id.ts
export function generateUUID(): string
math.ts
export function clamp({
value,
min,
max,
}: {
value: number;
min: number;
max: number;
}): number
platform.ts
export function getPlatformSpecialKey(): string
export function getPlatformAlternateKey(): string
export function isAppleDevice(): boolean
strings.ts
export function capitalizeFirstLetter({ string }: { string: string })
export function uppercase({ string }: { string: string })
ui.ts
export function cn(...inputs: ClassValue[]): string
## packages/ui/src/icons
base-icon.tsx
export function BaseIcon({
title,
size = 24,
viewBox = "0 0 24 24",
children,
...props
}: BaseIconProps)
create-icon.tsx
export function createIcon({ definition }: CreateIconParams)
index.tsx
export const OcGoogleIcon
export const OcGithubIcon
export const OcVercelIcon
export const OcDataBuddyIcon
export const OcMarbleIcon
export const OcBackgroundIcon
export const OcSocialsIcon
export const OcTransitionUpIcon
export const OcMenuIcon
export const OcPencilIcon
export const OcLeftArrowIcon
export const OcTrashIcon
types.ts
export type IconProps = Omit<
SVGProps<SVGSVGElement>,
"children" | "width" | "height"
> & {
size?: number;
title?: s...
export type IconNode = Array<{
element: keyof JSX.IntrinsicElements;
props: Record<string, string | number | undefined...
export type IconDefinition = {
title: string;
viewBox?: string;
nodes: IconNode;
}
## packages/ui/src/icons/registry
brand.ts
export const BRAND_ICONS
editor.ts
export const EDITOR_ICONS
index.ts
export const ICON_DEFINITIONS
ui.ts
export const UI_ICONS
```
---
*Generated and maintained by [Twiggy](https://github.com/twiggy-tools/Twiggy)*