Merge pull request #664 from dermotduffy/recordings-issue

Change styling when recordings are disabled

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');
+      }
     }
   }
 

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);
 }