SettingsMenuTriggerButton

import {
  MediaProvider,
  PlayerProvider,
  PlayerContainer,
  ShakaVideo,
  ControlsContainer,
  ControlsGroup,
  DropdownMenu,
  DropdownMenuContent,
  SettingsMenuTriggerButton,
  RenditionsSubMenuButton,
  PlaybackRateSubMenuButton,
} from "@shelby-protocol/player";

function VideoPlayer() {
  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">
              <div className="flex-1" />
              <DropdownMenu>
                <SettingsMenuTriggerButton />
                <DropdownMenuContent side="top" align="end">
                  <RenditionsSubMenuButton />
                  <PlaybackRateSubMenuButton />
                </DropdownMenuContent>
              </DropdownMenu>
            </ControlsGroup>
          </ControlsContainer>
        </PlayerContainer>
      </PlayerProvider>
    </MediaProvider>
  );
}