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

Functional-component-ifying Parallax to silence unmount issues; artistSelector to include albums, still doesn't avoid unnecessary renders though

Browse Source
This commit is contained in:
James Barnsley
2021-03-15 20:29:12 +13:00
parent 8e1055ce3e
commit 59aa192e00
8 changed files with 173 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
mopidy_iris/static/app.js
View File

@ -143308,141 +143308,100 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Parallax; });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _util_storage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../util/storage */ "./src/js/util/storage.js");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
/* harmony import */ var react_in_viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-in-viewport */ "./node_modules/react-in-viewport/dist/es/index.js");
/* harmony import */ var react_in_viewport__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_in_viewport__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _util_storage__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util/storage */ "./src/js/util/storage.js");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
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); } }
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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var Parallax = /*#__PURE__*/function (_React$Component) {
_inherits(Parallax, _React$Component);
var _super = _createSuper(Parallax);
var Parallax = function Parallax(_ref) {
var blur = _ref.blur,
fixedHeight = _ref.fixedHeight,
url = _ref.image,
_ref$animate = _ref.animate,
animate = _ref$animate === void 0 ? true : _ref$animate;
function Parallax(props) {
var _this;
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false),
_useState2 = _slicedToArray(_useState, 2),
isLoaded = _useState2[0],
setIsLoaded = _useState2[1];
_classCallCheck(this, Parallax);
var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(),
_useState4 = _slicedToArray(_useState3, 2),
currentUrl = _useState4[0],
setCurrentUrl = _useState4[1];
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
var image = _this.props.image;
var url = _this.state.url;
if (image && image !== url) _this.loadImage(image);
var loadImage = function loadImage(urlToLoad) {
console.debug('loadImage', {
urlToLoad: urlToLoad,
currentUrl: currentUrl,
url: url,
isLoaded: isLoaded
});
setCurrentUrl(urlToLoad);
_this.state = {
loaded: false,
url: null
};
return _this;
if (urlToLoad && urlToLoad !== '') {
setIsLoaded(Object(_util_storage__WEBPACK_IMPORTED_MODULE_2__["isCached"])(urlToLoad));
var imageObject = new Image();
imageObject.src = urlToLoad;
imageObject.onload = function () {
setIsLoaded(true);
}; // No Image, so reset it
} else {
setIsLoaded(false);
}
};
if (url !== currentUrl) {
loadImage(url);
}
_createClass(Parallax, [{
key: "componentDidMount",
value: function componentDidMount() {
var image = this.props.image;
if (image) {
this.loadImage(image);
}
}
}, {
key: "loadImage",
value: function loadImage(url) {
if (url && url !== '') {
this.setState({
loaded: Object(_util_storage__WEBPACK_IMPORTED_MODULE_1__["isCached"])(url),
url: url
});
var self = this;
var imageObject = new Image();
imageObject.src = url;
imageObject.onload = function () {
self.setState({
loaded: true,
url: url
});
}; // No Image, so reset it
} else {
this.setState({
loaded: false,
url: null
});
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
blur = _this$props.blur,
fixedHeight = _this$props.fixedHeight,
_this$props$animate = _this$props.animate,
animate = _this$props$animate === void 0 ? true : _this$props$animate;
var _this$state = this.state,
loaded = _this$state.loaded,
url = _this$state.url;
var className = 'parallax preserve-3d';
className += " parallax--".concat(fixedHeight ? 'fixed' : 'flexible', "-height");
if (blur) className += ' parallax--blur';
if (loaded) className += ' parallax--loaded';
if (animate) className += ' parallax--animate';
var style = loaded && url ? {
backgroundImage: "url(\"".concat(url, "\")")
} : {};
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: className,
"data-qa-node": "div",
"data-qa-file": "Parallax"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "parallax__layer preserve-3d",
"data-qa-node": "div",
"data-qa-file": "Parallax"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "parallax__image",
style: style,
"data-qa-node": "div",
"data-qa-file": "Parallax"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "parallax__overlay",
"data-qa-node": "div",
"data-qa-file": "Parallax"
})));
}
}]);
return Parallax;
}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);
var className = 'parallax preserve-3d';
className += " parallax--".concat(fixedHeight ? 'fixed' : 'flexible', "-height");
if (blur) className += ' parallax--blur';
if (isLoaded) className += ' parallax--loaded';
if (animate) className += ' parallax--animate';
var style = isLoaded && currentUrl ? {
backgroundImage: "url(\"".concat(currentUrl, "\")")
} : {};
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: className,
"data-qa-node": "div",
"data-qa-file": "Parallax"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "parallax__layer preserve-3d",
"data-qa-node": "div",
"data-qa-file": "Parallax"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "parallax__image",
style: style,
"data-qa-node": "div",
"data-qa-file": "Parallax"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "parallax__overlay",
"data-qa-node": "div",
"data-qa-file": "Parallax"
})));
};
/* harmony default export */ __webpack_exports__["default"] = (Parallax);
/***/ }),
@ -164017,7 +163976,7 @@ var ensureLoaded = function ensureLoaded(_ref3) {
/*!**********************************!*\
!*** ./src/js/util/selectors.js ***!
\**********************************/
/*! exports provided: getItem, getLibrary, getGridGlowEnabled, getLibrarySource, getDragger, makeItemSelector, makeLibrarySelector, makeLoadingSelector, makeSearchResultsSelector, makeProcessProgressSelector, queueHistorySelector */
/*! exports provided: getItem, getLibrary, getGridGlowEnabled, getLibrarySource, getDragger, makeItemSelector, makeArtistSelector, makeLibrarySelector, makeLoadingSelector, makeSearchResultsSelector, makeProcessProgressSelector, queueHistorySelector */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -164028,6 +163987,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getLibrarySource", function() { return getLibrarySource; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDragger", function() { return getDragger; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeItemSelector", function() { return makeItemSelector; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeArtistSelector", function() { return makeArtistSelector; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeLibrarySelector", function() { return makeLibrarySelector; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeLoadingSelector", function() { return makeLoadingSelector; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeSearchResultsSelector", function() { return makeSearchResultsSelector; });
@ -164104,6 +164064,16 @@ var makeItemSelector = function makeItemSelector(uri) {
});
};
var makeArtistSelector = function makeArtistSelector(uri) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getItems], function (items) {
var artist = items[uri];
var albums = (artist === null || artist === void 0 ? void 0 : artist.albums_uris) ? Object(_arrays__WEBPACK_IMPORTED_MODULE_1__["indexToArray"])(items, artist.albums_uris) : [];
return _objectSpread(_objectSpread({}, artist), {}, {
albums: albums
});
});
};
var makeLoadingSelector = function makeLoadingSelector(keys) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getLoadQueue], function (loadQueue) {
return Object(_helpers__WEBPACK_IMPORTED_MODULE_2__["isLoading"])(loadQueue, keys);
@ -165067,8 +165037,8 @@ var Artist = /*#__PURE__*/function (_React$Component) {
filterType = _this$props5.filterType;
var filter = _this.state.albumsFilter;
var tracks = artist.tracks,
related_artists = artist.related_artists;
var albums = _this.props.albums;
related_artists = artist.related_artists,
albums = artist.albums;
if (sort && albums) {
albums = Object(_util_arrays__WEBPACK_IMPORTED_MODULE_22__["sortItems"])(albums, sort, sort_reverse);
@ -165690,22 +165660,14 @@ var Artist = /*#__PURE__*/function (_React$Component) {
return Artist;
}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);
var mapStateToProps = function mapStateToProps(state, ownProps) {
var uri = decodeURIComponent(ownProps.match.params.uri);
var mapStateToProps = function mapStateToProps(state, props) {
var uri = decodeURIComponent(props.match.params.uri);
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_26__["makeLoadingSelector"])(["(.*)".concat(uri, "(.*)"), '^((?!contains).)*$', '^((?!albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$']);
var artistSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_26__["makeItemSelector"])(uri);
var artistSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_26__["makeArtistSelector"])(uri);
var artist = artistSelector(state);
var albums = null;
if (artist && artist.albums_uris) {
var albumsSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_26__["makeItemSelector"])(artist.albums_uris);
albums = albumsSelector(state);
}
return {
uri: uri,
artist: artist,
albums: albums,
loading: loadingSelector(state),
theme: state.ui.theme,
slim_mode: state.ui.slim_mode,

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

File diff suppressed because one or more lines are too long

22
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 = "1615703279";
var build = "1615792868";
var version = "3.57.0";
// Construct the script tag

101
src/js/components/Parallax.js
View File

@ -1,83 +1,56 @@
import React from 'react';
import React, { useState } from 'react';
import handleViewport from 'react-in-viewport';
import { isCached } from '../util/storage';
export default class Parallax extends React.Component {
constructor(props) {
super(props);
const Parallax = ({
blur,
fixedHeight,
image: url,
animate = true,
}) => {
const [isLoaded, setIsLoaded] = useState(false);
const [currentUrl, setCurrentUrl] = useState();
this.state = {
loaded: false,
url: null,
};
}
const loadImage = (urlToLoad) => {
console.debug('loadImage', { urlToLoad, currentUrl, url, isLoaded })
componentDidMount() {
const { image } = this.props;
setCurrentUrl(urlToLoad);
if (urlToLoad && urlToLoad !== '') {
setIsLoaded(isCached(urlToLoad));
if (image) {
this.loadImage(image);
}
}
componentDidUpdate = () => {
const { image } = this.props;
const { url } = this.state;
if (image && image !== url) this.loadImage(image);
}
loadImage(url) {
if (url && url !== '') {
this.setState({
loaded: isCached(url),
url,
});
const self = this;
const imageObject = new Image();
imageObject.src = url;
imageObject.src = urlToLoad;
imageObject.onload = () => {
self.setState({
loaded: true,
url,
});
setIsLoaded(true);
};
// No Image, so reset it
} else {
this.setState({
loaded: false,
url: null,
});
setIsLoaded(false);
}
};
if (url !== currentUrl) {
loadImage(url);
}
render() {
const {
blur,
fixedHeight,
animate = true,
} = this.props;
const {
loaded,
url,
} = this.state;
let className = 'parallax preserve-3d';
className += ` parallax--${fixedHeight ? 'fixed' : 'flexible'}-height`;
if (blur) className += ' parallax--blur';
if (isLoaded) className += ' parallax--loaded';
if (animate) className += ' parallax--animate';
let className = 'parallax preserve-3d';
className += ` parallax--${fixedHeight ? 'fixed' : 'flexible'}-height`;
if (blur) className += ' parallax--blur';
if (loaded) className += ' parallax--loaded';
if (animate) className += ' parallax--animate';
const style = isLoaded && currentUrl ? { backgroundImage: `url("${currentUrl}")` } : {};
const style = loaded && url ? { backgroundImage: `url("${url}")` } : {};
return (
<div className={className}>
<div className="parallax__layer preserve-3d">
<div className="parallax__image" style={style} />
<div className="parallax__overlay" />
</div>
return (
<div className={className}>
<div className="parallax__layer preserve-3d">
<div className="parallax__image" style={style} />
<div className="parallax__overlay" />
</div>
);
}
</div>
);
}
export default Parallax;

15
src/js/util/debug.js
View File

@ -1,5 +1,20 @@
import { useRef, useEffect } from 'react';
/**
* Drop this in to a component
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed`)
);
if (this.state) {
Object.entries(this.state).forEach(([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed`)
);
}
}
*/
const useTraceUpdate = (props) => {
const prev = useRef(props);
useEffect(() => {

12
src/js/util/selectors.js
View File

@ -21,6 +21,17 @@ const makeItemSelector = (uri) => createSelector(
return items[uri];
},
);
const makeArtistSelector = (uri) => createSelector(
[getItems],
(items) => {
const artist = items[uri];
const albums = artist?.albums_uris ? indexToArray(items, artist.albums_uris) : [];
return {
...artist,
albums,
};
},
);
const makeLoadingSelector = (keys) => createSelector(
[getLoadQueue],
(loadQueue) => isLoading(loadQueue, keys),
@ -94,6 +105,7 @@ export {
getLibrarySource,
getDragger,
makeItemSelector,
makeArtistSelector,
makeLibrarySelector,
makeLoadingSelector,
makeSearchResultsSelector,

16
src/js/views/Artist.js
View File

@ -29,7 +29,7 @@ import { i18n, I18n } from '../locale';
import Button from '../components/Button';
import { trackEvent } from '../components/Trackable';
import {
makeItemSelector,
makeArtistSelector,
makeLoadingSelector,
} from '../util/selectors';
import { nice_number } from '../components/NiceNumber';
@ -193,8 +193,8 @@ class Artist extends React.Component {
let {
tracks,
related_artists,
albums,
} = artist;
let { albums } = this.props;
if (sort && albums) {
albums = sortItems(albums, sort, sort_reverse);
@ -601,21 +601,15 @@ class Artist extends React.Component {
}
}
const mapStateToProps = (state, ownProps) => {
const uri = decodeURIComponent(ownProps.match.params.uri);
const mapStateToProps = (state, props) => {
const uri = decodeURIComponent(props.match.params.uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$']);
const artistSelector = makeItemSelector(uri);
const artistSelector = makeArtistSelector(uri);
const artist = artistSelector(state);
let albums = null;
if (artist && artist.albums_uris) {
const albumsSelector = makeItemSelector(artist.albums_uris);
albums = albumsSelector(state);
}
return {
uri,
artist,
albums,
loading: loadingSelector(state),
theme: state.ui.theme,
slim_mode: state.ui.slim_mode,