Components
MediaController
Media controller buttons are used to let users control playback of podcasts, audio books, videos and other multimedia.
Examples
Some examples of media controllers
() => { 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> ); };
Different sizes
<Stack> <Stack flexDirection="row"> <PlayPauseButton size="sm" /> <PlayPauseButton size="lg" /> </Stack> <Stack flexDirection="row"> <SkipButton direction="forward" size="sm" /> <SkipButton direction="forward" size="lg" /> </Stack> <Stack flexDirection="row"> <JumpButton direction="forward" size="sm" /> <JumpButton direction="forward" size="lg" /> </Stack> </Stack>
Disabled buttons
<Stack flexDirection="row"> <JumpButton direction="backward" size="sm" /> <JumpButton direction="forward" size="sm" disabled /> </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" | ||
playing | boolean | Whether to show a play or pause button | |
onClick | function | ||
disabled | boolean | ||
aria-label | string |
<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 | |
onClick | function | ||
disabled | boolean | ||
aria-label | string |
<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 | |
onClick | function | ||
disabled | boolean | ||
aria-label | string |