Thumbnail

Thumbnail renders a file’s visual preview, a browser-generated image thumbnail on web, or a placeholder icon when none is available. Set playback to render a <video> element when the file status is "ready" and a playbackUrl exists.

Thumbnail

Placeholder

import { Thumbnail } from "@hyperserve/video-uploader-react";

// With thumbnailUri: renders the preview image
<Thumbnail file={file} />

// Without thumbnailUri: renders the placeholder icon
<Thumbnail file={fileWithNoPreview} />

// Renders a <video> element when file.status is "ready" and playbackUrl is set
<Thumbnail file={file} playback />

Props

Prop	Type	Default	Description
`file`	`FileState`	required	The file state object
`playback`	`boolean`	`false`	Render a `<video>` element when `file.playbackUrl` is available
`controls`	`boolean`	`true`	Show native video controls (only applies in playback mode)
`style`	`CSSProperties`	none	Container styles
`className`	`string`	none	Container class
`placeholderStyle`	`CSSProperties`	none	Styles for the placeholder container
`placeholderClassName`	`string`	none	Class for the placeholder container
`placeholder`	`ReactNode`	none	Custom placeholder content (replaces the default icon)
`styles`	`ThumbnailStyles`	none	Slot map applied to internal elements (see Slots below)
`children`	`(info) => ReactNode`	none	Render function receiving `{ thumbnailUri, playbackUrl, isReady }`

Behavior

Shows the thumbnail from file.thumbnailUri (generated on file add, web only)
When playback is true and the file is ready, renders a <video> element with the playbackUrl
Shows a placeholder icon when no thumbnail is available

On React Native, the same playback and controls props apply, but the player is rendered with expo-video’s VideoView. expo-video is an optional peer dependency; when it is not installed, the component falls back to the thumbnail image.

Slots

Pass a styles slot map to theme internal elements. Slots merge over defaults; local style/placeholderStyle props win over slots. See Theming for the canonical merge-order explanation.

Slot	Targets
`image`	The `<img>` element (and `<video>` element in playback mode)
`placeholder`	The placeholder container shown when no thumbnail is available

<Thumbnail
  file={file}
  styles={{
    placeholder: { background: "#0f172a", color: "#475569" },
  }}
/>