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 
		/>
		);
}