import {
useParticipantViewContext,
type VideoPlaceholderProps,
} from '@stream-io/video-react-sdk';
const CustomVideoPlaceholder = ({
style,
}: VideoPlaceholderProps) => {
const { participant } = useParticipantViewContext();
return (
<div style={{ ...style, width: '100%', background: '#ddd' }}>
{/* display profile picture if available */}
{participant.image && (
<img
style={{ width: 100, height: 100, borderRadius: 9999 }}
src={participant.image}
alt={participant.id}
/>
)}
{/* otherwise try to display name or fallback to ID */}
{!participant.image && <span>{participant.name || participant.id}</span>}
</div>
);
};
Video Placeholder
The VideoPlaceholder
component is a combination of elements that serves as a fallback in the absence of an active video feed. This component is conditionally rendered by the ParticipantView
core component over the video element, learn how to customize your ParticipantView
in the participant view customizations guide.
In this guide we’ll learn how to build and implement our own primitive video placeholder component.
Video placeholder component
We’ve mentioned that VideoPlaceholder
component is rendered over the video element. This is done so that the SDK can keep working with the same video element instance for performance reasons. As you can see, we’ve highlighted a few lines which are recommended way to implement our placeholder component. This extra style
property comes from the ParticipantView
component and currently only provides absolute positioning but this might be a subject to change so to make future updates easier, we recommend you to extend your “wrapper” element’s style
with style
property provided by the ParticipantView
component.
Final steps
Now we can pass this custom VideoPlaceholder
component down to our call layout components or directly to ParticipantView
component in our custom call layout as described in the aforementioned ParticipantView customizations guide.