Experimenting with URLencoding

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1550778095";
+	var build = "1551035872";
 	var version = "3.33.0";
 
 	// Construct the script tag

src/js/components/ContextMenu.js

@@ -283,7 +283,7 @@ class ContextMenu extends React.Component{
 			this.props.uiActions.hideContextMenu();
 			
 			// note: we can only go to one artist (even if this item has multiple artists, just go to the first one)
-			this.props.history.push('/artist/'+ this.props.menu.items[0].artists_uris[0]);
+			this.props.history.push(helpers.buildLink(this.props.menu.items[0].artists_uris[0]));
 		}
 	}
 
@@ -292,7 +292,7 @@ class ContextMenu extends React.Component{
 			return null;
 		} else {
 			this.props.uiActions.hideContextMenu();
-			this.props.history.push('/user/'+ this.props.menu.items[0].user_uri);
+			this.props.history.push(helpers.buildLink(this.props.menu.items[0].user_uri));
 		}
 	}
 
@@ -301,7 +301,7 @@ class ContextMenu extends React.Component{
 			return null;
 		} else {
 			this.props.uiActions.hideContextMenu();
-			this.props.history.push('/track/'+ encodeURIComponent(this.props.menu.items[0].uri));
+			this.props.history.push(helpers.buildLink(this.props.menu.items[0].uri));
 		}
 	}
 

src/js/helpers.js

@@ -1107,14 +1107,26 @@ export let uriType = function(uri){
 
 
 /**
- * Convert a raw URI into a object index-friendly format. Primarily used for loading local playlists
- * @param $uri = string
- * @return string
+ * Build a link to an asset. Using the URI type we can ascertain where we need
+ * to direct the user (eg /track/local:track:1235.mp3)
+ *
+ * @param $uri = String
+ * @return String
  **/
-export let indexFriendlyUri = function (uri){
-	var output = encodeURI(uri)
-	output = output.replace("'",'%27')
-	return output
+export let buildLink = function (uri){
+
+	// Start the link with the URI type
+	var link = "/"+uriType(uri)+"/";
+
+	// Remove any forward slashes. These interfere with encoding as they're
+	// technically a valid URL component.
+	//uri = uri.replace('/','%2F');
+	uri = encodeURIComponent(uri);
+	link += uri;
+
+	console.log(link);
+
+	return link;
 }
 
 

src/js/views/Track.js

@@ -36,6 +36,8 @@ class Track extends React.Component{
 	componentDidMount(){
 		this.props.coreActions.loadTrack(this.props.uri);
 
+		console.log("Loading",this.props.uri);
+
 		// We already have the track in our index, so it won't fire componentWillReceiveProps
 		if (this.props.track){
 			this.setWindowTitle(this.props.track);
@@ -238,7 +240,7 @@ class Track extends React.Component{
 					</h2>
 
 					<ul className="details">
-						{!this.props.slim_mode ? <li><Icon type="fontawesome" name={helpers.sourceIcon(this.props.uri)} /></li> : null}
+						{!this.props.slim_mode ? <li className="source"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.uri)} /></li> : null}
 						{track.date ? <li><Dater type="date" data={track.date} /></li> : null}
 						{track.explicit ? <li><span className="flag dark">EXPLICIT</span></li> : null}
 						<li>
@@ -267,7 +269,27 @@ class Track extends React.Component{
 }
 
 const mapStateToProps = (state, ownProps) => {
+	/*
 	var uri = decodeURIComponent(ownProps.match.params.uri);
+
+	// Mopidy replaces spaces but doesn't properly encode URIs to be URL-friendly. So we
+	// need to just replace spaces.
+	uri = uri.replace(/\s/g, '%20');
+	uri = uri.replace(/,/g, '%2C');
+	*/
+
+	var raw = decodeURIComponent(ownProps.match.params.uri);
+
+	var uri = '';
+	uri += helpers.uriSource(raw)+':';
+	uri += helpers.uriType(raw)+':';
+	var uri_id = helpers.getFromUri('trackid', raw);
+	uri_id = encodeURIComponent(uri_id);
+	uri_id = uri_id.replace(/%2F/g, '/');
+	uri += uri_id;
+
+	console.log(raw, uri);
+
 	return {
 		uri: uri,
 		slim_mode: state.ui.slim_mode,