From 178af5c9a4eb523ee1976fa5f7c5f22d74512882 Mon Sep 17 00:00:00 2001 From: empathicqubit Date: Sat, 26 May 2018 17:07:42 -0400 Subject: [PATCH] Added partial README. Interesting color scheme. Better Draggables. --- README.md | 11 ++++++++ frontend/package.json | 1 + frontend/src/admin.js | 2 +- frontend/src/index.css | 13 +++++++--- frontend/src/index.js | 52 ++++++-------------------------------- frontend/src/simulator.css | 20 ++++++++------- frontend/src/simulator.js | 21 +++++++++++---- frontend/yarn.lock | 11 ++++++++ 8 files changed, 69 insertions(+), 62 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..b7582fa --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +web-audio-stream-sync +===================== + +Takes multiple OGG files, and allows remotely playing them with different pan and gain settings on different clients. + + + +Prerequisites +--------------------------- + + diff --git a/frontend/package.json b/frontend/package.json index 2b785fb..51aba4b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,7 @@ "react": "^16.3.2", "react-canvas-knob": "^0.5.0", "react-dom": "^16.3.2", + "react-draggable": "^3.0.5", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "react-scripts": "1.1.4", diff --git a/frontend/src/admin.js b/frontend/src/admin.js index c790ad1..f7872e9 100644 --- a/frontend/src/admin.js +++ b/frontend/src/admin.js @@ -223,7 +223,7 @@ class Admin extends React.Component { )} - ) :

  • No clients connected! Open up another browser to the homepage and click the Client link.

    • } + ) :

  • No clients connected! Open up another browser to the homepage and click the Client link, or create virtual clients in the Simulator.

    • } ) diff --git a/frontend/src/index.css b/frontend/src/index.css index d5d7d14..f475615 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,9 +5,14 @@ } body { - margin: 0; - padding: 1em; - font-family: sans-serif; + margin: 0; + padding: 1em; + font-family: sans-serif; + background-color: #FCC5A2; +} + +body, button { + color: #00173D; } input[type="range"] { @@ -20,5 +25,7 @@ button { height: 75px; margin: .5em; border-radius: .5em; + background-color: #F0957D; + border-color: #F17A6B; } diff --git a/frontend/src/index.js b/frontend/src/index.js index 7cb3397..be5fdd2 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -83,10 +83,6 @@ const getProps = () => { let context = new AudioContext(); const createClient = () => { - let clickedX = 0; - let clickedY = 0; - let down = false; - let mixerNode = null; let options = { @@ -145,23 +141,9 @@ const getProps = () => { clientId: 0, x: 0, y: 0, - onMouseDown: (evt) => { - down = true; - clickedX = evt.clientX; - clickedY = evt.clientY; - }, - onMouseUp: () => { - down = false; - }, - onMouseMove: (evt) => { - if(down) { - updateX(client.x + evt.clientX - clickedX); - updateY(client.y + evt.clientY - clickedY); - - clickedX = evt.clientX; - clickedY = evt.clientY; - } - + onDrag: (evt, data) => { + updateX(data.x); + updateY(data.y); render(); }, onChangeName: (name) => { @@ -197,37 +179,19 @@ const getProps = () => { context.listener.positionZ.value = 250 - newY; } - let clickedX = 0; - let clickedY = 0; - let down = false; - let simulator = { clients: clients, passwordSubmitted: false, password: '', listenerX: 250, listenerY: 250, - onNewMixerNode: () => { - clients.push(createClient()); + onDrag: (evt, data) => { + updateX(data.x); + updateY(data.y); render(); }, - onMouseDown: (evt) => { - down = true; - clickedX = evt.clientX; - clickedY = evt.clientY; - }, - onMouseUp: () => { - down = false; - }, - onMouseMove: (evt) => { - if(down) { - updateX(simulator.listenerX + evt.clientX - clickedX); - updateY(simulator.listenerY + evt.clientY - clickedY); - - clickedX = evt.clientX; - clickedY = evt.clientY; - } - + onNewMixerNode: () => { + clients.push(createClient()); render(); }, onSubmitPassword: (password) => doHello(password), diff --git a/frontend/src/simulator.css b/frontend/src/simulator.css index 60a9133..d6b2769 100644 --- a/frontend/src/simulator.css +++ b/frontend/src/simulator.css @@ -1,10 +1,11 @@ -.grid { +.room { position: relative; width: 500px; height: 500px; - background-color: #bbb; + background-color: #023756; border-radius: 1em; - z-index: -2; + border: 2px solid #00173D; + z-index: 0; } .speaker::before { @@ -30,27 +31,28 @@ border-radius: 3em; vertical-align: bottom; text-align: center; + z-index: 2; } -.head::before { +.listener::before { content: ""; mask-image: url('../node_modules/material-design-icons/av/svg/design/ic_hearing_24px.svg'); mask-repeat: none; mask-size: contain; - background-color: #fb9; + background-color: #F17A6B; width: 100%; height: 100%; top: 0; left: 0; position: absolute; + z-index: -1; } -.head { +.listener { position: absolute; - top: 250px; - left: 250px; width: 3em; height: 3em; - background-color: #f00; + background-color: #A2F9FC; border-radius: 1.5em; + z-index: 2; } diff --git a/frontend/src/simulator.js b/frontend/src/simulator.js index 15c96eb..f61835a 100644 --- a/frontend/src/simulator.js +++ b/frontend/src/simulator.js @@ -1,6 +1,7 @@ import BufferClient from './buffer-client.js'; import BufferClientBackend from './buffer-client-backend.js'; import React from 'react'; +import Draggable from 'react-draggable'; import './simulator.css'; import 'material-design-icons/sprites/svg-sprite/svg-sprite-hardware.css'; @@ -15,6 +16,11 @@ class Simulator extends React.Component {

    Simulator

    +

    + Add virtual clients here, and go to the admin page to control them. Moving them around + the room will allow you to change how they would sound to the listener (you). The listener's + location is represented by the ear icon, and can also be moved around the room. +

    @@ -25,12 +31,17 @@ class Simulator extends React.Component { Submit : null} -
    -
    +

    Virtual Room

    +
    + +
    + {this.props.clients.map(client => -
    - {client.name || client.clientId} -
    + +
    + {client.name || client.clientId} +
    +     )}
    diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 0b997c7..459801f 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1425,6 +1425,10 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" + clean-css@4.1.x: version "4.1.11" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" @@ -5591,6 +5595,13 @@ react-dom@^16.3.2: object-assign "^4.1.1" prop-types "^15.6.0" +react-draggable@^3.0.5: + version "3.0.5" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.0.5.tgz#c031e0ed4313531f9409d6cd84c8ebcec0ddfe2d" + dependencies: + classnames "^2.2.5" + prop-types "^15.6.0" + react-error-overlay@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"