Playback Speed

The RateSelect and RateSelectItem components provide an interface for users to adjust the playback speed of the media.

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.