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

    Interface FileViewerProps

    Props for the FileViewer overlay component.

    <FileViewer
      open={viewerState.open}
      onClose={() => setViewerState({ ...viewerState, open: false })}
      file={viewerState.file}
      fileUrl={viewerState.fileUrl}
      loading={viewerState.loading}
      error={viewerState.error}
    />

    With custom viewers:

    import { QASessionViewer } from '@hiyve/react-collaboration';

    <FileViewer
      open={viewerState.open}
      onClose={handleClose}
      file={viewerState.file}
      fileUrl={viewerState.fileUrl}
      customViewers={{
        'qa-session': (data, file, onClose) => (
          <QASessionViewer sessionData={data} onClose={onClose} />
        ),
      }}
    />
    interface FileViewerProps {
        colors?: {
            background?: string;
            errorText?: string;
            headerBackground?: string;
            headerText?: string;
            loadingIndicator?: string;
        };
        currentUserId?: string;
        customViewers?: Partial<Record<string, CustomViewerRenderer>>;
        enableMarkers?: boolean;
        enableRegions?: boolean;
        error?: string | null;
        file: FileEntry | null;
        fileUrl: string;
        labels?: {
            close?: string;
            error?: string;
            loading?: string;
            noInlinePreview?: string;
            noPreview?: string;
            openInDedicatedTab?: string;
            pages?: string;
        };
        loading?: boolean;
        markers?: {
            authorId?: string;
            authorName?: string;
            color?: string;
            content: string;
            createdAt?: string;
            editedAt?: string;
            id: string;
            time: number;
        }[];
        onClose: () => void;
        onFileOpen?: (file: FileEntry) => 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;
        onResolveRecordingUrl?: (fileId: string) => Promise<string>;
        open: boolean;
        parentRef?: RefObject<HTMLElement>;
        recordingUrl?: string;
        regions?: {
            channelIdx?: number;
            content: string;
            end: number;
            id: string;
            start: number;
        }[];
        styles?: {
            headerHeight?: number;
            maxContentWidth?: number;
            padding?: number;
        };
    }
    Index

    Properties

    colors? currentUserId? customViewers? enableMarkers? enableRegions? error? file fileUrl labels? loading? markers? onClose onFileOpen? onMarkerAdd? onMarkerChange? onMarkerDelete? onRegionChange? onRegionDelete? onResolveRecordingUrl? open parentRef? recordingUrl? regions? styles?

    Properties

    colors?: {
        background?: string;
        errorText?: string;
        headerBackground?: string;
        headerText?: string;
        loadingIndicator?: string;
    }

    Custom colors

    currentUserId?: string

    Current user ID (used to determine edit permissions on markers)

    customViewers?: Partial<Record<string, CustomViewerRenderer>>

    Custom viewer renderers for specific resource types. Allows developers to add their own viewers for custom file types.

    enableMarkers?: boolean

    Enable timeline markers for audio/video files

    false
    enableRegions?: boolean

    Enable region creation and loop playback for audio/video files

    true
    error?: string | null

    Error message if loading failed

    file: FileEntry | null

    File being viewed

    fileUrl: string

    Presigned URL for file content

    labels?: {
        close?: string;
        error?: string;
        loading?: string;
        noInlinePreview?: string;
        noPreview?: string;
        openInDedicatedTab?: string;
        pages?: string;
    }

    Custom labels

    Type Declaration

    • Optionalclose?: string
    • Optionalerror?: string
    • Optionalloading?: string
    • OptionalnoInlinePreview?: string

      Message shown for resource types without an inline viewer

    • OptionalnoPreview?: string
    • OptionalopenInDedicatedTab?: string

      Hint directing users to open in the dedicated tab

    • Optionalpages?: string
    loading?: boolean

    Whether file is loading

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

    Initial timeline markers to load

    onClose: () => void

    Close viewer handler

    onFileOpen?: (file: FileEntry) => void

    Callback to open another file (for linked files like summaries)

    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

    onResolveRecordingUrl?: (fileId: string) => Promise<string>

    Callback to resolve a presigned URL for a file by ID. Used to auto-resolve recording video for analysis files.

    open: boolean

    Whether viewer is open

    parentRef?: RefObject<HTMLElement>

    Reference to parent container (for positioning)

    recordingUrl?: string

    Presigned URL to the recording video (shown inline in recording-analysis viewer). When not provided but onResolveRecordingUrl is set, FileViewer resolves it automatically.

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

    Initial named regions to load

    styles?: { headerHeight?: number; maxContentWidth?: number; padding?: number }

    Custom styles

    Settings

    Member Visibility

    On This Page

    Properties