Outputs not showing about forked-daapd-card

[jptrsn]

This is showing in the javascript console:

forked-daapd-card.js?v=0.0.2:87 Mixed Content: The page at 'https://{{redacted}}.duckdns.org/lovelace/display' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://192.168.1.96:3688/'. This request has been blocked; this endpoint must be available over WSS.
_initSocket @ forked-daapd-card.js?v=0.0.2:87
shouldUpdate @ forked-daapd-card.js?v=0.0.2:81
_validate @ updating-element.js?module:387
_invalidate @ updating-element.js?module:371
async function (async)
_invalidate @ updating-element.js?module:370
_requestPropertyUpdate @ updating-element.js?module:356
set @ updating-element.js?module:101
ForkedDaapdCard @ forked-daapd-card.js?v=0.0.2:6
(anonymous) @ VM127:1
Be @ create-card-element.ts:71
Re @ create-card-element.ts:98
createCardElement @ hui-view.ts:75
_rebuildCard @ hui-view.ts:344
e.addEventListener.once @ hui-view.ts:83
o @ fire_event.ts:76
(anonymous) @ create-card-element.ts:111
Promise.then (async)
Re @ create-card-element.ts:109
createCardElement @ hui-view.ts:75
(anonymous) @ hui-view.ts:296
_createCards @ hui-view.ts:295
updated @ hui-view.ts:219
performUpdate @ updating-element.js:526
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
w @ hui-view.ts:68
(anonymous) @ VM127:1
_selectView @ hui-root.ts:645
(anonymous) @ hui-root.ts:485
setTimeout (async)
(anonymous) @ render-status.ts:2
(anonymous) @ web-animations-next-lite.min.js:15
requestAnimationFrame (async)
window.requestAnimationFrame @ web-animations-next-lite.min.js:15
a @ render-status.ts:2
updated @ hui-root.ts:485
performUpdate @ updating-element.js:526
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
A @ hui-root.ts:66
_clone @ template-instance.js:84
__commitTemplateResult @ parts.js:244
commit @ parts.js:186
s @ render.js:44
V.render @ shady-render.js:251
update @ lit-element.js:166
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
set @ updating-element.js:166
_updateColumns @ ha-panel-lovelace.ts:179
firstUpdated @ ha-panel-lovelace.ts:143
performUpdate @ updating-element.js:524
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
at @ ha-panel-lovelace.ts:55
(anonymous) @ VM127:1
createElement @ hass-router-page.ts:271
_createPanel @ hass-router-page.ts:291
_currentLoadProm.l.then._currentLoadProm @ hass-router-page.ts:197
Promise.then (async)
update @ hass-router-page.ts:188
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
set @ updating-element.js:166
rebuild @ hass-router-page.ts:259
async function (async)
rebuild @ hass-router-page.ts:256
_updateRoutes @ partial-panel-resolver.ts:115
updated @ partial-panel-resolver.ts:82
performUpdate @ updating-element.js:526
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
P @ updating-element.js:98
l @ hass-router-page.ts:49
m @ partial-panel-resolver.ts:65
_clone @ template-instance.js:84
__commitTemplateResult @ parts.js:244
commit @ parts.js:186
s @ render.js:44
V.render @ shady-render.js:251
update @ lit-element.js:166
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
w @ home-assistant-main.ts:36
_clone @ template-instance.js:84
__commitTemplateResult @ parts.js:244
commit @ parts.js:186
update @ template-instance.js:40
__commitTemplateResult @ parts.js:236
commit @ parts.js:186
s @ render.js:44
V.render @ shady-render.js:251
update @ lit-element.js:166
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
set @ updating-element.js:166
_updateHass @ hass-base-mixin.ts:73
(anonymous) @ connection-mixin.ts:137
n @ haws.es.js:1
(anonymous) @ haws.es.js:1
Promise.then (async)
c @ haws.es.js:1
u @ haws.es.js:1
subscribe @ haws.es.js:1
S @ haws.es.js:1
(anonymous) @ core.ts:77
Promise.then (async)
167 @ core.ts:71
o @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ bootstrap:198
forked-daapd-card.js?v=0.0.2:87 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at HTMLElement._initSocket (https://{{redacted}}.duckdns.org/local/forked-daapd-card.js?v=0.0.2:87:15)
    at HTMLElement.shouldUpdate (https://{{redacted}}.duckdns.org/local/forked-daapd-card.js?v=0.0.2:81:26)
    at HTMLElement._validate (https://unpkg.com/@polymer/[email protected]/lib/updating-element.js?module:387:14)
    at HTMLElement._invalidate (https://unpkg.com/@polymer/[email protected]/lib/updating-element.js?module:371:12)
_initSocket @ forked-daapd-card.js?v=0.0.2:87
shouldUpdate @ forked-daapd-card.js?v=0.0.2:81
_validate @ updating-element.js?module:387
_invalidate @ updating-element.js?module:371
async function (async)
_invalidate @ updating-element.js?module:370
_requestPropertyUpdate @ updating-element.js?module:356
set @ updating-element.js?module:101
ForkedDaapdCard @ forked-daapd-card.js?v=0.0.2:6
(anonymous) @ VM127:1
Be @ create-card-element.ts:71
Re @ create-card-element.ts:98
createCardElement @ hui-view.ts:75
_rebuildCard @ hui-view.ts:344
e.addEventListener.once @ hui-view.ts:83
o @ fire_event.ts:76
(anonymous) @ create-card-element.ts:111
Promise.then (async)
Re @ create-card-element.ts:109
createCardElement @ hui-view.ts:75
(anonymous) @ hui-view.ts:296
_createCards @ hui-view.ts:295
updated @ hui-view.ts:219
performUpdate @ updating-element.js:526
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
w @ hui-view.ts:68
(anonymous) @ VM127:1
_selectView @ hui-root.ts:645
(anonymous) @ hui-root.ts:485
setTimeout (async)
(anonymous) @ render-status.ts:2
(anonymous) @ web-animations-next-lite.min.js:15
requestAnimationFrame (async)
window.requestAnimationFrame @ web-animations-next-lite.min.js:15
a @ render-status.ts:2
updated @ hui-root.ts:485
performUpdate @ updating-element.js:526
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
A @ hui-root.ts:66
_clone @ template-instance.js:84
__commitTemplateResult @ parts.js:244
commit @ parts.js:186
s @ render.js:44
V.render @ shady-render.js:251
update @ lit-element.js:166
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
set @ updating-element.js:166
_updateColumns @ ha-panel-lovelace.ts:179
firstUpdated @ ha-panel-lovelace.ts:143
performUpdate @ updating-element.js:524
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
at @ ha-panel-lovelace.ts:55
(anonymous) @ VM127:1
createElement @ hass-router-page.ts:271
_createPanel @ hass-router-page.ts:291
_currentLoadProm.l.then._currentLoadProm @ hass-router-page.ts:197
Promise.then (async)
update @ hass-router-page.ts:188
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
set @ updating-element.js:166
rebuild @ hass-router-page.ts:259
async function (async)
rebuild @ hass-router-page.ts:256
_updateRoutes @ partial-panel-resolver.ts:115
updated @ partial-panel-resolver.ts:82
performUpdate @ updating-element.js:526
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
P @ updating-element.js:98
l @ hass-router-page.ts:49
m @ partial-panel-resolver.ts:65
_clone @ template-instance.js:84
__commitTemplateResult @ parts.js:244
commit @ parts.js:186
s @ render.js:44
V.render @ shady-render.js:251
update @ lit-element.js:166
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
P @ updating-element.js:98
V @ lit-element.js:46
w @ home-assistant-main.ts:36
_clone @ template-instance.js:84
__commitTemplateResult @ parts.js:244
commit @ parts.js:186
update @ template-instance.js:40
__commitTemplateResult @ parts.js:236
commit @ parts.js:186
s @ render.js:44
V.render @ shady-render.js:251
update @ lit-element.js:166
performUpdate @ updating-element.js:508
_enqueueUpdate @ updating-element.js:460
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
set @ updating-element.js:166
_updateHass @ hass-base-mixin.ts:73
(anonymous) @ connection-mixin.ts:137
n @ haws.es.js:1
(anonymous) @ haws.es.js:1
Promise.then (async)
c @ haws.es.js:1
u @ haws.es.js:1
subscribe @ haws.es.js:1
S @ haws.es.js:1
(anonymous) @ core.ts:77
Promise.then (async)
167 @ core.ts:71
o @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ bootstrap:198

[claudiosala80]

Same problem too

[kalkih]

Hello.
The reason you're seeing this is because the card communicates with forked-daapd through a nomral websocket connection which isn't allowed when your browser connection to HA is through https. The card should instead open a websocket secure (wss) connection to forked-daapd but this doesn't seem to be supported in forked-daapd (or if it's just not working), so we can't really do much about it.

This has been discussed a bit in the [HA forum thread](https://community.home-assistant.io/t/lovelace-forked-daapd-card/72112.

Ideally the forked-daapd communication should be handled through a component instead of in the card directly, that would solve these issues. Frenck was working on a component but idk how progress is, see hassio-addons/repository#98.

So basically if you want to use the card, you would have to connect to HA through http, which you might be ok with when you access HA on your LAN.

[claudiosala80]

Thank you for the clarification.
Do you think that proxy the web socket via ngix can work?

[kalkih]

I've never really played around with websockets that way so I honestly don't know, sorry.

[escoand]

Another solution could be to add the output selection to the mpd/media-player integration. Then the whole output selection thing could be handled with a generic media-player card.

If I understand the mentioned hassio-addon issue right the plan is to add forked-daapd as a hassio-addon.

[escoand]

Found home-assistant/core#31953 right now. Sounds interesting...

[uchagani]

@jptrsn @claudiosala80 @escoand I would recommend you try the another card from @kalkih: https://github.com/kalkih/mini-media-player

I have confirmed this card works great with forked-daapd and the new forked-daapd integration. I've noticed two issues so far:

1. I can't get album art to display although it displays in forked-daapd Artwork works fine.
2. The progress bar seems to be all over the place.

[uchagani]

Here's what it looks like with https. Also, i misspoke, artwork works fine.