101 |
103 |
;
105 | }
106 |
107 | renderPlaylist() {
108 | return
51 |
;
58 | }
59 |
60 | renderShare() {
61 | return
52 | { this.props.status.loading ? this.renderLoading() : null }
53 | { this.props.status.fail ? this.renderFail() : null }
54 | { this.props.status.share ? this.renderShare() : null }
55 | { this.props.status.limit ? this.renderLimit() : null }
56 |
57 |
62 | High five {this.props.username}!
63 | Your playlist is now on Spotify.
64 |
65 | Go to your playlists lists or play it online.
69 |
70 | Share it with your friends
71 |
;
81 | }
82 |
83 | renderLimit() {
84 | return
72 |
79 |
73 | 
74 |
75 |
74 |
76 | 
77 |
78 |
77 | Close window
80 |
85 | Ohh to many people here!
86 |
87 | Try again in a seconds or login for ensure your search.
88 |
89 |
;
92 | }
93 |
94 | renderFail() {
95 | return Close
90 | Login
91 |
96 | Huston, we have a problem here! :(
97 | 
98 |
;
99 | }
100 |
101 | renderLoading() {
102 | return
98 | 
18 |
;
44 | }
45 | }
46 |
47 | export default Footer;
48 |
--------------------------------------------------------------------------------
/app/js/components/Loading.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | let Loading = () => {
6 | return
19 | Developed by @loverajoel
24 | / Designed by @aschelstraete
28 | / Source Code
33 | / @magicplaylistco
37 |
38 | Created using the API of 
42 |
43 |
42 | ;
7 | };
8 |
9 | export default Loading;
10 |
--------------------------------------------------------------------------------
/app/js/components/Modal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 | import ReactDOM from 'react-dom';
5 |
6 | import {close} from '../actions/ModalActions';
7 | import {login} from '../actions/UserActions';
8 | import {save} from '../actions/PlaylistActions';
9 |
10 | import PlaylistStore from '../stores/PlaylistStore';
11 | import UserStore from '../stores/UserStore';
12 |
13 | class Modal extends Component {
14 |
15 | constructor(props) {
16 | super(props);
17 | this.state = {
18 | inputError: false,
19 | playlistName: '',
20 | playlistPublic: true
21 | };
22 | }
23 |
24 | componentDidMount() {
25 | ReactDOM.findDOMNode(this.refs.playlistName).focus();
26 | }
27 |
28 | _handleClose() {
29 | close();
30 | ga('send', 'event', 'button', 'click', 'close-modal');
31 | }
32 |
33 | _savePlaylist() {
34 | const playlistName = ReactDOM.findDOMNode(this.refs.playlistName).value;
35 | close();
36 | save(
37 | UserStore.getUser()._id,
38 | playlistName,
39 | this.state.playlistPublic, PlaylistStore.getTracks()
40 | );
41 | }
42 |
43 | _validateForm() {
44 | const playlistName = ReactDOM.findDOMNode(this.refs.playlistName).value;
45 | let isValid = playlistName.length > 3;
46 | this.setState({
47 | inputError: !isValid
48 | });
49 |
50 | return isValid;
51 | }
52 |
53 | _handleSave() {
54 | if (!this._validateForm()) {
55 | return;
56 | }
57 | if (this.props.token &&
58 | this.props.user &&
59 | Number(localStorage.magic_token_expires) > Date.now())
60 | {
61 | this._savePlaylist();
62 | } else {
63 | login().then(() => {
64 | this._savePlaylist();
65 | });
66 | }
67 | ga('send', 'event', 'button', 'click', 'playlist-save');
68 | }
69 |
70 | _handlePublic(status) {
71 | this.setState({
72 | playlistPublic: status
73 | });
74 | }
75 |
76 | render() {
77 | let inputPlaceholder = this.state.inputError ? 'Please enter a valid name!' : 'Name';
78 | let inputClass = this.state.inputError ? 'playlist-name error' : 'playlist-name';
79 | return
80 |
;
120 | }
121 | }
122 |
123 | export default Modal;
124 |
--------------------------------------------------------------------------------
/app/js/components/Player.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 | import ReactDOM from 'react-dom';
5 |
6 | class Track extends Component {
7 |
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | src: this.props.source,
12 | elem: null,
13 | isPlaying: false,
14 | isLoading: false
15 | };
16 | this.playerEvent = {};
17 | }
18 |
19 | componentDidMount() {
20 | this.audioTag = ReactDOM.findDOMNode(this.refs.audio);
21 | this.props.ptag(this.audioTag);
22 |
23 | this.playerEvent.loadStart = () => {
24 | this.setState({
25 | isLoading: true
26 | });
27 | };
28 |
29 | this.playerEvent.loadEnd = () => {
30 | this.setState({
31 | isLoading: false
32 | });
33 | };
34 |
35 | this.playerEvent.isPlaying = () => {
36 | this.setState({
37 | isPlaying: false
38 | });
39 | };
40 |
41 | this.audioTag.addEventListener('ended', this.playerEvent.isPlaying);
42 | this.audioTag.addEventListener('pause', this.playerEvent.isPlaying);
43 | this.audioTag.addEventListener('loadeddata', this.playerEvent.loadEnd);
44 | this.audioTag.addEventListener('loadstart', this.playerEvent.loadStart);
45 | this.audioTag.addEventListener('suspend', this.playerEvent.loadEnd);
46 | }
47 |
48 | componentWillUnmount() {
49 | this.audioTag.removeEventListener('ended', this.playerEvent.isPlaying);
50 | this.audioTag.removeEventListener('pause', this.playerEvent.isPlaying);
51 | this.audioTag.removeEventListener('loadeddata', this.playerEvent.loadEnd);
52 | this.audioTag.removeEventListener('loadstart', this.playerEvent.loadStart);
53 | this.audioTag.removeEventListener('suspend', this.playerEvent.loadStart);
54 | }
55 |
56 | _play() {
57 | this.props.stopAll.apply();
58 | this.audioTag.play();
59 | this.setState({
60 | isPlaying: true
61 | });
62 | ga('send', 'event', 'button', 'click', 'playlist-play');
63 | }
64 |
65 | _stop() {
66 | this.audioTag.pause();
67 | this.setState({
68 | isPlaying: false
69 | });
70 | ga('send', 'event', 'button', 'click', 'playlist-stop');
71 | }
72 |
73 | render() {
74 | return
81 |
119 |
82 | 
83 |
84 |
83 |
85 |
91 |
92 | Playlist Status
93 |
94 |
101 |
102 |
109 |
110 |
111 |
112 |
117 |
118 |
75 | { !this.state.isPlaying && !this.state.isLoading ?
76 | 
: null
77 | }
78 | { this.state.isPlaying && !this.state.isLoading ?
79 | 
: null
80 | }
81 | { this.state.isLoading ?
82 | 
: null
83 | }
84 |
85 |
;
86 | }
87 | }
88 |
89 | export default Track;
90 |
--------------------------------------------------------------------------------
/app/js/components/Playlist.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 | import Track from './track';
5 | import {open} from '../actions/ModalActions';
6 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
7 |
8 | class Playlist extends Component {
9 |
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | audios: []
14 | };
15 | }
16 |
17 | _handleSave() {
18 | open();
19 | ga('send', 'event', 'button', 'click', 'open-modal-save-playlist');
20 | }
21 |
22 | _add(elem) {
23 | this.state.audios.push(elem);
24 | }
25 |
26 | _stopAll() {
27 | this.state.audios.map((item) => {
28 | item.pause();
29 | });
30 | }
31 |
32 | render() {
33 | var tracks = this.props.tracks.map((track, i) => {
34 | return ;
42 | });
43 | return : null
77 | }
78 | { this.state.isPlaying && !this.state.isLoading ?
79 | : null
80 | }
81 | { this.state.isLoading ?
82 | : null
83 | }
84 |
85 |
44 |
;
71 | }
72 | }
73 |
74 | export default Playlist;
75 |
--------------------------------------------------------------------------------
/app/js/components/SearchBox.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 | import ReactDOM from 'react-dom';
5 | import Autosuggest from 'react-autosuggest';
6 |
7 | import {newSearch} from '../actions/SearchActions';
8 | import PlaylistActions from '../actions/PlaylistActions';
9 |
10 | import Spotify from '../core/Spotify';
11 |
12 | class SearchBox extends Component {
13 |
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | initialValue: this.props.value
18 | };
19 | }
20 |
21 | _search(text) {
22 | newSearch(text);
23 | PlaylistActions.search(text, this.props.country);
24 | ga('send', 'event', 'event', 'new-search', text);
25 | }
26 |
27 | _handleSearch() {
28 | // I know that's ugly :(
29 | const text = document.querySelector('#search-input').value;
30 | if (text.length > 3) {
31 | this._search(text);
32 | ga('send', 'event', 'button', 'click', 'search-box-input');
33 | }
34 | }
35 |
36 | _handleKeyPress(event) {
37 | if (event.key === 'Enter') {
38 | const text = event.target.value;
39 | if (text.length > 3) {
40 | this._search(text);
41 | ga('send', 'event', 'key', 'press', 'search-box-enter');
42 | }
43 | }
44 | }
45 |
46 | render() {
47 | let country = this.props.country;
48 | let time;
49 | let getSuggestions = (input, callback) => {
50 | if (time) {
51 | clearTimeout(time);
52 | }
53 | time = setTimeout(() => {
54 | Spotify.autocomplete(input, country).then((tracks) => {
55 | ga('send', 'event', 'load', 'suggestion', 'show');
56 | callback(null, tracks);
57 | });
58 | }, 500);
59 | };
60 |
61 | let suggestionRenderer = (track) => {
62 | return {track.name}, {track.artists.first().name};
63 | };
64 |
65 | let getSuggestionValue = (track) => {
66 | return `${track.name}, ${track.artists.first().name}`;
67 | };
68 |
69 | let showWhen = (input) => {
70 | return input.trim().length > 3;
71 | };
72 |
73 | let onSuggestionSelected = (suggestion) => {
74 | ga('send', 'event', 'click', 'suggestion', 'click-suggestion');
75 | this._search(suggestion);
76 | };
77 |
78 | const inputAttributes = {
79 | id: 'search-input',
80 | type: 'text',
81 | ref: 'searchInput',
82 | className: 'input-search',
83 | placeholder: 'What is your favorite song?',
84 | onKeyPress: this._handleKeyPress.bind(this)
85 | };
86 |
87 | return
45 | { !this.props.tracks.length ?
46 |
61 | Hey! The track doesn't exist! :(
: null
47 | }
48 | { this.props.mainTrack ?
49 |
50 |
51 | {this.props.mainTrack.name}
52 | , {this.props.mainTrack.artists.first().name}
53 |
: null
54 | }
55 | { this.props.tracks.length ?
56 |
57 | Save playlist on Spotify
58 |
: null
59 | }
60 | -
62 |
88 |
;
106 | }
107 |
108 | }
109 |
110 | export default SearchBox;
111 |
--------------------------------------------------------------------------------
/app/js/components/Tip.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 |
5 | let Tip = () => {
6 | return
89 |
90 |
105 |
91 | 
92 |
93 |
94 |
92 |
7 | Tip: Type a song + artist for better results.
8 | (ex: Billie Jean, Michael Jackson)
9 |
;
10 | };
11 |
12 | export default Tip;
13 |
--------------------------------------------------------------------------------
/app/js/components/Title.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | let Title = () => {
6 | return
7 |
;
10 | };
11 |
12 | export default Title;
13 |
--------------------------------------------------------------------------------
/app/js/components/Top.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 | import {resetSearch} from '../actions/SearchActions';
5 | import SearchBox from './SearchBox';
6 |
7 | class Top extends Component {
8 |
9 | constructor(props) {
10 | super(props);
11 | }
12 |
13 | _handleTitle() {
14 | resetSearch();
15 | }
16 |
17 | render() {
18 | return MagicPlaylist /
8 |Get the playlist of your dreams based on a song.
9 |
19 |
;
26 | }
27 | }
28 |
29 | export default Top;
30 |
--------------------------------------------------------------------------------
/app/js/components/Track.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, {Component} from 'react';
4 | import PlaylistActions from '../actions/PlaylistActions';
5 | import Player from './Player';
6 |
7 | class Track extends Component {
8 |
9 | constructor(props) {
10 | super(props);
11 | }
12 |
13 | _remove() {
14 | PlaylistActions.removeTrack(this.props.index);
15 | ga('send', 'event', 'button', 'click', 'playlist-remove-track');
16 | }
17 |
18 | _handleReSearch() {
19 | PlaylistActions.search(this.props.track, this.props.country);
20 | ga('send', 'event', 'event', 'new-re-search', this.props.track.name);
21 | }
22 |
23 | render() {
24 | let track = this.props.track;
25 | return
20 | MagicPlaylist /
21 |
22 |
23 |
24 |
25 | {track.name}, {track.artists.first().name}
27 |
32 | 
33 |
34 |
33 |
35 |
39 |
40 |
45 | 
46 |
47 |
46 |