Merge pull request #425 from dermotduffy/default-camera

Default view should set the default camera

README.md

@@ -79,10 +79,11 @@ At least 1 camera must be configured in the `cameras` options, but otherwise all
 
 ### Camera Options
 
-The `cameras` block configures a list of cameras the card should support, under:
+The `cameras` block configures a list of cameras the card should support. The first listed camera is the default. Camera configuration is under:
 
 ```yaml
 cameras:
+  - [...camera 0 (default camera)...]
   - [...camera 1...]
   - [...camera 2...]
 ```
@@ -149,7 +150,7 @@ view:
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `default` | `live` | :heavy_multiplication_x: | The view to show in the card by default. See [views](#views) below.|
+| `default` | `live` | :heavy_multiplication_x: | The view to show in the card by default. The default camera is the first one listed. See [views](#views) below.|
 | `camera_select` | `current` | :heavy_multiplication_x: | The view to show when a new camera is selected (e.g. in the camera menu). If `current` the view is unchanged when a new camera is selected. Other acceptable values may be seen at [views](#views) below.|
 | `timeout_seconds` | `300` | :heavy_multiplication_x: | A numbers of seconds of inactivity after user interaction, after which the card will reset to the default configured view (i.e. 'screensaver' functionality). Inactivity is defined as lack of mouse/touch interaction with the Frigate card. If the default view occurs sooner (e.g. via `update_seconds` or manually) the timer will be stopped. `0` means disable this functionality. |
 | `update_seconds` | `0` | :heavy_multiplication_x: | A number of seconds after which to automatically update/refresh the default view. See [card updates](#card-updates) below for behavior and usecases. If the default view occurs sooner (e.g. manually) the timer will start over. `0` disables this functionality.|
@@ -1258,16 +1259,16 @@ The following table describes the behavior these flags have.
 | `view . update_seconds` | `view . timeout_seconds` | `view . update_force` | `view . update_entities` | Behavior |
 | :-: | :-: | :-: | :-: | - |
 | `0` | `0` | *(Any value)* | Unset | Card will not automatically refresh. |
-| `0` | `0` | *(Any value)* | *(Any entity)* | Card will reload default view when entity state changes. |
+| `0` | `0` | *(Any value)* | *(Any entity)* | Card will reload default view & camera when entity state changes. |
-| `0` | `X` seconds | *(Any value)* | Unset | Card will reload default view `X` seconds after user interaction stops. |
+| `0` | `X` seconds | *(Any value)* | Unset | Card will reload default view & camera `X` seconds after user interaction stops. |
-| `0` | `X` seconds | `false` | *(Any entity)* | Card will reload default view `X` seconds after user interaction stops, or when entity state changes (as long as user interaction has not occurred in the last `X` seconds). |
+| `0` | `X` seconds | `false` | *(Any entity)* | Card will reload default view & camera `X` seconds after user interaction stops, or when entity state changes (as long as user interaction has not occurred in the last `X` seconds). |
-| `0` | `X` seconds | `true` | *(Any entity)* | Card will reload default view `X` seconds after user interaction stops or when entity state changes. |
+| `0` | `X` seconds | `true` | *(Any entity)* | Card will reload default view & camera `X` seconds after user interaction stops or when entity state changes. |
-| `Y` seconds | `0` | *(Any value)* | Unset | Card will reload default view every `Y` seconds. |
+| `Y` seconds | `0` | *(Any value)* | Unset | Card will reload default view & camera every `Y` seconds. |
-| `Y` seconds | `0` | *(Any value)* | *(Any entity)* | Card will reload default view every `Y` seconds, or whenever entity state changes. |
+| `Y` seconds | `0` | *(Any value)* | *(Any entity)* | Card will reload default view & camera every `Y` seconds, or whenever entity state changes. |
-| `Y` seconds | `X` seconds | `false` | Unset | Card will reload default view `X` seconds after user interaction stops, and every `Y` seconds (as long as there hasn't been user interaction in the last `X` seconds).  |
+| `Y` seconds | `X` seconds | `false` | Unset | Card will reload default view & camera `X` seconds after user interaction stops, and every `Y` seconds (as long as there hasn't been user interaction in the last `X` seconds).  |
-| `Y` seconds | `X` seconds | `false` | *(Any entity)* | Card will reload default view `X` seconds after user interaction stops, and every `Y` seconds or whenever entity state changes (in both cases -- as long as there hasn't been user interaction in the last `X` seconds).  |
+| `Y` seconds | `X` seconds | `false` | *(Any entity)* | Card will reload default view & camera `X` seconds after user interaction stops, and every `Y` seconds or whenever entity state changes (in both cases -- as long as there hasn't been user interaction in the last `X` seconds).  |
-| `Y` seconds | `X` seconds | `true` | Unset | Card will reload default view `X` seconds after user interaction stops, and every `Y` seconds.  |
+| `Y` seconds | `X` seconds | `true` | Unset | Card will reload default view & camera `X` seconds after user interaction stops, and every `Y` seconds.  |
-| `Y` seconds | `X` seconds | `true` | *(Any entity)* | Card will reload default view `X` seconds after user interaction stops, and every `Y` seconds or whenever entity state changes.  |
+| `Y` seconds | `X` seconds | `true` | *(Any entity)* | Card will reload default view & camera `X` seconds after user interaction stops, and every `Y` seconds or whenever entity state changes.  |
 
 ### Usecases For Automated Refreshes
 

src/card.ts

@@ -646,15 +646,17 @@ export class FrigateCard extends LitElement {
 
     if (args?.view === undefined) {
       // Load the default view.
-      let camera = this._view?.camera;
+      let camera;
       if (this._cameras?.size) {
-        if (!camera) {
+        if (this._view?.camera &&
-          camera = this._cameras.keys().next().value;
+          this._getConfig().view.update_cycle_camera) {
-        } else if (this._getConfig().view.update_cycle_camera) {
           const keys = Array.from(this._cameras.keys());
-          const currentIndex = keys.indexOf(camera);
+          const currentIndex = keys.indexOf(this._view.camera);
           const targetIndex = currentIndex + 1 >= keys.length ? 0 : currentIndex + 1;
           camera = keys[targetIndex];
+        } else {
+          // Reset to the default camera.
+          camera = this._cameras.keys().next().value;
         }
       }
 

src/editor.ts

@@ -446,14 +446,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
    */
   protected _renderNumberInput(
     configPath: string,
-    valueDefault: number,
     min?: number,
     max?: number,
   ): TemplateResult | void {
     if (!this._config) {
       return;
     }
-    const value = Number(getConfigValue(this._config, configPath, valueDefault));
+    const value = getConfigValue(this._config, configPath);
     const mode = max === undefined ? 'box' : 'slider';
 
     return html`
@@ -461,7 +460,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         .hass=${this.hass}
         .selector=${{ number: { min: min || 0, max: max, mode: mode } }}
         .label=${this._getLabel(configPath)}
-        .value=${isNaN(value) ? valueDefault : value}
+        .value=${value}
         .required=${false}
         @value-changed=${(ev) => this._valueChangedHandler(configPath, ev)}
       >
@@ -757,15 +756,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       return html``;
     }
 
-    // The picture-glance editor loads the ha-selectors.
-    // See: https://github.com/thomasloven/hass-config/wiki/PreLoading-Lovelace-Elements
-    const pictureGlance = this._helpers.createCardElement({
-      type: 'picture-glance',
-      entities: [],
-      camera_image: 'dummy-to-load-components',
-    });
-    pictureGlance.constructor.getConfigElement();
-
     const defaults = frigateCardConfigDefaults;
 
     const getShowButtonLabel = (configPath: string) =>
@@ -812,14 +802,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_VIEW_CAMERA_SELECT,
                   this._cameraSelectViewModes,
                 )}
-                ${this._renderNumberInput(
+                ${this._renderNumberInput(CONF_VIEW_TIMEOUT_SECONDS)}
-                  CONF_VIEW_TIMEOUT_SECONDS,
+                ${this._renderNumberInput(CONF_VIEW_UPDATE_SECONDS)}
-                  defaults.view.timeout_seconds,
-                )}
-                ${this._renderNumberInput(
-                  CONF_VIEW_UPDATE_SECONDS,
-                  defaults.view.update_seconds,
-                )}
                 ${this._renderSwitch(CONF_VIEW_UPDATE_FORCE, defaults.view.update_force)}
                 ${this._renderSwitch(
                   CONF_VIEW_UPDATE_CYCLE_CAMERA,
@@ -906,7 +890,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 )}
                 ${this._renderNumberInput(
                   CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
-                  defaults.live.controls.title.duration_seconds,
                   0,
                   60,
                 )}
@@ -920,12 +903,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${this._renderOptionSetHeader('event_gallery')}
         ${options.event_gallery.show
           ? html` <div class="values">
-              ${this._renderNumberInput(
+              ${this._renderNumberInput(CONF_EVENT_GALLERY_MIN_COLUMNS, 1, 10)}
-                CONF_EVENT_GALLERY_MIN_COLUMNS,
-                defaults.event_gallery.min_columns,
-                1,
-                10,
-              )}
             </div>`
           : ''}
         ${this._renderOptionSetHeader('event_viewer')}
@@ -963,7 +941,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               )}
               ${this._renderNumberInput(
                 CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
-                defaults.event_viewer.controls.title.duration_seconds,
                 0,
                 60,
               )}
@@ -978,10 +955,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
           ? html` <div class="values">
               ${this._renderOptionSelector(CONF_IMAGE_MODE, this._imageModes)}
               ${this._renderStringInput(CONF_IMAGE_URL)}
-              ${this._renderNumberInput(
+              ${this._renderNumberInput(CONF_IMAGE_REFRESH_SECONDS)}
-                CONF_IMAGE_REFRESH_SECONDS,
-                defaults.image.refresh_seconds,
-              )}
             </div>`
           : ''}
         ${this._renderOptionSetHeader('dimensions')}
@@ -1013,7 +987,20 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     if (this.hass === undefined) return;
     if (this._config === undefined) return;
     if (this._helpers === undefined) return;
-    this._initialized = true;
+
+    (async (): Promise<void> => {
+      // The picture-glance editor loads the ha-selectors.
+      // See: https://github.com/thomasloven/hass-config/wiki/PreLoading-Lovelace-Elements
+      const pictureGlance = await this._helpers.createCardElement({
+        type: 'picture-glance',
+        entities: [],
+        camera_image: 'dummy-to-load-editor-components',
+      });
+      if (pictureGlance.constructor.getConfigElement) {
+        await pictureGlance.constructor.getConfigElement();
+        this._initialized = true;
+      }
+    })();
   }
 
   /**

src/scss/editor.scss

@@ -26,6 +26,7 @@
   padding: 10px;
   background: var(--secondary-background-color);
   display: grid;
+  margin-bottom: 10px;
 }
 ha-formfield {
   padding-bottom: 8px;