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

Tracks loader; Me placeholder as undefined, fixes #650

Browse Source
This commit is contained in:
James Barnsley
2020-11-20 22:20:30 +13:00
parent 633ced05d7
commit e4c49a7f76
16 changed files with 145 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
mopidy_iris/static/app.css
View File

@ -4361,6 +4361,12 @@ select {
.list__item .context-zone {
top: 14px; } }
h1 .loader,
h2 .loader,
h3 .loader,
h4 .loader {
margin-left: 0.8rem; }
.loader__offline {
padding: 2rem;
color: rgba(128, 128, 128, 0.5);
@ -4396,6 +4402,12 @@ select {
animation-iteration-count: infinite;
stroke: #32b5f2; }
.loader--white .loader__ring__progress {
stroke: gray; }
.loader--white .loader__ring__background {
stroke: rgba(128, 128, 128, 0.5); }
.loader--white .loader__ring__foreground {
stroke: #FFFFFF; }
@ -4406,14 +4418,8 @@ select {
.loader--mini {
padding: 0; }
.loader--mini .loader__ring {
width: 20px;
height: 20px; }
.loader--mini .loader__ring__progress {
stroke: gray; }
.loader--mini .loader__ring__background {
stroke: rgba(128, 128, 128, 0.5); }
.loader--mini .loader__ring__foreground {
stroke: #FFFFFF; }
width: 24px;
height: 24px; }
.loader--mini .loader__offline {
display: none; }
@ -6057,7 +6063,8 @@ main header {
color: #FFFFFF;
pointer-events: all;
border-radius: 3px;
font-size: 0.9rem; }
font-size: 0.9rem;
min-width: 200px; }
@keyframes fadein {
0% {
@ -6166,15 +6173,16 @@ main header {
line-height: 400px; }
.notifications .notification--process {
position: relative;
padding-right: 18px;
padding-left: 50px; }
padding-right: 2rem;
padding-left: 3rem;
min-width: calc(200px - 3rem); }
.notifications .notification--process.cancelling {
opacity: 0.5 !important;
pointer-events: none; }
.notifications .notification--process .loader {
position: absolute;
top: 11px;
left: 13px; }
top: 9px;
left: 9px; }
.notifications .notification.closing, .notifications .notification.finishing {
animation-delay: 0;
-webkit-animation-fill-mode: forwards;
@ -6197,6 +6205,9 @@ main header {
left: 10px;
right: 10px;
width: auto; }
.notifications .notification, .notifications .notification--process {
min-width: 0px;
width: 100%; }
.notifications .loading {
bottom: 20px;
right: 40px; } }

2
mopidy_iris/static/app.css.map
View File

File diff suppressed because one or more lines are too long

89
mopidy_iris/static/app.js
View File

@ -109848,28 +109848,11 @@ var LoaderRing = function LoaderRing(_ref) {
"data-qa-file": "Loader"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(LoaderRing, {
stroke: mini ? 2 : 3,
radius: mini ? 11 : 60,
radius: mini ? 12 : 60,
progress: progress,
"data-qa-node": "LoaderRing",
"data-qa-file": "Loader"
}));
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: classNameString,
"data-qa-node": "div",
"data-qa-file": "Loader"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "loader__spinner",
"data-qa-node": "div",
"data-qa-file": "Loader"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "loader__spinner__background",
"data-qa-node": "div",
"data-qa-file": "Loader"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "loader__spinner__foreground",
"data-qa-node": "div",
"data-qa-file": "Loader"
})));
}));
/***/ }),
@ -119484,10 +119467,10 @@ function reducer() {
case 'GENIUS_AUTHORIZATION_REVOKED':
return _objectSpread(_objectSpread({}, genius), {}, {
authorizing: false,
authorization: null,
authorization_code: null,
access_token: null,
me: null
authorization: undefined,
authorization_code: undefined,
access_token: undefined,
me: undefined
});
case 'GENIUS_IMPORT_AUTHORIZATION':
@ -119496,7 +119479,7 @@ function reducer() {
authorization: action.authorization,
authorization_code: action.authorization.authorization_code,
access_token: action.authorization.access_token,
me: null
me: undefined
});
default:
@ -120315,14 +120298,14 @@ function reducer() {
return _objectSpread(_objectSpread({}, lastfm), {}, {
authorizing: false,
authorization: false,
me: null
me: undefined
});
case 'LASTFM_IMPORT_AUTHORIZATION':
return _objectSpread(_objectSpread({}, lastfm), {}, {
authorizing: false,
authorization: action.authorization,
me: null
me: undefined
});
default:
@ -120414,17 +120397,17 @@ var localstorageMiddleware = function () {
access_token: action.authorization.access_token,
refresh_token: action.authorization.refresh_token,
token_expiry: action.authorization.token_expiry,
me: null
me: undefined
});
break;
case 'SPOTIFY_AUTHORIZATION_REVOKED':
_util_storage__WEBPACK_IMPORTED_MODULE_0__["default"].set('spotify', {
authorization: null,
access_token: null,
refresh_token: null,
token_expiry: null,
me: null
authorization: undefined,
access_token: undefined,
refresh_token: undefined,
token_expiry: undefined,
me: undefined
});
break;
@ -120456,15 +120439,15 @@ var localstorageMiddleware = function () {
case 'LASTFM_AUTHORIZATION_REVOKED':
_util_storage__WEBPACK_IMPORTED_MODULE_0__["default"].set('lastfm', {
authorization: null,
me: null
authorization: undefined,
me: undefined
});
break;
case 'LASTFM_IMPORT_AUTHORIZATION':
_util_storage__WEBPACK_IMPORTED_MODULE_0__["default"].set('lastfm', {
authorization: action.authorization,
me: null
me: undefined
});
break;
@ -120484,10 +120467,10 @@ var localstorageMiddleware = function () {
case 'GENIUS_AUTHORIZATION_REVOKED':
_util_storage__WEBPACK_IMPORTED_MODULE_0__["default"].set('genius', {
me: null,
authorization: null,
authorization_code: null,
access_token: null
me: undefined,
authorization: undefined,
authorization_code: undefined,
access_token: undefined
});
break;
@ -120496,7 +120479,7 @@ var localstorageMiddleware = function () {
authorization: action.authorization,
authorization_code: action.authorization.authorization_code,
access_token: action.authorization.access_token,
me: null
me: undefined
});
break;
@ -128596,15 +128579,12 @@ var state = {
config: {}
},
lastfm: {
me: null,
authorization_url: 'https://jamesbarnsley.co.nz/iris/auth_lastfm.php'
},
genius: {
me: null,
authorization_url: 'https://jamesbarnsley.co.nz/iris/auth_genius.php'
},
spotify: {
me: null,
autocomplete_results: {},
authorization_url: 'https://jamesbarnsley.co.nz/iris/auth_spotify.php'
},
@ -128902,7 +128882,6 @@ var createRange = function createRange(indexes) {
var sortItems = function sortItems(array, property) {
var reverse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var sort_map = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
if (!array || array.length <= 0) {
return [];
@ -128913,7 +128892,7 @@ var sortItems = function sortItems(array, property) {
var sorter = function sorter(item) {
switch (property) {
case 'tracks':
return item.tracks_total || item.tracks.length;
return item.tracks_total || (item.tracks ? item.tracks.length : 0);
case 'artist':
return item.artists && item.artists.length ? item.artists[0].name : undefined;
@ -130567,7 +130546,7 @@ var isLoading = function isLoading() {
var load_queue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var keys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
if (!load_queue || !keys) return false;
var queue_keys = Object.keys(load_queue);
var queue = Object(_arrays__WEBPACK_IMPORTED_MODULE_0__["indexToArray"])(load_queue);
var matches = keys.reduce(function (acc, key) {
var regex = '';
@ -130579,7 +130558,7 @@ var isLoading = function isLoading() {
return acc;
}
return [].concat(_toConsumableArray(acc), _toConsumableArray(queue_keys.filter(function (qk) {
return [].concat(_toConsumableArray(acc), _toConsumableArray(queue.filter(function (qk) {
return qk.match(regex);
})));
}, []);
@ -133518,6 +133497,7 @@ var getQueueHistory = function getQueueHistory(state) {
};
var queueHistorySelector = Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getItems, getQueueHistory], function (items, queueHistory) {
if (!queueHistory || !queueHistory.length) return [];
return queueHistory.map(function (item) {
return _objectSpread(_objectSpread({}, item), items[item.uri] || {});
});
@ -135492,7 +135472,7 @@ var Debug = /*#__PURE__*/function (_React$Component) {
onClick: function onClick() {
return _this.props.uiActions.startProcess('TEST_PROCESS', {
content: 'Test process',
remaining: 68,
remaining: 36,
total: 100
});
},
@ -136309,6 +136289,7 @@ var Playlist = /*#__PURE__*/function (_React$Component) {
uri = _this$props10.uri,
playlist = _this$props10.playlist,
loading = _this$props10.loading,
loading_tracks = _this$props10.loading_tracks,
slim_mode = _this$props10.slim_mode,
sort = _this$props10.sort,
sort_reverse = _this$props10.sort_reverse;
@ -136460,6 +136441,11 @@ var Playlist = /*#__PURE__*/function (_React$Component) {
path: "playlist.tracks.title",
"data-qa-node": "I18n",
"data-qa-file": "Playlist"
}), loading_tracks && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_11__["default"], {
loading: true,
mini: true,
"data-qa-node": "Loader",
"data-qa-file": "Playlist"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "actions-wrapper",
"data-qa-node": "div",
@ -136499,12 +136485,7 @@ var Playlist = /*#__PURE__*/function (_React$Component) {
reorderTracks: _this.reorderTracks,
"data-qa-node": "TrackList",
"data-qa-file": "Playlist"
})), loading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_11__["default"], {
body: true,
loading: true,
"data-qa-node": "Loader",
"data-qa-file": "Playlist"
}));
})));
});
var _uri = props.uri;
@ -136556,12 +136537,14 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
var playlistId = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_21__["getFromUri"])('playlistid', uri);
var itemSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_24__["makeItemSelector"])(uri);
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_24__["makeLoadingSelector"])(["(.*)".concat(playlistId, "(?!.*(following))(.*)")]);
var loadingTracksSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_24__["makeLoadingSelector"])(["(.*)".concat(playlistId, "/tracks(.*)")]);
return {
uri: uri,
allow_reporting: allow_reporting,
slim_mode: slim_mode,
theme: theme,
loading: loadingSelector(state),
loading_tracks: loadingTracksSelector(state),
playlist: itemSelector(state),
spotify_library_playlists: spotify_library_playlists,
local_library_playlists: local_library_playlists,

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -106,7 +106,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1605345779";
var build = "1605862197";
var version = "3.54.2";
// Construct the script tag

11
src/js/components/Loader.js
View File

@ -113,18 +113,9 @@ export default memo((props) => {
<div className={classNameString}>
<LoaderRing
stroke={mini ? 2 : 3}
radius={mini ? 11 : 60}
radius={mini ? 12 : 60}
progress={progress}
/>
</div>
);
return (
<div className={classNameString}>
<div className="loader__spinner">
<div className="loader__spinner__background" />
<div className="loader__spinner__foreground" />
</div>
</div>
);
});

10
src/js/services/genius/reducer.js
View File

@ -20,10 +20,10 @@ export default function reducer(genius = {}, action) {
return {
...genius,
authorizing: false,
authorization: null,
authorization_code: null,
access_token: null,
me: null,
authorization: undefined,
authorization_code: undefined,
access_token: undefined,
me: undefined,
};
case 'GENIUS_IMPORT_AUTHORIZATION':
@ -33,7 +33,7 @@ export default function reducer(genius = {}, action) {
authorization: action.authorization,
authorization_code: action.authorization.authorization_code,
access_token: action.authorization.access_token,
me: null,
me: undefined,
};
default:

4
src/js/services/lastfm/reducer.js
View File

@ -26,7 +26,7 @@ export default function reducer(lastfm = {}, action) {
...lastfm,
authorizing: false,
authorization: false,
me: null,
me: undefined,
};
case 'LASTFM_IMPORT_AUTHORIZATION':
@ -34,7 +34,7 @@ export default function reducer(lastfm = {}, action) {
...lastfm,
authorizing: false,
authorization: action.authorization,
me: null,
me: undefined,
};
default:

28
src/js/services/localstorage/middleware.js
View File

@ -94,7 +94,7 @@ const localstorageMiddleware = (function () {
access_token: action.authorization.access_token,
refresh_token: action.authorization.refresh_token,
token_expiry: action.authorization.token_expiry,
me: null,
me: undefined,
},
);
break;
@ -103,11 +103,11 @@ const localstorageMiddleware = (function () {
storage.set(
'spotify',
{
authorization: null,
access_token: null,
refresh_token: null,
token_expiry: null,
me: null,
authorization: undefined,
access_token: undefined,
refresh_token: undefined,
token_expiry: undefined,
me: undefined,
},
);
break;
@ -154,8 +154,8 @@ const localstorageMiddleware = (function () {
storage.set(
'lastfm',
{
authorization: null,
me: null,
authorization: undefined,
me: undefined,
},
);
break;
@ -165,7 +165,7 @@ const localstorageMiddleware = (function () {
'lastfm',
{
authorization: action.authorization,
me: null,
me: undefined,
},
);
break;
@ -194,10 +194,10 @@ const localstorageMiddleware = (function () {
storage.set(
'genius',
{
me: null,
authorization: null,
authorization_code: null,
access_token: null,
me: undefined,
authorization: undefined,
authorization_code: undefined,
access_token: undefined,
},
);
break;
@ -209,7 +209,7 @@ const localstorageMiddleware = (function () {
authorization: action.authorization,
authorization_code: action.authorization.authorization_code,
access_token: action.authorization.access_token,
me: null,
me: undefined,
},
);
break;

4
src/js/util/arrays.js
View File

@ -144,7 +144,7 @@ const createRange = function (indexes) {
* @param sort_map = array of value ordering (rather than alphabetical, numerical, etc)
* @return array
* */
const sortItems = (array, property, reverse = false, sort_map = null) => {
const sortItems = (array, property, reverse = false) => {
if (!array || array.length <= 0) {
return [];
}
@ -154,7 +154,7 @@ const sortItems = (array, property, reverse = false, sort_map = null) => {
const sorter = (item) => {
switch (property) {
case 'tracks':
return item.tracks_total || item.tracks.length;
return item.tracks_total || (item.tracks ? item.tracks.length : 0);
case 'artist':
return item.artists && item.artists.length ? item.artists[0].name : undefined;
case 'album':

4
src/js/util/helpers.js
View File

@ -375,7 +375,7 @@ let isObject = function (value) {
const isLoading = function (load_queue = {}, keys = []) {
if (!load_queue || !keys) return false;
const queue_keys = Object.keys(load_queue);
const queue = indexToArray(load_queue);
const matches = keys.reduce((acc, key) => {
let regex = '';
try {
@ -388,7 +388,7 @@ const isLoading = function (load_queue = {}, keys = []) {
return [
...acc,
...(queue_keys.filter((qk) => qk.match(regex))),
...(queue.filter((qk) => qk.match(regex))),
];
}, []);

2
src/js/views/Debug.js
View File

@ -186,7 +186,7 @@ class Debug extends React.Component {
onClick={
() => this.props.uiActions.startProcess(
'TEST_PROCESS',
{ content: 'Test process', remaining: 68, total: 100 },
{ content: 'Test process', remaining: 36, total: 100 },
)
}
tracking={{ category: 'Debug', action: 'Test process' }}

6
src/js/views/Playlist.js
View File

@ -325,6 +325,7 @@ class Playlist extends React.Component {
uri,
playlist,
loading,
loading_tracks,
slim_mode,
sort,
sort_reverse,
@ -438,6 +439,7 @@ class Playlist extends React.Component {
<h4 className="no-bottom-margin">
<I18n path="playlist.tracks.title" />
{loading_tracks && <Loader loading mini />}
<div className="actions-wrapper">
<FilterField
initialValue={filter}
@ -466,8 +468,6 @@ class Playlist extends React.Component {
reorderTracks={this.reorderTracks}
/>
</section>
{loading && <Loader body loading />}
</div>
);
}
@ -494,6 +494,7 @@ const mapStateToProps = (state, ownProps) => {
const playlistId = getFromUri('playlistid', uri);
const itemSelector = makeItemSelector(uri);
const loadingSelector = makeLoadingSelector([`(.*)${playlistId}(?!.*(following))(.*)`]);
const loadingTracksSelector = makeLoadingSelector([`(.*)${playlistId}/tracks(.*)`]);
return {
uri,
@ -501,6 +502,7 @@ const mapStateToProps = (state, ownProps) => {
slim_mode,
theme,
loading: loadingSelector(state),
loading_tracks: loadingTracksSelector(state),
playlist: itemSelector(state),
spotify_library_playlists,
local_library_playlists,

34
src/scss/components/_loader.scss
View File

@ -1,5 +1,13 @@
.loader {
h1,
h2,
h3,
h4 {
.loader {
margin-left: 0.8rem;
}
}
.loader {
&__offline {
padding: 2rem;
color: colour(middle_grey);
@ -45,6 +53,14 @@
&--white {
.loader__ring {
&__progress {
stroke: rgb(128,128,128);
}
&__background {
stroke: rgba(128,128,128,0.5);
}
&__foreground {
stroke: colour(white);
}
@ -60,20 +76,8 @@
padding: 0;
.loader__ring {
width: 20px;
height: 20px;
&__progress {
stroke: rgb(128,128,128);
}
&__background {
stroke: rgba(128,128,128,0.5);
}
&__foreground {
stroke: colour(white);
}
width: 24px;
height: 24px;
}
.loader__offline {

18
src/scss/components/_notifications.scss
View File

@ -17,6 +17,7 @@
pointer-events: all;
border-radius: 3px;
font-size: 0.9rem;
min-width: 200px;
&__wrapper {
display: flex;
@ -122,8 +123,9 @@
&--process {
position: relative;
padding-right: 18px;
padding-left: 50px;
padding-right: 2rem;
padding-left: 3rem;
min-width: calc(200px - 3rem);
&.cancelling {
opacity: 0.5 !important;
@ -132,8 +134,8 @@
.loader {
position: absolute;
top: 11px;
left: 13px;
top: 9px;
left: 9px;
}
}
@ -149,6 +151,14 @@
right: 10px;
width: auto;
.notification {
&,
&--process {
min-width: 0px;
width: 100%;
}
}
.loading {
bottom: 20px;
right: 40px;