secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

No need for tiles, just service status

Browse Source
This commit is contained in:
James Barnsley
2017-11-04 14:03:59 +13:00
parent 98b21efbdf
commit a50c8b454e
8 changed files with 83 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/FollowButton.js
View File

@ -41,7 +41,7 @@ class FollowButton extends React.Component{
}
if (!this.props.spotify_authorized){
return <button className={className+' disabled'} onClick={e => this.props.uiActions.createNotification('You must authorize Iris first','warning')}>{this.props.addText}</button>
return <button className={className+' disabled'} onClick={e => this.props.uiActions.createNotification('You must authorize Spotify first','warning')}>{this.props.addText}</button>
} else if (this.props.is_following === true){
return <button className={className+' destructive'} onClick={e => this.remove()}>{this.props.removeText}</button>
} else {

2
src/js/components/URILink.js
View File

@ -39,7 +39,7 @@ export default class URILink extends React.Component{
break;
default:
return null;
to = null;
}
return (

1
src/js/index.js
View File

@ -65,6 +65,7 @@ ReactDOM.render(
<Route path="queue/history" component={QueueHistory} />
<Route path="settings" component={Settings} />
<Route path="settings/debug" component={Debug} />
<Route path="settings(/:sub_view)" component={Settings} />
<Route path="search(/iris::search::query)" component={Search} />
<Route path="album/:uri" component={Album} />

42
src/js/services/lastfm/actions.js
View File

@ -4,13 +4,14 @@ var uiActions = require('../ui/actions')
var helpers = require('../../helpers')
/**
* Send an ajax request to the Spotify API
* Send an ajax request to the LastFM API
*
* @param dispatch obj
* @param getState obj
* @param endpoint params = the url params to send
* @param dispatch = obj
* @param getState = obj
* @param params = string, the url params to send
* @param signed = boolean
**/
const sendRequest = (dispatch, getState, params ) => {
const sendRequest = (dispatch, getState, params, signed) => {
return new Promise((resolve, reject) => {
var loader_key = helpers.generateGuid()
@ -75,11 +76,11 @@ export function connect(){
dispatch({ type: 'LASTFM_CONNECTING' });
// Authorized, dual-purpose our connection to get the current user
// Authorized? Multi-purpose our connection test to get the current user
if (getState().lastfm.session){
dispatch(getMe());
// Not authorized, just use a generic lookup to test our connection
// Not authorized? Just use a generic lookup to test our connection
} else {
sendRequest(dispatch, getState, 'method=artist.getInfo&artist=')
.then(
@ -91,6 +92,33 @@ export function connect(){
}
}
/**
* Signed requests
* TODO
**/
export function loveTrack(artist, track){
return (dispatch, getState) => {
var params = 'method=track.love&artist='+artist+'&track='+track
sendRequest(dispatch, getState, params, true)
.then(
response => {
dispatch({
type: 'LASTFM_TRACK_LOVED',
artist: artist,
track: track
});
}
)
}
}
/**
* Non-signed requests
**/
export function getMe(){
return (dispatch, getState) => {
var params = 'method=user.getInfo&user='+getState().lastfm.session.name

21
src/js/services/spotify/actions.js
View File

@ -192,25 +192,8 @@ export function set(data){
export function connect(){
return (dispatch, getState) => {
dispatch({ type: 'SPOTIFY_CONNECTING' });
// send a generic request to ensure spotify is up and running
// there is no 'test' or 'ping' endpoint on the Spotify API
sendRequest(dispatch, getState, 'browse/categories?limit=1' )
.then(
response => {
dispatch({
type: 'SPOTIFY_CONNECTED'
});
},
error => {
dispatch(coreActions.handleException(
'Could not connect to Spotify',
error
));
}
);
dispatch(getMe());
}
}
@ -260,12 +243,14 @@ export function getMe(){
type: 'SPOTIFY_ME_LOADED',
data: response
});
dispatch({ type: 'SPOTIFY_CONNECTED' });
},
error => {
dispatch(coreActions.handleException(
'Could not load your profile',
error
));
dispatch({ type: 'SPOTIFY_DISCONNECTED' });
}
);
}

5
src/js/services/spotify/middleware.js
View File

@ -27,10 +27,7 @@ const SpotifyMiddleware = (function(){
store.dispatch(spotifyActions.getAllLibraryPlaylists())
}
// Get the current logged-in user
store.dispatch(spotifyActions.getMe())
next(action)
next(action);
break
case 'SPOTIFY_AUTHORIZATION_GRANTED':

50
src/js/views/Settings.js
View File

@ -115,6 +115,7 @@ class Settings extends React.Component {
<Thumbnail circle={true} size="small" images={user.images} />
<span className="user-name">
{user.display_name ? user.display_name : user.id}
{!this.props.spotify.authorization ? <span className="grey-text">&nbsp;&nbsp;(Limited access)</span> : null}
</span>
</URILink>
)
@ -165,20 +166,11 @@ class Settings extends React.Component {
}
renderServiceStatus(service){
let colour = 'red';
let icon = 'close';
let name = service.charAt(0).toUpperCase() + service.slice(1).toLowerCase();
let text = 'Disconnected';
let tooltip = null;
let logo = service;
if (logo == 'mopidy'){
logo = 'database';
} else if (logo == 'pusher'){
logo = 'rss';
}
let colour = 'red'
let icon = 'close'
let name = service.charAt(0).toUpperCase() + service.slice(1).toLowerCase()
let text = 'Disconnected'
let tooltip = null
service = this.props[service]
if (service.connecting){
@ -190,11 +182,6 @@ class Settings extends React.Component {
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'
@ -202,20 +189,17 @@ class Settings extends React.Component {
}
return (
<div className="service-wrapper">
<div className={"service"+(tooltip ? ' has-tooltip large-tooltip' : '')}>
<div className="liner">
<FontAwesome name={logo} className="logo" />
<h4 className="title">
{name}
</h4>
<div className={"status "+colour+'-text'}>
<FontAwesome name={icon} />
{text}
</div>
{tooltip ? <span className="tooltip">{tooltip}</span> : null}
</div>
<div className={"service"+(tooltip ? ' has-tooltip large-tooltip' : '')}>
<h4 className="title">
{name}
</h4>
<div className={colour+'-text icon'}>
<FontAwesome name={icon} />
</div>
<div className={"status "+colour+'-text'}>
{text}
</div>
{tooltip ? <span className="tooltip">{tooltip}</span> : null}
</div>
)
}
@ -248,6 +232,8 @@ class Settings extends React.Component {
<section className="content-wrapper">
<h4 className="underline">Services</h4>
<div className="services">
{this.renderServiceStatus('mopidy')}
{this.renderServiceStatus('pusher')}

59
src/scss/views/_settings.scss
View File

@ -35,46 +35,33 @@
@include clearfix();
margin-bottom: -20px;
.service-wrapper {
.service {
margin-right: 20px;
margin-bottom: 20px;
padding-left: 46px;
box-sizing: border-box;
position: relative;
float: left;
width: 16.6667%;
min-width: 150px;
.service {
padding-bottom: 100%;
position: relative;
.title {
margin: 0;
padding: 0;
}
.liner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 5px;
box-sizing: border-box;
border-radius: 3px;
border: 3px solid rgba(255,255,255,0.1);
text-align: center;
.icon {
position: absolute;
top: 2px;
left: 0;
width: 34px;
height: 25px;
padding-top: 9px;
border: 2px solid $grey;
text-align: center;
border-radius: 50%;
.logo {
font-size: 80px;
position: absolute;
top: 20%;
left: 0;
right: 0;
opacity: 0.05;
}
.title {
padding-top: 55%;
margin-bottom: 0px;
}
.status {
.fa {
font-size: 12px;
margin-right: 4px;
}
}
.fa {
font-size: 16px;
}
}
}