Style fixes.

src/frigate-hass-card.ts

@@ -26,7 +26,11 @@ import './editor';
 import frigate_card_style from './frigate-hass-card.scss';
 import frigate_card_menu_style from './frigate-hass-card-menu.scss';
 
-import { frigateCardConfigSchema, frigateGetEventsResponseSchema, FrigateMenuMode } from './types';
+import {
+  frigateCardConfigSchema,
+  frigateGetEventsResponseSchema,
+  FrigateMenuMode,
+} from './types';
 import type {
   FrigateCardView,
   FrigateCardConfig,
@@ -96,7 +100,7 @@ export class FrigateCardMenu extends LitElement {
   static FRIGATE_CARD_MENU_ID: string = 'frigate-card-menu-id' as const;
 
   @property({ attribute: false })
-  protected menuMode: FrigateMenuMode = "hidden";
+  protected menuMode: FrigateMenuMode = 'hidden';
 
   @property({ attribute: false })
   protected expand = false;
@@ -122,7 +126,9 @@ export class FrigateCardMenu extends LitElement {
   protected _renderFrigateButton(): TemplateResult {
     return html` <ha-icon-button
       class="button"
-      icon=${this.menuMode != 'hidden' || this.expand ? 'mdi:alpha-f-box' : 'mdi:alpha-f-box-outline'}
+      icon=${this.menuMode != 'hidden' || this.expand
+        ? 'mdi:alpha-f-box'
+        : 'mdi:alpha-f-box-outline'}
       data-toggle="tooltip"
       title="Frigate menu"
       @click=${() => {
@@ -152,19 +158,20 @@ export class FrigateCardMenu extends LitElement {
           : 'mdi:walk';
     }
 
-    let menuClass = "frigate-card-menu-full";
+    let menuClass = 'frigate-card-menu-full';
-    if (["hidden", "overlay"].includes(this.menuMode)) {
+    if (['hidden', 'overlay'].includes(this.menuMode)) {
       if (this.menuMode == 'overlay' || this.expand) {
-        menuClass = "frigate-card-menu-overlay";
+        menuClass = 'frigate-card-menu-overlay';
       } else {
-        menuClass = "frigate-card-menu-hidden";
+        menuClass = 'frigate-card-menu-hidden';
       }
     }
 
     return html`
       <div class=${menuClass}>
         ${this._renderFrigateButton()}
-        ${this.menuMode != "hidden" || this.expand ? html`
+        ${this.menuMode != 'hidden' || this.expand
+          ? html`
               <ha-icon-button
                 class="button"
                 icon="mdi:cctv"
@@ -217,7 +224,8 @@ export class FrigateCardMenu extends LitElement {
                       this._callAction('motion');
                     }}
                   ></ha-icon-button>`}
-        ` : ``}
+            `
+          : ``}
       </div>
     `;
   }
@@ -328,7 +336,8 @@ export class FrigateCard extends LitElement {
 
   protected _changeView(
     view?: FrigateCardView | undefined,
-      event?: FrigateEvent | undefined): void {
+    event?: FrigateEvent | undefined,
+  ): void {
     if (view !== undefined) {
       this._viewMode = view;
     } else {
@@ -476,7 +485,7 @@ export class FrigateCard extends LitElement {
               class="mdc-image-list__image"
               src="data:image/png;base64,${event.thumbnail}"
               @click=${() => {
-                this._changeView(want_clips ? 'clip' : 'snapshot' , event);
+                this._changeView(want_clips ? 'clip' : 'snapshot', event);
               }}
             />
           </div>
@@ -637,7 +646,8 @@ export class FrigateCard extends LitElement {
 
     this._eventBeingShown = event;
 
-    return html` <video
+    return html`
+      <video
         class="frigate-card-viewer"
         muted
         controls
@@ -747,45 +757,32 @@ export class FrigateCard extends LitElement {
     if (this.config.show_error) {
       return this._showError(localize('common.show_error'));
     }
-    return html`
+    return html` <ha-card @click=${this._interactionHandler}>
-      <ha-card @click=${this._interactionHandler}>
       ${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
       <div class="frigate-card-contents">
-          ${
+        ${this._viewMode == 'clips'
-            this._viewMode == 'clips'
           ? html`<div class="frigate-card-gallery">
               ${until(this._renderEvents(), this._renderProgressIndicator())}
             </div>`
-              : ``
+          : ``}
-          }
+        ${this._viewMode == 'snapshots'
-          ${
-            this._viewMode == 'snapshots'
           ? html`<div class="frigate-card-gallery">
               ${until(this._renderEvents(), this._renderProgressIndicator())}
             </div>`
-              : ``
+          : ``}
-          }
+        ${this._viewMode == 'clip'
-          ${
-            this._viewMode == 'clip'
           ? html`<div class="frigate-card-viewer">
               ${until(this._renderClipPlayer(), this._renderProgressIndicator())}
             </div>`
-              : ``
+          : ``}
-          }
+        ${this._viewMode == 'snapshot'
-          ${
-            this._viewMode == 'snapshot'
           ? html`<div class="frigate-card-viewer">
               ${until(this._renderSnapshotViewer(), this._renderProgressIndicator())}
             </div>`
-              : ``
+          : ``}
-          }
+        ${this._viewMode == 'live'
-          ${
+          ? html`<div class="frigate-card-viewer">${this._renderLiveViewer()}</div>`
-            this._viewMode == 'live'
+          : ``}
-              ? html`<div class="frigate-card-viewer">
-                ${this._renderLiveViewer()}
-              </div>`
-            : ``            
-          }
       </div>
       ${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
     </ha-card>`;