Hiyve Components - v1.0.0
    Preparing search index...

    Interface ClipCompositionProps

    Props for the ClipComposition main component.

    interface ClipCompositionProps {
        autoSaveInterval?: number;
        canPersist?: boolean;
        colors?: Partial<ClipCompositionColors>;
        enableAudioPassthrough?: boolean;
        enableAutoSave?: boolean;
        enableDragReorder?: boolean;
        enableMarkers?: boolean;
        enableRecording?: boolean;
        enableRegions?: boolean;
        fileId?: string;
        fileLocation?: string;
        icons?: Partial<ClipCompositionIcons>;
        initialComposition?: ClipCompositionFile;
        labels?: Partial<ClipCompositionLabels>;
        maxClips?: number;
        maxHeight?: string | number;
        maxRecordingDuration?: number;
        onAutoSave?: (fileId: string) => void;
        onChange?: (composition: ClipCompositionFile) => void;
        onClipAdded?: (clip: ClipItem) => void;
        onClipMutation?: (mutation: ClipMutation) => void;
        onClipRemoved?: (clipId: string) => void;
        onClose?: () => void;
        onError?: (error: Error) => void;
        onImportMedia?: () => void;
        onOpenFilePicker?: () => void;
        onSaveError?: (error: Error) => void;
        onTitleChange?: (title: string) => void;
        ownerName?: string;
        readOnly?: boolean;
        resolveClipOwnerName?: (clip: ClipItem) => string | undefined;
        showHeader?: boolean;
        showToolbar?: boolean;
        styles?: Partial<ClipCompositionStyles>;
        sx?: SxProps<Theme>;
        title?: string;
    }
    Index

    Properties

    autoSaveInterval? canPersist? colors? enableAudioPassthrough? enableAutoSave? enableDragReorder? enableMarkers? enableRecording? enableRegions? fileId? fileLocation? icons? initialComposition? labels? maxClips? maxHeight? maxRecordingDuration? onAutoSave? onChange? onClipAdded? onClipMutation? onClipRemoved? onClose? onError? onImportMedia? onOpenFilePicker? onSaveError? onTitleChange? ownerName? readOnly? resolveClipOwnerName? showHeader? showToolbar? styles? sx? title?

    Properties

    autoSaveInterval?: number

    Auto-save interval in milliseconds

    5000
    canPersist?: boolean

    Whether THIS client is allowed to persist the composition file (i.e. it owns the file server-side). When false, the editor is a pure follower: no auto-save, no manual save, no save-on-unmount, and the header save affordance is hidden. Local edits still render optimistically but are expected to be proxied elsewhere (e.g. to the owner) and reconciled via the external-reload path — which, for a non-persister, is never blocked by local "unsaved" state. Defaults to true (the standalone/owner case).

    true
    colors?: Partial<ClipCompositionColors>

    Custom colors

    enableAudioPassthrough?: boolean

    Enable audio passthrough

    false
    enableAutoSave?: boolean

    Enable auto-save

    true
    enableDragReorder?: boolean

    Enable drag-and-drop reorder

    true
    enableMarkers?: boolean

    Enable timeline markers/comments on clip players

    false
    enableRecording?: boolean

    Enable recording feature

    true
    enableRegions?: boolean

    Enable regions on clip players

    false
    fileId?: string

    Existing file ID for updates

    fileLocation?: string

    File storage location

    icons?: Partial<ClipCompositionIcons>

    Custom icons

    initialComposition?: ClipCompositionFile

    Initial composition to load

    labels?: Partial<ClipCompositionLabels>

    Custom labels

    maxClips?: number

    Maximum number of clips allowed

    20
    maxHeight?: string | number

    Maximum container height

    maxRecordingDuration?: number

    Maximum recording duration in seconds

    300
    onAutoSave?: (fileId: string) => void

    Called after auto-save completes

    onChange?: (composition: ClipCompositionFile) => void

    Called when composition changes

    onClipAdded?: (clip: ClipItem) => void

    Called when a clip is added

    onClipMutation?: (mutation: ClipMutation) => void

    Called when the LOCAL user edits a clip's annotations (adds/edits/removes a comment/marker or region). Not fired for edits applied via ClipCompositionRef.applyClipMutation (those are already remote), so a host can broadcast local mutations without an echo loop. Use for collaborative sync — proxy the mutation to the file owner, who replays it via applyClipMutation and persists.

    onClipRemoved?: (clipId: string) => void

    Called when a clip is removed

    onClose?: () => void

    Close callback — renders a close button in the title bar

    onError?: (error: Error) => void

    General error callback

    onImportMedia?: () => void

    Optional handler for an "Import media" toolbar button rendered next to the recorder toggle — lets users add EXISTING audio/video files as clips instead of recording new ones. The component doesn't own a file browser: the consumer opens its own picker here and adds each chosen file via ClipCompositionRef.addClip (which drives onClipAdded / onChange exactly like a fresh recording). Only shown while the composition is editable and under maxClips. Omit to hide the button.

    onOpenFilePicker?: () => void

    Optional handler for an "Open existing" affordance rendered in the title bar (left of the title field). Useful when the editor was opened on a fresh blank file and the user wants a way back to a file picker. Omit to hide the button.

    onSaveError?: (error: Error) => void

    Called when a save error occurs

    onTitleChange?: (title: string) => void

    Called when the composition title changes

    ownerName?: string

    Legacy: a single name to render under every clip. Kept only as a fallback when resolveClipOwnerName isn't provided AND the clip lacks a createdByName. Prefer resolveClipOwnerName — clips can be recorded by different participants (e.g. a student recording into a teacher's composition), so a single file-owner name is wrong for those clips.

    readOnly?: boolean

    Read-only mode

    false
    resolveClipOwnerName?: (clip: ClipItem) => string | undefined

    Per-clip owner-name resolver. Called for each clip to produce the name shown next to its duration (e.g. "0:11 — Bilbo"). Receives the full ClipItem so the consumer can look the owner up however it likes — typically by joining clip.fileId against a userFiles slice and resolving the file's userId to a display name (covers the case where a clip's recorder differs from the composition's owner). Return undefined to fall back through clip.createdByName → ownerName.

    showHeader?: boolean

    Show header with title

    true
    showToolbar?: boolean

    Show toolbar

    true
    styles?: Partial<ClipCompositionStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx styling prop

    title?: string

    Title for the composition

    Settings

    Member Visibility

    On This Page

    Properties