import {  MediaPlayer,  MediaPlayerControls,  MediaPlayerControlsOverlay,  MediaPlayerFullscreen,  MediaPlayerPiP,  MediaPlayerPlay,  MediaPlayerPlaybackSpeed,  MediaPlayerSeek,  MediaPlayerSeekBackward,  MediaPlayerSeekForward,  MediaPlayerTime,  MediaPlayerVideo,  MediaPlayerVolume} from 'reactjs-player-media';import 'reactjs-player-media/style.css'function MediaPlayerBasic() {  return <>    <MediaPlayer>      <MediaPlayerVideo>        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />      </MediaPlayerVideo>      <MediaPlayerControls        style={{          flexDirection: 'column',          alignItems: 'flex-start',          gap: '10px',        }}      >        <MediaPlayerControlsOverlay />        <MediaPlayerSeek />        <div          style={{            display: 'flex',            width: '100%',            alignItems: 'center',            gap: '8px',          }}        >          <div            style={{              display: 'flex',              flex: 1,              alignItems: 'center',              gap: '8px',            }}          >            <MediaPlayerPlay />            <MediaPlayerSeekBackward />            <MediaPlayerSeekForward />            <MediaPlayerVolume expandable />            <MediaPlayerTime />          </div>          <div            style={{              display: 'flex',              alignItems: 'center',              gap: '8px',            }}          >            <MediaPlayerPlaybackSpeed />            <MediaPlayerPiP />            <MediaPlayerFullscreen />          </div>        </div>      </MediaPlayerControls>    </MediaPlayer>  </>}

import {  MediaPlayer,  MediaPlayerControls,  MediaPlayerControlsOverlay,  MediaPlayerFullscreen,  MediaPlayerPiP,  MediaPlayerPlay,  MediaPlayerSeek,  MediaPlayerSeekBackward,  MediaPlayerSeekForward,  MediaPlayerTime,  MediaPlayerVideo,  MediaPlayerVolume,  MediaPlayerSettings,  MediaPlayerVolumeIndicator,  MediaPlayerLoading,  MediaPlayerError,  MediaPlayerCaptions,} from 'reactjs-player-media';import 'reactjs-player-media/style.css'function MediaPlayerSettingsDemo() {  return (    <MediaPlayer autoHide>      <MediaPlayerVideo        src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4"        crossOrigin=""        muted        playsInline      >        <track          default          kind="chapters"          src="https://media-chrome.mux.dev/examples/vanilla/vtt/elephantsdream/chapters.vtt"        />        <track          default          kind="metadata"          label="thumbnails"          src="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/storyboard.vtt"        />        <track          label="English"          kind="captions"          srcLang="en"          src="https://media-chrome.mux.dev/examples/vanilla/vtt/elephantsdream/captions.en.vtt"          default        />        <track          label="Japanese"          kind="captions"          srcLang="ja"          src="https://media-chrome.mux.dev/examples/vanilla/vtt/elephantsdream/captions.ja.vtt"        />        <track          label="Swedish"          kind="captions"          srcLang="sv"          src="https://media-chrome.mux.dev/examples/vanilla/vtt/elephantsdream/captions.sv.vtt"        />      </MediaPlayerVideo>      <MediaPlayerLoading />      <MediaPlayerError />      <MediaPlayerVolumeIndicator />      <MediaPlayerControls        style={{          flexDirection: 'column',          alignItems: 'flex-start',          gap: '10px',        }}      >        <MediaPlayerControlsOverlay />        <MediaPlayerSeek />        <div style={{          display: 'flex',          width: '100%',          alignItems: 'center',          gap: '8px',        }}>          <div style={{            display: 'flex',            flex: 1,            alignItems: 'center',            gap: '8px',          }}>            <MediaPlayerPlay />            <MediaPlayerSeekBackward />            <MediaPlayerSeekForward />            <MediaPlayerVolume expandable />            <MediaPlayerTime />          </div>          <div style={{            display: 'flex',            alignItems: 'center',            gap: '8px',          }}>            <MediaPlayerCaptions />            <MediaPlayerSettings />            <MediaPlayerPiP />            <MediaPlayerFullscreen />          </div>        </div>      </MediaPlayerControls>    </MediaPlayer>  );}

import {  MediaPlayer,  MediaPlayerControls,  MediaPlayerPlay,  MediaPlayerSeek,  MediaPlayerSeekBackward,  MediaPlayerSeekForward,  MediaPlayerVolume,  MediaPlayerAudio,  MediaPlayerPlaybackSpeed,  MediaPlayerLoop,} from 'reactjs-player-media';import 'reactjs-player-media/style.css'function MediaPlayerAudioDemo() {  return (    <MediaPlayer      style={{        height: '80px',      }}    >      <MediaPlayerAudio className="sr-only"      >        <source src="/art.mp3" type="audio/mp3" />      </MediaPlayerAudio>      <MediaPlayerControls        style={{          flexDirection: 'column',          alignItems: 'flex-start',          gap: '10px',        }}      >        <MediaPlayerSeek withTime />        <div          style={{            display: 'flex',            width: '100%',            alignItems: 'center',            justifyContent: 'center',            gap: '8px',          }}        >          <MediaPlayerSeekBackward />          <MediaPlayerPlay />          <MediaPlayerSeekForward />          <MediaPlayerVolume />          <MediaPlayerPlaybackSpeed />          <MediaPlayerLoop />        </div>      </MediaPlayerControls>    </MediaPlayer>  );}

import {  MediaPlayer,  MediaPlayerControls,  MediaPlayerPlay,  MediaPlayerSeek,  MediaPlayerSeekBackward,  MediaPlayerSeekForward,  MediaPlayerVolume,  MediaPlayerPlaybackSpeed,  MediaPlayerVideo,  MediaPlayerError,  MediaPlayerControlsOverlay,  MediaPlayerTime,  MediaPlayerPiP,  MediaPlayerFullscreen,} from 'reactjs-player-media';import 'reactjs-player-media/style.css'function MediaPlayerErrorDemo() {  return (    <MediaPlayer>      <MediaPlayerVideo        src="/assets/nonexistent-video.mp4"        playsInline        crossOrigin=""      />      <MediaPlayerError />      <MediaPlayerControls        style={{          flexDirection: 'column',          alignItems: 'flex-start',          gap: '10px',        }}      >        <MediaPlayerControlsOverlay />        <MediaPlayerSeek />        <div          style={{            display: 'flex',            width: '100%',            alignItems: 'center',            gap: '8px',          }}        >          <div            style={{              display: 'flex',              flex: 1,              alignItems: 'center',              gap: '8px',            }}          >            <MediaPlayerPlay />            <MediaPlayerSeekBackward />            <MediaPlayerSeekForward />            <MediaPlayerVolume expandable />            <MediaPlayerTime />          </div>          <div className="flex items-center gap-2"            style={{              display: 'flex',              alignItems: 'center',              gap: '8px',            }}          >            <MediaPlayerPlaybackSpeed />            <MediaPlayerPiP />            <MediaPlayerFullscreen />          </div>        </div>      </MediaPlayerControls>    </MediaPlayer>  );}