@cassette/components

A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React.

Usage no npm install needed!

<script type="module">
  import cassetteComponents from 'https://cdn.skypack.dev/@cassette/components';
</script>

README

@cassette/components

@cassette/components contains some convenient React component building blocks which can be used in media player user interfaces created with @cassette/core.

Installation

npm install @cassette/components

Components included:

  • MaybeMarquee - used to make content scroll in marquee fashion, only when the container area is too small for all the content to be displayed at once
  • ProgressBar - a vertical or horizontal progress bar element which can be manipulated by mouse or touch
  • ProgressBarDisplay - a non-interactive version of ProgressBar
  • MediaProgressBar - a ProgressBar connected to the media playback of the surrounding playerContext
  • MediaProgressBarDisplay - a non-interactive version of MediaProgressBar
  • VideoDisplay - a display canvas for the video content from the surrounding playerContext

Find full documentation here!