diff --git a/src/js/services/core/middleware.js b/src/js/services/core/middleware.js
index c350fc05..2edc4dff 100755
--- a/src/js/services/core/middleware.js
+++ b/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
diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js
index 6d668649..c0fc9a92 100755
--- a/src/js/views/Settings.js
+++ b/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 (
-
+
{name}
@@ -192,6 +195,7 @@ class Settings extends React.Component {
{text}
+ {tooltip ?
{tooltip} : null}
)
}
@@ -296,17 +300,6 @@ class Settings extends React.Component {
Spotify
-
-
-
Status
-
-
- {!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:') ?
Mopidy-Spotify not available
: null}
-
- {this.props.spotify.authorization ?
Authorized All Spotify functionality available :
Limited access Authorize Iris for full functionality}
-
-
-
Authorization
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 80e8798a..59b42636 100755
--- a/src/scss/app.scss
+++ b/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';
diff --git a/src/scss/components/_tooltip.scss b/src/scss/components/_tooltip.scss
new file mode 100755
index 00000000..f743e4ee
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 97c52014..b7015dae 100755
--- a/src/scss/global/_core.scss
+++ b/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 ){