Skip to content

Feedback! #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jagreene wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Feedback! #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 21 additions & 20 deletions client/actions/workspace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 =>{
Expand Down Expand Up @@ -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};
});
});
});
Expand All @@ -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();
Expand Down
8 changes: 4 additions & 4 deletions client/components/AudioBlock/AudioBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// Styling
// Styling
import styles from './AudioBlock.scss'

// Others
Expand Down Expand Up @@ -89,7 +89,7 @@ class AudioBlock extends Component {
this.props.ee.emit('setCursor', e.pageX - UIConstants.LEFT - 2);
}
}
}
}

render() {
const row = this.props.row;
Expand Down Expand Up @@ -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),
};
Expand Down
2 changes: 2 additions & 0 deletions client/constants/ActionTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 3 additions & 1 deletion client/containers/TrackBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 (
<Card key={row.rowId}>
Expand All @@ -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}
/>
</Card>
Expand Down
2 changes: 2 additions & 0 deletions client/containers/Workspace.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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) => {
Expand Down
13 changes: 7 additions & 6 deletions client/reducers/workspace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
}
};
Expand Down
3 changes: 2 additions & 1 deletion routes/workspace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand Down
7 changes: 4 additions & 3 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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);
Expand Down
13 changes: 7 additions & 6 deletions sockets/sockets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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}},
Expand Down Expand Up @@ -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,
Expand Down