diff --git a/client/actions/workspace.js b/client/actions/workspace.js index 62d0e4d..1213472 100644 --- a/client/actions/workspace.js +++ b/client/actions/workspace.js @@ -19,29 +19,30 @@ export const newWorkspace = createAction(types.LOAD_WORKSPACE, (audioCtx)=>{ return Promise.all(data.workspace.rows.map((row) => { return fetch(row.rawAudio); })) + // I think you only need one layer of nesting here not three, like: .then((files) => { return Promise.all(files.map((file) => { return file.arrayBuffer(); })) - .then((arrayBuffers) => { - return Promise.all(arrayBuffers.map((arrayBuffer) => { - return audioCtx.decodeAudioData(arrayBuffer); - })) - .then((buffers) => { - let rows = {} - let len; - - data.workspace.rows.map((row, i) => { - row.rawAudio = buffers[i]; - rows[Number(i)] = row; - len = i; - return row; - }); - - rows.length = len+1; - return {id: data.workspace.id, rows: rows}; - }); + }) + .then((arrayBuffers) => { + return Promise.all(arrayBuffers.map((arrayBuffer) => { + return audioCtx.decodeAudioData(arrayBuffer); + })) + }) + .then((buffers) => { + let rows = {} + let len; + + data.workspace.rows.map((row, i) => { + row.rawAudio = buffers[i]; + rows[Number(i)] = row; + len = i; + return row; }); + + rows.length = len+1; + return {id: data.workspace.id, rows: rows}; }); }) .catch(err =>{ @@ -86,7 +87,7 @@ export const loadWorkspace = createAction(types.LOAD_WORKSPACE, (workspaceId, au }); rows.length = len+1; - return {id: data.workspace.id, rows: rows}; + return {id: data.workspace.id, rows: rows}; }); }); }); @@ -101,7 +102,7 @@ export const setWorkspaceWidth = createAction(types.SET_WORKSPACE_WIDTH, (width) }); export const addRow = createAction(types.ADD_ROW, (addOperation, audioCtx) => { - + return fetch(addOperation.newRow.rawAudio) .then((file) => { return file.arrayBuffer(); diff --git a/client/components/AudioBlock/AudioBlock.jsx b/client/components/AudioBlock/AudioBlock.jsx index 9d362d6..75fbfe2 100644 --- a/client/components/AudioBlock/AudioBlock.jsx +++ b/client/components/AudioBlock/AudioBlock.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; -// Styling +// Styling import styles from './AudioBlock.scss' // Others @@ -89,7 +89,7 @@ class AudioBlock extends Component { this.props.ee.emit('setCursor', e.pageX - UIConstants.LEFT - 2); } } - } + } render() { const row = this.props.row; @@ -123,8 +123,8 @@ class AudioBlock extends Component { // Sets cursor image depending on tool mode const audioBlockStyle = { - 'cursor': 'auto', - 'width': this.props.width, + 'cursor': 'auto', + 'width': this.props.width, 'height': UIConstants.ROW_HEIGHT+4, 'marginTop': (row.rowId === 0 ? 12 : 4), }; diff --git a/client/constants/ActionTypes.js b/client/constants/ActionTypes.js index d7db8d6..b582aab 100644 --- a/client/constants/ActionTypes.js +++ b/client/constants/ActionTypes.js @@ -1,3 +1,5 @@ +// I'm not sold on having action types be variables declared else where that always have the same name as their value +// it seems redundent and maybe a bit churlish // User actions export const ADD_USER = 'ADD_USER'; export const REMOVE_USER = 'REMOVE_USER'; diff --git a/client/containers/TrackBox.jsx b/client/containers/TrackBox.jsx index ceda2b9..bccf9f5 100644 --- a/client/containers/TrackBox.jsx +++ b/client/containers/TrackBox.jsx @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { playingMode, toolMode, UIConstants } from '../../utils.js'; -// Styling +// Styling import styles from './Containers.scss'; // Material @@ -20,6 +20,7 @@ class TrackBox extends Component{ render() { let rows; if (this.props.workspace.rows) { + //why Array,prototype.map instead of this.props.workspace.rows.map()? rows = Array.prototype.map.call(this.props.workspace.rows, (row) => { return ( @@ -30,6 +31,7 @@ class TrackBox extends Component{ toolMode={this.props.workspace.toolMode} playing={this.props.workspace.playing} width={this.props.workspace.width} + //what is ee? ee={this.props.ee} /> diff --git a/client/containers/Workspace.jsx b/client/containers/Workspace.jsx index f5bf9fd..c487510 100644 --- a/client/containers/Workspace.jsx +++ b/client/containers/Workspace.jsx @@ -182,6 +182,7 @@ class Workspace extends Component { this.emitRemoveBlocks = this.emitRemoveBlocks.bind(this); this.emitSpliceBlocks = this.emitSpliceBlocks.bind(this); + // How do ^ work if dispatch is defined down here? // Client side events let dispatch = this.props.dispatch; this.setToolMode = (mode) => dispatch(workspaceActions.setToolMode(mode)); @@ -198,6 +199,7 @@ class Workspace extends Component { let dispatch = this.props.dispatch; + // what is patrick doing here? this.socket.emit('connectWorkspace', 'patrick', this.props.workspace.id); window.addEventListener('keydown', (e) => { diff --git a/client/reducers/workspace.js b/client/reducers/workspace.js index e494895..45b4a2f 100644 --- a/client/reducers/workspace.js +++ b/client/reducers/workspace.js @@ -19,13 +19,14 @@ export default handleActions({ return {...state, allowRowDelete: action.payload}; }, + // I think a more careful design of your api and state structures could have made your reducers a lot simpler HIGHLIGHT_BLOCK: (state, action) => { let blocks = state.rows[action.payload.rowIndex].audioBlocks; blocks[action.payload.blockIndex].selected = !blocks[action.payload.blockIndex].selected; return { - ...state, + ...state, rows: { - ...state.rows, + ...state.rows, [action.payload.rowIndex]: { ...state.rows[action.payload.rowIndex], audioBlocks: blocks, @@ -76,14 +77,14 @@ export default handleActions({ SET_SPEED: (state, action) => { return {...state, timing: {...state.timing, speed: action.payload}}; }, - + ADD_ROW: (state, action) => { let oldLength = state.rows.length; return { - ...state, + ...state, rows: { - ...state.rows, - [action.payload.rowId]: action.payload, + ...state.rows, + [action.payload.rowId]: action.payload, length: oldLength+1 } }; diff --git a/routes/workspace.js b/routes/workspace.js index 120e157..fae6daa 100644 --- a/routes/workspace.js +++ b/routes/workspace.js @@ -3,6 +3,7 @@ var sockets = require('../sockets/sockets'); var Workspace = require('../models/workspace'); var defaultWorkspace = require('../models/defaultWorkspace'); +// might look into using timestamp as seed for your prng function generateUUID() { var d = new Date().getTime(); var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) { @@ -14,7 +15,7 @@ function generateUUID() { }; router.post('/create', function(req, res, next) { - // Compute real hash for new workspace + // Compute real hash for new workspace var hash = generateUUID(); var newWorkspace = defaultWorkspace; newWorkspace.id = hash; diff --git a/server.js b/server.js index 950101b..82a923b 100644 --- a/server.js +++ b/server.js @@ -26,6 +26,7 @@ app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended:false})); app.use(cookieParser()); +// tap events? Does this work on mobile? injectTapEventPlugin(); // Set up webpack for development environment @@ -35,7 +36,7 @@ if(isDev) { console.log("In Development Mode"); const compiler = webpack(config); - app.use(webpackMiddleware(compiler, + app.use(webpackMiddleware(compiler, { stats: { colors: true, @@ -52,8 +53,8 @@ if(isDev) { })); } -app.use(express.static(path.join(__dirname, '/public'))); -app.use(express.static(path.join(__dirname, '/static'))); +app.use(express.static(path.join(__dirname, '/public'))); +app.use(express.static(path.join(__dirname, '/static'))); // Routes app.use('/api/workspace/', workspace); diff --git a/sockets/sockets.js b/sockets/sockets.js index 7d45a1f..7f7c162 100644 --- a/sockets/sockets.js +++ b/sockets/sockets.js @@ -67,7 +67,7 @@ var socketObject = { var newRows = workspace.rows; // Find correct row to update - var updateRow = workspace.rows.filter(function (row){ + var updateRow = workspace.rows.filter(function (row){ return row._id == spliceOperation.rowId; })[0]; @@ -117,8 +117,8 @@ var socketObject = { var newRows = workspace.rows; // Find correct row to update - var updateRow = workspace.rows.filter(function (row){ - return row._id == splitOperation.rowId + var updateRow = workspace.rows.filter(function (row){ + return row._id == splitOperation.rowId })[0]; var leftBlock, index, newBlocks; @@ -180,8 +180,8 @@ var socketObject = { var newRows = workspace.rows; // Find correct row to update - var updateRow = workspace.rows.filter(function (row){ - return row._id == flagOperation.rowId; + var updateRow = workspace.rows.filter(function (row){ + return row._id == flagOperation.rowId; })[0]; // Find correct audioBlock to update @@ -194,6 +194,7 @@ var socketObject = { newRows[updateRow.rowId] = updateRow; + // nice use of advanced parts of the mongoose api Workspace.findByIdAndUpdate( workspace._id, {$set: {rows: newRows}}, @@ -250,7 +251,7 @@ var socketObject = { {$safe: true, upsert: false, new: true}, function(err, newWorkspace) { if (err) return console.error(err); - + // Emit socket event to notify all clients to update state io.sockets.in(socket.workspaceId).emit('applyMoveBlock', { rowId: updateRow.rowId,