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

    Interface MediaFileViewerProps

    Props for the MediaFileViewer component.

    Wraps MediaPlayer from @hiyve/react-media-player for use inside FileViewer. Auto-detects media type from the file's resourceType, contentType, or extension.

    <MediaFileViewer
      src={presignedUrl}
      file={fileEntry}
      enableWaveform
      enableVolumeControl
    />
    interface MediaFileViewerProps {
        colors?: Partial<MediaFileViewerColors>;
        currentUserId?: string;
        enableKeyboardShortcuts?: boolean;
        enableMarkers?: boolean;
        enableRateControl?: boolean;
        enableRegions?: boolean;
        enableVolumeControl?: boolean;
        enableWaveform?: boolean;
        file: FileEntry;
        labels?: Partial<MediaFileViewerLabels>;
        markers?: {
            authorId?: string;
            authorName?: string;
            color?: string;
            content: string;
            createdAt?: string;
            editedAt?: string;
            id: string;
            time: number;
        }[];
        mediaPlayerColors?: Partial<Record<string, string>>;
        mediaPlayerLabels?: Partial<Record<string, string>>;
        onError?: (error: Error) => void;
        onMarkerAdd?: (
            marker: {
                authorId?: string;
                authorName?: string;
                color?: string;
                content: string;
                createdAt?: string;
                editedAt?: string;
                id: string;
                time: number;
            },
        ) => void;
        onMarkerChange?: (
            marker: {
                authorId?: string;
                authorName?: string;
                color?: string;
                content: string;
                createdAt?: string;
                editedAt?: string;
                id: string;
                time: number;
            },
        ) => void;
        onMarkerDelete?: (markerId: string) => void;
        onRegionChange?: (
            region: {
                channelIdx?: number;
                content: string;
                end: number;
                id: string;
                start: number;
            },
        ) => void;
        onRegionDelete?: (regionId: string) => void;
        regions?: {
            channelIdx?: number;
            content: string;
            end: number;
            id: string;
            start: number;
        }[];
        seekTo?: number
        | null;
        src: string;
        sx?: SxProps<Theme>;
    }
    Index

    Properties

    colors? currentUserId? enableKeyboardShortcuts? enableMarkers? enableRateControl? enableRegions? enableVolumeControl? enableWaveform? file labels? markers? mediaPlayerColors? mediaPlayerLabels? onError? onMarkerAdd? onMarkerChange? onMarkerDelete? onRegionChange? onRegionDelete? regions? seekTo? src sx?

    Properties

    colors?: Partial<MediaFileViewerColors>

    Custom colors for MediaFileViewer wrapper

    currentUserId?: string

    Current user ID (for edit permissions on markers)

    enableKeyboardShortcuts?: boolean

    Enable keyboard shortcuts

    true
    enableMarkers?: boolean

    Enable timeline markers

    false
    enableRateControl?: boolean

    Enable playback rate control

    true
    enableRegions?: boolean

    Enable region management

    false
    enableVolumeControl?: boolean

    Enable volume control

    true
    enableWaveform?: boolean

    Enable waveform visualization

    true
    file: FileEntry

    File entry for media type detection

    labels?: Partial<MediaFileViewerLabels>

    Custom labels for MediaFileViewer wrapper

    markers?: {
        authorId?: string;
        authorName?: string;
        color?: string;
        content: string;
        createdAt?: string;
        editedAt?: string;
        id: string;
        time: number;
    }[]

    Initial timeline markers to load

    mediaPlayerColors?: Partial<Record<string, string>>

    Colors forwarded to the inner MediaPlayer

    mediaPlayerLabels?: Partial<Record<string, string>>

    Labels forwarded to the inner MediaPlayer

    onError?: (error: Error) => void

    Error callback

    onMarkerAdd?: (
        marker: {
            authorId?: string;
            authorName?: string;
            color?: string;
            content: string;
            createdAt?: string;
            editedAt?: string;
            id: string;
            time: number;
        },
    ) => void

    Called when a new timeline marker is added

    onMarkerChange?: (
        marker: {
            authorId?: string;
            authorName?: string;
            color?: string;
            content: string;
            createdAt?: string;
            editedAt?: string;
            id: string;
            time: number;
        },
    ) => void

    Called when a timeline marker is updated

    onMarkerDelete?: (markerId: string) => void

    Called when a timeline marker is deleted

    onRegionChange?: (
        region: {
            channelIdx?: number;
            content: string;
            end: number;
            id: string;
            start: number;
        },
    ) => void

    Called when a named region is created or updated

    onRegionDelete?: (regionId: string) => void

    Called when a named region is deleted

    regions?: {
        channelIdx?: number;
        content: string;
        end: number;
        id: string;
        start: number;
    }[]

    Initial named regions to load

    seekTo?: number | null

    When set, the inner MediaPlayer seeks to this time (in seconds). Update the value to trigger a new seek.

    src: string

    Media URL to play

    sx?: SxProps<Theme>

    MUI sx styling prop

    Settings

    Member Visibility

    On This Page

    Properties