From 86644475ad0576c462efb8b86ea947948113a267 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 10 Oct 2021 20:52:49 -0700
Subject: [PATCH] Add preview rendering to HA card picker (looks great!)

---
 src/card.ts               | 19 ++++++++++++++-----
 src/components/message.ts |  9 +++------
 src/const.ts              |  2 ++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 0948df53..25718ac0 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -19,7 +19,7 @@ import {
 } from 'custom-card-helpers';
 import screenfull from 'screenfull';
 
-import { entitySchema, frigateCardConfigSchema, Message } from './types';
+import { entitySchema, frigateCardConfigSchema } from './types';
 import type {
   BrowseMediaQueryParameters,
   Entity,
@@ -27,9 +27,10 @@ import type {
   FrigateCardConfig,
   MediaLoadInfo,
   MenuButton,
+  Message,
 } from './types';
 
-import { CARD_VERSION } from './const';
+import { CARD_VERSION, REPO_URL } from './const';
 import { FrigateCardMenu, MENU_HEIGHT } from './components/menu';
 import { View } from './view';
 import {
@@ -85,6 +86,8 @@ console.info(
   type: 'frigate-card',
   name: localize('common.frigate_card'),
   description: localize('common.frigate_card_description'),
+  preview: true,
+  documentationURL: REPO_URL,
 });
 
 // Main FrigateCard class.
@@ -145,9 +148,15 @@ export class FrigateCard extends LitElement {
     return document.createElement('frigate-card-editor');
   }
 
-  // Get a stub basic config.
-  public static getStubConfig(): Record<string, string> {
-    return {};
+  // Get a stub basic config using the first available camera of any kind.
+  public static getStubConfig(
+    _hass: HomeAssistant,
+    entities: string[],
+  ): FrigateCardConfig {
+    const cameraEntity = entities.find(element => element.startsWith('camera.'));
+    return {
+      camera_entity: cameraEntity,
+    } as FrigateCardConfig;
   }
 
   protected _getMenuButtons(): MenuButton[] {
diff --git a/src/components/message.ts b/src/components/message.ts
index c0fc5b90..98e7f5f0 100644
--- a/src/components/message.ts
+++ b/src/components/message.ts
@@ -1,15 +1,12 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators';
 
+import { Message } from '../types';
+import { TROUBLESHOOTING_URL } from '../const';
 import { localize } from '../localize/localize';
 
-import { Message } from '../types';
-
 import messageStyle from '../scss/message.scss';
 
-const URL_TROUBLESHOOTING =
-  'https://github.com/dermotduffy/frigate-hass-card#troubleshooting';
-
 @customElement('frigate-card-message')
 export class FrigateCardMessage extends LitElement {
   @property({ attribute: false })
@@ -44,7 +41,7 @@ export class FrigateCardErrorMessage extends LitElement {
   protected render(): TemplateResult {
     return html` <frigate-card-message
       .message=${html` ${this.error}.
-        <a href="${URL_TROUBLESHOOTING}"> ${localize('error.troubleshooting')}</a>.`}
+        <a href="${TROUBLESHOOTING_URL}"> ${localize('error.troubleshooting')}</a>.`}
       .icon=${'mdi:alert-circle'}
     >
     </frigate-card-message>`;
diff --git a/src/const.ts b/src/const.ts
index 78b357d6..35787e85 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -1 +1,3 @@
 export const CARD_VERSION = '1.1.0';
+export const REPO_URL = "https://github.com/dermotduffy/frigate-hass-card";
+export const TROUBLESHOOTING_URL = `${REPO_URL}#troubleshooting`;