<Thumbnail>
available from v3.2.41
A component which can be rendered in a regular React App (for example: Create React App, Next.JS) to display a single frame of a video.
MyApp.tsxtsx
import {Thumbnail } from "@remotion/player";import {MyVideo } from "./remotion/MyVideo";export constApp :React .FC = () => {return (<Thumbnail component ={MyVideo }compositionWidth ={600}compositionHeight ={600}frameToDisplay ={30}durationInFrames ={120}fps ={30}inputProps ={{title : "Foo",}}/>);};
MyApp.tsxtsx
import {Thumbnail } from "@remotion/player";import {MyVideo } from "./remotion/MyVideo";export constApp :React .FC = () => {return (<Thumbnail component ={MyVideo }compositionWidth ={600}compositionHeight ={600}frameToDisplay ={30}durationInFrames ={120}fps ={30}inputProps ={{title : "Foo",}}/>);};
API
component
or lazyComponent
Pass a React component in directly or pass a function that returns a dynamic import. Passing neither or both of the props is an error.
If you use lazyComponent
, wrap it in a useCallback()
to avoid constant rendering. See here for an example.
Thumbnail does not use <Composition>
's. Pass your component directly and do not wrap it in a <Composition>
component.
frameToDisplay
Index of the frame rendered by the composition in the Thumbnail.
compositionWidth
The width you would like the video to have when rendered as an MP4. Use style={{width: <width>}}
to define a width to be assumed in the browser.
Example:
If you want to render a Full HD video, set compositionWidth
to 1920
and compositionHeight
to 1080
. By default, the thumbnail will also assume these dimensions.
To make it smaller, pass a style
prop to give the Thumbnail a different width: {"style={{width: 400}}"}
. See Player Scaling to learn more.
compositionHeight
The height of the canvas in pixels.
The height you would like the video to have when rendered as an MP4. Use style={{height: <height>}}
to define a height to be assumed in the browser.
durationInFrames
The duration of the video in frames. Must be an integer and greater than 0.
This prop is required for the Thumbnail component because your component may render differently based on what useVideoConfig()
returns.
fps
The frame rate of the video. Must be a number.
This prop is required for the Thumbnail component because your component may render differently based on what useVideoConfig()
returns.
errorFallback
optional
A callback for rendering a custom error message. See Handling errors section for an example.
renderLoading
optional
A callback function that allows you to return a custom UI that gets displayed while the thumbnail is loading.
The first parameter of the callback function contains the height
and width
of the thumbnail as it gets rendered.
tsx
constMyApp :React .FC = () => {// `RenderLoading` type can be imported from "@remotion/player"constrenderLoading :RenderLoading =useCallback (({height ,width }) => {return (<AbsoluteFill style ={{backgroundColor : "gray" }}>Loading thumbnail ({height }x{width })</AbsoluteFill >);}, []);return (<Thumbnail fps ={30}component ={Component }durationInFrames ={100}compositionWidth ={1080}compositionHeight ={1080}frameToDisplay ={30}renderLoading ={renderLoading }/>);};
tsx
constMyApp :React .FC = () => {// `RenderLoading` type can be imported from "@remotion/player"constrenderLoading :RenderLoading =useCallback (({height ,width }) => {return (<AbsoluteFill style ={{backgroundColor : "gray" }}>Loading thumbnail ({height }x{width })</AbsoluteFill >);}, []);return (<Thumbnail fps ={30}component ={Component }durationInFrames ={100}compositionWidth ={1080}compositionHeight ={1080}frameToDisplay ={30}renderLoading ={renderLoading }/>);};
A thumbnail needs to be loaded if it contains elements that use React Suspense, or if the lazyComponent
prop is being used.
inputProps
optional
Pass props to the component that you have specified using the component
prop. The Typescript definition takes the shape of the props that you have given to your component
. Default undefined
.
style
optional
A regular style
prop for a HTMLDivElement. You can pass a different height and width if you would like different dimensions for the thumbnail than the original composition dimensions.
className
v3.1.3
optional
A HTML class name to be applied to the container.
ThumbnailRef
You may attach a ref to the thumbnail and get some layout info.
tsx
import {Thumbnail ,ThumbnailRef } from "@remotion/player";import {useEffect ,useRef } from "react";import {MyComposition } from "./MyComposition";constMyComp :React .FC = () => {constthumbnailRef =useRef <ThumbnailRef >(null);useEffect (() => {if (thumbnailRef .current ) {console .log (thumbnailRef .current .getScale ());}}, []);return (<Thumbnail ref ={thumbnailRef }durationInFrames ={30}compositionWidth ={1080}compositionHeight ={1080}fps ={30}frameToDisplay ={30}component ={MyComposition }// Many other optional props are available./>);};
tsx
import {Thumbnail ,ThumbnailRef } from "@remotion/player";import {useEffect ,useRef } from "react";import {MyComposition } from "./MyComposition";constMyComp :React .FC = () => {constthumbnailRef =useRef <ThumbnailRef >(null);useEffect (() => {if (thumbnailRef .current ) {console .log (thumbnailRef .current .getScale ());}}, []);return (<Thumbnail ref ={thumbnailRef }durationInFrames ={30}compositionWidth ={1080}compositionHeight ={1080}fps ={30}frameToDisplay ={30}component ={MyComposition }// Many other optional props are available./>);};
The following methods are available on the thumbnail ref:
getContainerNode()
Gets the container HTMLDivElement
of the thumbnail. Useful if you'd like to manually attach listeners to the thumbnail element.
tsx
constthumbnailRef =useRef <ThumbnailRef >(null);useEffect (() => {if (!thumbnailRef .current ) {return;}constcontainer =thumbnailRef .current .getContainerNode ();if (!container ) {return;}constonClick = () => {console .log ("thumbnail got clicked");};container .addEventListener ("click",onClick );return () => {container .removeEventListener ("click",onClick );};}, []);
tsx
constthumbnailRef =useRef <ThumbnailRef >(null);useEffect (() => {if (!thumbnailRef .current ) {return;}constcontainer =thumbnailRef .current .getContainerNode ();if (!container ) {return;}constonClick = () => {console .log ("thumbnail got clicked");};container .addEventListener ("click",onClick );return () => {container .removeEventListener ("click",onClick );};}, []);
getScale()
Returns a number which says how much the content is scaled down compared to the natural composition size. For example, if the composition is 1920x1080
, but the thumbnail is 960px in width, this method would return 0.5
.
addEventListener()
Start listening to an event. See the Events section to see the function signature and the available events.
removeEventListener()
Stop listening to an event. See the Events section to see the function signature and the available events.
Events
Using a thumbnail ref, you can bind event listeners to get notified of certain events of the thumbnail.
tsx
constthumbnailRef =useRef <ThumbnailRef >(null);useEffect (() => {if (!thumbnailRef .current ) {return;}thumbnailRef .current .addEventListener ("error", (e ) => {console .log ("error",e .detail .error );});}, []);
tsx
constthumbnailRef =useRef <ThumbnailRef >(null);useEffect (() => {if (!thumbnailRef .current ) {return;}thumbnailRef .current .addEventListener ("error", (e ) => {console .log ("error",e .detail .error );});}, []);
error
Fires when an error or uncaught exception has happened in the thumbnail.
You may get the error by reading the e.detail.error
value:
tsx
ref .current ?.addEventListener ("error", (e ) => {console .log ("error ",e .detail .error ); // error [Error: undefined is not a function]});
tsx
ref .current ?.addEventListener ("error", (e ) => {console .log ("error ",e .detail .error ); // error [Error: undefined is not a function]});
Handling errors
See: <Player>
-> Handling errors