add react and redux, with audio context

iagodahlem · Sep 27, 2017 · 562fdcf · 562fdcf
1 parent e2f222b
commit 562fdcf
Show file tree

Hide file tree

Showing 140 changed files with 976 additions and 59 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,20 @@
+language: node_js
+node_js:
+  - 8
+
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
+script:
+  - yarn test
+  - yarn build
+
+deploy:
+  provider: pages
+  skip_cleanup: true
+  github_token: $GITHUB_TOKEN
+  local_dir: build
+  on:
+    branch: master
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # drumpad
 
+[![Build Status](https://travis-ci.org/iagodahlem/drumpad.svg?branch=master)](https://travis-ci.org/iagodahlem/drumpad)
+
 Playing with JavaScript and Web Audio API.
 
 ## License

diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "drumpad",
   "repository": "https://github.com/iagodahlem/drumpad.git",
   "author": "Iago Dahlem Lorensini <iagodahlemlorensini@gmail.com>",
+  "homepage": "https://iagodahlem.github.io/drumpad",
   "license": "MIT",
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Drumpad</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Drumpad",
+  "name": "Drumpad",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/samples/clap-808.wav b/public/samples/clap-808.wav
diff --git a/public/samples/clap-analog.wav b/public/samples/clap-analog.wav
diff --git a/public/samples/clap-crushed.wav b/public/samples/clap-crushed.wav
diff --git a/public/samples/clap-fat.wav b/public/samples/clap-fat.wav
diff --git a/public/samples/clap-slapper.wav b/public/samples/clap-slapper.wav
diff --git a/public/samples/clap-tape.wav b/public/samples/clap-tape.wav
diff --git a/public/samples/cowbell-808.wav b/public/samples/cowbell-808.wav
diff --git a/public/samples/crash-808.wav b/public/samples/crash-808.wav
diff --git a/public/samples/crash-acoustic.wav b/public/samples/crash-acoustic.wav
diff --git a/public/samples/crash-noise.wav b/public/samples/crash-noise.wav
diff --git a/public/samples/crash-tape.wav b/public/samples/crash-tape.wav
diff --git a/public/samples/hihat-808.wav b/public/samples/hihat-808.wav
diff --git a/public/samples/hihat-acoustic01.wav b/public/samples/hihat-acoustic01.wav
diff --git a/public/samples/hihat-acoustic02.wav b/public/samples/hihat-acoustic02.wav
diff --git a/public/samples/hihat-analog.wav b/public/samples/hihat-analog.wav
diff --git a/public/samples/hihat-digital.wav b/public/samples/hihat-digital.wav
diff --git a/public/samples/hihat-dist01.wav b/public/samples/hihat-dist01.wav
diff --git a/public/samples/hihat-dist02.wav b/public/samples/hihat-dist02.wav
diff --git a/public/samples/hihat-electro.wav b/public/samples/hihat-electro.wav
diff --git a/public/samples/hihat-plain.wav b/public/samples/hihat-plain.wav
diff --git a/public/samples/hihat-reso.wav b/public/samples/hihat-reso.wav
diff --git a/public/samples/hihat-ring.wav b/public/samples/hihat-ring.wav
diff --git a/public/samples/kick-808.wav b/public/samples/kick-808.wav
diff --git a/public/samples/kick-acoustic01.wav b/public/samples/kick-acoustic01.wav
diff --git a/public/samples/kick-acoustic02.wav b/public/samples/kick-acoustic02.wav
diff --git a/public/samples/kick-big.wav b/public/samples/kick-big.wav
diff --git a/public/samples/kick-classic.wav b/public/samples/kick-classic.wav
diff --git a/public/samples/kick-cultivator.wav b/public/samples/kick-cultivator.wav
diff --git a/public/samples/kick-deep.wav b/public/samples/kick-deep.wav
diff --git a/public/samples/kick-dry.wav b/public/samples/kick-dry.wav
diff --git a/public/samples/kick-electro01.wav b/public/samples/kick-electro01.wav
diff --git a/public/samples/kick-electro02.wav b/public/samples/kick-electro02.wav
diff --git a/public/samples/kick-floppy.wav b/public/samples/kick-floppy.wav
diff --git a/public/samples/kick-gritty.wav b/public/samples/kick-gritty.wav
diff --git a/public/samples/kick-heavy.wav b/public/samples/kick-heavy.wav
diff --git a/public/samples/kick-newwave.wav b/public/samples/kick-newwave.wav
diff --git a/public/samples/kick-oldschool.wav b/public/samples/kick-oldschool.wav
diff --git a/public/samples/kick-plain.wav b/public/samples/kick-plain.wav
diff --git a/public/samples/kick-slapback.wav b/public/samples/kick-slapback.wav
diff --git a/public/samples/kick-softy.wav b/public/samples/kick-softy.wav
diff --git a/public/samples/kick-stomp.wav b/public/samples/kick-stomp.wav
diff --git a/public/samples/kick-tape.wav b/public/samples/kick-tape.wav
diff --git a/public/samples/kick-thump.wav b/public/samples/kick-thump.wav
diff --git a/public/samples/kick-tight.wav b/public/samples/kick-tight.wav
diff --git a/public/samples/kick-tron.wav b/public/samples/kick-tron.wav
diff --git a/public/samples/kick-vinyl01.wav b/public/samples/kick-vinyl01.wav
diff --git a/public/samples/kick-vinyl02.wav b/public/samples/kick-vinyl02.wav
diff --git a/public/samples/kick-zapper.wav b/public/samples/kick-zapper.wav
diff --git a/public/samples/openhat-808.wav b/public/samples/openhat-808.wav
diff --git a/public/samples/openhat-acoustic01.wav b/public/samples/openhat-acoustic01.wav
diff --git a/public/samples/openhat-analog.wav b/public/samples/openhat-analog.wav
diff --git a/public/samples/openhat-slick.wav b/public/samples/openhat-slick.wav
diff --git a/public/samples/openhat-tight.wav b/public/samples/openhat-tight.wav
diff --git a/public/samples/perc-808.wav b/public/samples/perc-808.wav
diff --git a/public/samples/perc-chirpy.wav b/public/samples/perc-chirpy.wav
diff --git a/public/samples/perc-hollow.wav b/public/samples/perc-hollow.wav
diff --git a/public/samples/perc-laser.wav b/public/samples/perc-laser.wav
diff --git a/public/samples/perc-metal.wav b/public/samples/perc-metal.wav
diff --git a/public/samples/perc-nasty.wav b/public/samples/perc-nasty.wav
diff --git a/public/samples/perc-short.wav b/public/samples/perc-short.wav
diff --git a/public/samples/perc-tambo.wav b/public/samples/perc-tambo.wav
diff --git a/public/samples/perc-tribal.wav b/public/samples/perc-tribal.wav
diff --git a/public/samples/perc-weirdo.wav b/public/samples/perc-weirdo.wav
diff --git a/public/samples/ride-acoustic01.wav b/public/samples/ride-acoustic01.wav
diff --git a/public/samples/ride-acoustic02.wav b/public/samples/ride-acoustic02.wav
diff --git a/public/samples/shaker-analog.wav b/public/samples/shaker-analog.wav
diff --git a/public/samples/shaker-shuffle.wav b/public/samples/shaker-shuffle.wav
diff --git a/public/samples/shaker-suckup.wav b/public/samples/shaker-suckup.wav
diff --git a/public/samples/snare-808.wav b/public/samples/snare-808.wav
diff --git a/public/samples/snare-acoustic01.wav b/public/samples/snare-acoustic01.wav
diff --git a/public/samples/snare-acoustic02.wav b/public/samples/snare-acoustic02.wav
diff --git a/public/samples/snare-analog.wav b/public/samples/snare-analog.wav
diff --git a/public/samples/snare-big.wav b/public/samples/snare-big.wav
diff --git a/public/samples/snare-block.wav b/public/samples/snare-block.wav
diff --git a/public/samples/snare-brute.wav b/public/samples/snare-brute.wav
diff --git a/public/samples/snare-dist01.wav b/public/samples/snare-dist01.wav
diff --git a/public/samples/snare-dist02.wav b/public/samples/snare-dist02.wav
diff --git a/public/samples/snare-dist03.wav b/public/samples/snare-dist03.wav
diff --git a/public/samples/snare-electro.wav b/public/samples/snare-electro.wav
diff --git a/public/samples/snare-lofi01.wav b/public/samples/snare-lofi01.wav
diff --git a/public/samples/snare-lofi02.wav b/public/samples/snare-lofi02.wav
diff --git a/public/samples/snare-modular.wav b/public/samples/snare-modular.wav
diff --git a/public/samples/snare-noise.wav b/public/samples/snare-noise.wav
diff --git a/public/samples/snare-pinch.wav b/public/samples/snare-pinch.wav
diff --git a/public/samples/snare-punch.wav b/public/samples/snare-punch.wav
diff --git a/public/samples/snare-smasher.wav b/public/samples/snare-smasher.wav
diff --git a/public/samples/snare-sumo.wav b/public/samples/snare-sumo.wav
diff --git a/public/samples/snare-tape.wav b/public/samples/snare-tape.wav
diff --git a/public/samples/snare-vinyl01.wav b/public/samples/snare-vinyl01.wav
diff --git a/public/samples/snare-vinyl02.wav b/public/samples/snare-vinyl02.wav
diff --git a/public/samples/tom-808.wav b/public/samples/tom-808.wav
diff --git a/public/samples/tom-acoustic01.wav b/public/samples/tom-acoustic01.wav
diff --git a/public/samples/tom-acoustic02.wav b/public/samples/tom-acoustic02.wav
diff --git a/public/samples/tom-analog.wav b/public/samples/tom-analog.wav
diff --git a/public/samples/tom-chiptune.wav b/public/samples/tom-chiptune.wav
diff --git a/public/samples/tom-fm.wav b/public/samples/tom-fm.wav
diff --git a/public/samples/tom-lofi.wav b/public/samples/tom-lofi.wav
diff --git a/public/samples/tom-rototom.wav b/public/samples/tom-rototom.wav
diff --git a/public/samples/tom-short.wav b/public/samples/tom-short.wav
diff --git a/src/actions/sampleKitActions.js b/src/actions/sampleKitActions.js
@@ -0,0 +1,71 @@
+import audioBufferService from '../services/audioBufferService'
+import * as fromAudioContext from '../reducers/audioContextReducer'
+import * as fromSamples from '../reducers/samplesReducer'
+import * as types from '../constants/actionTypes'
+
+const fetchSampleKit = () => (dispatch, getState) => {
+  const fetchSampleKitRequest = () => ({
+    type: types.FETCH_SAMPLE_KIT_REQUEST,
+  })
+
+  const fetchSampleKitSuccess = (payload) => ({
+    type: types.FETCH_SAMPLE_KIT_SUCCESS,
+    payload,
+  })
+
+  const fetchSampleKitFailure = (error) => ({
+    type: types.FETCH_SAMPLE_KIT_FAILURE,
+    message: error.message || 'Something went wrong.',
+  })
+
+  const context = fromAudioContext.getAudioContext(getState())
+  const defaultSampleKit = fromSamples.getAll(getState())
+
+  dispatch(fetchSampleKitRequest())
+
+  const sampleKit = defaultSampleKit
+    .map(sample => {
+      return audioBufferService
+        .load(context, sample.url)
+        .then(buffer => ({
+          ...sample,
+          buffer,
+          start: audioBufferService.findStartGapDuration(buffer),
+        }))
+    })
+
+  return Promise.all(sampleKit)
+    .then(payload => dispatch(fetchSampleKitSuccess(payload)))
+    .catch(error => dispatch(fetchSampleKitFailure(error)))
+}
+
+const playSample = (id) => (dispatch, getState) => {
+  const playSampleStart = (id) => ({
+    type: types.PLAY_SAMPLE_START,
+    id,
+  })
+
+  const playSampleStop = (id) => ({
+    type: types.PLAY_SAMPLE_STOP,
+    id,
+  })
+
+  const context = fromAudioContext.getAudioContext(getState())
+  const sample = fromSamples.getSample(getState(), id)
+
+  dispatch(playSampleStart(id))
+
+  return audioBufferService.play(context, sample, () => {
+    dispatch(playSampleStop(id))
+  })
+}
+
+export default {
+  fetchSampleKit,
+  playSample,
+}
+
+export {
+  fetchSampleKit,
+  playSample,
+}
diff --git a/src/actions/sampleKitActions.test.js b/src/actions/sampleKitActions.test.js
@@ -0,0 +1,61 @@
+import axios from 'axios'
+import httpAdapter from 'axios/lib/adapters/http'
+import nock from 'nock'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import * as sampleKitActions from './sampleKitActions'
+import * as types from '../constants/actionTypes'
+import audioBufferService from '../services/audioBufferService'
+
+const host = 'http://localhost'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+const sample = { id: 'sample', name: 'sample', url: '/sample-url', start: 0 }
+const state = {
+  allIds: ['sample'],
+  byId: { sample },
+}
+
+const audioBuffer = {
+  duration: 0.48036281179138324,
+  length: 21184,
+  numberOfChannels: 1,
+  sampleRate: 44100,
+}
+
+// TODO: set this in a jest global setup
+axios.defaults.host = host
+axios.defaults.adapter = httpAdapter
+
+describe('sampleKitActions', () => {
+  beforeEach(() => {
+    audioBufferService.findStartGapDuration = jest.fn()
+      .mockReturnValue(0)
+  })
+
+  afterEach(nock.cleanAll)
+
+  describe('fetchSamples', () => {
+    it('success', async () => {
+      audioBufferService.load = jest.fn()
+        .mockReturnValue(Promise.resolve(audioBuffer))
+
+      nock(host)
+        .get('/sample-url')
+        .reply(200, { buffer: [] })
+
+      const payload = [{ ...sample, buffer: audioBuffer }]
+      const store = mockStore({ samples: state })
+      const expectedActions = [
+        { type: types.FETCH_SAMPLE_KIT_REQUEST },
+        { type: types.FETCH_SAMPLE_KIT_SUCCESS, payload },
+      ]
+
+      await store.dispatch(sampleKitActions.fetchSampleKit())
+
+      expect(store.getActions()).toEqual(expectedActions)
+    })
+  })
+})
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -0,0 +1,3 @@
+.App {
+  height: 100%;
+}
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import './App.css'
+
+import Drumpad from '../../containers/Drumpad'
+
+const App = () => (
+  <div className='App'>
+    <Drumpad />
+  </div>
+)
+
+export default App
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import App from './App'
+
+describe('App', () => {
+  let component
+  let props
+
+  beforeEach(() => {
+    props = {}
+    component = shallow(<App {...props} />)
+  })
+
+  it('renders', () => {
+    // expect(component).toMatchSnapshot()
+  })
+})
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -0,0 +1,3 @@
+import App from './App'
+
+export default App
diff --git a/src/components/Key/Key.css b/src/components/Key/Key.css
@@ -0,0 +1,20 @@
+.Key {
+  width: calc(33.3% - 6px);
+  height: calc(33.3% - 6px);
+  margin: 3px;
+  border-radius: 5px;
+  background-color: rgba(255,255,255,.5);
+  transition: background-color .2s ease;
+}
+
+.Key::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(rgba(243,243,243,.8) 0%, transparent 100%);
+}
+
+.Key.isPlaying {
+  background-color: #ff0;
+}
diff --git a/src/components/Key/Key.js b/src/components/Key/Key.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './Key.css'
+
+const toggleClass = (isPlaying) => isPlaying ? 'Key isPlaying' : 'Key'
+
+const Key = ({ isPlaying, letter, sample, onClick }) => (
+  <div className={toggleClass(isPlaying)} onClick={(e) => onClick(e, sample)}>
+  </div>
+)
+
+Key.propTypes = {
+  sample: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+export default Key
diff --git a/src/components/Key/Key.test.js b/src/components/Key/Key.test.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Key from './Key'
+
+describe('Key', () => {
+  let component, props
+
+  beforeEach(() => {
+    props = {}
+    component = shallow(<Key {...props} />)
+  })
+
+  it('should', () => {
+    // expect(component).toMatchSnapshot()
+  })
+})
diff --git a/src/components/Key/index.js b/src/components/Key/index.js
@@ -0,0 +1,3 @@
+import Key from './Key.js'
+
+export default Key
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,12 @@
+import App from './App'
+import Key from './Key'
+
+export default {
+  App,
+  Key,
+}
+
+export {
+  App,
+  Key,
+}
diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js
@@ -0,0 +1,10 @@
+export const FETCH_SAMPLE_KIT_REQUEST = 'FETCH_SAMPLE_KIT_REQUEST'
+export const FETCH_SAMPLE_KIT_SUCCESS = 'FETCH_SAMPLE_KIT_SUCCESS'
+export const FETCH_SAMPLE_KIT_FAILURE = 'FETCH_SAMPLE_KIT_FAILURE'
+
+export const FETCH_SAMPLE_REQUEST = 'FETCH_SAMPLE_REQUEST'
+export const FETCH_SAMPLE_SUCCESS = 'FETCH_SAMPLE_SUCCESS'
+export const FETCH_SAMPLE_FAILURE = 'FETCH_SAMPLE_FAILURE'
+
+export const PLAY_SAMPLE_START = 'PLAY_SAMPLE_START'
+export const PLAY_SAMPLE_STOP = 'PLAY_SAMPLE_STOP'
diff --git a/src/constants/defaultSampleKit.js b/src/constants/defaultSampleKit.js
@@ -0,0 +1,14 @@
+const byId = (kit) => kit
+  .reduce((samples, sample) => {
+    samples[sample.id] = sample
+    return samples
+  },{})
+
+const allIds = (kit) => kit.map(sample => sample.id)
+
+const defaultSampleKit = (kit) => ({
+  byId: byId(kit),
+  allIds: allIds(kit),
+})
+
+export default defaultSampleKit
diff --git a/src/constants/keys.js b/src/constants/keys.js
@@ -0,0 +1,13 @@
+const keys = [
+  { letter: 't', sample: 'clap-808' },
+  { letter: 'y', sample: 'cowbell-808' },
+  { letter: 'u', sample: 'crash-808' },
+  { letter: 'g', sample: 'hihat-808' },
+  { letter: 'h', sample: 'kick-808' },
+  { letter: 'j', sample: 'openhat-808' },
+  { letter: 'b', sample: 'perc-808' },
+  { letter: 'n', sample: 'snare-808' },
+  { letter: 'm', sample: 'tom-808' },
+]
+
+export default keys
diff --git a/src/constants/sampleKit808.js b/src/constants/sampleKit808.js
@@ -0,0 +1,13 @@
+const kit808 = [
+  { id: 'clap-808', name: 'Clap 808', url: '/clap-808.wav', kit: '808' },
+  { id: 'cowbell-808', name: 'Cowbell 808', url: '/cowbell-808.wav', kit: '808' },
+  { id: 'crash-808', name: 'Crash 808', url: '/crash-808.wav', kit: '808' },
+  { id: 'hihat-808', name: 'Hihat 808', url: '/hihat-808.wav', kit: '808' },
+  { id: 'kick-808', name: 'Kick 808', url: '/kick-808.wav', kit: '808' },
+  { id: 'openhat-808', name: 'Openhat 808', url: '/openhat-808.wav', kit: '808' },
+  { id: 'perc-808', name: 'Perc 808', url: '/perc-808.wav', kit: '808' },
+  { id: 'snare-808', name: 'Snare 808', url: '/snare-808.wav', kit: '808' },
+  { id: 'tom-808', name: 'Tom 808', url: '/tom-808.wav', kit: '808' },
+]
+
+export default kit808