Skip to content

SupplementalFiles Component

Dananji Withana edited this page Jul 18, 2024 · 5 revisions

This component displays supplementing files associated with the main resource(s) presented in the Manifest via rendering property at both Manifest and Canvas levels. Examples of such files would be a poster image associated with the A/V resource, or a text file containing an audio description of the A/V resource, etc. This component reads the Manifest information from the central state provided by Contexts, therefore it needs to be always wrapped by IIIFPlayer component.


Props Explained

The component accepts the following props to adjust the display according to the user preference;

  • itemHeading (String): this has a default value of 'Item files' and is not required. This allows to customize the title for the Manifest level file list within the component.

  • sectionHeading (String): this has a default value of 'Section files' and is not required. This allows to customize the title for the Canvas level file list(s) in the component.

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


How to use the SupplementalFiles component?

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

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <SupplementalFiles />
</IIIFPlayer>

This will display the SupplementalFiles component with the default props as below;

Screenshot from 2023-07-24 14-46-24

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>
    <SupplementalFiles showHeading={false} />
</IIIFPlayer>

Similarly the titles can be customized by using the props available in the component.