Tracks loader; Less invasive update notifications, fixes #325

This commit is contained in:
James Barnsley
2018-09-18 21:38:37 +12:00
parent 4a2b3f8dca
commit 4538c379ea
13 changed files with 10659 additions and 13906 deletions

View File

@ -2893,6 +2893,9 @@ footer {
.message.notice {
background: #32b5f2;
color: #FFFFFF; }
.message.good, .message.success {
background: #47af2a;
color: #FFFFFF; }
.message.warning {
background: #f16f19;
color: #FFFFFF; }
@ -3362,6 +3365,9 @@ input[type="submit"] {
padding-top: 10px;
width: 20%;
float: left; }
.field > .name .icon {
font-size: 0.9em;
margin-bottom: 0.3em; }
.field > .input {
width: 80%;
float: left; }
@ -4702,6 +4708,8 @@ aside {
aside nav a.active {
background: #08d58f;
color: #FFFFFF; }
aside nav a.active .status .icon {
color: #FFFFFF !important; }
aside nav a.active:before {
opacity: 0.15; }
aside nav a[disabled] {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -90,7 +90,7 @@ class Sidebar extends React.Component{
<Link className={this.linkClassName('settings')} to={global.baseURL+"settings"}>
<Icon name="settings" type="material" />
Settings
{this.props.test_mode ? <span className="status has-tooltip right-tooltip"><Icon name="info" className="orange-text" /><span className="tooltip">Test mode active</span></span>: null}
{this.props.update_available ? <span className="status has-tooltip right-tooltip"><Icon name="cloud_download" className="green-text" /><span className="tooltip">Update available</span></span>: null}
{!this.props.mopidy_connected || !this.props.pusher_connected ? <span className="status has-tooltip right-tooltip"><Icon name="warning" className="red-text" /><span className="tooltip">{!this.props.mopidy_connected ? <span>Mopidy not connected<br /></span> : null}{!this.props.pusher_connected ? <span>Pusher not connected<br /></span> : null}</span></span> : null}
</Link>
</section>
@ -122,6 +122,7 @@ const mapStateToProps = (state, ownProps) => {
pusher_connected: state.pusher.connected,
spotify_enabled: state.spotify.enabled,
spotify_authorized: state.spotify.authorization,
update_available: (state.pusher.version && state.pusher.version.update_available ? state.pusher.version.update_available : false),
test_mode: (state.ui.test_mode ? state.ui.test_mode : false),
dragger: state.ui.dragger
}

View File

@ -158,7 +158,6 @@ export default function reducer(core = {}, action){
**/
case 'PLAYLIST_TRACKS':
console.log(action)
var playlists = Object.assign({}, core.playlists)
var playlist = Object.assign({}, playlists[action.key], { tracks_uris: action.tracks_uris })

View File

@ -1503,8 +1503,7 @@ const MopidyMiddleware = (function(){
request(socket, store, 'library.lookup', { uris: uris })
.then(response => {
console.log(response)
for(var uri in response){
for (var uri in response){
if (response.hasOwnProperty(uri)){
var track = response[uri][0]

View File

@ -90,7 +90,6 @@ const PusherMiddleware = (function(){
store.dispatch(spotifyActions.tokenChanged(message.params.spotify_token));
break;
case 'spotify_authorization_received':
console.log(message);
store.dispatch(uiActions.createNotification({
type: 'spotify-authorization-received',
authorization: message.params.authorization,
@ -230,10 +229,18 @@ const PusherMiddleware = (function(){
}
store.dispatch(pusherActions.getConfig());
store.dispatch(pusherActions.getVersion());
store.dispatch(pusherActions.getRadio());
store.dispatch(pusherActions.getQueueMetadata());
// Give things a few moments to setup before we check for version.
// This is because the server makes a GitHub request, which creates a [very] small delay
// in subsequent requests.
setTimeout(
function(){
store.dispatch(pusherActions.getVersion());
},
2000
);
next(action);
break;
@ -546,10 +553,6 @@ const PusherMiddleware = (function(){
if (store.getState().ui.allow_reporting){
ReactGA.event({ category: 'Pusher', action: 'Version', label: action.version.current });
}
if (action.version.upgrade_available){
store.dispatch(uiActions.createNotification({content: 'Version '+action.version.latest+' is available. See settings to upgrade.'}));
}
next(action);
break

View File

@ -249,26 +249,7 @@ class Settings extends React.Component {
<h4 className="underline">Services</h4>
<Services active={this.props.params.sub_view} />
{helpers.isHosted() ? null : <h4 className="underline">Privacy</h4>}
{helpers.isHosted() ? null : <div className="field checkbox">
<div className="name">Reporting</div>
<div className="input">
<label>
<input
type="checkbox"
name="allow_reporting"
checked={ this.props.ui.allow_reporting }
onChange={ e => this.props.uiActions.set({ allow_reporting: !this.props.ui.allow_reporting })} />
<span className="label">
Allow reporting of anonymous usage statistics
</span>
</label>
<div className="description">Anonymous usage data is used to identify errors and potential features that make Iris better for everyone. Read the <a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>.</div>
</div>
</div>}
<h4 className="underline">Advanced</h4>
<h4 className="underline">Interface</h4>
<div className="field radio">
<div className="name">
@ -297,7 +278,7 @@ class Settings extends React.Component {
</div>
<div className="field checkbox">
<div className="name">UI behavior</div>
<div className="name">Behavior</div>
<div className="input">
<label>
<input
@ -335,9 +316,8 @@ class Settings extends React.Component {
</div>
<div className="field sources-priority">
<div className="name has-tooltip">
<div className="name">
Sources priority
<span className="tooltip">Order of searching and search results</span>
</div>
<div className="input">
<SourcesPriority
@ -345,9 +325,31 @@ class Settings extends React.Component {
uri_schemes_priority={this.props.ui.uri_schemes_priority ? this.props.ui.uri_schemes_priority : []}
uiActions={this.props.uiActions}
/>
<div className="description">
Drag-and-drop to prioritize search providers and results
</div>
</div>
</div>
{helpers.isHosted() ? null : <div className="field checkbox">
<div className="name">Reporting</div>
<div className="input">
<label>
<input
type="checkbox"
name="allow_reporting"
checked={ this.props.ui.allow_reporting }
onChange={ e => this.props.uiActions.set({ allow_reporting: !this.props.ui.allow_reporting })} />
<span className="label">
Allow reporting of anonymous usage statistics
</span>
</label>
<div className="description">Anonymous usage data is used to identify errors and potential features that make Iris better for everyone. Read the <a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>.</div>
</div>
</div>}
<h4 className="underline">Advanced</h4>
<div className="field">
<div className="name">Artist library URI</div>
<div className="input">

View File

@ -85,7 +85,7 @@ class LibraryTracks extends React.Component{
<TrackList tracks={tracks} />
<LazyLoadListener
loadKey={this.props.library_tracks_more}
loading={this.props.library_tracks_more}
showLoader={this.props.library_tracks_more}
loadMore={() => this.loadMore()}
/>
</section>

View File

@ -86,6 +86,12 @@ aside{
background: $turquoise;
color: $white;
.status {
.icon {
color: $white !important;
}
}
&:before {
opacity: 0.15;
}

View File

@ -462,6 +462,12 @@ footer {
color: $white;
}
&.good,
&.success {
background: $green;
color: $white;
}
&.warning {
background: $orange;
color: $white;

View File

@ -356,6 +356,11 @@ input[type="submit"] {
padding-top: 10px;
width: 20%;
float: left;
.icon {
font-size: 0.9em;
margin-bottom: 0.3em;
}
}
& > .input {