Context menu for User; Fixing loader for Categories

This commit is contained in:
James Barnsley
2021-02-10 16:45:07 +13:00
parent bc38b1ba6b
commit 3087c49f6c
10 changed files with 147 additions and 122 deletions

View File

@ -135977,6 +135977,16 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
"data-qa-file": "ContextMenu"
}), remove_from_playlist);
case 'user':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
"data-qa-node": "div",
"data-qa-file": "ContextMenu"
}, _this.canBeInLibrary() && toggle_in_library, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "context-menu__divider",
"data-qa-node": "div",
"data-qa-file": "ContextMenu"
}), copy_uris, refresh);
default:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
"data-qa-node": "div",
@ -158540,6 +158550,8 @@ function getCategory(uri) {
forceRefetch = _ref3.forceRefetch;
return function (dispatch, getState) {
var loaderId = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["generateGuid"])();
dispatch(uiActions.startLoading(loaderId, "spotify_category_".concat(uri)));
var id = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["getFromUri"])('categoryid', uri);
var endpoint = "browse/categories/".concat(id);
endpoint += "?country=".concat(getState().spotify.country);
@ -158574,6 +158586,7 @@ function getCategory(uri) {
playlists_uris: Object(_util_arrays__WEBPACK_IMPORTED_MODULE_1__["arrayOf"])('uri', playlists)
})));
dispatch(coreActions.itemsLoaded(playlists));
dispatch(uiActions.stopLoading(loaderId));
}
});
};
@ -164448,25 +164461,14 @@ var Album = /*#__PURE__*/function (_React$Component) {
}
});
_defineProperty(_assertThisInitialized(_this), "handleContextMenu", function (e) {
var _this$props2 = _this.props,
uri = _this$props2.uri,
showContextMenu = _this$props2.uiActions.showContextMenu;
e.preventDefault();
var data = {
uris: [uri]
};
showContextMenu(e, data, 'album', 'click');
});
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (_ref) {
var prevUri = _ref.uri,
prevAlbum = _ref.album;
var _this$props3 = _this.props,
uri = _this$props3.uri,
album = _this$props3.album,
loadAlbum = _this$props3.coreActions.loadAlbum,
getAlbum = _this$props3.lastfmActions.getAlbum;
var _this$props2 = _this.props,
uri = _this$props2.uri,
album = _this$props2.album,
loadAlbum = _this$props2.coreActions.loadAlbum,
getAlbum = _this$props2.lastfmActions.getAlbum;
if (uri !== prevUri) {
loadAlbum(uri, {
@ -164486,9 +164488,9 @@ var Album = /*#__PURE__*/function (_React$Component) {
_defineProperty(_assertThisInitialized(_this), "setWindowTitle", function () {
var album = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.album;
var _this$props4 = _this.props,
setWindowTitle = _this$props4.uiActions.setWindowTitle,
artists = _this$props4.artists;
var _this$props3 = _this.props,
setWindowTitle = _this$props3.uiActions.setWindowTitle,
artists = _this$props3.artists;
if (album) {
var artistNames = [];
@ -164513,10 +164515,10 @@ var Album = /*#__PURE__*/function (_React$Component) {
});
_defineProperty(_assertThisInitialized(_this), "handleContextMenu", function (e) {
var _this$props5 = _this.props,
album = _this$props5.album,
uri = _this$props5.uri,
showContextMenu = _this$props5.uiActions.showContextMenu;
var _this$props4 = _this.props,
album = _this$props4.album,
uri = _this$props4.uri,
showContextMenu = _this$props4.uiActions.showContextMenu;
showContextMenu({
e: e,
context: 'album',
@ -164526,13 +164528,13 @@ var Album = /*#__PURE__*/function (_React$Component) {
});
_defineProperty(_assertThisInitialized(_this), "loadMore", function () {
var _this$props6 = _this.props,
getMore = _this$props6.spotifyActions.getMore,
_this$props6$album = _this$props6.album;
_this$props6$album = _this$props6$album === void 0 ? {} : _this$props6$album;
var uri = _this$props6$album.uri,
name = _this$props6$album.name,
tracks_more = _this$props6$album.tracks_more;
var _this$props5 = _this.props,
getMore = _this$props5.spotifyActions.getMore,
_this$props5$album = _this$props5.album;
_this$props5$album = _this$props5$album === void 0 ? {} : _this$props5$album;
var uri = _this$props5$album.uri,
name = _this$props5$album.name,
tracks_more = _this$props5$album.tracks_more;
getMore(tracks_more, {
parent_type: 'album',
parent_key: uri,
@ -164546,19 +164548,19 @@ var Album = /*#__PURE__*/function (_React$Component) {
});
_defineProperty(_assertThisInitialized(_this), "play", function () {
var _this$props7 = _this.props,
uri = _this$props7.uri,
playURIs = _this$props7.mopidyActions.playURIs;
var _this$props6 = _this.props,
uri = _this$props6.uri,
playURIs = _this$props6.mopidyActions.playURIs;
playURIs([uri], uri);
});
_defineProperty(_assertThisInitialized(_this), "onChangeSort", function (value) {
var _this$props8 = _this.props,
sort = _this$props8.sort,
sort_reverse = _this$props8.sort_reverse,
_this$props8$uiAction = _this$props8.uiActions,
set = _this$props8$uiAction.set,
hideContextMenu = _this$props8$uiAction.hideContextMenu;
var _this$props7 = _this.props,
sort = _this$props7.sort,
sort_reverse = _this$props7.sort_reverse,
_this$props7$uiAction = _this$props7.uiActions,
set = _this$props7$uiAction.set,
hideContextMenu = _this$props7$uiAction.hideContextMenu;
var reverse = false;
if (value !== null && sort === value) {
@ -164584,13 +164586,13 @@ var Album = /*#__PURE__*/function (_React$Component) {
});
_defineProperty(_assertThisInitialized(_this), "render", function () {
var _this$props9 = _this.props,
uri = _this$props9.uri,
album = _this$props9.album,
loading = _this$props9.loading,
slim_mode = _this$props9.slim_mode,
sort = _this$props9.sort,
sort_reverse = _this$props9.sort_reverse;
var _this$props8 = _this.props,
uri = _this$props8.uri,
album = _this$props8.album,
loading = _this$props8.loading,
slim_mode = _this$props8.slim_mode,
sort = _this$props8.sort,
sort_reverse = _this$props8.sort_reverse;
var _this$props$album = _this.props.album;
_this$props$album = _this$props$album === void 0 ? {} : _this$props$album;
var tracks = _this$props$album.tracks;
@ -170277,6 +170279,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../util/helpers */ "./src/js/util/helpers.js");
/* harmony import */ var _locale__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../locale */ "./src/js/locale/index.js");
/* harmony import */ var _util_selectors__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../util/selectors */ "./src/js/util/selectors.js");
/* harmony import */ var _components_ContextMenuTrigger__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../components/ContextMenuTrigger */ "./src/js/components/ContextMenuTrigger.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); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -170319,6 +170322,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var User = /*#__PURE__*/function (_React$Component) {
_inherits(User, _React$Component);
@ -170353,6 +170357,19 @@ var User = /*#__PURE__*/function (_React$Component) {
if (!prevUser && user) _this.setWindowTitle(user);
});
_defineProperty(_assertThisInitialized(_this), "handleContextMenu", function (e) {
var _this$props2 = _this.props,
user = _this$props2.user,
uri = _this$props2.uri,
showContextMenu = _this$props2.uiActions.showContextMenu;
showContextMenu({
e: e,
context: 'user',
items: [user],
uris: [uri]
});
});
_defineProperty(_assertThisInitialized(_this), "setWindowTitle", function () {
var user = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.user;
var setWindowTitle = _this.props.uiActions.setWindowTitle;
@ -170367,12 +170384,12 @@ var User = /*#__PURE__*/function (_React$Component) {
});
_defineProperty(_assertThisInitialized(_this), "loadMore", function () {
var _this$props2 = _this.props,
uri = _this$props2.uri,
getMore = _this$props2.spotifyActions.getMore,
_this$props2$user = _this$props2.user;
_this$props2$user = _this$props2$user === void 0 ? {} : _this$props2$user;
var playlists_more = _this$props2$user.playlists_more;
var _this$props3 = _this.props,
uri = _this$props3.uri,
getMore = _this$props3.spotifyActions.getMore,
_this$props3$user = _this$props3.user;
_this$props3$user = _this$props3$user === void 0 ? {} : _this$props3$user;
var playlists_more = _this$props3$user.playlists_more;
getMore(playlists_more, {
parent_type: 'user',
parent_key: uri,
@ -170381,21 +170398,21 @@ var User = /*#__PURE__*/function (_React$Component) {
});
_defineProperty(_assertThisInitialized(_this), "isMe", function () {
var _this$props3 = _this.props,
uri = _this$props3.uri,
_this$props3$me = _this$props3.me;
_this$props3$me = _this$props3$me === void 0 ? {} : _this$props3$me;
var id = _this$props3$me.id;
var _this$props4 = _this.props,
uri = _this$props4.uri,
_this$props4$me = _this$props4.me;
_this$props4$me = _this$props4$me === void 0 ? {} : _this$props4$me;
var id = _this$props4$me.id;
return id && id === Object(_util_helpers__WEBPACK_IMPORTED_MODULE_14__["getFromUri"])('userid', uri);
});
_defineProperty(_assertThisInitialized(_this), "render", function () {
var _this$props4 = _this.props,
uri = _this$props4.uri,
loading = _this$props4.loading,
user = _this$props4.user,
playlists = _this$props4.playlists,
slim_mode = _this$props4.slim_mode;
var _this$props5 = _this.props,
uri = _this$props5.uri,
loading = _this$props5.loading,
user = _this$props5.user,
playlists = _this$props5.playlists,
slim_mode = _this$props5.slim_mode;
if (loading) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_9__["default"], {
@ -170477,6 +170494,10 @@ var User = /*#__PURE__*/function (_React$Component) {
uri: user.uri,
"data-qa-node": "FollowButton",
"data-qa-file": "User"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_ContextMenuTrigger__WEBPACK_IMPORTED_MODULE_17__["default"], {
onTrigger: _this.handleContextMenu,
"data-qa-node": "ContextMenuTrigger",
"data-qa-file": "User"
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", {
"data-qa-node": "h2",
"data-qa-file": "User"
@ -170548,9 +170569,9 @@ var User = /*#__PURE__*/function (_React$Component) {
_createClass(User, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this$props5 = this.props,
uri = _this$props5.uri,
loadUser = _this$props5.coreActions.loadUser;
var _this$props6 = this.props,
uri = _this$props6.uri,
loadUser = _this$props6.coreActions.loadUser;
this.setWindowTitle();
loadUser(uri, {
full: true
@ -170617,6 +170638,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util/helpers */ "./src/js/util/helpers.js");
/* harmony import */ var _locale__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../locale */ "./src/js/locale/index.js");
/* harmony import */ var _util_arrays__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../util/arrays */ "./src/js/util/arrays.js");
/* harmony import */ var _util_selectors__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../util/selectors */ "./src/js/util/selectors.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); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -170654,6 +170676,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var DiscoverCategories = /*#__PURE__*/function (_React$Component) {
_inherits(DiscoverCategories, _React$Component);
@ -170672,29 +170695,19 @@ var DiscoverCategories = /*#__PURE__*/function (_React$Component) {
_defineProperty(_assertThisInitialized(_this), "render", function () {
var _this$props = _this.props,
load_queue = _this$props.load_queue,
categoriesProp = _this$props.categories,
loading = _this$props.loading,
categories = _this$props.categories,
uiActions = _this$props.uiActions;
if (Object(_util_helpers__WEBPACK_IMPORTED_MODULE_9__["isLoading"])(load_queue, ['spotify_browse/categories'])) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "view discover-categories-view",
"data-qa-node": "div",
"data-qa-file": "DiscoverCategories"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Header__WEBPACK_IMPORTED_MODULE_3__["default"], {
icon: "grid",
title: Object(_locale__WEBPACK_IMPORTED_MODULE_10__["i18n"])('discover.categories.title'),
"data-qa-node": "Header",
"data-qa-file": "DiscoverCategories"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_6__["default"], {
if (loading) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_6__["default"], {
body: true,
loading: true,
"data-qa-node": "Loader",
"data-qa-file": "DiscoverCategories"
}));
});
}
var categories = Object(_util_arrays__WEBPACK_IMPORTED_MODULE_11__["indexToArray"])(categoriesProp);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "view discover-categories-view",
"data-qa-node": "div",
@ -170748,9 +170761,10 @@ var DiscoverCategories = /*#__PURE__*/function (_React$Component) {
}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);
var mapStateToProps = function mapStateToProps(state) {
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_12__["makeLoadingSelector"])(['(.*)categories(.*)']);
return {
categories: state.spotify.categories,
load_queue: state.ui.load_queue
loading: loadingSelector(state),
categories: Object(_util_arrays__WEBPACK_IMPORTED_MODULE_11__["indexToArray"])(state.spotify.categories)
};
};
@ -170984,7 +170998,7 @@ var DiscoverCategory = /*#__PURE__*/function (_React$Component) {
var mapStateToProps = function mapStateToProps(state, ownProps) {
var uri = decodeURIComponent(ownProps.match.params.uri);
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_13__["makeLoadingSelector"])(["(.*)".concat(uri, "(.*)")]);
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_13__["makeLoadingSelector"])(["spotify_category_".concat(uri)]);
var categorySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_13__["makeItemSelector"])(uri);
var category = categorySelector(state);
var playlists = null;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -1246,6 +1246,15 @@ class ContextMenu extends React.Component {
{remove_from_playlist}
</div>
);
case 'user':
return (
<div>
{this.canBeInLibrary() && toggle_in_library}
<div className="context-menu__divider" />
{copy_uris}
{refresh}
</div>
);
default:
return (
<div>

View File

@ -445,6 +445,9 @@ export function getCategories() {
export function getCategory(uri, { forceRefetch } = {}) {
return (dispatch, getState) => {
const loaderId = generateGuid();
dispatch(uiActions.startLoading(loaderId, `spotify_category_${uri}`));
const id = getFromUri('categoryid', uri);
let endpoint = `browse/categories/${id}`;
endpoint += `?country=${getState().spotify.country}`;
@ -481,6 +484,7 @@ export function getCategory(uri, { forceRefetch } = {}) {
playlists_uris: arrayOf('uri', playlists),
}));
dispatch(coreActions.itemsLoaded(playlists));
dispatch(uiActions.stopLoading(loaderId));
}
});
fetchPlaylists(plEndpoint);

View File

@ -61,19 +61,6 @@ class Album extends React.Component {
}
}
handleContextMenu = (e) => {
const {
uri,
uiActions: {
showContextMenu,
},
} = this.props;
e.preventDefault();
const data = { uris: [uri] };
showContextMenu(e, data, 'album', 'click');
}
componentDidUpdate = ({
uri: prevUri,
album: prevAlbum,

View File

@ -22,6 +22,7 @@ import {
makeItemSelector,
makeLoadingSelector,
} from '../util/selectors';
import ContextMenuTrigger from '../components/ContextMenuTrigger';
class User extends React.Component {
componentDidMount() {
@ -57,6 +58,17 @@ class User extends React.Component {
if (!prevUser && user) this.setWindowTitle(user);
}
handleContextMenu = (e) => {
const { user, uri, uiActions: { showContextMenu } } = this.props;
showContextMenu({
e,
context: 'user',
items: [user],
uris: [uri],
});
}
setWindowTitle = (user = this.props.user) => {
const {
uiActions: { setWindowTitle },
@ -139,6 +151,7 @@ class User extends React.Component {
className="primary"
uri={user.uri}
/>
<ContextMenuTrigger onTrigger={this.handleContextMenu} />
</div>
<h2>
<ul className="details">

View File

@ -13,6 +13,7 @@ import {
} from '../../util/helpers';
import { i18n, I18n } from '../../locale';
import { indexToArray } from '../../util/arrays';
import { makeLoadingSelector } from '../../util/selectors';
class DiscoverCategories extends React.Component {
componentDidMount() {
@ -37,22 +38,15 @@ class DiscoverCategories extends React.Component {
render = () => {
const {
load_queue,
categories: categoriesProp,
loading,
categories,
uiActions,
} = this.props;
if (isLoading(load_queue, ['spotify_browse/categories'])) {
return (
<div className="view discover-categories-view">
<Header icon="grid" title={i18n('discover.categories.title')} />
<Loader body loading />
</div>
);
if (loading) {
return <Loader body loading />;
}
const categories = indexToArray(categoriesProp);
return (
<div className="view discover-categories-view">
<Header uiActions={uiActions}>
@ -67,10 +61,14 @@ class DiscoverCategories extends React.Component {
}
}
const mapStateToProps = (state) => ({
categories: state.spotify.categories,
load_queue: state.ui.load_queue,
});
const mapStateToProps = (state) => {
const loadingSelector = makeLoadingSelector(['(.*)categories(.*)']);
return {
loading: loadingSelector(state),
categories: indexToArray(state.spotify.categories),
};
};
const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),

View File

@ -127,7 +127,7 @@ class DiscoverCategory extends React.Component {
const mapStateToProps = (state, ownProps) => {
const uri = decodeURIComponent(ownProps.match.params.uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`]);
const loadingSelector = makeLoadingSelector([`spotify_category_${uri}`]);
const categorySelector = makeItemSelector(uri);
const category = categorySelector(state);
let playlists = null;