fix: Add additional troubleshooting pointers for stream load errors (#1844)

[skip ci]

src/components/live/provider.ts

@@ -21,6 +21,7 @@ import {
   LiveConfig,
   LiveProvider,
 } from '../../config/types.js';
+import { STREAM_TROUBLESHOOTING_URL } from '../../const.js';
 import { localize } from '../../localize/localize.js';
 import liveProviderStyle from '../../scss/live-provider.scss';
 import { ExtendedHomeAssistant, FrigateCardMediaPlayer } from '../../types.js';
@@ -76,6 +77,9 @@ export class FrigateCardLiveProvider
   @state()
   protected _hasProviderError = false;
 
+  @state()
+  protected _showStreamTroubleshooting = false;
+
   protected _refProvider: Ref<LitElement & FrigateCardMediaPlayer> = createRef();
 
   // A note on dynamic imports:
@@ -168,9 +172,11 @@ export class FrigateCardLiveProvider
    */
   protected _shouldShowImageDuringLoading(): boolean {
     return (
+      !this._isVideoMediaLoaded &&
       !!this.cameraConfig?.camera_entity &&
       !!this.hass &&
       !!this.liveConfig?.show_image_during_load &&
+      !this._showStreamTroubleshooting &&
       // Do not continue to show image during loading if an error has occurred.
       !this._hasProviderError
     );
@@ -182,6 +188,7 @@ export class FrigateCardLiveProvider
 
   protected _videoMediaShowHandler(): void {
     this._isVideoMediaLoaded = true;
+    this._showStreamTroubleshooting = false;
   }
 
   protected _providerErrorHandler(): void {
@@ -267,8 +274,8 @@ export class FrigateCardLiveProvider
     this.ariaLabel = this.label;
 
     const provider = this._getResolvedProvider();
-    const showImageDuringLoading =
-      !this._isVideoMediaLoaded && this._shouldShowImageDuringLoading();
+    const showImageDuringLoading = this._shouldShowImageDuringLoading();
+    const showLoadingIcon = !this._isVideoMediaLoaded;
     const providerClasses = {
       hidden: showImageDuringLoading,
     };
@@ -386,12 +393,26 @@ export class FrigateCardLiveProvider
                 </frigate-card-live-jsmpeg>`
               : html``}
     `)}
-    ${showImageDuringLoading && !this._isVideoMediaLoaded
+    ${showLoadingIcon
       ? html`<frigate-card-icon
           title=${localize('error.awaiting_live')}
           .icon=${{ icon: 'mdi:progress-helper' }}
+          @click=${() => {
+            this._showStreamTroubleshooting = !this._showStreamTroubleshooting;
+          }}
         ></frigate-card-icon>`
-      : ''} `;
+      : ''}
+    ${this._showStreamTroubleshooting
+      ? renderMessage(
+          {
+            type: 'error',
+            icon: 'mdi:camera-off',
+            message: localize('error.stream_not_loading'),
+            troubleshootingURL: STREAM_TROUBLESHOOTING_URL,
+          },
+          { overlay: true },
+        )
+      : ''}`;
   }
 
   static get styles(): CSSResultGroup {

src/components/message.ts

@@ -7,14 +7,25 @@ import messageStyle from '../scss/message.scss';
 import { Message } from '../types.js';
 import './icon.js';
 
-export function renderMessage(message: Message | null): TemplateResult {
-  return html` <frigate-card-message .message=${message}></frigate-card-message>`;
+export function renderMessage(
+  message: Message | null,
+  renderOptions?: {
+    overlay?: boolean;
+  },
+): TemplateResult {
+  return html` <frigate-card-message
+    .message=${message}
+    ?overlay=${!!renderOptions?.overlay}
+  ></frigate-card-message>`;
 }
 @customElement('frigate-card-message')
 export class FrigateCardMessage extends LitElement {
   @property({ attribute: false })
   public message?: Message;
 
+  @property({ attribute: true, type: Boolean })
+  public overlay = false;
+
   private _controller = new MessageController();
 
   protected render(): TemplateResult | void {