Example 5/@videodb/robopeek-react @videodb/robopeek-rlds

Show and hide parts

The default ShardViewer, where every switch below takes one part out. The player parts are left out by not passing them as children, and single cameras, charts or metadata entries are filtered with include. The viewer's own chrome (status strip, episode drawer) has no props, so it's hidden with CSS on its public classes. The first Code tab shows the JSX for the current switches.

Example dataset0.7 MB · 3 episodes · position & yaw

Use your own URL or file

Files are read locally. Remote URLs must allow CORS and are fetched as supplied.

Berkeley navigation

<ShardViewer source={source}>
  <Player.Stage>
    <Player.Instruction />
    <Player.Frames renderEmpty={() => null} />
    <Player.Transport>
      <Player.PrevEpisode />
      <Player.StepBack />
      <Player.Play />
      <Player.StepForward />
      <Player.NextEpisode />
      <Player.Scrubber />
      <Player.Counter />
    </Player.Transport>
    <Player.Options>
      <Player.RateSelect />
      <Player.AutoNext />
      <Player.Flags />
    </Player.Options>
  </Player.Stage>
  <Player.Tracks include={() => true}>
    <Player.Metadata />
  </Player.Tracks>
</ShardViewer>

The Code tab contains the source files used by this example.