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

Adding numbers to loader

Browse Source
This commit is contained in:
James Barnsley
2020-12-05 21:41:30 +13:00
parent 491735c901
commit 094bdfeab8
15 changed files with 173 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
mopidy_iris/static/app.css
View File

@ -4367,67 +4367,69 @@ h3 .loader,
h4 .loader {
margin-left: 0.8rem; }
.loader__offline {
padding: 2rem;
color: rgba(128, 128, 128, 0.5);
text-align: center;
font-size: 1rem; }
.loader__offline .icon {
display: block;
font-size: 3rem;
padding-bottom: 0.5rem; }
.loader__ring {
height: 120px;
width: 120px;
margin: 0 auto;
position: relative; }
.loader__ring__progress, .loader__ring__background, .loader__ring__foreground {
position: absolute;
transform-origin: 50% 50%; }
.loader__ring__progress {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
position: absolute;
stroke: rgba(128, 128, 128, 0.25); }
.loader__ring__background {
stroke: rgba(128, 128, 128, 0.25); }
.loader__ring__foreground {
animation-name: spin;
animation-duration: 0.5s;
animation-timing-function: linear;
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; }
.loader--body {
padding: 35vh 0;
text-align: center; }
.loader--mini {
padding: 0; }
.loader--mini .loader__ring {
width: 24px;
height: 24px; }
.loader--mini .loader__offline {
display: none; }
.loader--lazy {
padding: 20px; }
.loader--lazy .loader__spinner {
width: 40px;
height: 40px; }
.loader {
position: relative;
display: flex;
flex-direction: column; }
.loader__offline {
padding: 2rem;
color: rgba(128, 128, 128, 0.5);
text-align: center;
font-size: 1rem; }
.loader__offline .icon {
display: block;
font-size: 3rem;
padding-bottom: 0.5rem; }
.loader__progress-text {
text-align: center;
color: rgba(128, 128, 128, 0.5);
margin: -65px auto 0;
font-size: 0.82rem; }
.loader__ring {
height: 120px;
width: 120px;
margin: 0 auto;
position: relative; }
.loader__ring__progress, .loader__ring__background, .loader__ring__foreground {
position: absolute;
transform-origin: 50% 50%; }
.loader__ring__progress {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
position: absolute;
stroke: rgba(128, 128, 128, 0.25); }
.loader__ring__background {
stroke: rgba(128, 128, 128, 0.25); }
.loader__ring__foreground {
animation-name: spin;
animation-duration: 0.5s;
animation-timing-function: linear;
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; }
.loader--body {
padding: 35vh 0;
text-align: center; }
.loader--mini {
padding: 0; }
.loader--mini .loader__ring {
width: 24px;
height: 24px; }
.loader--mini .loader__offline {
display: none; }
.loader--lazy {
padding: 20px; }
.loader--lazy .loader__spinner {
width: 40px;
height: 40px; }
.dragging * {
cursor: grabbing !important;

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

File diff suppressed because one or more lines are too long

86
mopidy_iris/static/app.js
View File

@ -106858,17 +106858,17 @@ __webpack_require__.r(__webpack_exports__);
var LoaderRing = function LoaderRing(_ref) {
var radius = _ref.radius,
stroke = _ref.stroke,
progress = _ref.progress;
percent = _ref.percent;
var normalizedRadius = radius - stroke * 2;
var circumference = normalizedRadius * 2 * Math.PI;
var strokeDashoffset = circumference - progress * circumference;
var strokeDashoffset = circumference - percent * circumference;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg", {
className: "loader__ring",
height: radius * 2,
width: radius * 2,
"data-qa-node": "svg",
"data-qa-file": "Loader"
}, progress === null ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle", {
}, percent === null ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle", {
className: "loader__ring__background",
stroke: "transparent",
fill: "transparent",
@ -106914,7 +106914,11 @@ var LoaderRing = function LoaderRing(_ref) {
white = props.white,
_props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
progress = props.progress;
_props$progress = props.progress;
_props$progress = _props$progress === void 0 ? {} : _props$progress;
var total = _props$progress.total,
remaining = _props$progress.remaining,
percent = _props$progress.percent;
if (!loading && !finished) {
return null;
@ -106998,10 +107002,14 @@ var LoaderRing = function LoaderRing(_ref) {
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(LoaderRing, {
stroke: mini ? 2 : 3,
radius: mini ? 12 : 60,
progress: progress,
percent: percent,
"data-qa-node": "LoaderRing",
"data-qa-file": "Loader"
}));
}), total > 0 && remaining >= 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "loader__progress-text",
"data-qa-node": "div",
"data-qa-file": "Loader"
}, "".concat(total - remaining, " / ").concat(total)));
}));
/***/ }),
@ -107026,6 +107034,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@ -107161,19 +107181,19 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
title: stream_title || title,
artist: artists.length ? artists[0].name : null,
album: album.name,
artwork: [{
artwork: [].concat(_toConsumableArray(images.small ? [{
src: images ? images.small : '',
sizes: '96x96',
type: 'image/png'
}, {
}] : []), _toConsumableArray(images.medium ? [{
src: images ? images.medium : '',
sizes: '256x256',
type: 'image/png'
}, {
}] : []), _toConsumableArray(images.huge ? [{
src: images ? images.huge : '',
sizes: '512x512',
type: 'image/png'
}]
}] : []))
});
}
@ -130638,14 +130658,18 @@ var makeProcessProgressSelector = function makeProcessProgressSelector(keys) {
}).filter(function (i) {
return i.status === 'running';
});
if (!selectedProcesses.length) return null;
if (!selectedProcesses.length) return undefined;
var total = 0;
var remaining = 0;
selectedProcesses.forEach(function (process) {
if (process.total) total += process.total;
if (process.remaining) remaining += process.remaining;
});
return total && remaining ? ((total - remaining) / total).toFixed(4) : 0;
return {
total: total,
remaining: remaining,
percent: total && remaining ? ((total - remaining) / total).toFixed(4) : 0
};
});
};
@ -138801,7 +138825,7 @@ var LibraryAlbums = /*#__PURE__*/function (_React$Component) {
filter = _this$state2.filter;
var albums = _this.props.albums;
if (loading_progress !== null) {
if (loading_progress) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_18__["default"], {
body: true,
loading: true,
@ -138878,7 +138902,6 @@ var LibraryAlbums = /*#__PURE__*/function (_React$Component) {
var _this$state3 = _this.state,
filter = _this$state3.filter,
per_page = _this$state3.per_page;
var loading = loading_progress !== null;
var source_options = [{
value: 'all',
label: Object(_locale__WEBPACK_IMPORTED_MODULE_17__["i18n"])('fields.filters.all')
@ -138985,14 +139008,14 @@ var LibraryAlbums = /*#__PURE__*/function (_React$Component) {
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Button__WEBPACK_IMPORTED_MODULE_16__["default"], {
noHover: true,
discrete: true,
onClick: loading ? _this.cancelRefresh : _this.refresh,
onClick: loading_progress ? _this.cancelRefresh : _this.refresh,
tracking: {
category: 'LibraryAlbums',
action: 'Refresh'
},
"data-qa-node": "Button",
"data-qa-file": "LibraryAlbums"
}, loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_9__["default"], {
}, loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_9__["default"], {
name: "close",
"data-qa-node": "Icon",
"data-qa-file": "LibraryAlbums"
@ -139000,7 +139023,7 @@ var LibraryAlbums = /*#__PURE__*/function (_React$Component) {
name: "refresh",
"data-qa-node": "Icon",
"data-qa-file": "LibraryAlbums"
}), loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_17__["I18n"], {
}), loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_17__["I18n"], {
path: "actions.cancel",
"data-qa-node": "I18n",
"data-qa-file": "LibraryAlbums"
@ -139298,7 +139321,7 @@ var LibraryArtists = /*#__PURE__*/function (_React$Component) {
filter = _this$state.filter;
var artists = _this.props.artists;
if (loading_progress !== null) {
if (loading_progress) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_15__["default"], {
body: true,
loading: true,
@ -139375,7 +139398,6 @@ var LibraryArtists = /*#__PURE__*/function (_React$Component) {
spotify_available = _this$props6.spotify_available,
google_available = _this$props6.google_available,
loading_progress = _this$props6.loading_progress;
var loading = loading_progress !== null;
var source_options = [{
value: 'all',
label: Object(_locale__WEBPACK_IMPORTED_MODULE_13__["i18n"])('fields.filters.all')
@ -139478,14 +139500,14 @@ var LibraryArtists = /*#__PURE__*/function (_React$Component) {
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Button__WEBPACK_IMPORTED_MODULE_14__["default"], {
noHover: true,
discrete: true,
onClick: loading ? _this.cancelRefresh : _this.refresh,
onClick: loading_progress ? _this.cancelRefresh : _this.refresh,
tracking: {
category: 'LibraryArtists',
action: 'Refresh'
},
"data-qa-node": "Button",
"data-qa-file": "LibraryArtists"
}, loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_9__["default"], {
}, loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_9__["default"], {
name: "close",
"data-qa-node": "Icon",
"data-qa-file": "LibraryArtists"
@ -139493,7 +139515,7 @@ var LibraryArtists = /*#__PURE__*/function (_React$Component) {
name: "refresh",
"data-qa-node": "Icon",
"data-qa-file": "LibraryArtists"
}), loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_13__["I18n"], {
}), loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_13__["I18n"], {
path: "actions.cancel",
"data-qa-node": "I18n",
"data-qa-file": "LibraryArtists"
@ -140409,7 +140431,7 @@ var LibraryPlaylists = /*#__PURE__*/function (_React$Component) {
filter = _this$state.filter,
limit = _this$state.limit;
if (loading_progress !== null) {
if (loading_progress) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_17__["default"], {
body: true,
loading: true,
@ -140495,7 +140517,6 @@ var LibraryPlaylists = /*#__PURE__*/function (_React$Component) {
view = _this$props4.view,
loading_progress = _this$props4.loading_progress;
var filter = _this.state.filter;
var loading = loading_progress !== null;
var source_options = [{
value: 'all',
label: Object(_locale__WEBPACK_IMPORTED_MODULE_16__["i18n"])('fields.filters.all')
@ -140597,14 +140618,14 @@ var LibraryPlaylists = /*#__PURE__*/function (_React$Component) {
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Button__WEBPACK_IMPORTED_MODULE_3__["default"], {
noHover: true,
discrete: true,
onClick: loading ? _this.cancelRefresh : _this.refresh,
onClick: loading_progress ? _this.cancelRefresh : _this.refresh,
tracking: {
category: 'LibraryAlbums',
action: 'Refresh'
},
"data-qa-node": "Button",
"data-qa-file": "LibraryPlaylists"
}, loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_10__["default"], {
}, loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_10__["default"], {
name: "close",
"data-qa-node": "Icon",
"data-qa-file": "LibraryPlaylists"
@ -140612,7 +140633,7 @@ var LibraryPlaylists = /*#__PURE__*/function (_React$Component) {
name: "refresh",
"data-qa-node": "Icon",
"data-qa-file": "LibraryPlaylists"
}), loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_16__["I18n"], {
}), loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_16__["I18n"], {
path: "actions.cancel",
"data-qa-node": "I18n",
"data-qa-file": "LibraryPlaylists"
@ -140983,7 +141004,7 @@ var LibraryTracks = /*#__PURE__*/function (_React$Component) {
filter = _this$state2.filter;
var tracks = _this.props.tracks;
if (loading_progress !== null) {
if (loading_progress) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_16__["default"], {
body: true,
loading: true,
@ -141032,7 +141053,6 @@ var LibraryTracks = /*#__PURE__*/function (_React$Component) {
var _this$state3 = _this.state,
filter = _this$state3.filter,
per_page = _this$state3.per_page;
var loading = loading_progress !== null;
var source_options = [{
value: 'all',
label: Object(_locale__WEBPACK_IMPORTED_MODULE_15__["i18n"])('fields.filters.all')
@ -141123,14 +141143,14 @@ var LibraryTracks = /*#__PURE__*/function (_React$Component) {
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Button__WEBPACK_IMPORTED_MODULE_14__["default"], {
noHover: true,
discrete: true,
onClick: loading ? _this.cancelRefresh : _this.refresh,
onClick: loading_progress ? _this.cancelRefresh : _this.refresh,
tracking: {
category: 'LibraryTracks',
action: 'Refresh'
},
"data-qa-node": "Button",
"data-qa-file": "LibraryTracks"
}, loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_8__["default"], {
}, loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Icon__WEBPACK_IMPORTED_MODULE_8__["default"], {
name: "close",
"data-qa-node": "Icon",
"data-qa-file": "LibraryTracks"
@ -141138,7 +141158,7 @@ var LibraryTracks = /*#__PURE__*/function (_React$Component) {
name: "refresh",
"data-qa-node": "Icon",
"data-qa-file": "LibraryTracks"
}), loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_15__["I18n"], {
}), loading_progress ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_15__["I18n"], {
path: "actions.cancel",
"data-qa-node": "I18n",
"data-qa-file": "LibraryTracks"
@ -141367,7 +141387,7 @@ var AddToPlaylist = /*#__PURE__*/function (_React$Component) {
} : _this$props3$mopidy_l,
loading_progress = _this$props3.loading_progress;
if (loading_progress !== null) {
if (loading_progress) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_3__["default"], {
body: true,
loading: true,

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.css vendored
View File

File diff suppressed because one or more lines are too long

4
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 = "1607075780";
var build = "1607156205";
var version = "3.55.1";
// Construct the script tag