Done
Seto Elkahfi committed
Jan 22, 2022 at 19:12 UTC
ac9483cbd990242d839a3064e0e770d2062282ec
5 files changed
+121
-55
package.json
+1
-1
@@ -19,7 +19,7 @@
19
"react-icons": "^4.3.1",
20
"react-intl": "^2.9.0",
21
"react-rotating-text": "^1.4.1",
22
- "react-router-dom": "^4.3.1",
22
+ "react-router-dom": "^5.3.0",
23
"react-scripts": "^4.0.0",
24
"react-youtube": "^7.14.0",
25
"typescript": "^3.9.10"
src/components/AudioPlayer.tsx
+73
-21
@@ -1,7 +1,9 @@
1
+/* eslint-disable no-script-url */
2
+/* eslint-disable jsx-a11y/anchor-is-valid */
3
import axios from 'axios';
4
import React from 'react';
5
import { Component } from 'react';
4
-import { Container } from 'react-bootstrap';
6
+import { Col, Row } from 'react-bootstrap';
7
import YouTube, { Options } from 'react-youtube';
8
import { GiMicrophone, GiDrumKit, GiGuitarHead, GiGuitarBassHead, GiPianoKeys } from 'react-icons/gi';
9
import { IconContext } from 'react-icons';
@@ -25,6 +27,11 @@ type AudioState = {
27
audioFile: AudioFile | null,
28
isPlayerReady: boolean,
29
isPlaying: boolean
30
+ vocalAudioOn: boolean
31
+ guitarAudioOn: boolean
32
+ bassAudioOn: boolean
33
+ drumsAudioOn: boolean
34
+ pianoAudioOn: boolean
35
}
36
37
export enum Mode {
@@ -44,13 +51,19 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
51
this.state = {
52
audioFile: null,
53
isPlayerReady: false,
47
- isPlaying: false
54
+ isPlaying: false,
55
+ vocalAudioOn: true,
56
+ guitarAudioOn: true,
57
+ bassAudioOn: true,
58
+ drumsAudioOn: true,
59
+ pianoAudioOn: true,
60
}
61
}
62
63
componentDidMount() {
64
axios.get(`/splitfire/${this.props.audioFileId}`)
65
.then(res => {
66
+ console.log("Get results", res);
67
const audioFile = res.data.audio_file;
68
this.setState({ audioFile });
69
console.log(this.state);
@@ -66,7 +79,7 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
79
this._prepareAudio(Mode.keyboardist);
80
}
81
69
- _downloadFile(type: Mode) {
82
+ async _downloadFile(type: Mode) {
83
console.log('_downloadFile', type);
84
let audioFile: Result | undefined;
85
switch (type) {
@@ -83,10 +96,12 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
96
audioFile = this.state.audioFile?.results.find(obj => { return obj.filename.startsWith('other') });
97
break;
98
case Mode.keyboardist:
99
+ audioFile = this.state.audioFile?.results.find(obj => { return obj.filename.startsWith('piano') });
100
break;
101
}
102
103
const audioFileId = this.props.audioFileId;
104
+ console.log("Download url", audioFile?.source_file);
105
axios({
106
url: audioFile?.source_file,
107
method: 'GET',
@@ -99,10 +114,12 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
114
db.audioFiles.add(item);
115
console.log('File Downloaded', file);
116
this._setAudioSrc(type, file);
117
+ }).catch(error => {
118
+ console.log(error);
119
});
120
}
121
105
- _prepareAudio(type: Mode) {
122
+ async _prepareAudio(type: Mode) {
123
const audioFileId = this.props.audioFileId;
124
db.audioFiles
125
.get({ audioFileId: audioFileId, type: type })
@@ -113,6 +130,9 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
130
}
131
this._setAudioSrc(type, record.file)
132
})
133
+ .catch(onrejected => {
134
+ console.log("Rejected", onrejected);
135
+ });
136
}
137
138
_setAudioSrc(type: Mode, file: Blob) {
@@ -149,31 +169,41 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
169
}
170
171
pauseAudio() {
152
-
172
+ this.vocalAudio.pause();
173
+ this.guitarAudio.pause();
174
+ this.bassAudio.pause();
175
+ this.guitarAudio.pause();
176
+ this.drumsAudio.pause();
177
}
178
155
- setMode(mode: Mode) {
179
+ setToggleInstrument(mode: Mode) {
180
switch (mode) {
181
case Mode.vocalist:
158
- this.vocalAudio.volume = 0;
182
+ this.setState({vocalAudioOn: !this.state.vocalAudioOn});
183
+ this.vocalAudio.volume = this.state.vocalAudioOn ? 1 : 0;
184
break;
185
case Mode.bassist:
161
- this.bassAudio.volume = 0;
186
+ this.setState({bassAudioOn: !this.state.bassAudioOn});
187
+ this.bassAudio.volume = this.state.bassAudioOn ? 1 : 0;;
188
break;
189
case Mode.guitarist:
164
- this.guitarAudio.volume = 0;
190
+ this.setState({guitarAudioOn: !this.state.guitarAudioOn});
191
+ this.guitarAudio.volume = this.state.guitarAudioOn ? 1 : 0;;
192
break;
193
case Mode.keyboardist:
167
- this.pianoAudio.volume = 0;
194
+ this.setState({pianoAudioOn: !this.state.pianoAudioOn});
195
+ this.pianoAudio.volume = this.state.pianoAudioOn ? 1 : 0;;
196
break;
197
case Mode.drummer:
170
- this.drumsAudio.volume = 0;
198
+ this.setState({drumsAudioOn: !this.state.drumsAudioOn});
199
+ this.drumsAudio.volume = this.state.drumsAudioOn ? 1 : 0;;
200
break;
201
}
202
}
203
204
render() {
205
const opts: Options = {
206
+ width: '100%',
207
playerVars: {
208
// https://developers.google.com/youtube/player_parameters
209
autoplay: 0,
@@ -198,16 +228,38 @@ class AudioPlayer extends Component<AudioProps, AudioState> {
228
229
return (
230
<IconContext.Provider value={{ size: "2em", color: "white", className: "global-class-name" }}>
201
- <Container>
202
- <GiMicrophone onClick={() => this.setMode(Mode.vocalist)} />
203
- <GiDrumKit onClick={() => this.setMode(Mode.drummer)} />
204
- <GiGuitarBassHead onClick={() => this.setMode(Mode.bassist)} />
205
- <GiGuitarHead onClick={() => this.setMode(Mode.guitarist)} />
206
- <GiPianoKeys onClick={() => this.setMode(Mode.keyboardist)} />
207
- </Container>
208
- <Container>
209
- {youtubeContent}
210
- </Container>
231
+ <Row className="mb-3 mt-3">
232
+ <Col>
233
+ <a href='javascript:void(0)' onClick={() => this.setToggleInstrument(Mode.vocalist)} >
234
+ <GiMicrophone color={this.state.vocalAudioOn ? `white` : `red`} />
235
+ </a>
236
+ </Col>
237
+ <Col>
238
+ <a href='javascript:void(0)' onClick={() => this.setToggleInstrument(Mode.drummer)} >
239
+ <GiDrumKit color={this.state.drumsAudioOn ? `white` : `red`} />
240
+ </a>
241
+ </Col>
242
+ <Col>
243
+ <a href='javascript:void(0)' onClick={() => this.setToggleInstrument(Mode.bassist)} >
244
+ <GiGuitarBassHead color={this.state.bassAudioOn ? `white` : `red`} />
245
+ </a>
246
+ </Col>
247
+ <Col>
248
+ <a href='javascript:void(0)' onClick={() => this.setToggleInstrument(Mode.guitarist)} >
249
+ <GiGuitarHead color={this.state.guitarAudioOn ? `white` : `red`} />
250
+ </a>
251
+ </Col>
252
+ <Col>
253
+ <a href='javascript:void(0)' onClick={() => this.setToggleInstrument(Mode.keyboardist)} >
254
+ <GiPianoKeys color={this.state.pianoAudioOn ? `white` : `red`} />
255
+ </a>
256
+ </Col>
257
+ </Row>
258
+ <Row>
259
+ <Col>
260
+ {youtubeContent}
261
+ </Col>
262
+ </Row>
263
</IconContext.Provider>
264
)
265
}
src/components/Header.tsx
+9
-2
@@ -27,14 +27,21 @@ class Header extends Component<HeaderProps, HeaderState> {
27
<div className={`collapse bg-dark ${this.state.expand ? 'show' : ''}`} id="navbarHeader">
28
<div className="container">
29
<div className="row">
30
- <div className="col-sm-8 col-md-7 py-4">
30
+ <div className="col-sm-6 col-md-6 py-4">
31
<h4 className="text-white">
32
<FormattedMessage id="about.title"
33
defaultMessage="About"
34
description="About page title" /></h4>
35
<p className="text-muted">We buy things we don't need, with money we don't have, to impress people we don't like.</p>
36
</div>
37
- <div className="col-sm-4 offset-md-1 py-4">
37
+ <div className="col-sm-2 offset-md-1 py-4">
38
+ <h4 className="text-white">Fun projects</h4>
39
+ <ul className="list-unstyled">
40
+ <li><a className="text-white" href="https://musik88.com/" title="Musik88" target="_blank" rel="noopener noreferrer">Musik88</a></li>
41
+ <li><a className="text-white" href="https://splitfire.ai/" title="SplitFire AI" target="_blank" rel="noopener noreferrer">SplitFire AI</a></li>
42
+ </ul>
43
+ </div>
44
+ <div className="col-sm-2 py-4">
45
<h4 className="text-white">Contact</h4>
46
<ul className="list-unstyled">
47
<li><a className="text-white" href="https://stackoverflow.com/users/1137814/seto" title="StackOverflow" target="_blank" rel="noopener noreferrer">StackOverflow</a></li>
src/components/Home.tsx
+1
-1
@@ -116,7 +116,7 @@ class Home extends Component<HomeProps, HomeState> {
116
<ReactRotatingText style={this.state.wordStyle} items={this.state.alterEgos} /></p>
117
<h2>SplitFire AI</h2>
118
<Carousel>
119
- {files.map(item => (
119
+ {files.slice(0, 3).map(item => (
120
<Carousel.Item key={item.id} style={{padding: '20px'}}>
121
<img
122
className="d-block w-100"
yarn.lock
+37
-30
@@ -1033,7 +1033,7 @@
1033
core-js-pure "^3.20.2"
1034
regenerator-runtime "^0.13.4"
1035
1036
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
1036
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
1037
version "7.16.7"
1038
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
1039
integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
@@ -5885,7 +5885,7 @@ hex-color-regex@^1.1.0:
5885
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
5886
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
5887
5888
-history@^4.7.2:
5888
+history@^4.9.0:
5889
version "4.10.1"
5890
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
5891
integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
@@ -5906,12 +5906,7 @@ hmac-drbg@^1.0.1:
5906
minimalistic-assert "^1.0.0"
5907
minimalistic-crypto-utils "^1.0.1"
5908
5909
-hoist-non-react-statics@^2.5.0:
5910
- version "2.5.5"
5911
- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
5912
- integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
5913
-
5914
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
5909
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
5910
version "3.3.2"
5911
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
5912
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7738,6 +7733,14 @@ mimic-fn@^2.1.0:
7733
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
7734
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
7735
7736
+mini-create-react-context@^0.4.0:
7737
+ version "0.4.1"
7738
+ resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
7739
+ integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
7740
+ dependencies:
7741
+ "@babel/runtime" "^7.12.1"
7742
+ tiny-warning "^1.0.3"
7743
+
7744
mini-css-extract-plugin@0.11.3:
7745
version "0.11.3"
7746
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -9388,7 +9391,7 @@ prop-types@15.7.2:
9391
object-assign "^4.1.1"
9392
react-is "^16.8.1"
9393
9391
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
9394
+prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
9395
version "15.8.1"
9396
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
9397
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9677,7 +9680,7 @@ react-intl@^2.9.0:
9680
intl-relativeformat "^2.1.0"
9681
invariant "^2.1.1"
9682
9680
-react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
9683
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
9684
version "16.13.1"
9685
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
9686
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9706,30 +9709,34 @@ react-rotating-text@^1.4.1:
9709
lodash.toarray "^4.4.0"
9710
prop-types "^15.5.10"
9711
9709
-react-router-dom@^4.3.1:
9710
- version "4.3.1"
9711
- resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
9712
- integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==
9712
+react-router-dom@^5.3.1:
9713
+ version "5.3.0"
9714
+ resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
9715
+ integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
9716
dependencies:
9714
- history "^4.7.2"
9715
- invariant "^2.2.4"
9717
+ "@babel/runtime" "^7.12.13"
9718
+ history "^4.9.0"
9719
loose-envify "^1.3.1"
9717
- prop-types "^15.6.1"
9718
- react-router "^4.3.1"
9719
- warning "^4.0.1"
9720
+ prop-types "^15.6.2"
9721
+ react-router "5.2.1"
9722
+ tiny-invariant "^1.0.2"
9723
+ tiny-warning "^1.0.0"
9724
9721
-react-router@^4.3.1:
9722
- version "4.3.1"
9723
- resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
9724
- integrity sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==
9725
+react-router@5.2.1:
9726
+ version "5.2.1"
9727
+ resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
9728
+ integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
9729
dependencies:
9726
- history "^4.7.2"
9727
- hoist-non-react-statics "^2.5.0"
9728
- invariant "^2.2.4"
9730
+ "@babel/runtime" "^7.12.13"
9731
+ history "^4.9.0"
9732
+ hoist-non-react-statics "^3.1.0"
9733
loose-envify "^1.3.1"
9734
+ mini-create-react-context "^0.4.0"
9735
path-to-regexp "^1.7.0"
9731
- prop-types "^15.6.1"
9732
- warning "^4.0.1"
9736
+ prop-types "^15.6.2"
9737
+ react-is "^16.6.0"
9738
+ tiny-invariant "^1.0.2"
9739
+ tiny-warning "^1.0.0"
9740
9741
react-scripts@^4.0.0:
9742
version "4.0.3"
@@ -11158,7 +11165,7 @@ tiny-invariant@^1.0.2:
11165
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
11166
integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
11167
11161
-tiny-warning@^1.0.0:
11168
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
11169
version "1.0.3"
11170
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
11171
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -11631,7 +11638,7 @@ walker@^1.0.7, walker@~1.0.5:
11638
dependencies:
11639
makeerror "1.0.12"
11640
11634
-warning@^4.0.0, warning@^4.0.1, warning@^4.0.3:
11641
+warning@^4.0.0, warning@^4.0.3:
11642
version "4.0.3"
11643
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
11644
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==