Percent character in m3u playlist filename mistranslated

[midiwidi]

Describe the bug
If one clicks on a playlist which contains a percent character "%" (listed under My Music / Playlists on the Iris web frontend) e.g. the playlist "100% RockVol1.m3u8" then the error

"! Not found
Could not find anything with URI m3u:100%%20RockVol1.m3u8"

is shown

To Reproduce

1. Under My Music / Playlists create a playlist with the name "100% RockVol1"
2. Refresh the playlist listing
3. Click on the playlist "100% RockVol1"

Expected behavior
The content of the playlist is shown (tracks)

Console log
Object { type: "SET_WINDOW_FOCUS", window_focus: true } instrument.js:109 Object { type: "SET_WINDOW_TITLE", title: "Playlist", play_state: null } instrument.js:109 Object { type: "LOAD_ITEMS", uris: (1) […], options: {…} } instrument.js:109 Object { type: "LOAD_PLAYLIST", uri: "m3u:100%%20RockVol1.m3u8", options: {…} } instrument.js:109 Object { type: "TOGGLE_SIDEBAR", new_state: false } instrument.js:109 Object { type: "SET_SELECTED_TRACKS", keys: [] } instrument.js:109 Object { type: "MOPIDY_GET_PLAYLIST", uri: "m3u:100%%20RockVol1.m3u8", options: {…} } instrument.js:109 Mopidy websocket:outgoingMessage Object { method: "core.playlists.lookup", params: {…}, jsonrpc: "2.0", id: 226 } instrument.js:109 Mopidy websocket:incomingMessage message { target: WebSocket, isTrusted: true, data: "{\"jsonrpc\": \"2.0\", \"id\": 226, \"result\": {\"__model__\": \"Playlist\", \"uri\": \"m3u:100%25%20RockVol1.m3u8\", \"name\": \"100% RockVol1\", \"last_modified\": 1608548025000}}", origin: "ws://192.168.2.41:6680", lastEventId: "", ports: Restricted, srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, … } instrument.js:109 Object { type: "SET_WINDOW_FOCUS", window_focus: false } instrument.js:109

Environment details:

• OS: Raspbian Buster on RPi 4
• Browser: Firefox 84.0
• Iris version: 3.55.4 Build 1607846745

Additional context
Mopidy Log:
Dec 21 22:29:58 raspberrypi mopidy[9579]: DEBUG [HttpServer] mopidy.http.handlers Received WebSocket message from 192.168.2.22: '{"method":"core.playlists.lookup","params":{"uri":"m3u:100%%20RockVol1.m3u8"},"jsonrpc":"2.0","id":234}' Dec 21 22:29:58 raspberrypi mopidy[9579]: DEBUG [HttpServer] mopidy.http.handlers Sent WebSocket message to 192.168.2.22: '{"jsonrpc": "2.0", "id": 234, "result": {"__model__": "Playlist", "uri": "m3u:100%25%20RockVol1.m3u8", "name": "100% RockVol1", "last_modified": 1608548025000}}'

URL from firefox address bar: http://192.168.2.41:6680/iris/playlist/m3u%3A100%25 RockVol1.m3u8

Clipboard content after clicking on "Copy URI(s)" from the context menu appearing after a right click on "100% RockVol1" under My Music / Playlists: m3u:100%25%20RockVol1.m3u8

[jaedb]

This is caused by an issue with React Router's History extension. Basically when reading the URL it incorrectly handles % characters, causing issues for Iris. See remix-run/history#505

This is a complex area because encoding a URI for the browser is one thing, but then decoding it for Mopidy is a different process. Handling the two different encoding/decoding rules without breaking the matching of URIs is a knarly task.

One approach is to encode % using something else (eg PERCENT) but then if there was any URI that genuinely used that phrase then it'd break. 🤷‍♂️ there is no bulletproof solution.