Skip to content
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

Web ui fixes + integrate wavesurfer #10

Merged
merged 3 commits into from
Nov 13, 2016
Merged

Web ui fixes + integrate wavesurfer #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
832fa43
tweaks and parse song duration
bekher Nov 12, 2016
129be8e
add wavesurfer js, clean ui slightly, need to wavesurf output song next
bekher Nov 13, 2016
a7e13da
fix routing for static files
bekher Nov 13, 2016
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
34 changes: 26 additions & 8 deletions assets/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,44 @@
import React from 'react';
import { Link } from 'react-router';

var css = {
navbar: {
background: "#7A6CBB"
},
a: {
"font-size": "16px",
color: "#fff",
"text-shadow": "none",
},
brand: {
"font-size": "22px",
color: "#fff",
"text-shadow": "none",
}
}
export default class Header extends React.Component {
render() {
return (
<nav className="uk-navbar uk-margin-large-bottom" >
<a className="uk-navbar-brand">Synesthesia</a>
<nav className="uk-navbar uk-margin uk-container" style={css.navbar} >

<ul className="uk-navbar-nav">
<li>
<a href="/app/#/">Home</a>
<li><a className="uk-navbar-brand" style={css.brand}>Synesthesia</a>
</li>
<li>
<a href="/app/#/upload">Upload</a>
<li className="">
<a className="" style={css.a} href="/app/#/"> Home </a>
</li>
<li className="">
<a className="" href="/app/#/upload/" style={css.a}>Upload</a>
</li>
<li>
<a href="/app/#/browse">Browse</a>
<a className="" href="/app/#/browse" style={css.a}>Browse</a>
</li>
</ul>
<div className="uk-navbar-flip">
<ul className="uk-navbar-nav">
<li>
<a href="/#/login">Login</a>
<a href="https://github.com/bekher/synesthesia-web/" style={css.a}>
<i className="uk-icon-github uk-icon-small"></i>&nbsp; Github</a>
</li>
</ul>
</div>
Expand Down
8 changes: 7 additions & 1 deletion assets/components/IndexPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { Link } from 'react-router';
import React, { PropTypes } from 'react';


var css = {
text : {
color: "#FFF7FF",
}
}
export default class IndexPage extends React.Component {
render() {
return (
<div className="uk-grid">
<div className="uk-grid" style={css.text}>
<div className="uk-width-1-1 uk-row-first">

<div className="uk-heading-large">Welcome to Synesthesia</div>
Expand Down
15 changes: 15 additions & 0 deletions assets/components/Loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';

export default class Loading extends React.Component {
render() {
return (
<div>
<div className="loading-container">
<div className="loading"></div>
<div id="loading-text">loading</div>
</div>

</div>
);
}
}
2 changes: 1 addition & 1 deletion assets/components/MainPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default class is extends React.Component {
render() {
return (
<DocumentTitle title='Synesthesia'>
<div className='MainPage'>
<div className='MainPage' >
<div className='uk-container uk-container-center uk-margin-top uk-margin-large-bottom'>
<Header />
{ this.props.children }
Expand Down
9 changes: 4 additions & 5 deletions assets/components/UploadPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,12 @@ export default class UploadPage extends React.Component {

allcomplete: function(response) {

bar.css("width", "100%").text("100%, processing... please wait");

bar.css("width", "100%").css("color", "#fff").text("100%, processing... please wait");

setTimeout(function(){
progressbar.addClass("uk-hidden");
window.location.replace("/#/browse");
}, 2500);

}
};

Expand All @@ -49,13 +48,13 @@ export default class UploadPage extends React.Component {

render() {
return (
<div className="uk-grid">
<div id="upload-drop" className="uk-grid" style={ {height: "1000 px"}}>
<div className="uk-width-1-1 uk-row-first">
<p> Upload mp3</p>
<form className="uk-form">
<input type="text" />
<p></p>
<div id="upload-drop" className="uk-placeholder">
<div className="uk-placeholder">
<h4>Drag an audio file here</h4><a className="uk-form-file"><br/><br/><input id="upload-select" type="file" /></a>
</div>
<div id="progressbar" className="uk-progress uk-hidden">
Expand Down
170 changes: 111 additions & 59 deletions assets/components/ViewOnePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import React from 'react';
// constants
import Events from '../constants/SocketEvents'

// deps
import Wavesurfer from 'react-wavesurfer'

import Loading from './Loading'

var css = {
stickyplace: {
height: '270px',
Expand All @@ -17,31 +22,68 @@ var css = {
'max-width': '100%',
height: 'auto',
width: 'auto'
},
wave: {
width: '600px',
}

};

export default class ViewOnPage extends React.Component {

populate() {
socket.emit(Events.getOneSong, this.props.params.id);

}

constructor() {
super();
var _this = this;

this.state = {
song : null
song : null,
playing: false,
playicon: "uk-icon-play"
};

socket.on(Events.getOneSong, function(resp) {
console.log(resp.data);
var song = resp.data || null;

_this.setState({
song : song
});

});

this.playButtonPressed = this.playButtonPressed.bind(this);

}

componentDidUpdate(prevProps, prevState) {
if (this.state.song != null && prevState.song == null) {
var song = this.state.song;

this.wavesurfer = WaveSurfer.create({
container: '#wave',
waveColor: 'violet',
progressColor: '#93499B',
//scrollParent: true,
fillParent: true,
//minPxPerSec: 1.5,
autoCenter: true,
barWidth: 1.5,
cursorWidth: 2,
cursorColor: "#9B6880"
});

this.wavesurfer.load('/inputs/audio/'+song.filename);
}
if (this.state.playing != prevState.playing) {
this.wavesurfer.playPause();
if (this.state.playing) {
this.setState({playicon : "uk-icon-pause"});
} else {
this.setState({playicon : "uk-icon-play"});
}
}
}

componentDidMount() {
Expand All @@ -53,66 +95,76 @@ export default class ViewOnPage extends React.Component {
//ViewStore.unlisten(this._onchange);
}

playButtonPressed() {
this.setState({playing: !this.state.playing});
}

render() {
return (
<div className="uk-grid">
{ this.state.song ?
<div>
<h2>Song info: {this.state.song.title}</h2>
<h3>Artist: {this.state.song.artist}</h3>
<h3>Album: {this.state.song.album}</h3>
<div className='uk-width-medium-3-4 uk-row-first'>
<p>Transform: {this.state.song.transform}</p>
<p>Duration: {this.state.song.length}</p>
<p>Format: {this.state.song.format}</p>
</div>
<div className="uk-width-medium-1-4">
<p>Original:</p>
<audio controls>
<source src={'/inputs/audio/'+this.state.song.filename} type="audio/mpeg" />
You browser does not support audio...
</audio>

{ this.state.song.completed ?
<div>
<p>Output image:</p>
<img src={'/outputs/images/'+this.state.song.filename+'.png'} style = {css.image}/>
<p>Transformed audio (This may take a while):</p>
<audio controls>
<source src={'/outputs/audio/'+this.state.song.filename + '.mp3'} type="audio/mpeg" />
You browser does not support audio...
</audio>
</div>
:
<div className="uk-sticky-placeholder" style={css.stickyplace}>
<div className='uk-panel uk-panel-box uk-active' style={css.sidepanel} data-uk-sticky="top{:35}">
<ul className="uk-nav uk-side-nav">
<li className="uk-nav-header">Apply a trnasform</li>
<li><a href={'/transform/'+this.state.song.filename+'/metallic'} >Metallic</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/reverse'} >Reverse</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/shuffle'} >Shuffle</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/decay'} >Decay</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/speed'} >Speed</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/extend'} >Extend</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/pitch'} >Pitch</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/redshift'} >Red Shift</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/blueshift'} >Blue Shift</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/greenshift'} >Green Shift</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/dream'} >Google Deep Dream</a></li>
</ul>
</div>
</div>
}
</div>
<a href='/app/#/browse'>Back to browse</a>
<div>
{ this.state.song ?
<div>
<h1>{this.state.song.title}</h1>
<h3>{this.state.song.artist} | {this.state.song.album} | {this.state.song.length+" "}
| {this.state.song.format} </h3>


<div className="uk-grid">

{ this.state.song.completed ?
<div>
<Loading />
<p>Output image:</p>
<img src={'/outputs/images/'+this.state.song.filename+'.png'} style = {css.image}/>
<p>Transformed audio (This may take a while):</p>
<p>Transform: {this.state.song.transform}</p>
<audio controls>
<source src={'/outputs/audio/'+this.state.song.filename + '.mp3'} type="audio/mpeg" />
You browser does not support audio...
</audio>
</div>
:
<div className="uk-sticky-placeholder" style={css.stickyplace}>
<div className='uk-panel uk-panel-box uk-active' style={css.sidepanel} data-uk-sticky="top{:35}">
<ul className="uk-nav uk-side-nav">
<li className="uk-nav-header">Apply a trnasform</li>
<li><a href={'/transform/'+this.state.song.filename+'/metallic'} >Metallic</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/reverse'} >Reverse</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/shuffle'} >Shuffle</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/decay'} >Decay</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/speed'} >Speed</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/extend'} >Extend</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/pitch'} >Pitch</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/redshift'} >Red Shift</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/blueshift'} >Blue Shift</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/greenshift'} >Green Shift</a></li>
<li><a href={'/transform/'+this.state.song.filename+'/dream'} >Google Deep Dream</a></li>
</ul>
</div>
</div>
}

<div className='uk-width-1-3'>
<br />
<h2>Original </h2>
<div id="wave" style={css.wave}>
<button onClick={this.playButtonPressed} className="button button--sacnite button--round-l button--inverted">
<i className={"button__icon "+this.state.playicon}></i><span>Play</span></button>
<div className="progress progress-striped active" id="progress-bar">
<div className="progress-bar progress-bar-info"></div>
</div>
</div>
<a href='/app/#/browse'>Back to browse</a>
</div>
</div>
</div>
: <div>
<h2> Song not found :(</h2>
<a href="/app/#/browse">Try browsing for songs that exist </a>
<h2> Song not found 😞</h2>
<a href="/app/#/browse">Try browsing for songs that exist </a>
</div>

}
}
</div>
);
}
);
}
}
Loading