Skip to content

Commit 4e15d25

Browse files
gnzandrsgnzandrs
committed
add controls components SVG
1 parent c881f9f commit 4e15d25

File tree

9 files changed

+647
-10044
lines changed

9 files changed

+647
-10044
lines changed

‎public/assets/js/bundle.js

Lines changed: 397 additions & 10035 deletions
Large diffs are not rendered by default.

‎public/assets/spotireact.css

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,125 @@
55
.search {
66
text-align: center;
77
}
8+
9+
.loading {
10+
width: 100%;
11+
text-align: center;
12+
padding-top: 20px;
13+
}
14+
15+
.tracks {
16+
margin-top: 30px;
17+
display: flex;
18+
justify-content: space-around;
19+
flex-wrap: wrap;
20+
box-sizing: border-box;
21+
width: 100%;
22+
height: 430px;
23+
overflow-y: scroll;
24+
overflow-x: hidden;
25+
}
26+
27+
.track {
28+
width: 216px;
29+
height: 198px;
30+
background-size: cover;
31+
position: relative;
32+
margin-bottom: 20px;
33+
overflow: hidden;
34+
}
35+
36+
.track-info {
37+
width: 100%;
38+
position: absolute;
39+
bottom: 30px;
40+
text-align: center;
41+
color: #fff;
42+
z-index: 7;
43+
}
44+
45+
.track-info h4 {
46+
font-weight: normal;
47+
margin: 0 0 5px 0;
48+
}
49+
50+
.track-info svg {
51+
cursor: pointer;
52+
}
53+
54+
.track > span {
55+
background: linear-gradient(0deg, black, 70%, transparent);
56+
height: 130px;
57+
position: absolute;
58+
left: 0;
59+
bottom: 0;
60+
right: 0;
61+
z-index: 5;
62+
}
63+
64+
/* Waves animation */
65+
66+
.waves {
67+
background: #fff;
68+
position: relative;
69+
transform: translate(68px, 195px);
70+
z-index: 7;
71+
}
72+
.waves span {
73+
animation: audio-wave 1.5s infinite ease-in-out;
74+
background: #00D64E;
75+
/* position */
76+
bottom: calc(50% - 0.313em);
77+
position: absolute;
78+
/* box model */
79+
display: block;
80+
height: 0.313em;
81+
width: 0.563em;
82+
}
83+
.waves span:nth-child(1) {
84+
left: 0em;
85+
animation-delay: 0s;
86+
}
87+
.waves span:nth-child(2) {
88+
left: 0.688em;
89+
animation-delay: 0.2s;
90+
}
91+
.waves span:nth-child(3) {
92+
left: 1.376em;
93+
animation-delay: 0.4s;
94+
}
95+
.waves span:nth-child(4) {
96+
left: 2.064em;
97+
animation-delay: 0.6s;
98+
}
99+
.waves span:nth-child(5) {
100+
left: 2.752em;
101+
animation-delay: 0.8s;
102+
}
103+
.waves span:nth-child(6) {
104+
left: 3.44em;
105+
animation-delay: 1s;
106+
}
107+
.waves span:nth-child(7) {
108+
left: 4.128em;
109+
animation-delay: 1.2s;
110+
}
111+
112+
@keyframes audio-wave {
113+
0% {
114+
height: 0.313em;
115+
transform: translateY(0px);
116+
}
117+
25% {
118+
height: 2.500em;
119+
transform: translateY(1.25em);
120+
}
121+
50% {
122+
height: 0.313em;
123+
transform: translateY(0px);
124+
}
125+
100% {
126+
height: 0.313em;
127+
transform: translateY(0px);
128+
}
129+
}

‎src/App.js

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ class App extends React.Component {
1919
}
2020

2121
this.searchTracks = this.searchTracks.bind(this)
22+
this.playTrack = this.playTrack.bind(this)
23+
this.pauseTrack = this.pauseTrack.bind(this)
2224
}
2325

2426
async searchTracks ({target}) {
@@ -31,20 +33,45 @@ class App extends React.Component {
3133
}
3234
}
3335

34-
playTrack () {
36+
playTrack ({target}, preview, trackId) {
37+
if (this.audio) {
38+
if (trackId === this.state.trackPlaying) {
39+
this.audio.play()
40+
return this.setState({trackPaused: true})
41+
}
42+
43+
this.audio.src = preview
44+
this.audio.play()
45+
}
46+
else {
47+
this.audio = new window.Audio(preview)
48+
this.audio.play()
49+
}
50+
51+
this.setState({trackPlaying: trackId})
3552

53+
this.audio.addEventListener('ended', (e) => {
54+
this.setState({trackPaused: true})
55+
})
3656
}
3757

3858
pauseTrack () {
39-
59+
this.setState({trackPaused: false})
60+
this.audio.pause()
4061
}
4162

4263
render () {
4364
return (
4465
<div className="container">
4566
<Header />
4667
<Search searchTracks={this.searchTracks} />
47-
<Tracks tracks={this.state.tracks}/>
68+
<Tracks
69+
tracks= {this.state.tracks}
70+
playTrack = {this.playTrack}
71+
pauseTrack = {this.pauseTrack}
72+
trackPlaying = {this.state.trackPlaying}
73+
trackPaused = {this.state.trackPaused}
74+
/>
4875
</div>
4976
)
5077
}

‎src/components/arrow-svg.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
3+
function ArrowSvg () {
4+
return (
5+
<svg width="11px" height="19px" viewBox="270 29 11 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
6+
<desc>Created with Sketch.</desc>
7+
<defs></defs>
8+
<g id="next" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(270.662461, 29.000000)">
9+
<g id="Capa_1" fillRule="nonzero" fill="#C6C7CA">
10+
<path d="M9.30403611,8.98568253 L0.883941597,0.155923117 C0.685689705,-0.0519743724 0.367738557,-0.0519743724 0.169486665,0.155923117 C-0.0287652274,0.363820607 -0.0287652274,0.697241109 0.169486665,0.905138598 L8.23048341,9.35832897 L0.169486665,17.8115194 C-0.0287652274,18.0194168 -0.0287652274,18.3528373 0.169486665,18.5607348 C0.26674231,18.6627223 0.397663371,18.7176386 0.52484383,18.7176386 C0.652024289,18.7176386 0.78294535,18.6666449 0.880200995,18.5607348 L9.30029551,9.73097542 C9.4985474,9.52700052 9.4985474,9.18965743 9.30403611,8.98568253 Z" id="Shape"></path>
11+
</g>
12+
</g>
13+
</svg>
14+
)
15+
}
16+
17+
export default ArrowSvg

‎src/components/pause-svg.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
3+
function PauseSvg ({pauseTrack, isTrackPlaying, trackPaused}) {
4+
let display = trackPaused && isTrackPlaying ? 'u-displayBlock' : 'u-displayNone'
5+
return (
6+
<svg width="35px" height="35px" className={display} onClick={pauseTrack} viewBox="901 369 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
7+
<desc>Created with Sketch.</desc>
8+
<defs></defs>
9+
<g id="pause" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(901.000000, 369.000000)">
10+
<g id="Capa_1" fillRule="nonzero" fill="#FFFFFF">
11+
<g id="Group">
12+
<path d="M13.8066102,12.9160546 L13.8066102,22.6506685 C13.8066102,23.6686347 15.3972316,23.6686347 15.3972316,22.6506685 L15.3972316,12.9160546 C15.3972316,11.8980226 13.8066102,11.8980226 13.8066102,12.9160546 L13.8066102,12.9160546 Z" id="Shape"></path>
13+
<path d="M20.1054896,12.9160546 L20.1054896,22.6506685 C20.1054896,23.6686347 21.6961111,23.6686347 21.6961111,22.6506685 L21.6961111,12.9160546 C21.6961111,11.8980226 20.1054896,11.8980226 20.1054896,12.9160546 L20.1054896,12.9160546 Z" id="Shape"></path>
14+
<path d="M17.4968362,34.9938701 C7.82589454,34.9938701 0,27.1043691 0,17.4970339 C0,7.82602637 7.88950094,0.000197740113 17.4968362,0.000197740113 C27.1678437,0.000197740113 34.9936723,7.88969868 34.9936723,17.4970339 C35.0573446,27.1680414 27.1678437,34.9938701 17.4968362,34.9938701 Z M17.4968362,1.52721281 C8.71658192,1.52721281 1.59062147,8.65317326 1.59062147,17.4334275 C1.59062147,26.2136817 8.71658192,33.3396422 17.4968362,33.3396422 C26.2770904,33.3396422 33.4030508,26.2136817 33.4030508,17.4334275 C33.4667232,8.71677966 26.3406968,1.52721281 17.4968362,1.52721281 Z" id="Shape"></path>
15+
</g>
16+
</g>
17+
</g>
18+
</svg>
19+
)
20+
}
21+
22+
export default PauseSvg

‎src/components/play-svg.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
3+
function PlaySvg ({preview, playTrack, trackId, isTrackPlaying, trackPaused}) {
4+
let display = trackPaused && isTrackPlaying ? 'u-displayNone' : 'u-displayBlock'
5+
return (
6+
<svg width='35px' height='35px' className={display} onClick={(e) => playTrack(e, preview, trackId) } viewBox='901 365 35 35' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
7+
<desc>Created with Sketch.</desc>
8+
<defs></defs>
9+
<g id='play-button' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' transform='translate(901.000000, 365.000000)'>
10+
<g id='Capa_1' fillRule='nonzero' fill='#FFFFFF'>
11+
<g id='Group'>
12+
<path d='M26.5784167,17.0181667 L13.7450833,8.26816667 C13.566,8.14683333 13.335,8.13341667 13.1436667,8.23433333 C12.9529167,8.33525 12.8333333,8.53358333 12.8333333,8.75 L12.8333333,26.25 C12.8333333,26.4664167 12.9529167,26.66475 13.14425,26.7656667 C13.2294167,26.8111667 13.3233333,26.8333333 13.4166667,26.8333333 C13.5315833,26.8333333 13.6465,26.7989167 13.7450833,26.7318333 L26.5784167,17.9818333 C26.7376667,17.8733333 26.8333333,17.6930833 26.8333333,17.5 C26.8333333,17.3069167 26.7376667,17.1266667 26.5784167,17.0181667 Z M14,25.14575 L14,9.85425 L25.2145833,17.5 L14,25.14575 Z' id='Shape'></path>
13+
<path d='M17.5,0 C7.8505,0 0,7.8505 0,17.5 C0,27.1495 7.8505,35 17.5,35 C27.1495,35 35,27.1495 35,17.5 C35,7.8505 27.1495,0 17.5,0 Z M17.5,33.8333333 C8.49391667,33.8333333 1.16666667,26.5060833 1.16666667,17.5 C1.16666667,8.49391667 8.49391667,1.16666667 17.5,1.16666667 C26.5060833,1.16666667 33.8333333,8.49391667 33.8333333,17.5 C33.8333333,26.5060833 26.5060833,33.8333333 17.5,33.8333333 Z' id='Shape'></path>
14+
</g>
15+
</g>
16+
</g>
17+
</svg>
18+
)
19+
}
20+
21+
export default PlaySvg

‎src/components/track.js

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,38 @@
11
import React from 'react'
2+
import PlaySvg from './play-svg'
3+
import PauseSvg from './pause-svg'
4+
5+
function Track ({track, playTrack, pauseTrack, trackPlaying, trackPaused}) {
6+
const {url} = track.album.images[1]
7+
let isTrackPlaying = track.id === trackPlaying && trackPaused ? 'Waves' : ''
28

3-
function Track ({track}) {
4-
let {url} = track.album.images[1]
59
return (
610
<article className='track' style={{backgroundImage: `url(${url})`}}>
7-
<div className='track__info'>
11+
<div className='track-info'>
812
<h4>{track.name}</h4>
13+
<PlaySvg
14+
preview = {track.peview_url}
15+
playTrack = {playTrack}
16+
trackId = {track.id}
17+
isTrackPlaying = {isTrackPlaying}
18+
trackPaused = {trackPaused}
19+
/>
20+
<PauseSvg
21+
isTrackPlaying = {isTrackPlaying}
22+
trackPaused = {trackPaused}
23+
pauseTrack = {pauseTrack}
24+
/>
25+
</div>
26+
<div className="{isTrackPlaying}">
27+
<span />
28+
<span />
29+
<span />
30+
<span />
31+
<span />
32+
<span />
33+
<span />
934
</div>
35+
<span />
1036
</article>
1137
)
1238
}

‎src/components/tracks.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import React from 'react'
22
import Track from './track'
33

4-
function Tracks ({tracks}) {
4+
function Tracks ({tracks, playTrack, pauseTrack, trackPlaying, trackPaused}) {
55
return (
66
<div className="tracks">
77
{
88
tracks.map((track, i) => {
9-
return <Track track = {track} key = {i} />
9+
return <Track
10+
track = {track}
11+
playTrack = {playTrack}
12+
pauseTrack = {pauseTrack}
13+
trackPlaying = {trackPlaying}
14+
trackPaused = {trackPaused}
15+
key = {i}
16+
/>
1017
})
1118
}
1219
</div>

‎src/main.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
3-
import JQuery from 'jquery'
43
import App from './App'
54

65
ReactDOM.render(

0 commit comments

Comments
 (0)