devlucky / react-micdrop Goto Github PK

I think we should find a fancier name for the project, some proposals (Already checked and they are free on npm:

• react-synthesizer
• react-fancy-audio
• react-turtle
• react-headphones
• react-micdrop
• audio-cowboy

Questions:

• Do we want to prefix the package with react
• Do we want to include audio in the name?
• Should we chose a random but cool name like casper, kiwi?

https://codepen.io/soulwire/pen/Dscga

Do we want to allow the component to optionally show the audio currentTime and total?

Example: https://willianjusten.com.br/audio-experiments/triangles/
GitHub repo: https://github.com/willianjusten/audio-experiments

Do we want the users to optionally show the audio controls? (play/pause, time, volume, etc)

In that case, I guess we want to build a custom ones?

I think we should ignore the dist folder from git and just have it published on npm?

https://www.renderforest.com/music-visualizer.html

Which are your thoughts about moving the project into an org?

We can create a new one or use the Devlucky one in which we already have a couple of famous projects + accounts in Twitter (195 followers) and Medium (480 followers) and I think we can reach more people 🎸

Run yarn deploy-storybook every time a PR gets merged

Add ability to customize visualization colors, no matter of the selected visualizer.

Create a storybook story that loads remote audio files with and without CORS headers

Iris: https://tariqksoliman.github.io/Vissonance/

When we merge to master we should release to the npm registry 📦 🚀

Semantic release https://github.com/semantic-release/semantic-release
Commitizen https://github.com/commitizen/cz-cli

Different error might happen while trying to play the audio:

• Malformed src
• src pointing to a remote file without CORS
• autoPlay: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

We should handle those accordingly and notify consumer:

import MicDrop from 'react-micdrop'

<MicDrop 
  src="nope"
  isPlaying={this.state.isPlaying}
  onError={() => this.setState({isPlaying: false})}
/>

Define how we want to organize React-storybook stories.

Do we want to have few top lever ones and reuse the same view to show multiple config options or we want to have one story per config option?