From cb9af37c3960f885166d9a3d76b34bd3bf51044c Mon Sep 17 00:00:00 2001 From: Qstick Date: Sat, 28 Oct 2017 16:13:32 -0400 Subject: [PATCH] Misc UI Updates --- frontend/src/Activity/History/History.js | 22 +++++++++++++++++++ frontend/src/Activity/Queue/Queue.js | 18 +++++++++++++++ frontend/src/Artist/Details/ArtistDetails.css | 7 ++++++ frontend/src/Artist/Details/ArtistDetails.js | 3 +-- .../Artist/Details/ArtistDetailsConnector.js | 10 +++++++-- frontend/src/Components/SignalRConnector.js | 11 ++++++++-- 6 files changed, 65 insertions(+), 6 deletions(-) diff --git a/frontend/src/Activity/History/History.js b/frontend/src/Activity/History/History.js index dddfe3d8a..f8990cfbf 100644 --- a/frontend/src/Activity/History/History.js +++ b/frontend/src/Activity/History/History.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { align, icons } from 'Helpers/Props'; +import hasDifferentItems from 'Utilities/Object/hasDifferentItems'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import Table from 'Components/Table/Table'; import TableBody from 'Components/Table/TableBody'; @@ -17,6 +18,27 @@ import HistoryRowConnector from './HistoryRowConnector'; class History extends Component { + // + // Lifecycle + + shouldComponentUpdate(nextProps) { + // Don't update when fetching has completed if items have changed, + // before albums start fetching or when albums start fetching. + + if ( + ( + this.props.isFetching && + nextProps.isPopulated && + hasDifferentItems(this.props.items, nextProps.items) + ) || + (!this.props.isAlbumsFetching && nextProps.isAlbumsFetching) + ) { + return false; + } + + return true; + } + // // Render diff --git a/frontend/src/Activity/Queue/Queue.js b/frontend/src/Activity/Queue/Queue.js index 2659159cc..8cfa4c77d 100644 --- a/frontend/src/Activity/Queue/Queue.js +++ b/frontend/src/Activity/Queue/Queue.js @@ -37,6 +37,24 @@ class Queue extends Component { }; } + shouldComponentUpdate(nextProps) { + // Don't update when fetching has completed if items have changed, + // before albums start fetching or when albums start fetching. + + if ( + ( + this.props.isFetching && + nextProps.isPopulated && + hasDifferentItems(this.props.items, nextProps.items) + ) || + (!this.props.isAlbumsFetching && nextProps.isAlbumsFetching) + ) { + return false; + } + + return true; + } + componentDidUpdate(prevProps) { if (hasDifferentItems(prevProps.items, this.props.items)) { this.setState({ selectedState: {} }); diff --git a/frontend/src/Artist/Details/ArtistDetails.css b/frontend/src/Artist/Details/ArtistDetails.css index c4655c4e1..1fd2f3940 100644 --- a/frontend/src/Artist/Details/ArtistDetails.css +++ b/frontend/src/Artist/Details/ArtistDetails.css @@ -95,6 +95,7 @@ margin: 5px 10px 5px 0; } +.path, .sizeOnDisk, .qualityProfileName, .links, @@ -104,6 +105,12 @@ font-size: 17px; } +.path { + vertical-align: text-top; + font-size: $defaultFontSize; + font-family: $monoSpaceFontFamily; +} + .contentContainer { padding: 20px; } diff --git a/frontend/src/Artist/Details/ArtistDetails.js b/frontend/src/Artist/Details/ArtistDetails.js index de11c7766..74af7b438 100644 --- a/frontend/src/Artist/Details/ArtistDetails.js +++ b/frontend/src/Artist/Details/ArtistDetails.js @@ -347,7 +347,6 @@ class ArtistDetails extends Component {
diff --git a/frontend/src/Artist/Details/ArtistDetailsConnector.js b/frontend/src/Artist/Details/ArtistDetailsConnector.js index 5c9b9c594..29efad73d 100644 --- a/frontend/src/Artist/Details/ArtistDetailsConnector.js +++ b/frontend/src/Artist/Details/ArtistDetailsConnector.js @@ -56,6 +56,8 @@ function createMapStateToProps() { return { ...artist, alternateTitles, + isArtistRefreshing, + allArtistRefreshing, isRefreshing, isSearching, isRenamingFiles, @@ -94,13 +96,15 @@ class ArtistDetailsConnector extends Component { componentDidUpdate(prevProps) { const { id, - isRefreshing, + isArtistRefreshing, + allArtistRefreshing, isRenamingFiles, isRenamingArtist } = this.props; if ( - (prevProps.isRefreshing && !isRefreshing) || + (prevProps.isArtistRefreshing && !isArtistRefreshing) || + (prevProps.allArtistRefreshing && !allArtistRefreshing) || (prevProps.isRenamingFiles && !isRenamingFiles) || (prevProps.isRenamingArtist && !isRenamingArtist) ) { @@ -172,6 +176,8 @@ class ArtistDetailsConnector extends Component { ArtistDetailsConnector.propTypes = { id: PropTypes.number.isRequired, nameSlug: PropTypes.string.isRequired, + isArtistRefreshing: PropTypes.bool.isRequired, + allArtistRefreshing: PropTypes.bool.isRequired, isRefreshing: PropTypes.bool.isRequired, isRenamingFiles: PropTypes.bool.isRequired, isRenamingArtist: PropTypes.bool.isRequired, diff --git a/frontend/src/Components/SignalRConnector.js b/frontend/src/Components/SignalRConnector.js index ad1f28987..9aa8bc691 100644 --- a/frontend/src/Components/SignalRConnector.js +++ b/frontend/src/Components/SignalRConnector.js @@ -90,6 +90,12 @@ class SignalRConnector extends Component { // Control retryConnection = () => { + if (this.retryInterval >= 30) { + this.setState({ + isDisconnected: true + }); + } + this.retryTimeoutId = setTimeout(() => { this.signalRconnection.start(this.signalRconnectionOptions); this.retryInterval = Math.min(this.retryInterval + 5, 30); @@ -328,8 +334,9 @@ class SignalRConnector extends Component { this.props.setAppValue({ isConnected: false, - isReconnecting: true, - isDisconnected: true + isReconnecting: true + // Don't set isDisconnected yet, it'll be set it if it's disconnected + // for ~105 seconds (retry interval reaches 30 seconds) }); this.retryConnection();