Final instances of encodeURIComponent replacements; Snapcast hotkeys documentation

src/js/views/User.js

@@ -16,6 +16,7 @@ import {
   getFromUri,
   sourceIcon,
 } from '../util/helpers';
+import { decodeUri } from '../util/format';
 import { i18n, I18n } from '../locale';
 import {
   makeItemSelector,
@@ -198,7 +199,7 @@ class User extends React.Component {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const uri = decodeURIComponent(ownProps.match.params.uri);
+  const uri = decodeUri(ownProps.match.params.uri);
   const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`]);
   const userSelector = makeItemSelector(uri);
   const user = userSelector(state);

src/js/views/modals/AddToPlaylist.js

@@ -56,8 +56,7 @@ class AddToPlaylist extends React.Component {
       },
       uris,
     } = this.props;
-    const encodedUris = uris.map((uri) => decodeUri(uri));
-    addTracksToPlaylist(playlist_uri, encodedUris);
+    addTracksToPlaylist(playlist_uri, uris);
     window.history.back();
   }
 
@@ -146,11 +145,12 @@ const mapStateToProps = (state, ownProps) => {
       uri_schemes: mopidy_uri_schemes,
     },
   } = state;
-
   const processProgressSelector = makeProcessProgressSelector(processKeys);
+  const unencodedUris = ownProps.match.params?.uris.split(',');
+  const uris = unencodedUris ? unencodedUris.map((uri) => decodeUri(uri)) : [];
 
   return {
-    uris: (ownProps.match.params.uris ? decodeURIComponent(ownProps.match.params.uris).split(',') : []),
+    uris,
     mopidy_uri_schemes,
     items,
     mopidy_library: libraries['mopidy:library:playlists'] || { items_uris: [] },

src/js/views/modals/HotkeysInfo.js

@@ -6,20 +6,19 @@ import * as uiActions from '../../services/ui/actions';
 import { I18n, i18n } from '../../locale';
 
 const hotkeys = [
-  { label: 'info', keys: ['i'] },
-  { label: 'play_pause', keys: ['p', 'spacebar'] },
-  { label: 'stop', keys: ['s'] },
-  { label: 'rewind', keys: ['r'] },
-  { label: 'fastforward', keys: ['f'] },
-  { label: 'next', keys: ['.', '>'] },
-  { label: 'previous', keys: [',', '<'] },
-  { label: 'volume_up', keys: ['='] },
-  { label: 'volume_down', keys: ['-'] },
-  { label: 'mute', keys: ['0'] },
-  { label: 'exit', keys: ['esc'] },
-  { label: 'now_playing', keys: ['1'] },
-  { label: 'search', keys: ['2'] },
-  { label: 'kiosk', keys: ['3'] },
+  { label: 'info', keysets: [['i']] },
+  { label: 'play_pause', keysets: [['p'], ['spacebar']] },
+  { label: 'stop', keysets: [['s']] },
+  { label: 'rewind', keysets: [['r']] },
+  { label: 'fastforward', keysets: [['f']] },
+  { label: 'next', keysets: [['.'], ['>']] },
+  { label: 'previous', keysets: [[','], ['<']] },
+  { label: 'volume_up', keysets: [['=']] },
+  { label: 'volume_down', keysets: [['-']] },
+  { label: 'mute', keysets: [['0']] },
+  { label: 'exit', keysets: [['esc']] },
+  { label: 'snapcast_volume_up', keysets: [['n', '=']] },
+  { label: 'snapcast_volume_down', keysets: [['n', '=']] },
 ];
 
 class HotkeysInfo extends React.Component {
@@ -33,13 +32,18 @@ class HotkeysInfo extends React.Component {
       <h1><I18n path="modal.hotkeys_info.title" /></h1>
       <div className="list small playlists">
         {hotkeys.map((hotkey) => (
-          <div className="list__item" key={hotkey.label}>
-            {hotkey.keys.map((key, index) => (
+          <div className="list__item list__item--no-interaction" key={hotkey.label}>
+            {hotkey.keysets.map((keyset, keysetIndex) => (
               <>
-                <pre>
-                  {key}
-                </pre>
-                {index === 0 && hotkey.keys.length > 1 && ' or '}
+                {keyset.map((key, keyIndex) => (
+                  <>
+                    <pre>
+                      {key}
+                    </pre>
+                    {keyIndex === 0 && keyset.length > 1 && ' + '}
+                  </>
+                ))}
+                {keysetIndex === 0 && hotkey.keysets.length > 1 && ' or '}
               </>
             ))}
             <span className="description">