Add clustering.

src/components/timeline.ts

@@ -176,11 +176,17 @@ export class FrigateCardTimeline extends LitElement {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected updated(_changedProperties: PropertyValues): void {
-    // Configuration for the Timeline
+    // Configuration for the Timeline, see:
+    // https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
     const options = {
+      cluster: {
+        showStipes: true,
+        maxItems: 3,
+      },
       minHeight: '300px',
+      maxHeight: '300px',
       margin: {
-        item: 75 + 10,
+        item: 50,
         axis: 75 + 10,
       },
       xss: {
@@ -188,13 +194,14 @@ export class FrigateCardTimeline extends LitElement {
         filterOptions: {
           whiteList: {
             'frigate-card-timeline-event': ['thumbnail', 'label', 'media_id'],
+            'div': ['title'],
           },
         },
       },
     };
 
     // Create a Timeline
-    if (this._timelineRef.value && !this._timeline) {
+    if (this._timelineRef.value) {
       this._timeline = new Timeline(
         this._timelineRef.value,
         this._buildDataset(),

src/scss/timeline-event.scss

@@ -7,10 +7,10 @@
 img {
   width: 75px;
   height: 75px;
-  box-shadow: 0px 0px 20px 5px var(--primary-background-color);
   display: block;
   border-radius: 5px;
   transition: transform 0.2s linear;
+  border: 1px solid black;
 }
 
 img:hover {

src/scss/timeline.scss

@@ -8,6 +8,11 @@
 
 .vis-item {
   border-color: var(--primary-color);
+  background: none;
+}
+
+.vis-item:hover {
+  z-index: 2;
 }
 
 .vis-item.vis-box {
@@ -17,3 +22,15 @@
 .vis-item .vis-item-content {
   padding: 0px;
 }
+
+.vis-item.vis-cluster {
+  width: 30px;
+  height: 30px;
+  border-style: dotted;
+  border-radius: 50%;
+  padding: 5px;
+
+  color: var(--primary-text-color);
+  background-color: var(--primary-background-color);
+  box-shadow: 0px 0px 20px 5px var(--primary-color);
+}