Improve connection lost UX

Is your feature request related to a problem? Please describe.

When the card cannot communicate with HA for fetching the JSMPEG stream, it displays a message of:

Could not retrieve or sign JSMPEG websocket path. [Check troubleshooting](https://github.com/dermotduffy/frigate-hass-card#troubleshooting).

But when HA backend is simply unavailable (like during restarts), the error message above isn’t helpful (and a little ugly).

Describe the solution you’d like Home Assistant frontend can properly detect whether connection to backend was lost or not (that’s why it shows a Connection lost. Reconnecting... toast message below).

If we could reuse that part of the frontend for detecting such a situation, we could improve the error message (by not displaying an error at all).

How about showing a “Connection”-like icon like mdi:connection, centralized:

Another suggestion, which perhaps should be tracked in a different issue, would be to keep the aspect ratio of 16:9 (if the user has defined such a 16:9 fixed aspect ratio) even in such scenarios to avoid breaking the screen layout.

Describe alternatives you’ve considered

N/A.

Additional context

What do you think? Happy to hear opinions.

[felipecrs]

Wow, it looks amazing!

[felipecrs]

mdi:connection or mdi:lan-disconnected get my vote, although zero strong preference. The latter two are more suggestive of a broken image format to me, rather than a connectivity issue.

So, I think mdi:lan-disconnected is the best of them. It immediately shows that something is wrong (because of the little X).