Clip

​

Features

• Automatically handles determining the current playback head in Unix time
• Compatible with the create clip API
• Keyboard hotkeys and adheres to WAI-ARIA design patterns
• Conditional rendering if it is supported by the current media and is enabled

​

Anatomy

Import the components and piece the parts together.

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

export default () => (
  <Player.Root>
    <Player.Container>
      <Player.LiveIndicator>
        <Player.ClipTrigger />
      </Player.LiveIndicator>
    </Player.Container>
    <Player.Container>
      <Player.Controls>
        <Player.LiveIndicator>
          <Player.ClipTrigger />
        </Player.LiveIndicator>
      </Player.Controls>
    </Player.Container>
  </Player.Root>
);

​

Usage

ClipTrigger is a button that users can interact with to initiate the clip creation process. It’s displayed only if clipping functionality is enabled (by passing a valid clipLength to the Root component).

It should be wrapped in a LiveIndicator, since the “last n seconds” clipping functionality is only supported on livestreams.

​

Props

The component accepts all props suitable for a button element, along with specific props:

​

forceMount

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

​

onClip

A function that gets called when a clip is requested. It receives an object containing the playbackId, startTime, and endTime, which can be used to handle the clip creation process.

​

Data Attributes

The ClipTrigger component assigns data attributes to its underlying element to reflect the current state and user interaction capabilities.

​

data-livepeer-controls-clip-button

Serves to identify the component’s role.

​

data-visible

Indicates the visibility status of the trigger, with "true" meaning it’s currently visible (i.e., clip functionality is enabled) and "false" denoting it’s not visible, useful for CSS-based animations.