Controls
Picture in Picture
The PictureInPictureTrigger
component toggles the picture-in-picture mode.
Features
- Automatic conditional rendering based on browser API availability,
customizable with the
matcher
pattern - Supports both the w3c standard (which most modern browsers support), as well as the older Safari/iOS spec (see the browsers which support Picture-in-Picture on caniuse)
Anatomy
Import the components and piece the parts together.
import * as Player from "@livepeer/react/player";
export default () => (
<Player.Root>
<Player.Container>
<Player.PictureInPictureTrigger />
</Player.Container>
<Player.Container>
<Player.Controls>
<Player.PictureInPictureTrigger />
</Player.Controls>
</Player.Container>
</Player.Root>
);
Props
The component accepts all props suitable for a button element.
Data Attributes
data-livepeer-controls-picture-in-picture-trigger
Serves to identify the component’s role.
data-picture-in-picture
Indicates the current picture-in-picture state, "true"
when the feature is
active and "false"
otherwise.
data-visible
Reflects the visibility status of the trigger, with "true"
meaning it’s
currently visible (i.e., picture-in-picture is supported and the media is not in
fullscreen mode) and "false"
denoting it’s not visible.
This is often used for dynamically applying enter/exit CSS animations.