usePlayerUI
Control fullscreen, Picture-in-Picture, and stable player chrome state.
Control fullscreen, Picture-in-Picture, and stable player chrome state.
usePlayerUI() exposes stable player chrome state and UI actions.
This hook requires a VideoPlayer scope and a scope-aware media element. The Lit <Video> wrapper does not automatically participate in the scope.
const ui = usePlayerUI();It returns:
controlsVisibleisFullscreenisPictureInPictureshowControls()hideControls()toggleFullscreen()togglePictureInPicture()import {VideoPlayer, usePlayerUI} from "@rixl/media-react";
function CustomDisplayControls() {
const {isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture} = usePlayerUI();
return (
<div className="flex items-center gap-3">
<button type="button" onClick={() => void toggleFullscreen()}>
{isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
</button>
<button type="button" onClick={() => void togglePictureInPicture()}>
{isPictureInPicture ? "Exit PiP" : "Enter PiP"}
</button>
</div>
);
}
function CustomPlayer() {
return (
<VideoPlayer>
<CustomDisplayControls />
{/* scope-aware media element */}
</VideoPlayer>
);
}