├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── CSSStub.js
    │   └── FileStub.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── initial
    │   ├── 1.mp3
    │   ├── 2.mp3
    │   ├── 3.mp3
    │   ├── 4.mp3
    │   ├── 5.mp3
    │   ├── 6.mp3
    │   ├── 7.mp3
    │   ├── 8.mp3
    │   ├── mysound.mp3
    │   ├── mysound2.mp3
    │   └── project.json
├── scripts
    ├── build-electron.js
    ├── build.js
    ├── start-electron.js
    ├── start.js
    └── test.js
├── src
    ├── clip
    │   ├── clip-editor.css
    │   ├── clip-editor.js
    │   ├── clip.css
    │   ├── clip.js
    │   └── play-audio-clip.js
    ├── data
    │   ├── blank_project.json
    │   ├── clips.js
    │   ├── controllers.js
    │   ├── file-loader.js
    │   ├── files.js
    │   ├── pads.js
    │   ├── reducer.js
    │   ├── scheduler.js
    │   ├── settings.js
    │   ├── tracks.js
    │   └── video-renderer.js
    ├── editor.css
    ├── editor.js
    ├── files
    │   ├── drag-and-drop-receiver.js
    │   ├── file.css
    │   ├── file.js
    │   ├── files-list.css
    │   └── files-list.js
    ├── index.css
    ├── index.js
    ├── lib
    │   ├── audio-graph.js
    │   ├── audio
    │   │   └── context.js
    │   ├── beatclock.js
    │   ├── files.js
    │   ├── junk.js
    │   ├── loader.js
    │   ├── midi.js
    │   ├── regular-expressions.js
    │   ├── scheduler.js
    │   ├── store.js
    │   └── video
    │   │   ├── dot-matrix-shader.js
    │   │   └── renderer.js
    ├── live-mode.css
    ├── live-mode.js
    ├── pad
    │   ├── pad-editor.css
    │   ├── pad-editor.js
    │   ├── pad.css
    │   ├── pad.js
    │   ├── pads.css
    │   └── pads.js
    ├── projects.css
    ├── projects.js
    ├── settings
    │   ├── settings.css
    │   └── settings.js
    ├── styles
    │   └── forms.css
    ├── tracks
    │   ├── track-editor.css
    │   ├── track-editor.js
    │   └── tracks.js
    ├── vendor
    │   └── web-midi.js
    ├── video-controls-gui.css
    ├── video-controls-gui.js
    ├── video-player.css
    └── video-player.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # testing
 7 | coverage
 8 | 
 9 | # production
10 | build
11 | electron-build
12 | 
13 | # misc
14 | .DS_Store
15 | .env
16 | npm-debug.log
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JSConf.eu opening performance 2017
 2 | 
 3 | ## Setup
 4 | 
 5 | 1. Install yarn: <https://yarnpkg.com/lang/en/docs/install/>
 6 | 1. Run: `yarn`
 7 | 
 8 | ## Development
 9 | 
10 | `yarn start`
11 | 
12 | ## Build a new version of the app
13 | 
14 | 1. Run `yarn run build-electron` (it might ask you to install all sorts of deps for Windows)
15 | 
16 | ## The Talks We Used
17 | 
18 | Ashley Williams - A brief history and mishistory of modularity - Nordic.js 2016
19 | https://www.youtube.com/watch?v=LfOVyNQK5io
20 | 
21 | Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf 2016  
22 | https://www.youtube.com/watch?v=e-5obm1G_FY
23 | 
24 | Jake Archibald - Show Them What You Got  
25 | https://vimeo.com/album/3953264/video/165995029
26 | 
27 | André Staltz (@andrestaltz) - You will learn RxJS at ng-europe 2016  
28 | https://www.youtube.com/watch?v=uQ1zhJHclvs
29 | 
30 | Philip Roberts - JSConf.eu 2014 - What the heck is the event loop anyway?  
31 | https://www.youtube.com/watch?v=8aGhZQkoFbQ
32 | 
33 | PolyConf 16: The Seif Project / Douglas Crockford  
34 | https://www.youtube.com/watch?v=O9AwYiwIvXE
35 | 
36 | ReactiveConf 2016 - David Nolen - Through the Looking Glass  
37 | https://www.youtube.com/watch?v=lkh4hjyHdWA
38 | 
39 | The State of Javascript - Jack Franklin _ August 2016  
40 | https://www.youtube.com/watch?v=5NIL3Epadj0
41 | 
42 | Raquel Vélez - Wombat-Driven Understanding - An Interactive Guide To Using npm - JSConf.Asia 2016  
43 | https://www.youtube.com/watch?v=7MbXsRS-ZLg
44 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 2 | // injected into the application via DefinePlugin in Webpack configuration.
 3 | 
 4 | var REACT_APP = /^REACT_APP_/i;
 5 | 
 6 | function getClientEnvironment(publicUrl) {
 7 |   var processEnv = Object
 8 |     .keys(process.env)
 9 |     .filter(key => REACT_APP.test(key))
10 |     .reduce((env, key) => {
11 |       env[key] = JSON.stringify(process.env[key]);
12 |       return env;
13 |     }, {
14 |       // Useful for determining whether we’re running in production mode.
15 |       // Most importantly, it switches React into the correct mode.
16 |       'NODE_ENV': JSON.stringify(
17 |         process.env.NODE_ENV || 'development'
18 |       ),
19 |       // Useful for resolving the correct path to static assets in `public`.
20 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
21 |       // This should only be used as an escape hatch. Normally you would put
22 |       // images into the `src` and `import` them in code to get their paths.
23 |       'PUBLIC_URL': JSON.stringify(publicUrl)
24 |     });
25 |   return {'process.env': processEnv};
26 | }
27 | 
28 | module.exports = getClientEnvironment;
29 | 


--------------------------------------------------------------------------------
/config/jest/CSSStub.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/config/jest/FileStub.js:
--------------------------------------------------------------------------------
1 | module.exports = "test-file-stub";
2 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var fs = require('fs');
 3 | 
 4 | // Make sure any symlinks in the project folder are resolved:
 5 | // https://github.com/facebookincubator/create-react-app/issues/637
 6 | var appDirectory = fs.realpathSync(process.cwd());
 7 | function resolveApp(relativePath) {
 8 |   return path.resolve(appDirectory, relativePath);
 9 | }
10 | 
11 | // We support resolving modules according to `NODE_PATH`.
12 | // This lets you use absolute paths in imports inside large monorepos:
13 | // https://github.com/facebookincubator/create-react-app/issues/253.
14 | 
15 | // It works similar to `NODE_PATH` in Node itself:
16 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
17 | 
18 | // We will export `nodePaths` as an array of absolute paths.
19 | // It will then be used by Webpack configs.
20 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
21 | 
22 | var nodePaths = (process.env.NODE_PATH || '')
23 |   .split(process.platform === 'win32' ? ';' : ':')
24 |   .filter(Boolean)
25 |   .map(resolveApp);
26 | 
27 | // config after eject: we're in ./config/
28 | module.exports = {
29 |   appBuild: resolveApp('build'),
30 |   appPublic: resolveApp('public'),
31 |   appHtml: resolveApp('public/index.html'),
32 |   appIndexJs: resolveApp('src/index.js'),
33 |   appPackageJson: resolveApp('package.json'),
34 |   appSrc: resolveApp('src'),
35 |   testsSetup: resolveApp('src/setupTests.js'),
36 |   appNodeModules: resolveApp('node_modules'),
37 |   ownNodeModules: resolveApp('node_modules'),
38 |   nodePaths: nodePaths
39 | };
40 | 
41 | 
42 | 
43 | // config before publish: we're in ./packages/react-scripts/config/
44 | if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
45 |   module.exports = {
46 |     appBuild: resolveOwn('../../../build'),
47 |     appPublic: resolveOwn('../template/public'),
48 |     appHtml: resolveOwn('../template/public/index.html'),
49 |     appIndexJs: resolveOwn('../template/src/index.js'),
50 |     appPackageJson: resolveOwn('../package.json'),
51 |     appSrc: resolveOwn('../template/src'),
52 |     testsSetup: resolveOwn('../template/src/setupTests.js'),
53 |     appNodeModules: resolveOwn('../node_modules'),
54 |     ownNodeModules: resolveOwn('../node_modules'),
55 |     nodePaths: nodePaths
56 |   };
57 | }
58 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | var path = require('path');
  2 | var autoprefixer = require('autoprefixer');
  3 | var webpack = require('webpack');
  4 | var findCacheDir = require('find-cache-dir');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  7 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  9 | var getClientEnvironment = require('./env');
 10 | var paths = require('./paths');
 11 | 
 12 | // Webpack uses `publicPath` to determine where the app is being served from.
 13 | // In development, we always serve from the root. This makes config easier.
 14 | var publicPath = '/';
 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 18 | var publicUrl = '';
 19 | // Get environment variables to inject into our app.
 20 | var env = getClientEnvironment(publicUrl);
 21 | 
 22 | // This is the development configuration.
 23 | // It is focused on developer experience and fast rebuilds.
 24 | // The production configuration is different and lives in a separate file.
 25 | module.exports = {
 26 |   target: 'electron-renderer',
 27 |   // This makes the bundle appear split into separate modules in the devtools.
 28 |   // We don't use source maps here because they can be confusing:
 29 |   // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
 30 |   // You may want 'cheap-module-source-map' instead if you prefer source maps.
 31 |   devtool: 'eval',
 32 |   // These are the "entry points" to our application.
 33 |   // This means they will be the "root" imports that are included in JS bundle.
 34 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 35 |   entry: [
 36 |     // Include an alternative client for WebpackDevServer. A client's job is to
 37 |     // connect to WebpackDevServer by a socket and get notified about changes.
 38 |     // When you save a file, the client will either apply hot updates (in case
 39 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 40 |     // make a syntax error, this client will display a syntax error overlay.
 41 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 42 |     // to bring better experience for Create React App users. You can replace
 43 |     // the line below with these two lines if you prefer the stock client:
 44 |     // require.resolve('webpack-dev-server/client') + '?/',
 45 |     // require.resolve('webpack/hot/dev-server'),
 46 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 47 |     // We ship a few polyfills by default:
 48 |     require.resolve('./polyfills'),
 49 |     // Finally, this is your app's code:
 50 |     paths.appIndexJs
 51 |     // We include the app code last so that if there is a runtime error during
 52 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 53 |     // changing JS code would still trigger a refresh.
 54 |   ],
 55 |   output: {
 56 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 57 |     path: paths.appBuild,
 58 |     // Add /* filename */ comments to generated require()s in the output.
 59 |     pathinfo: true,
 60 |     // This does not produce a real file. It's just the virtual path that is
 61 |     // served by WebpackDevServer in development. This is the JS bundle
 62 |     // containing code from all our entry points, and the Webpack runtime.
 63 |     filename: 'static/js/bundle.js',
 64 |     // This is the URL that app is served from. We use "/" in development.
 65 |     publicPath: publicPath
 66 |   },
 67 |   resolve: {
 68 |     // This allows you to set a fallback for where Webpack should look for modules.
 69 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 70 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 71 |     // if there any conflicts. This matches Node resolution mechanism.
 72 |     // https://github.com/facebookincubator/create-react-app/issues/253
 73 |     fallback: paths.nodePaths,
 74 |     // These are the reasonable defaults supported by the Node ecosystem.
 75 |     // We also include JSX as a common component filename extension to support
 76 |     // some tools, although we do not recommend using it, see:
 77 |     // https://github.com/facebookincubator/create-react-app/issues/290
 78 |     extensions: ['.js', '.json', '.jsx', ''],
 79 |     alias: {
 80 |       // Support React Native Web
 81 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 82 |       'react-native': 'react-native-web'
 83 |     }
 84 |   },
 85 | 
 86 |   module: {
 87 |     // First, run the linter.
 88 |     // It's important to do this before Babel processes the JS.
 89 |     preLoaders: [
 90 |       {
 91 |         test: /\.(js|jsx)$/,
 92 |         loader: 'eslint',
 93 |         include: paths.appSrc,
 94 |       }
 95 |     ],
 96 |     loaders: [
 97 |       // Process JS with Babel.
 98 |       {
 99 |         test: /\.(js|jsx)$/,
100 |         include: paths.appSrc,
101 |         loader: 'babel',
102 |         query: {
103 | 
104 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
105 |           // It enables caching results in ./node_modules/.cache/react-scripts/
106 |           // directory for faster rebuilds. We use findCacheDir() because of:
107 |           // https://github.com/facebookincubator/create-react-app/issues/483
108 |           cacheDirectory: findCacheDir({
109 |             name: 'react-scripts'
110 |           })
111 |         }
112 |       },
113 |       // "postcss" loader applies autoprefixer to our CSS.
114 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
115 |       // "style" loader turns CSS into JS modules that inject <style> tags.
116 |       // In production, we use a plugin to extract that CSS to a file, but
117 |       // in development "style" loader enables hot editing of CSS.
118 |       {
119 |         test: /\.css$/,
120 |         loader: 'style!css?importLoaders=1!postcss'
121 |       },
122 |       // JSON is not enabled by default in Webpack but both Node and Browserify
123 |       // allow it implicitly so we also enable it.
124 |       {
125 |         test: /\.json$/,
126 |         loader: 'json'
127 |       },
128 |       // "file" loader makes sure those assets get served by WebpackDevServer.
129 |       // When you `import` an asset, you get its (virtual) filename.
130 |       // In production, they would get copied to the `build` folder.
131 |       {
132 |         test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
133 |         loader: 'file',
134 |         query: {
135 |           name: 'static/media/[name].[hash:8].[ext]'
136 |         }
137 |       },
138 |       // "url" loader works just like "file" loader but it also embeds
139 |       // assets smaller than specified size as data URLs to avoid requests.
140 |       {
141 |         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
142 |         loader: 'url',
143 |         query: {
144 |           limit: 10000,
145 |           name: 'static/media/[name].[hash:8].[ext]'
146 |         }
147 |       }
148 |     ]
149 |   },
150 | 
151 |   // We use PostCSS for autoprefixing only.
152 |   postcss: function() {
153 |     return [
154 |       require("postcss-import"),
155 |       require('postcss-cssnext')
156 |     ];
157 |   },
158 |   plugins: [
159 |     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
160 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
161 |     // In development, this will be an empty string.
162 |     new InterpolateHtmlPlugin({
163 |       PUBLIC_URL: publicUrl
164 |     }),
165 |     // Generates an `index.html` file with the <script> injected.
166 |     new HtmlWebpackPlugin({
167 |       inject: true,
168 |       template: paths.appHtml,
169 |     }),
170 |     // Makes some environment variables available to the JS code, for example:
171 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
172 |     new webpack.DefinePlugin(env),
173 |     // This is necessary to emit hot updates (currently CSS only):
174 |     new webpack.HotModuleReplacementPlugin(),
175 |     // Watcher doesn't work well if you mistype casing in a path so we use
176 |     // a plugin that prints an error when you attempt to do this.
177 |     // See https://github.com/facebookincubator/create-react-app/issues/240
178 |     new CaseSensitivePathsPlugin(),
179 |     // If you require a missing module and then `npm install` it, you still have
180 |     // to restart the development server for Webpack to discover it. This plugin
181 |     // makes the discovery automatic so you don't have to restart.
182 |     // See https://github.com/facebookincubator/create-react-app/issues/186
183 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules)
184 |   ],
185 |   // Some libraries import Node modules but don't use them in the browser.
186 |   // Tell Webpack to provide empty mocks for them so importing them works.
187 |   // node: {
188 |   //   fs: 'empty',
189 |   //   net: 'empty',
190 |   //   tls: 'empty'
191 |   // }
192 | };
193 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | var path = require('path');
  2 | var autoprefixer = require('autoprefixer');
  3 | var webpack = require('webpack');
  4 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  5 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  6 | var ManifestPlugin = require('webpack-manifest-plugin');
  7 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | var url = require('url');
  9 | var paths = require('./paths');
 10 | var getClientEnvironment = require('./env');
 11 | 
 12 | function ensureSlash(path, needsSlash) {
 13 |   var hasSlash = path.endsWith('/');
 14 |   if (hasSlash && !needsSlash) {
 15 |     return path.substr(path, path.length - 1);
 16 |   } else if (!hasSlash && needsSlash) {
 17 |     return path + '/';
 18 |   } else {
 19 |     return path;
 20 |   }
 21 | }
 22 | 
 23 | // We use "homepage" field to infer "public path" at which the app is served.
 24 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
 25 | // single-page apps that may serve index.html for nested URLs like /todos/42.
 26 | // We can't use a relative path in HTML because we don't want to load something
 27 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 28 | var homepagePath = require(paths.appPackageJson).homepage;
 29 | var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
 30 | // Webpack uses `publicPath` to determine where the app is being served from.
 31 | // It requires a trailing slash, or the file assets will get an incorrect path.
 32 | var publicPath = ensureSlash(homepagePathname, true);
 33 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 34 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 35 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 36 | var publicUrl = ensureSlash(homepagePathname, false);
 37 | // Get environment variables to inject into our app.
 38 | var env = getClientEnvironment(publicUrl);
 39 | 
 40 | // Assert this just to be safe.
 41 | // Development builds of React are slow and not intended for production.
 42 | if (env['process.env'].NODE_ENV !== '"production"') {
 43 |   throw new Error('Production builds must have NODE_ENV=production.');
 44 | }
 45 | 
 46 | // This is the production configuration.
 47 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 48 | // The development configuration is different and lives in a separate file.
 49 | module.exports = {
 50 |   target: 'electron-renderer',
 51 |   // Don't attempt to continue if there are any errors.
 52 |   bail: true,
 53 |   // We generate sourcemaps in production. This is slow but gives good results.
 54 |   // You can exclude the *.map files from the build during deployment.
 55 |   devtool: 'source-map',
 56 |   // In production, we only want to load the polyfills and the app code.
 57 |   entry: [
 58 |     require.resolve('./polyfills'),
 59 |     paths.appIndexJs
 60 |   ],
 61 |   output: {
 62 |     // The build folder.
 63 |     path: paths.appBuild,
 64 |     // Generated JS file names (with nested folders).
 65 |     // There will be one main bundle, and one file per asynchronous chunk.
 66 |     // We don't currently advertise code splitting but Webpack supports it.
 67 |     filename: 'static/js/[name].[chunkhash:8].js',
 68 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 69 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 70 |     publicPath: publicPath
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 75 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 76 |     // if there any conflicts. This matches Node resolution mechanism.
 77 |     // https://github.com/facebookincubator/create-react-app/issues/253
 78 |     fallback: paths.nodePaths,
 79 |     // These are the reasonable defaults supported by the Node ecosystem.
 80 |     // We also include JSX as a common component filename extension to support
 81 |     // some tools, although we do not recommend using it, see:
 82 |     // https://github.com/facebookincubator/create-react-app/issues/290
 83 |     extensions: ['.js', '.json', '.jsx', ''],
 84 |     alias: {
 85 |       // Support React Native Web
 86 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 87 |       'react-native': 'react-native-web'
 88 |     }
 89 |   },
 90 | 
 91 |   module: {
 92 |     // First, run the linter.
 93 |     // It's important to do this before Babel processes the JS.
 94 |     preLoaders: [
 95 |       {
 96 |         test: /\.(js|jsx)$/,
 97 |         loader: 'eslint',
 98 |         include: paths.appSrc
 99 |       }
100 |     ],
101 |     loaders: [
102 |       // Process JS with Babel.
103 |       {
104 |         test: /\.(js|jsx)$/,
105 |         include: paths.appSrc,
106 |         loader: 'babel',
107 | 
108 |       },
109 |       // The notation here is somewhat confusing.
110 |       // "postcss" loader applies autoprefixer to our CSS.
111 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
112 |       // "style" loader normally turns CSS into JS modules injecting <style>,
113 |       // but unlike in development configuration, we do something different.
114 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
115 |       // (second argument), then grabs the result CSS and puts it into a
116 |       // separate file in our build process. This way we actually ship
117 |       // a single CSS file in production instead of JS code injecting <style>
118 |       // tags. If you use code splitting, however, any async bundles will still
119 |       // use the "style" loader inside the async code so CSS from them won't be
120 |       // in the main CSS file.
121 |       {
122 |         test: /\.css$/,
123 |         // "?-autoprefixer" disables autoprefixer in css-loader itself:
124 |         // https://github.com/webpack/css-loader/issues/281
125 |         // We already have it thanks to postcss. We only pass this flag in
126 |         // production because "css" loader only enables autoprefixer-powered
127 |         // removal of unnecessary prefixes when Uglify plugin is enabled.
128 |         // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
129 |         // including CSS. This is confusing and will be removed in Webpack 2:
130 |         // https://github.com/webpack/webpack/issues/283
131 |         loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&-autoprefixer!postcss')
132 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
133 |       },
134 |       // JSON is not enabled by default in Webpack but both Node and Browserify
135 |       // allow it implicitly so we also enable it.
136 |       {
137 |         test: /\.json$/,
138 |         loader: 'json'
139 |       },
140 |       // "file" loader makes sure those assets end up in the `build` folder.
141 |       // When you `import` an asset, you get its filename.
142 |       {
143 |         test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
144 |         loader: 'file',
145 |         query: {
146 |           name: 'static/media/[name].[hash:8].[ext]'
147 |         }
148 |       },
149 |       // "url" loader works just like "file" loader but it also embeds
150 |       // assets smaller than specified size as data URLs to avoid requests.
151 |       {
152 |         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
153 |         loader: 'url',
154 |         query: {
155 |           limit: 10000,
156 |           name: 'static/media/[name].[hash:8].[ext]'
157 |         }
158 |       }
159 |     ]
160 |   },
161 | 
162 |   // We use PostCSS for autoprefixing only.
163 |   postcss: function() {
164 |     return [
165 |       autoprefixer({
166 |         browsers: [
167 |           '>1%',
168 |           'last 4 versions',
169 |           'Firefox ESR',
170 |           'not ie < 9', // React doesn't support IE8 anyway
171 |         ]
172 |       }),
173 |     ];
174 |   },
175 |   plugins: [
176 |     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
177 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
178 |     // In production, it will be an empty string unless you specify "homepage"
179 |     // in `package.json`, in which case it will be the pathname of that URL.
180 |     new InterpolateHtmlPlugin({
181 |       PUBLIC_URL: publicUrl
182 |     }),
183 |     // Generates an `index.html` file with the <script> injected.
184 |     new HtmlWebpackPlugin({
185 |       inject: true,
186 |       template: paths.appHtml,
187 |       minify: {
188 |         removeComments: true,
189 |         collapseWhitespace: true,
190 |         removeRedundantAttributes: true,
191 |         useShortDoctype: true,
192 |         removeEmptyAttributes: true,
193 |         removeStyleLinkTypeAttributes: true,
194 |         keepClosingSlash: true,
195 |         minifyJS: true,
196 |         minifyCSS: true,
197 |         minifyURLs: true
198 |       }
199 |     }),
200 |     // Makes some environment variables available to the JS code, for example:
201 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
202 |     // It is absolutely essential that NODE_ENV was set to production here.
203 |     // Otherwise React will be compiled in the very slow development mode.
204 |     new webpack.DefinePlugin(env),
205 |     // This helps ensure the builds are consistent if source hasn't changed:
206 |     new webpack.optimize.OccurrenceOrderPlugin(),
207 |     // Try to dedupe duplicated modules, if any:
208 |     new webpack.optimize.DedupePlugin(),
209 |     // Minify the code.
210 |     new webpack.optimize.UglifyJsPlugin({
211 |       compress: {
212 |         screw_ie8: true, // React doesn't support IE8
213 |         warnings: false
214 |       },
215 |       mangle: {
216 |         screw_ie8: true
217 |       },
218 |       output: {
219 |         comments: false,
220 |         screw_ie8: true
221 |       }
222 |     }),
223 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
224 |     new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
225 |     // Generate a manifest file which contains a mapping of all asset filenames
226 |     // to their corresponding output file so that tools can pick it up without
227 |     // having to parse `index.html`.
228 |     new ManifestPlugin({
229 |       fileName: 'asset-manifest.json'
230 |     })
231 |   ],
232 |   // Some libraries import Node modules but don't use them in the browser.
233 |   // Tell Webpack to provide empty mocks for them so importing them works.
234 |   // node: {
235 |   //   fs: 'empty',
236 |   //   net: 'empty',
237 |   //   tls: 'empty'
238 |   // }
239 | };
240 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "jsconf-2017",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "devDependencies": {
  6 |     "autoprefixer": "6.5.1",
  7 |     "babel-core": "6.17.0",
  8 |     "babel-eslint": "7.0.0",
  9 |     "babel-jest": "16.0.0",
 10 |     "babel-loader": "6.2.5",
 11 |     "babel-preset-react-app": "^1.0.0",
 12 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
 13 |     "chalk": "1.1.3",
 14 |     "connect-history-api-fallback": "1.3.0",
 15 |     "cross-spawn": "4.0.2",
 16 |     "css-loader": "0.25.0",
 17 |     "detect-port": "1.0.1",
 18 |     "dotenv": "2.0.0",
 19 |     "electron-packager": "8.3.0",
 20 |     "electron-prebuilt": "1.4.10",
 21 |     "eslint": "3.8.1",
 22 |     "eslint-config-react-app": "^0.3.0",
 23 |     "eslint-loader": "1.6.0",
 24 |     "eslint-plugin-flowtype": "2.21.0",
 25 |     "eslint-plugin-import": "2.0.1",
 26 |     "eslint-plugin-jsx-a11y": "2.2.3",
 27 |     "eslint-plugin-react": "6.4.1",
 28 |     "express": "4.14.0",
 29 |     "extract-text-webpack-plugin": "1.0.1",
 30 |     "file-loader": "0.9.0",
 31 |     "filesize": "3.3.0",
 32 |     "find-cache-dir": "0.1.1",
 33 |     "fs-extra": "0.30.0",
 34 |     "gzip-size": "3.0.0",
 35 |     "html-webpack-plugin": "2.24.0",
 36 |     "http-proxy-middleware": "0.17.2",
 37 |     "jest": "16.0.2",
 38 |     "json-loader": "0.5.4",
 39 |     "npm-run-all": "^4.0.2",
 40 |     "object-assign": "4.1.0",
 41 |     "path-exists": "2.1.0",
 42 |     "portfinder": "1.0.10",
 43 |     "postcss-cssnext": "2.9.0",
 44 |     "postcss-import": "9.0.0",
 45 |     "postcss-loader": "1.0.0",
 46 |     "promise": "7.1.1",
 47 |     "react-dev-utils": "^0.3.0",
 48 |     "recursive-readdir": "2.1.0",
 49 |     "rimraf": "2.5.4",
 50 |     "strip-ansi": "3.0.1",
 51 |     "style-loader": "0.13.1",
 52 |     "url-loader": "0.5.7",
 53 |     "webpack": "1.13.2",
 54 |     "webpack-dev-server": "1.16.2",
 55 |     "webpack-manifest-plugin": "1.1.0",
 56 |     "whatwg-fetch": "1.0.0"
 57 |   },
 58 |   "dependencies": {
 59 |     "dat.gui": "^0.6.1",
 60 |     "dilla": "1.8.3",
 61 |     "electron-log": "1.2.2",
 62 |     "event-emitter": "0.3.4",
 63 |     "file-saver": "1.3.3",
 64 |     "jszip": "3.1.3",
 65 |     "lodash": "4.17.2",
 66 |     "normalize.css": "5.0.0",
 67 |     "react": "15.4.0",
 68 |     "react-dom": "15.4.0",
 69 |     "react-redux": "4.4.6",
 70 |     "react-router": "^3.0.0",
 71 |     "recompose": "0.20.2",
 72 |     "redux": "3.6.0",
 73 |     "redux-logger": "2.7.4",
 74 |     "reselect": "2.5.4",
 75 |     "three": "^0.84.0",
 76 |     "uuid": "2.0.3",
 77 |     "web-midi": "2.0.1"
 78 |   },
 79 |   "scripts": {
 80 |     "start": "run-p start:*",
 81 |     "build": "node scripts/build.js",
 82 |     "test": "node scripts/test.js --env=jsdom",
 83 |     "start:server": "node scripts/start.js",
 84 |     "start:electron": "electron scripts/start-electron.js",
 85 |     "build-electron": "rm -rf ./build && yarn run build && node scripts/build-electron.js"
 86 |   },
 87 |   "jest": {
 88 |     "moduleFileExtensions": [
 89 |       "jsx",
 90 |       "js",
 91 |       "json"
 92 |     ],
 93 |     "moduleNameMapper": {
 94 |       "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
 95 |       "^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
 96 |     },
 97 |     "setupFiles": [
 98 |       "<rootDir>/config/polyfills.js"
 99 |     ],
100 |     "testPathIgnorePatterns": [
101 |       "<rootDir>/(build|docs|node_modules)/"
102 |     ],
103 |     "testEnvironment": "node"
104 |   },
105 |   "babel": {
106 |     "presets": [
107 |       "react-app"
108 |     ]
109 |   },
110 |   "eslintConfig": {
111 |     "extends": "react-app"
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <!--
 8 |       Notice the use of %PUBLIC_URL% in the tag above.
 9 |       It will be replaced with the URL of the `public` folder during the build.
10 |       Only files inside the `public` folder can be referenced from the HTML.
11 | 
12 |       Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
13 |       work correctly both with client-side routing and a non-root public URL.
14 |       Learn how to configure a non-root public URL by running `npm run build`.
15 |     -->
16 |     <title>JSConf 2017</title>
17 |   </head>
18 |   <body>
19 |     <div id="root"></div>
20 |     <!--
21 |       This HTML file is a template.
22 |       If you open it directly in the browser, you will see an empty page.
23 | 
24 |       You can add webfonts, meta tags, or analytics to this file.
25 |       The build step will place the bundled scripts into the <body> tag.
26 | 
27 |       To begin the development, run `npm start`.
28 |       To create a production bundle, use `npm run build`.
29 |     -->
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/public/initial/1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/1.mp3


--------------------------------------------------------------------------------
/public/initial/2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/2.mp3


--------------------------------------------------------------------------------
/public/initial/3.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/3.mp3


--------------------------------------------------------------------------------
/public/initial/4.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/4.mp3


--------------------------------------------------------------------------------
/public/initial/5.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/5.mp3


--------------------------------------------------------------------------------
/public/initial/6.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/6.mp3


--------------------------------------------------------------------------------
/public/initial/7.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/7.mp3


--------------------------------------------------------------------------------
/public/initial/8.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/8.mp3


--------------------------------------------------------------------------------
/public/initial/mysound.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/mysound.mp3


--------------------------------------------------------------------------------
/public/initial/mysound2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nestedloops/jsconf-2017/7514aba6c61bc7976fbe252cb33eec97a309a40a/public/initial/mysound2.mp3


--------------------------------------------------------------------------------
/public/initial/project.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "settings": {
  3 |     "gain": 1,
  4 |     "bpm": 100
  5 |   },
  6 |   "tracks": {
  7 |     "master": {
  8 |       "name": "master",
  9 |       "id": "master",
 10 |       "gain": 1,
 11 |       "filters": [
 12 |         "239786428374t928374628934728347"
 13 |       ]
 14 |     },
 15 |     "secondChannel": {
 16 |       "name": "master2",
 17 |       "id": "secondChannel",
 18 |       "gain": 1,
 19 |       "filters": []
 20 |     }
 21 |   },
 22 |   "filters": {
 23 |     "239786428374t928374628934728347": {
 24 |       "type": "lowpass"
 25 |     }
 26 |   },
 27 |   "pads": {
 28 |     "pad1": {
 29 |       "id": "pad1",
 30 |       "clips": [
 31 |         [
 32 |           "63dd984a-c6b8-4d5c-bcd1-4cdab36055f3",
 33 |           "f954f9b6-4055-4533-a3d7-416ee1441bba",
 34 |           "473ef6f9-16e8-48e1-a809-54693a17a509",
 35 |           "a18d0496-dd87-4a7c-ac95-4d76b4728595",
 36 |           null,
 37 |           null,
 38 |           null,
 39 |           null
 40 |         ],
 41 |         [
 42 |           "2316526c-ec07-4153-a47a-d831b2aaf18e",
 43 |           "762e04a0-b651-4560-bad1-31011b7b27e5",
 44 |           "ccda5e09-62b6-40af-be94-e10077bf6e59",
 45 |           "e39f4804-4a40-42f7-bac5-eade1ba47b96",
 46 |           null,
 47 |           null,
 48 |           null,
 49 |           null
 50 |         ],
 51 |         [
 52 |           null,
 53 |           null,
 54 |           null,
 55 |           null,
 56 |           null,
 57 |           null,
 58 |           null,
 59 |           null
 60 |         ],
 61 |         [
 62 |           null,
 63 |           null,
 64 |           null,
 65 |           null,
 66 |           null,
 67 |           null,
 68 |           null,
 69 |           null
 70 |         ],
 71 |         [
 72 |           null,
 73 |           null,
 74 |           null,
 75 |           null,
 76 |           null,
 77 |           null,
 78 |           null,
 79 |           null
 80 |         ],
 81 |         [
 82 |           null,
 83 |           null,
 84 |           null,
 85 |           null,
 86 |           null,
 87 |           null,
 88 |           null,
 89 |           null
 90 |         ],
 91 |         [
 92 |           null,
 93 |           null,
 94 |           null,
 95 |           null,
 96 |           null,
 97 |           null,
 98 |           null,
 99 |           null
100 |         ],
101 |         [
102 |           null,
103 |           null,
104 |           null,
105 |           null,
106 |           null,
107 |           null,
108 |           null,
109 |           null
110 |         ]
111 |       ],
112 |       "selectedClipId": "e39f4804-4a40-42f7-bac5-eade1ba47b96"
113 |     },
114 |     "pad2": {
115 |       "id": "pad2",
116 |       "clips": [
117 |         [
118 |           null,
119 |           null,
120 |           null,
121 |           null,
122 |           null,
123 |           null,
124 |           null,
125 |           null
126 |         ],
127 |         [
128 |           null,
129 |           null,
130 |           null,
131 |           null,
132 |           null,
133 |           null,
134 |           null,
135 |           null
136 |         ],
137 |         [
138 |           null,
139 |           null,
140 |           null,
141 |           null,
142 |           null,
143 |           null,
144 |           null,
145 |           null
146 |         ],
147 |         [
148 |           "e39f4804-4a40-42f7-bac5-eade1ba47b910",
149 |           "e39f4804-4a40-42f7-bac5-eade1ba47b911",
150 |           null,
151 |           null,
152 |           null,
153 |           null,
154 |           null,
155 |           null
156 |         ],
157 |         [
158 |           null,
159 |           null,
160 |           null,
161 |           null,
162 |           null,
163 |           null,
164 |           null,
165 |           null
166 |         ],
167 |         [
168 |           null,
169 |           null,
170 |           null,
171 |           null,
172 |           null,
173 |           null,
174 |           null,
175 |           null
176 |         ],
177 |         [
178 |           null,
179 |           null,
180 |           null,
181 |           null,
182 |           null,
183 |           null,
184 |           null,
185 |           null
186 |         ],
187 |         [
188 |           null,
189 |           null,
190 |           null,
191 |           null,
192 |           null,
193 |           null,
194 |           null,
195 |           null
196 |         ]
197 |       ],
198 |       "selectedClipId": "2316526c-ec07-4153-a47a-d831b2aaf18e"
199 |     }
200 |   },
201 |   "clips": {
202 |     "2316526c-ec07-4153-a47a-d831b2aaf18e": {
203 |       "id": "2316526c-ec07-4153-a47a-d831b2aaf18e",
204 |       "type": "audiosample",
205 |       "behavior": "single",
206 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21685",
207 |       "track": "master",
208 |       "gain": 1,
209 |       "loop": false
210 |     },
211 |     "762e04a0-b651-4560-bad1-31011b7b27e5": {
212 |       "id": "762e04a0-b651-4560-bad1-31011b7b27e5",
213 |       "type": "audiosample",
214 |       "behavior": "single",
215 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21686",
216 |       "track": "master",
217 |       "gain": 1,
218 |       "loop": false
219 |     },
220 |     "63dd984a-c6b8-4d5c-bcd1-4cdab36055f3": {
221 |       "gain": 1,
222 |       "behavior": "single",
223 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21681",
224 |       "loop": false,
225 |       "track": "master",
226 |       "id": "63dd984a-c6b8-4d5c-bcd1-4cdab36055f3",
227 |       "type": "audiosample"
228 |     },
229 |     "f954f9b6-4055-4533-a3d7-416ee1441bba": {
230 |       "gain": 1,
231 |       "behavior": "single",
232 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21682",
233 |       "loop": false,
234 |       "track": "master",
235 |       "id": "f954f9b6-4055-4533-a3d7-416ee1441bba",
236 |       "type": "audiosample"
237 |     },
238 |     "473ef6f9-16e8-48e1-a809-54693a17a509": {
239 |       "gain": 1,
240 |       "behavior": "single",
241 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21683",
242 |       "loop": false,
243 |       "track": "master",
244 |       "id": "473ef6f9-16e8-48e1-a809-54693a17a509",
245 |       "type": "audiosample"
246 |     },
247 |     "a18d0496-dd87-4a7c-ac95-4d76b4728595": {
248 |       "gain": 1,
249 |       "behavior": "single",
250 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21684",
251 |       "loop": false,
252 |       "track": "master",
253 |       "id": "a18d0496-dd87-4a7c-ac95-4d76b4728595",
254 |       "type": "audiosample"
255 |     },
256 |     "ccda5e09-62b6-40af-be94-e10077bf6e59": {
257 |       "gain": 1,
258 |       "behavior": "single",
259 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21687",
260 |       "loop": false,
261 |       "track": "master",
262 |       "id": "ccda5e09-62b6-40af-be94-e10077bf6e59",
263 |       "type": "audiosample"
264 |     },
265 |     "e39f4804-4a40-42f7-bac5-eade1ba47b96": {
266 |       "gain": 1,
267 |       "behavior": "single",
268 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec21688",
269 |       "loop": false,
270 |       "track": "master",
271 |       "id": "e39f4804-4a40-42f7-bac5-eade1ba47b96",
272 |       "type": "audiosample"
273 |     },
274 |     "e39f4804-4a40-42f7-bac5-eade1ba47b910": {
275 |       "gain": 1,
276 |       "behavior": "single",
277 |       "file": "2a86e9ee-b409-4e2b-91e0-bcc051ec2168",
278 |       "loop": false,
279 |       "track": "master",
280 |       "id": "e39f4804-4a40-42f7-bac5-eade1ba47b910",
281 |       "type": "audiosample"
282 |     },
283 |     "e39f4804-4a40-42f7-bac5-eade1ba47b911": {
284 |       "gain": 1,
285 |       "behavior": "single",
286 |       "file": "36c1262c-608c-41db-a12c-7a2fad9d4c14",
287 |       "loop": false,
288 |       "track": "master",
289 |       "id": "e39f4804-4a40-42f7-bac5-eade1ba47b911",
290 |       "type": "audiosample"
291 |     }
292 |   },
293 |   "files": {
294 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec2168": {
295 |       "location": "mysound.mp3",
296 |       "name": "mysound"
297 |     },
298 |     "36c1262c-608c-41db-a12c-7a2fad9d4c14": {
299 |       "location": "mysound2.mp3",
300 |       "name": "mysound2"
301 |     },
302 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21681": {
303 |       "location": "1.mp3",
304 |       "name": "git1"
305 |     },
306 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21682": {
307 |       "location": "2.mp3",
308 |       "name": "git2"
309 |     },
310 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21683": {
311 |       "location": "3.mp3",
312 |       "name": "kick"
313 |     },
314 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21684": {
315 |       "location": "4.mp3",
316 |       "name": "clap"
317 |     },
318 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21685": {
319 |       "location": "5.mp3",
320 |       "name": "bell1"
321 |     },
322 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21686": {
323 |       "location": "6.mp3",
324 |       "name": "bell2"
325 |     },
326 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21687": {
327 |       "location": "7.mp3",
328 |       "name": "bell3"
329 |     },
330 |     "2a86e9ee-b409-4e2b-91e0-bcc051ec21688": {
331 |       "location": "8.mp3",
332 |       "name": "bell4"
333 |     }
334 |   },
335 |   "scheduler": {
336 |     "scheduled": {},
337 |     "playing": {},
338 |     "toStop": {}
339 |   }
340 | }


--------------------------------------------------------------------------------
/scripts/build-electron.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const packager = require('electron-packager');
 3 | const path = require('path');
 4 | 
 5 | const dirPath = path.join(__dirname, '..', 'build');
 6 | const outPath = path.join(__dirname, '..', 'electron-build');
 7 | 
 8 | const buildPackageJSONPath = path.join(__dirname, '..', 'build', 'package.json');
 9 | 
10 | // only add the dependencies for the electron app here that are not bundled by webpack.
11 | fs.writeFileSync(buildPackageJSONPath, JSON.stringify({
12 |   name: 'jsconf-2017',
13 |   main: 'start-electron.js',
14 |   dependencies: {
15 |     "appdirectory": "0.1.0",
16 |     'electron-log': '1.2.2',
17 |     'express': '4.14.0',
18 |     'portfinder': '1.0.10'
19 |   }
20 | }, null, 2));
21 | 
22 | const startFilePath = path.join(__dirname, 'start-electron.js');
23 | const startFile = fs.readFileSync(startFilePath).toString();
24 | const startFileDestPath = path.join(__dirname, '..', 'build', 'start-electron.js');
25 | fs.writeFileSync(startFileDestPath, startFile);
26 | 
27 | const prodEnvFilePath = path.join(__dirname, '..', 'build', 'prod.json');
28 | fs.writeFileSync(prodEnvFilePath, JSON.stringify({}));
29 | 
30 | require('child_process').exec('cd build && npm install', (err, a, b) => {
31 |   packager({
32 |     dir: dirPath,
33 |     arch: 'x64',
34 |     platform: ['darwin', 'win32'],
35 |     prune: true,
36 |     overwrite: true,
37 |     out: outPath
38 |   }, (err, appPaths) => {
39 |     if (err) {
40 |       console.log('Could not create electron build', err.toString());
41 |     } else {
42 |       console.log('Successfully built the electron app');
43 |       appPaths.forEach((p) => console.log(p));
44 |     }
45 |   });
46 | 
47 | })
48 | 
49 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.NODE_ENV = 'production';
  3 | 
  4 | // Load environment variables from .env file. Suppress warnings using silent
  5 | // if this file is missing. dotenv will never modify any environment variables
  6 | // that have already been set.
  7 | // https://github.com/motdotla/dotenv
  8 | require('dotenv').config({silent: true});
  9 | 
 10 | var chalk = require('chalk');
 11 | var fs = require('fs-extra');
 12 | var path = require('path');
 13 | var filesize = require('filesize');
 14 | var gzipSize = require('gzip-size').sync;
 15 | var rimrafSync = require('rimraf').sync;
 16 | var webpack = require('webpack');
 17 | var config = require('../config/webpack.config.prod');
 18 | var paths = require('../config/paths');
 19 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 20 | var recursive = require('recursive-readdir');
 21 | var stripAnsi = require('strip-ansi');
 22 | 
 23 | // Warn and crash if required files are missing
 24 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 25 |   process.exit(1);
 26 | }
 27 | 
 28 | // Input: /User/dan/app/build/static/js/main.82be8.js
 29 | // Output: /static/js/main.js
 30 | function removeFileNameHash(fileName) {
 31 |   return fileName
 32 |     .replace(paths.appBuild, '')
 33 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 34 | }
 35 | 
 36 | // Input: 1024, 2048
 37 | // Output: "(+1 KB)"
 38 | function getDifferenceLabel(currentSize, previousSize) {
 39 |   var FIFTY_KILOBYTES = 1024 * 50;
 40 |   var difference = currentSize - previousSize;
 41 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 42 |   if (difference >= FIFTY_KILOBYTES) {
 43 |     return chalk.red('+' + fileSize);
 44 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 45 |     return chalk.yellow('+' + fileSize);
 46 |   } else if (difference < 0) {
 47 |     return chalk.green(fileSize);
 48 |   } else {
 49 |     return '';
 50 |   }
 51 | }
 52 | 
 53 | // First, read the current file sizes in build directory.
 54 | // This lets us display how much they changed later.
 55 | recursive(paths.appBuild, (err, fileNames) => {
 56 |   var previousSizeMap = (fileNames || [])
 57 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 58 |     .reduce((memo, fileName) => {
 59 |       var contents = fs.readFileSync(fileName);
 60 |       var key = removeFileNameHash(fileName);
 61 |       memo[key] = gzipSize(contents);
 62 |       return memo;
 63 |     }, {});
 64 | 
 65 |   // Remove all content but keep the directory so that
 66 |   // if you're in it, you don't end up in Trash
 67 |   rimrafSync(paths.appBuild + '/*');
 68 | 
 69 |   // Start the webpack build
 70 |   build(previousSizeMap);
 71 | 
 72 |   // Merge with the public folder
 73 |   copyPublicFolder();
 74 | });
 75 | 
 76 | // Print a detailed summary of build files.
 77 | function printFileSizes(stats, previousSizeMap) {
 78 |   var assets = stats.toJson().assets
 79 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 80 |     .map(asset => {
 81 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 82 |       var size = gzipSize(fileContents);
 83 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 84 |       var difference = getDifferenceLabel(size, previousSize);
 85 |       return {
 86 |         folder: path.join('build', path.dirname(asset.name)),
 87 |         name: path.basename(asset.name),
 88 |         size: size,
 89 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 90 |       };
 91 |     });
 92 |   assets.sort((a, b) => b.size - a.size);
 93 |   var longestSizeLabelLength = Math.max.apply(null,
 94 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 95 |   );
 96 |   assets.forEach(asset => {
 97 |     var sizeLabel = asset.sizeLabel;
 98 |     var sizeLength = stripAnsi(sizeLabel).length;
 99 |     if (sizeLength < longestSizeLabelLength) {
100 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
101 |       sizeLabel += rightPadding;
102 |     }
103 |     console.log(
104 |       '  ' + sizeLabel +
105 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
106 |     );
107 |   });
108 | }
109 | 
110 | // Print out errors
111 | function printErrors(summary, errors) {
112 |   console.log(chalk.red(summary));
113 |   console.log();
114 |   errors.forEach(err => {
115 |     console.log(err.message || err);
116 |     console.log();
117 |   });
118 | }
119 | 
120 | // Create the production build and print the deployment instructions.
121 | function build(previousSizeMap) {
122 |   console.log('Creating an optimized production build...');
123 |   webpack(config).run((err, stats) => {
124 |     if (err) {
125 |       printErrors('Failed to compile.', [err]);
126 |       process.exit(1);
127 |     }
128 | 
129 |     if (stats.compilation.errors.length) {
130 |       printErrors('Failed to compile.', stats.compilation.errors);
131 |       process.exit(1);
132 |     }
133 | 
134 |     console.log(chalk.green('Compiled successfully.'));
135 |     console.log();
136 | 
137 |     console.log('File sizes after gzip:');
138 |     console.log();
139 |     printFileSizes(stats, previousSizeMap);
140 |     console.log();
141 | 
142 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
143 |     var homepagePath = require(paths.appPackageJson).homepage;
144 |     var publicPath = config.output.publicPath;
145 |     if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
146 |       // "homepage": "http://user.github.io/project"
147 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
148 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
149 |       console.log();
150 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
151 |       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
152 |       console.log();
153 |       console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
154 |       console.log();
155 |       console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
156 |       console.log();
157 |       console.log('    ' + chalk.dim('// ...'));
158 |       console.log('    ' + chalk.yellow('"scripts"') + ': {');
159 |       console.log('      ' + chalk.dim('// ...'));
160 |       console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
161 |       console.log('    }');
162 |       console.log();
163 |       console.log('Then run:');
164 |       console.log();
165 |       console.log('  ' + chalk.cyan('npm') +  ' run deploy');
166 |       console.log();
167 |     } else if (publicPath !== '/') {
168 |       // "homepage": "http://mywebsite.com/project"
169 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
170 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
171 |       console.log();
172 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
173 |       console.log();
174 |     } else {
175 |       // no homepage or "homepage": "http://mywebsite.com"
176 |       console.log('The project was built assuming it is hosted at the server root.');
177 |       if (homepagePath) {
178 |         // "homepage": "http://mywebsite.com"
179 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
180 |         console.log();
181 |       } else {
182 |         // no homepage
183 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
184 |         console.log('For example, add this to build it for GitHub Pages:')
185 |         console.log();
186 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
187 |         console.log();
188 |       }
189 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
190 |       console.log('You may also serve it locally with a static server:')
191 |       console.log();
192 |       console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
193 |       console.log('  ' + chalk.cyan('pushstate-server') + ' build');
194 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
195 |       console.log();
196 |     }
197 |   });
198 | }
199 | 
200 | function copyPublicFolder() {
201 |   fs.copySync(paths.appPublic, paths.appBuild, {
202 |     dereference: true,
203 |     filter: file => file !== paths.appHtml
204 |   });
205 | }
206 | 


--------------------------------------------------------------------------------
/scripts/start-electron.js:
--------------------------------------------------------------------------------
  1 | // prevent any non-us locale: https://github.com/electron/electron/issues/8825
  2 | process.env.LC_ALL = 'en_US';
  3 | 
  4 | const { app, BrowserWindow } = require('electron');
  5 | const portfinder = require('portfinder');
  6 | const express = require('express');
  7 | const log = require('electron-log');
  8 | const path = require('path');
  9 | 
 10 | let isProduction = false;
 11 | try {
 12 |   require('./prod.json');
 13 |   isProduction = true;
 14 |   log.info('running in prod mode');
 15 | } catch (e) {
 16 |   log.info('running in dev mode');
 17 | }
 18 | 
 19 | global.userDataDirectory = path.join(userData(), 'jsconf-2017');
 20 | log.info('user data dir: ' + global.userDataDirectory);
 21 | 
 22 | // Keep a global reference of the window object, if you don't, the window will
 23 | // be closed automatically when the JavaScript object is garbage collected.
 24 | let win;
 25 | 
 26 | function createWindow () {
 27 |   // Create the browser window.
 28 |   win = new BrowserWindow({
 29 |     width: 960,
 30 |     height: 800,
 31 |     title: 'JSConf 2017'
 32 |   });
 33 | 
 34 |   if (isProduction) {
 35 |     log.info('trying to find a port');
 36 |     portfinder.getPort(function (err, port) {
 37 |       if (err) {
 38 |         log.error('Could not find a port');
 39 |         log.error(err.toString());
 40 |       }
 41 |       const expressApp = express();
 42 |       expressApp.use(express.static(__dirname));
 43 |       log.info('static path ' + __dirname);
 44 |       expressApp.use((_, res) => res.redirect('/'));
 45 | 
 46 |       expressApp.listen(port, function (a,b) {
 47 | 
 48 |         log.info('JSConf 2017 is running on port', port);
 49 | 
 50 |         // and load the index.html of the app.
 51 |         win.loadURL('http://localhost:' + port);
 52 |       });
 53 |     });
 54 |   } else {
 55 |     win.loadURL('http://localhost:3000');
 56 |   }
 57 | 
 58 |   // Emitted when the window is closed.
 59 |   win.on('closed', () => {
 60 |     // Dereference the window object, usually you would store windows
 61 |     // in an array if your app supports multi windows, this is the time
 62 |     // when you should delete the corresponding element.
 63 |     win = null
 64 |   })
 65 | }
 66 | 
 67 | // This method will be called when Electron has finished
 68 | // initialization and is ready to create browser windows.
 69 | // Some APIs can only be used after this event occurs.
 70 | app.on('ready', createWindow);
 71 | 
 72 | // Quit when all windows are closed.
 73 | app.on('window-all-closed', () => {
 74 |   // On macOS it is common for applications and their menu bar
 75 |   // to stay active until the user quits explicitly with Cmd + Q
 76 |   if (process.platform !== 'darwin') {
 77 |     app.quit()
 78 |   }
 79 | });
 80 | 
 81 | app.on('activate', () => {
 82 |   // On macOS it's common to re-create a window in the app when the
 83 |   // dock icon is clicked and there are no other windows open.
 84 |   if (win === null) {
 85 |     createWindow()
 86 |   }
 87 | });
 88 | 
 89 | /**
 90 |  * Had to import this helper from https://github.com/MrJohz/appdirectory and change it because of some issues on windows
 91 |  * Thei licence applies
 92 |  Copyright (c) 2014 Johz jonathan.frere@gmail.com
 93 | 
 94 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 95 | 
 96 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 97 | 
 98 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 99 |  */
100 | function userData (roaming, platform) {
101 |   var dataPath;
102 |   platform = platform || process.platform
103 |   if (platform === "darwin") {
104 |     dataPath = path.join(process.env.HOME, 'Library', 'Application Support')
105 |   } else if (platform === "win32") {
106 |     var sysVariable
107 |     if (roaming) {
108 |       sysVariable = "APPDATA"
109 |     } else {
110 |       sysVariable = "LOCALAPPDATA" // Note, on WinXP, LOCALAPPDATA doesn't exist, catch this later
111 |     }
112 |     dataPath = path.join(process.env[sysVariable] || process.env.APPDATA /*catch for XP*/)
113 |   } else {
114 |     if (process.env.XDG_DATA_HOME) {
115 |       dataPath = path.join(process.env.XDG_DATA_HOME)
116 |     } else {
117 |       dataPath = path.join(process.env.HOME, ".local", "share")
118 |     }
119 |   }
120 |   return dataPath
121 | }
122 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | process.env.NODE_ENV = 'development';
  2 | 
  3 | // Load environment variables from .env file. Suppress warnings using silent
  4 | // if this file is missing. dotenv will never modify any environment variables
  5 | // that have already been set.
  6 | // https://github.com/motdotla/dotenv
  7 | require('dotenv').config({silent: true});
  8 | 
  9 | var chalk = require('chalk');
 10 | var webpack = require('webpack');
 11 | var WebpackDevServer = require('webpack-dev-server');
 12 | var historyApiFallback = require('connect-history-api-fallback');
 13 | var httpProxyMiddleware = require('http-proxy-middleware');
 14 | var detect = require('detect-port');
 15 | var clearConsole = require('react-dev-utils/clearConsole');
 16 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 17 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 18 | var prompt = require('react-dev-utils/prompt');
 19 | var config = require('../config/webpack.config.dev');
 20 | var paths = require('../config/paths');
 21 | 
 22 | // Warn and crash if required files are missing
 23 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 24 |   process.exit(1);
 25 | }
 26 | 
 27 | // Tools like Cloud9 rely on this.
 28 | var DEFAULT_PORT = process.env.PORT || 3000;
 29 | var compiler;
 30 | var handleCompile;
 31 | 
 32 | // You can safely remove this after ejecting.
 33 | // We only use this block for testing of Create React App itself:
 34 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 35 | if (isSmokeTest) {
 36 |   handleCompile = function (err, stats) {
 37 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 38 |       process.exit(1);
 39 |     } else {
 40 |       process.exit(0);
 41 |     }
 42 |   };
 43 | }
 44 | 
 45 | function setupCompiler(host, port, protocol) {
 46 |   // "Compiler" is a low-level interface to Webpack.
 47 |   // It lets us listen to some events and provide our own custom messages.
 48 |   compiler = webpack(config, handleCompile);
 49 | 
 50 |   // "invalid" event fires when you have changed a file, and Webpack is
 51 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 52 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 53 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 54 |   compiler.plugin('invalid', function() {
 55 |     clearConsole();
 56 |     console.log('Compiling...');
 57 |   });
 58 | 
 59 |   // "done" event fires when Webpack has finished recompiling the bundle.
 60 |   // Whether or not you have warnings or errors, you will get this event.
 61 |   compiler.plugin('done', function(stats) {
 62 |     clearConsole();
 63 | 
 64 |     // We have switched off the default Webpack output in WebpackDevServer
 65 |     // options so we are going to "massage" the warnings and errors and present
 66 |     // them in a readable focused way.
 67 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 68 |     if (!messages.errors.length && !messages.warnings.length) {
 69 |       console.log(chalk.green('Compiled successfully!'));
 70 |       console.log();
 71 |       console.log('The app is running at:');
 72 |       console.log();
 73 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 74 |       console.log();
 75 |       console.log('Note that the development build is not optimized.');
 76 |       console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
 77 |       console.log();
 78 |     }
 79 | 
 80 |     // If errors exist, only show errors.
 81 |     if (messages.errors.length) {
 82 |       console.log(chalk.red('Failed to compile.'));
 83 |       console.log();
 84 |       messages.errors.forEach(message => {
 85 |         console.log(message);
 86 |         console.log();
 87 |       });
 88 |       return;
 89 |     }
 90 | 
 91 |     // Show warnings if no errors were found.
 92 |     if (messages.warnings.length) {
 93 |       console.log(chalk.yellow('Compiled with warnings.'));
 94 |       console.log();
 95 |       messages.warnings.forEach(message => {
 96 |         console.log(message);
 97 |         console.log();
 98 |       });
 99 |       // Teach some ESLint tricks.
100 |       console.log('You may use special comments to disable some warnings.');
101 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
102 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
103 |     }
104 |   });
105 | }
106 | 
107 | // We need to provide a custom onError function for httpProxyMiddleware.
108 | // It allows us to log custom error messages on the console.
109 | function onProxyError(proxy) {
110 |   return function(err, req, res){
111 |     var host = req.headers && req.headers.host;
112 |     console.log(
113 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
114 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
115 |     );
116 |     console.log(
117 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
118 |       chalk.cyan(err.code) + ').'
119 |     );
120 |     console.log();
121 | 
122 |     // And immediately send the proper error response to the client.
123 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
124 |     if (res.writeHead && !res.headersSent) {
125 |         res.writeHead(500);
126 |     }
127 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
128 |       host + ' to ' + proxy + ' (' + err.code + ').'
129 |     );
130 |   }
131 | }
132 | 
133 | function addMiddleware(devServer) {
134 |   // `proxy` lets you to specify a fallback server during development.
135 |   // Every unrecognized request will be forwarded to it.
136 |   var proxy = require(paths.appPackageJson).proxy;
137 |   devServer.use(historyApiFallback({
138 |     // Paths with dots should still use the history fallback.
139 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
140 |     disableDotRule: true,
141 |     // For single page apps, we generally want to fallback to /index.html.
142 |     // However we also want to respect `proxy` for API calls.
143 |     // So if `proxy` is specified, we need to decide which fallback to use.
144 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
145 |     // Modern browsers include text/html into `accept` header when navigating.
146 |     // However API calls like `fetch()` won’t generally accept text/html.
147 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
148 |     htmlAcceptHeaders: proxy ?
149 |       ['text/html'] :
150 |       ['text/html', '*/*']
151 |   }));
152 |   if (proxy) {
153 |     if (typeof proxy !== 'string') {
154 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
155 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
156 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
157 |       process.exit(1);
158 |     }
159 | 
160 |     // Otherwise, if proxy is specified, we will let it handle any request.
161 |     // There are a few exceptions which we won't send to the proxy:
162 |     // - /index.html (served as HTML5 history API fallback)
163 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
164 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
165 |     // Tip: use https://jex.im/regulex/ to visualize the regex
166 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
167 |     devServer.use(mayProxy,
168 |       // Pass the scope regex both to Express and to the middleware for proxying
169 |       // of both HTTP and WebSockets to work without false positives.
170 |       httpProxyMiddleware(pathname => mayProxy.test(pathname), {
171 |         target: proxy,
172 |         logLevel: 'silent',
173 |         onError: onProxyError(proxy),
174 |         secure: false,
175 |         changeOrigin: true
176 |       })
177 |     );
178 |   }
179 |   // Finally, by now we have certainly resolved the URL.
180 |   // It may be /index.html, so let the dev server try serving it again.
181 |   devServer.use(devServer.middleware);
182 | }
183 | 
184 | function runDevServer(host, port, protocol) {
185 |   var devServer = new WebpackDevServer(compiler, {
186 |     // Silence WebpackDevServer's own logs since they're generally not useful.
187 |     // It will still show compile warnings and errors with this setting.
188 |     clientLogLevel: 'none',
189 |     // By default WebpackDevServer serves physical files from current directory
190 |     // in addition to all the virtual build products that it serves from memory.
191 |     // This is confusing because those files won’t automatically be available in
192 |     // production build folder unless we copy them. However, copying the whole
193 |     // project directory is dangerous because we may expose sensitive files.
194 |     // Instead, we establish a convention that only files in `public` directory
195 |     // get served. Our build script will copy `public` into the `build` folder.
196 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
197 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
198 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
199 |     // Note that we only recommend to use `public` folder as an escape hatch
200 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
201 |     // for some reason broken when imported through Webpack. If you just want to
202 |     // use an image, put it in `src` and `import` it from JavaScript instead.
203 |     contentBase: paths.appPublic,
204 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
205 |     // for the WebpackDevServer client so it can learn when the files were
206 |     // updated. The WebpackDevServer client is included as an entry point
207 |     // in the Webpack development configuration. Note that only changes
208 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
209 |     hot: true,
210 |     // It is important to tell WebpackDevServer to use the same "root" path
211 |     // as we specified in the config. In development, we always serve from /.
212 |     publicPath: config.output.publicPath,
213 |     // WebpackDevServer is noisy by default so we emit custom message instead
214 |     // by listening to the compiler events with `compiler.plugin` calls above.
215 |     quiet: true,
216 |     // Reportedly, this avoids CPU overload on some systems.
217 |     // https://github.com/facebookincubator/create-react-app/issues/293
218 |     watchOptions: {
219 |       ignored: /node_modules/
220 |     },
221 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
222 |     https: protocol === "https",
223 |     host: host
224 |   });
225 | 
226 |   // Our custom middleware proxies requests to /index.html or a remote API.
227 |   addMiddleware(devServer);
228 | 
229 |   // Launch WebpackDevServer.
230 |   devServer.listen(port, (err, result) => {
231 |     if (err) {
232 |       return console.log(err);
233 |     }
234 | 
235 |     clearConsole();
236 |     console.log(chalk.cyan('Starting the development server...'));
237 |     console.log();
238 |   });
239 | }
240 | 
241 | function run(port) {
242 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
243 |   var host = process.env.HOST || 'localhost';
244 |   setupCompiler(host, port, protocol);
245 |   runDevServer(host, port, protocol);
246 | }
247 | 
248 | // We attempt to use the default port but if it is busy, we offer the user to
249 | // run on a different port. `detect()` Promise resolves to the next free port.
250 | detect(DEFAULT_PORT).then(port => {
251 |   if (port === DEFAULT_PORT) {
252 |     run(port);
253 |     return;
254 |   }
255 | 
256 |   clearConsole();
257 |   var question =
258 |     chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
259 |     '\n\nWould you like to run the app on another port instead?';
260 | 
261 |   prompt(question, true).then(shouldChangePort => {
262 |     if (shouldChangePort) {
263 |       run(port);
264 |     }
265 |   });
266 | });
267 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | process.env.NODE_ENV = 'test';
 2 | process.env.PUBLIC_URL = '';
 3 | 
 4 | // Load environment variables from .env file. Suppress warnings using silent
 5 | // if this file is missing. dotenv will never modify any environment variables
 6 | // that have already been set.
 7 | // https://github.com/motdotla/dotenv
 8 | require('dotenv').config({silent: true});
 9 | 
10 | const jest = require('jest');
11 | const argv = process.argv.slice(2);
12 | 
13 | // Watch unless on CI
14 | if (!process.env.CI) {
15 |   argv.push('--watch');
16 | }
17 | 
18 | 
19 | jest.run(argv);
20 | 


--------------------------------------------------------------------------------
/src/clip/clip-editor.css:
--------------------------------------------------------------------------------
 1 | .clipEditor {
 2 |   height: 100%;
 3 |   display: flex;
 4 |   flex-direction: column;
 5 | }
 6 | 
 7 | .editorForm__selectTrack {
 8 |   flex-grow: 1;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/clip/clip-editor.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'react-redux';
  3 | import {
  4 |   CLIP_TYPE_NONE,
  5 |   CLIP_TYPE_AUDIO_SAMPLE,
  6 |   CLIP_TYPE_AUDIO_AND_VIDEO,
  7 |   CLIP_TYPE_VIDEO,
  8 |   CLIP_TYPES,
  9 |   AUDIO_BEHAVIOR_TYPES,
 10 |   changeClipField,
 11 |   deleteClip
 12 | } from '../data/clips';
 13 | import { getAudioFiles, getVideoFiles } from '../data/files';
 14 | 
 15 | import '../styles/forms.css';
 16 | import './clip-editor.css';
 17 | 
 18 | class ClipEditor extends Component {
 19 |   shouldComponentUpdate(newProps){
 20 |     return newProps.clip !== this.props.clip
 21 |         || newProps.tracks !== this.props.tracks;
 22 |   }
 23 | 
 24 |   render() {
 25 |     const currentType = this.props.clip.type || CLIP_TYPE_NONE;
 26 |     const { track, tracks } = this.props;
 27 | 
 28 |     return (
 29 |       <div className="clipEditor">
 30 |         <label className="editorForm__label">
 31 |           <span className="editorForm__labelText">Type:</span>
 32 |           <select
 33 |             value={currentType}
 34 |             onChange={this.changeType}
 35 |           >
 36 |             { CLIP_TYPES.map((type) => (
 37 |               <option key={type} value={type}>{type}</option>
 38 |             ))}
 39 |           </select>
 40 |         </label>
 41 |         { this.renderForm() }
 42 |         <label className="editorForm__label editorForm__selectTrack">
 43 |           <span className="editorForm__labelText">Track:</span>
 44 |           <select
 45 |             className="clipEditor__clipSelect"
 46 |             value={track}
 47 |             onChange={this.changeTrack}
 48 |           >
 49 |             { Object.keys(tracks).map((trackId) => (
 50 |               <option key={trackId} value={trackId}>{tracks[trackId].name}</option>
 51 |             ))}
 52 |           </select>
 53 |         </label>
 54 | 
 55 |         <button onClick={this.deleteClip}>remove</button>
 56 |       </div>
 57 |     );
 58 |   }
 59 | 
 60 |   renderForm() {
 61 |     const { clip, audioFiles, videoFiles } = this.props;
 62 |     const { behavior, file, videoFile, gain, loop, noFilter, type } = clip;
 63 |     const hasAudio = type === CLIP_TYPE_AUDIO_AND_VIDEO || type === CLIP_TYPE_AUDIO_SAMPLE;
 64 |     const hasVideo = type === CLIP_TYPE_AUDIO_AND_VIDEO || type === CLIP_TYPE_VIDEO;
 65 |     const isVideo = type === CLIP_TYPE_VIDEO;
 66 | 
 67 |     return (
 68 |       <form className="editorForm">
 69 |         <label className="editorForm__label">
 70 |           <span className="editorForm__labelText">Behavior:</span>
 71 |           <select
 72 |             value={behavior}
 73 |             onChange={this.changeBehavior}
 74 |           >
 75 |             { AUDIO_BEHAVIOR_TYPES.map((type) => (
 76 |               <option key={type} value={type}>{type}</option>
 77 |             ))}
 78 |           </select>
 79 |         </label>
 80 |         <label className="editorForm__label">
 81 |           <input type="checkbox" onChange={this.changeLoop} checked={loop} /> loop
 82 |         </label>
 83 |         <label className="editorForm__label">
 84 |           <span className="editorForm__labelText">Gain:</span>
 85 |           <input
 86 |             type="range"
 87 |             min={0}
 88 |             max={1}
 89 |             step={0.01}
 90 |             onChange={this.changeGain}
 91 |             value={gain}
 92 |           />
 93 |         </label>
 94 |         { hasAudio && (
 95 |           <div className="editorForm__label">
 96 |             <span className="editorForm__labelText">Audio Sample:</span>
 97 |             <select
 98 |               value={file}
 99 |               onChange={this.changeFile}
100 |             >
101 |               <option key="none" value="none">----</option>
102 |               { Object.keys(audioFiles).map((fileId) =>
103 |                 <option
104 |                   key={fileId}
105 |                   value={fileId}
106 |                 >{audioFiles[fileId].name}
107 |                 </option>
108 |               )}
109 |             </select>
110 |           </div>
111 |         )}
112 | 
113 |         { hasVideo && (
114 |           <div className="editorForm__label">
115 |             <span className="editorForm__labelText">Video File:</span>
116 |             <select
117 |               value={videoFile}
118 |               onChange={this.changeVideoFile}
119 |             >
120 |               <option key="emptyVideo" value="">----</option>
121 |               { Object.keys(videoFiles).map((fileId) =>
122 |                 <option
123 |                   key={fileId}
124 |                   value={fileId}
125 |                 >{videoFiles[fileId].name}
126 |                 </option>
127 |               )}
128 |             </select>
129 |           </div>
130 |         )}
131 | 
132 |         { isVideo && (
133 |           <label className="editorForm__label">
134 |             <input type="checkbox" onChange={this.changeNoFilter} checked={noFilter} /> No Filter
135 |           </label>
136 |         )}
137 |       </form>
138 |     );
139 |   }
140 | 
141 |   changeBehavior = (event) => {
142 |     this.props.changeClipField('behavior', event.target.value);
143 |   }
144 | 
145 |   changeType = (event) => {
146 |     this.props.changeClipField('type', event.target.value);
147 |   }
148 | 
149 |   changeSchedulable = () => {
150 |     this.props.changeClipField('schedulable', !this.props.clip.schedulable);
151 |   }
152 | 
153 |   changeLoop = (event) => {
154 |     this.props.changeClipField('loop', event.target.checked);
155 |   }
156 | 
157 |   changeNoFilter = (event) => {
158 |     this.props.changeClipField('noFilter', event.target.checked);
159 |   }
160 | 
161 |   changeGain = (event) => {
162 |     this.props.changeClipField('gain', parseFloat(event.target.value));
163 |   }
164 | 
165 |   changeFile = (event) => {
166 |     this.props.changeClipField('file', event.target.value);
167 |   }
168 | 
169 |   changeVideoFile = (event) => {
170 |     this.props.changeClipField('videoFile', event.target.value);
171 |   }
172 | 
173 |   changeTrack = (event) => {
174 |     this.props.changeClipField('track', event.target.value);
175 |   }
176 | 
177 |   deleteClip = (event) => {
178 |     event.preventDefault();
179 |     this.props.deleteClip(this.props.clip.id);
180 |   }
181 | 
182 | }
183 | 
184 | const mapStateToProps = (state) => ({
185 |   tracks: state.tracks,
186 |   audioFiles: getAudioFiles(state),
187 |   videoFiles: getVideoFiles(state)
188 | });
189 | 
190 | const mapDispatchToProps = (dispatch, { clip, padId }) => ({
191 |   changeClipField(field, value) {
192 |     return dispatch(changeClipField(clip.id, field, value));
193 |   },
194 | 
195 |   deleteClip(id) {
196 |     dispatch(deleteClip(id, padId));
197 |   }
198 | })
199 | 
200 | export default connect(mapStateToProps, mapDispatchToProps)(ClipEditor);
201 | 


--------------------------------------------------------------------------------
/src/clip/clip.css:
--------------------------------------------------------------------------------
 1 | .clip {
 2 |   width: 40px;
 3 |   height: 40px;
 4 |   background-color: #ddd;
 5 |   margin-right: 1px;
 6 |   border: 1px solid transparent;
 7 |   cursor: pointer;
 8 | }
 9 | 
10 | .clip:last-child {
11 |   margin-right: 0
12 | }
13 | 
14 | .clip:hover:not(.clip__selected) {
15 |   background-color: #cfcfcf;
16 | }
17 | 
18 | .clip__notEmpty {
19 |   background-color: rgba(186, 218, 84, 0.7);
20 | }
21 | 
22 | .clip:hover.clip__notEmpty {
23 |   background-color: rgba(186, 218, 84, 0.8)
24 | }
25 | 
26 | .clip__on {
27 |   background-color: yellow;
28 | }
29 | 
30 | .clip__selected {
31 |   background-color: rgba(186, 218, 84, 0.9);
32 |   border-color: rgba(0, 0, 0, 0.2);
33 | }
34 | 


--------------------------------------------------------------------------------
/src/clip/clip.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { shouldUpdate } from 'recompose';
 3 | import './clip.css';
 4 | 
 5 | const Clip = ({ clipId, onClick, selected }) =>
 6 |   <div className={`clip
 7 |     ${clipId ? 'clip__notEmpty' : ''}
 8 |     ${selected ? 'clip__selected' : ''}`}
 9 |     onClick={onClick}>
10 |   </div>
11 | ;
12 | 
13 | export default shouldUpdate(
14 |   (props, nextProps) => props.clipId !== nextProps.clipId
15 |                      || props.selected !== nextProps.selected
16 | )(Clip);
17 | 


--------------------------------------------------------------------------------
/src/clip/play-audio-clip.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import context from '../lib/audio/context';
 3 | 
 4 | export default class PlayAudioClip extends Component {
 5 | 
 6 |   constructor(props) {
 7 |     super(props);
 8 | 
 9 |     this.state = { playing: false };
10 |   }
11 | 
12 |   shouldComponentUpdate() {
13 |     return false;
14 |   }
15 | 
16 |   render() {
17 |     const { playing } = this.state;
18 |     return <button onClick={this.playPause}>{playing ? 'pause' : 'play'}</button>;
19 |   }
20 | 
21 |   playPause = (event) => {
22 |     event.preventDefault();
23 |     this.state.playing ? this.pause() : this.play();
24 |   }
25 | 
26 |   play = () => {
27 |     const { buffer, config } = this.props;
28 |     const audioNode = context.createBufferSource();
29 |     const gainNode = context.createGain();
30 |     audioNode.buffer = buffer;
31 |     gainNode.gain.value = config.gain;
32 |     audioNode.connect(gainNode);
33 |     gainNode.connect(context.destination);
34 |     audioNode.onended = this.pause;
35 |     audioNode.start();
36 | 
37 |     this.setState({
38 |       playing: true,
39 |       audioNode
40 |     });
41 |   }
42 | 
43 |   pause = () => {
44 |     const { audioNode } = this.state;
45 |     if (audioNode) {
46 |       audioNode.disconnect();
47 |       audioNode.stop();
48 |     }
49 | 
50 |     this.setState({
51 |       audioNode: null,
52 |       playing: false
53 |     });
54 |   }
55 | 
56 | }
57 | 


--------------------------------------------------------------------------------
/src/data/blank_project.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "settings": {
  3 |     "gain": 1,
  4 |     "bpm": 100
  5 |   },
  6 |   "tracks": {
  7 |     "master": {
  8 |       "name": "master",
  9 |       "id": "master",
 10 |       "gain": 1,
 11 |       "filters": [
 12 |       ]
 13 |     }
 14 |   },
 15 |   "filters": {
 16 |   },
 17 |   "pads": {
 18 |     "pad1": {
 19 |       "id": "pad1",
 20 |       "clips": [
 21 |         [
 22 |           null,
 23 |           null,
 24 |           null,
 25 |           null,
 26 |           null,
 27 |           null,
 28 |           null,
 29 |           null
 30 |         ],
 31 |         [
 32 |           null,
 33 |           null,
 34 |           null,
 35 |           null,
 36 |           null,
 37 |           null,
 38 |           null,
 39 |           null
 40 |         ],
 41 |         [
 42 |           null,
 43 |           null,
 44 |           null,
 45 |           null,
 46 |           null,
 47 |           null,
 48 |           null,
 49 |           null
 50 |         ],
 51 |         [
 52 |           null,
 53 |           null,
 54 |           null,
 55 |           null,
 56 |           null,
 57 |           null,
 58 |           null,
 59 |           null
 60 |         ],
 61 |         [
 62 |           null,
 63 |           null,
 64 |           null,
 65 |           null,
 66 |           null,
 67 |           null,
 68 |           null,
 69 |           null
 70 |         ],
 71 |         [
 72 |           null,
 73 |           null,
 74 |           null,
 75 |           null,
 76 |           null,
 77 |           null,
 78 |           null,
 79 |           null
 80 |         ],
 81 |         [
 82 |           null,
 83 |           null,
 84 |           null,
 85 |           null,
 86 |           null,
 87 |           null,
 88 |           null,
 89 |           null
 90 |         ],
 91 |         [
 92 |           null,
 93 |           null,
 94 |           null,
 95 |           null,
 96 |           null,
 97 |           null,
 98 |           null,
 99 |           null
100 |         ]
101 |       ],
102 |       "selectedClipId": null
103 |     }
104 |   },
105 |   "clips": {
106 |   },
107 |   "files": {
108 |   },
109 |   "scheduler": {
110 |     "scheduled": {},
111 |     "playing": {},
112 |     "toStop": {}
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/src/data/clips.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * -------------------- ACTION TYPES ----------------------------
 3 |  */
 4 | const CHANGE_CLIP_FIELD = 'jsconf2017/clips/CHANGE_CLIP_FIELD';
 5 | export const CREATE_CLIP = 'jsconf2017/clips/CREATE_CLIP';
 6 | export const DELETE_CLIP = 'jsconf2017/clips/DELETE_CLIP';
 7 | 
 8 | export const CLIP_TYPE_NONE = 'select a type';
 9 | export const CLIP_TYPE_AUDIO_SAMPLE = 'audiosample';
10 | export const CLIP_TYPE_AUDIO_AND_VIDEO = 'audioandvideo';
11 | export const CLIP_TYPE_VIDEO = 'video';
12 | export const CLIP_TYPES = [CLIP_TYPE_NONE, CLIP_TYPE_AUDIO_SAMPLE, CLIP_TYPE_AUDIO_AND_VIDEO, CLIP_TYPE_VIDEO];
13 | export const AUDIO_BEHAVIOR_SCHEDULABLE = 'schedulable';
14 | export const AUDIO_BEHAVIOR_SINGLE = 'single';
15 | export const AUDIO_BEHAVIOR_TYPES = [AUDIO_BEHAVIOR_SCHEDULABLE, AUDIO_BEHAVIOR_SINGLE];
16 | 
17 | const BASE_AUDIO_SAMPLE = {
18 |   gain: 1,
19 |   behavior: AUDIO_BEHAVIOR_SCHEDULABLE,
20 |   file: '',
21 |   loop: true,
22 |   track: 'master'
23 | };
24 | 
25 | const BASE_VIDEO_SAMPLE = {
26 |   noFilter: false
27 | };
28 | 
29 | const BASE_AUDIO_VIDEO_SAMPLE = {
30 |   ...BASE_AUDIO_SAMPLE,
31 |   videoFile: ''
32 | };
33 | 
34 | /**
35 |  * -------------------- REDUCER ----------------------------
36 |  */
37 | export default function clips(state = {}, action) {
38 |   const id = action.id;
39 | 
40 |   switch (action.type) {
41 |     case CHANGE_CLIP_FIELD:
42 |       const { field, value } = action;
43 |       let clip = state[id];
44 | 
45 |       // make sure, the clip has the base values for its type
46 |       if (clip && field === 'type') {
47 |         switch (value) {
48 |           case CLIP_TYPE_AUDIO_SAMPLE:
49 |             clip = {
50 |               ...BASE_AUDIO_SAMPLE,
51 |               ...clip
52 |             };
53 |             break;
54 |           case CLIP_TYPE_VIDEO:
55 |             clip = {
56 |               ...BASE_VIDEO_SAMPLE,
57 |               ...clip
58 |             };
59 |             break;
60 |           case CLIP_TYPE_AUDIO_AND_VIDEO:
61 |             clip ={
62 |               ...BASE_AUDIO_VIDEO_SAMPLE,
63 |               ...clip
64 |             };
65 |             break;
66 |           default:
67 |         }
68 | 
69 |       }
70 | 
71 |       return {
72 |         ...state,
73 |         [id]: { ...clip, [field]: value }
74 |       };
75 |     case CREATE_CLIP:
76 |       return {
77 |         ...state,
78 |         [id]: { id }
79 |       }
80 |     case DELETE_CLIP:
81 |       const clipsCopy = { ...state };
82 |       delete clipsCopy[id];
83 |       return clipsCopy;
84 |     default:
85 |       return state;
86 |   }
87 | }
88 | 
89 | /**
90 |  * -------------------- ACTION CREATORS ----------------------------
91 |  */
92 | export const changeClipField = (id, field, value) => ({ type: CHANGE_CLIP_FIELD, id, field, value });
93 | export const createClip = (x, y, id, padId) => ({ type: CREATE_CLIP, x, y, id, padId });
94 | export const deleteClip = (id, padId) => ({ type: DELETE_CLIP, id, padId });
95 | 


--------------------------------------------------------------------------------
/src/data/controllers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * -------------------- ACTION TYPES ----------------------------
 3 |  */
 4 | const ADD_CONTROLLER = 'jsconf2017/controllers/ADD_CONTROLLER';
 5 | const MAP_CONTROLLER_TO_PAD = 'jsconf2017/controllers/MAP_CONTROLLER_TO_PAD';
 6 | const REMOVE_CONTROLLER = 'jsconf2017/controllers/REMOVE_CONTROLLER';
 7 | 
 8 | /**
 9 |  * -------------------- REDUCER ----------------------------
10 |  */
11 | export default function controllers(state = {}, action) {
12 |   const { id, pad } = action;
13 |   switch (action.type) {
14 |     case ADD_CONTROLLER:
15 |       return {
16 |         ...state,
17 |         [id]: {
18 |           id,
19 |           pad,
20 |           controller: action.controller,
21 |         }
22 |       };
23 |     case MAP_CONTROLLER_TO_PAD:
24 |       return {
25 |         ...state,
26 |         [id]: {
27 |           ...state[id],
28 |           pad
29 |         }
30 |       };
31 |     case REMOVE_CONTROLLER:
32 |       const copy = { ...state };
33 |       delete copy[id];
34 |       return copy;
35 |     default:
36 |       return state;
37 |   }
38 | }
39 | 
40 | /**
41 |  * -------------------- ACTION CREATORS ----------------------------
42 |  */
43 | export const addController = (id, controller, pad) => ({ type: ADD_CONTROLLER, id, controller, pad });
44 | export const mapControllerToPad = (id, pad) => ({ type: MAP_CONTROLLER_TO_PAD, id, pad });
45 | export const removeController = (id) => ({ type: REMOVE_CONTROLLER, id });
46 | 


--------------------------------------------------------------------------------
/src/data/file-loader.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * -------------------- ACTION TYPES ----------------------------
 3 |  */
 4 | const FILE_LOADED = 'jsconf2017/file-loader/FILE_LOADED';
 5 | 
 6 | /**
 7 |  * -------------------- REDUCER ----------------------------
 8 |  */
 9 | export default function fileLoader(state = {}, action) {
10 |   switch (action.type) {
11 |     case FILE_LOADED:
12 |       return {
13 |         ...state,
14 |         [action.id]: action.file
15 |       };
16 |     default:
17 |       return state;
18 |   }
19 | }
20 | 
21 | /**
22 |  * -------------------- ACTION CREATORS ----------------------------
23 |  */
24 | export const fileLoaded = (id, file) => ({ type: FILE_LOADED, id, file });
25 | 


--------------------------------------------------------------------------------
/src/data/files.js:
--------------------------------------------------------------------------------
 1 | import { createSelector } from 'reselect'
 2 | import { isAudio, isVideo } from '../lib/regular-expressions';
 3 | 
 4 | /**
 5 |  * -------------------- ACTION TYPES ----------------------------
 6 |  */
 7 | export const ADD_FILE = 'jsconf2017/files/ADD_FILE';
 8 | export const REMOVE_FILE = 'jsconf2017/files/REMOVE_FILE';
 9 | 
10 | /**
11 |  * -------------------- REDUCER ----------------------------
12 |  */
13 | export default function(state = {}, action) {
14 |   const { id, file } = action;
15 |   switch (action.type) {
16 |     case ADD_FILE:
17 |       return {
18 |         ...state,
19 |         [id]: file
20 |       }
21 |     case REMOVE_FILE:
22 |       const files = { ...state };
23 |       delete files[id];
24 |       return files;
25 |     default:
26 |       return state;
27 |   }
28 | }
29 | 
30 | /**
31 |  * -------------------- ACTION CREATORS ----------------------------
32 |  */
33 | export const addFile = (id, file) => ({ type: ADD_FILE, id, file });
34 | export const removeFile = (id) => ({ type: REMOVE_FILE, id });
35 | 
36 | /**
37 |  * -------------------- SELECTORS ----------------------------
38 |  */
39 | const getFiles = (state) => state.files
40 | 
41 | function fileIsAudio(file) { return isAudio.test(file.location); }
42 | function fileIsVideo(file) { return isVideo.test(file.location); }
43 | 
44 | export const getAudioFiles = createSelector(
45 |   [getFiles],
46 |   (files) => Object.keys(files)
47 |                .filter((id) => fileIsAudio(files[id]))
48 |                .reduce((res, id) => Object.assign(res, { [id]: files[id] }), {})
49 | );
50 | 
51 | export const getVideoFiles = createSelector(
52 |   [getFiles],
53 |   (files) => Object.keys(files)
54 |                .filter((id) => fileIsVideo(files[id]))
55 |                .reduce((res, id) => Object.assign(res, { [id]: files[id] }), {})
56 | )
57 | 


--------------------------------------------------------------------------------
/src/data/pads.js:
--------------------------------------------------------------------------------
  1 | import uuid from 'uuid';
  2 | import { CREATE_CLIP, DELETE_CLIP } from './clips';
  3 | 
  4 | /**
  5 |  * -------------------- ACTION TYPES ----------------------------
  6 |  */
  7 | const SELECT_CLIP = 'jsconf2017/pads/SELECT_CLIP';
  8 | const CREATE_PAD = 'jsconf2017/pads/CREATE_PAD';
  9 | const REMOVE_PAD = 'jsconf2017/pads/REMOVE_PAD';
 10 | 
 11 | /**
 12 |  * -------------------- REDUCER ----------------------------
 13 |  */
 14 | export default function pads(state = {}, action) {
 15 |   const { padId } = action;
 16 |   switch (action.type) {
 17 |     case CREATE_CLIP:
 18 |     case SELECT_CLIP:
 19 |     case DELETE_CLIP:
 20 |       const pad = state[padId];
 21 |       return {
 22 |         ...state,
 23 |         [padId]: padReducer(pad, action)
 24 |       };
 25 |     case CREATE_PAD:
 26 |       const id = uuid.v4();
 27 |       return {
 28 |         ...state,
 29 |         [id]: generateEmptyPad(id)
 30 |       };
 31 |     case REMOVE_PAD:
 32 |       const copiedPads = { ...state };
 33 |       delete copiedPads[padId];
 34 |       return copiedPads;
 35 |     default:
 36 |       return state;
 37 |   }
 38 | }
 39 | 
 40 | function padReducer(state, action) {
 41 |   switch (action.type) {
 42 |     case CREATE_CLIP: {
 43 |       const { clips } = state;
 44 |       const { x, y, id } = action;
 45 | 
 46 |       return {
 47 |         ...state,
 48 |         clips: changeValueAtPoint({
 49 |           array2d: clips,
 50 |           value: id,
 51 |           x, y
 52 |         })
 53 |       };
 54 |     }
 55 | 
 56 |     case SELECT_CLIP: {
 57 |       return {
 58 |         ...state,
 59 |         selectedClipId: action.selectedClipId
 60 |       };
 61 |     }
 62 | 
 63 |     case DELETE_CLIP: {
 64 |       const { clips } = state;
 65 |       const { id } = action;
 66 |       const coordinates = findIn2dArray(clips, id);
 67 | 
 68 |       if (!coordinates) { return state; }
 69 | 
 70 |       const { x, y } = coordinates;
 71 | 
 72 |       return {
 73 |         ...state,
 74 |         clips: changeValueAtPoint({
 75 |           array2d: clips,
 76 |           value: null,
 77 |           x, y
 78 |         })
 79 |       };
 80 |     }
 81 |     default:
 82 |       return state;
 83 |   }
 84 | }
 85 | 
 86 | /**
 87 |  * -------------------- ACTION CREATORS ----------------------------
 88 |  */
 89 | export const selectClip = (selectedClipId, padId) => ({ type: SELECT_CLIP, selectedClipId, padId });
 90 | 
 91 | export const createPad = () => ({ type: CREATE_PAD });
 92 | 
 93 | export const removePad = (padId) => ({ type: REMOVE_PAD, padId });
 94 | 
 95 | /**
 96 |  * -------------------- HELPERS ----------------------------
 97 |  */
 98 | function findIn2dArray(array2d, value) {
 99 |   for (var y = 0; y < 8; y++) {
100 |     for (var x = 0; x < array2d.length; x++) {
101 |       if (array2d[y][x] === value) {
102 |         return { x, y };
103 |       }
104 |     }
105 |   }
106 |   return null;
107 | }
108 | 
109 | function changeValueAtPoint({x, y, value, array2d}){
110 |   const newRow = [
111 |     ...array2d[y].slice(0, x),
112 |     value,
113 |     ...array2d[y].slice(x + 1)
114 |   ];
115 | 
116 |   return array2d.slice(0, y)
117 |                  .concat([newRow])
118 |                  .concat(array2d.slice(y + 1));
119 | }
120 | 
121 | function generateEmptyPad(id) {
122 |   return {
123 |     id,
124 |     clips: [
125 |       [
126 |         null,
127 |         null,
128 |         null,
129 |         null,
130 |         null,
131 |         null,
132 |         null,
133 |         null
134 |       ],
135 |       [
136 |         null,
137 |         null,
138 |         null,
139 |         null,
140 |         null,
141 |         null,
142 |         null,
143 |         null
144 |       ],
145 |       [
146 |         null,
147 |         null,
148 |         null,
149 |         null,
150 |         null,
151 |         null,
152 |         null,
153 |         null
154 |       ],
155 |       [
156 |         null,
157 |         null,
158 |         null,
159 |         null,
160 |         null,
161 |         null,
162 |         null,
163 |         null
164 |       ],
165 |       [
166 |         null,
167 |         null,
168 |         null,
169 |         null,
170 |         null,
171 |         null,
172 |         null,
173 |         null
174 |       ],
175 |       [
176 |         null,
177 |         null,
178 |         null,
179 |         null,
180 |         null,
181 |         null,
182 |         null,
183 |         null
184 |       ],
185 |       [
186 |         null,
187 |         null,
188 |         null,
189 |         null,
190 |         null,
191 |         null,
192 |         null,
193 |         null
194 |       ],
195 |       [
196 |         null,
197 |         null,
198 |         null,
199 |         null,
200 |         null,
201 |         null,
202 |         null,
203 |         null
204 |       ]
205 |     ],
206 |     selectedClipId: null
207 |   };
208 | }
209 | 


--------------------------------------------------------------------------------
/src/data/reducer.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux'
 2 | 
 3 | import clips from './clips';
 4 | import controllers from './controllers';
 5 | import fileLoader from './file-loader';
 6 | import files from './files';
 7 | import pads from './pads';
 8 | import scheduler from './scheduler';
 9 | import settings from './settings';
10 | import tracks from './tracks';
11 | import videoRenderer from './video-renderer';
12 | 
13 | const appReducer = combineReducers({
14 |   clips, controllers, fileLoader, files, pads, scheduler, settings, tracks, videoRenderer
15 | });
16 | 
17 | const reducer = (state, action) => {
18 |   if (action.type === 'init') {
19 |     state = action.state;
20 |   }
21 | 
22 |   return appReducer(state, action);
23 | };
24 | 
25 | export default reducer;


--------------------------------------------------------------------------------
/src/data/scheduler.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * -------------------- ACTION TYPES ----------------------------
 3 |  */
 4 | const ADD_SCHEDULED = 'jsconf2017/scheduler/ADD_SCHEDULED';
 5 | const ADD_PLAYING = 'jsconf2017/scheduler/ADD_PLAYING';
 6 | const ADD_TOSTOP = 'jsconf2017/scheduler/ADD_TOSTOP';
 7 | const MEDIA_ENDED = 'jsconf2017/scheduler/MEDIA_ENDED';
 8 | const FLUSH_SCHEDULED = 'jsconf2017/scheduler/FLUSH_SCHEDULED';
 9 | 
10 | /**
11 |  * -------------------- REDUCER ----------------------------
12 |  */
13 | export default function scheduler(state, action) {
14 |   if (!state) {
15 |     state = { scheduled: {}, toStop: {}, playing: {} };
16 |   }
17 | 
18 |   const { id } = action;
19 | 
20 |   switch (action.type) {
21 |     case ADD_SCHEDULED:
22 |       return {
23 |         ...state,
24 |         scheduled: {
25 |           ...state.scheduled,
26 |           [id]: true
27 |         }
28 |       };
29 |     case FLUSH_SCHEDULED:
30 |       return {
31 |         ...state,
32 |         scheduled: {},
33 |         toStop: {}
34 |       };
35 |     case ADD_PLAYING:
36 |       const { payload, clipId } = action;
37 |       return {
38 |         ...state,
39 |         playing: {
40 |           ...state.playing,
41 |           [id]: { payload, clipId }
42 |         }
43 |       };
44 |     case ADD_TOSTOP:
45 |       return {
46 |         ...state,
47 |         toStop: {
48 |           ...state.toStop,
49 |           [id]: true
50 |         }
51 |       };
52 |     case MEDIA_ENDED:
53 |       const playingCopy = { ...state.playing };
54 | 
55 |       delete playingCopy[id];
56 | 
57 |       return {
58 |         ...state,
59 |         playing: playingCopy
60 |       };
61 |     default:
62 |       return state;
63 |   }
64 | }
65 | 
66 | /**
67 |  * -------------------- HELPERS ----------------------------
68 |  */
69 | export const playingId = (clipId, fileId) => `file:${fileId}-clip${clipId}`;
70 | export const isPlaying = (playingState, clip) => playingState[playingId(clip.id, clip.file)] || playingState[playingId(clip.id, clip.videoFile)]
71 | 
72 | /**
73 |  * -------------------- ACTION CREATORS ----------------------------
74 |  */
75 | export const addPlaying = (fileId, payload, clipId) => ({ type: ADD_PLAYING, id: playingId(clipId, fileId), payload, clipId});
76 | export const addScheduled = (id) => ({ type: ADD_SCHEDULED, id });
77 | export const mediaEnded = (fileId, clipId) => ({ type: MEDIA_ENDED, id: playingId(clipId, fileId) });
78 | export const flushScheduled = () => ({ type: FLUSH_SCHEDULED });
79 | export const scheduleStop = (id) => ({ type: ADD_TOSTOP, id });
80 | 


--------------------------------------------------------------------------------
/src/data/settings.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * -------------------- ACTION TYPES ----------------------------
 3 |  */
 4 | const CHANGE_SETTING = 'jsconf-2017/settings/CHANGE_SETTING';
 5 | 
 6 | /**
 7 |  * -------------------- REDUCER ----------------------------
 8 |  */
 9 | export default function settings(state = {}, action) {
10 |   switch (action.type) {
11 |     case CHANGE_SETTING:
12 |       return {
13 |         ...state,
14 |         [action.settingId]: action.value
15 |       };
16 |     default:
17 |       return state;
18 |   }
19 | }
20 | 
21 | /**
22 |  * -------------------- ACTION CREATOR ----------------------------
23 |  */
24 | export const changeSetting = (settingId, value) => ({ type: CHANGE_SETTING, settingId, value });
25 | 


--------------------------------------------------------------------------------
/src/data/tracks.js:
--------------------------------------------------------------------------------
 1 | import uuid from 'uuid';
 2 | 
 3 | /**
 4 |  * -------------------- ACTION TYPES ----------------------------
 5 |  */
 6 | const CREATE_TRACK = 'jsconf2017/tracks/CREATE_TRACK';
 7 | const CHANGE_TRACK_NAME = 'jsconf2017/tracks/CHANGE_TRACK_NAME';
 8 | const CHANGE_TRACK_GAIN = 'jsconf2017/tracks/CHANGE_TRACK_GAIN';
 9 | const ADD_FILTER = 'jsconf2017/tracks/ADD_FILTER';
10 | const REMOVE_TRACK = 'jsconf2017/tracks/REMOVE_TRACK';
11 | 
12 | /**
13 |  * -------------------- REDUCER ----------------------------
14 |  */
15 | export default function tracks(state = {}, action) {
16 |   const { id } = action;
17 |   const track = state[id];
18 | 
19 |   switch (action.type) {
20 |     case CREATE_TRACK:
21 |       const trackId = uuid.v4();
22 |       const trackCount = Object.keys(state).length + 1;
23 |       const trackName = `track${trackCount}`;
24 |       return {
25 |         ...state,
26 |         [trackId]: { name: trackName, gain: 1, filters: [], id: trackId }
27 |       };
28 |     case CHANGE_TRACK_NAME:
29 |       const { name } = action;
30 |       return {
31 |         ...state,
32 |         [id]: {
33 |           ...track,
34 |           name
35 |         }
36 |       }
37 |     case CHANGE_TRACK_GAIN:
38 |       const { gain } = action;
39 |       return {
40 |         ...state,
41 |         [id]: {
42 |           ...track,
43 |           gain
44 |         }
45 |       }
46 |     case ADD_FILTER:
47 |       const { filter } = action;
48 |       return {
49 |         ...state,
50 |         [id]: {
51 |           ...track,
52 |           filters: [...track.filters, filter]
53 |         }
54 |       };
55 |     case REMOVE_TRACK:
56 |       if (id === 'master') { return state; }
57 |       const copy = { ...state };
58 |       delete copy[id];
59 |       return copy;
60 |     default:
61 |       return state;
62 |   }
63 | }
64 | 
65 | /**
66 |  * -------------------- ACTION CREATORS ----------------------------
67 |  */
68 | export const createTrack = () => ({ type: CREATE_TRACK });
69 | export const changeTrackName = (id, name) => ({ type: CHANGE_TRACK_NAME, id, name });
70 | export const changeTrackGain = (id, gain) => ({ type: CHANGE_TRACK_GAIN, id, gain });
71 | export const removeTrack = (id) => ({ type: REMOVE_TRACK, id });
72 | 


--------------------------------------------------------------------------------
/src/data/video-renderer.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * -------------------- ACTION TYPES ----------------------------
 3 |  */
 4 | const SET_RENDERPARAM = 'jsconf2017/video-renderer/SET_RENDERPARAM';
 5 | 
 6 | /**
 7 |  * -------------------- REDUCER ----------------------------
 8 |  */
 9 | const initialState = {
10 |   renderParams: {
11 |     resolution: "160x90",
12 |     backgroundColor: 0x000000,
13 |     foregroundColor: 0xe10079,
14 |     pointSize: 0.25,
15 |     luminanceMin: 0.2,
16 |     luminanceMax: 0.9,
17 |     r0: 0.9
18 |   }
19 | };
20 | export default function videoRenderer(state = initialState, action) {
21 |   switch (action.type) {
22 |     case SET_RENDERPARAM:
23 |       return {
24 |         ...state,
25 |         renderParams: {
26 |           ...state.renderParams,
27 |           ...action.renderParams
28 |         }
29 |       };
30 | 
31 |     default:
32 |       return state;
33 |   }
34 | }
35 | 
36 | /**
37 |  * -------------------- ACTION CREATORS ----------------------------
38 |  */
39 | export const setRenderparam = (name, value) => ({
40 |   type: SET_RENDERPARAM,
41 |   renderParams: {[name]: value}
42 | });
43 | 


--------------------------------------------------------------------------------
/src/editor.css:
--------------------------------------------------------------------------------
 1 | .app__container {
 2 |   display: flex;
 3 |   flex-direction: row;
 4 | }
 5 | 
 6 | .app__navigation {
 7 |   display: flex;
 8 |   flex-direction: column;
 9 | }
10 | 
11 | .app__navigationItem {
12 |   padding: 20px 30px;
13 |   text-decoration: none;
14 |   color: #333;
15 |   background-color: #eee;
16 | }
17 | 
18 | .app__navigationItem:hover {
19 |   background-color: #eaeaea;
20 | }
21 | 
22 | .app__navigationItem.m-active {
23 |   background-color: #ddd;
24 | }
25 | 
26 | .app__content {
27 |   margin-left: 10px;
28 |   flex-grow: 1;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/editor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Link, IndexLink } from 'react-router';
 3 | import { connect } from 'react-redux'
 4 | import LiveMode from './live-mode';
 5 | import DragAndDropReveicer from './files/drag-and-drop-receiver';
 6 | import Loader from './lib/loader';
 7 | import uuid from 'uuid';
 8 | import './editor.css';
 9 | 
10 | import { addFile } from './data/files';
11 | import { copyFileToProject } from './lib/files';
12 | import midi from './lib/midi';
13 | import scheduler from './lib/scheduler';
14 | import audioGraph from './lib/audio-graph';
15 | import store from './lib/store';
16 | import { readConfig, persistStorePeriodically } from './lib/files';
17 | 
18 | class Editor extends Component {
19 | 
20 |   componentDidMount() {
21 |     const { params: { project_id } } = this.props;
22 |     const config = readConfig(project_id);
23 | 
24 |     // initialize the editor
25 |     this.props.initEditor(config);
26 | 
27 |     // initialize everything under the hood
28 |     audioGraph.init(store);
29 |     scheduler.init(store);
30 |     midi.init(store, scheduler.handleManualSchedule, scheduler.scheduleRow);
31 | 
32 |     // persist project config
33 |     persistStorePeriodically(project_id, store);
34 |   }
35 | 
36 |   render() {
37 |     const { children, onDrop, params: { project_id } } = this.props;
38 |     return (
39 |       <div className="app">
40 |         <LiveMode />
41 |         <div className="app__container">
42 |           <div className="app__navigation">
43 |             <IndexLink to={`/project/${project_id}`} activeClassName="m-active" className="app__navigationItem">
44 |               Pads
45 |             </IndexLink>
46 |             <Link to={`/project/${project_id}/tracks`} activeClassName="m-active" className="app__navigationItem">
47 |               Tracks
48 |             </Link>
49 |             <Link to={`/project/${project_id}/files`} activeClassName="m-active" className="app__navigationItem">
50 |               Files
51 |             </Link>
52 |             <Link to={`/project/${project_id}/settings`} activeClassName="m-active" className="app__navigationItem">
53 |               Project
54 |             </Link>
55 |           </div>
56 |           <div className="app__content">
57 |             { children }
58 |           </div>
59 |         </div>
60 |         <Loader projectId={project_id} />
61 |         <DragAndDropReveicer onDrop={onDrop} />
62 |       </div>
63 |     );
64 |   }
65 | }
66 | 
67 | const mapDispatchToProps = (dispatch, props) => ({
68 |   onDrop: (filePath) => {
69 |     const id = uuid.v4();
70 |     const { params: { project_id } } = props;
71 |     copyFileToProject(filePath, id, project_id)
72 |       .then((file) => dispatch(addFile(id, file)));
73 |   },
74 | 
75 |   initEditor: (config) => {
76 |     dispatch({ type: 'init', state: config });
77 |   }
78 | });
79 | 
80 | export default connect(null, mapDispatchToProps)(Editor);
81 | 


--------------------------------------------------------------------------------
/src/files/drag-and-drop-receiver.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { isAudio, isVideo } from '../lib/regular-expressions';
 3 | 
 4 | export default class DragAndDropReveicer extends Component {
 5 |   componentDidMount() {
 6 |     const { body } = document;
 7 |     body.addEventListener('dragenter', this.onDragEnter);
 8 |     body.addEventListener('dragover', this.onDragOver);
 9 |     body.addEventListener('drop', this.onDrop);
10 |     body.addEventListener('dragleave', this.onDragLeave);
11 |   }
12 | 
13 |   componentWillUnmount() {
14 |     const { body } = document;
15 |     body.removeEventListener('dragenter', this.onDragEnter);
16 |     body.removeEventListener('dragover', this.onDragOver);
17 |     body.removeEventListener('drop', this.onDrop);
18 |     body.removeEventListener('dragleave', this.onDragLeave);
19 |   }
20 | 
21 |   onDragOver = (event) => {
22 |     event.preventDefault();
23 |     event.stopPropagation();
24 |     return false;
25 |   }
26 | 
27 |   onDragLeave = (event) => {
28 |     event.preventDefault();
29 |     event.stopPropagation();
30 |     return false;
31 |   }
32 | 
33 |   onDragEnter = (event) => {
34 |     event.preventDefault();
35 |     event.stopPropagation();
36 |     return false;
37 |   }
38 | 
39 |   onDrop = (event) => {
40 |     event.preventDefault();
41 |     event.stopPropagation();
42 |     const { dataTransfer } = event;
43 |     if (dataTransfer) {
44 |       const { files } = dataTransfer;
45 | 
46 |       for (var i = 0; i < files.length; i++) {
47 |         const file = files[i];
48 |         if (isAudio.test(file.type) || isVideo.test(file.type)) {
49 |           this.props.onDrop(file.path);
50 |         }
51 |       }
52 |     }
53 |     return false;
54 |   }
55 | 
56 |   render() {
57 |     return <div />;
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/files/file.css:
--------------------------------------------------------------------------------
 1 | .file {
 2 |   padding: 10px 20px;
 3 |   display: flex;
 4 |   align-items: baseline;
 5 | }
 6 | 
 7 | .file:hover {
 8 |   background-color: #eee;
 9 | }
10 | 
11 | .file__name {
12 |   flex-grow: 1;
13 | }
14 | 
15 | .file__deleteButton {
16 |   visibility: hidden;
17 |   margin-left: 20px;
18 | }
19 | 
20 | .file:hover .file__deleteButton {
21 |   visibility: visible;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/files/file.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { withHandlers } from 'recompose';
 3 | import './file.css'
 4 | 
 5 | const File = ({ file, fileId, onButtonClick }) =>
 6 |   <div className="file">
 7 |     <span className="file__name">{file.name}</span>
 8 |     <button className="file__deleteButton m-no-highlight" onClick={onButtonClick}>delete</button>
 9 |   </div>
10 | ;
11 | 
12 | export default withHandlers({
13 |   onButtonClick: ({ onDelete, fileId }) => (event) => {
14 |     event.preventDefault();
15 |     onDelete(fileId)
16 |   }
17 | })(File);
18 | 


--------------------------------------------------------------------------------
/src/files/files-list.css:
--------------------------------------------------------------------------------
1 | .filesList {
2 |   display: inline-block;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/files/files-list.js:
--------------------------------------------------------------------------------
 1 | import { connect } from 'react-redux';
 2 | import React from 'react';
 3 | import { compose, shouldUpdate } from 'recompose';
 4 | import { removeFile } from '../data/files';
 5 | import { deleteFile } from '../lib/files';
 6 | import store from '../lib/store';
 7 | import File from './file';
 8 | const { dialog } = require('electron').remote;
 9 | 
10 | import './files-list.css';
11 | 
12 | const FilesList = ({ files, deleteFile }) =>
13 |   <div className="filesList">
14 |     { Object.keys(files).map((fileId) =>
15 |       <File
16 |         key={`files-${fileId}`}
17 |         file={files[fileId]}
18 |         fileId={fileId}
19 |         onDelete={deleteFile}
20 |       />
21 |     )}
22 |   </div>
23 | ;
24 | 
25 | const mapStateToProps = (state) => ({
26 |   files: state.files,
27 |   clips: state.clips
28 | });
29 | 
30 | const mapDispatchToProps = (dispatch, props) => ({
31 |   deleteFile(fileId) {
32 |     const { params: { project_id } } = props;
33 |     const { clips, files } = store.getState();
34 |     const affectedClips = Object.keys(clips)
35 |                                 .map((clipId) =>
36 |                                   clips[clipId].file === fileId
37 |                                 )
38 |                                 .filter(Boolean)
39 |     const affectedAmount = affectedClips.length;
40 |     const clipOrClips = affectedAmount === 1 ? 'clip' : 'clips';
41 |     const extraMessage = `This file is used in ${affectedAmount} ${clipOrClips}, cannot remove it`;
42 |     const message = 'Are you shure you want to remove the file?';
43 | 
44 |     if (affectedAmount) {
45 |       dialog.showMessageBox({
46 |         message: extraMessage,
47 |         title: 'Removing file',
48 |         buttons: ['Okay']
49 |       });
50 |     } else {
51 |       const result = dialog.showMessageBox({
52 |         message,
53 |         title: 'Removing file',
54 |         buttons: ['No', 'Yes']
55 |       });
56 |       if (result === 1) {
57 |         deleteFile(project_id, files[fileId].location);
58 |         dispatch(removeFile(fileId));
59 |       }
60 |     }
61 |   }
62 | });
63 | 
64 | export default compose(
65 |   connect(mapStateToProps, mapDispatchToProps),
66 |   shouldUpdate((props, nextProps) => props.files !== nextProps.files)
67 | )(FilesList);
68 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import "../node_modules/normalize.css/normalize.css";
 2 | 
 3 | body {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   font-family: sans-serif;
 7 |   color: #333;
 8 | }
 9 | 
10 | button {
11 |   padding: 10px;
12 |   background: #eee;
13 |   color: #333;
14 |   font-weight: 400;
15 |   border: none;
16 |   border-radius: 3px;
17 |   cursor: pointer;
18 |   outline: 0;
19 | }
20 | 
21 | button:hover {
22 |   background-color: #e0e0e0;
23 | }
24 | 
25 | button.m-no-highlight {
26 |   background-color: inherit;
27 | }
28 | 
29 | button:disabled,
30 | button:disabled:hover {
31 |   cursor: not-allowed;
32 |   background-color: #fafafa;
33 |   color: #bbb;
34 | }
35 | 
36 | input {
37 |   outline: 0;
38 |   border: 0;
39 |   border-bottom: 1px solid #ddd;
40 |   line-height: 26px;
41 | }
42 | 
43 | input:focus {
44 |   border-bottom-color: #ccc;
45 | }
46 | 
47 | #root {
48 |   background-color: #fff;
49 |   height: 100vh;
50 |   width: 100vw;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 4 | import { Provider } from 'react-redux'
 5 | import Projects from './projects';
 6 | import Editor from './editor';
 7 | import Pads from './pad/pads';
 8 | import Settings from './settings/settings';
 9 | import Tracks from './tracks/tracks';
10 | import FilesList from './files/files-list';
11 | import store from './lib/store';
12 | 
13 | import './index.css';
14 | 
15 | ReactDOM.render(
16 |   <Provider store={store}>
17 |     <Router history={browserHistory}>
18 |       <Route path="/" component={Projects} />
19 |       <Route path="/project/:project_id" component={Editor}>
20 |         <IndexRoute component={Pads} />
21 |         <Route path="/project/:project_id/settings" component={Settings} />
22 |         <Route path="/project/:project_id/tracks" component={Tracks} />
23 |         <Route path="/project/:project_id/files" component={FilesList} />
24 |       </Route>
25 |     </Router>
26 |   </Provider>,
27 |   document.getElementById('root')
28 | );
29 | 


--------------------------------------------------------------------------------
/src/lib/audio-graph.js:
--------------------------------------------------------------------------------
 1 | import context from './audio/context';
 2 | import _ from 'lodash';
 3 | 
 4 | export default {
 5 |   tracks: {},
 6 |   filters: {},
 7 |   storeObject: null,
 8 | 
 9 |   init(storeObject) {
10 |     this.storeObject = storeObject;
11 |     this.removeTrack = this.removeTrack.bind(this);
12 | 
13 |     this.previousTracks = {};
14 |     storeObject.subscribe(() => {
15 |       const { tracks } = this.storeObject.getState();
16 |       if (this.previousTracks !== tracks) {
17 |         this.synchronizeGraph();
18 |         this.previousTracks = tracks;
19 |       }
20 |     });
21 | 
22 |     this.synchronizeGraph();
23 |   },
24 | 
25 |   synchronizeGraph() {
26 |     const { tracks } = this.storeObject.getState();
27 |     const currentTrackIds = Object.keys(tracks);
28 |     const previousTrackIds = Object.keys(this.previousTracks);
29 | 
30 |     if (previousTrackIds.length > currentTrackIds.length) {
31 |       _.difference(previousTrackIds, currentTrackIds).forEach(this.removeTrack)
32 |     }
33 | 
34 |     currentTrackIds.forEach((trackId) => {
35 |       const trackConfig = tracks[trackId];
36 |       let track = this.tracks[trackId];
37 |       if (!track) {
38 |         track = context.createGain();
39 |         track.connect(context.destination);
40 |         this.tracks[trackId] = track;
41 |       }
42 |       track.gain.value = parseFloat(trackConfig.gain, 10);
43 |     });
44 |   },
45 | 
46 |   getTracks() {
47 |     return this.tracks;
48 |   },
49 | 
50 |   removeTrack(trackId) {
51 |     this.tracks[trackId].disconnect();
52 |     delete this.tracks[trackId];
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/lib/audio/context.js:
--------------------------------------------------------------------------------
1 | const AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
2 | const context = new AudioContext();
3 | 
4 | export default context;
5 | 


--------------------------------------------------------------------------------
/src/lib/beatclock.js:
--------------------------------------------------------------------------------
 1 | import context from './audio/context';
 2 | import Dilla from 'dilla';
 3 | import EventEmitter from 'event-emitter';
 4 | 
 5 | class BeatClock {
 6 |   constructor () {
 7 |     this.events = new EventEmitter();
 8 | 
 9 |     this.dilla = Dilla(context, {
10 |       tempo: 100,
11 |       beatsPerBar: 4,
12 |       loopLength: 2
13 |     });
14 | 
15 |     this.dilla.on('tick', this._onTick);
16 |   }
17 | 
18 |   start() {
19 |     this.dilla.start();
20 |   }
21 | 
22 |   stop() {
23 |     this.dilla.stop();
24 |   }
25 | 
26 |   on() {
27 |     this.events.on.apply(this.events, arguments);
28 |   }
29 | 
30 |   setBpm(bpm) {
31 |     this.dilla.setTempo(bpm);
32 |   }
33 | 
34 |   _onTick = (event) => {
35 |     const split = event.position.split('.');
36 |     const tick = parseInt(split[2], 10);
37 |     const beat = parseInt(split[1], 10);
38 |     const bar = parseInt(split[0], 10);
39 |     if (this.lastBar !== bar) {
40 |       this.events.emit('bar', bar);
41 |     }
42 |     this.lastBar = bar;
43 | 
44 |     if (this.lastBeat !== beat) {
45 |       this.events.emit('beat', tick, beat, bar);
46 |     }
47 |     this.lastBeat = beat;
48 | 
49 |     if (this.lastTick !== tick) {
50 |       this.events.emit('tick', tick, beat, bar);
51 |     }
52 |     this.lastTick = tick;
53 |   };
54 | }
55 | 
56 | export default BeatClock;
57 | 


--------------------------------------------------------------------------------
/src/lib/files.js:
--------------------------------------------------------------------------------
  1 | import { remote } from 'electron';
  2 | import log from 'electron-log';
  3 | import _ from 'lodash';
  4 | import fs from 'fs';
  5 | import path from 'path';
  6 | import JSZip from 'jszip';
  7 | import { saveAs } from 'file-saver';
  8 | 
  9 | let _userDataDirectory = remote.getGlobal('userDataDirectory');
 10 | let _userProjectDirectory = path.join(_userDataDirectory, 'projects');
 11 | 
 12 | try {
 13 |   fs.mkdirSync(_userDataDirectory);
 14 |   fs.mkdirSync(_userProjectDirectory);
 15 |   log.info('Created user data directory');
 16 | } catch(e) {
 17 |   log.info('User directory already exists');
 18 | }
 19 | 
 20 | export const userDataDirectory = _userDataDirectory;
 21 | export const userProjectDirectory = _userProjectDirectory;
 22 | 
 23 | export function getProjectPath (projectId) {
 24 |   return path.join(userProjectDirectory, projectId);
 25 | }
 26 | 
 27 | export function getConfigPath (projectId) {
 28 |   return path.join(getProjectPath(projectId), 'project.json');
 29 | }
 30 | 
 31 | export function readConfig (projectId) {
 32 |   const configPath = getConfigPath(projectId);
 33 |   return JSON.parse(fs.readFileSync(configPath).toString());
 34 | }
 35 | 
 36 | export function persistStorePeriodically (projectId, store) {
 37 |   store.subscribe(_.throttle(() => {
 38 |     const filteredConfig = _.omit(store.getState(), ['scheduler', 'fileLoader', 'controllers']);
 39 |     saveAsProjectConfig(projectId, filteredConfig);
 40 |   }, 5000));
 41 | }
 42 | 
 43 | export function saveAsProjectConfig (projectId, projectConfig) {
 44 |   const configPath = getConfigPath(projectId);
 45 |   const configString = JSON.stringify(projectConfig, null, 2);
 46 |   fs.writeFileSync(configPath, configString);
 47 | }
 48 | 
 49 | export function saveProjectAsZip (projectId) {
 50 |   const projectPath = getProjectPath(projectId);
 51 |   const files = fs.readdirSync(projectPath);
 52 |   const zip = new JSZip();
 53 | 
 54 |   const readFileOperations = files.map((file) =>
 55 |     readFile(path.join(projectPath, file))
 56 |       .then((data) => zip.file(file, data))
 57 |   );
 58 | 
 59 |   Promise
 60 |     .all(readFileOperations)
 61 |     .then(() => zip.generateAsync({ type: 'blob'}))
 62 |     .then((blob) => saveAs(blob, `${projectId}.zip`));
 63 | }
 64 | 
 65 | function readFile (filePath) {
 66 |   return new Promise((resolve, reject) => {
 67 |     fs.readFile(filePath, function(err, data){
 68 |       if (err) {
 69 |         reject(err);
 70 |       } else {
 71 |         resolve(data);
 72 |       }
 73 |     });
 74 |   });
 75 | }
 76 | 
 77 | export function importProjectFromZip (zipPath) {
 78 |   const projectName = zipPath.split(path.sep).pop().replace('.zip', '');
 79 |   let projectPath = getProjectPath(projectName);
 80 |   let counter = 1;
 81 | 
 82 |   // make sure not to overwrite a previous project with the same name
 83 |   while (fs.existsSync(projectPath)) {
 84 |     projectPath = `${getProjectPath(projectName)}-${counter++}`;
 85 |   }
 86 | 
 87 |   fs.mkdirSync(projectPath);
 88 | 
 89 |   const zip = new JSZip();
 90 |   const fileContent = fs.readFileSync(zipPath);
 91 |   return zip.loadAsync(fileContent)
 92 |             .then(() => {
 93 |               const promises = [];
 94 |               zip.forEach((filePath, file) => {
 95 |                 promises.push(
 96 |                   new Promise((resolve) => {
 97 |                     file
 98 |                       .nodeStream()
 99 |                       .pipe(fs.createWriteStream(path.join(projectPath, filePath)))
100 |                       .on('finish', resolve);
101 |                   })
102 |                 );
103 |               });
104 |               return Promise.all(promises);
105 |             });
106 | }
107 | 
108 | export function copyFileToProject (filePath, newFileId, projectId) {
109 |   return readFile(filePath)
110 |            .then((fileData) => new Promise((resolve, reject) => {
111 |              const fileName = filePath.split(path.sep).pop();
112 |              const newFileName = `${newFileId}-${fileName}`;
113 |              const newFilePath = path.join(getProjectPath(projectId), newFileName);
114 |              fs.writeFileSync(newFilePath, fileData);
115 |              resolve({name: fileName, location: newFileName});
116 |            }))
117 | }
118 | 
119 | export function deleteFile (projectId, fileLocation) {
120 |   const filePath = path.join(getProjectPath(projectId), fileLocation);
121 |   fs.unlink(filePath);
122 | }
123 | 


--------------------------------------------------------------------------------
/src/lib/junk.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copied over from https://github.com/sindresorhus/junk/blob/master/index.js
 3 |  * because the uglifyjs we're does not understand arrow functions.
 4 |  * Their licence applies:
 5 |  *
 6 | The MIT License (MIT)
 7 | 
 8 | Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
 9 | 
10 | Permission is hereby granted, free of charge, to any person obtaining a copy
11 | of this software and associated documentation files (the "Software"), to deal
12 | in the Software without restriction, including without limitation the rights
13 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
14 | copies of the Software, and to permit persons to whom the Software is
15 | furnished to do so, subject to the following conditions:
16 | 
17 | The above copyright notice and this permission notice shall be included in
18 | all copies or substantial portions of the Software.
19 | 
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26 | THE SOFTWARE.
27 | 
28 | */
29 | 
30 | // # All
31 | // /^npm-debug\.log$/,           // npm error log
32 | // /^\..*\.swp$/,                // vim state
33 | // // macOS
34 | // /^\.DS_Store$/,               // stores custom folder attributes
35 | // /^\.AppleDouble$/,            // stores additional file resources
36 | // /^\.LSOverride$/,             // contains the absolute path to the app to be used
37 | // /^Icon\r$/,                   // custom Finder icon: http://superuser.com/questions/298785/icon-file-on-os-x-desktop
38 | // /^\._.*/,                     // thumbnail
39 | // /^\.Spotlight-V100(?:$|\/)/,  // directory that might appear on external disk
40 | // /\.Trashes/,                  // file that might appear on external disk
41 | // /^__MACOSX$/,                 // resource fork
42 | // # Linux
43 | // /~$/,                         // backup file
44 | // # Windows
45 | // /^Thumbs\.db$/,               // image file cache
46 | // /^ehthumbs\.db$/,             // folder config file
47 | // /^Desktop\.ini$/              // stores custom folder attributes
48 | 
49 | exports.re = /^npm-debug\.log$|^\..*\.swp$|^\.DS_Store$|^\.AppleDouble$|^\.LSOverride$|^Icon\r$|^\._.*|^\.Spotlight-V100(?:$|\/)|\.Trashes|^__MACOSX$|~$|^Thumbs\.db$|^ehthumbs\.db$|^Desktop\.ini$/;
50 | 
51 | exports.is = filename => exports.re.test(filename);
52 | 
53 | exports.not = filename => !exports.is(filename);
54 | 


--------------------------------------------------------------------------------
/src/lib/loader.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'react-redux';
  3 | import path from 'path';
  4 | import fs from 'fs';
  5 | import log from 'electron-log';
  6 | import audioContext from './audio/context';
  7 | import { fileLoaded } from '../data/file-loader';
  8 | import { getProjectPath } from './files';
  9 | import { isAudio, isVideo } from './regular-expressions';
 10 | 
 11 | const loaderContainerStyle = {
 12 |   position: 'fixed',
 13 |   left: 0,
 14 |   right: 0,
 15 |   bottom: 0
 16 | };
 17 | 
 18 | class Loader extends Component {
 19 |   constructor(props) {
 20 |     super(props);
 21 | 
 22 |     this.state = {};
 23 |   }
 24 | 
 25 |   shouldComponentUpdate(props) {
 26 |     return Object.keys(props.files).length !== Object.keys(this.props.files).length
 27 |         || Object.keys(props.fileLoader).length !== Object.keys(this.props.fileLoader).length
 28 |   }
 29 | 
 30 |   componentDidMount() {
 31 |     const { files } = this.props;
 32 | 
 33 |     Object.keys(files).forEach((fileId) => {
 34 |       this.loadFile(files[fileId], fileId);
 35 |     });
 36 |   }
 37 | 
 38 |   componentWillUpdate(nextProps) {
 39 |     const { files, fileLoader } = this.props;
 40 |     if (nextProps.files !== files) {
 41 |       Object
 42 |         .keys(nextProps.files)
 43 |         .filter((fileId) => {
 44 |           return !fileLoader[fileId];
 45 |         })
 46 |         .forEach((fileId) => {
 47 |           this.loadFile(nextProps.files[fileId], fileId);
 48 |         });
 49 |     }
 50 |   }
 51 | 
 52 |   componentWillReceiveProps(nextProps) {
 53 |     const { files, fileLoader } = nextProps;
 54 |     const totalFiles = Object.keys(files).length;
 55 |     const loadedFiles = Object.keys(fileLoader).length;
 56 |     const progress = loadedFiles / totalFiles;
 57 |     const done = progress === 1;
 58 |     this.setState({
 59 |       progress, done
 60 |     });
 61 |   }
 62 | 
 63 |   render() {
 64 |     const { progress } = this.state;
 65 | 
 66 |     const style = {
 67 |       backgroundColor: '#bada55',
 68 |       height: '5px',
 69 |       opacity: progress === 1 ? 0 : 1,
 70 |       transition: 'width 0.5s ease-in-out, opacity 1s ease-out',
 71 |       width: `${progress * 100}%`
 72 |     }
 73 | 
 74 |     return (
 75 |       <div style={loaderContainerStyle}>
 76 |         <div style={style} />
 77 |       </div>
 78 |     );
 79 |   }
 80 | 
 81 |   loadFile(file, id) {
 82 |     if (isAudio.test(file.location)) {
 83 |       this.loadAudioFile(file, id);
 84 |     } else if (isVideo.test(file.location)) {
 85 |       this.loadVideoFile(file, id);
 86 |     }
 87 |   }
 88 | 
 89 |   loadAudioFile(file, id) {
 90 |     const filePath = path.join(getProjectPath(this.props.projectId), file.location);
 91 |     return new Promise((resolve, reject) => {
 92 |         resolve(fs.readFileSync(filePath));
 93 |       })
 94 |       .then((fileBuffer) => fileBuffer.buffer.slice(fileBuffer.byteOffset, fileBuffer.byteOffset + fileBuffer.byteLength))
 95 |       .then((arrayBuffer) => {
 96 |         return new Promise((resolve, reject) => {
 97 |           audioContext.decodeAudioData(arrayBuffer, resolve, reject);
 98 |         });
 99 |       })
100 |       .then((audioBuffer) => {
101 |         this.props.dispatch(fileLoaded(id, audioBuffer));
102 |       }).catch((error) => {
103 |         log.error('could not load audio file: ' + filePath);
104 |         log.error(error.toString());
105 |       });
106 |   }
107 | 
108 |   loadVideoFile(file, id) {
109 |     const filePath = path.join(getProjectPath(this.props.projectId), file.location);
110 | 
111 |     return new Promise((resolve, reject) => {
112 |       const data = fs.readFileSync(filePath);
113 |       const blob = new Blob([data], {type: 'video/mp4'});
114 |       const videoElement = document.createElement('video');
115 |       videoElement.preload = 'auto';
116 |       videoElement.src = URL.createObjectURL(blob);
117 |       videoElement.load();
118 | 
119 |       // FIXME: should wait for the video::canplaythrough-event (although
120 |       // it probably won't matter using localhost-networking)
121 |       this.props.dispatch(fileLoaded(id, videoElement));
122 |       resolve();
123 |     });
124 |   }
125 | 
126 | }
127 | 
128 | const mapStateToProps = (state) => ({
129 |   files: state.files,
130 |   fileLoader: state.fileLoader
131 | });
132 | 
133 | export default connect(mapStateToProps)(Loader);
134 | 


--------------------------------------------------------------------------------
/src/lib/midi.js:
--------------------------------------------------------------------------------
  1 | import midi from '../vendor/web-midi';
  2 | 
  3 | import {
  4 |   addController,
  5 |   mapControllerToPad,
  6 |   removeController
  7 | } from '../data/controllers';
  8 | 
  9 | import {
 10 |   isPlaying
 11 | } from '../data/scheduler';
 12 | 
 13 | import {
 14 |   setRenderparam
 15 | } from '../data/video-renderer';
 16 | 
 17 | const COLOR_CODES = {
 18 |   OFF: 12,
 19 |   RED: 15,
 20 |   AMBER: 63,
 21 |   YELLOW: 62,
 22 |   GREEN: 60
 23 | };
 24 | 
 25 | class Midi {
 26 |   init(storeObject, clipHandler = () => {}, scheduleRow = () => {}) {
 27 |     this.store = storeObject;
 28 |     this.clipHandler = clipHandler;
 29 |     this.scheduleRow = scheduleRow;
 30 |     this.previousClips = null;
 31 |     this.previouseScheduler = null;
 32 |     this.previousControllers = {};
 33 | 
 34 |     midi.watchPortNames(this.setControllers);
 35 | 
 36 |     storeObject.subscribe(() => {
 37 |       const { clips, scheduler, controllers } = storeObject.getState();
 38 |       if (clips !== this.previousClips
 39 |        || scheduler !== this.previouseScheduler
 40 |        || controllers !== this.previousControllers) {
 41 |         this.previousClips = clips;
 42 |         this.previouseScheduler = scheduler;
 43 |         this.previousControllers = controllers;
 44 |         this.updateControllers();
 45 |       }
 46 |     });
 47 |   }
 48 | 
 49 |   setControllers = (controllers) => {
 50 |     const { store } = this;
 51 |     // remove controllers that were there previously
 52 |     Object.keys(this.previousControllers).forEach((id) => {
 53 |       this.previousControllers[id].controller.close();
 54 |       store.dispatch(removeController(id));
 55 |     });
 56 | 
 57 |     const currentControllers = store.getState().controllers;
 58 |     controllers.forEach((id, index) => {
 59 |       if (!currentControllers[id]) {
 60 |         const controller = midi(id, {});
 61 |         controller.on('data', ([type, key, data]) => {
 62 |           if (id === 'Launch Control') {
 63 |             // knobs
 64 |             if (type === 184 && key > 20 && key < 49) {
 65 |               // const y = Math.floor(key / 20) - 1;
 66 |               const x = (key % 20) - 1;
 67 |               const value = data / 127;
 68 |               switch (x) {
 69 |                 case 0:
 70 |                   return store.dispatch(setRenderparam('pointSize', value * 0.5));
 71 |                 case 1:
 72 |                   return store.dispatch(setRenderparam('luminanceMin', value));
 73 |                 case 2:
 74 |                   return store.dispatch(setRenderparam('luminanceMax', value));
 75 |                 case 3:
 76 |                   return store.dispatch(setRenderparam('r0', value));
 77 |                 default:
 78 |                   return;
 79 |               }
 80 |             }
 81 |           } else {
 82 |             const state = this.store.getState();
 83 |             const down = data > 0;
 84 |             const y = Math.floor(key / 16);
 85 |             const x = key % 16;
 86 |             if (down) {
 87 |               const padId = state.controllers[id].pad;
 88 |               const pad = state.pads[padId];
 89 | 
 90 |               // this controller is not controlling a clip
 91 |               if (!padId || !pad) { return; }
 92 | 
 93 |               if (x < 8 && y < 8) {
 94 |                 const clipId = pad.clips[y][x];
 95 |                 this.clipHandler(clipId, pad, x, y);
 96 |               } else if (type === 176 && (key >= 104 || key <= 111)) {
 97 |                 this.mapControllerToPadIndex(id, key - 104);
 98 |               } else if (type === 144 && (key < 105 || key > 111)) {
 99 |                 this.scheduleRow(pad, y);
100 |               }
101 |             }
102 |           }
103 |         });
104 |         // map controller to matching pad at index if possible
105 |         const padKeys = Object.keys(store.getState().pads);
106 |         const initialPad = index < padKeys.length ? padKeys[index] : padKeys[0];
107 |         store.dispatch(addController(id, controller, initialPad));
108 |       }
109 |     });
110 |   }
111 | 
112 |   mapControllerToPadIndex(controller, padIndex) {
113 |     const { pads } = this.store.getState();
114 |     const padId = Object.keys(pads)[padIndex];
115 |     // `padIndex` could be any index even if no pad assigned to it
116 |     if (padId) {
117 |       this.store.dispatch(mapControllerToPad(controller, padId));
118 |     }
119 |   }
120 | 
121 |   updateControllers = () => {
122 |     const { clips, pads, controllers, scheduler } = this.store.getState();
123 | 
124 |     Object.keys(controllers).forEach((controllerId, index) => {
125 |       const controllerConfig = controllers[controllerId];
126 |       const { controller } = controllerConfig;
127 |       const pad = pads[controllerConfig.pad];
128 | 
129 |       // write the clip status
130 |       for (var y = 0; y < 8; y++) {
131 |         for (var x = 0; x < 8; x++) {
132 |           const key = y * 16 + x;
133 |           if (pad) {
134 |             const padClip = pad.clips[y][x];
135 |             const clip = clips[padClip];
136 | 
137 |             if (clip) {
138 |               const file = isPlaying(scheduler.playing, clip);
139 | 
140 |               if (scheduler.scheduled[padClip]) {
141 |                 controller.write([144, key, COLOR_CODES.YELLOW]);
142 |               } else if(scheduler.toStop[padClip]) {
143 |                 controller.write([144, key, COLOR_CODES.RED]);
144 |               } else if (file && file.clipId === padClip) {
145 |                 controller.write([144, key, COLOR_CODES.AMBER]);
146 |               } else {
147 |                 controller.write([144, key, COLOR_CODES.GREEN]);
148 |               }
149 |             } else {
150 |               controller.write([144, key, COLOR_CODES.OFF]);
151 |             }
152 |           } else {
153 |             controller.write([144, key, COLOR_CODES.OFF]);
154 |           }
155 |         }
156 |       }
157 | 
158 |       // write the pad status
159 |       const padKeys = Object.keys(pads);
160 |       const activePadId = pad && padKeys.indexOf(controllerConfig.pad);
161 |       for (var i = 0; i < 8; i++) {
162 |         controller.write([
163 |           176,
164 |           104 + i,
165 |           activePadId === i ? COLOR_CODES.GREEN : i < padKeys.length ? COLOR_CODES.YELLOW : COLOR_CODES.OFF
166 |         ]);
167 |       }
168 |     });
169 |   }
170 | }
171 | 
172 | const instance = new Midi();
173 | export default instance;
174 | 


--------------------------------------------------------------------------------
/src/lib/regular-expressions.js:
--------------------------------------------------------------------------------
1 | export const isAudio = /(mp3|wav|ogg)/;
2 | export const isVideo = /(mp4|mpg)/;
3 | 


--------------------------------------------------------------------------------
/src/lib/scheduler.js:
--------------------------------------------------------------------------------
  1 | import BeatClock from './beatclock';
  2 | import context from './audio/context';
  3 | import audioGraph from './audio-graph';
  4 | 
  5 | import {
  6 |   addPlaying,
  7 |   addScheduled,
  8 |   scheduleStop,
  9 |   mediaEnded,
 10 |   flushScheduled,
 11 |   playingId,
 12 |   isPlaying
 13 | } from '../data/scheduler';
 14 | 
 15 | import {
 16 |   AUDIO_BEHAVIOR_SINGLE,
 17 |   AUDIO_BEHAVIOR_SCHEDULABLE,
 18 |   CLIP_TYPE_AUDIO_AND_VIDEO,
 19 |   CLIP_TYPE_AUDIO_SAMPLE,
 20 |   CLIP_TYPE_VIDEO
 21 | } from '../data/clips';
 22 | 
 23 | export default {
 24 |   store: null,
 25 |   beatClock: null,
 26 | 
 27 |   init(storeObject) {
 28 |     const { settings: { bpm }} = storeObject.getState();
 29 |     this.store = storeObject;
 30 |     this.beatClock = new BeatClock();
 31 |     this.beatClock.on('bar', this.onBar.bind(this));
 32 |     this.beatClock.setBpm(bpm);
 33 |     this.beatClock.start();
 34 | 
 35 |     this.handleManualSchedule = this.handleManualSchedule.bind(this);
 36 |     this.scheduleRow = this.scheduleRow.bind(this);
 37 | 
 38 |     this.previouseBpm = bpm;
 39 |     this.store.subscribe(() => {
 40 |       const newBpm = storeObject.getState().settings.bpm;
 41 |       if (newBpm !== this.previouseBpm) {
 42 |         this.beatClock.setBpm(newBpm);
 43 |         this.previouseBpm = newBpm;
 44 |       }
 45 |     });
 46 |     document.addEventListener('keydown', (event) => {
 47 |       if (event.key === ' ') {
 48 |         this.handleManualStop();
 49 |       }
 50 |     });
 51 |   },
 52 | 
 53 |   onBar() {
 54 |     const { clips, fileLoader, scheduler: { scheduled, toStop } } = this.store.getState();
 55 | 
 56 |     Object.keys(toStop).forEach((clipId) => {
 57 |       const clip = clips[clipId];
 58 |       this.stopClip(clip);
 59 |     });
 60 | 
 61 |     Object.keys(scheduled).forEach((clipId) => {
 62 |       const clip = clips[clipId];
 63 |       const buffer = fileLoader[clip.file || clip.videoFile];
 64 |       // file has not loaded
 65 |       if (!buffer) { return false; }
 66 | 
 67 |       switch (clip.type) {
 68 |         case CLIP_TYPE_AUDIO_SAMPLE:
 69 |           return this.playAudioNode(clip);
 70 |         case CLIP_TYPE_VIDEO:
 71 |           return this.playVideo(clip);
 72 |         case CLIP_TYPE_AUDIO_AND_VIDEO:
 73 |           this.playAudioNode(clip);
 74 |           this.playVideo(clip);
 75 |           return;
 76 |         default:
 77 |           return;
 78 |       }
 79 |     });
 80 | 
 81 |     this.store.dispatch(flushScheduled());
 82 |   },
 83 | 
 84 |   stopClip(clip) {
 85 |     switch (clip.type) {
 86 |       case CLIP_TYPE_AUDIO_SAMPLE:
 87 |         return this.stopAudioNode(clip);
 88 |       case CLIP_TYPE_VIDEO:
 89 |         return this.stopVideo(clip);
 90 |       case CLIP_TYPE_AUDIO_AND_VIDEO:
 91 |         this.stopVideo(clip);
 92 |         this.stopAudioNode(clip);
 93 |         return;
 94 |       default:
 95 |         return;
 96 |     }
 97 |   },
 98 | 
 99 |   handleManualSchedule(clipId, pad, x, y) {
100 |     if (clipId) {
101 |       this.handleClip(clipId);
102 |     } else {
103 |       // schedule a stop of all clips in the column
104 |       this.stopVerticalClipsFromPosition(undefined, { pad, x }, 'schedule');
105 |     }
106 |   },
107 | 
108 |   handleManualStop() {
109 |     const { clips, scheduler: { scheduled, playing } } = this.store.getState();
110 |     Object.keys(scheduled).forEach((clipId) => this.store.dispatch(scheduleStop(clipId)));
111 |     Object.keys(playing).forEach((playingId) => this.stopClip(clips[playing[playingId].clipId]));
112 |   },
113 | 
114 |   handleClip(clipId) {
115 |     const { clips, scheduler: { scheduled, playing } } = this.store.getState();
116 |     const clip = clips[clipId];
117 |     const { behavior, id, loop } = clip;
118 |     const clipIsPlaying = isPlaying(playing, clip);
119 |     const isScheduled = scheduled[id];
120 | 
121 |     if (clip.type === CLIP_TYPE_AUDIO_SAMPLE) {
122 |       // immediately play / stop the audio node
123 |       if (behavior === AUDIO_BEHAVIOR_SINGLE) {
124 |         if (!clipIsPlaying) {
125 |           this.playAudioNode(clip);
126 |         } else {
127 |           if (loop) {
128 |             this.stopAudioNode(clip);
129 |           } else {
130 |             this.stopAudioNode(clip);
131 |             this.playAudioNode(clip);
132 |           }
133 |         }
134 |       } else if (behavior === AUDIO_BEHAVIOR_SCHEDULABLE) {
135 |         // trigger a play or a stop
136 |         if (clipIsPlaying) {
137 |           this.scheduleStopClip(id);
138 |         } else {
139 |           if (!isScheduled) {
140 |             this.scheduleClip(id);
141 |           }
142 |         }
143 |       }
144 |     } else if (clip.type === CLIP_TYPE_AUDIO_AND_VIDEO
145 |             || clip.type === CLIP_TYPE_VIDEO) {
146 |       // trigger a play or a stop
147 |       if (clipIsPlaying) {
148 |         this.scheduleStopClip(id);
149 |       } else {
150 |         if (!isScheduled) {
151 |           this.scheduleClip(id);
152 |         }
153 |       }
154 |     }
155 |   },
156 | 
157 |   scheduleRow(pad, rowY) {
158 |     const rowClipIds = pad.clips[rowY];
159 |     const { scheduler: { playing } } = this.store.getState();
160 | 
161 |     // remove all scheduled clips
162 |     this.store.dispatch(flushScheduled());
163 | 
164 |     // schedule a stop of all playing clips
165 |     Object
166 |       .keys(playing)
167 |       .forEach((playingFileId) => {
168 |         const { clipId } = playing[playingFileId];
169 |           this.scheduleStopClip(clipId);
170 |         }
171 |       );
172 | 
173 |     if (rowClipIds) {
174 |       rowClipIds.forEach((clipId, x) => {
175 |         this.stopVerticalClipsFromPosition(clipId, { pad, x }, 'schedule');
176 |         if (clipId) {
177 |           this.handleClip(clipId);
178 |         }
179 |       });
180 |     }
181 |   },
182 | 
183 |   scheduleClip(id) {
184 |     this.store.dispatch(addScheduled(id));
185 |   },
186 | 
187 |   scheduleStopClip(id) {
188 |     this.store.dispatch(scheduleStop(id));
189 |   },
190 | 
191 |   playAudioNode(clip = {}) {
192 |     const { file, loop, gain, id, track } = clip;
193 |     const { fileLoader } = this.store.getState();
194 |     const buffer = fileLoader[file];
195 |     const tracks = audioGraph.getTracks();
196 |     const trackNode = tracks[track] || tracks['master'];
197 | 
198 |     // file has not loaded
199 |     if (!buffer) { return false; }
200 | 
201 |     // stop all clips that are on the same vertical axis as this track
202 |     const position = this.getPadPosition(id);
203 |     this.stopVerticalClipsFromPosition(id, position);
204 | 
205 |     const audioNode = context.createBufferSource();
206 |     const gainNode = context.createGain();
207 |     audioNode.buffer = buffer;
208 |     audioNode.loop = loop;
209 |     gainNode.gain.value = gain;
210 |     audioNode.connect(gainNode);
211 |     gainNode.connect(trackNode);
212 |     audioNode.start();
213 |     audioNode.onended = () => this.stopAudioNode(clip);
214 |     this.store.dispatch(addPlaying(file, audioNode, id));
215 |   },
216 | 
217 |   stopAudioNode({ id, file }) {
218 |     const { scheduler: { playing } } = this.store.getState();
219 |     const playingObj = playing[playingId(id, file)]
220 |     const audioNode = playingObj && playingObj.payload
221 |     safeAudioStop(audioNode);
222 |     this.store.dispatch(mediaEnded(file, id));
223 |   },
224 | 
225 |   playVideo(clip) {
226 |     const { videoFile, loop, id } = clip;
227 |     const { fileLoader } = this.store.getState();
228 |     const videoElement = fileLoader[videoFile];
229 |     // TODO: router audio through web audio graph -> const trackNode = tracks[track] || tracks['master'];
230 | 
231 |     // file has not loaded
232 |     if (!videoElement) { return false; }
233 | 
234 |     videoElement.loop = loop;
235 |     videoElement.pause();
236 |     videoElement.play();
237 |     videoElement.onended = () => this.stopVideo(clip);
238 | 
239 |     this.store.dispatch(addPlaying(videoFile, {videoElement}, id));
240 |   },
241 | 
242 |   stopVideo({ videoFile, id }) {
243 |     const { fileLoader } = this.store.getState();
244 |     const videoElement = fileLoader[videoFile];
245 | 
246 |     videoElement.pause();
247 |     videoElement.onended = null;
248 |     videoElement.currentTime = 0;
249 |     this.store.dispatch(mediaEnded(videoFile, id))
250 |   },
251 | 
252 |   getPadPosition(id) {
253 |     const { pads } = this.store.getState();
254 |     let position = null;
255 |     Object.keys(pads).some((padId) =>
256 |       pads[padId].clips.some((row) => {
257 |         const x = row.indexOf(id);
258 |         if (x !== -1) {
259 |           position = {
260 |             pad: pads[padId],
261 |             x
262 |           };
263 |           return true;
264 |         }
265 |         return false;
266 |       })
267 |     );
268 |     return position;
269 |   },
270 | 
271 |   getVerticalClipsFromPosition(position, clipId) {
272 |     if (!position) { return []; }
273 |     return position.pad.clips
274 |       .map((row) =>
275 |         row
276 |           .map((currId, x) => x === position.x && clipId !== currId ? currId : undefined)
277 |           .filter(Boolean)
278 |       )
279 |       .map((rowMatches) => rowMatches.length ? rowMatches[0] : undefined)
280 |       .filter(Boolean);
281 |   },
282 | 
283 |   stopVerticalClipsFromPosition(clipId, position, mode) {
284 |     const { clips, scheduler: { playing } } = this.store.getState();
285 |     const verticalClips = this.getVerticalClipsFromPosition(position, clipId);
286 |     // stop all playing clips from the same vertical position
287 |     Object
288 |       .keys(playing)
289 |       .forEach((playingFileId) => {
290 |         const { clipId } = playing[playingFileId];
291 |         if (verticalClips.indexOf(clipId) !== -1) {
292 |           if (mode === 'schedule') {
293 |             this.scheduleStopClip(clipId);
294 |           } else {
295 |             const clip = clips[clipId];
296 |             this.stopClip(clip);
297 |           }
298 |         }
299 |       });
300 |   }
301 | 
302 | };
303 | 
304 | function safeAudioStop(audioNode) {
305 |   try {
306 |     audioNode.stop();
307 |     audioNode.disconnect();
308 |   } catch(e) {}
309 | }
310 | 


--------------------------------------------------------------------------------
/src/lib/store.js:
--------------------------------------------------------------------------------
 1 | import { /*applyMiddleware,*/ createStore } from 'redux';
 2 | // import createLogger from 'redux-logger';
 3 | import reducer from '../data/reducer';
 4 | 
 5 | export default createStore(
 6 |   reducer,
 7 |   {}
 8 |   // use for debugging
 9 |   // ,applyMiddleware(
10 |   //   createLogger({collapsed: true })
11 |   // )
12 | );


--------------------------------------------------------------------------------
/src/lib/video/dot-matrix-shader.js:
--------------------------------------------------------------------------------
 1 | import {Color} from 'three';
 2 | 
 3 | //language=GLSL
 4 | const vertexShader = `
 5 |   uniform float size;
 6 |   uniform float scale;
 7 |   uniform sampler2D texture;
 8 |   uniform float lumMin;
 9 |   uniform float lumMax;
10 | 
11 |   #include <common>
12 | 
13 |   const vec3 lumaComp = vec3(0.299, 0.587, 0.114);
14 | 
15 |   void main() {
16 |     vec3 color = texture2D(texture, uv).rgb;
17 |     // dot product used to get the sum of components
18 |     float luma = dot(lumaComp * color, vec3(1.0));
19 | 
20 |     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
21 |     float distanceScaling = (scale / -mvPosition.z);
22 | 
23 |     gl_Position = projectionMatrix * mvPosition;
24 |     gl_PointSize = smoothstep(lumMin, lumMax, luma) * size * distanceScaling;
25 |   }
26 | `;
27 | 
28 | //language=GLSL
29 | const fragmentShader = `
30 |   uniform vec3 pointColor;
31 |   uniform float r0;
32 | 
33 |   float circle(vec2 p) {
34 |     return 1.0 - smoothstep(r0, 1.0, length(p));
35 |   }
36 | 
37 |   void main() {
38 |     vec2 p = 2.0 * gl_PointCoord - vec2(1.0, 1.0);
39 |     gl_FragColor = vec4(pointColor, circle(p));
40 |   }
41 | `;
42 | 
43 | export default {
44 |   vertexShader, fragmentShader,
45 |   transparent: true,
46 |   alphaTest: 0.5,
47 |   depthWrite: false,
48 |   uniforms: {
49 |     size: { value: 0.25 },
50 |     scale: { value: 0 },
51 |     texture: { value: null },
52 |     pointColor: {type: 'c', value: new Color()},
53 |     lumMin: {value: 0.0},
54 |     lumMax: {value: 0.0},
55 |     r0: {value: 0.0}
56 |   }
57 | }


--------------------------------------------------------------------------------
/src/lib/video/renderer.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Color,
  3 |   PerspectiveCamera,
  4 |   PlaneBufferGeometry,
  5 |   Points,
  6 |   Scene,
  7 |   ShaderMaterial,
  8 |   Texture,
  9 |   Vector3,
 10 |   WebGLRenderer
 11 | } from 'three';
 12 | 
 13 | import dotMatrixShader from './dot-matrix-shader.js';
 14 | 
 15 | export default class VideoRenderer {
 16 |   constructor() {
 17 |     this.animationLoopRunning = false;
 18 |     this.videos = [];
 19 | 
 20 |     this.resolution = '160x90';
 21 |     this.geometryCache = {};
 22 | 
 23 |     this.initTexture();
 24 |     this.initRenderer();
 25 | 
 26 |     this.animationLoopTick = this.animationLoopTick.bind(this);
 27 |   }
 28 | 
 29 |   setVideos(videos = []) {
 30 |     this.videos = videos;
 31 | 
 32 |     if (this.videos.length === 0) {
 33 |       this.stop();
 34 |     } else {
 35 |       this.start();
 36 |     }
 37 |   }
 38 | 
 39 |   setRenderParams(renderParams) {
 40 |     this.renderer.setClearColor(renderParams.backgroundColor, 1);
 41 |     this.setResolution(renderParams.resolution);
 42 |     this.updateUniforms({
 43 |       pointColor: renderParams.foregroundColor,
 44 |       size: renderParams.pointSize,
 45 |       lumMin: renderParams.luminanceMin,
 46 |       lumMax: renderParams.luminanceMax,
 47 |       r0: renderParams.r0
 48 |     });
 49 |   }
 50 | 
 51 |   getDomElement() {
 52 |     return this.renderer.domElement;
 53 |   }
 54 | 
 55 |   /**
 56 |    * @private
 57 |    */
 58 |   start() {
 59 |     if (this.animationLoopRunning) { return; }
 60 | 
 61 |     this.animationLoopRunning = true;
 62 |     this.nextFrameId = requestAnimationFrame(this.animationLoopTick)
 63 |   }
 64 | 
 65 |   /**
 66 |    * @private
 67 |    */
 68 |   stop() {
 69 |     cancelAnimationFrame(this.nextFrameId);
 70 |     this.animationLoopRunning = false;
 71 |   }
 72 | 
 73 |   /**
 74 |    * @private
 75 |    */
 76 |   animationLoopTick() {
 77 |     const activeVideos = this.videos;
 78 |     const textureCanvas = this.texture.image;
 79 | 
 80 |     const n = activeVideos.length;
 81 |     const ctx = textureCanvas.getContext('2d');
 82 |     const w = textureCanvas.width;
 83 |     const h = textureCanvas.height;
 84 | 
 85 |     if (n === 0) {
 86 |       ctx.clearRect(0, 0, w, h);
 87 |     } else {
 88 |       activeVideos.forEach((video, index) => {
 89 |         const dstSliceWidth = w / n;
 90 | 
 91 |         // FIXME: only use a portion of the source-video to prevent distortion
 92 |         ctx.drawImage(video, index * dstSliceWidth, 0, dstSliceWidth, h);
 93 |       });
 94 |     }
 95 | 
 96 |     this.render();
 97 | 
 98 |     if (this.animationLoopRunning) {
 99 |       this.nextFrameId = requestAnimationFrame(this.animationLoopTick);
100 |     }
101 |   }
102 | 
103 |   /**
104 |    * @private
105 |    */
106 |   render() { /* stub: will be overwritten in initRenderer */ }
107 | 
108 |   /**
109 |    * @private
110 |    */
111 |   updateUniforms(values) {
112 |     const { uniforms } = this.points.material;
113 | 
114 |     Object.keys(values).forEach(name => {
115 |       const uniform = uniforms[name];
116 |       if (!uniform) { return; }
117 | 
118 |       if (uniform.value instanceof Color) {
119 |         uniform.value.set(values[name]);
120 |       } else {
121 |         uniform.value = values[name];
122 |       }
123 |     });
124 |   }
125 | 
126 |   /**
127 |    * @private
128 |    */
129 |   initTexture() {
130 |     const canvas = document.createElement('canvas');
131 | 
132 |     canvas.width = 512;
133 |     canvas.height = 256;
134 | 
135 |     // FIXME: configure texture
136 |     this.texture = new Texture(canvas);
137 |   }
138 | 
139 |   /**
140 |    * @private
141 |    */
142 |   setResolution(resolution) {
143 |     if (resolution === this.resolution) { return; }
144 | 
145 |     this.points.geometry = this.getGeometry(resolution);
146 |     this.resolution = resolution;
147 |   }
148 | 
149 |   /**
150 |    * @private
151 |    */
152 |   getGeometry(resolution) {
153 |     if (this.geometryCache[resolution]) {
154 |       return this.geometryCache[resolution];
155 |     }
156 | 
157 |     const [xRes, yRes] = resolution.split('x');
158 |     const geometry = new PlaneBufferGeometry(16, 9, xRes, yRes);
159 | 
160 |     this.geometryCache[resolution] = geometry;
161 | 
162 |     return geometry;
163 |   }
164 | 
165 |   /**
166 |    * @private
167 |    */
168 |   initRenderer() {
169 |     const renderer = new WebGLRenderer({ alpha: true, antialias: true });
170 |     renderer.setSize(window.innerWidth, window.innerHeight);
171 |     renderer.setClearColor(0xe10079);
172 | 
173 |     const scene = new Scene();
174 |     // FIXME: maybe we should just use an orthographic camera here?
175 |     const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
176 |     camera.position.set(0, 0, 6.3);
177 |     camera.lookAt(new Vector3(0, 0, 0));
178 | 
179 |     const material = new ShaderMaterial(dotMatrixShader);
180 |     material.uniforms.texture.value = this.texture;
181 |     material.uniforms.scale.value = window.innerHeight / 2;
182 | 
183 |     // FIXME: resolution and size might be configurable
184 |     const points = new Points(
185 |         this.getGeometry(this.resolution),
186 |         material);
187 | 
188 |     this.points = points;
189 |     scene.add(points);
190 | 
191 |     // bind events
192 |     window.addEventListener('resize', () => {
193 |       renderer.setSize(window.innerWidth, window.innerHeight);
194 |       camera.aspect = window.innerWidth / window.innerHeight;
195 |       camera.updateProjectionMatrix();
196 |       material.uniforms.scale.value = window.innerHeight / 2;
197 |     });
198 | 
199 |     // finalize
200 |     this.renderer = renderer;
201 |     this.render = () => {
202 |       this.texture.needsUpdate = true;
203 | 
204 |       renderer.render(scene, camera);
205 |     }
206 |   }
207 | }


--------------------------------------------------------------------------------
/src/live-mode.css:
--------------------------------------------------------------------------------
 1 | .liveMode {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   bottom: 0;
 5 |   left: 0;
 6 |   right: 0;
 7 |   z-index: -1;
 8 |   background-color: #000;
 9 |   opacity: 0;
10 |   transition: opacity 0.2s ease-in-out;
11 | }
12 | 
13 | .liveMode.m-visible {
14 |   opacity: 1;
15 |   z-index: 1;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/live-mode.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import VideoPlayer from './video-player.js';
 4 | import VideoControlsGui from './video-controls-gui.js';
 5 | 
 6 | import './live-mode.css';
 7 | 
 8 | class LiveMode extends Component {
 9 |   constructor(props) {
10 |     super(props);
11 | 
12 |     this.state = { visible: false, showVideoControls: false };
13 |   }
14 | 
15 |   componentDidMount() {
16 |     document.addEventListener('keydown', (event) => {
17 |       // switch to LIVE mode when pressing TAB
18 |       if (event.key === 'Tab') {
19 |         event.preventDefault();
20 |         this.setState({ visible: !this.state.visible });
21 |       }
22 | 
23 |       // show video gui by pressing 'v'
24 |       if (event.key === 'v') {
25 |         event.preventDefault();
26 |         this.setState({ showVideoControls: !this.state.showVideoControls });
27 |       }
28 |     });
29 |   }
30 | 
31 |   render() {
32 |     const { visible, showVideoControls } = this.state;
33 |     return (
34 |       <div className={`liveMode ${visible ? 'm-visible' : ''}`}>
35 |         <VideoPlayer />
36 |         {visible && showVideoControls && <VideoControlsGui />}
37 |       </div>
38 |     );
39 |   }
40 | }
41 | 
42 | export default LiveMode;
43 | 


--------------------------------------------------------------------------------
/src/pad/pad-editor.css:
--------------------------------------------------------------------------------
 1 | .padEditor__container {
 2 |   display: flex;
 3 |   flex-direction: row;
 4 |   position: relative;
 5 | }
 6 | 
 7 | .padEditor__clipEditor {
 8 |   margin-left: 10px;
 9 | }
10 | 
11 | .padEdtor__controls {
12 |   visibility: hidden;
13 |   position: absolute;
14 |   left: -111px;
15 |   bottom: 0;
16 |   display: flex;
17 |   flex-direction: column;
18 | }
19 | .padEditor__container:hover .padEdtor__controls {
20 |   visibility: visible;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/pad/pad-editor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { connect } from 'react-redux'
 3 | const { dialog } = require('electron').remote;
 4 | import Pad from './pad';
 5 | import ClipEditor from '../clip/clip-editor';
 6 | import { selectClip, removePad } from '../data/pads';
 7 | 
 8 | import './pad-editor.css';
 9 | 
10 | class PadEditor extends Component {
11 |   shouldComponentUpdate(nextProps) {
12 |     return this.props.pad !== nextProps.pad
13 |         || this.props.clips !== nextProps.clips;
14 |   }
15 | 
16 |   render() {
17 |     const { pad, padId, clips, removePad } = this.props;
18 |     const selectedClip = clips[pad.selectedClipId];
19 |     const hasClipSelected = !!selectedClip;
20 |     return (
21 |       <div className="padEditor__container">
22 |         <div className="padEdtor__controls">
23 |           <button onClick={removePad}>Remove pad</button>
24 |         </div>
25 |         <Pad
26 |           pad={pad}
27 |           clips={clips}
28 |           onClipSelected={this.onClipSelected}
29 |           selectedClipId={pad.selectedClipId}
30 |         />
31 |         <div className="padEditor__clipEditor">
32 |           { hasClipSelected && (
33 |             <ClipEditor clip={selectedClip} padId={padId} />
34 |           )}
35 |         </div>
36 |       </div>
37 |     );
38 |   }
39 | 
40 |   onClipSelected = (selectedClipId) => {
41 |     const isTheSame = selectedClipId === this.props.pad.selectedClipId;
42 | 
43 |     this.props.selectClip(isTheSame ? null : selectedClipId);
44 |   }
45 | }
46 | 
47 | const mapStateToProps = (state, { padId }) => {
48 |   return {
49 |     pad: state.pads[padId],
50 |     clips: state.clips
51 |   };
52 | };
53 | 
54 | const mapDispatchToProps = (dispatch, { padId }) => ({
55 |   selectClip(selectedClipId) {
56 |     dispatch(selectClip(selectedClipId, padId));
57 |   },
58 |   removePad() {
59 |     const result = dialog.showMessageBox({
60 |       message: 'Are you sure you want to remove this pad?',
61 |       title: 'Removing Pad',
62 |       buttons: ['No', 'Yes']
63 |     });
64 |     if (result === 1) {
65 |       dispatch(removePad(padId));
66 |     }
67 |   }
68 | });
69 | 
70 | export default connect(mapStateToProps, mapDispatchToProps)(PadEditor);
71 | 


--------------------------------------------------------------------------------
/src/pad/pad.css:
--------------------------------------------------------------------------------
1 | .pad__row {
2 |   display: flex;
3 |   margin-bottom: 1px;
4 | }
5 | 
6 | .pad__row:last-child {
7 |   margin-bottom: 0;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/pad/pad.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { connect } from 'react-redux'
 3 | import uuid from 'uuid';
 4 | import Clip from '../clip/clip';
 5 | import { createClip } from '../data/clips';
 6 | import { selectClip } from '../data/pads';
 7 | import './pad.css';
 8 | 
 9 | class Pad extends Component {
10 |   shouldComponentUpdate(nextProps) {
11 |     return this.props.pad !== nextProps.pad
12 |         || this.props.selectedClipId !== nextProps.selectedClipId;
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <div className="pad">
18 |         { [...Array(8)].map((_, y) =>
19 |           <div className="pad__row" key={`pad-row-${y}`}>
20 |             { [...Array(8)].map((_, x) => this.renderClip(x, y)) }
21 |           </div>
22 |         )}
23 |       </div>
24 |     );
25 |   }
26 | 
27 |   renderClip(x, y) {
28 |     const { pad, onClipSelected, selectedClipId } = this.props;
29 |     const row = pad.clips[y];
30 |     const clipId = row ? row[x] : undefined;
31 |     const isEmpty = !clipId;
32 |     const key = `pad-clip-${x}-${y}`;
33 |     if (isEmpty) { return <Clip key={key} onClick={() => this.props.createClip(x, y)}/>; }
34 |     return <Clip
35 |             key={key}
36 |             clipId={clipId}
37 |             selected={selectedClipId === clipId}
38 |             onClick={() => onClipSelected(clipId)}
39 |           />
40 |   }
41 | }
42 | 
43 | const mapDispatchToProps = (dispatch, { pad }) => ({
44 |   createClip(x, y) {
45 |     const id = uuid.v4();
46 |     dispatch(createClip(x, y, id, pad.id));
47 |     dispatch(selectClip(id, pad.id));
48 |   }
49 | });
50 | 
51 | export default connect(null, mapDispatchToProps)(Pad);
52 | 


--------------------------------------------------------------------------------
/src/pad/pads.css:
--------------------------------------------------------------------------------
 1 | .pads {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   padding-top: 10px;
 5 | }
 6 | 
 7 | .pads__addPad {
 8 |   position: absolute;
 9 |   right: 50px;
10 |   width: 100px;
11 | }
12 | 
13 | .pads__padContainer {
14 |   margin-bottom: 30px;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/pad/pads.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux'
 3 | import { compose, shouldUpdate } from 'recompose';
 4 | import { createPad } from '../data/pads';
 5 | import PadEditor from './pad-editor';
 6 | 
 7 | import './pads.css';
 8 | 
 9 | const Pads = ({ pads, createPad }) =>
10 |   <div className="pads">
11 |     {Object.keys(pads).map((padId) =>
12 |       <div key={padId} className="pads__padContainer">
13 |         <PadEditor key={padId} padId={padId} />
14 |       </div>
15 |     )}
16 |     <button className="pads__addPad" onClick={createPad}>Add Pad</button>
17 |   </div>
18 | ;
19 | 
20 | export default compose(
21 |   connect(
22 |     (state) => ({ pads: state.pads }),
23 |     (dispatch) => ({ createPad() { dispatch(createPad()); }})
24 |   ),
25 |   shouldUpdate((props, nextProps) => props.pads !== nextProps.pads)
26 | )(Pads);
27 | 


--------------------------------------------------------------------------------
/src/projects.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --width: 70vw
 3 | }
 4 | 
 5 | .projects {
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   justify-content: center;
 9 |   align-items: center;
10 |   height: 100vh;
11 | }
12 | 
13 | .projects__list {
14 |   list-style: none;
15 |   margin: 0;
16 |   padding: 0;
17 |   width: var(--width);
18 |   margin-bottom: 10px;
19 | }
20 | 
21 | .projects__listItem {
22 |   margin-bottom: 5px;
23 | }
24 | 
25 | .projects__link {
26 |   padding: 15px;
27 |   background: #eee;
28 |   display: block;
29 |   text-align: center;
30 |   text-decoration: none;
31 |   transition: background-color 0.2s ease-in-out;
32 |   color: #333;
33 | }
34 | 
35 | .projects__link:hover {
36 |   background: #ddd;
37 | }
38 | 
39 | .projects__actions {
40 |   display: flex;
41 |   justify-content: flex-end;
42 |   width: var(--width);
43 | }
44 | 
45 | .projects__newForm {
46 |   align-self: center;
47 |   flex: 1;
48 | }
49 | 
50 | .projects__button {
51 |   margin-left: 10px;
52 | }
53 | 


--------------------------------------------------------------------------------
/src/projects.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import fs from 'fs';
  3 | import path from 'path';
  4 | import { Link } from 'react-router';
  5 | import log from 'electron-log';
  6 | import { shell } from 'electron';
  7 | import { not } from './lib/junk';
  8 | import { userProjectDirectory, importProjectFromZip } from './lib/files';
  9 | import blankProject from './data/blank_project.json';
 10 | const { dialog } = require('electron').remote;
 11 | 
 12 | import './projects.css'
 13 | 
 14 | export default class Projects extends React.Component {
 15 |   constructor(props) {
 16 |     super(props);
 17 | 
 18 |     this.state = {
 19 |       projects: null,
 20 |       importing: false,
 21 |       showNewForm: false
 22 |     };
 23 |   }
 24 | 
 25 |   componentDidMount() {
 26 |     this.syncDirectories();
 27 |   }
 28 | 
 29 |   render() {
 30 |     const { projects, showNewForm, importing } = this.state;
 31 |     const notReady = !projects;
 32 |     const noProjects = !notReady && projects.length === 0;
 33 |     const hasProjects = !!projects && projects.length > 0;
 34 |     const importButtonLabel = importing ? 'Importing...' : 'Import project';
 35 | 
 36 |     return (
 37 |       <div className="projects">
 38 |         { notReady && (
 39 |           <p>{'Scanning for projects...'}</p>
 40 |         )}
 41 | 
 42 |         { noProjects && (
 43 |           <p>{'No projects yet'}</p>
 44 |         )}
 45 | 
 46 |         { hasProjects && (
 47 |           <ul className="projects__list">
 48 |             { projects.map((projectId, index) =>
 49 |               <li className="projects__listItem" key={index}>
 50 |                 <Link className="projects__link" to={`/project/${projectId}`}>{projectId}</Link>
 51 |               </li>
 52 |             )}
 53 |           </ul>
 54 |         )}
 55 | 
 56 |         <div className="projects__actions">
 57 |           { showNewForm && (
 58 |             <form className="projects__newForm" onSubmit={this.createNewProject}>
 59 |               <input
 60 |                 autoFocus
 61 |                 className="projects__newFormInput"
 62 |                 ref={(input) => this.input = input}
 63 |                 type="text"
 64 |                 placeholder="Enter project name"
 65 |               />
 66 |             </form>
 67 |           )}
 68 | 
 69 |           <button
 70 |             onClick={this.showNewProjectForm}
 71 |             disabled={showNewForm}
 72 |           >
 73 |             New project
 74 |           </button>
 75 |           <button
 76 |             className="projects__button"
 77 |             onClick={this.importProject}
 78 |             disabled={importing}
 79 |           >
 80 |             { importButtonLabel }
 81 |           </button>
 82 |           <button
 83 |             className="projects__button"
 84 |             onClick={this.openProjectsFolder}
 85 |           >
 86 |             Open projects folder
 87 |           </button>
 88 |         </div>
 89 |       </div>
 90 |     );
 91 |   }
 92 | 
 93 |   showNewProjectForm = () => {
 94 |     this.setState({
 95 |       showNewForm: true
 96 |     });
 97 |   }
 98 | 
 99 |   createNewProject = (event) => {
100 |     event.preventDefault();
101 |     const projectName = this.input.value;
102 |     const projectPath = path.join(userProjectDirectory, projectName);
103 |     const projectExists = fs.existsSync(projectPath);
104 | 
105 |     if (projectName && !projectExists) {
106 |       const projectFilePath = path.join(projectPath, 'project.json');
107 |       fs.mkdirSync(projectPath);
108 |       fs.writeFileSync(projectFilePath, JSON.stringify(blankProject, null, 2));
109 |       this.syncDirectories();
110 |       this.setState({
111 |         showNewForm: false
112 |       });
113 |     }
114 |   }
115 | 
116 |   importProject = (event) => {
117 |     event.preventDefault();
118 |     const files = dialog.showOpenDialog({
119 |       properties: ['openFile'],
120 |       filters: [
121 |         { name: 'Zip files', extensions: ['zip'] }
122 |       ]
123 |     });
124 |     if (files) {
125 |       const file = files.pop();
126 |       this.setState({ importing: true });
127 |       importProjectFromZip(file)
128 |         .then(() => this.setState({ importing: false }))
129 |         .then(() => this.syncDirectories());
130 |     }
131 |   }
132 | 
133 |   syncDirectories() {
134 |     fs.readdir(userProjectDirectory, (err, dirs) => {
135 |       if (err) {
136 |         this.createProjectsDirectory();
137 |         this.setState({ projects: [] });
138 |       } else {
139 |         this.setState({ projects: dirs.filter(not) })
140 |       }
141 |     });
142 |   }
143 | 
144 |   createProjectsDirectory() {
145 |     fs.mkdir(userProjectDirectory, (err) => {
146 |       if (err) {
147 |         const message = 'Could not create projects directory: ' + err.toString();
148 |         log.error(message);
149 |         alert(message);
150 |       }
151 |     });
152 |   }
153 | 
154 |   openProjectsFolder = () => {
155 |     shell.openItem(userProjectDirectory);
156 |   }
157 | }
158 | 


--------------------------------------------------------------------------------
/src/settings/settings.css:
--------------------------------------------------------------------------------
1 | .settings {
2 |   padding: 10px;
3 | }
4 | 
5 | .settings__button {
6 |   margin: 10px 0;
7 |   display: block;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/settings/settings.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import _ from 'lodash';
 3 | import { connect } from 'react-redux'
 4 | import { changeSetting } from '../data/settings';
 5 | import { saveProjectAsZip } from '../lib/files';
 6 | const { dialog } = require('electron').remote;
 7 | import '../styles/forms.css';
 8 | import './settings.css';
 9 | 
10 | class Settings extends React.Component {
11 |   render() {
12 |     const { settings } = this.props;
13 | 
14 |     if (_.isEmpty(settings)) { return null; }
15 | 
16 |     return (
17 |       <div className="settings">
18 |         <label className="editorForm__label">
19 |           <span className="editorForm__labelText">BPM:</span>
20 |           <span className="editorForm__row">
21 |             <input type="range" min={20} max={200} step={1} value={settings.bpm} onChange={this.onBpmChanged} />
22 |             <span className="editorForm__value">{ settings.bpm }</span>
23 |           </span>
24 |         </label>
25 | 
26 |         <button onClick={this.exportProject} className="settings__button">
27 |           Export Project
28 |         </button>
29 | 
30 |         <button onClick={this.closeProject} className="settings__button">
31 |           Close Project
32 |         </button>
33 |       </div>
34 |     );
35 |   }
36 | 
37 |   onBpmChanged = (event) => this.props.changeSetting('bpm', parseInt(event.target.value, 10));
38 | 
39 |   exportProject = (event) => {
40 |     event.preventDefault();
41 |     const { params: { project_id } } = this.props;
42 |     saveProjectAsZip(project_id);
43 |   };
44 | 
45 |   closeProject = () => {
46 |     const result = dialog.showMessageBox({
47 |       message: 'Are you shure you want to close the project?',
48 |       title: 'Closing project',
49 |       buttons: ['No', 'Yes']
50 |     });
51 | 
52 |     if (result === 1) {
53 |       location.href = '/'
54 |     }
55 |   }
56 | }
57 | 
58 | 
59 | const mapStateToProps = (state) => ({ settings: state.settings });
60 | const mapDispatchToProps = (dispatch) => ({
61 |   changeSetting(settingId, value){ dispatch(changeSetting(settingId, value)) }
62 | });
63 | 
64 | export default connect(mapStateToProps, mapDispatchToProps)(Settings);
65 | 


--------------------------------------------------------------------------------
/src/styles/forms.css:
--------------------------------------------------------------------------------
 1 | .editorForm {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   margin: 5px 0;
 5 | }
 6 | 
 7 | .editorForm__label {
 8 |   margin: 5px 0;
 9 | }
10 | 
11 | .editorForm__labelText {
12 |   display: block;
13 |   margin-bottom: 4px;
14 | }
15 | 
16 | .editorForm__row {
17 |   display: flex;
18 | }
19 | 
20 | .editorForm__value {
21 |   margin-left: 10px;
22 | }


--------------------------------------------------------------------------------
/src/tracks/track-editor.css:
--------------------------------------------------------------------------------
1 | .trackEditor__name,
2 | .trackEditor__nameInput {
3 |   margin: 10px 0;
4 |   font-size: 18px;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/tracks/track-editor.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { connect } from 'react-redux'
  3 | import {
  4 |   changeTrackGain,
  5 |   changeTrackName,
  6 |   removeTrack
  7 | } from '../data/tracks';
  8 | 
  9 | import './track-editor.css';
 10 | 
 11 | class TrackEditor extends Component {
 12 |   constructor(props) {
 13 |     super(props);
 14 | 
 15 |     this.state = {
 16 |       editingName: false
 17 |     };
 18 |   }
 19 | 
 20 |   shouldComponentUpdate(nextProps, nextState) {
 21 |     return nextProps.track !== this.props.track
 22 |         || nextState.editingName !== this.state.editingName;
 23 |   }
 24 | 
 25 |   render() {
 26 |     const { editingName } = this.state;
 27 |     const { track: { gain, name } } = this.props;
 28 | 
 29 |     return (
 30 |       <div className="trackEditor">
 31 |         { editingName && (
 32 |           <input
 33 |             ref={(input) => this.nameInput = input}
 34 |             type="text"
 35 |             onChange={this.onChangeText}
 36 |             onBlur={this.leaveEditMode}
 37 |             value={name}
 38 |             placeholder="Name the track..."
 39 |             className="trackEditor__nameInput"
 40 |           />
 41 |         )}
 42 | 
 43 |         { !editingName && (
 44 |           <h3
 45 |             onClick={this.enterEditMode}
 46 |             className="trackEditor__name"
 47 |           >{name}</h3>
 48 |         )}
 49 | 
 50 |         <input
 51 |           type="range"
 52 |           min={0}
 53 |           max={1}
 54 |           step={0.01}
 55 |           onChange={this.changeGain}
 56 |           value={gain}
 57 |         />
 58 |         <button onClick={this.removeTrack}>{'remove track'}</button>
 59 |       </div>
 60 | 
 61 |     );
 62 |   }
 63 | 
 64 |   enterEditMode = () => {
 65 |     this.setState({ editingName: true }, () => this.nameInput.focus());
 66 |   }
 67 | 
 68 |   leaveEditMode = () => {
 69 |     this.setState({ editingName: false });
 70 |   }
 71 | 
 72 |   onChangeText = (event) => {
 73 |     this.props.changeTrackName(event.target.value);
 74 |   }
 75 | 
 76 |   changeGain = (event) => {
 77 |     const gain = parseFloat(event.target.value, 10);
 78 |     this.props.changeTrackGain(gain);
 79 |   }
 80 | 
 81 |   removeTrack = () => {
 82 |     const { trackId, clips } = this.props;
 83 | 
 84 |     if (trackId === 'master') {
 85 |       return alert('You cannot remove the master track');
 86 |     }
 87 | 
 88 |     const associatedClip = Object
 89 |                             .keys(clips)
 90 |                             .find((clipId) => clips[clipId].track === trackId);
 91 | 
 92 |     if (associatedClip) {
 93 |       return alert('The track has still clips associated to it');
 94 |     }
 95 | 
 96 |     this.props.removeTrack();
 97 |   }
 98 | }
 99 | 
100 | const mapStateToProps = (state, ownProps) => ({
101 |   track: state.tracks[ownProps.trackId],
102 |   clips: state.clips
103 | });
104 | 
105 | const mapDispatchToProps = (dispatch, ownProps) => ({
106 |   changeTrackName(name) { dispatch(changeTrackName(ownProps.trackId, name)) },
107 |   changeTrackGain(gain) { dispatch(changeTrackGain(ownProps.trackId, gain)) },
108 |   removeTrack() { dispatch(removeTrack(ownProps.trackId)) }
109 | });
110 | 
111 | export default connect(mapStateToProps, mapDispatchToProps)(TrackEditor);
112 | 


--------------------------------------------------------------------------------
/src/tracks/tracks.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { connect } from 'react-redux'
 3 | import { createTrack } from '../data/tracks';
 4 | import TrackEditor from './track-editor';
 5 | 
 6 | class Tracks extends Component {
 7 |   shouldComponentUpdate(nextProps) {
 8 |     return nextProps.tracks !== this.props.tracks;
 9 |   }
10 | 
11 |   render() {
12 |     return (
13 |       <div className="tracks">
14 |         { Object.keys(this.props.tracks).map((trackId) =>
15 |           <TrackEditor key={trackId} trackId={trackId} />
16 |         )}
17 |         <hr />
18 |         <button onClick={this.createTrack}>{'Add new track'}</button>
19 |       </div>
20 |     );
21 |   }
22 | 
23 |   createTrack = () => {
24 |     this.props.createTrack();
25 |   }
26 | }
27 | 
28 | const mapStateToProps = (state) => ({
29 |   tracks: state.tracks
30 | });
31 | 
32 | const mapDispatchToProps = (dispatch, ownProps) => ({
33 |   createTrack() {
34 |     dispatch(createTrack());
35 |   }
36 | });
37 | 
38 | export default connect(mapStateToProps, mapDispatchToProps)(Tracks);
39 | 


--------------------------------------------------------------------------------
/src/vendor/web-midi.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | // Had to embed and transpile web-midi by hand because create-react-app does not
  3 | // transpile "for val of" loops and UglifyJS would not compile it.
  4 | // web-midi is written by the awesome Matt McKegg and can be found at: https://github.com/mmckegg/web-midi
  5 | 'use strict';
  6 | 
  7 | var Stream = require('stream');
  8 | var splitter = /^(.+)\/([0-9]+)$/;
  9 | var midiOpts = { sysex: true };
 10 | 
 11 | module.exports = function (name, opts) {
 12 |   opts = normalizeOpts(name, opts);
 13 | 
 14 |   var stream = new Stream();
 15 |   stream.readable = true;
 16 |   stream.writable = true;
 17 |   stream.paused = false;
 18 | 
 19 |   var queue = [];
 20 | 
 21 |   getInput(opts, function (err, port) {
 22 |     if (err) return stream.emit('error', err);
 23 |     stream.emit('connect');
 24 |     port.onmidimessage = function (event) {
 25 |       var d = event.data;
 26 |       if (opts.normalizeNotes) {
 27 |         d = normalizeNotes(d);
 28 |       }
 29 |       stream.emit('data', [d[0], d[1], d[2]]);
 30 |     };
 31 |     stream.on('end', function () {
 32 |       port.onmidimessage = null;
 33 |     });
 34 |     stream.inputPort = port;
 35 |   });
 36 | 
 37 |   stream.write = function (data) {
 38 |     queue.push(data);
 39 |   };
 40 | 
 41 |   stream.close = function () {
 42 |     stream.emit('close');
 43 |     stream.emit('end');
 44 |     stream.emit('finish');
 45 |     stream.removeAllListeners();
 46 |   };
 47 | 
 48 |   getOutput(opts, function (err, port) {
 49 |     if (err) return stream.emit('error', err);
 50 |     queue.forEach(function (data) {
 51 |       port.send(data);
 52 |     });
 53 |     stream.write = function (data) {
 54 |       port.send(data);
 55 |       stream.emit('send', data);
 56 |     };
 57 |     stream.outputPort = port;
 58 |   });
 59 | 
 60 |   return stream;
 61 | };
 62 | 
 63 | module.exports.openInput = function (name, opts) {
 64 |   opts = normalizeOpts(name, opts);
 65 | 
 66 |   var stream = new Stream();
 67 |   stream.readable = true;
 68 |   stream.paused = false;
 69 | 
 70 |   getInput(opts, function (err, port) {
 71 |     if (err) stream.emit('error', err);
 72 |     stream.emit('connect');
 73 |     port.onmidimessage = function (event) {
 74 |       var d = event.data;
 75 |       if (opts.normalizeNotes) {
 76 |         d = normalizeNotes(d);
 77 |       }
 78 |       stream.emit('data', [d[0], d[1], d[2]]);
 79 |     };
 80 |     stream.on('end', function () {
 81 |       port.onmidimessage = null;
 82 |     });
 83 |     stream.inputPort = port;
 84 |   });
 85 | 
 86 |   stream.close = function () {
 87 |     stream.emit('close');
 88 |     stream.emit('end');
 89 |     stream.emit('finish');
 90 |     stream.removeAllListeners();
 91 |   };
 92 | 
 93 |   return stream;
 94 | };
 95 | 
 96 | module.exports.getPortNames = function (cb) {
 97 |   getMidi(function (err, midi) {
 98 |     if (err) return cb && cb(err);
 99 |     try {
100 |       cb && cb(null, getPortNames(midi));
101 |     } catch (ex) {
102 |       cb && cb(ex);
103 |     }
104 |   });
105 | };
106 | 
107 | module.exports.openOutput = function (name, opts) {
108 |   opts = normalizeOpts(name, opts);
109 | 
110 |   var stream = new Stream();
111 |   stream.writable = true;
112 | 
113 |   var queue = [];
114 | 
115 |   stream.write = function (data) {
116 |     queue.push(data);
117 |   };
118 | 
119 |   stream.close = function () {
120 |     stream.emit('close');
121 |     stream.emit('end');
122 |     stream.emit('finish');
123 |     stream.removeAllListeners();
124 |   };
125 | 
126 |   getOutput(opts, function (err, port) {
127 |     if (err) stream.emit('error', err);
128 |     stream.emit('connect');
129 |     queue.forEach(function (data) {
130 |       port.send(data);
131 |     });
132 |     stream.write = function (data) {
133 |       port.send(data);
134 |       stream.emit('send', data);
135 |     };
136 |     stream.outputPort = port;
137 |   });
138 | 
139 |   return stream;
140 | };
141 | 
142 | module.exports.watchPortNames = function (listener) {
143 |   var midi = null;
144 |   var refreshing = false;
145 | 
146 |   getMidi(function (err, m) {
147 |     if (!err) {
148 |       midi = m;
149 |       midi.addEventListener('statechange', handleEvent);
150 |       listener(getPortNames(midi));
151 |     }
152 |   });
153 | 
154 |   return function unwatch() {
155 |     if (midi) {
156 |       midi.removeEventListener('statechange', handleEvent);
157 |     }
158 |   };
159 | 
160 |   function handleEvent(e) {
161 |     if (!refreshing) {
162 |       refreshing = true;
163 |       setTimeout(function () {
164 |         listener(getPortNames(midi));
165 |         refreshing = false;
166 |       }, 5);
167 |     }
168 |   }
169 | };
170 | 
171 | function getInput(opts, cb) {
172 |   var index = opts.index || 0;
173 |   getMidi(function (err, midi) {
174 |     if (err) return cb && cb(err);
175 |     if (!inputsOf(midi).some(function (input) {
176 |       if (input.name === opts.name || input.id === opts.name) {
177 |         if (index && index > 0) {
178 |           index -= 1;
179 |         } else {
180 |           cb(null, input);
181 |           return true;
182 |         }
183 |       }
184 |     })) {
185 |       cb('No input with specified name "' + opts.name + '"');
186 |     }
187 |   });
188 | }
189 | 
190 | function getOutput(opts, cb) {
191 |   var index = opts.index || 0;
192 |   getMidi(function (err, midi) {
193 |     if (err) return cb && cb(err);
194 |     if (!outputsOf(midi).some(function (output) {
195 |       if (output.name === opts.name || output.id === opts.name) {
196 |         if (index && index > 0) {
197 |           index -= 1;
198 |         } else {
199 |           cb(null, output);
200 |           return true;
201 |         }
202 |       }
203 |     })) {
204 |       cb('No output with specified name');
205 |     }
206 |   });
207 | }
208 | 
209 | function outputsOf(obj) {
210 |   if (typeof obj.outputs === 'function') {
211 |     return obj.outputs();
212 |   } else {
213 |     var result = [];
214 |     if (obj.outputs && typeof obj.outputs.values === 'function') {
215 |       var _iteratorNormalCompletion = true;
216 |       var _didIteratorError = false;
217 |       var _iteratorError = undefined;
218 | 
219 |       try {
220 |         for (var _iterator = obj.outputs.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
221 |           var val = _step.value;
222 | 
223 |           result.push(val);
224 |         }
225 |       } catch (err) {
226 |         _didIteratorError = true;
227 |         _iteratorError = err;
228 |       } finally {
229 |         try {
230 |           if (!_iteratorNormalCompletion && _iterator.return) {
231 |             _iterator.return();
232 |           }
233 |         } finally {
234 |           if (_didIteratorError) {
235 |             throw _iteratorError;
236 |           }
237 |         }
238 |       }
239 |     }
240 |     return result;
241 |   }
242 | }
243 | 
244 | function inputsOf(obj) {
245 |   if (typeof obj.inputs === 'function') {
246 |     return obj.inputs();
247 |   } else {
248 |     var result = [];
249 |     if (obj.inputs && typeof obj.inputs.values === 'function') {
250 |       var _iteratorNormalCompletion2 = true;
251 |       var _didIteratorError2 = false;
252 |       var _iteratorError2 = undefined;
253 | 
254 |       try {
255 |         for (var _iterator2 = obj.inputs.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
256 |           var val = _step2.value;
257 | 
258 |           result.push(val);
259 |         }
260 |       } catch (err) {
261 |         _didIteratorError2 = true;
262 |         _iteratorError2 = err;
263 |       } finally {
264 |         try {
265 |           if (!_iteratorNormalCompletion2 && _iterator2.return) {
266 |             _iterator2.return();
267 |           }
268 |         } finally {
269 |           if (_didIteratorError2) {
270 |             throw _iteratorError2;
271 |           }
272 |         }
273 |       }
274 |     }
275 |     return result;
276 |   }
277 | }
278 | 
279 | var midi = null;
280 | function getMidi(cb) {
281 |   if (midi) {
282 |     process.nextTick(function () {
283 |       cb(null, midi);
284 |     });
285 |   } else if (window.navigator.requestMIDIAccess) {
286 |     window.navigator.requestMIDIAccess(midiOpts).then(function (res) {
287 |       midi = res;
288 |       cb(null, midi);
289 |     }, cb);
290 |   } else {
291 |     process.nextTick(function () {
292 |       cb('Web MIDI API not available');
293 |     });
294 |   }
295 | }
296 | 
297 | function getPortNames(midi) {
298 |   var used = {};
299 |   var names = {};
300 |   inputsOf(midi).forEach(function (input) {
301 |     if (used[input.name]) {
302 |       var i = used[input.name] += 1;
303 |       names[input.name + '/' + i] = true;
304 |     } else {
305 |       used[input.name] = 1;
306 |       names[input.name] = true;
307 |     }
308 |   });
309 |   used = {};
310 |   outputsOf(midi).forEach(function (output) {
311 |     if (used[output.name]) {
312 |       var i = used[output.name] += 1;
313 |       names[output.name + '/' + i] = true;
314 |     } else {
315 |       used[output.name] = 1;
316 |       names[output.name] = true;
317 |     }
318 |   });
319 |   return Object.keys(names);
320 | }
321 | 
322 | function normalizeNotes(data) {
323 |   if (data[0] >= 128 && data[0] < 128 + 16) {
324 |     // convert note off events to 0 velocity note on events
325 |     data = [data[0] + 16, data[1], 0];
326 |   }
327 |   return data;
328 | }
329 | 
330 | function normalizeOpts(name, opts) {
331 |   var result = {
332 |     index: 0,
333 |     name: name,
334 |     normalizeNotes: opts && opts.normalizeNotes
335 |   };
336 | 
337 |   if (typeof opts === 'number') {
338 |     result.index = opts;
339 |   } else if (opts.index != null) {
340 |     result.index = opts.index;
341 |   } else {
342 |     var parts = splitter.exec(name);
343 |     if (parts && parts[2]) {
344 |       result.name = parts[1].trim();
345 |       result.index = parseInt(parts[2], 10) - 1;
346 |     }
347 |   }
348 | 
349 |   return result;
350 | }
351 | 


--------------------------------------------------------------------------------
/src/video-controls-gui.css:
--------------------------------------------------------------------------------
1 | .gui-container {
2 |   position: fixed;
3 |   top: 0;
4 |   right: 0;
5 | }
6 | 
7 | .gui-container .dg .slider {
8 |   width: 60%;
9 | }


--------------------------------------------------------------------------------
/src/video-controls-gui.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {connect} from 'react-redux';
 3 | 
 4 | import {GUI} from 'dat.gui/build/dat.gui.js';
 5 | import {setRenderparam} from './data/video-renderer';
 6 | 
 7 | import './video-controls-gui.css';
 8 | 
 9 | class VideoControlsGui extends Component {
10 |   componentWillUpdate(nextProps) {
11 |     if (!this.gui) { return; }
12 | 
13 |     const {renderParams} = nextProps;
14 |     Object.keys(renderParams).forEach(name => {
15 |       if (renderParams[name] !== this.guiState[name]) {
16 |         this.guiState[name] = renderParams[name];
17 |         this.guiControllers[name].updateDisplay();
18 |       }
19 |     });
20 |   }
21 | 
22 |   componentDidMount() {
23 |     this.gui = new GUI({autoPlace: false});
24 |     this.guiState = Object.assign({}, this.props.renderParams);
25 | 
26 |     this.guiControllers = {
27 |       backgroundColor: this.gui.addColor(this.guiState, 'backgroundColor'),
28 |       foregroundColor: this.gui.addColor(this.guiState, 'foregroundColor'),
29 |       pointSize: this.gui.add(this.guiState, 'pointSize', 0, .5),
30 |       luminanceMin: this.gui.add(this.guiState, 'luminanceMin', 0, 1),
31 |       luminanceMax: this.gui.add(this.guiState, 'luminanceMax', 0, 1),
32 |       r0: this.gui.add(this.guiState, 'r0', 0, 1),
33 |       resolution: this.gui.add(this.guiState, 'resolution', [
34 |         '80x45', '96x54', '160x90', '240x135', '320x180', '640x360'
35 |       ])
36 |     };
37 | 
38 |     Object.keys(this.guiControllers).forEach(name => {
39 |       this.guiControllers[name].onChange(value => {
40 |         this.props.onValueChange(name, value);
41 |       });
42 |     });
43 | 
44 |     this.container.appendChild(this.gui.domElement);
45 |   }
46 | 
47 |   componentWillUnmount() {
48 |     this.gui.domElement.parentNode.removeChild(this.gui.domElement);
49 |     this.gui.destroy();
50 |     this.gui = null;
51 |     this.guiControllers = {};
52 |     this.guiState = {};
53 |   }
54 | 
55 |   render() {
56 |     return (
57 |       <div className="gui-container" ref={el => this.container = el} />
58 |     );
59 |   }
60 | }
61 | 
62 | const mapStateToProps = (state) => ({
63 |   renderParams: state.videoRenderer.renderParams
64 | });
65 | 
66 | const mapDispatchToProps = (dispatch) => ({
67 |   onValueChange: (name, value) => dispatch(setRenderparam(name, value))
68 | });
69 | 
70 | export default connect(mapStateToProps, mapDispatchToProps)(VideoControlsGui)


--------------------------------------------------------------------------------
/src/video-player.css:
--------------------------------------------------------------------------------
 1 | .simpleVideoContainer {
 2 |   position: absolute;
 3 |   top: 0;
 4 |   left: 0;
 5 |   right: 0;
 6 |   bottom: 0;
 7 | }
 8 | 
 9 | .simpleVideoContainer video {
10 |   min-width: 100%;
11 |   min-height: 100%;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/video-player.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { connect } from 'react-redux';
 3 | import VideoRenderer from './lib/video/renderer';
 4 | 
 5 | import './video-player.css';
 6 | 
 7 | class VideoPlayer extends Component {
 8 |   constructor(props) {
 9 |     super(props);
10 | 
11 |     this.videoRenderer = new VideoRenderer();
12 |     this.simpleVideoContainer = document.createElement('div');
13 |     this.simpleVideoContainer.className = 'simpleVideoContainer';
14 |   }
15 | 
16 |   render() {
17 |     return (
18 |       <div ref={ el => this.container = el } className="videoPlayer" />
19 |     );
20 |   }
21 | 
22 |   componentDidMount() {
23 |     this.container.appendChild(this.simpleVideoContainer);
24 |     this.container.appendChild(this.videoRenderer.getDomElement());
25 |   }
26 | 
27 |   componentWillUpdate({ renderParams, videos, singleVideo }) {
28 |     this.videoRenderer.setRenderParams(renderParams);
29 |     this.videoRenderer.setVideos(videos);
30 | 
31 |     if (singleVideo && singleVideo !== this.props.singleVideo) {
32 |       this.simpleVideoContainer.innerHTML = '';
33 |       this.simpleVideoContainer.appendChild(singleVideo);
34 |     }
35 | 
36 |     if (!singleVideo) {
37 |       this.simpleVideoContainer.innerHTML = '';
38 |     }
39 |   }
40 | 
41 |   componentWillUnmount() {
42 |     this.videoRenderer.stop();
43 |     const domEl = this.videoRenderer.getDomElement();
44 |     domEl.parentNode.removeChild(domEl);
45 |   }
46 | }
47 | 
48 | const mapStateToProps = (state, ownProps) => {
49 |   const { scheduler, clips, videoRenderer } = state;
50 |   const playingFileIds = Object.keys(scheduler.playing);
51 | 
52 |   const videos = playingFileIds
53 |     .map((fileId) => {
54 |       const clip = clips[scheduler.playing[fileId].clipId];
55 |       if (clip && !clip.noFilter) {
56 |         return scheduler.playing[fileId].payload.videoElement
57 |       }
58 |       return undefined;
59 |     })
60 |     .filter(Boolean);
61 | 
62 |   const singleVideo = playingFileIds
63 |     .map((fileId) => {
64 |       const clip = clips[scheduler.playing[fileId].clipId];
65 |       if (clip && clip.noFilter) {
66 |         return scheduler.playing[fileId].payload.videoElement
67 |       }
68 |       return undefined;
69 |     })
70 |     .filter(Boolean)
71 |     .pop();
72 | 
73 |   const renderParams = videoRenderer.renderParams;
74 | 
75 |   return { videos, singleVideo, renderParams: { ...ownProps, ...renderParams } };
76 | };
77 | 
78 | export default connect(mapStateToProps, null)(VideoPlayer);


--------------------------------------------------------------------------------