Media PlayerControls
ControlsGroup
Groups related controls together
Groups related controls together. Controls within a group appear/disappear together based on player state.
Props
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes |
children | ReactNode | Control components |
Examples
Basic Usage
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
PlayButton,
MuteButton
} from "@shelby-protocol/player";
function CustomControls() {
return (
<MediaProvider>
<PlayerProvider>
<PlayerContainer>
<ShakaVideo
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
className="w-full"
/>
<ControlsContainer>
<ControlsGroup className="p-4">
<PlayButton />
<MuteButton />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}Multiple Groups
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
Seekbar,
PlayButton,
CurrentTimeDisplay
} from "@shelby-protocol/player";
function CustomControls() {
return (
<MediaProvider>
<PlayerProvider>
<PlayerContainer>
<ShakaVideo
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
className="w-full"
/>
<ControlsContainer>
<div className="flex-1" />
<ControlsGroup className="px-4 w-full">
<Seekbar />
</ControlsGroup>
<ControlsGroup className="p-4">
<PlayButton />
<CurrentTimeDisplay />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}With Custom Styling
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
PlayButton,
FullscreenButton
} from "@shelby-protocol/player";
function CustomControls() {
return (
<MediaProvider>
<PlayerProvider>
<PlayerContainer>
<ShakaVideo
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
className="w-full"
/>
<ControlsContainer>
<ControlsGroup className="p-4 bg-gradient-to-t from-black/80 to-transparent">
<PlayButton className="hover:scale-110 transition-transform" />
<div className="flex-1" />
<FullscreenButton className="hover:scale-110 transition-transform" />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}