Skip to main content
Skip table of contents

Thumbnail previews

The CONNECT Player React Native SDK provides, depending on the played-back stream, the ability to capture and display preview thumbnails. This is useful when the user slides through the seek bar. The feature is dependent on the stream's manifest facilitating thumbnails.

Supported thumbnail formats

Support for thumbnails depends on the platform. In this version, support for Live streams is experimental:

Format

Android

iOS/tvOS

Browsers and Connected TV (js)

DASH-IF

Yes

No

Yes (excl. Safari)

I-Frame (for HLS)

Yes (clear only)

Yes

No

WebVTT (Harmonic)

No

No

No

The following describes how to manage thumbnail previews. It assumes integration into an existing project; see the  React Native SDK Integration Guide for details. To view this feature in a standalone project, see the readme in the examples.zip archive in the release files. The API concerning the management of thumbnails involves one event and three properties:

Events

Event Name

Parameters

Notes

onThumbnailAvailable

None

This event will be triggered after the App sets the source, as soon as the OTVPlayer gets details of any available thumbnails identified in the source stream's manifest. It is only triggered once for a new content request; the App can then decide to set the displayThumbnail property, for example, when the user slides the seek bar.
This event indicates thumbnails are available on the stream. It may take some time for the player to extract and prepare the previews for presentation.

Properties

Property Name

Field

Type

Default value

Notes

thumbnail


Object




display

Boolean

false

true: Display thumbnail content
false: Do not display thumbnail
An error will be triggered if the App sets the display property to true before receiving the  onThumbnailAvailable  event.


positionInSeconds

Number

Current playback position

The position in seconds of the time value within the seekable duration of the currently played content.
If display is set to true with this property not provided, the latest position of the playback will be used to fetch and show the thumbnail content.
The thumbnail at the current position is only fetched once and displayed for this use case.


style

Object:
top
left
width
height
borderWidth
borderColor

borderColor defaults to opaque black

Layout style properties to display the thumbnail relative to the position of the video.

  • An error will be thrown if any of the top, left, width or height is missing/erroneous (NaN).

  • Properties will be ignored, and the border not be shown if borderColor is provided and borderWidth passed.

  • An opaque black colour will be used for the border if borderWidth is provided and borderColor is missing.

  • An opaque black colour will be used for the border by default if an invalid borderColor value is provided.

  • A styling error will be thrown if display is set to true, but the style object is not set (or is null/undefined).

It is expected that the thumbnail style and position properties are set prior to setting display to true. After enabling the thumbnail display, it is expected that the App will update the style, coordinates and position according to the user's slide bar movements. All the properties are set to default when the player is initialised, including when zapping.

Errors

Errors are sent to the App only if display is set to true. They are sent through the same onError described in Error Handling. All thumbnail-related errors are under the PLAYER category.

Error Description

Unique Error Code

Notes

Thumbnail item error

7020

An error occurred while the Player attempted to fetch and display a thumbnail.

Thumbnail position error

7021

Invalid/out-of-range position number.

Thumbnail styling error

7022

Invalid/not-set values in styling object.

Thumbnail not yet available

7023

Thumbnails were requested to be shown while not yet available.

Thumbnail status unknown

7024

Thumbnails were requested to be shown after the player identified no thumbnails available.

Example code

The example code presents a player view, a slide bar to control and seek thumbnail previews, a button to toggle between streams, fields to control the various properties, and a modal display when error events occur.
Non-error events are added to the logs but are not displayed on the screen. The only thumbnail event is captured in App.js in _onThumbnailAvailable() ; in that part of the code, you can see how the properties are set through setThumbnailProps() . Capturing the onError event is generic to all player errors, and in this example, it merely shows the modal Alert box.

Click here to see a minimal thumbnail implementation.
JS
	const [thumbnailProps, setThumbnailProps] = useState({display: false,positionInSeconds: 0,style: {top: 30, left: 30, width: 180, height: 320, borderWidth: 5, borderColor: "#FF0000"}});
 	const [sourceStream, setSourceStream] = useState({
  src: "https://otvplayer.nagra.com/vod/dash/clear/DASHIFREF/dash.akamaized.net/akamai/bbb_30fps/bbb_with_4_tiles_thumbnails.mpd",
  type: "application/dash+xml",
};);


   _onThumbnailAvailable= () => {
		console.log('Got onThumbnailAvailable');

		// once thumbnails are available ,application can update the thumbnail prop to show/hide thumbnails.
		setThumbnailProps({
			display: true,
			style: {
				top: 100,
				left: 100,
				width: 180,
				height: 100,
				borderWidth: 1.0,
				borderColor: "#000000",
			},
			positionInSeconds: 0,
		});
	}

    :
    :
    :

 	_onError =(event) => {
		alert(event.code)
	}
 

		return (
		<OTVPlayer
			source={sourceStream}
			style={[styles.player.container]}
			autoplay={true}
			onError={_onError} // Capture player errors
			thumbnail={thumbnailProps}
			onLoad={_onLoad}
			onProgress={_onProgress}
			onThumbnailAvailable={_onThumbnailAvailable} // Event triggered if thumbnail data available 
		/>
		);
} 
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.