ControlsGroup

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>
  );
}

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>
  );
}

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>
  );
}