All of the RateSelect components extend from @radix-ui/react-select, and inherits all of the documentation for those components.

​
Features

  • Composes a dropdown menu for selecting any playback speed, and handles syncing with the underlying media element
  • Keyboard navigation (with Radix) and adheres to WAI-ARIA design patterns

​
Anatomy

Import the components and piece the parts together.

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

export default () => (
  <Player.Root>
    <Player.LiveIndicator>
      <Player.RateSelect>
        <Player.SelectTrigger>
          <Player.SelectValue />
          <Player.SelectIcon />
        </Player.SelectTrigger>
        <Player.SelectPortal>
          <Player.SelectContent>
            <Player.SelectScrollUpButton />
            <Player.SelectViewport>
              <Player.RateSelectItem>
                <Player.SelectItemText />
                <Player.SelectItemIndicator />
              </Player.RateSelectItem>

              <Player.SelectGroup>
                <Player.SelectLabel />
                <Player.RateSelectItem>
                  <Player.SelectItemText />
                  <Player.SelectItemIndicator />
                </Player.RateSelectItem>
              </Player.SelectGroup>

              <Player.SelectSeparator />
            </Player.SelectViewport>
            <Player.SelectScrollDownButton />
            <Player.SelectArrow />
          </Player.SelectContent>
        </Player.SelectPortal>
      </Player.RateSelect>
    </Player.LiveIndicator>
  </Player.Root>
);

​
Props

​
RateSelect

Takes all props of the Radix Select Root component.

​
RateSelectItem

Takes all props of the Radix Select Item component.

​
value

Required - denote the playback speed value as a number.

​
Data Attributes

​
RateSelect

​
data-livepeer-rate-select

Identifies the rate select component within the Player.

​
data-rate

Indicates the selected playback speed value.

​
RateSelectItem

​
data-livepeer-rate-select-item

Identifies the rate select item within the Player.

Was this page helpful?

PlaySeek