Add zone/label support.

src/editor.ts

@@ -27,7 +27,19 @@ const options = {
     name: 'Optional',
     secondary: 'Optional configuration to tweak card behavior',
     show: false,
-  }
+  },
+  webrtc: {
+    icon: 'webrtc',
+    name: 'WebRTC',
+    secondary: 'Optional WebRTC parameters',
+    show: false,
+  },
+  advanced: {
+    icon: 'cogs',
+    name: 'Advanced',
+    secondary: 'Advanced options',
+    show: false,
+  },
 };
 
 @customElement('frigate-card-editor')
@@ -182,10 +194,50 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 .configValue=${'view_timeout'}
                 @value-changed=${this._valueChanged}
               ></paper-input>
+            </div>`
+          : ''
+        }
+        <div class="option" @click=${this._toggleOption} .option=${'advanced'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.advanced.icon}`}></ha-icon>
+            <div class="title">${options.advanced.name}</div>
+          </div>
+          <div class="secondary">${options.advanced.secondary}</div>
+        </div>
+        ${options.advanced.show
+          ? html`
+            <div class="values">
+              <paper-input
+                label="Frigate zone filter (Optional)"
+                .value=${this._config?.zone || ''}
+                .configValue=${'zone'}
+                @value-changed=${this._valueChanged}
+              ></paper-input>
+            </div>
+            <div class="values">
+              <paper-input
+                label="Frigate label/object filter (Optional)"
+                .value=${this._config?.label || ''}
+                .configValue=${'label'}
+                @value-changed=${this._valueChanged}
+              ></paper-input>
+            </div>`
+          : ''
+        }
+        <div class="option" @click=${this._toggleOption} .option=${'webrtc'}>
+          <div class="row">
+            <ha-icon .icon=${`mdi:${options.webrtc.icon}`}></ha-icon>
+            <div class="title">${options.webrtc.name}</div>
+          </div>
+          <div class="secondary">${options.webrtc.secondary}</div>
+        </div>
+        ${options.webrtc.show
+          ? html`
+            <div class="values">
               <paper-dropdown-menu
-                  label="Live provider (Optional)"
+                  label="WebRTC/Frigate Live provider (Optional)"
                   @value-changed=${this._valueChanged}
-                  .configValue=${'liveProvider'}
+                  .configValue=${'live_provider'}
               >
                 <paper-listbox slot="dropdown-content" .selected=${Object.keys(liveProvider).indexOf(this._config?.live_provider || '')}>
                   ${Object.keys(liveProvider).map(key => {
@@ -201,15 +253,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   label="WebRTC Camera Entity (To use with WebRTC Live Provider)"
                   @value-changed=${this._valueChanged}
                   .configValue=${'webrtc.entity'}
-                >
-                  <paper-listbox slot="dropdown-content" .selected=${cameraEntities.indexOf(webrtcCameraEntity)}>
-                    ${cameraEntities.map(entity => {
-                      return html`
-                        <paper-item>${entity}</paper-item>
-                      `;
-                    })}
-                  </paper-listbox>
-                </paper-dropdown-menu>
+              >
+                <paper-listbox slot="dropdown-content" .selected=${cameraEntities.indexOf(webrtcCameraEntity)}>
+                  ${cameraEntities.map(entity => {
+                    return html`
+                      <paper-item>${entity}</paper-item>
+                    `;
+                  })}
+                </paper-listbox>
+              </paper-dropdown-menu>
             </div>`
           : ''
         }

src/frigate-card.ts

@@ -1,6 +1,4 @@
 // TODO Feature: Add title to clips / snapshots playing/viewing
-// TODO Feature: Automatically reload views as events happen.
-// TODO Feature: Zone label for selectinge events?
 // TODO Bug: Sometimes webrtc component shows up as not found in browser (maybe after fresh build?)
 // TODO Last step: Add documentation & screenshots.
 
@@ -80,7 +78,6 @@ function shouldUpdateBasedOnHass(
       if (!entity) {
         continue;
       }
-      console.info(`${entity} -> ${oldHass.states[entity].state}/${newHass.states[entity].state}`)
       if (oldHass.states[entity] !== newHass.states[entity]) {
         return true;
       }
@@ -348,6 +345,9 @@ export class FrigateCard extends LitElement {
     if (this.config.label) {
       url += `&label=${this.config.label}`;
     }
+    if (this.config.zone) {
+      url += `&zone=${this.config.zone}`;
+    }
 
     const response = await fetch(url);
     if (response.ok) {

src/types.ts

@@ -26,6 +26,7 @@ export const frigateCardConfigSchema = z.object({
   live_provider: z.enum(["frigate", "webrtc"]).default("frigate"),
   webrtc: z.object({}).passthrough().optional(),
   label: z.string().optional(),
+  zone: z.string().optional(),
 
   // Stock lovelace card config.
   type: z.string(),