Added partial README. Interesting color scheme. Better
Draggables.
This commit is contained in:
empathicqubit
parent
a316772064
commit
178af5c9a4
8 changed files with 69 additions and 62 deletions
11
README.md
Normal file
11
README.md
Normal file
|
|
@ -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
|
||||
---------------------------
|
||||
|
||||
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@ class Admin extends React.Component {
|
|||
)}
|
||||
</ul>
|
||||
</li>
|
||||
) : <li><h2><strong>No clients connected! Open up another browser to the homepage and click the Client link.</strong></h2></li>}
|
||||
) : <li><h2><strong>No clients connected! Open up another browser to the homepage and click the Client link, or create virtual clients in the Simulator.</strong></h2></li>}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<h1>
|
||||
Simulator
|
||||
</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<button onClick={ () => this.props.onNewMixerNode() }>
|
||||
Create new client
|
||||
</button>
|
||||
|
|
@ -25,12 +31,17 @@ class Simulator extends React.Component {
|
|||
Submit
|
||||
</button>
|
||||
</div> : null}
|
||||
<div className="grid">
|
||||
<div className="head" style={{ top: this.props.listenerY, left: this.props.listenerX }} onMouseMove={this.props.onMouseMove} onMouseUp={this.props.onMouseUp} onMouseDown={this.props.onMouseDown} />
|
||||
<h2>Virtual Room</h2>
|
||||
<div className="room">
|
||||
<Draggable position={{ x: this.props.listenerX, y: this.props.listenerY }} onDrag={this.props.onDrag}>
|
||||
<div className="listener" />
|
||||
</Draggable>
|
||||
{this.props.clients.map(client =>
|
||||
<div key={client.clientId} onMouseOut={client.onMouseMove} onMouseMove={client.onMouseMove} onMouseDown={client.onMouseDown} onMouseUp={client.onMouseUp} className="speaker" style={{ top: client.y , left: client.x }}>
|
||||
{client.name || client.clientId}
|
||||
</div>
|
||||
<Draggable position={{ x: client.x, y: client.y }} key={client.clientId} onDrag={client.onDrag}>
|
||||
<div className="speaker">
|
||||
{client.name || client.clientId}
|
||||
</div>
|
||||
</Draggable>
|
||||
)}
|
||||
</div>
|
||||
<div className="clients">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue