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>>;
        enableAudioPassthrough?: boolean;
        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;
        onPdfAnnotationLockChange?: (locked: boolean) => void;
        onPdfPageChange?: (page: number) => 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>;
        pdfAnnotationAuthorId?: string;
        pdfAnnotationLockController?: boolean;
        pdfAnnotationLocked?: boolean;
        pdfControlsDisabled?: boolean;
        pdfEnableAnnotations?: boolean;
        pdfPage?: number;
        recordingUrl?: string;
        regions?: {
            channelIdx?: number;
            content: string;
            end: number;
            id: string;
            start: number;
        }[];
        resolveDisplayName?: (userId: string, defaultName?: string) => string;
        styles?: {
            headerHeight?: number;
            maxContentWidth?: number;
            padding?: number;
        };
        variant?: "inline"
        | "fullscreen";
    }
    Index

    Properties

    colors? currentUserId? customViewers? enableAudioPassthrough? enableMarkers? enableRegions? error? file fileUrl labels? loading? markers? onClose onFileOpen? onMarkerAdd? onMarkerChange? onMarkerDelete? onPdfAnnotationLockChange? onPdfPageChange? onRegionChange? onRegionDelete? onResolveRecordingUrl? open parentRef? pdfAnnotationAuthorId? pdfAnnotationLockController? pdfAnnotationLocked? pdfControlsDisabled? pdfEnableAnnotations? pdfPage? recordingUrl? regions? resolveDisplayName? styles? variant?

    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.

    enableAudioPassthrough?: boolean

    Enable broadcasting media audio into a Hiyve room via the rtc-client mergeAudioInput audio merger. When true, the MediaPlayer renders a passthrough toggle and dispatches a hiyve-media-passthrough window CustomEvent (with { stream, active }) on toggle. Consumers must listen for that event and route it to their HiyveClient — useMediaPassthroughBridge() in @hiyve/react is the canonical wiring. The room/client must have been connected with enableAudioMerge: true or mergeAudioInput will throw.

    false
    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

    onPdfAnnotationLockChange?: (locked: boolean) => void

    Fires when the lock controller toggles the lock state.

    onPdfPageChange?: (page: number) => void

    Fires when the PDF viewer's active page changes (user scroll or toolbar). The teacher's presenter-sync wiring listens here and rebroadcasts.

    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)

    pdfAnnotationAuthorId?: string

    Local user id stamped on every locally-authored stroke.

    pdfAnnotationLockController?: boolean

    True when the caller can toggle the lock (the teacher).

    pdfAnnotationLocked?: boolean

    Annotation lock state (read-only for everyone except the lock controller). When true, followers see existing strokes but can't draw or erase. Defaults to true (locked) for safety.

    pdfControlsDisabled?: boolean

    Hide the PDF toolbar and ignore page-navigation input. Used to "lock" the viewer for followers in a synced session so they can't desync from the presenter.

    pdfEnableAnnotations?: boolean

    Enable per-page drawing annotations synced via the relay. Only set true inside a synced lesson — requires a <SemanticRelayProvider> ancestor and a valid file.fileId for the topic key.

    pdfPage?: number

    Controlled current page (1-based) for the PDF viewer. When set, the viewer scrolls to this page on change. Used by presenter-sync to follow a teacher's page. Ignored when the file isn't a PDF.

    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

    resolveDisplayName?: (userId: string, defaultName?: string) => string

    Resolve a userId to a display name. Forwarded to the RoomSummaryViewerProps.resolveDisplayName when this viewer renders a room-summary file. Lesson contexts should pass their app-level resolver so teacher-assigned student nicknames win over the summary document's stored placeholder.

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

    Custom styles

    variant?: "inline" | "fullscreen"

    Render as fullscreen fixed overlay or inline within parent container

    'fullscreen'

    Settings

    Member Visibility

    On This Page

    Properties