6 |
9 | );
10 |
11 | export default TitleSubtitle;
12 |
--------------------------------------------------------------------------------
/spotify-clone/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | import { Provider } from 'react-redux';
6 | import store from './config/store';
7 |
8 | ReactDOM.render(
9 | {title}
7 |{subtitle}
8 |-
9 | {data.map(item => (
10 |
- play(item.album.tracks.items[0])} >
11 |
12 |
{item.album.name}
13 |
14 | ))}
15 |
LOADING
; 6 | return ( 7 |-
8 |
-
9 |
Name
10 |Artist
11 |Album
12 |
13 | {data.map(item => (
14 | - onItemClick(item.track)}>
15 |
{item.track.name}
16 |{item.track.artists[0].name}
17 |{item.track.album.name}
18 |
19 | ))}
20 |
10 |
17 | This is an open source app showcasing a spotify 'clone' with basic functionality, 11 | uses your spotify user and retrives your recently palyed songs, albums, all the songs 12 | you have saved, and allows you to play a sample of them form your browser. 13 |
14 |Built with React, Redux, Thunk, React-Router and React-bootstrap
15 |You can see the code here: Github
16 |
8 |
26 | );
27 | else {
28 | return (
29 |
9 |
15 | {user.images[0] ? (
16 | 10 | 11 | Github link 12 | 13 |
14 |
17 | 
18 |
20 | ) : (
21 | {user.display_name}
19 |
22 |
24 | )}
25 | {user.id}
23 |
30 |
31 |
36 | );
37 | }
38 | };
39 |
40 | export default Header;
41 |
--------------------------------------------------------------------------------
/spotify-clone/src/config/AudioController.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Higher Order Component that gives audio control options to the components that need them.
3 | * Returns a component connected to redux (to be able to dispatch actions), with the audio
4 | * methods that dispatch those actions.
5 | */
6 |
7 | import React from 'react';
8 | import { bindActionCreators } from 'redux';
9 | import { connect } from 'react-redux';
10 |
11 | import { playSong } from '../actions/song';
12 | import { pauseSong } from '../actions/song';
13 | import { resumeSong } from '../actions/song';
14 |
15 | export default function AudioController(WrappedComponent) {
16 | return connect(null, mapDispatchToProps)(
17 | class extends React.Component {
18 | play = song => {
19 | this.props.playSong(song);
20 | };
21 | pause = () => {
22 | this.props.pauseSong();
23 | };
24 | resume = () => {
25 | this.props.resumeSong();
26 | };
27 |
28 | render() {
29 | return
32 | ![]()
33 |
35 | Log in
34 |
11 |
21 | );
22 |
23 | const songPaused = (resume, songDetails) => (
24 |
12 |
15 | Select a song
13 |no artist selected
14 | alert('Select a song first')}>
16 |
18 |
19 | Made by gerard cabrerizo
20 |
25 |
35 | );
36 |
37 | const Footer = ({ isPlaying, songDetails, pause, resume }) => {
38 | if (!isPlaying && !songDetails) return noSongSelected(resume);
39 | if (!isPlaying) return songPaused(resume, songDetails);
40 | return (
41 |
26 |
29 | {songDetails.name}
27 |{songDetails.artists[0].name}
28 | resume()}>
30 |
32 |
33 | Made by gerard cabrerizo
34 |
42 |
53 | );
54 | };
55 |
56 | export default AudioController(Footer);
57 |
--------------------------------------------------------------------------------
/spotify-clone/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
16 |
25 |
43 |
46 |
47 | {songDetails.name}
44 |{songDetails.artists[0].name}
45 | pause()}>
48 |
50 |
51 | Made by gerard cabrerizo
52 |