Refresh audio stream; Genius provider

src/js/components/Fields/OutputControl.js

@@ -60,9 +60,14 @@ class OutputControl extends React.Component{
 		return (
 			<div className="outputs">
 				{this.props.http_streaming_enabled ? <div className="output icecast-output">
-					<span className="name">
+					<div className="actions">
+						<span className="action" onClick={e => this.props.coreActions.cachebustHttpStream()}>
+							<Icon name="refresh" />
+						</span>
+					</div>
+					<div className="name">
 						Local browser
-					</span>
+					</div>
 					<VolumeControl 
 						className="client-volume-control"
 						volume={this.props.http_streaming_volume}
@@ -77,9 +82,9 @@ class OutputControl extends React.Component{
 
 						return (
 							<div className="output snapcast-output" key={client.id}>
-								<span className="name">
+								<div className="name">
 									{name}
-								</span>
+								</div>
 								<VolumeControl 
 									className="client-volume-control"
 									volume={client.config.volume.percent}

src/js/services/genius/actions.js

@@ -46,9 +46,9 @@ const sendRequest = (dispatch, getState, endpoint) => {
  * We don't get the lyrics in the API, so we need to 'scrape' the HTML page instead
  *
  * @param uri = track uri
- * @param result = lyrics result (title, url)
+ * @param path = String, the relative API path for the HTML lyrics
  **/
-export function getTrackLyrics(uri, url){
+export function getTrackLyrics(uri, path){
     return (dispatch, getState) => {
 
         dispatch({
@@ -56,11 +56,11 @@ export function getTrackLyrics(uri, url){
             track: {
                 uri: uri,
                 lyrics: null,
-                lyrics_url: null
+                lyrics_path: null
             }
         });
 
-        sendRequest(dispatch, getState, "?action=lyrics&url="+url)
+        sendRequest(dispatch, getState, "?action=lyrics&path="+path)
             .then(
                 response => {
 
@@ -82,7 +82,7 @@ export function getTrackLyrics(uri, url){
                             track: {
                                 uri: uri,
                                 lyrics: lyrics_html,
-                                lyrics_url: url
+                                lyrics_path: path
                             }
                         });
                     }
@@ -115,7 +115,8 @@ export function findTrackLyrics(track){
                         for (var i = 0; i < response.response.hits.length; i++){
                             lyrics_results.push({
                                 title: response.response.hits[i].result.full_title,
-                                url: response.response.hits[i].result.url
+                                url: response.response.hits[i].result.url,
+                                path: response.response.hits[i].result.path
                             });
                         }
                         dispatch({
@@ -125,7 +126,10 @@ export function findTrackLyrics(track){
                                 lyrics_results: lyrics_results
                             }
                         });
-                        dispatch(getTrackLyrics(track.uri, lyrics_results[0].url));
+
+                        // Immediately go and get the first result's lyrics
+                        var lyrics_result = lyrics_results[0];
+                        dispatch(getTrackLyrics(track.uri, lyrics_result.path));
                     }
                 },
                 error => {

src/js/views/Track.js

@@ -57,7 +57,7 @@ class Track extends React.Component{
 		// We have just received our full track info (with artists)
 		if (!this.props.track.artists && nextProps.track.artists){
 
-			this.props.uiActions.setWindowTitle(nextProps.track.name+" by XXXX");
+			this.props.uiActions.setWindowTitle(nextProps.track);
 
 			// Ready to load LastFM
 			if (nextProps.lastfm_authorized){
@@ -172,9 +172,9 @@ class Track extends React.Component{
 							this.props.track.lyrics_results.map(result => {
 								return (
 									<option 
-										key={result.url} 
-										value={result.url}
-										defaultValue={result.url == this.props.track.lyrics_url}
+										key={result.path} 
+										value={result.path}
+										defaultValue={result.path == this.props.track.lyrics_path}
 									>
 											{result.title}
 									</option>
@@ -204,7 +204,7 @@ class Track extends React.Component{
 				<div className="lyrics">
 					<div className="content" dangerouslySetInnerHTML={{__html: this.props.track.lyrics}}></div>
 					<div className="origin grey-text">
-						Origin: <a href={this.props.track.lyrics_url} target="_blank">{this.props.track.lyrics_url}</a>
+						Origin: <a href={"https://genius.com"+this.props.track.lyrics_path} target="_blank">{"https://genius.com"+this.props.track.lyrics_path}</a>
 					</div>
 				</div>
 			)

src/scss/components/_output-control.scss

@@ -32,16 +32,30 @@
 
 		.output {
 			padding: 16px 20px 12px;
+			position: relative;
 
 			&:not(:first-child) {
 				border-top: 1px solid rgba(0,0,0,0.05);
 			}
 
 			.name {
-				display: block;
 				padding-bottom: 5px;
 			}
 
+			.actions {
+				float: right;
+				
+				.action {
+					@include animate();
+					cursor: pointer;
+					color: $mid_grey;
+
+					&:hover {
+						color: $dark_grey;
+					}
+				}
+			}
+
 			.volume-control {
 				display: block;
 				position: relative;