From e0c525920759636a700a8a699daeeb0dccee448b Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 11 Jun 2022 12:35:13 -0700
Subject: [PATCH] Change styling when recordings are disabled.

---
 src/components/timeline.ts  | 13 +++++++++----
 src/scss/timeline-core.scss |  7 +++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/timeline.ts b/src/components/timeline.ts
index 28ff6a07..e2410794 100644
--- a/src/components/timeline.ts
+++ b/src/components/timeline.ts
@@ -738,16 +738,16 @@ export class FrigateCardTimelineCore extends LitElement {
    * @param properties The properties of the timeline click event.
    */
   protected _timelineClickHandler(properties: TimelineEventPropertiesResult): void {
-    if (properties.what && ['item', 'background'].includes(properties.what)) {
-      // Prevent interaction with items on the timeline from activating card
-      // wide actions.
+    if (properties.what === 'item') {
       stopEventFromActivatingCardWideActions(properties.event);
     }
 
-    if (!this._wasDragged && properties.what) {
+    if (!this._wasDragged && properties.what && this.timelineConfig?.show_recordings) {
       if (['background', 'group-label'].includes(properties.what)) {
+        stopEventFromActivatingCardWideActions(properties.event);
         this._changeViewToRecording(properties.time, String(properties.group));
       } else if (properties.what === 'axis') {
+        stopEventFromActivatingCardWideActions(properties.event);
         this._changeViewToRecording(properties.time);
       }
     }
@@ -1168,6 +1168,11 @@ export class FrigateCardTimelineCore extends LitElement {
           `${this.timelineConfig.controls.thumbnails.size}px`,
         );
       }
+      if (this.timelineConfig?.show_recordings) {
+        this.setAttribute('recordings', '');
+      } else {
+        this.removeAttribute('recordings');
+      }
     }
   }
 
diff --git a/src/scss/timeline-core.scss b/src/scss/timeline-core.scss
index 84c4cab0..dcdad36f 100644
--- a/src/scss/timeline-core.scss
+++ b/src/scss/timeline-core.scss
@@ -63,7 +63,9 @@ div.timeline.right-margin {
 .vis-item:not(.vis-background) {
   cursor: pointer;
 }
-.vis-item.vis-background, .vis-labelset, .vis-time-axis {
+:host([recordings]) .vis-item.vis-background,
+:host([recordings]) .vis-labelset,
+:host([recordings]) .vis-time-axis {
   cursor: crosshair;
 }
 .vis-item:active {
@@ -93,7 +95,8 @@ div.timeline.right-margin {
 .vis-text.vis-minor, .vis-label {
   transition: background-color 0.5s ease-out;
 }
-.vis-text.vis-minor:hover, .vis-label:hover {
+:host([recordings]) .vis-text.vis-minor:hover,
+:host([recordings]) .vis-label:hover {
   background-color: var(--primary-color);
 }