Skip to content
Vy logo
  • Spor
  • Resources
Components

MediaController

Media controller buttons are used to let users control playback of podcasts, audio books, videos and other multimedia.

FigmaGitHub

Code examples

() => {
  const [isPlaying, setPlaying] = React.useState(false);
  return (
    <Stack flexDirection="row">
      <SkipButton size="sm" direction="backward" />
      <JumpButton size="sm" direction="backward" />
      <PlayPauseButton
        size="lg"
        playing={isPlaying}
        onClick={() => setPlaying((c) => !c)}
      />
      <JumpButton size="sm" direction="forward" />
      <SkipButton size="sm" direction="forward" />
    </Stack>
  );
};

Guidelines

The playback buttons are used to control the playback of content such as audiobooks, podcasts, videos, or timelines.

Code

<PlayPauseButton />

import { PlayPauseButton } from "@vygruppen/spor-react";

Shows whether content is playing or not.

Props

Name
Type
Required?
Description
size"sm" | "lg"
playingbooleanWhether to show a play or pause button
onClickfunction
disabledboolean
aria-labelstring

<SkipButton />

import { SkipButton } from "@vygruppen/spor-react";

Skips between media, chapters or other things

Props

Name
Type
Required?
Description
size"sm" | "lg"
direction"backward" | "forward"Back or forward
onClickfunction
disabledboolean
aria-labelstring

<JumpButton />

import { JumpButton } from "@vygruppen/spor-react";

Jump 15 seconds back or forward

Props

Name
Type
Required?
Description
size"sm" | "lg"
direction"backward" | "forward"What way to jump
onClickfunction
disabledboolean
aria-labelstring