Lyrics modal v0.0.1

mopidy_iris/core.py

@@ -587,6 +587,7 @@ class IrisCore(object):
             }
 
 
+
     ##
     # Proxy a request to an external provider
     #

src/js/components/Modal/TrackInfoModal.js

@@ -13,8 +13,14 @@ export default class TrackInfoModal extends React.Component{
 	}
 
 	componentDidMount(){
-		if (this.props.current_track && !this.props.current_track.annotations){
-			this.props.geniusActions.getTrackInfo(this.props.current_track);
+		if (this.props.current_track && !this.props.current_track.lyrics){
+			this.props.geniusActions.getTrackLyrics(this.props.current_track);
+		}
+	}
+
+	componentWillReceiveProps(nextProps){
+		if (nextProps.current_track && nextProps.current_track.uri !== this.props.current_track.uri && !nextProps.current_track.lyrics){
+			this.props.geniusActions.getTrackLyrics(nextProps.current_track);
 		}
 	}
 
@@ -29,7 +35,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.annotations ? track.annotations.id : "No annotations"}
+				{track && track.lyrics ? <div className="lyrics" dangerouslySetInnerHTML={{__html: track.lyrics}}></div> : "No lyrics"}
 			</div>
 		)
 	}

src/js/services/genius/actions.js

@@ -47,6 +47,51 @@ const sendRequest = (dispatch, getState, endpoint) => {
     })
 }
 
+export function getTrackLyrics(track){
+    return (dispatch, getState) => {
+
+        var query = '';
+        for (var i = 0; i < track.artists.length; i++){
+            query += track.artists[i].name+' ';
+        }
+        query += track.name+' lyrics';
+        query = query.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'
+        };
+
+        $.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; });
+
+                    dispatch({
+                        type: 'TRACK_LOADED',
+                        key: track.uri,
+                        track: {
+                            lyrics: lyrics.html()
+                        }
+                    });
+                }
+            },
+            (xhr, status, error) => {
+                console.log(xhr, status, error)
+            }
+        )
+    }
+}
+
 export function getTrackInfo(track){
     return (dispatch, getState) => {
 

src/scss/global/_core.scss

@@ -149,6 +149,15 @@ h2 {
 	font-size: 1.8rem;
 	font-weight: 400;
 	line-height: 2.2rem;
+
+	a {
+		color: inherit;
+		text-decoration: none;
+
+		&:hover {
+			border-bottom: 1px solid $white;
+		}
+	}
 }
 
 h3 {