Standard encoding, but on decode we need to re-encode specific characters for Mopidy backends

This commit is contained in:
James Barnsley
2021-01-31 09:27:40 +13:00
parent e3ff00efc9
commit 40e6ed5045
6 changed files with 58 additions and 31 deletions

View File

@ -126674,10 +126674,11 @@ var formatSimpleObjects = function formatSimpleObjects() {
var encodeUri = function encodeUri() {
var uri = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var encoded = encodeURIComponent(uri);
encoded = encoded.replace(/%/g, '%25');
return encoded;
var rawUri = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var uri = encodeURIComponent(rawUri); // Double-encode percent symbol as Mopidy requires some encoded elements
//uri = uri.replace(/%/g, '%25');
return uri;
};
/**
* Rebuild a URI with some ugly-ass handling of encoding.
@ -126699,10 +126700,21 @@ var decodeUri = function decodeUri() {
var rawUri = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var uri = rawUri;
uri = decodeURIComponent(uri);
uri = uri.replace(/%2F/g, '/');
uri = uri.replace(/ /g, '%20');
uri = uri.replace(/%2F/g, '/'); // We need slashes
// Some characters that don't require encoding for JS, but do for Mopidy
uri = uri.replace(/!/g, '%21');
uri = uri.replace(/\*/g, '%2A');
uri = uri.replace(/\(/g, '%28');
uri = uri.replace(/\)/g, '%29');
uri = uri.replace(/\[/g, '%5B');
uri = uri.replace(/\]/g, '%5D');
uri = uri.replace(/@/g, '%40');
uri = uri.replace(/#/g, '%23');
uri = uri.replace(/\$/g, '%24');
uri = uri.replace(/'/g, '%27');
uri = uri.replace(/,/g, '%2C');
uri = uri.replace(/ /g, '%20');
return uri;
};
/**
@ -133543,6 +133555,7 @@ var Playlist = /*#__PURE__*/function (_React$Component) {
_defineProperty(_assertThisInitialized(_this), "renderActions", function () {
var _this$props9 = _this.props,
uri = _this$props9.uri,
encodedUri = _this$props9.encodedUri,
_this$props9$playlist = _this$props9.playlist,
can_edit = _this$props9$playlist.can_edit,
name = _this$props9$playlist.name,
@ -133568,7 +133581,7 @@ var Playlist = /*#__PURE__*/function (_React$Component) {
"data-qa-node": "I18n",
"data-qa-file": "Playlist"
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Button__WEBPACK_IMPORTED_MODULE_4__["default"], {
to: "/playlist/".concat(Object(_util_format__WEBPACK_IMPORTED_MODULE_26__["encodeUri"])(uri), "/edit"),
to: "/playlist/".concat(encodedUri, "/edit"),
tracking: {
category: 'Playlist',
action: 'Edit'
@ -133612,7 +133625,7 @@ var Playlist = /*#__PURE__*/function (_React$Component) {
"data-qa-node": "I18n",
"data-qa-file": "Playlist"
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Button__WEBPACK_IMPORTED_MODULE_4__["default"], {
to: "/playlist/".concat(Object(_util_format__WEBPACK_IMPORTED_MODULE_26__["encodeUri"])(uri), "/edit"),
to: "/playlist/".concat(encodedUri, "/edit"),
tracking: {
category: 'Playlist',
action: 'Edit'
@ -133957,12 +133970,12 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
_state$mopidy = _state$mopidy === void 0 ? {} : _state$mopidy;
var local_library_playlists = _state$mopidy.library_playlists;
var uri = Object(_util_format__WEBPACK_IMPORTED_MODULE_26__["decodeUri"])(ownProps.match.params.uri);
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(.*)")]);
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_24__["makeLoadingSelector"])(["(.*)".concat(uri, "(?!.*(following))(.*)")]);
var loadingTracksSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_24__["makeLoadingSelector"])(["(.*)".concat(uri, "(.*)tracks(.*)")]);
return {
uri: uri,
encodedUri: ownProps.match.params.uri,
allow_reporting: allow_reporting,
slim_mode: slim_mode,
theme: theme,

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 = "1611623550";
var build = "1612038393";
var version = "3.55.5";
// Construct the script tag

View File

@ -282,12 +282,14 @@ const formatSimpleObjects = function (records = []) {
* '/' as this is a URL parameter delimiter
* @param {String} uri
*/
const encodeUri = (uri = '') => {
let encoded = encodeURIComponent(uri);
encoded = encoded.replace(/%/g, '%25');
const encodeUri = (rawUri = '') => {
let uri = encodeURIComponent(rawUri);
return encoded;
}
// Double-encode percent symbol as Mopidy requires some encoded elements
//uri = uri.replace(/%/g, '%25');
return uri;
};
/**
* Rebuild a URI with some ugly-ass handling of encoding.
@ -306,10 +308,21 @@ const encodeUri = (uri = '') => {
const decodeUri = (rawUri = '') => {
let uri = rawUri;
uri = decodeURIComponent(uri);
uri = uri.replace(/%2F/g, '/');
uri = uri.replace(/ /g, '%20');
uri = uri.replace(/%2F/g, '/'); // We need slashes
// Some characters that don't require encoding for JS, but do for Mopidy
uri = uri.replace(/!/g, '%21');
uri = uri.replace(/\*/g, '%2A');
uri = uri.replace(/\(/g, '%28');
uri = uri.replace(/\)/g, '%29');
uri = uri.replace(/\[/g, '%5B');
uri = uri.replace(/\]/g, '%5D');
uri = uri.replace(/@/g, '%40');
uri = uri.replace(/#/g, '%23');
uri = uri.replace(/\$/g, '%24');
uri = uri.replace(/'/g, '%27');
uri = uri.replace(/,/g, '%2C');
uri = uri.replace(/ /g, '%20');
return uri;
};

View File

@ -240,6 +240,7 @@ class Playlist extends React.Component {
renderActions = () => {
const {
uri,
encodedUri,
playlist: {
can_edit,
name,
@ -259,7 +260,7 @@ class Playlist extends React.Component {
<I18n path="actions.play" />
</Button>
<Button
to={`/playlist/${encodeUri(uri)}/edit`}
to={`/playlist/${encodedUri}/edit`}
tracking={{ category: 'Playlist', action: 'Edit' }}
>
<I18n path="actions.edit" />
@ -281,7 +282,7 @@ class Playlist extends React.Component {
<I18n path="actions.play" />
</Button>
<Button
to={`/playlist/${encodeUri(uri)}/edit`}
to={`/playlist/${encodedUri}/edit`}
tracking={{ category: 'Playlist', action: 'Edit' }}
>
<I18n path="actions.edit" />
@ -497,13 +498,13 @@ const mapStateToProps = (state, ownProps) => {
} = state;
const uri = decodeUri(ownProps.match.params.uri);
const playlistId = getFromUri('playlistid', uri);
const itemSelector = makeItemSelector(uri);
const loadingSelector = makeLoadingSelector([`(.*)${playlistId}(?!.*(following))(.*)`]);
const loadingTracksSelector = makeLoadingSelector([`(.*)${playlistId}/tracks(.*)`]);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(?!.*(following))(.*)`]);
const loadingTracksSelector = makeLoadingSelector([`(.*)${uri}(.*)tracks(.*)`]);
return {
uri,
encodedUri: ownProps.match.params.uri,
allow_reporting,
slim_mode,
theme,