From 011750796ce2a628806dfa58b329f6ef1fe3cecd Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Mon, 9 Oct 2017 16:56:09 +1300
Subject: [PATCH] Loader for lyrics

---
 src/js/components/Modal/Modal.js          | 83 +++++++++++++++++++----
 src/js/components/Modal/TrackInfoModal.js | 18 ++++-
 src/js/services/core/middleware.js        |  1 -
 src/js/services/genius/actions.js         | 66 +++++++++---------
 src/scss/components/_modal.scss           |  7 ++
 5 files changed, 128 insertions(+), 47 deletions(-)

diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js
index 86ad28f4..f547e84e 100755
--- a/src/js/components/Modal/Modal.js
+++ b/src/js/components/Modal/Modal.js
@@ -49,18 +49,76 @@ class Modal extends React.Component{
 				</div>
 				<div className="content">
 
-					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} spotifyActions={this.props.spotifyActions} mopidyActions={this.props.mopidyActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} spotify_library_playlists={this.props.spotify_library_playlists} mopidy_library_playlists={this.props.mopidy_library_playlists} processes={this.props.processes} /> : null }
-					{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} /> : null }
-					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} /> : null }
-					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} data={this.props.modal.data} /> : null }
-					{ this.props.modal.name == 'send_authorization' ? <AuthorizationModal_Send uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }
-					{ this.props.modal.name == 'receive_authorization' ? <AuthorizationModal_Receive uiActions={this.props.uiActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} /> : null }
-					{ this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} radio={this.props.radio} artists={this.props.artists} tracks={this.props.tracks} /> : null }
-					{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
-					{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} current_track={this.props.current_track} /> : null }
-					{ this.props.modal.name == 'search_uri_schemes' ? <SearchURISchemesModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} search_uri_schemes={this.props.search_uri_schemes} available_uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null }
-					{ this.props.modal.name == 'volume' ? <VolumeModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} volume={this.props.volume} mute={this.props.mute} /> : null }
-					{ this.props.modal.name == 'track_info' ? <TrackInfoModal uiActions={this.props.uiActions} geniusActions={this.props.geniusActions} current_track={this.props.current_track} /> : null }
+					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal 
+						uiActions={this.props.uiActions} 
+						coreActions={this.props.coreActions} 
+						spotifyActions={this.props.spotifyActions} 
+						mopidyActions={this.props.mopidyActions} 
+						playlists={this.props.playlists} 
+						tracks_uris={this.props.modal.data.tracks_uris} 
+						spotify_library_playlists={this.props.spotify_library_playlists} 
+						mopidy_library_playlists={this.props.mopidy_library_playlists} 
+						processes={this.props.processes} /> : null }
+
+					{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal
+						uiActions={this.props.uiActions} 
+						mopidyActions={this.props.mopidyActions} /> : null }
+
+					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal
+						uiActions={this.props.uiActions}
+						coreActions={this.props.coreActions} /> : null }
+
+					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal
+						uiActions={this.props.uiActions}
+						coreActions={this.props.coreActions}
+						data={this.props.modal.data} /> : null }
+
+					{ this.props.modal.name == 'send_authorization' ? <AuthorizationModal_Send
+						uiActions={this.props.uiActions}
+						pusherActions={this.props.pusherActions}
+						data={this.props.modal.data} /> : null }
+
+					{ this.props.modal.name == 'receive_authorization' ? <AuthorizationModal_Receive 
+						uiActions={this.props.uiActions} 
+						spotifyActions={this.props.spotifyActions} 
+						data={this.props.modal.data} /> : null }
+
+					{ this.props.modal.name == 'edit_radio' ? <EditRadioModal 
+						uiActions={this.props.uiActions} 
+						pusherActions={this.props.pusherActions} 
+						spotifyActions={this.props.spotifyActions} 
+						data={this.props.modal.data} 
+						radio={this.props.radio} 
+						artists={this.props.artists} 
+						tracks={this.props.tracks} /> : null }
+
+					{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal 
+						uiActions={this.props.uiActions} 
+						data={this.props.modal.data} /> : null }
+
+					{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal 
+						uiActions={this.props.uiActions} 
+						data={this.props.modal.data} 
+						current_track={this.props.current_track} /> : null }
+
+					{ this.props.modal.name == 'search_uri_schemes' ? <SearchURISchemesModal 
+						uiActions={this.props.uiActions} 
+						coreActions={this.props.coreActions} 
+						search_uri_schemes={this.props.search_uri_schemes} 
+						available_uri_schemes={this.props.uri_schemes} 
+						data={this.props.modal.data} /> : null }
+
+					{ this.props.modal.name == 'volume' ? <VolumeModal
+						uiActions={this.props.uiActions}
+						mopidyActions={this.props.mopidyActions} 
+						volume={this.props.volume} 
+						mute={this.props.mute} /> : null }
+
+					{ this.props.modal.name == 'track_info' ? <TrackInfoModal 
+						load_queue={this.props.load_queue}
+						uiActions={this.props.uiActions}
+						geniusActions={this.props.geniusActions}
+						current_track={this.props.current_track} /> : null }
 
 				</div>
 			</div>
@@ -82,6 +140,7 @@ const mapStateToProps = (state, ownProps) => {
 		playlists: state.core.playlists,
 		context_menu: state.ui.context_menu,
 		processes: state.ui.processes,
+		load_queue: state.ui.load_queue,
 		mopidy_connected: state.mopidy.connected,
 		spotify_authorized: state.spotify.authorization,
 		spotify_library_playlists: state.spotify.library_playlists,
diff --git a/src/js/components/Modal/TrackInfoModal.js b/src/js/components/Modal/TrackInfoModal.js
index ce9fd078..7a4977f0 100755
--- a/src/js/components/Modal/TrackInfoModal.js
+++ b/src/js/components/Modal/TrackInfoModal.js
@@ -24,6 +24,22 @@ export default class TrackInfoModal extends React.Component{
 		}
 	}
 
+	renderLyrics(track){
+		if (helpers.isLoading(this.props.load_queue,['genius_'])){
+			return (
+				<div className="body-loader loading">
+					<div className="loader"></div>
+				</div>
+			);
+		} else if (!track){
+			return <div className="lyrics">Could not load track</div>
+		} else if (!track.lyrics){
+			return <div className="lyrics">No lyrics available</div>
+		} else {
+			return <div className="lyrics" dangerouslySetInnerHTML={{__html: track.lyrics}}></div>
+		}
+	}
+
 	render(){
 		if (this.props.current_track){
 			var track = this.props.current_track;
@@ -35,7 +51,7 @@ export default class TrackInfoModal extends React.Component{
 			<div>
 				<h1>Track info</h1>
 				{track ? <h2 className="grey-text">{track.name} by <ArtistSentence artists={track.artists} /></h2> : null}
-				{track && track.lyrics ? <div className="lyrics" dangerouslySetInnerHTML={{__html: track.lyrics}}></div> : "No lyrics"}
+				{this.renderLyrics(track)}
 			</div>
 		)
 	}
diff --git a/src/js/services/core/middleware.js b/src/js/services/core/middleware.js
index fdb6f3ea..cd64d202 100755
--- a/src/js/services/core/middleware.js
+++ b/src/js/services/core/middleware.js
@@ -7,7 +7,6 @@ var pusherActions = require('../pusher/actions.js');
 var mopidyActions = require('../mopidy/actions.js');
 var spotifyActions = require('../spotify/actions.js');
 var lastfmActions = require('../lastfm/actions.js');
-var geniusActions = require('../genius/actions.js');
 var helpers = require('../../helpers.js');
 
 const CoreMiddleware = (function(){
diff --git a/src/js/services/genius/actions.js b/src/js/services/genius/actions.js
index a66ac149..06ffaac3 100755
--- a/src/js/services/genius/actions.js
+++ b/src/js/services/genius/actions.js
@@ -24,7 +24,7 @@ const sendRequest = (dispatch, getState, endpoint) => {
                 Authorization: 'Bearer 2AGP9sfzKQcxfKSZuGa_3lqsDIpuOiTGT7-vhJYcKaaDjHIIA2HICsxXCiC30Xxi'
             },
             data: JSON.stringify({
-                url: 'https://api.genius.com/'+endpoint
+                url: 'https://genius.com/'+endpoint
             }),
             url: '//'+getState().mopidy.host+':'+getState().mopidy.port+'/iris/http/proxy_request'
         };
@@ -50,45 +50,45 @@ const sendRequest = (dispatch, getState, endpoint) => {
 export function getTrackLyrics(track){
     return (dispatch, getState) => {
 
-        var query = '';
+        var endpoint = '';
         for (var i = 0; i < track.artists.length; i++){
-            query += track.artists[i].name+' ';
+            endpoint += track.artists[i].name+' ';
         }
-        query += track.name+' lyrics';
-        query = query.replace(/\s+/g, '-').toLowerCase();
+        endpoint += track.name+' lyrics';
+        endpoint = endpoint.replace(/\s+/g, '-').toLowerCase();
 
-        var config = {
-            method: 'POST',
-            cache: false,
-            timeout: 15000,
-            data: JSON.stringify({
-                url: 'https://genius.com/'+query
-            }),
-            url: '//'+getState().mopidy.host+':'+getState().mopidy.port+'/iris/http/proxy_request'
-        };
+        sendRequest(dispatch, getState, endpoint)
+            .then(
+                response => {
+                    var html = $(response);
+                    var lyrics = html.find('.lyrics');
+                    if (lyrics.length > 0){
 
-        $.ajax(config).then( 
-            response => {
-                var html = $(response.response);
-                var lyrics = html.find('.lyrics');
-                if (lyrics.length > 0){
+                        lyrics = lyrics.first();
+                        lyrics.find('a').replaceWith(function(){ 
+                            return this.innerHTML;
+                        });
 
-                    lyrics = lyrics.first();
-                    lyrics.find('a').replaceWith(function(){ return this.innerHTML; });
+                        var lyrics_html = lyrics.html();
+                        lyrics_html = lyrics_html.replace(/(\[)/g, '<span class="grey-text">[');
+                        lyrics_html = lyrics_html.replace(/(\])/g, ']</span>');
 
-                    dispatch({
-                        type: 'TRACK_LOADED',
-                        key: track.uri,
-                        track: {
-                            lyrics: lyrics.html()
-                        }
-                    });
+                        dispatch({
+                            type: 'TRACK_LOADED',
+                            key: track.uri,
+                            track: {
+                                lyrics: lyrics_html
+                            }
+                        });
+                    }
+                },
+                error => {
+                    dispatch(coreActions.handleException(
+                        'Could not get track lyrics',
+                        error
+                    ));
                 }
-            },
-            (xhr, status, error) => {
-                console.log(xhr, status, error)
-            }
-        )
+            );
     }
 }
 
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index c962dedf..e29490a9 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -269,6 +269,13 @@
 		}
 	}
 
+	&.track_info {
+		.lyrics {
+			font-size: 1.2em;
+			padding: 60px 0;
+		}
+	}
+
 	.actions {
 		padding-top: 50px;
 		text-align: center;