The Volume
, VolumeIndicator
, and MuteTrigger
components provide interactive controls for the volume level.
Volume
components extend from
@radix-ui/react-slider
,
and inherits all of the documentation for those components.matcher
patternlocalStorage
by default (with storage overrides customizable in
Root
)forceMount
matcher
VolumeIndicator
should be visible. It can be a boolean matching the mute state or a function
that provides custom logic for visibility determination based on the volume
level.
forceMount
data-livepeer-mute-trigger
data-muted
"true"
) or active ("false"
),
assisting in the visual representation and scripting based on the mute state.
data-livepeer-controls-volume-indicator
data-livepeer-muted
"true"
if muted and "false"
otherwise.
data-livepeer-volume
"50"
for 50% volume.
data-visible
"true"
meaning it’s
currently visible based on the matcher
or mute state and "false"
denoting
it’s not visible.
This is often used for dynamically applying enter/exit CSS animations.
data-livepeer-controls-volume
data-livepeer-muted
"true"
if muted and "false"
otherwise.
data-livepeer-volume
"50"
for 50% volume.
data-visible
"true"
meaning it’s
currently visible (i.e., volume change is supported) and "false"
denoting it’s
not visible.