Merge pull request #118 from dermotduffy/preview

Add card preview to HA visual card picker

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[] {

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>`;

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`;