StructuredNavigation Component

When there is structural properties (structures) present in the IIIF manifest, the relevant data is fed to the StructuredNavigation component via the central state management system. Therefore this component must always be wrapped by IIIFPlayer. The following props were added to the component in @samvera/[email protected] to add customization to the display of the structures.

---

Props Explained

StructuredNavigation component accepts the following props to customize the UI when displaying collapsible structures (beta);

• showAllSectionsButton (Boolean): this has a default value of false and is not required. This allows to display the collapse/expand all sections button above the structure for manifests with collapsible structures. If the given Manifest doesn't have collapsible structures, this button will not be displayed event if it's turned on via this prop.
• sectionsHeading (String): this has a default value of Sections and is not required. This allows to customize the text that is shown next to collapse/expand all sections button at the top of collapsible structures. This heading is only displayed when showAllSectionsButton=true.

---

How to use the StructuredNavigation component?

Using with the IIIFPlayer with default props:

import {
  IIIFPlayer,
  MediaPlayer,
  StructuredNavigation
} from '@samvera/ramp';
import 'video.js/dist/video-js.css';
import '@samvera/ramp/dist/ramp.css';

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MediaPlayer />
    <StructuredNavigation />
</IIIFPlayer>

When showAllSectionsButton prop is turned on as follows;

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MediaPlayer />
    <StructuredNavigation showAllSectionsButton={true} />
</IIIFPlayer>

Adds a button to the top of the component to enable collapse/expand multiple sections at the same time when there are multiple collapsible structures available.