Skip to content

Commit

Permalink
use 2 spaces
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pau1fitz
Pau1fitz committed Jan 31, 2020
1 parent d49b75a commit 2d914df
Show file tree
Hide file tree
Showing 8 changed files with 2,410 additions and 2,361 deletions.
4,343 changes: 2,193 additions & 2,150 deletions package-lock.json
View file

Large diffs are not rendered by default.

265 changes: 131 additions & 134 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,125 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchUser } from './actions/userActions';
import { setToken } from './actions/tokenActions';
import { playSong, stopSong, pauseSong, resumeSong } from './actions/songActions';
import './App.css';

import Header from './components/Header';
import Footer from './components/Footer';
import UserPlaylists from './components/UserPlaylists';
import MainView from './components/MainView';
import ArtWork from './components/ArtWork';
import MainHeader from './components/MainHeader';
import SideMenu from './components/SideMenu';
import React, { Component } from "react";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { fetchUser } from "./actions/userActions";
import { setToken } from "./actions/tokenActions";
import {
playSong,
stopSong,
pauseSong,
resumeSong
} from "./actions/songActions";
import "./App.css";

import Header from "./components/Header";
import Footer from "./components/Footer";
import UserPlaylists from "./components/UserPlaylists";
import MainView from "./components/MainView";
import ArtWork from "./components/ArtWork";
import MainHeader from "./components/MainHeader";
import SideMenu from "./components/SideMenu";

class App extends Component {
static audio;

componentDidMount() {
let hashParams = {};
let e,
r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ((e = r.exec(q))) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}

if (!hashParams.access_token) {
window.location.href =
"https://accounts.spotify.com/authorize?client_id=230be2f46909426b8b80cac36446b52a&scope=playlist-read-private%20playlist-read-collaborative%20playlist-modify-public%20user-read-recently-played%20playlist-modify-private%20ugc-image-upload%20user-follow-modify%20user-follow-read%20user-library-read%20user-library-modify%20user-read-private%20user-read-email%20user-top-read%20user-read-playback-state&response_type=token&redirect_uri=http://localhost:3000/callback";
} else {
this.props.setToken(hashParams.access_token);
}
}

componentWillReceiveProps(nextProps) {
if (nextProps.token) {
this.props.fetchUser(nextProps.token);
}

if (this.audio !== undefined) {
this.audio.volume = nextProps.volume / 100;
}
}

stopSong = () => {
if (this.audio) {
this.props.stopSong();
this.audio.pause();
}
};

pauseSong = () => {
if (this.audio) {
this.props.pauseSong();
this.audio.pause();
}
};

static audio;

componentDidMount() {

let hashParams = {};
let e, r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ( e = r.exec(q)) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}

if(!hashParams.access_token) {
window.location.href = 'https://accounts.spotify.com/authorize?client_id=230be2f46909426b8b80cac36446b52a&scope=playlist-read-private%20playlist-read-collaborative%20playlist-modify-public%20user-read-recently-played%20playlist-modify-private%20ugc-image-upload%20user-follow-modify%20user-follow-read%20user-library-read%20user-library-modify%20user-read-private%20user-read-email%20user-top-read%20user-read-playback-state&response_type=token&redirect_uri=http://localhost:3000/callback';
} else {
this.props.setToken(hashParams.access_token);
}

}

componentWillReceiveProps(nextProps) {
if(nextProps.token) {
this.props.fetchUser(nextProps.token);
};

if(this.audio !== undefined) {
this.audio.volume = nextProps.volume / 100;
}

}

stopSong = () => {
if(this.audio) {
this.props.stopSong();
this.audio.pause();
}
}

pauseSong = () => {
if(this.audio) {
this.props.pauseSong();
this.audio.pause();
}
}

resumeSong = () => {
if(this.audio) {
this.props.resumeSong();
this.audio.play();
}
}

audioControl = (song) => {

const { playSong, stopSong } = this.props;

if(this.audio === undefined){
playSong(song.track);
this.audio = new Audio(song.track.preview_url);
this.audio.play();
} else {
stopSong();
this.audio.pause();
playSong(song.track);
this.audio = new Audio(song.track.preview_url);
this.audio.play();
}
}

render() {
return (

<div className='App'>
<div className='app-container'>

<div className='left-side-section'>
<SideMenu />
<UserPlaylists />
<ArtWork />
</div>

<div className='main-section'>
<Header />
<div className='main-section-container'>
<MainHeader
pauseSong={ this.pauseSong }
resumeSong={ this.resumeSong }
/>
<MainView
pauseSong={this.pauseSong}
resumeSong={ this.resumeSong }
audioControl={ this.audioControl }
/>
</div>
</div>

<Footer
stopSong={ this.stopSong }
pauseSong={ this.pauseSong }
resumeSong={ this.resumeSong }
audioControl={ this.audioControl }
/>
</div>
</div>
);
}
resumeSong = () => {
if (this.audio) {
this.props.resumeSong();
this.audio.play();
}
};

audioControl = song => {
const { playSong, stopSong } = this.props;

if (this.audio === undefined) {
playSong(song.track);
this.audio = new Audio(song.track.preview_url);
this.audio.play();
} else {
stopSong();
this.audio.pause();
playSong(song.track);
this.audio = new Audio(song.track.preview_url);
this.audio.play();
}
};

render() {
return (
<div className="App">
<div className="app-container">
<div className="left-side-section">
<SideMenu />
<UserPlaylists />
<ArtWork />
</div>
<div className="main-section">
<Header />
<div className="main-section-container">
<MainHeader
pauseSong={this.pauseSong}
resumeSong={this.resumeSong}
/>{" "}
<MainView
pauseSong={this.pauseSong}
resumeSong={this.resumeSong}
audioControl={this.audioControl}
/>{" "}
</div>{" "}
</div>
<Footer
stopSong={this.stopSong}
pauseSong={this.pauseSong}
resumeSong={this.resumeSong}
audioControl={this.audioControl}
/>{" "}
</div>{" "}
</div>
);
}
}

App.propTypes = {
Expand All @@ -135,26 +133,25 @@ App.propTypes = {
volume: PropTypes.number
};

const mapStateToProps = (state) => {

const mapStateToProps = state => {
return {
token: state.tokenReducer.token,
volume: state.soundReducer.volume
};

};

const mapDispatchToProps = dispatch => {

return bindActionCreators({
fetchUser,
setToken,
playSong,
stopSong,
pauseSong,
resumeSong
},dispatch);

return bindActionCreators(
{
fetchUser,
setToken,
playSong,
stopSong,
pauseSong,
resumeSong
},
dispatch
);
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
37 changes: 18 additions & 19 deletions src/components/AlbumList/component.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,40 @@
import React from 'react';
import PropTypes from 'prop-types';
import './AlbumList.css';
import React from "react";
import PropTypes from "prop-types";
import "./AlbumList.css";

const AlbumList = ({ songs, audioControl }) => {

const renderAlbums = () => {
return songs.map((song, i) => {
return (
<li
onClick={() => { audioControl(song); } }
className='album-item'
key={ i }
onClick={() => {
audioControl(song);
}}
className="album-item"
key={i}
>
<div>
<div className='album-image'>
<div className="album-image">
<img src={song.track.album.images[0].url} />
<div className='play-song'>
<i className="fa fa-play-circle-o play-btn" aria-hidden="true" />
<div className="play-song">
<i
className="fa fa-play-circle-o play-btn"
aria-hidden="true"
/>
</div>
</div>

<div className='album-details'>
<p className='album-name'>{ song.track.album.name }</p>
<p className='artist-name'>{ song.track.album.artists[0].name }</p>
<div className="album-details">
<p className="album-name">{song.track.album.name}</p>
<p className="artist-name">{song.track.album.artists[0].name}</p>
</div>
</div>
</li>
);
});
};

return (
<ul className='album-view-container'>
{renderAlbums()}
</ul>
);

return <ul className="album-view-container">{renderAlbums()}</ul>;
};

AlbumList.propTypes = {
Expand Down
14 changes: 7 additions & 7 deletions src/components/AlbumList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import AlbumList from "./component";
import { connect } from "react-redux";
import uniqBy from 'lodash/uniqBy';
import uniqBy from "lodash/uniqBy";

const mapStateToProps = (state) => {

const albumSongs = state.songsReducer.songs ? uniqBy(state.songsReducer.songs, (item) => {
return item.track.album.name;
}) : '';
const mapStateToProps = state => {
const albumSongs = state.songsReducer.songs
? uniqBy(state.songsReducer.songs, item => {
return item.track.album.name;
})
: "";

return {
songs: albumSongs
};

};

export default connect(mapStateToProps)(AlbumList);
2 changes: 1 addition & 1 deletion src/components/ArtistList/ArtistList.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@

.artist-image img:hover {
opacity: 0.4;
}
}
Loading

0 comments on commit 2d914df

Please sign in to comment.