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

Grid item source icon; Patching request URI back into response avoids never-loading playlists; URI now in Mopidy loadKey to properly show loader

Browse Source
This commit is contained in:
James Barnsley
2021-04-28 21:12:28 +12:00
parent d181856f43
commit c426aa522a
12 changed files with 152 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
mopidy_iris/static/app.js
View File

@ -157777,14 +157777,16 @@ var Grid = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__["memo"])(funct
className = _ref$className === void 0 ? '' : _ref$className,
_ref$mini = _ref.mini,
mini = _ref$mini === void 0 ? false : _ref$mini,
getLink = _ref.getLink;
getLink = _ref.getLink,
sourceIcon = _ref.sourceIcon;
if (!items || !items.length) return null;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SmartList__WEBPACK_IMPORTED_MODULE_1__["SmartList"], {
className: "grid grid--".concat(items[0].type, "s ").concat(className, " ").concat(mini ? 'grid--mini' : ''),
items: items,
itemComponent: _GridItem__WEBPACK_IMPORTED_MODULE_2__["GridItem"],
itemProps: {
getLink: getLink
getLink: getLink,
sourceIcon: sourceIcon
},
"data-qa-node": "SmartList",
"data-qa-file": "Grid"
@ -157840,104 +157842,106 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var SecondaryLine = function SecondaryLine(_ref) {
var _ref$item = _ref.item;
var _ref$sourceIcon = _ref.sourceIcon,
sourceIcon = _ref$sourceIcon === void 0 ? true : _ref$sourceIcon,
_ref$item = _ref.item;
_ref$item = _ref$item === void 0 ? {} : _ref$item;
var type = _ref$item.type,
var uri = _ref$item.uri,
type = _ref$item.type,
tracks_total = _ref$item.tracks_total,
_ref$item$tracks = _ref$item.tracks,
tracks = _ref$item$tracks === void 0 ? [] : _ref$item$tracks,
followers = _ref$item.followers,
albums_uris = _ref$item.albums_uris,
_ref$item$albums_uris = _ref$item.albums_uris,
albums_uris = _ref$item$albums_uris === void 0 ? [] : _ref$item$albums_uris,
artists = _ref$item.artists;
var trackCount = 0;
if (tracks) trackCount = tracks.length;
if (tracks_total) trackCount = tracks_total;
switch (type) {
case 'playlist':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
className: "grid__item__secondary__content details",
"data-qa-node": "ul",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.tracks",
count: trackCount,
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})));
var items = function items() {
switch (type) {
case 'playlist':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.tracks",
count: trackCount,
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
}));
case 'artist':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
className: "grid__item__secondary__content details",
"data-qa-node": "ul",
"data-qa-file": "GridItem"
}, followers && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.followers",
count: followers.toLocaleString(),
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})), albums_uris && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.albums",
count: albums_uris.length,
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})));
case 'artist':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, followers > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.followers",
count: followers.toLocaleString(),
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})), albums_uris.length > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.albums",
count: albums_uris.length,
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})));
case 'album':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
className: "grid__item__secondary__content details",
"data-qa-node": "ul",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, artists && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_LinksSentence__WEBPACK_IMPORTED_MODULE_6__["default"], {
nolinks: true,
items: artists,
type: "artist",
"data-qa-node": "LinksSentence",
"data-qa-file": "GridItem"
})));
case 'album':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, artists && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_LinksSentence__WEBPACK_IMPORTED_MODULE_6__["default"], {
nolinks: true,
items: artists,
type: "artist",
"data-qa-node": "LinksSentence",
"data-qa-file": "GridItem"
}));
default:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
className: "grid__item__secondary__content details",
"data-qa-node": "ul",
"data-qa-file": "GridItem"
}, artists && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_LinksSentence__WEBPACK_IMPORTED_MODULE_6__["default"], {
nolinks: true,
items: artists,
type: "artist",
"data-qa-node": "LinksSentence",
"data-qa-file": "GridItem"
})), followers && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.followers",
count: followers.toLocaleString(),
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})));
}
default:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, artists && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_LinksSentence__WEBPACK_IMPORTED_MODULE_6__["default"], {
nolinks: true,
items: artists,
type: "artist",
"data-qa-node": "LinksSentence",
"data-qa-file": "GridItem"
})), followers && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
"data-qa-node": "li",
"data-qa-file": "GridItem"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_locale__WEBPACK_IMPORTED_MODULE_7__["I18n"], {
path: "specs.followers",
count: followers.toLocaleString(),
"data-qa-node": "I18n",
"data-qa-file": "GridItem"
})));
}
};
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
className: "grid__item__secondary__content details",
"data-qa-node": "ul",
"data-qa-file": "GridItem"
}, sourceIcon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Icon__WEBPACK_IMPORTED_MODULE_4__["default"], {
name: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["sourceIcon"])(uri),
type: "fontawesome",
className: "source",
"data-qa-node": "Icon",
"data-qa-file": "GridItem"
}), items());
};
var GridItem = function GridItem(_ref2) {
var itemProp = _ref2.item,
getLink = _ref2.getLink,
show_source_icon = _ref2.show_source_icon;
sourceIcon = _ref2.sourceIcon;
var item = itemProp;
if (item.album) item = _objectSpread(_objectSpread({}, item), item.album);
var dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useDispatch"])();
@ -158017,14 +158021,9 @@ var GridItem = function GridItem(_ref2) {
className: "grid__item__secondary",
"data-qa-node": "div",
"data-qa-file": "GridItem"
}, show_source_icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Icon__WEBPACK_IMPORTED_MODULE_4__["default"], {
name: Object(_util_helpers__WEBPACK_IMPORTED_MODULE_2__["sourceIcon"])(item.uri),
type: "fontawesome",
className: "source",
"data-qa-node": "Icon",
"data-qa-file": "GridItem"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SecondaryLine, {
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SecondaryLine, {
item: item,
sourceIcon: sourceIcon,
"data-qa-node": "SecondaryLine",
"data-qa-file": "GridItem"
})));
@ -170994,8 +170993,10 @@ var MopidyMiddleware = function () {
var request = function request(store, call) {
var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return new Promise(function (resolve, reject) {
var _value$uris;
var loaderId = Object(_util_helpers__WEBPACK_IMPORTED_MODULE_5__["generateGuid"])();
var loaderKey = "mopidy_".concat(call);
var loaderKey = "mopidy_".concat(call, "_").concat((value === null || value === void 0 ? void 0 : value.uri) || '', "_").concat((value === null || value === void 0 ? void 0 : (_value$uris = value.uris) === null || _value$uris === void 0 ? void 0 : _value$uris.join('_')) || '');
store.dispatch(uiActions.startLoading(loaderId, loaderKey));
var doRequest = function doRequest() {
@ -171858,9 +171859,14 @@ var MopidyMiddleware = function () {
uri: action.uri
}).then(function (response) {
if (!response) return;
console.debug({
response: response
});
var playlist = Object(_util_format__WEBPACK_IMPORTED_MODULE_6__["formatPlaylist"])(_objectSpread(_objectSpread({
images: {}
}, response), {}, {
uri: action.uri,
// Patch in the requested URI
type: 'playlist',
provider: 'mopidy',
can_edit: true
@ -181586,9 +181592,6 @@ var Album = /*#__PURE__*/function (_React$Component) {
_this$props$album = _this$props$album === void 0 ? {} : _this$props$album;
var tracks = _this$props$album.tracks;
var filter = _this.state.filter;
console.debug({
uri: uri
});
if (loading) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_8__["default"], {
@ -190177,6 +190180,10 @@ var LibraryBrowse = /*#__PURE__*/function (_React$Component) {
subdirectory.icons = ['/iris/assets/backgrounds/browse-google.jpg'];
break;
case 'YouTube Music':
subdirectory.icons = ['/iris/assets/backgrounds/browse-youtube.jpg'];
break;
default:
subdirectory.icons = ['/iris/assets/backgrounds/browse-default.jpg'];
}
@ -190220,6 +190227,7 @@ var LibraryBrowse = /*#__PURE__*/function (_React$Component) {
"data-qa-file": "LibraryBrowse"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Grid__WEBPACK_IMPORTED_MODULE_4__["Grid"], {
items: grid_items,
sourceIcon: false,
"data-qa-node": "Grid",
"data-qa-file": "LibraryBrowse"
}))));
@ -190379,6 +190387,7 @@ var Subdirectories = function Subdirectories(_ref2) {
items: items,
getLink: link,
nocontext: true,
sourceIcon: false,
"data-qa-node": "Grid",
"data-qa-file": "LibraryBrowseDirectory"
});

2
mopidy_iris/static/app.js.map
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

BIN
mopidy_iris/static/assets/backgrounds/browse-youtube.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

2
mopidy_iris/static/index.html
View File

@ -115,7 +115,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1619172170";
var build = "1619601071";
var version = "3.57.6";
// Construct the script tag

BIN
src/assets/backgrounds/browse-youtube.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

3
src/js/components/Grid.js
View File

@ -7,6 +7,7 @@ const Grid = memo(({
className = '',
mini = false,
getLink,
sourceIcon,
}) => {
if (!items || !items.length) return null;
@ -15,7 +16,7 @@ const Grid = memo(({
className={`grid grid--${items[0].type}s ${className} ${mini ? 'grid--mini' : ''}`}
items={items}
itemComponent={GridItem}
itemProps={{ getLink }}
itemProps={{ getLink, sourceIcon }}
/>
);
});

71
src/js/components/GridItem.js
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { scrollTo, sourceIcon } from '../util/helpers';
import { sourceIcon as getSourceIcon } from '../util/helpers';
import Link from './Link';
import Icon from './Icon';
import Thumbnail from './Thumbnail';
@ -13,12 +13,14 @@ import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';
const SecondaryLine = ({
sourceIcon = true,
item: {
uri,
type,
tracks_total,
tracks = [],
followers,
albums_uris,
albums_uris = [],
artists,
} = {},
}) => {
@ -26,43 +28,41 @@ const SecondaryLine = ({
if (tracks) trackCount = tracks.length;
if (tracks_total) trackCount = tracks_total;
switch (type) {
case 'playlist':
return (
<ul className="grid__item__secondary__content details">
<li><I18n path="specs.tracks" count={trackCount} /></li>
</ul>
);
const items = () => {
switch (type) {
case 'playlist':
return <li><I18n path="specs.tracks" count={trackCount} /></li>;
case 'artist':
return (
<>
{followers > 0 && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
{albums_uris.length > 0 && <li><I18n path="specs.albums" count={albums_uris.length} /></li>}
</>
);
case 'album':
return <li>{artists && <LinksSentence nolinks items={artists} type="artist" />}</li>;
default:
return (
<>
{artists && <li><LinksSentence nolinks items={artists} type="artist" /></li> }
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
</>
);
}
};
case 'artist':
return (
<ul className="grid__item__secondary__content details">
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
{albums_uris && <li><I18n path="specs.albums" count={albums_uris.length} /></li>}
</ul>
);
case 'album':
return (
<ul className="grid__item__secondary__content details">
<li>{artists && <LinksSentence nolinks items={artists} type="artist" />}</li>
</ul>
);
default:
return (
<ul className="grid__item__secondary__content details">
{artists && <li><LinksSentence nolinks items={artists} type="artist" /></li> }
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
</ul>
);
}
return (
<ul className="grid__item__secondary__content details">
{sourceIcon && <Icon name={getSourceIcon(uri)} type="fontawesome" className="source" />}
{items()}
</ul>
);
};
const GridItem = ({
item: itemProp,
getLink,
show_source_icon,
sourceIcon,
}) => {
let item = itemProp;
if (item.album) item = { ...item, ...item.album };
@ -129,10 +129,7 @@ const GridItem = ({
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
</div>
<div className="grid__item__secondary">
{show_source_icon && (
<Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
)}
<SecondaryLine item={item} />
<SecondaryLine item={item} sourceIcon={sourceIcon} />
</div>
</Link>
);

5
src/js/services/mopidy/middleware.js
View File

@ -206,7 +206,7 @@ const MopidyMiddleware = (function () {
* */
const request = (store, call, value = {}) => new Promise((resolve, reject) => {
const loaderId = generateGuid();
const loaderKey = `mopidy_${call}`;
const loaderKey = `mopidy_${call}_${value?.uri || ''}_${value?.uris?.join('_') || ''}`;
store.dispatch(uiActions.startLoading(loaderId, loaderKey));
const doRequest = () => {
@ -1184,9 +1184,12 @@ const MopidyMiddleware = (function () {
.then((response) => {
if (!response) return;
console.debug({ response })
const playlist = formatPlaylist({
images: {}, // Images not yet supported; treat playlist as being fully-loaded
...response,
uri: action.uri, // Patch in the requested URI
type: 'playlist',
provider: 'mopidy',
can_edit: true,

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

@ -196,8 +196,6 @@ class Album extends React.Component {
filter,
} = this.state;
console.debug({ uri })
if (loading) {
return <Loader body loading />;
}

6
src/js/views/library/LibraryBrowse.js
View File

@ -98,6 +98,10 @@ class LibraryBrowse extends React.Component {
subdirectory.icons = ['/iris/assets/backgrounds/browse-google.jpg'];
break;
case 'YouTube Music':
subdirectory.icons = ['/iris/assets/backgrounds/browse-youtube.jpg'];
break;
default:
subdirectory.icons = ['/iris/assets/backgrounds/browse-default.jpg'];
}
@ -118,7 +122,7 @@ class LibraryBrowse extends React.Component {
</Header>
<section className="content-wrapper">
<div className="grid grid--tiles">
<Grid items={grid_items} />
<Grid items={grid_items} sourceIcon={false} />
</div>
</section>
</div>

1
src/js/views/library/LibraryBrowseDirectory.js
View File

@ -55,6 +55,7 @@ const Subdirectories = ({ items, view }) => {
items={items}
getLink={link}
nocontext
sourceIcon={false}
/>
);
};