Skip to content

Upgrade Notes

Dananji Withana edited this page Feb 16, 2024 · 15 revisions

Upgrading from v2.0.0 to v3.0.0

This upgrade carries a lot of new components and changes to the player and is backward compatible with v2.0.0 while there are some new props added to the existing components to make them more customizable.

Installing v3.0.0

This version bump doesn't require any new dependencies to be installed. But v3.0.0 doesn't require to install yarn add videojs-hotkeys as a peer dependency. This functionality is built into the Ramp code from v3.0.0.

New components

Changes to existing components

  • IIIFPlayer component:

    Props:

    • 3 new props added to it; they are customErrorMessage, startCanvasId, and startCanvasTime. These are explained in detail in the documentation here.
  • MediaPlayer component:

    Props:

    • One new prop for disabling Picture-In-Picture in the player called enablePIP, this prop has a default value of false.

    ** CHANGED DEFAULT BEHAVIOR: This prop changes the default behavior of v2.0.0, which had Picture-In-Picture enabled by DEFAULT.

  • Transcript component:

    Props:

    • One new prop for providing a manifestUrl, which is the same Manifest url given to IIIFPlayer component. The component will parse the supplementing annotation for each Canvas in the Manifest and generate a transcripts list. More information is available in the documentation.

    Functionality changes:

    • Transcripts component used to always auto-scroll with playback when there are transcripts with time information. In v3.0.0 the auto-scrolling can be turned on/off using the check box in the component. This is only available with transcripts with time information (e.g. WebVTT)
    • Indicates machine generated transcripts in the component. More information can be found in the documentation. Screenshot 2024-02-14 at 4 41 27 PM
  • StructuredNavigation component:

    UI changes:

    • In v3.0.0 the component has a new look and feel. In the new look it indicates each root-level Range explicitly, displays time information, and displays a Scroll to see more message on the bottom of the component when there are long structures.

      Example from the IIIF Cookbook's Table of Content for A/V Content recipe;

      In v2.0.0: In v3.0.0:
      Screenshot 2024-02-15 at 1 48 41 PM Screenshot 2024-02-15 at 1 45 40 PM