Media player cover url

[bobvandevijver]

I am trying to get the media player cover URL to work, but currently I am hitting two apparent bugs.

Code snippet:

new FreeAtHome().createMediaPlayerDevice('id', 'name')
  .then(device => {
    // https://gist.github.com/ondrek/7413434?permalink_comment_id=3914686#gistcomment-3914686
    const sourceUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';

    // Blue block
    // const sourceUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNkYPhfz0AEYBxVSF+FAP5FDvcfRYWgAAAAAElFTkSuQmCC';

    // Actual URL
    // const sourceUrl = "https://cdn-profiles.tunein.com/s67814/images/logoq.jpg?t=637596572990000000"

    // Base 64 of actual url
    // const sourceUrl = 'data:image/jpeg;base64,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';

    device.setCoverUrl(sourceUrl);
  });

Using an actual, external URL doesn't work (http doesn't make a difference). I am greeted by an error in the browser console notifying that the request has been blocked. Not only has the URL been converted to http://localhost:0/s67814/images/logoq.jpg?t=637596572990000000, but it also looks like the CSP would have blocked it even if the URL would have been correct. Even if the CS would not block these items, it can still break when images must be sourced from an internal address which might not be available from the device the interface is rendered from.

Using the base64 encoded images I have more success, but when I try to use something that is larger than a couple of pixels, I am greeted by an Free@Home error notifying me that the data is too large:

Request error: Generic Error: status: 413; status text: Payload Too Large; body: undefined

So the real question: is there a way of storing a file somewhere on the SysAp which generates a certain URL that can be used there?

[StefanGuelland]

At the moment, covers are only supported by the apps for Android and iOS.
The web interface is not yet able to display covers.

[bobvandevijver]

While it does indeed work in the mobile app for public URLs, this is still an issue for URLs that require some sort of authentication or retrieval from the internal player.

[StefanGuelland]

Support for authentication when downloading covers is not available and not planned.

If you need something like that you could try to proxy the request from inside an addon and add authentication in the proxy.

[bobvandevijver]

Looks like the app already proxies the request for the mobile app, as it does seem to work when not on the same network. This means that only the issue in with the web interface stands.