Volume

​

Features

• Conditional rendering based on volume status, customizable with the matcher pattern
• Keyboard shortcuts and adheres to WAI-ARIA design patterns
• Compatible with CSS animations for dynamic enter/exit animations
• Persists to localStorage by default (with storage overrides customizable in Root)

​

Anatomy

Import the components and piece the parts together.

import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.MuteTrigger>
      <Player.VolumeIndicator />
    </Player.MuteTrigger>
    <Player.Volume>
      <Player.Track>
        <Player.Range />
      </Player.Track>
      <Player.Thumb />
    </Player.Volume>
  </Player.Root>
);

​

Props

​

MuteTrigger

Accepts all props for a typical button element.

​

VolumeIndicator

​

forceMount

A boolean that, when set to true, ensures the component is always mounted. This is particularly useful for managing animations with external animation libraries.

​

matcher

A prop intended to define the circumstances under which the 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.

​

Volume

​

forceMount

Keeps the component always mounted, aiding in managing animations.

​

Data Attributes

​

MuteTrigger

​

data-livepeer-mute-trigger

Identifies the mute toggle component within the media player setup.

​

data-muted

Shows whether the audio is currently muted ("true") or active ("false"), assisting in the visual representation and scripting based on the mute state.

​

VolumeIndicator

​

data-livepeer-controls-volume-indicator

Identifies the component’s role within the Player.

​

data-livepeer-muted

Indicates the mute state, "true" if muted and "false" otherwise.

​

data-livepeer-volume

Shows the current volume as a percentage, e.g., "50" for 50% volume.

​

data-visible

Indicates the visibility status of the indicator, with "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.

​

Volume

​

data-livepeer-controls-volume

Serves to identify the component’s role within the Player.

​

data-livepeer-muted

Indicates the mute state, "true" if muted and "false" otherwise.

​

data-livepeer-volume

Shows the current volume as a percentage, e.g., "50" for 50% volume.

​

data-visible

Reflects the visibility status of the slider, with "true" meaning it’s currently visible (i.e., volume change is supported) and "false" denoting it’s not visible.