The media library of Radancy, named Dropr, needed an implementation for the frontend. This media library is an API based service that serves images and videos in provided settings. This roadmap initiative was developed into a npm package that could be used throughout all projects.

The frontend implementation is built with a npm package, with typescript, vue3 and vite. The package contains:

• Typescript class that contains all logic for requesting images and videos in the provided settings
• Vue3 composable to make it easy to use in vue components
• Vue3 components for rendering <picture> and <video> elements

The vue composable returns specific methods of the instance of the media library class. It contains the getVideo and getImage methods, that can be used as below:

The DroprImage and DroprVideo components have the following props:

• image/video resource. An object of the media item from the API
• width (number)
• height (number)
• sources (optional, array with breakpoints with dimensions)

It renders a picture/video element, with sources for all provided breakpoints. It also takes care of accessibility and performance issues, by adding the alt attribute, retina resolutions, and loading and decoding attributes.

I also developed the frontend side of the CMS integration of the media library. The key features are:

• Upload of media assets
• Management of media assets
  • Image: Setting the focal point, manage alt attribute and tags
  • Video: Upload of subtitles per language, manage tags
• Linking media to content in the CMS. This was done by a custom form element that on click renders a modal where the user can select the image or video