From 3c23894c6da1701a5966847011b9954bbb25cbe8 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 19 Aug 2023 19:51:16 -0700
Subject: [PATCH] Scrubbing performance improvements.

---
 src/components/thumbnail.ts | 17 ++++++++++-------
 src/scss/drawer.scss        |  8 ++++----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts
index 1625056c..edc157e2 100644
--- a/src/components/thumbnail.ts
+++ b/src/components/thumbnail.ts
@@ -333,11 +333,18 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
 
 @customElement('frigate-card-thumbnail')
 export class FrigateCardThumbnail extends LitElement {
-  // HomeAssistant object may be required for thumbnail signing (for Frigate
-  // events).
-  @property({ attribute: false })
+  // Performance: During timeline scrubbing, hass may be updated
+  // continuously. As it is not needed for the thumbnail rendering itself, it
+  // does not trigger a re-render. The HomeAssistant object may be required for
+  // thumbnail signing (after initial signing the thumbnail is stored in a data
+  // URL, so the signing will not expire).
   public hass?: ExtendedHomeAssistant;
 
+  // Performance: During timeline scrubbing, the view will be updated
+  // continuously. As it is not needed for the thumbnail rendering itself, it
+  // does not trigger a re-render.
+  public view?: Readonly<View>;
+
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
@@ -359,9 +366,6 @@ export class FrigateCardThumbnail extends LitElement {
   @property({ attribute: false })
   public seek?: Date;
 
-  @property({ attribute: false })
-  public view?: Readonly<View>;
-
   /**
    * Render the element.
    * @returns A template to display to the user.
@@ -381,7 +385,6 @@ export class FrigateCardThumbnail extends LitElement {
 
     const shouldShowTimelineControl =
       this.show_timeline_control &&
-      this.view &&
       (!ViewMediaClassifier.isRecording(this.media) ||
         // Only show timeline control if the recording has a start & end time.
         (this.media.getStartTime() && this.media.getEndTime()));
diff --git a/src/scss/drawer.scss b/src/scss/drawer.scss
index a86b3070..ebbb47fc 100644
--- a/src/scss/drawer.scss
+++ b/src/scss/drawer.scss
@@ -13,14 +13,14 @@ div.control-surround {
   padding-top: $drawer-padding-extend;
   padding-bottom: $drawer-padding-extend;
 }
-:host([location=left]) div.control-surround {
+:host([location='left']) div.control-surround {
   @if $drawer-icon-size < 32 {
     // Ensure the clickable area is at least 32px wide.
     padding-right: calc(32px - $drawer-icon-size);
   }
   left: 100%;
 }
-:host([location=right]) div.control-surround {
+:host([location='right']) div.control-surround {
   @if $drawer-icon-size < 32 {
     // See note above.
     padding-left: calc(32px - $drawer-icon-size);
@@ -54,12 +54,12 @@ ha-icon.control {
   background-color: black;
 }
 
-:host([location=left]) ha-icon.control {
+:host([location='left']) ha-icon.control {
   border-top-right-radius: $drawer-icon-size;
   border-bottom-right-radius: $drawer-icon-size;
 }
 
-:host([location=right]) ha-icon.control {
+:host([location='right']) ha-icon.control {
   border-top-left-radius: $drawer-icon-size;
   border-bottom-left-radius: $drawer-icon-size;
 }