Implementation Details

Why a Component Library?

Previously this was packaged into one single component, with multiple child components. So, the application exported a single component called IIIFPlayer with the other components as its children. The issue we faced with this was that, one couldn't simply use the player itself without bringing in the other child components into their application. Hence, the application was re-structured into a component library. So that, it exports multiple components, which can be imported into a host application as required. It gives the user the choice to only import the components they need, as well the liberty to place these components according to their preferences on the web page.

Technology

ReactJS

This component library is written using ReactJS, a free and open-source front-end JavaScript library for building user interfaces and UI components. One of the main reasons for using ReactJS is its use of virtual DOM when re-rendering the page, which makes the process fast and efficient.

VideoJS

The IIIFPalayer component uses VideoJS underneath the ReactJS component. VideoJS is an open source HTML5 player framework, made available via NPM. It exports an HTML5 player with basic player functionality. There is a lot of plugins out there, that can be integrated via NPM to add additional functionality to the basic player. And VideoJS is designed in a way, that it makes it easier build custom components and integrate them into the player.

State Management

State management provides a single source of truth and helps the components to communicate. Most of the ReactJS applications use React Redux in their applications for state management.