Make control sizes configurable.

src/card.ts

@@ -636,6 +636,7 @@ export class FrigateCard extends LitElement {
         .hass=${this._hass}
         .menuMode=${this.config.menu_mode}
         .buttons=${this._getMenuButtons()}
+        .buttonSize=${this.config.menu_button_size}
         @frigate-card:menu-interaction=${this._menuInteractionHandler.bind(this)}
       ></frigate-card-menu>
     `;
@@ -931,6 +932,7 @@ export class FrigateCard extends LitElement {
               .view=${this._view}
               .browseMediaQueryParameters=${mediaQueryParameters}
               .nextPreviousControlStyle=${this.config.controls?.nextprev ?? 'thumbnails'}
+              .nextPreviousControlSize=${this.config.controls?.nextprev_size}
               .autoplayClip=${this.config.autoplay_clip}
               .resolvedMediaCache=${this._resolvedMediaCache}
               .lazyLoad=${this.config.event_viewer?.lazy_load ?? true}

src/components/menu.ts

@@ -41,6 +41,11 @@ export class FrigateCardMenu extends LitElement {
   @property({ attribute: false })
   public buttons: MenuButton[] = [];
 
+  @property({ attribute: false })
+  set buttonSize(buttonSize: string) {
+    this.style.setProperty('--frigate-card-menu-button-size', buttonSize);
+  }
+
   protected _interactionHandler(ev: CustomEvent, button: MenuButton): void {
     if (this.menuMode.startsWith('hidden-')) {
       if (button.type == 'internal-menu-icon' && button.tap_action === 'frigate') {

src/components/next-prev-control.ts

@@ -17,6 +17,13 @@ export class FrigateCardMessage extends LitElement {
   @property({ attribute: false })
   protected thumbnail?: string;
 
+  @property({ attribute: false })
+  set controlSize(controlSize: string | undefined) {
+    if (controlSize) {
+      this.style.setProperty('--frigate-card-next-prev-size', controlSize);
+    }
+  }
+
   protected render(): TemplateResult {
     if (!this.controlStyle || this.controlStyle == 'none') {
       return html``;
@@ -32,11 +39,20 @@ export class FrigateCardMessage extends LitElement {
     };
 
     if (this.controlStyle == 'chevrons') {
+      const icon = this.direction == 'previous' ? 'mdi:chevron-left' : 'mdi:chevron-right';
+
+      // TODO: Upon a safe distance from the release of HA 2021.11 these
+      // attributes can be removed from the <ha-icon-button>.
+      // - icon (replaced with the embedded <ha-icon>)
+      // - title (replaced with .label)
       return html` <ha-icon-button
-        icon=${this.direction == 'previous' ? 'mdi:chevron-left' : 'mdi:chevron-right'}
+        icon=${icon}
         class="${classMap(classes)}"
+        .label=${this.title}
         title=${this.title}
-      ></ha-icon-button>`;
+      >
+        <ha-icon icon=${icon}></ha-icon>
+      </ha-icon-button>`;
     }
 
     if (!this.thumbnail) {

src/components/viewer.ts

@@ -55,6 +55,9 @@ export class FrigateCardViewer extends LitElement {
   @property({ attribute: false })
   protected nextPreviousControlStyle?: NextPreviousControlStyle;
 
+  @property({ attribute: false })
+  protected nextPreviousControlSize?: string;
+
   @property({ attribute: false })
   protected autoplayClip?: boolean;
 
@@ -142,6 +145,7 @@ export class FrigateCardViewer extends LitElement {
     return html` <frigate-card-viewer-core
       .view=${this.view}
       .nextPreviousControlStyle=${this.nextPreviousControlStyle}
+      .nextPreviousControlSize=${this.nextPreviousControlSize}
       .resolvedMediaCache=${this.resolvedMediaCache}
       .autoplayClip=${autoplay}
       .hass=${this.hass}
@@ -167,6 +171,9 @@ export class FrigateCardViewerCore extends LitElement {
   @property({ attribute: false })
   protected nextPreviousControlStyle?: NextPreviousControlStyle;
 
+  @property({ attribute: false })
+  protected nextPreviousControlSize?: string;
+
   @property({ attribute: false })
   protected resolvedMediaCache?: ResolvedMediaCache;
 
@@ -498,6 +505,7 @@ export class FrigateCardViewerCore extends LitElement {
         ? html`<frigate-card-next-previous-control
             .direction=${'previous'}
             .controlStyle=${this.nextPreviousControlStyle}
+            .controlSize=${this.nextPreviousControlSize}
             .thumbnail=${neighbors.previous.thumbnail}
             .title=${neighbors.previous.title}
             @click=${() => this._nextPreviousHandler('previous')}
@@ -512,6 +520,7 @@ export class FrigateCardViewerCore extends LitElement {
         ? html`<frigate-card-next-previous-control
             .direction=${'next'}
             .controlStyle=${this.nextPreviousControlStyle}
+            .controlSize=${this.nextPreviousControlSize}
             .thumbnail=${neighbors.next.thumbnail}
             .title=${neighbors.next.title}
             @click=${() => this._nextPreviousHandler('next')}

src/scss/button.scss

@@ -6,7 +6,6 @@ ha-icon-button.button {
   border-radius: 50%;
   padding: 0px;
   margin: 3px;
-  --mdc-icon-button-size: 40px;
   --ha-icon-display: block;
   /* Buttons can always be clicked */
   pointer-events: auto;

src/scss/menu.scss

@@ -1,8 +1,14 @@
 @use './button.scss';
 
+:host {
+  --frigate-card-menu-button-size: 40px;
+  --mdc-icon-button-size: var(--frigate-card-menu-button-size);
+  --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
+}
+
 .frigate-card-menu {
   z-index: 1;
-  height: 46px;
+  height: calc(var(--frigate-card-menu-button-size) + 6px);
   overflow: hidden;
   /* Menu div itself does not handle click events. Without this, in overlay
      mode, the menu div prevents clicking on gallery items 'behind' the overlay.
@@ -11,7 +17,7 @@
 }
 .frigate-card-menu.overlay-hidden {
   position: absolute;
-  width: 46px;
+  width: calc(var(--frigate-card-menu-button-size) + 6px);
 }
 .frigate-card-menu.overlay-hidden.left, .frigate-card-menu.overlay-hidden.top {
   left: 0px;

src/scss/next-previous-control.scss

@@ -1,15 +1,24 @@
 @use './button.scss';
 
+:host {
+  --frigate-card-next-prev-size: 48px;
+  --frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2);
+  --frigate-card-prev-position: 45px;
+  --frigate-card-next-position: 45px;
+  --mdc-icon-button-size: var(--frigate-card-next-prev-size);
+  --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
+}
+
 .controls {
   position: absolute;
   z-index: 1;
   overflow: hidden;
 }
 .controls.previous {
-  left: 45px;
+  left: var(--frigate-card-prev-position);
 }
 .controls.next {
-  right: 45px;  
+  right: var(--frigate-card-next-position);
 }
 
 .controls.chevrons {
@@ -18,22 +27,28 @@
 
 .controls.thumbnails {
   border-radius: 50%;
-  height: 48px;
+  height: var(--frigate-card-next-prev-size);
-  top: calc(50% - (48px / 2));
+  top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
-  box-shadow: 0px 0px 30px 1px black;
+  box-shadow: 0px 0px 20px 5px black;
-  transition: all .2s ease;
+  transition: all 0.2s ease-out;
   opacity: 0.8;
 }
 .controls.thumbnails:hover {
   opacity: 1 !important;
-  height: 72px;
+  height: var(--frigate-card-next-prev-size-hover);
-  top: calc(50% - (72px / 2));
+  top: calc(50% - (var(--frigate-card-next-prev-size-hover) / 2));
 }
 
 .controls.previous.thumbnails:hover {
-  left: 33px;
+  left: calc(
+    var(--frigate-card-prev-position) -
+      (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
+  );
 }
 
 .controls.next.thumbnails:hover {
-  right: 33px;
+  right: calc(
+    var(--frigate-card-next-position) -
+      (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
+  );
 }

src/types.ts

@@ -318,11 +318,13 @@ export const frigateCardConfigSchema = z.object({
       fullscreen: z.boolean().default(true),
     })
     .optional(),
+  menu_button_size: z.string().default('40px'),
   update_entities: z.string().array().optional(),
   elements: pictureElementsSchema,
   controls: z
     .object({
       nextprev: z.enum(NEXT_PREVIOUS_CONTROL_STYLES).default('thumbnails'),
+      nextprev_size: z.string().default('48px'),
     })
     .optional(),
   dimensions: z