More encompassing Spotify status indicator

src/js/services/core/middleware.js

@@ -22,7 +22,10 @@ const CoreMiddleware = (function(){
                 store.dispatch(mopidyActions.connect())
                 store.dispatch(pusherActions.connect())
                 store.dispatch(lastfmActions.connect())
-                store.dispatch(spotifyActions.connect())
+
+                if (store.getState().spotify.enabled){
+                    store.dispatch(spotifyActions.connect())
+                }
                 
                 next(action)
                 break

src/js/views/Settings.js

@@ -160,6 +160,7 @@ class Settings extends React.Component {
 		let icon = 'close'
 		let name = service.charAt(0).toUpperCase() + service.slice(1).toLowerCase()
 		let text = 'Disconnected'
+		let tooltip = null
 
 		service = this.props[service]
 
@@ -169,12 +170,14 @@ class Settings extends React.Component {
 			text = 'Connecting'
 		} else if (name == 'Spotify' && (!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:'))){
 			icon = 'exclamation-triangle'
-			colour = 'orange'
-			text = 'Mopidy-Spotify not detected'
+			colour = 'red'
+			text = 'Not installed'
+			tooltip = 'Mopidy-Spotify is not installed or enabled'
 		} else if (service.connected && name == 'Spotify' && !service.authorization){
 			icon = 'lock'
 			colour = 'orange'
 			text = 'Limited access'
+			tooltip = 'Authorize Iris for full Spotify functionality'
 		} else if (service.connected){
 			icon = 'check'
 			colour = 'green'
@@ -182,7 +185,7 @@ class Settings extends React.Component {
 		}
 
 		return (
-			<div className="service">
+			<div className={"service"+(tooltip ? ' has-tooltip large-tooltip' : '')}>
 				<h4 className="title">
 					{name}
 				</h4>
@@ -192,6 +195,7 @@ class Settings extends React.Component {
 				<div className={"status "+colour+'-text'}>					
 					{text}
 				</div>
+				{tooltip ? <span className="tooltip">{tooltip}</span> : null}
 			</div>
 		)
 	}
@@ -296,17 +300,6 @@ class Settings extends React.Component {
 					</div>
 
 					<h4 className="underline">Spotify</h4>
-
-					<div className="field readonly">
-						<div className="name">Status</div>
-						<div className="input">
-							<div className="text">
-								{!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:') ? <div className="red-text"><FontAwesome name="exclamation-triangle" />&nbsp; Mopidy-Spotify not available</div> : null}
-
-								{this.props.spotify.authorization ? <span><span className="green-text"><FontAwesome name="check" /> Authorized</span>&nbsp; All Spotify functionality available</span> : <span><span className="orange-text"><FontAwesome name="lock" /> Limited access</span>&nbsp; Authorize Iris for full functionality</span>}
-							</div>
-						</div>
-					</div>
 					<div className="field">
 						<div className="name">Authorization</div>
 						<div className="input">

src/scss/app.scss

@@ -26,6 +26,7 @@
 @import 'components/filter-field';
 @import 'components/sub-views';
 @import 'components/debug';
+@import 'components/tooltip';
 
 @import 'views/artist';
 @import 'views/user';

src/scss/components/_tooltip.scss

@@ -0,0 +1,52 @@
+
+.has-tooltip {
+	position: relative;
+
+	.tooltip {
+		@include animate();
+		opacity: 0;
+		position: absolute;
+		pointer-events: none;
+		background: $overlay_dark;
+		display: block;
+		max-width: 200px;
+		padding: 5px;
+		color: $white;
+		font-size: 11px;
+		line-height: 11px;
+		top: -24px;
+		left: 1px;
+		z-index: 97;
+		border-radius: 3px;
+
+		&::before {
+			content: '';
+			display: block;
+			width: 6px;
+			height: 6px;
+			background: $overlay_dark;
+			-ms-transform: rotate(45deg);
+			-webkit-transform: rotate(45deg);
+			transform: rotate(45deg);
+			position: absolute;
+			bottom: -3px;
+			left: 9px;
+		}
+	}
+
+	&:hover {
+		.tooltip {
+			opacity: 1;
+			top: -22px;
+		}
+	}
+
+	&.large-tooltip {
+		.tooltip {
+			padding: 8px 12px;
+			font-size: 12px;
+			line-height: 14px;
+			top: -50px;
+		}
+	}
+}

src/scss/global/_core.scss

@@ -339,48 +339,6 @@ footer {
 	}
 }
 
-.has-tooltip {
-	position: relative;
-
-	.tooltip {
-		@include animate();
-		opacity: 0;
-		position: absolute;
-		pointer-events: none;
-		background: $overlay_dark;
-		display: block;
-		max-width: 200px;
-		padding: 5px;
-		color: $white;
-		font-size: 11px;
-		line-height: 11px;
-		top: -24px;
-		left: 1px;
-		z-index: 97;
-		border-radius: 3px;
-
-		&::before {
-			content: '';
-			display: block;
-			width: 6px;
-			height: 6px;
-			background: $overlay_dark;
-			-ms-transform: rotate(45deg);
-			-webkit-transform: rotate(45deg);
-			transform: rotate(45deg);
-			position: absolute;
-			bottom: -3px;
-			left: 9px;
-		}
-	}
-
-	&:hover {
-		.tooltip {
-			opacity: 1;
-			top: -22px;
-		}
-	}
-}
 
 
 @include responsive( $bp_medium ){