Removing SSL config - non HTTPS can't use SSL anyway

mopidy_iris/static/index.html

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

src/js/App.js

@@ -89,12 +89,29 @@ class App extends React.Component{
 
 		// Check for url-parsed configuration values
 		var url_vars = this.props.location.query;
-		if (url_vars !== undefined && url_vars.host !== undefined && url_vars.port !== undefined){
-			this.props.mopidyActions.set({
-				host: url_vars.host,
-				port: url_vars.port
-			});
-			hashHistory.push(global.baseURL);
+		if (url_vars){
+			var has_values = false;
+			var values = {};
+			if (url_vars.host !== undefined){
+				has_values = true;
+				values.host = url_vars.host;
+			}
+			if (url_vars.port !== undefined){
+				has_values = true;
+				values.port = url_vars.port;
+			}
+
+			if (has_values){
+				this.props.mopidyActions.set(values);
+
+				// Allow 100ms for the action above to complete before we re-route
+				setTimeout(
+					() => {
+						hashHistory.push(global.baseURL);
+					},
+					100
+				);
+			}
 		}
 
 		// show initial setup if required

src/js/services/mopidy/middleware.js

@@ -207,13 +207,15 @@ const MopidyMiddleware = (function(){
         switch(action.type){
 
             case 'MOPIDY_CONNECT':
+                if (socket != null){
+                	socket.close();
+                }
 
-                if (socket != null) socket.close();
                 store.dispatch({ type: 'MOPIDY_CONNECTING'});
                 var state = store.getState();
 
                 socket = new Mopidy({
-                    webSocketUrl: 'ws'+(state.mopidy.ssl ? 's' : '')+'://'+state.mopidy.host+':'+state.mopidy.port+'/mopidy/ws/',
+                    webSocketUrl: 'ws'+(window.location.protocol === 'https:' ? 's' : '')+'://'+state.mopidy.host+':'+state.mopidy.port+'/mopidy/ws/',
                     callingConvention: 'by-position-or-by-name'
                 });
 

src/js/services/pusher/middleware.js

@@ -171,8 +171,6 @@ const PusherMiddleware = (function(){
         switch(action.type){
 
             case 'PUSHER_CONNECT':
-
-                // Stagnant socket, close it first
                 if (socket != null){
                     socket.close();
                 }

src/js/views/Settings.js

@@ -28,7 +28,6 @@ class Settings extends React.Component {
 		this.state = {
 			mopidy_host: this.props.mopidy.host,
 			mopidy_port: this.props.mopidy.port,
-			mopidy_ssl: this.props.mopidy.ssl,
 			mopidy_library_artists_uri: this.props.mopidy.library_artists_uri,
 			mopidy_library_albums_uri: this.props.mopidy.library_albums_uri,
 			pusher_username: this.props.pusher.username,
@@ -67,8 +66,7 @@ class Settings extends React.Component {
 		
 		this.props.mopidyActions.set({
 			host: this.state.mopidy_host,
-			port: this.state.mopidy_port,
-			ssl: this.state.mopidy_ssl
+			port: this.state.mopidy_port
 		});
 
 		window.location.reload(true);
@@ -103,8 +101,7 @@ class Settings extends React.Component {
 
 	renderApplyButton(){
 		if (this.props.mopidy.host == this.state.mopidy_host && 
-			this.props.mopidy.port == this.state.mopidy_port && 
-			this.props.mopidy.ssl == this.state.mopidy_ssl){
+			this.props.mopidy.port == this.state.mopidy_port){
 				return null;
 		}
 
@@ -227,22 +224,6 @@ class Settings extends React.Component {
 									value={ this.state.mopidy_port } />
 							</div>
 						</div>
-						<div className="field checkbox">
-							<div className="name">Encryption</div>
-							<div className="input">
-								<label>
-									<input 
-										type="checkbox"
-										name="ssl"
-										checked={this.state.mopidy_ssl}
-										onChange={e => this.setState({mopidy_ssl: !this.state.mopidy_ssl})} />
-									<span className="label tooltip">
-										Enable SSL
-										<span className="tooltip__content">Requires SSL proxy</span>
-									</span>
-								</label>
-							</div>
-						</div>
 						{this.renderApplyButton()}
 					</form>
 

src/js/views/library/LibraryBrowse.js

@@ -10,6 +10,8 @@ import TrackList from '../../components/TrackList'
 import GridItem from '../../components/GridItem'
 import DropdownField from '../../components/Fields/DropdownField'
 import Icon from '../../components/Icon'
+import URILink from '../../components/URILink'
+import ErrorBoundary from '../../components/ErrorBoundary'
 
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'
@@ -63,6 +65,45 @@ class LibraryBrowse extends React.Component{
 		this.props.uiActions.hideContextMenu();
 	}
 
+	renderBreadcrumbs(){
+
+		if (this.props.params.uri){
+			var parent_uri = this.props.params.uri;
+		} else {
+			return null;
+		}
+
+		if (parent_uri.startsWith('file://')){
+
+			var uri = parent_uri.replace('file:///','');
+			var uri_elements = uri.split('/');
+
+			return (
+				<h4>
+					{uri_elements.map((uri_element, index) => {
+
+						// Reconstruct a URL to this element
+						var uri = "file://";
+						for (var i = 0; i <= index; i++){
+							uri += "/"+uri_elements[i];
+						}
+
+						return (
+							<span key={uri}>
+								{index > 0 ? <span>&nbsp; <Icon type="fontawesome" name="angle-right" /> &nbsp;&nbsp;</span> : null}
+								<URILink type="browse" uri={uri}>
+									{uri_element}
+								</URILink>
+							</span>
+						);
+					})}
+				</h4>
+			);
+		}
+
+		return null;
+	}
+
 	renderSubdirectories(subdirectories){
 		if (this.props.view == 'list'){
 			return (
@@ -152,15 +193,19 @@ class LibraryBrowse extends React.Component{
 					{title}
 				</Header>
 				<section className="content-wrapper">
+					<ErrorBoundary>
 
-					{subdirectories ? this.renderSubdirectories(subdirectories) : null}
+						{this.renderBreadcrumbs()}
 
-					{tracks ? <TrackList 
-							tracks={this.props.directory.tracks}
-							uri={"iris:browse:"+this.props.params.uri}
-							className="library-local-track-list"
-						/> : null }
+						{subdirectories ? this.renderSubdirectories(subdirectories) : null}
 
+						{tracks ? <TrackList 
+								tracks={this.props.directory.tracks}
+								uri={"iris:browse:"+this.props.params.uri}
+								className="library-local-track-list"
+							/> : null }
+
+					</ErrorBoundary>
 				</section>
 			</div>
 		);
@@ -229,21 +274,23 @@ class LibraryBrowse extends React.Component{
 					Browse
 				</Header>
 				<section className="content-wrapper">
-					<div className="grid category-grid">				
-						{
-							grid_items.map(
-								(item, index) => {
-									return (
-										<GridItem 
-											item={item} 
-											key={index}
-											type="category"
-											onClick={e => hashHistory.push(item.link)}
-										/>
-									)
-								}
-							)
-						}
+					<div className="grid category-grid">
+						<ErrorBoundary>
+							{
+								grid_items.map(
+									(item, index) => {
+										return (
+											<GridItem 
+												item={item} 
+												key={index}
+												type="category"
+												onClick={e => hashHistory.push(item.link)}
+											/>
+										)
+									}
+								)
+							}
+						</ErrorBoundary>
 					</div>
 				</section>
 			</div>

src/js/views/modals/InitialSetup.js

@@ -24,8 +24,7 @@ class InitialSetup extends React.Component{
 			username: this.props.username,
 			allow_reporting: this.props.allow_reporting,
 			host: this.props.host,
-			port: this.props.port,
-			ssl: this.props.ssl
+			port: this.props.port
 		}
 	}
 
@@ -46,8 +45,7 @@ class InitialSetup extends React.Component{
 		});
 		this.props.mopidyActions.set({
 			host: this.state.host,
-			port: this.state.port,
-			ssl: this.state.ssl
+			port: this.state.port
 		});
 
 		this.setState({saving: true});
@@ -56,7 +54,7 @@ class InitialSetup extends React.Component{
 		setTimeout(function(){
 
 			// We've changed a connection setting, so need to reload
-			if (self.state.host !== self.props.host || self.state.port !== self.props.port || self.state.ssl !== self.props.ssl){
+			if (self.state.host !== self.props.host || self.state.port !== self.props.port){
 
 				window.location = global.baseURL;
 
@@ -108,21 +106,6 @@ class InitialSetup extends React.Component{
 								value={ this.state.port } />
 						</div>
 					</div>
-					<div className="field checkbox">
-						<div className="input">
-							<label>
-								<input 
-									type="checkbox"
-									name="ssl"
-									checked={this.state.ssl}
-									onChange={e => this.setState({ssl: !this.state.ssl})} />
-								<span className="label tooltip">
-									Enable SSL
-									<span className="tooltip__content">Requires SSL proxy</span>
-								</span>
-							</label>
-						</div>
-					</div>
 					
 					{helpers.isHosted() ? null : <div className="field checkbox">
 						<div className="input">
@@ -157,8 +140,7 @@ const mapStateToProps = (state, ownProps) => {
 		allow_reporting: state.ui.allow_reporting,
 		username: (state.pusher && state.pusher.username ? state.pusher.username : 'Anonymous'),
 		host: state.mopidy.host,
-		port: state.mopidy.port,
-		ssl: state.mopidy.ssl
+		port: state.mopidy.port
 	}
 }