/
Application.jsx
124 lines (105 loc) · 3.58 KB
/
Application.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
var React = require('react');
var ApplicationActions = require('actions/ApplicationActions');
var Router = require('react-router');
var {
Route,
Redirect,
DefaultRoute,
NotFoundRoute,
RouteHandler
} = Router;
var LyricsRoute = require('components/LyricsRoute');
var TimingRoute = require('components/TimingRoute');
var CalibrationRoute = require('components/CalibrationRoute');
var RapRoute = require('components/RapRoute');
require('bootstrap/dist/css/bootstrap.css');
require('styles/styles.less');
var Application = React.createClass({
mixins : [ Router.Navigation ],
componentDidMount : function() {
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
},
_goHome : function() {
this.transitionTo('app');
window.location.reload();
},
_redirect : function(savedSongId) {
this.transitionTo('savedSong', { savedSongId });
window.location.reload();
},
render : function() {
return (
<div className="page-wrapper">
<header className="clearfix">
<h1>Rapping Browser</h1>
<div><a href="https://github.com/davidchang/html5-rap-synthesis">Code</a></div>
<div>
<a
style={{ cursor : 'pointer', marginBottom : '10' }}
onClick={ApplicationActions.saveIntoLocalStorage}>
Save Current Data into Local Storage
</a>
</div>
<h4>Pre-Recorded Songs:</h4>
<ul>
<li>
<a style={{ cursor : 'pointer' }} onClick={() => this._redirect('-JjYb7jLwlD4YjZJPZK3')}>
Lose Yourself
</a>
</li>
<li>
<a style={{ cursor : 'pointer' }} onClick={() => this._redirect('-JjYUI4SH0rotsJYAmsR')}>
Fresh Prince of Bel-Air
</a>
</li>
<li>
<a style={{ cursor : 'pointer' }} onClick={() => this._redirect('-JjYRritv6qLfqN3o2V-')}>
La Biblioteca (from Community)
</a>
</li>
</ul>
Or <a style={{ cursor : 'pointer' }} onClick={this._goHome}>
make your own recording
</a>
</header>
<div className="player-container">
<div id="player"></div>
</div>
<RouteHandler />
</div>
);
}
});
var SavedSongApplication = React.createClass({
mixins : [Router.State],
componentDidMount : function() {
ApplicationActions.loadSavedSong(this.getParams().savedSongId);
},
render : function() {
return <RouteHandler />;
}
});
var routes = (
<Route name="app" path="/" handler={Application}>
<Route name="lyrics" handler={LyricsRoute} />
<Route name="timing" handler={TimingRoute} />
<Route name="calibration" handler={CalibrationRoute} />
<Route name="rap" handler={RapRoute} />
<Route name="savedSong" path=":savedSongId" handler={SavedSongApplication}>
<Route name="savedSongLyrics" handler={LyricsRoute} />
<Route name="savedSongTiming" handler={TimingRoute} />
<Route name="savedSongCalibration" handler={CalibrationRoute} />
<Route name="savedSongRap" handler={RapRoute} />
<Redirect from="" to="savedSongRap" />
<DefaultRoute handler={RapRoute} />
</Route>
<Redirect from="" to="lyrics" />
<NotFoundRoute handler={LyricsRoute} />
</Route>
);
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('mountNode'));
});