this.resultSelected(result)}>
43 | {this.resultContent(result)}
44 |
45 | )
46 | }
47 |
48 | renderAlbumResults(result) {
49 | let path = `/album/${result.mbid}`;
50 |
51 | if (!result.mbid) {
52 | path = `/album/${encodeURIComponent(result.artist)}/${encodeURIComponent(result.name)}`;
53 | }
54 |
55 | return (
56 | {}}
11 | topArtistData={{
12 | artistData: [{
13 | name: "Radiohead",
14 | image: [
15 | {"#text": 'http://example.com/thom.jpg'},
16 | {"#text": 'http://example.com/thom.jpg'},
17 | {"#text": 'http://example.com/thom.jpg'},
18 | {"#text": 'http://example.com/thom.jpg'},
19 | ],
20 | }]
21 | }
22 | }
23 | />
24 | );
25 | });
26 |
27 | it('renders the topArtist list wrapper', () => {
28 | expect(component.find('.top-artist')).to.be.present();
29 | });
30 |
31 | it('renders the topArtist list', () => {
32 | expect(component.find('.top-artist__list').find('.top-artist__list-item')).to.be.present();
33 | });
34 |
35 | it('renders the image for the topArtist list item', () => {
36 | expect(component.find('.top-artist__image')).to.have.attr('src', 'http://example.com/thom.jpg')
37 | });
38 |
39 | it('renders the image for the topArtist name', () => {
40 | expect(component.find('.top-artist__name')).to.have.text('Radiohead')
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/app/components/home/styles.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/breakpoints";
2 |
3 | .top-artist {
4 | &__list-item {
5 | position: relative;
6 | border-bottom: none;
7 | display:inline-block;
8 | border: 3px solid #111;
9 | border-right: none;
10 | border-bottom: none;
11 | cursor: pointer;
12 | width: 33.3%;
13 |
14 | @include breakpoint(1024px) {
15 | width: 33.3%;
16 | }
17 |
18 | @include breakpoint(1476px) {
19 | width: 25%;
20 | }
21 |
22 | @include breakpoint(1724px) {
23 | width: 16.6%;
24 | }
25 |
26 |
27 | img {
28 | width: 100%;
29 | height: auto;
30 | vertical-align: bottom;
31 | border-radius: 3px;
32 | }
33 | }
34 |
35 | &__link {
36 | display: block;
37 | z-index: 2;
38 | position: relative;
39 |
40 | &:hover {
41 | &:before {
42 | content: "";
43 | position: absolute;
44 | top: 0;
45 | left: 0;
46 | background: rgba(0,0,0,0.5);
47 | width: 100%;
48 | height: 100%;
49 | z-index: 1;
50 | }
51 | }
52 | }
53 |
54 | &__name {
55 | position: absolute;
56 | bottom: 0;
57 | left: 0;
58 | background: rgba(0,0,0,0.5);
59 | color: #fff;
60 | padding: 10px 5px;
61 | z-index: 2;
62 | width: 100%;
63 | display: none;
64 |
65 | &--visible {
66 | display:block;
67 | }
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/app/components/login/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import { browserHistory } from 'react-router';
4 | import { loggedIn, loggedOut } from '../../actions/auth';
5 |
6 | export class Login extends React.Component {
7 | static PropTypes = {
8 | loggedIn: PropTypes.func.isRequired,
9 | authenticated: PropTypes.bool.isRequired
10 | };
11 |
12 | constructor(props) {
13 | super(props);
14 | // if on page load there is a valid token then dispatch
15 | // an action so that the Login component knows to show
16 | // the correct state
17 | if (props.authService.isLoggedIn()) {
18 | props.loggedIn();
19 | }
20 | }
21 |
22 | authenticated() {
23 | this.props.loggedIn();
24 | this.showProfile();
25 | }
26 |
27 | logOut() {
28 | this.props.loggedOut();
29 | this.props.authService.logOut();
30 | browserHistory.push('/');
31 | }
32 |
33 | showProfile() {
34 | const profile = this.props.authService.getProfileDetails();
35 |
36 | return (
37 |
38 |
39 |
{profile.name}
40 |
41 |
42 | {this.logOut()}}>Log out
43 |
44 |
51 | {
52 | this.props.authenticated || this.props.authService.isLoggedIn() ?
53 | this.showProfile() :
54 | {
57 | this.props.authService.authenticate(
58 | () => {
59 | this.authenticated()
60 | }
61 | )
62 | }
63 | }
64 | className="button button--primary button--play login__sign-in"
65 | >
66 | Sign in
67 |
68 | }
69 |
70 | )
71 | }
72 | }
73 |
74 |
75 | function mapStateToProps(state) {
76 | return {
77 | authenticated: state.authenticated,
78 | }
79 | }
80 |
81 | const mapDispatchToProps = {
82 | loggedIn,
83 | loggedOut,
84 | };
85 |
86 | export default connect(
87 | mapStateToProps,
88 | mapDispatchToProps,
89 | )(Login);
90 |
--------------------------------------------------------------------------------
/app/components/login/styles.scss:
--------------------------------------------------------------------------------
1 | .login {
2 | position: absolute;
3 | top: 10px;
4 | right: 10px;
5 |
6 | &__sign-in {
7 | margin-top: 5px;
8 | }
9 |
10 | }
11 |
12 | .profile {
13 | font-weight: bold;
14 | font-size: 13px;
15 | background: #444;
16 | border: 1px solid #000;
17 | border-radius: 3px;
18 | padding: 5px 15px 5px 10px;
19 | overflow: hidden;
20 | cursor: pointer;
21 |
22 | &__options {
23 | display: none;
24 | clear: left;
25 | padding-top: 10px;
26 | li {
27 | padding: 5px 2px 5px 6px;
28 | &:hover {
29 | background: #282727;
30 | }
31 | }
32 | }
33 |
34 | &:hover {
35 | .profile__options {
36 | display: block;
37 | }
38 | }
39 |
40 |
41 | &__image {
42 | float: left;
43 | width: 30px;
44 | margin-right: 10px;
45 | }
46 |
47 | &__name {
48 | float: left;
49 | margin-top: 7px;
50 | }
51 |
52 | &__show {
53 | margin: 6px 0 0 5px;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/app/components/modal/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classNames from 'classNames';
3 | import { connect } from 'react-redux';
4 | import SavePlaylistModal from './modals/save-playlist-modal';
5 | import CreatePlaylistModal from './modals/create-playlist-modal';
6 | import ArtistBioModal from './modals/artist-bio';
7 | import { hideModal } from '../../actions/modal';
8 |
9 | export class Modal extends React.Component {
10 | static PropTypes = {
11 | modalVisible: PropTypes.bool.isRequired,
12 | modalType: PropTypes.string.isRequired,
13 | };
14 |
15 | constructor(props) {
16 | super(props);
17 |
18 | this.hideModal = this.hideModal.bind(this);
19 | }
20 |
21 | getModalContent() {
22 | switch(this.props.modalType) {
23 | case 'savePlaylist' :
24 | return
50 |
54 |
55 |
56 |
57 | {modalContent}
58 |
62 |
64 |
65 |
66 |
' + bio.replace(/\n([ \t]*\n)+/g, '
').replace('\n', '
';
7 | const linkRemoved = formatted.replace('Read more on Last.fm', '');
8 | const licenceRemoved = linkRemoved.replace('. User-contributed text is available under the Creative Commons By-SA License; additional terms may apply.', '');
9 | return {__html: licenceRemoved};
10 | }
11 |
12 | render() {
13 | const {
14 | name,
15 | bio,
16 | image
17 | } = this.props.artistPageData;
18 |
19 | return (
20 |
21 |
22 | {name}
23 |
24 |
25 |
32 |
36 |
37 |
55 | Please give your playlist a name
56 |
:
57 | null
58 | }
59 |
60 | updateFieldState() {
61 | let saveError = true;
62 |
63 | if (this.input.value.length) {
64 | saveError = false;
65 | }
66 |
67 | this.setState({
68 | saveError,
69 | inputVal: this.input.value,
70 | });
71 | }
72 |
73 | render() {
74 | const inputClasses = classNames(
75 | 'dialog__input',
76 | this.state.saveError ? 'dialog__input--error' : '',
77 | );
78 |
79 | const spinnerClasses = classNames(
80 | 'dialog__spinner',
81 | this.props.creatingUserPlaylist ? 'dialog__spinner--visible' : '',
82 | );
83 |
84 | return (
85 |
86 |
87 | {this.props.text}
88 |
89 |
90 | {this.showErrorMessage()}
91 |
{ this.input = input }}
97 | className={inputClasses}
98 | />
99 |
103 | Create
104 |
105 |
106 | Loading...
108 |
109 |
110 |
7 |
8 | Page not found
9 |
10 |
Oops, we're not sure how you ended up here.
11 |
this.playQueueWrap = playQueueWrap }
95 | >
96 |
97 | {
98 | this.props.tracks.map((track, i) => {
99 | const selected = currentIndex === i ?
100 | 'play-queue__list-item--selected' :
101 | null;
102 |
103 | const classes = classNames(
104 | 'play-queue__list-item',
105 | selected,
106 | );
107 | return (
108 | {this.props.playQueueTrackSelected(track, i)}}
111 | className={classes}
112 | >
113 |
114 | {track.artist}
115 |
116 |
117 | {track.name}
118 |
119 | {
122 | this.onRemoveTrackFromQueue(event, i)
123 | }
124 | }
125 | className="play-queue__remove-track">
126 |
128 |
129 | )
130 | })
131 | }
132 |
133 |
137 | }
138 | }
139 | }
140 |
141 |
142 | function mapStateToProps(state) {
143 | return {
144 | playQueueCurrentIndex: state.playQueue.playQueueCurrentIndex,
145 | playQueueTracks: state.playQueue.playQueueTracks,
146 | }
147 | }
148 |
149 | const mapDispatchToProps = {
150 | playQueueTrackSelected,
151 | removeTrackFromQueue,
152 | };
153 |
154 | export default connect(
155 | mapStateToProps,
156 | mapDispatchToProps
157 | )(PlayQueue);
158 |
--------------------------------------------------------------------------------
/app/components/play-queue/spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PlayQueue } from './';
3 | import sinon from 'sinon';
4 |
5 | let component;
6 | let onPlayQueueTrackSelectedSpy;
7 | let onRemoveTrackFromQueueSpy;
8 |
9 | const tracks = [
10 | {
11 | "name": "Airbag",
12 | "image": "http://google.com",
13 | "artist": "Radiohead",
14 | },
15 | {
16 | "name": "Paranoid Android",
17 | "image": "http://google.com",
18 | "artist": "Radiohead",
19 | }
20 | ];
21 |
22 | beforeEach(() => {
23 | onPlayQueueTrackSelectedSpy = sinon.spy();
24 | onRemoveTrackFromQueueSpy = sinon.spy();
25 |
26 | component = mount(
27 |
50 | {imageHtml}
51 |
52 | )
53 | }
54 | }
55 |
56 |
--------------------------------------------------------------------------------
/app/components/playlist-image/styles.scss:
--------------------------------------------------------------------------------
1 | .hero__image-combo {
2 | background: #282727;
3 |
4 | img {
5 | float: left;
6 | }
7 | &--count-2,
8 | &--count-3,
9 | &--count-4,
10 | {
11 | img {
12 | width: 50%;
13 | height: 50%;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/app/components/playlist-page/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import Playlist from '../playlist';
4 |
5 | export class PlaylistPage extends React.Component {
6 | static PropTypes = {
7 | userPlaylists: PropTypes.array.isRequired,
8 | };
9 |
10 | constructor(props) {
11 | super(props);
12 |
13 | this.state = {
14 | playlistData: null,
15 | };
16 | }
17 |
18 | componentDidMount() {
19 | this.extractPlaylist(this.props);
20 | }
21 |
22 | componentWillReceiveProps(nextProps) {
23 | this.extractPlaylist(nextProps);
24 | }
25 |
26 | extractPlaylist(props) {
27 | const playlistId = props.params.playlistid;
28 |
29 | if (props.userPlaylists.length) {
30 | const playlistData = props.userPlaylists.find(
31 | playlist => playlist.id === playlistId
32 | )
33 | this.setState({
34 | playlistData,
35 | });
36 | }
37 | }
38 |
39 | render() {
40 | if (this.props.userPlaylists.length) {
41 | if (this.state.playlistData) {
42 | return (
43 |
53 |
54 | Sorry, We can't find what you're looking for
55 |
56 |
57 | );
58 | }
59 | } else {
60 | return (
61 |
62 | )
63 | }
64 | }
65 | }
66 |
67 | function mapStateToProps(state) {
68 | return {
69 | userPlaylists: state.playlists.userPlaylists,
70 | }
71 | }
72 |
73 | export default connect(
74 | mapStateToProps,
75 | )(PlaylistPage);
76 |
--------------------------------------------------------------------------------
/app/components/playlist-page/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/playlist-page/spec.js
--------------------------------------------------------------------------------
/app/components/playlist-page/styles.scss:
--------------------------------------------------------------------------------
1 | .playlist {
2 | .error-message.page-with-padding {
3 | padding: 40px 0 0 0;
4 | }
5 | }
6 |
7 |
8 |
--------------------------------------------------------------------------------
/app/components/playlist/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/playlist/spec.js
--------------------------------------------------------------------------------
/app/components/playlists-page/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import { Link } from 'react-router';
4 | import { getUserPlaylists } from '../../actions/playlists';
5 |
6 | export class PlaylistsPage extends React.Component {
7 | static PropTypes = {
8 | userPlaylists: PropTypes.array.isRequired,
9 | };
10 |
11 | constructor(props) {
12 | super(props);
13 |
14 | this.state = {
15 | shouldRenderPlaylists: false,
16 | shouldRenderSpinner: false,
17 | }
18 | }
19 |
20 | componentDidMount() {
21 | if (this.props.authenticated) {
22 | this.props.getUserPlaylists();
23 | }
24 | }
25 |
26 | componentWillReceiveProps(nextProps) {
27 | // if the user has just authenticated then we need to call to get their playlists
28 | if (this.props.authenticated === false && nextProps.authenticated) {
29 | this.props.getUserPlaylists();
30 | }
31 |
32 | const shouldRenderPlaylists = nextProps.userPlaylists.length ? true : false;
33 |
34 | this.setState({
35 | shouldRenderPlaylists,
36 | });
37 |
38 | this.renderSpinner(nextProps.requestingPlaylists);
39 | }
40 |
41 | renderSpinner(shouldRenderSpinner) {
42 | const render = shouldRenderSpinner ? true : false;
43 |
44 | this.setState({
45 | shouldRenderSpinner: render,
46 | });
47 | }
48 |
49 | renderUserPlaylists() {
50 | return (
51 |
52 | {
53 | this.props.userPlaylists.map((playlist, i) => {
54 | return (
55 |
56 |
63 | )
64 | })
65 | }
66 |
67 | )
68 | }
69 |
70 | render() {
71 | if (this.props.userPlaylists.length) {
72 | return (
73 |
74 |
Playlists
75 | {this.renderUserPlaylists()}
76 |
77 | )
78 | } else {
79 | return (
80 |
81 | )
82 | }
83 | }
84 | }
85 |
86 | function mapStateToProps(state) {
87 | return {
88 | authenticated: state.authenticated,
89 | userPlaylists: state.playlists.userPlaylists,
90 | }
91 | }
92 |
93 |
94 | const mapDispatchToProps = {
95 | getUserPlaylists,
96 | }
97 |
98 | export default connect(
99 | mapStateToProps,
100 | mapDispatchToProps,
101 | )(PlaylistsPage);
102 |
--------------------------------------------------------------------------------
/app/components/playlists-page/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/playlists-page/spec.js
--------------------------------------------------------------------------------
/app/components/playlists-page/styles.scss:
--------------------------------------------------------------------------------
1 | .playlists-page {
2 | &__list {
3 | border-top: 1px solid #333;
4 | }
5 | &__item {
6 | border-bottom: 1px solid #333;
7 | }
8 |
9 | &__link {
10 | color: #fff;
11 | padding: 10px 0 10px 10px;
12 | text-decoration: none;
13 | display: block;
14 |
15 | &:hover {
16 | background: #222;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/app/components/playlists/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 | import { getUserPlaylists } from '../../actions/playlists';
5 | import { createPlaylist } from '../../actions/play-queue';
6 | import auth0Service from '../../utils/auth0-service';
7 | import {
8 | loggedIn,
9 | loggedOut,
10 | } from '../../actions/auth';
11 |
12 | const authService = new auth0Service();
13 |
14 | export class Playlists extends React.Component {
15 | static propTypes = {
16 | authenticated: PropTypes.bool.isRequired,
17 | userPlaylists: PropTypes.array,
18 | requestingPlaylists: PropTypes.bool.isRequired,
19 | }
20 |
21 | constructor(props) {
22 | super(props);
23 |
24 | this.state = {
25 | shouldRenderPlaylists: false,
26 | shouldRenderSpinner: false,
27 | }
28 |
29 | this.createPlaylist = this.createPlaylist.bind(this);
30 | }
31 |
32 | componentDidMount() {
33 | if (this.props.authenticated) {
34 | this.props.getUserPlaylists();
35 | }
36 | }
37 |
38 | componentWillReceiveProps(nextProps) {
39 | // if the user has just authenticated then we need to call to get their playlists
40 | if (this.props.authenticated === false && nextProps.authenticated) {
41 | this.props.getUserPlaylists();
42 | }
43 |
44 | const shouldRenderPlaylists = nextProps.userPlaylists.length ? true : false;
45 |
46 | this.setState({
47 | shouldRenderPlaylists,
48 | });
49 |
50 | this.renderSpinner(nextProps.requestingPlaylists);
51 | }
52 |
53 | renderPlaylists() {
54 | return this.props.userPlaylists.map((playlist, i) => {
55 | let path = `/playlist/${playlist.id}`;
56 | return (
57 |
58 |
65 | )
66 | })
67 | }
68 |
69 | renderSpinner(shouldRenderSpinner) {
70 | const render = shouldRenderSpinner ? true : false;
71 |
72 | this.setState({
73 | shouldRenderSpinner: render,
74 | });
75 | }
76 |
77 | createPlaylist() {
78 | if (!authService.isLoggedIn()) {
79 | this.props.loggedOut();
80 | authService.authenticate(() => {
81 | this.props.loggedIn();
82 | this.props.createPlaylist();
83 | })
84 | } else {
85 | this.props.createPlaylist();
86 | }
87 | }
88 |
89 | renderCreatePlaylistButton() {
90 | return (
91 |
101 | )
102 | }
103 |
104 | renderPlaylistsPageLink() {
105 | return this.props.authenticated ?
106 |
107 |
:
118 | null;
119 | }
120 |
121 | render() {
122 | if (this.state.shouldRenderPlaylists) {
123 | return(
124 |
125 |
126 | {this.renderPlaylists()}
127 |
128 | {this.renderCreatePlaylistButton()}
129 | {this.renderPlaylistsPageLink()}
130 |
135 | Loading...
137 |
138 | )
139 | } else {
140 | const playlistButton = this.renderCreatePlaylistButton()
141 | return playlistButton;
142 | }
143 | }
144 | }
145 |
146 | function mapStateToProps(state) {
147 | return {
148 | authenticated: state.authenticated,
149 | userPlaylists: state.playlists.userPlaylists,
150 | requestingPlaylists: state.playlists.requestingUserPlaylists,
151 | }
152 | }
153 |
154 | const mapDispatchToProps = {
155 | createPlaylist,
156 | getUserPlaylists,
157 | loggedIn,
158 | loggedOut,
159 | }
160 |
161 | export default connect(
162 | mapStateToProps,
163 | mapDispatchToProps
164 | )(Playlists);
165 |
--------------------------------------------------------------------------------
/app/components/playlists/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/playlists/spec.js
--------------------------------------------------------------------------------
/app/components/playlists/styles.scss:
--------------------------------------------------------------------------------
1 | .playlist {
2 | font-size: 14px;
3 | padding-bottom: 125px;
4 |
5 | &__list {
6 | display: none;
7 |
8 | @include breakpoint(999px) {
9 | display: block;
10 | }
11 | }
12 |
13 | &__item {
14 | margin: 0;
15 | padding: 5px 0;
16 |
17 | @include breakpoint(999px) {
18 | display: block;
19 | }
20 | }
21 |
22 | &__link {
23 | color: #aaa;
24 | display: block;
25 | text-decoration: none;
26 |
27 | &:hover {
28 | color: #fff;
29 | }
30 | }
31 |
32 | &__spinner {
33 | color: #aaa;
34 | position: absolute;
35 | left: calc(50% - 15px);
36 | display: none;
37 |
38 | @include breakpoint(999px) {
39 | display: block;
40 | }
41 | }
42 | }
43 |
44 | .playlist-page-link {
45 | left: 145px;
46 | border-left: 1px solid #333;
47 | position: fixed;
48 | bottom: 0;
49 | z-index: 2;
50 | padding: 15px;
51 | color: #aaa;
52 | width: 175px;
53 |
54 | &__icon {
55 | float: left;
56 | margin-right: 10px;
57 | }
58 |
59 | &__link {
60 | line-height: 28px;
61 | display: block;
62 | color: #aaa;
63 | text-decoration: none;
64 |
65 | &:hover {
66 | color: #fff;
67 | }
68 | }
69 |
70 | @include breakpoint(999px) {
71 | display: none;
72 | }
73 |
74 | @include breakpoint(700px) {
75 | width: calc(100% - 475px);
76 | }
77 |
78 | &:hover {
79 | color: #fff;
80 | }
81 | }
82 |
83 | .new-playlist {
84 | border-top: 1px solid #282727;
85 | padding: 15px;
86 | font-size: 14px;
87 | cursor: pointer;
88 | z-index: 2;
89 | background: #161616;
90 | width: calc(100% - 328px);
91 | position: fixed;
92 | bottom: 0;
93 | left: 0;
94 | color: #aaa;
95 |
96 | @include breakpoint(999px) {
97 | width: 175px;
98 | border-right: 4px solid #282727;
99 | }
100 |
101 | &:hover {
102 | color: #fff;
103 | }
104 |
105 | @include breakpoint(1024px) {
106 | width: 240px;
107 | }
108 |
109 | &__icon {
110 | float: left;
111 | }
112 |
113 | &__text {
114 | float: left;
115 | background: #161616;
116 | margin: 0 0 0 5px;
117 | line-height: 28px;
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/app/components/routes/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IndexRoute, Route } from 'react-router';
3 | import App from '../app';
4 | import Home from '../home';
5 | import Artist from '../artist';
6 | import Album from '../album';
7 | import SearchResults from '../search-results';
8 | import PlaylistPage from '../playlist-page';
9 | import PageNotFound from '../page-not-found';
10 | import auth0Service from '../../utils/auth0-service';
11 |
12 | const authService = new auth0Service();
13 |
14 | export default class routes extends React.Component {
15 | authenticateRoute(nextState, replace, callback) {
16 | if (authService.isLoggedIn()) {
17 | callback();
18 | } else {
19 | authService.authenticate(() => {
20 | callback();
21 | });
22 | }
23 | }
24 |
25 | render() {
26 | return (
27 |
28 |
37 | );
38 | }
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/app/components/search-results/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/search-results/spec.js
--------------------------------------------------------------------------------
/app/components/search-results/styles.scss:
--------------------------------------------------------------------------------
1 | .search-results {
2 | .content-result:first-of-type {
3 | padding-top: 0;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/app/components/search/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import throttle from 'throttleit';
4 |
5 | export class Search extends React.Component {
6 | static PropTypes = {
7 | onSearch: PropTypes.func.isRequired,
8 | onFocus: PropTypes.func.isRequired,
9 | onBlur: PropTypes.func.isRequired,
10 | searching: PropTypes.bool.isRequired,
11 | };
12 |
13 | constructor() {
14 | super();
15 | this.handleSearch = throttle(this.handleSearch, 1500);
16 |
17 | this.state = {
18 | searching: false,
19 | };
20 | }
21 |
22 | componentWillReceiveProps(nextProps) {
23 | const searching = nextProps.searching;
24 |
25 | this.setState({
26 | searching,
27 | });
28 | }
29 |
30 | searching() {
31 | return this.state.searching ?
32 |
44 |
56 | );
57 | }
58 | }
59 |
60 | function mapStateToProps(state) {
61 | return {
62 | searching: state.search.searching,
63 | };
64 | }
65 |
66 | export default connect(
67 | mapStateToProps,
68 | )(Search);
69 |
70 |
--------------------------------------------------------------------------------
/app/components/search/spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Search } from './';
3 | import sinon from 'sinon';
4 |
5 | let component;
6 | let onSearchSpy;
7 |
8 | beforeEach(() => {
9 | onSearchSpy = sinon.spy();
10 |
11 | component = mount(
12 | No data found.
66 | )
67 | } else {
68 |
69 | const classes = classNames(
70 | 'top-artist__name',
71 | this.state.imagesLoaded ? 'top-artist__name--visible' : '',
72 | );
73 | return (
74 |
75 |
76 | {
77 | topTrackData.trackData.map(
78 | (track, i) => {
79 | return (
80 | {
83 | this.playTrack(track);
84 | }
85 | }
86 | className="top-artist__list-item" key={i}>
87 | {track.name}
95 |
96 | );
97 | }
98 | )
99 | }
100 |
101 |
No data found.
107 | );
108 | } else {
109 | return (
110 |
111 | );
112 | }
113 | }
114 | }
115 |
116 | const mapDispatchToProps = {
117 | getTopTracks,
118 | playTopTrack,
119 | };
120 |
121 | function mapStateToProps(state) {
122 | return {
123 | topTrackData: state.topTracks.topTrackData,
124 | topTrackDataError: state.topTracks.topTrackDataError,
125 | }
126 | }
127 |
128 | export default connect(mapStateToProps, mapDispatchToProps)(TopTracks);
129 |
--------------------------------------------------------------------------------
/app/components/top-tracks/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/top-tracks/spec.js
--------------------------------------------------------------------------------
/app/components/track-table/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import Track from '../track';
3 | import TrackTableHeader from './track-table-header';
4 | import ErrorMessage from '../error-message';
5 |
6 | export default class TrackTable extends React.Component {
7 | static PropTypes = {
8 | playlist: PropTypes.array.isRequired,
9 | onClickTrack: PropTypes.func.isRequired,
10 | onClickTrackTools: PropTypes.func.isRequired,
11 | renderArtistCol: PropTypes.string.isRequired,
12 | playlistImg: PropTypes.string,
13 | };
14 |
15 | constructor(props) {
16 | super(props);
17 |
18 | this.onClickTrack = this.onClickTrack.bind(this);
19 | }
20 |
21 | onClickTrack(track) {
22 | const globalPlaylistImg = this.props.playlistImg;
23 | const image = globalPlaylistImg ? globalPlaylistImg : track.img;
24 | this.props.onClickTrack(
25 | track,
26 | image
27 | )
28 | }
29 |
30 | render() {
31 | if (this.props.playlist.length) {
32 | return (
33 |
34 |
35 |
39 | {
40 | this.props.playlist.map((track, i) => {
41 | const artist = typeof track.artist === 'string' ?
42 | track.artist :
43 | null;
44 |
45 | return (
46 | {
54 | this.props.onClickTrackTools(track, event)
55 | }
56 | }
57 | onClick={
58 | () => {
59 | this.onClickTrack(track)
60 | }
61 | }
62 | />
63 | )
64 | })
65 | }
66 |
67 |
68 |
This playlist is empty.
77 | )
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/app/components/track-table/spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesfiltness/tuneify/04250a1e8e292e1faa5eb6be65f4fefd94992225/app/components/track-table/spec.js
--------------------------------------------------------------------------------
/app/components/track-table/track-table-header/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | export default class TrackTableHeader extends React.Component {
4 | static PropTypes = {
5 | renderArtistCol: PropTypes.bool.isRequired,
6 | };
7 |
8 | renderArtistTableHeading() {
9 | return this.props.renderArtistCol ?
10 |
13 | Artist
14 | :
15 | null;
16 | }
17 |
18 | render() {
19 | return (
20 |
21 |
22 |
25 | No
26 |
27 |
30 | Track
31 |
32 | {this.renderArtistTableHeading()}
33 |
36 | Actions
37 |
38 |
39 |
40 | )
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/app/components/track-tools/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import classNames from 'classNames';
4 | import auth0Service from '../../utils/auth0-service';
5 | import {
6 | loggedIn,
7 | loggedOut,
8 | } from '../../actions/auth';
9 |
10 | // TODO: this should be instantiated only one (in App) and then passed around
11 | // on context perhaps
12 | const authService = new auth0Service();
13 |
14 | export class TrackTools extends React.Component {
15 | static PropTypes = {
16 | visible: PropTypes.bool.isRequired,
17 | addTrackToPlaylist: PropTypes.func.isRequired,
18 | addToQueue: PropTypes.func.isRequired,
19 | elementPos: PropTypes.object,
20 | userPlaylists: PropTypes.array,
21 | };
22 |
23 | constructor(props) {
24 | super(props);
25 |
26 | this.showPlaylists = this.showPlaylists.bind(this);
27 | this.hidePlaylists = this.hidePlaylists.bind(this);
28 |
29 | this.state = {
30 | addToPlaylistActive: false,
31 | };
32 | }
33 |
34 | // TODO: this pattern is used in a few places
35 | // extract out and allow a utility method to perform this
36 | // it should accept a callback to call when authenticated
37 | addTrackToPlaylist(playlist) {
38 | if (!authService.isLoggedIn()) {
39 | this.props.loggedOut();
40 | authService.authenticate(() => {
41 | this.props.loggedIn();
42 | this.props.addTrackToPlaylist(playlist);
43 | })
44 | } else {
45 | this.props.addTrackToPlaylist(playlist);
46 | }
47 | }
48 |
49 | renderPlaylistPopup() {
50 | const scrollTop = document.body.scrollTop;
51 | const elementPos = this.props.elementPos;
52 | const playlists = this.props.userPlaylists.map((playlist, i) => {
53 | return (
54 | this.addTrackToPlaylist(playlist)
59 | }
60 | >
61 | {playlist.name}
62 |
63 | );
64 | });
65 |
66 | return (
67 |
80 | );
81 | }
82 |
83 | showPlaylists() {
84 | this.setState({
85 | addToPlaylistActive: true,
86 | });
87 | }
88 |
89 | hidePlaylists() {
90 | this.setState({
91 | addToPlaylistActive: false,
92 | });
93 | }
94 |
95 | renderAddToPlaylist() {
96 | return authService.isLoggedIn() ?
97 |
102 | Add to Playlist
103 | :
106 | null;
107 | }
108 |
109 | render() {
110 | if (this.props.visible) {
111 | const elementPos = this.props.elementPos;
112 |
113 | return (
114 |
115 |
119 |
120 |
124 | Add to Queue
125 |
126 | {this.renderAddToPlaylist()}
127 |
128 |
129 |
29 |
32 |
33 | {this.props.rank}
34 |
35 |
36 |
38 |
39 | {this.props.name}
40 | {
41 | this.props.artist ?
42 |
43 | {this.props.artist}
44 | :
45 | null
46 | }
47 |
51 |
52 |
53 | )
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/app/components/track/styles.scss:
--------------------------------------------------------------------------------
1 | .track {
2 | position: relative;
3 | border-top: 1px solid #333;
4 | border-bottom: 1px solid #333;
5 | cursor: pointer;
6 |
7 | &:hover {
8 | background: #222;
9 | }
10 |
11 | &__cell {
12 | position: relative;
13 | white-space: nowrap;
14 | overflow: hidden;
15 | text-overflow: ellipsis;
16 | padding: 13px 10px;
17 | &:first-of-type {
18 | width: 20px;
19 | }
20 | }
21 |
22 | &__rank {
23 | .track:hover & {
24 | visibility: hidden;
25 | }
26 | }
27 |
28 | &__play {
29 | display: none;
30 | border: 1px solid #fff;
31 | border-radius: 52px;
32 | width: 26px;
33 | height: 26px;
34 | position: absolute;
35 | left: 5px;
36 | top: 9px;
37 | z-index: 2;
38 | background: #222;
39 |
40 | .fa {
41 | margin: 5px 0 0 8px;
42 | }
43 |
44 | .track:hover & {
45 | display: block;
46 | }
47 | }
48 |
49 | &__options {
50 | &:before {
51 | content: "\f141";
52 | font-family: FontAwesome;
53 | font-style: normal;
54 | font-weight: normal;
55 | text-decoration: inherit;
56 | position: absolute;
57 | right: 15px;
58 | top: 14px;
59 | }
60 | }
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/app/components/user-sidebar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router';
3 | import Playlists from '../playlists';
4 |
5 | export function UserSidebar() {
6 | return (
7 |
8 |
9 |
12 |
13 |
14 |
16 |
17 |
19 |
20 |
21 |
24 |
25 |
5 |
8 |
--------------------------------------------------------------------------------
/app/images/next.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/app/images/pause.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/app/images/play.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/app/images/previous.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/app/images/repeat.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/app/images/shuffle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/app/images/spinner.svg:
--------------------------------------------------------------------------------
1 |
5 |
8 |
--------------------------------------------------------------------------------
/app/images/volume-low.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/app/images/volume-medium.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/app/images/volume-mute.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/app/images/volume-mute2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { Provider } from 'react-redux';
4 | import { Router, IndexRoute, Route, browserHistory } from 'react-router';
5 | import { syncHistoryWithStore } from 'react-router-redux';
6 | import store from './redux/modules/store';
7 | import styles from './styles/global.scss';
8 | import auth0Service from './utils/auth0-service';
9 |
10 | import { loggedIn } from './actions/auth';
11 |
12 | import App from './components/app';
13 | import Home from './components/home';
14 | import Artist from './components/artist';
15 | import Album from './components/album';
16 | import PlaylistPage from './components/playlist-page';
17 | import PageNotFound from './components/page-not-found';
18 | import SearchResults from './components/search-results';
19 | import TopTracks from './components/top-tracks';
20 | import PlaylistsPage from './components/playlists-page';
21 |
22 | const history = syncHistoryWithStore(browserHistory, store);
23 |
24 | function hiddenCallback() {
25 | browserHistory.push('/');
26 | }
27 |
28 | const authService = new auth0Service(hiddenCallback);
29 |
30 |
31 |
32 | const authenticateRoute = (nextState, replace, callback) => {
33 | if (authService.isLoggedIn()) {
34 | callback();
35 | } else {
36 | authService.authenticate(() => {
37 | callback();
38 | store.dispatch(loggedIn());
39 | });
40 | }
41 | };
42 |
43 | const createElement = (Component, props) =>
44 |
48 | window.scrollTo(0, 0)}
52 | >
53 |
54 |
55 |
66 |
67 | ,
68 | document.getElementById('react-view')
69 | );
70 |
--------------------------------------------------------------------------------
/app/reducers/album-page/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function albumPageData(state = null, action) {
5 | switch (action.type) {
6 | case types.RECEIVE_ALBUM_PAGE_DATA:
7 | // TODO: need a better solution for dealing with images here
8 | // what if this image is not defined
9 | // need to also confirm that all the required properties are here
10 | return {
11 | artist: action.json.album.artist,
12 | tracks: action.json.album.tracks.track,
13 | name: action.json.album.name,
14 | image: action.json.album.image[2]['#text'],
15 | }
16 | case types.CLEAR_ALBUM_PAGE_DATA:
17 | return null;
18 | default:
19 | return state
20 | }
21 | }
22 |
23 | export function currentAlbumPageError(state = false, action) {
24 | switch(action.type) {
25 | case types.ALBUM_PAGE_DATA_ERROR:
26 | return true;
27 | case types.CLEAR_ALBUM_PAGE_ERROR:
28 | return false;
29 | default:
30 | return state;
31 | }
32 | }
33 |
34 |
35 | export const albumPage = combineReducers({
36 | albumPageData,
37 | currentAlbumPageError,
38 | });
39 |
--------------------------------------------------------------------------------
/app/reducers/artist-page/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function artistPageData(state = null, action) {
5 | switch (action.type) {
6 | case types.RECEIVE_ARTIST_PAGE_DATA:
7 | // need a better solution for dealing with images here
8 | // what if this image is not defined
9 | // need to also confirm that all the required properties are here
10 | return {
11 | name: action.json.artist.name,
12 | bio: action.json.artist.bio,
13 | image: action.json.artist.image[2]['#text'],
14 | similar: action.json.artist.similar.artist,
15 | }
16 | case types.CLEAR_ARTIST_PAGE_DATA:
17 | return null;
18 | default:
19 | return state
20 | }
21 | }
22 |
23 | export function artistPageAlbum(state = null, action) {
24 | switch (action.type) {
25 | case types.RECEIVE_ARTIST_ALBUM_DATA:
26 | return action.json.topalbums.album;
27 | case types.ARTIST_ALBUM_DATA_ERROR:
28 | case types.CLEAR_ARTIST_PAGE_DATA:
29 | return null;
30 | default:
31 | return state;
32 | }
33 | }
34 |
35 | export function similarArtists(state = null, action) {
36 | switch (action.type) {
37 | case types.RECEIVE_SIMILAR_ARTIST_DATA:
38 | return action.json.similarartists.artist.slice(0, 20);
39 | case types.SIMILAR_ARTIST_ERROR:
40 | case types.CLEAR_ARTIST_PAGE_DATA:
41 | return null;
42 | default:
43 | return state;
44 | }
45 | }
46 |
47 | export function currentArtistPageError(state = false, action) {
48 | switch(action.type) {
49 | case types.ARTIST_PAGE_DATA_ERROR:
50 | return true;
51 | case types.CLEAR_ARTIST_PAGE_ERROR:
52 | return false;
53 | default:
54 | return state
55 | }
56 | }
57 |
58 |
59 | export const artistPage = combineReducers({
60 | artistPageData,
61 | artistPageAlbum,
62 | currentArtistPageError,
63 | similarArtists,
64 | });
65 |
--------------------------------------------------------------------------------
/app/reducers/auth/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 |
3 | export function authenticated(state = false, action) {
4 | switch (action.type) {
5 | case types.LOGGED_IN:
6 | return true;
7 | case types.LOGGED_OUT:
8 | return false;
9 | default:
10 | return state
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/app/reducers/autocomplete/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function autocompleteArtistData(state = [] , action) {
5 | switch (action.type) {
6 | case types.RECEIVE_AUTOCOMPLETE_ARTIST_DATA:
7 | //we always want a fresh set of results returned to the state
8 | const results = [];
9 | const artists =
10 | action
11 | .json
12 | .results
13 | .artistmatches.artist.filter(
14 | artist => artist.mbid
15 | )
16 | return results.concat(artists);
17 | case types.RECEIVE_AUTOCOMPLETE_ARTIST_DATA_ERROR:
18 | case types.CLEAR_SEARCH:
19 | return []
20 | default:
21 | return state
22 | }
23 | }
24 |
25 | export function autocompleteTrackData(state = [] , action) {
26 | switch (action.type) {
27 | case types.RECEIVE_AUTOCOMPLETE_TRACK_DATA:
28 | //we always want a fresh set of results returned to the state
29 | const results = [];
30 | const tracks =
31 | action
32 | .json
33 | .results
34 | .trackmatches.track.filter(
35 | track => track.mbid
36 | );
37 | return results.concat(tracks);
38 | case types.RECEIVE_AUTOCOMPLETE_TRACK_DATA_ERROR:
39 | case types.CLEAR_SEARCH:
40 | return []
41 | default:
42 | return state
43 | }
44 | }
45 |
46 | export function autocompleteAlbumData(state = [] , action) {
47 | switch (action.type) {
48 | case types.RECEIVE_AUTOCOMPLETE_ALBUM_DATA:
49 | //we always want a fresh set of results returned to the state
50 | const results = [];
51 | const albums =
52 | action
53 | .json
54 | .results
55 | .albummatches.album.filter(
56 | album => album.mbid
57 | );
58 | return results.concat(albums);
59 | case types.RECEIVE_AUTOCOMPLETE_ALBUM_DATA_ERROR:
60 | case types.CLEAR_SEARCH:
61 | return []
62 | default:
63 | return state
64 | }
65 | }
66 |
67 | export const autocomplete = combineReducers({
68 | autocompleteAlbumData,
69 | autocompleteTrackData,
70 | autocompleteArtistData,
71 | });
72 |
--------------------------------------------------------------------------------
/app/reducers/modal/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js'
2 | import { combineReducers } from 'redux';
3 |
4 | export function modalVisible(state = false, action) {
5 | switch (action.type) {
6 | case types.SHOW_MODAL:
7 | return true;
8 | case types.HIDE_MODAL:
9 | case types.PLAYLIST_CREATED:
10 | return false;
11 | default:
12 | return state
13 | }
14 | }
15 |
16 | export function modalType(state = null, action) {
17 | switch (action.type) {
18 | case types.SHOW_MODAL:
19 | return action.modalType;
20 | case types.HIDE_MODAL:
21 | return null;
22 | default:
23 | return state
24 | }
25 | }
26 |
27 | export const modal = combineReducers({
28 | modalVisible,
29 | modalType,
30 | });
31 |
--------------------------------------------------------------------------------
/app/reducers/play-queue/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js'
2 | import { combineReducers } from 'redux';
3 |
4 | export function playQueueTracks(state = [], action) {
5 | switch (action.type) {
6 | case types.APPEND_TRACK_TO_PLAY_QUEUE:
7 | return state.concat(action.trackObj);
8 | case types.ADD_TRACKS_TO_PLAY_QUEUE:
9 | return state.concat(action.trackData);
10 | case types.REPLACE_QUEUE_WITH_TRACKS:
11 | return [].concat(action.trackData);
12 | case types.REMOVE_TRACK_FROM_PLAY_QUEUE:
13 | return [
14 | ...state.slice(0, action.index),
15 | ...state.slice(action.index + 1)
16 | ]
17 | return state;
18 | case types.TRASH_PLAY_QUEUE:
19 | return []
20 | default:
21 | return state
22 | }
23 | }
24 |
25 | export function playQueueCurrentIndex(state = 0, action) {
26 | switch(action.type) {
27 | case types.RESET_PLAY_QUEUE_INDEX:
28 | return 0;
29 | case types.INCREMENT_CURRENT_INDEX:
30 | return state + 1;
31 | case types.DECREMENT_CURRENT_INDEX:
32 | return state - 1;
33 | case types.SET_CURRENT_INDEX:
34 | return action.index;
35 | default:
36 | return state;
37 | }
38 | }
39 |
40 | export function shuffle(state = false, action) {
41 | switch(action.type) {
42 | case types.SHUFFLE:
43 | return action.enabled;
44 | default:
45 | return state;
46 | }
47 | }
48 |
49 | export function repeat(state = false, action) {
50 | switch(action.type) {
51 | case types.REPEAT:
52 | return action.enabled;
53 | default:
54 | return state;
55 | }
56 | }
57 |
58 | export function savePlaylistPopupVisible(state = false, action) {
59 | switch(action.type) {
60 | case types.SHOW_SAVE_PLAYLIST_POPUP:
61 | return true;
62 | case types.HIDE_SAVE_PLAYLIST_POPUP:
63 | return false;
64 | default:
65 | return state;
66 | }
67 | }
68 |
69 | export function playQueueEnded(state = false, action) {
70 | switch(action.type) {
71 | case types.PLAY_QUEUE_ENDED:
72 | return true;
73 | case types.RESET_PLAY_QUEUE_ENDED:
74 | return false;
75 | default:
76 | return state;
77 | }
78 | }
79 |
80 | export const playQueue = combineReducers({
81 | playQueueTracks,
82 | playQueueCurrentIndex,
83 | shuffle,
84 | repeat,
85 | savePlaylistPopupVisible,
86 | playQueueEnded
87 | });
88 |
--------------------------------------------------------------------------------
/app/reducers/playlists/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function requestingUserPlaylists(state = false, action) {
5 | switch (action.type) {
6 | case types.REQUEST_USER_PLAYLISTS:
7 | return true;
8 | case types.RECEIVE_USER_PLAYLISTS:
9 | return false;
10 | case types.USER_PLAYLIST_REQUEST_ERROR:
11 | return false;
12 | default:
13 | return false
14 | }
15 | }
16 |
17 | export function creatingUserPlaylist(state = false, action) {
18 | switch (action.type) {
19 | case types.CREATE_PLAYLIST:
20 | return true;
21 | case types.PLAYLIST_CREATED:
22 | case types.PLAYLIST_CREATE_ERROR:
23 | return false;
24 | default:
25 | return state;
26 | }
27 | }
28 |
29 | export function userPlaylists(state = [], action) {
30 | switch (action.type) {
31 | case types.RECEIVE_USER_PLAYLIST_DATA:
32 | return action.json.data.Items.map((item) => {
33 | return {
34 | ...item,
35 | tracks: JSON.parse(item.tracks),
36 | }
37 | })
38 | case types.PLAYLIST_CREATED:
39 | const newPlaylist = action.json;
40 |
41 | return [
42 | ...state,
43 | {
44 | ...newPlaylist,
45 | tracks: JSON.parse(action.json.tracks),
46 | }
47 | ];
48 | case types.PLAYLIST_UPDATED:
49 | const index = state.findIndex(playlist => playlist.id === action.json.id);
50 | return [
51 | ...state.slice(0, index),
52 | {
53 | ...state[index],
54 | tracks: JSON.parse(action.json.tracks),
55 | },
56 | ...state.slice(index + 1)
57 | ]
58 | case types.USER_PLAYLIST_REQUEST_ERROR:
59 | case types.LOGGED_OUT:
60 | return []
61 | default:
62 | return state
63 | }
64 | }
65 |
66 | export const playlists = combineReducers({
67 | requestingUserPlaylists,
68 | userPlaylists,
69 | creatingUserPlaylist,
70 | });
71 |
--------------------------------------------------------------------------------
/app/reducers/search-results/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function artistData(state = [] , action) {
5 | switch (action.type) {
6 | case types.RECEIVE_FULL_ARTIST_DATA:
7 | //we always want a fresh set of results returned to the state
8 | const results = [];
9 | const artists =
10 | action
11 | .json
12 | .results
13 | .artistmatches.artist.filter(artist => artist.mbid);
14 | return results.concat(artists);
15 | case types.CLEAR_SEARCH_PAGE:
16 | case types.CLEAR_FULL_SEARCH_RESULTS:
17 | case types.RECEIVE_FULL_ARTIST_DATA_ERROR:
18 | return []
19 | default:
20 | return state
21 | }
22 | }
23 |
24 | export function trackData(state = [] , action) {
25 | switch (action.type) {
26 | case types.RECEIVE_FULL_TRACK_DATA:
27 | //we always want a fresh set of results returned to the state
28 | const results = [];
29 | const tracks =
30 | action
31 | .json
32 | .results
33 | .trackmatches.track.filter(track => track.mbid);
34 | return results.concat(tracks);
35 | case types.CLEAR_SEARCH_PAGE:
36 | case types.CLEAR_FULL_SEARCH_RESULTS:
37 | case types.RECEIVE_FULL_TRACK_DATA_ERROR:
38 | return []
39 | default:
40 | return state
41 | }
42 | }
43 |
44 | export function albumData(state = [] , action) {
45 | switch (action.type) {
46 | case types.RECEIVE_FULL_ALBUM_DATA:
47 | //we always want a fresh set of results returned to the state
48 | const results = [];
49 | const albums =
50 | action
51 | .json
52 | .results
53 | .albummatches.album.filter(album => album.mbid);
54 | return results.concat(albums);
55 | case types.CLEAR_SEARCH_PAGE:
56 | case types.CLEAR_FULL_SEARCH_RESULTS:
57 | case types.RECEIVE_FULL_ALBUM_DATA_ERROR:
58 | return []
59 | default:
60 | return state
61 | }
62 | }
63 |
64 | export const searchResults = combineReducers({
65 | albumData,
66 | trackData,
67 | artistData,
68 | });
69 |
--------------------------------------------------------------------------------
/app/reducers/search/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function currentSearch(state = '' , action) {
5 | switch (action.type) {
6 | case types.INITIALISING_SEARCH:
7 | return action.searchTerm
8 | case types.CLEAR_SEARCH:
9 | return null;
10 | default:
11 | return state
12 | }
13 | }
14 |
15 | export function searching(state = false, action) {
16 | switch(action.type) {
17 | case types.INITIALISING_SEARCH:
18 | return true;
19 | case types.RECEIVE_AUTOCOMPLETE_TRACK_DATA:
20 | case types.RECEIVE_AUTOCOMPLETE_ARTIST_DATA:
21 | case types.RECEIVE_AUTOCOMPLETE_ALBUM_DATA:
22 | return false;
23 | default:
24 | return state;
25 | }
26 | }
27 |
28 | export const search = combineReducers({
29 | searching,
30 | currentSearch,
31 | });
32 |
--------------------------------------------------------------------------------
/app/reducers/top-artists/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function topArtistData(state = null, action) {
5 | switch (action.type) {
6 | case types.RECEIVE_TOP_ARTIST_DATA:
7 | return {
8 | artistData: action.json.artists.artist,
9 | }
10 | default:
11 | return state
12 | }
13 | }
14 |
15 | // TODO: these actions are not properly hooked up yet...
16 | export function topArtistDataError(state = null, action) {
17 | switch(action.type) {
18 | case types.TOP_ARTIST__DATA_ERROR:
19 | return {
20 | error: action,
21 | }
22 | case types.CLEAR_TOP_ARTIST_ERROR:
23 | return null;
24 | default:
25 | return state
26 | }
27 | }
28 |
29 | export const topArtists = combineReducers({
30 | topArtistData,
31 | topArtistDataError,
32 | });
33 |
--------------------------------------------------------------------------------
/app/reducers/top-tracks/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function topTrackData(state = null, action) {
5 | switch (action.type) {
6 | case types.RECEIVE_TOP_TRACK_DATA:
7 | return {
8 | trackData: action.json.tracks.track,
9 | }
10 | default:
11 | return state
12 | }
13 | }
14 |
15 | // TODO: these actions are not properly hooked up yet...
16 | export function topTrackDataError(state = null, action) {
17 | switch(action.type) {
18 | case types.TOP_TRACK_DATA_ERROR:
19 | return {
20 | error: action,
21 | }
22 | case types.CLEAR_TOP_TRACK_ERROR:
23 | return null;
24 | default:
25 | return state
26 | }
27 | }
28 |
29 | export const topTracks = combineReducers({
30 | topTrackData,
31 | topTrackDataError,
32 | });
33 |
--------------------------------------------------------------------------------
/app/reducers/track-summary/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 |
3 | export function currentTrackSummaryData(state = {}, action) {
4 | switch (action.type) {
5 | case types.TRACK_SELECTED:
6 | return action.selectedTrackSummaryData
7 | default:
8 | return state
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/app/reducers/video-data/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 |
3 | export function videoData(state = [], action) {
4 | switch(action.type) {
5 | case types.RECEIVE_VIDEO_DATA:
6 | const results = [];
7 | return results.concat(action.videoData);
8 | default: return state
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/app/reducers/video-player/index.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../constants/ActionTypes.js';
2 | import { combineReducers } from 'redux';
3 |
4 | export function currentVideo(state = '' , action) {
5 | switch (action.type) {
6 | case types.PLAY_VIDEO:
7 | return action.videoData[0];
8 | default:
9 | return state;
10 | }
11 | }
12 |
13 | export function restartCurrentTrack(state = false, action) {
14 | switch (action.type) {
15 | case types.RESTART_TRACK:
16 | return true;
17 | case types.RESTARTED_TRACK:
18 | return false;
19 | default:
20 | return state;
21 | }
22 | }
23 |
24 | export function pauseBySpacebar(state = false, action) {
25 | switch (action.type) {
26 | case types.PAUSE_BY_SPACEBAR:
27 | console.log(!state);
28 | return !state;
29 | default:
30 | return state;
31 | }
32 | }
33 |
34 | export const videoPlayer = combineReducers({
35 | currentVideo,
36 | restartCurrentTrack,
37 | pauseBySpacebar
38 | });
39 |
40 |
--------------------------------------------------------------------------------
/app/redux/create.js:
--------------------------------------------------------------------------------
1 | import { createStore as _createStore } from 'redux';
2 | import reducers from './modules/reducers';
3 |
4 | export default function(data) {
5 | return _createStore(reducers, data);
6 | }
7 |
--------------------------------------------------------------------------------
/app/redux/middleware/auth.js:
--------------------------------------------------------------------------------
1 | import auth0Service from '../../utils/auth0-service';
2 | import { loggedIn, loggedOut } from '../../actions/auth';
3 |
4 | const authService = new auth0Service();
5 |
6 | const authMiddleware = store => next => action => {
7 | const { authenticate, ...rest } = action;
8 |
9 | if (!authenticate || authService.isLoggedIn()) {
10 | return next(action);
11 | } else {
12 | authService.authenticate(
13 | () => {
14 | store.dispatch(loggedIn());
15 | next(action)
16 | }
17 | );
18 | }
19 | }
20 |
21 | export default authMiddleware
22 |
--------------------------------------------------------------------------------
/app/redux/middleware/fetch.js:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-fetch'
2 |
3 | const fetchMiddleware = store => next => action => {
4 | let queryString = '';
5 | // if action is a function this middleware is not interested in it
6 | // it's probably a thunk, so just return it so that thunk middleware
7 | // can deal with it
8 | if (typeof action === 'function') {
9 | return action(store.dispatch, store.getState);
10 | }
11 |
12 | const { promise, actions, ...rest } = action;
13 | // if the action object does not contain a promise
14 | // property then we can assume it's a standard action
15 | // so pass it on to the next middleware
16 | if (!promise) {
17 | return next(action);
18 | }
19 |
20 | // fetch does not support passing a params object
21 | // so build the queryString here and append to the url
22 | if (promise.params && Object.keys(promise.params).length > 0) {
23 | queryString = Object.keys(promise.params).map(function(key) {
24 | return [key, promise.params[key]].map(encodeURIComponent).join("=");
25 | }).join("&");
26 | queryString = `?${queryString}`;
27 | }
28 |
29 | const promiseUrl = promise.url + queryString;
30 |
31 | const [REQUEST, SUCCESS, FAILURE] = actions;
32 | // dispatch the request action
33 | next({ ...rest, type: REQUEST });
34 | const actionPromise = fetch(promiseUrl, promise);
35 |
36 | actionPromise
37 | .then((response) => response.json())
38 | .then(json => { next({ ...rest, json, type: SUCCESS })} )
39 | .catch(error => next({ ...rest, error, type: FAILURE }));
40 |
41 | return actionPromise;
42 | };
43 |
44 | export default fetchMiddleware
45 |
--------------------------------------------------------------------------------
/app/redux/middleware/lastfm.js:
--------------------------------------------------------------------------------
1 | // This is a quick makeshift middleware to see how many calls are being
2 | // made to last fm over time
3 | const appStartupTime = Date.now();
4 |
5 | let calls = 0;
6 |
7 | const lastFmCallCountMiddleware = store => next => action => {
8 | if (action.type === 'LAST_FM_API_REQUEST') {
9 | calls++;
10 | const diff = Date.now() - appStartupTime;
11 | const secs = Math.floor(diff / 1000);
12 | const mins = secs / 60 < 1 ? 0 : secs / 60;
13 | console.log('calls: ', calls, ' in: ', mins);
14 | }
15 |
16 | next(action);
17 | }
18 |
19 | export default lastFmCallCountMiddleware;
20 |
--------------------------------------------------------------------------------
/app/redux/modules/reducers.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { routerReducer } from 'react-router-redux';
3 |
4 | import { search } from '../../reducers/search';
5 | import { currentTrackSummaryData } from '../../reducers/track-summary';
6 | import { autocomplete } from '../../reducers/autocomplete';
7 | import { videoPlayer } from '../../reducers/video-player';
8 | import { albumPage } from '../../reducers/album-page';
9 | import { artistPage } from '../../reducers/artist-page';
10 | import { topArtists } from '../../reducers/top-artists';
11 | import { topTracks } from '../../reducers/top-tracks';
12 | import { videoData } from '../../reducers/video-data';
13 | import { playQueue } from '../../reducers/play-queue';
14 | import { authenticated } from '../../reducers/auth';
15 | import { playlists } from '../../reducers/playlists';
16 | import { modal } from '../../reducers/modal';
17 | import { searchResults } from '../../reducers/search-results';
18 |
19 | import { loggedIn, loggedOut } from '../../actions/auth';
20 |
21 | const reducers = combineReducers(
22 | {
23 | search,
24 | currentTrackSummaryData,
25 | videoPlayer,
26 | videoData,
27 | albumPage,
28 | autocomplete,
29 | authenticated,
30 | artistPage,
31 | topArtists,
32 | topTracks,
33 | playQueue,
34 | playlists,
35 | modal,
36 | searchResults,
37 | routing: routerReducer,
38 | }
39 | );
40 |
41 | export default reducers;
42 |
--------------------------------------------------------------------------------
/app/redux/modules/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import { browserHistory } from 'react-router';
3 | import { routerMiddleware } from 'react-router-redux';
4 | import thunkMiddleware from 'redux-thunk';
5 | import createLogger from 'redux-logger';
6 | import fetchMiddleware from '../middleware/fetch';
7 | import authMiddleware from '../middleware/auth';
8 | import lastFmCallCountMiddleware from '../middleware/lastfm';
9 | import reducers from './reducers';
10 |
11 | const initialState = window.__PRELOADED_STATE__; // eslint-disable-line no-underscore-dangle
12 |
13 | const logger = createLogger(); // eslint-disable-line no-unused-vars
14 | const reactRouterReduxMiddleware = routerMiddleware(browserHistory);
15 | const createStoreWithMiddleware = applyMiddleware(
16 | authMiddleware,
17 | fetchMiddleware,
18 | lastFmCallCountMiddleware,
19 | thunkMiddleware,
20 | reactRouterReduxMiddleware,
21 | )(createStore);
22 |
23 | // export the store so it can be imported and used to allow dispatch to work in non-react components
24 | // such as the authService
25 | const store = createStoreWithMiddleware(reducers, initialState);
26 |
27 | export default store
28 |
--------------------------------------------------------------------------------
/app/styles/base.scss:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background: #111;
7 | font-family: arial, sans-serif;
8 | }
9 |
10 | ul {
11 | padding: 0;
12 | }
13 |
14 | li {
15 | list-style: none;
16 | }
17 |
18 | h1,
19 | h2,
20 | h3,
21 | h4 {
22 | font-weight: normal
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/app/styles/breakpoints.scss:
--------------------------------------------------------------------------------
1 | @mixin breakpoint($class) {
2 | @if $class == xs {
3 | @media (max-width: 767px) { @content; }
4 | }
5 |
6 | @else if $class == sm {
7 | @media (min-width: 768px) { @content; }
8 | }
9 |
10 | @else if $class == md {
11 | @media (min-width: 992px) { @content; }
12 | }
13 |
14 | @else if $class == lg {
15 | @media (min-width: 1200px) { @content; }
16 | }
17 |
18 | @else {
19 | @media (min-width: $class) { @content; }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/app/styles/content-result.scss:
--------------------------------------------------------------------------------
1 | .content-result {
2 | clear: left;
3 | padding-top: 25px;
4 |
5 | &__list {
6 | display: flex;
7 | flex-wrap: wrap;
8 | }
9 |
10 | &__image {
11 | display:block;
12 | border-radius: 3px;
13 | }
14 |
15 | &__wrap {
16 | margin: 0 auto;
17 |
18 | &:first-of-type {
19 | margin-left: 0;
20 | }
21 | }
22 |
23 | &__item {
24 | margin-right: 10px;
25 | overflow: hidden;
26 | font-size: 13px;
27 | width: calc(20% - 10px);
28 |
29 | @include breakpoint(1700px) {
30 | width: calc(10% - 10px);
31 | }
32 |
33 | }
34 |
35 | &__image {
36 | width: 100%;
37 | }
38 |
39 | &__text {
40 | display: block;
41 | text-align: center;
42 | margin: 6px 0 20px 0;
43 | }
44 |
45 | &__link {
46 | display:block;
47 | color: #fff;
48 | text-decoration: none;
49 |
50 | &:hover {
51 | text-decoration: underline;
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/app/styles/global.scss:
--------------------------------------------------------------------------------
1 | @import './normalize.css';
2 | @import './base.scss';
3 | @import './font-awesome.css';
4 | @import './variables.scss';
5 | @import './hero.scss';
6 | @import './tracks.scss';
7 | @import './breakpoints.scss';
8 | @import './content-result.scss';
9 |
10 | @import '../components/app/styles';
11 | @import '../components/search/styles';
12 | @import '../components/autocomplete/styles';
13 | @import '../components/autocomplete-section/styles';
14 | @import '../components/youtube-player/styles';
15 | @import '../components/album/styles';
16 | @import '../components/artist/styles';
17 | @import '../components/home/styles';
18 | @import '../components/play-queue/styles';
19 | @import '../components/play-queue-tools/styles';
20 | @import '../components/current-track-summary/styles';
21 | @import '../components/user-sidebar/styles';
22 | @import '../components/login/styles';
23 | @import '../components/playlists/styles';
24 | @import '../components/playlist-page/styles';
25 | @import '../components/track/styles';
26 | @import '../components/modal/styles';
27 | @import '../components/playlist-image/styles';
28 | @import '../components/track-tools/styles';
29 | @import '../components/error-message/styles';
30 | @import '../components/page-not-found/styles';
31 | @import '../components/search-results/styles';
32 | @import '../components/modal/modals/artist-bio/styles';
33 | @import '../components/playlists-page/styles';
34 |
35 | .route-content-spinner {
36 | background: url('../images/spinner.svg') no-repeat;
37 | width: 165px;
38 | height: 165px;
39 | margin: 100px auto 0 auto;
40 | }
41 |
42 |
43 | *::-webkit-scrollbar
44 | {
45 | width:11px;
46 | background-color: #000;
47 | }
48 |
49 | *::-webkit-scrollbar:horizontal
50 | {
51 | height:11px;
52 | }
53 |
54 | *::-webkit-scrollbar-thumb
55 | {
56 | border:2px solid transparent;
57 | background-color:#505050;
58 | background-clip:content-box;
59 | -webkit-border-radius:7px;
60 | -moz-border-radius:7px;
61 | border-radius:7px;
62 | }
63 |
64 | *::-webkit-scrollbar-corner
65 | {
66 | background-color:#000000;
67 | }
68 |
69 | .button {
70 | border-radius: 20px;
71 | text-transform: uppercase;
72 | font-size: 12px;
73 | color: #fff;
74 | padding: 10px 40px;
75 | border: none;
76 | margin-right: 10px;
77 | cursor: pointer;
78 |
79 | &:focus {
80 | outline: none;
81 | }
82 |
83 | &--primary {
84 | background: #19b736;
85 | }
86 | }
87 |
88 | .uppercase {
89 | text-transform: uppercase;
90 | }
91 |
92 | .auth0-lock-widget-container {
93 | font-family: arial, sans-serif !important;
94 | }
95 |
96 | .auth0-lock-header-logo {
97 | display: none !important;
98 | }
99 |
100 | .auth0-lock-header {
101 | height: 50px !important;
102 | }
103 |
104 | ::selection {
105 | background: #aaa;
106 | }
107 | ::-moz-selection {
108 | background: #aaa;
109 | }
110 |
111 | .page-with-padding {
112 | padding: 40px;
113 | }
114 |
115 | .facebook-share {
116 | cursor: pointer;
117 | display: block;
118 | background: url("../images/FB-f-Logo__blue_29.png") no-repeat;
119 | background-size: 21px 21px;
120 | width: 21px;
121 | height: 21px;
122 | position: absolute;
123 | right: 0px;
124 | top: 0px;
125 | }
126 |
127 | .twitter-share {
128 | cursor: pointer;
129 | display: block;
130 | background: url("../images/Twitter_Logo_White_On_Blue.png") no-repeat;
131 | background-size: 21px 21px;
132 | width: 21px;
133 | height: 21px;
134 | position: absolute;
135 | right: 26px;
136 | border-radius: 2px;
137 | top: 0px;
138 | }
139 |
--------------------------------------------------------------------------------
/app/styles/hero.scss:
--------------------------------------------------------------------------------
1 | .hero {
2 | overflow: hidden;
3 | position: relative;
4 |
5 | &__image,
6 | &__image-combo {
7 | float: left;
8 | margin-right: 20px;
9 | }
10 |
11 | &__image-combo {
12 | width: 174px;
13 | height: 174px;
14 | position: relative;
15 | }
16 |
17 | &__identifier {
18 | text-transform: uppercase;
19 | color: #ccc;
20 | margin-top: 0px;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/app/styles/tracks.scss:
--------------------------------------------------------------------------------
1 | .tracks {
2 | margin: 40px 0;
3 |
4 | &__heading {
5 | text-transform: uppercase;
6 | color: #999;
7 | font-weight: normal;
8 | font-size: 12px;
9 | padding: 10px;
10 | text-align: left;
11 |
12 | &--no {
13 | width: 40px;
14 | }
15 |
16 | &--actions {
17 | width: 65px;
18 | }
19 | }
20 |
21 | &__table {
22 | border-collapse: collapse;
23 | width: 100%;
24 | table-layout: fixed;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/app/styles/variables.scss:
--------------------------------------------------------------------------------
1 | $route-content-padding: 40px 40px 0 40px;
2 |
--------------------------------------------------------------------------------
/app/utils/auth0-service.js:
--------------------------------------------------------------------------------
1 | import { isTokenExpired } from './jwt-helper';
2 |
3 | export default class auth0Service {
4 | constructor(hiddenCallback) {
5 | // if this is the client then instantiate the lock
6 | // this is a temporary workaround as there seems to be issues with auth0Lock and import
7 | // Auth0Lock only works in the browser also
8 | // TODO: Move authLock config out
9 | this.lock = new Auth0Lock(
10 | 'quW61JSOhGAG8vBykmt6vuSf3nS0vaTK',
11 | 'jamesfiltness.eu.auth0.com',
12 | {
13 | auth: {
14 | redirect: false
15 | },
16 | autoclose: true,
17 | languageDictionary: {
18 | title: "Tuneify"
19 | },
20 | }
21 | );
22 |
23 | this.lock.on('hide', () => {
24 | if (hiddenCallback) {
25 | hiddenCallback();
26 | }
27 | });
28 | }
29 |
30 | isLoggedIn() {
31 | return !!this.getToken() && !isTokenExpired(this.getToken());
32 | }
33 |
34 | setToken(tokenName, value) {
35 | localStorage.setItem(tokenName, value);
36 | }
37 |
38 | unsetToken(tokenName) {
39 | localStorage.removeItem(tokenName);
40 | }
41 |
42 | getToken(tokenName) {
43 | // Retrieves the user token from local storage
44 | return localStorage.getItem('idToken');
45 | }
46 |
47 | getProfileDetails() {
48 | if (this.isLoggedIn()) {
49 | const profile = localStorage.getItem('profile');
50 | const JSONProfile = JSON.parse(profile);
51 | return {
52 | name: JSONProfile.given_name,
53 | avatar: JSONProfile.picture
54 | }
55 | }
56 |
57 | return null;
58 | }
59 |
60 | logOut() {
61 | // Clear user token and profile data from local storage
62 | this.unsetToken('idToken');
63 | this.unsetToken('profile');
64 | }
65 |
66 | authenticate(callback) {
67 | this.showLock();
68 |
69 | this.lock.on("authenticated", (authResult) => {
70 | this.lock.getUserInfo(authResult.accessToken, (error, profile) => {
71 | if (error) {
72 | // Handle error
73 | return;
74 | }
75 |
76 | this.setToken("idToken", authResult.idToken);
77 | this.setToken("profile", JSON.stringify(profile));
78 | callback();
79 | });
80 | });
81 | }
82 |
83 | showLock() {
84 | this.lock.show();
85 | }
86 |
87 | hideLock() {
88 | this.lock.hide();
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/app/utils/jwt-helper.js:
--------------------------------------------------------------------------------
1 | import decode from 'jwt-decode';
2 |
3 | export function getTokenExpirationDate(token) {
4 | const decoded = decode(token)
5 | if(!decoded.exp) {
6 | return null
7 | }
8 |
9 | const date = new Date(0) // The 0 here is the key, which sets the date to the epoch
10 | date.setUTCSeconds(decoded.exp)
11 | return date
12 | }
13 |
14 | export function isTokenExpired(token) {
15 | const date = getTokenExpirationDate(token)
16 | const offsetSeconds = 0;
17 | if (date === null) {
18 | return false
19 | }
20 | return !(date.valueOf() > (new Date().valueOf() + (offsetSeconds * 1000)))
21 | }
22 |
--------------------------------------------------------------------------------
/app/utils/post-to-fb-feed.js:
--------------------------------------------------------------------------------
1 | export default function postToFeed(title, desc, url, image) {
2 | const obj = {
3 | method: 'feed',
4 | link: url,
5 | picture: image,
6 | name: title,
7 | description: desc
8 | };
9 |
10 | function callback(response){}
11 |
12 | FB.ui(obj, callback);
13 | }
14 |
--------------------------------------------------------------------------------
/app/utils/prepare-track-data.js:
--------------------------------------------------------------------------------
1 | export default function(trackArr, img) {
2 | return trackArr.map((track) => {
3 | const artist = typeof track.artist === 'object' ?
4 | track.artist.name :
5 | track.artist;
6 |
7 | const trackImg = track.image ? track.image : img;
8 |
9 | return {
10 | name: track.name,
11 | artist,
12 | image: trackImg,
13 | }
14 | });
15 | }
16 |
--------------------------------------------------------------------------------
/app/utils/youtube-data-api.js:
--------------------------------------------------------------------------------
1 | class YouTubeDataApi {
2 | constructor() {
3 | window.gapi.load('client', this.ApiLoaded);
4 | this.loadApi();
5 | }
6 |
7 | ApiLoaded() {
8 | console.log('Data API loaded');
9 | }
10 |
11 | loadApi() {
12 | const tag = document.createElement('script');
13 | tag.src = "http://apis.google.com/js/api.js";
14 | const firstScriptTag = document.getElementsByTagName('script')[0];
15 | firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
16 | }
17 | }
18 |
19 | export default YouTubeDataApi
20 |
--------------------------------------------------------------------------------
/config/default.json:
--------------------------------------------------------------------------------
1 | {
2 | "protocol": "http://",
3 | "baseurl": "localhost:8900",
4 | "port": 8900,
5 | "app-title": "Tuneify",
6 | "endpoints": {
7 | "lastfm": {
8 | "url": "https://ws.audioscrobbler.com/2.0/",
9 | "api_key": "57ee3318536b23ee81d6b27e36997cde"
10 | },
11 | "awslambda": {
12 | "url": "https://om2mx762gd.execute-api.eu-west-1.amazonaws.com/dev/"
13 | },
14 | "youtube" : {
15 | "url": "https://www.googleapis.com/youtube/v3/search?part=snippet&q=",
16 | "api_key": "AIzaSyBXmXzAhx7HgpOx9jdDh6X_y5ar13WAGBE"
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/config/production.json:
--------------------------------------------------------------------------------
1 | {
2 | "port": 3000,
3 | "endpoints": {
4 | "lastfm": {
5 | "url": "http://ws.audioscrobbler.com/2.0/",
6 | "api_key": "57ee3318536b23ee81d6b27e36997cde"
7 | },
8 | "awslambda": {
9 | "url": "https://om2mx762gd.execute-api.eu-west-1.amazonaws.com/dev/"
10 | },
11 | "youtube" : {
12 | "url": "https://www.googleapis.com/youtube/v3/search?part=snippet&q=",
13 | "api_key": "AIzaSyBXmXzAhx7HgpOx9jdDh6X_y5ar13WAGBE"
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/layout.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.title %>
6 |
15 |
26 |
43 |
44 | <% if (htmlWebpackPlugin.options.window) { %>
45 |
50 | <% } %>
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Tunefiy",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "npm run start:client",
8 | "start:client": "webpack-dev-server",
9 | "build": "rm -rf ./dist && webpack -p --config ./webpack.production.config.js",
10 | "test": "mocha --compilers js:babel-register test/helper app/**/spec.js",
11 | "coverage": "node_modules/.bin/nyc --reporter=text --reporter=lcov --require babel-core/register --all node_modules/.bin/mocha test/helper app/**/spec.js"
12 | },
13 | "author": "James Filtness",
14 | "license": "MIT",
15 | "dependencies": {
16 | "auth0-lock": "10.7.3",
17 | "babel-plugin-react-transform": "2.0.2",
18 | "babel-plugin-transform-class-properties": "6.19.0",
19 | "babel-plugin-transform-react-jsx": "6.8.0",
20 | "babel-polyfill": "6.13.0",
21 | "babel-preset-es2015": "6.13.2",
22 | "babel-register": "6.11.6",
23 | "classnames": "2.2.5",
24 | "config": "1.24.0",
25 | "es6-promise": "3.3.1",
26 | "extract-text-webpack-plugin": "2.0.0-rc.3",
27 | "isomorphic-fetch": "2.2.1",
28 | "jwt-decode": "2.1.0",
29 | "react": "15.4.1",
30 | "react-dom": "15.4.1",
31 | "react-redux": "4.4.5",
32 | "react-router": "2.6.1",
33 | "react-router-redux": "4.0.5",
34 | "redux": "3.5.2",
35 | "redux-logger": "2.8.1",
36 | "redux-thunk": "2.1.0",
37 | "throttleit": "1.0.0"
38 | },
39 | "devDependencies": {
40 | "babel-cli": "6.22.2",
41 | "babel-core": "6.13.2",
42 | "babel-eslint": "6.1.2",
43 | "babel-loader": "6.2.4",
44 | "babel-plugin-transform-object-rest-spread": "6.8.0",
45 | "chai": "3.5.0",
46 | "chai-enzyme": "0.6.0",
47 | "cheerio": "0.22.0",
48 | "css-loader": "0.26.1",
49 | "enzyme": "2.6.0",
50 | "eslint": "3.3.0",
51 | "eslint-config-airbnb": "10.0.1",
52 | "eslint-plugin-import": "1.13.0",
53 | "eslint-plugin-jsx-a11y": "2.1.0",
54 | "eslint-plugin-react": "6.1.0",
55 | "extract-text-webpack-plugin": "2.0.0-rc.3",
56 | "file-loader": "0.9.0",
57 | "html-webpack-plugin": "2.28.0",
58 | "jsdom": "9.8.3",
59 | "mocha": "3.1.2",
60 | "node-sass": "4.5.0",
61 | "nodemon": "1.11.0",
62 | "npm-run-all": "4.0.1",
63 | "nyc": "10.0.0",
64 | "react-addons-test-utils": "15.4.1",
65 | "sass-loader": "5.0.1",
66 | "sinon": "1.17.6",
67 | "sinon-chai": "2.8.0",
68 | "webpack": "2.2.1",
69 | "webpack-bundle-analyzer": "2.2.3",
70 | "webpack-dev-server": "1.16.3"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/server/lambda/authentication-service/handler.js:
--------------------------------------------------------------------------------
1 | const jwt = require('jsonwebtoken');
2 |
3 | // TODO: Replace this function with something based on the official AWS customAuthorizer blueprint
4 | function generatePolicyDocument(principalId, effect, resource) {
5 | const authResponse = {};
6 |
7 | authResponse.principalId = principalId;
8 | if (effect && resource) {
9 | const policyDocument = {};
10 | policyDocument.Version = '2012-10-17'; // default version
11 | policyDocument.Statement = [];
12 | const statementOne = {};
13 | statementOne.Action = 'execute-api:Invoke'; // default action
14 | statementOne.Effect = effect;
15 | statementOne.Resource = resource;
16 | policyDocument.Statement[0] = statementOne;
17 | authResponse.policyDocument = policyDocument;
18 | }
19 |
20 | authResponse.context = {};
21 | authResponse.context.userId = principalId;
22 |
23 | return authResponse;
24 | }
25 |
26 | module.exports.authorise = (event, context, callback) => {
27 | const token = event.authorizationToken;
28 | const secret = process.env.AUTH0_SECRET;
29 |
30 | jwt.verify(token, secret, function(err, decoded) {
31 | if (err) {
32 | callback("Unauthorized");
33 | } else if (decoded) {
34 | const userId = decoded.sub;
35 | callback(null, generatePolicyDocument(userId, 'Allow', '*'));
36 | }
37 | });
38 | };
39 |
--------------------------------------------------------------------------------
/server/lambda/authentication-service/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "authentication-service",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "handler.js",
6 | "scripts": {},
7 | "author": "James Filtness",
8 | "license": "MIT",
9 | "dependencies": {
10 | "jsonwebtoken": "7.2.1"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/server/lambda/authentication-service/serverless.yml:
--------------------------------------------------------------------------------
1 | service: authentication-service
2 | provider:
3 | name: aws
4 | runtime: nodejs4.3
5 | profile: personal-admin
6 | region: eu-west-1
7 | functions:
8 | authorise:
9 | handler: handler.authorise
10 | environment:
11 | AUTH0_SECRET: ${env:AUTH0_SECRET}
12 | resources:
13 | Resources:
14 | DynamoDbTable:
15 | Type: AWS::DynamoDB::Table
16 | Properties:
17 | TableName: users
18 | AttributeDefinitions:
19 | - AttributeName: id
20 | AttributeType: S
21 | KeySchema:
22 | - AttributeName: id
23 | KeyType: HASH
24 | ProvisionedThroughput:
25 | ReadCapacityUnits: 5
26 | WriteCapacityUnits: 5
27 | DynamoDBIamPolicy:
28 | Type: AWS::IAM::Policy
29 | DependsOn: DynamoDbTable
30 | Properties:
31 | PolicyName: lambda-dynamodb
32 | PolicyDocument:
33 | Version: '2012-10-17'
34 | Statement:
35 | - Effect: Allow
36 | Action:
37 | - dynamodb:GetItem
38 | - dynamodb:PutItem
39 | Resource: arn:aws:dynamodb:*:*:table/users
40 | Roles:
41 | - Ref: IamRoleLambdaExecution
42 |
--------------------------------------------------------------------------------
/server/lambda/playlist-service/handler.js:
--------------------------------------------------------------------------------
1 | const AWS = require('aws-sdk');
2 | const uuid = require('node-uuid');
3 |
4 | const docClient = new AWS.DynamoDB.DocumentClient();
5 |
6 | module.exports.savePlaylist = (event, context, callback) => {
7 | const jsonPayload = JSON.parse(event.body);
8 | const userId = event.requestContext.authorizer.userId;
9 | const playlistId = uuid.v4();
10 | const playlist = JSON.stringify(jsonPayload.playlist);
11 |
12 | const params = {
13 | TableName: 'playlists',
14 | Item: {
15 | id: playlistId,
16 | name: jsonPayload.playlistName,
17 | userid: userId,
18 | tracks: playlist
19 | }
20 | }
21 |
22 | docClient.put(params, function(err, data) {
23 | if (err) {
24 | console.log(error);
25 | callback(err);
26 | }
27 | else {
28 | const response = {
29 | statusCode: 200,
30 | headers: {
31 | "Access-Control-Allow-Origin" : "*"
32 | },
33 | body: JSON.stringify({
34 | id: playlistId,
35 | name: jsonPayload.playlistName,
36 | tracks: playlist,
37 | userId,
38 | }),
39 | };
40 |
41 | callback(null, response);
42 | }
43 | });
44 | }
45 |
46 | module.exports.updatePlaylist = (event, context, callback) => {
47 | const jsonPayload = JSON.parse(event.body);
48 | const playlistId = jsonPayload.playlistId;
49 | const playlist = JSON.stringify(jsonPayload.updatedTracklist);
50 | const params = {
51 | TableName: 'playlists',
52 | Key: {
53 | id: playlistId,
54 | },
55 | UpdateExpression: "set tracks = :tracks",
56 | ExpressionAttributeValues:{
57 | ":tracks": playlist,
58 | },
59 | ReturnValues:"ALL_NEW"
60 | };
61 |
62 | docClient.update(params, function(err, data) {
63 | if (err) {
64 | console.log(error);
65 | callback(err);
66 | }
67 | else {
68 | const response = {
69 | statusCode: 200,
70 | headers: {
71 | "Access-Control-Allow-Origin" : "*"
72 | },
73 | body: JSON.stringify({
74 | tracks: data.Attributes.tracks,
75 | id: data.Attributes.id,
76 | }),
77 | };
78 |
79 | callback(null, response);
80 | }
81 | });
82 | }
83 |
84 | module.exports.getPlaylistsByUserId = (event, context, callback) => {
85 | const userId = event.requestContext.authorizer.userId;
86 | const params = {
87 | TableName: 'playlists',
88 | IndexName: 'PlaylistUsers',
89 | KeyConditionExpression: "userid = :a",
90 | ExpressionAttributeValues: {
91 | ":a": userId
92 | }
93 | }
94 |
95 | docClient.query(params, function(err, data) {
96 | if (err) {
97 | console.log(err);
98 | } else {
99 | const response = {
100 | statusCode: 200,
101 | headers: {
102 | "Access-Control-Allow-Origin" : "*"
103 | },
104 | body: JSON.stringify({
105 | data: data
106 | }),
107 | };
108 | callback(null, response);
109 | }
110 | });
111 | };
112 |
113 |
--------------------------------------------------------------------------------
/server/lambda/playlist-service/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playlist-service",
3 | "version": "1.0.0",
4 | "description": "Playlist service for Tuneify",
5 | "main": "handler.js",
6 | "scripts": {},
7 | "author": "James Filtness",
8 | "license": "MIT",
9 | "dependencies": {
10 | "node-uuid": "^1.4.7"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/server/lambda/playlist-service/serverless.yml:
--------------------------------------------------------------------------------
1 | service: playlist-service
2 | provider:
3 | name: aws
4 | runtime: nodejs4.3
5 | profile: personal-admin
6 | region: eu-west-1
7 | functions:
8 | getPlaylistsByUserId:
9 | handler: handler.getPlaylistsByUserId
10 | events:
11 | - http:
12 | path: playlists
13 | method: get
14 | cors: true
15 | authorizer:
16 | arn: arn:aws:lambda:eu-west-1:${env:AWS_ACCOUNT_NO}:function:authentication-service-dev-authorise
17 | savePlaylist:
18 | handler: handler.savePlaylist
19 | events:
20 | - http:
21 | path: playlists
22 | method: post
23 | cors: true
24 | authorizer:
25 | arn: arn:aws:lambda:eu-west-1:${env:AWS_ACCOUNT_NO}:function:authentication-service-dev-authorise
26 | updatePlaylist:
27 | handler: handler.updatePlaylist
28 | events:
29 | - http:
30 | path: playlists
31 | method: put
32 | cors: true
33 | authorizer:
34 | arn: arn:aws:lambda:eu-west-1:${env:AWS_ACCOUNT_NO}:function:authentication-service-dev-authorise
35 | resources:
36 | Resources:
37 | DynamoDbTable:
38 | Type: AWS::DynamoDB::Table
39 | Properties:
40 | TableName: playlists
41 | AttributeDefinitions:
42 | - AttributeName: id
43 | AttributeType: S
44 | - AttributeName: userid
45 | AttributeType: S
46 | KeySchema:
47 | - AttributeName: id
48 | KeyType: HASH
49 | ProvisionedThroughput:
50 | ReadCapacityUnits: 5
51 | WriteCapacityUnits: 5
52 | # Allow queries to get playlists by userID
53 | GlobalSecondaryIndexes:
54 | - IndexName: PlaylistUsers
55 | KeySchema:
56 | - AttributeName: userid
57 | KeyType: HASH
58 | - AttributeName: id
59 | KeyType: RANGE
60 | Projection:
61 | ProjectionType: ALL
62 | ProvisionedThroughput:
63 | ReadCapacityUnits: 5
64 | WriteCapacityUnits: 5
65 | DynamoDBIamPolicy:
66 | Type: AWS::IAM::Policy
67 | DependsOn: DynamoDbTable
68 | Properties:
69 | PolicyName: lambda-dynamodb
70 | PolicyDocument:
71 | Version: '2012-10-17'
72 | Statement:
73 | - Effect: Allow
74 | Action:
75 | - dynamodb:*
76 | Resource:
77 | - arn:aws:dynamodb:*:*:table/playlists
78 | - arn:aws:dynamodb:*:*:table/playlists/index/*
79 | Roles:
80 | - Ref: IamRoleLambdaExecution
81 |
--------------------------------------------------------------------------------
/test/helper.js:
--------------------------------------------------------------------------------
1 | // TODO: comment this file
2 |
3 | global.document = require('jsdom').jsdom('');
4 | global.window = document.defaultView;
5 | global.navigator = {
6 | userAgent: 'node.js',
7 | };
8 |
9 | const exposedProperties = ['window', 'navigator', 'document'];
10 |
11 | Object.keys(document.defaultView).forEach((property) => {
12 | if (typeof global[property] === 'undefined') {
13 | exposedProperties.push(property);
14 | global[property] = document.defaultView[property];
15 | }
16 | });
17 |
18 | const chai = require('chai');
19 | const sinonChai = require('sinon-chai');
20 | const chaiEnzyme = require('chai-enzyme');
21 | const { mount, shallow, render } = require('enzyme');
22 |
23 | chai.should();
24 | chai.use(sinonChai);
25 |
26 | global.mount = mount;
27 | global.shallow = shallow;
28 | global.render = render;
29 | global.expect = chai.expect;
30 |
31 | chai.use(chaiEnzyme());
32 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const config = require('config');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
5 | const path = require('path');
6 |
7 | module.exports = {
8 | entry: {
9 | app: [
10 | path.resolve(__dirname, './app'),
11 | ],
12 | },
13 | output: {
14 | path: path.resolve(__dirname, '/dist'),
15 | publicPath: '/',
16 | filename: 'bundle.js',
17 | },
18 | module: {
19 | rules: [
20 | {
21 | test: /\.js?$/,
22 | loader: 'babel-loader',
23 | exclude: 'node_modules',
24 | },
25 | {
26 | test: /\.scss$/,
27 | use: ExtractTextPlugin.extract({
28 | use: ['css-loader', 'sass-loader'],
29 | }),
30 | exclude: 'node_modules',
31 | },
32 | {
33 | test: /\.(jpg|png|gif|svg|woff|woff2|eot|ttf)(\?.*$|$)/i,
34 | loader: 'file-loader',
35 | exclude: 'node_modules',
36 | },
37 | ],
38 | },
39 | devServer: {
40 | historyApiFallback: true,
41 | port: 8900,
42 | },
43 | devtool: 'source-map',
44 | plugins: [
45 | new HtmlWebpackPlugin({
46 | title: config.get('app-title'),
47 | template: 'layout.ejs',
48 | window: {
49 | clientConfig: {
50 | endpoints: config.get('endpoints'),
51 | protocol: config.get('protocol'),
52 | baseurl: config.get('baseurl'),
53 | },
54 | },
55 | }),
56 | new ExtractTextPlugin('styles.css'),
57 | ],
58 | };
59 |
60 |
--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
1 | const config = require('config');
2 | const webpack = require('webpack');
3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 | const path = require('path');
6 |
7 | module.exports = {
8 | entry: {
9 | app: [
10 | path.resolve(__dirname, './app'),
11 | ],
12 | },
13 | output: {
14 | path: path.resolve(__dirname, './dist'),
15 | publicPath: '/',
16 | filename: 'bundle-[chunkhash].js',
17 | },
18 | devtool: 'source-map',
19 | module: {
20 | rules: [
21 | {
22 | test: /\.js?$/,
23 | loader: 'babel-loader',
24 | exclude: 'node_modules',
25 | },
26 | {
27 | test: /\.scss$/,
28 | use: ExtractTextPlugin.extract({
29 | use: ['css-loader', 'sass-loader'],
30 | }),
31 | exclude: 'node_modules',
32 | },
33 | {
34 | test: /\.(jpg|png|gif|svg|woff|woff2|eot|ttf)(\?.*$|$)/i,
35 | loader: 'file-loader',
36 | exclude: 'node_modules',
37 | },
38 | ],
39 | },
40 | plugins: [
41 | new ExtractTextPlugin('styles-[chunkhash].css'),
42 | new HtmlWebpackPlugin({
43 | title: config.get('app-title'),
44 | template: 'layout.ejs',
45 | window: {
46 | clientConfig: {
47 | endpoints: config.get('endpoints'),
48 | },
49 | },
50 | minify: {
51 | collapseWhitespace: true,
52 | removeComments: true,
53 | },
54 | }),
55 | new webpack.DefinePlugin({
56 | 'process.env.NODE_ENV': '"production"',
57 | }),
58 | new webpack.optimize.UglifyJsPlugin({
59 | beautify: false,
60 | comments: false,
61 | sourceMap: true,
62 | }),
63 | ],
64 | };
65 |
66 |
--------------------------------------------------------------------------------
32 | 
39 | {profile.name}
40 |
41 |