import { useParticipantViewContext } from "@stream-io/video-react-sdk";
const CustomParticipantViewUI = () => {
const { participantViewElement } = useParticipantViewContext();
const [isFullsreenElement, setIsFullscreenElement] = useState(false);
useEffect(() => {
// sync local state
const handleFullscreenChange = () => {
setIsFullscreenElement(
document.fullscreenElement === participantViewElement,
);
};
window.addEventListener("fullscreenchange", handleFullscreenChange);
return () =>
window.removeEventListener("fullscreenchange", handleFullscreenChange);
}, [participantViewElement]);
const toggleFullscreen = () => {
if (isFullsreenElement) {
return document.exitFullscreen();
}
return participantViewElement?.requestFullscreen();
};
return (
<>
<button
style={{ position: "absolute", top: 10, right: 10 }}
onClick={toggleFullscreen}
>
{isFullsreenElement ? "Leave" : "Enter"} fullscreen
</button>
{/* your other custom UI elements */}
</>
);
};
ParticipantView fullscreen mode
In this guide, you’ll learn how to display ParticipantView
in a fullscreen mode. To make this work we’ll be utilising element.requestFullscreen
browser API and ParticipantViewContext
to reach for participantViewElement
. You might want to use this customization in combination with SpeakerLayout
(ParticipantViewUISpotlight
property) where spotlighted ParticipantView
switches between dominant speakers automatically.
Define custom ParticipantViewUI
The ParticipantViewUI
template is incredibly versatile and can render anything you want it to. In this case, we’ll be rendering a single button which we’ll use to toggle between fullscreen and normal mode.
Final steps
Now we can pass this custom ParticipantViewUI
component down to our call layout components or directly to ParticipantView
component in our custom call layout as described in the ParticipantView customizations guide.