Bleeps players shared across components

[Romel Perez]

Currently, bleeps players are created and shared by component types instead of globally. The original idea was to allow the components to have more control over their bleeps, but in a "normal use-case application", this control seems to be useless since the user experience would be highly disturbed when too many sounds are played simultaneously. This can happen because the same audio file is shared across more than one component and many interface views would render too many components at once. There are also issues related to race-conditions on play/stop loop bleeps.

• Refactor bleeps setup to be created and provided by the BleepsProvider instead of the withBleeps HOC.
• Refactor core components using sounds to adjust to the new component bleeps setup.
• Add test cases.

This may imply to remove the withBleeps HOC since no components control would be needed. These functionalities should be reviewed more.

[Romel Perez]

The final bleeps provider API and the component consumer API was defined as:

const SOUND_CLICK_URL = '/assets/sounds/click.mp3';

const Button = ({ children }) => {
  const bleeps = useBleeps();
  const onClick = () => bleeps.tap.play();
  return <button onClick={onClick}>{children}</button>;
};

function Sandbox () {
  const audioSettings = {
    common: {
      volume: 0.5
    }
  };
  const playersSettings = {
    click: {
      src: [SOUND_CLICK_URL]
    }
  };
  const bleepsSettings = {
    tap: {
      player: 'click'
    }
  };

  return (
    <BleepsProvider
      audioSettings={audioSettings}
      playersSettings={playersSettings}
      bleepsSettings={bleepsSettings}
    >
      <Button>Bleep!</Button>
    </BleepsProvider>
  );
}

render(<Sandbox />);

Documentation is still in progress.

Race-conditions and play/stop loop bleeps inconsistencies will be managed in #101.