@internetarchive/waveform-progress
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

<waveform-progress>

A customizable scrubber bar useful for scrubbing through media.

Waveform Progress

Zones of Silence

Waveform Progress Zones of Silence

Customizable Colors

Waveform Progress Color Changes

Installation

yarn add @internetarchive/waveform-progress

Usage

// waveform-progress.js
import WaveformProgress from '@internetarchive/waveform-progress';
export default WaveformProgress;
<!-- index.html -->
<script type="module">
  import './waveform-progress.js';
</script>

<style>
  waveform-progress {
    height: 5rem;
    width: 100%;
    --fillColor: #3272b6;
    --zoneOfSilenceColor: orange;
  }
</style>

<waveform-progress
  id="waveform"
  waveformUrl='./waveform.png'
  interactive=true
></waveform-progress>

<script>
  const waveformProgress = document.getElementById('waveform');

  // set a value
  waveformProgress.percentComplete = 23;

  // add zones of silence if needed
  waveformProgress.zonesOfSilence = [
    { startPercent: 20, endPercent: 23 },
    { startPercent: 52, endPercent: 57 },
    { startPercent: 73, endPercent: 76 }
  ];

  // listen for value changes
  waveformProgress.addEventListener('valuechange', e => {
    console.log('Value has changed, new value:', e.detail.value);
  });
</script>

Development

Prerequisite

yarn install

Start Development Server

yarn start  // start development server and typescript compiler

Testing

yarn test

Testing via browserstack

yarn test:bs

Demoing using storybook

yarn storybook

Linting

yarn lint

Readme

Keywords

none

Package Sidebar

Install

npm i @internetarchive/waveform-progress

Weekly Downloads

215

Version

0.0.2

License

AGPL-3.0-only

Unpacked Size

55.5 kB

Total Files

18

Last publish

Collaborators

  • jeffwklein
  • jim-at-ia
  • tracey.pooh
  • latonv
  • ibnesayeed
  • bfalling
  • mitraardron
  • vbanos
  • kngenie
  • iisa
  • cdrini
  • nsharma123
  • dualcnhq