MetadataDisplay Component

This component displays any metadata associated with the resource presented in a given IIIF Manifest via the metadata property. By default it displays metadata relevant to the Manifest, and can be customized to show only Canvas metadata or both Manifest and Canvas metadata using the following props.

From @samvera/[email protected] onward, this component displays any rights and requiredStatement properties in either Manifest or Canvas level along with the metadata.

This component reads Manifest information from the central state provided by the Contexts, therefore it needs be always wrapped by IIIFPlayer component, which implements the state providers.

If the metadata fields include any HTML tags, this component renders them accordingly displaying only the accepted HTML tags and attributes as specified in the IIIF Presentation 3.0 spec to avoid HTML or script injection attacks.

From IIIF Presentation 3.0 spec;

• Allow HTML tags, a, b, br, i, img, p, small, span, sub, and sup
• Disallow attributes other than href on the a tag, src and alt on the img tag
• Remove all href attributes that start with the strings other than http:, https:, and mailto:

---

Props Explained

There are 2 props the component accepts to adjust the display according to the user preference;

• displayTitle (Boolean): this has a default value of true and is not required. This allows to hide the title in the MetadataDisplay component if it's included in the metadata of the IIIF manifest. In some use-cases where the title is already visible in some other part of the page, this can be used to avoid displaying the title in multiple places.

• showHeading (Boolean): this has a default value of true and is not required. This enables to hide the Details heading on top of the component allowing to customize the user interface.

• displayOnlyCanvasMetadata (Boolean): this has a default value of false and is not required. Setting this to true indicates Ramp to read and display metadata only for the current Canvas instead of Manifest.

• displayAllMetadata (Boolean): this has a default value of false and is not required. Setting this to true indicates Ramp to read and display metadata relevant for both current Canvas and Manifest.

Customizing display of Metadata in the component:

Prop values	Display in UI
default prop values	only Manifest metadata
displayOnlyCanvasMetadata=true with other default props	only Canvas metadata
displayOnlyCanvasMetadata=true && displayTitle=false with other default props	only Canvas metadata
displayOnlyCanvasMetadata=true with other default props	only Canvas metadata w/o title
displayOnlyCanvasMetadata=true && displayAllMetadata=true with other default props	both Canvas and Manifest metadata
displayAllMetadata=true with other default props	both Canvas and Manifest metadata
displayAllMetadata=true && displayTitle=false with other default props	both Canvas and Manifest metadata w/o displaying title in both Manifest and Canvas metadata

---

How to use the MetadataDisplay component?

Using with the IIIFPlayer:

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

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MetadataDisplay />
</IIIFPlayer>

This will display the MetdataDataDisplay component with the default props, where both title within metadata and header for the panel get displayed on the page as below;

If it is preferred to not to display the header for the panel, it can be turned off by setting showHeading prop to false as follows;

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MetadataDisplay showHeading={false} />
</IIIFPlayer>

Similarly the title can be removed from within the MetadataDisplay component, if/when it is preferred to display the title in some other part of the page; by setting displayTitle prop's value to false.