Thumbnails

PRESTOplay for React Native includes a thumbnails plugin that displays seek-bar preview images so viewers can visually navigate through content. The plugin supports embedded thumbnail tracks and side-loaded remote thumbnails.

Review Thumbnails first for shared thumbnail formats, manifest signaling, and authoring patterns.

Setup

Install the thumbnails plugin package:

npm install @castlabs/react-native-prestoplay-thumbnails

Enable the plugin when initializing the SDK:

import { Sdk } from "@castlabs/react-native-prestoplay";
import { ThumbnailPlugin } from "@castlabs/react-native-prestoplay-thumbnails";

Sdk.initialize({
  licenseKey: {
    /* Valid license here */
  },
  plugins: [ThumbnailPlugin],
});

Embedded thumbnails

If the stream contains an embedded thumbnail track, the plugin picks it up automatically. No additional configuration is required.

Side-loaded thumbnails

When the stream does not include an embedded thumbnail track, you can side-load a remote thumbnail track through the player configuration. Specify the URL, MIME type, grid dimensions, and interval:

<PlayerProvider
  playerConfig={{
    autoPlay: true,
    source: {
      /* ... */
    },
    remoteThumbnailTracks: [
      {
        url: "https://example.com/thumbs/$index$.jpg",
        mimeType: "image/jpeg",
        gridHeight: 1,
        gridWidth: 1,
        intervalMs: 10000,
      },
    ],
  }}
/>

Displaying thumbnails

Use the Thumbnail component to display a preview image at a specific time. The component must be placed inside a PlayerProvider so it has access to the player instance:

<Thumbnail
  positionMs={/* Time in milliseconds */}
  style={{ width: 150, height: 100 }}
/>

Seek-bar integration example

const [previewPositionMs, setPreviewPositionMs] = useState(null);

<SeekBar
  onScrubStart={(positionMs) => setPreviewPositionMs(positionMs)}
  onScrubMove={(positionMs) => setPreviewPositionMs(positionMs)}
  onScrubEnd={() => setPreviewPositionMs(null)}
/>

{previewPositionMs !== null && (
  <Thumbnail
    positionMs={previewPositionMs}
    style={{ width: 160, height: 90 }}
  />
)}

You typically update positionMs in response to seek-bar interactions, so the viewer sees a preview of the content at the position they’re scrubbing to.

Previous topic: Getting started