Initial draft of recordings support.

src/scss/message.scss

@@ -2,6 +2,11 @@
   height: 100%;
   width: 100%;
   display: block;
+
+  // Ensure error messages are selectable.
+  user-select: text;
+  // Safari only has prefixed support.
+  -webkit-user-select: text;
 }
 
 div.wrapper {
@@ -20,6 +25,7 @@ div.message {
 div.message div.contents {
   padding: 10px;
   height: 100%;
+  max-width: 100%;
 }
 
 div.message div.icon {
@@ -37,4 +43,6 @@ div.message div.icon {
 
 .message pre {
   margin-top: 20px;
+  white-space: pre-wrap;
+  word-break: break-all;
 }

src/scss/next-previous-control.scss

@@ -32,6 +32,7 @@
   box-shadow: 0px 0px 20px 5px black;
   transition: all 0.2s ease-out;
   opacity: 0.8;
+  aspect-ratio: 1 / 1;
 }
 .controls.thumbnails:hover {
   opacity: 1 !important;

src/scss/thumbnail-details.scss

@@ -8,11 +8,15 @@
   column-gap: 5%;
 }
 
-div.right, div.left {
+div.right,
+div.left {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+div.right {
+  align-items: center;
+}
 
 div.left {
   flex: 1;
@@ -36,6 +40,7 @@ span.heading {
   font-weight: bold;
 }
 
-.larger {
+div.larger,
+span.larger {
   font-size: 1.5rem;
 }

src/scss/thumbnail-feature-event.scss

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+img, ha-icon {
+  border-radius: var(--ha-card-border-radius, 4px);
+
+  max-width: var(--frigate-card-thumbnail-size-max);
+  max-height: var(--frigate-card-thumbnail-size-max);
+
+  // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
+  // should be clipped to fill the thumbnail div whilst maintaining
+  // aspect-ratio.
+  object-fit: cover;
+
+  // Restrict images to a maximum of thumbnail size.
+  aspect-ratio: 1 / 1;
+  height: 100%;
+
+  transition: transform 0.2s linear;
+}
+
+ha-icon {
+  --mdc-icon-size: 50%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(255,255,255,0.3);
+  box-sizing: border-box;
+}
+
+img:hover {
+  transform: scale(1.04);
+}

src/scss/thumbnail-feature-recording.scss

@@ -0,0 +1,29 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+
+  max-width: var(--frigate-card-thumbnail-size-max);
+  max-height: var(--frigate-card-thumbnail-size-max);
+
+  border: 1px solid rgba(255,255,255,0.3);
+  border-radius: var(--ha-card-border-radius, 4px);
+  box-sizing: border-box;
+
+  transition: transform 0.2s linear;
+
+  padding: 10px;
+}
+
+:host(:hover) {
+  transform: scale(1.04);
+}
+
+div.title {
+  font-size: 1.5rem;
+}

src/scss/thumbnail.scss

@@ -19,39 +19,22 @@
   background-color: var(--primary-background-color, black);
 }
 
-img {
-  border-radius: var(--ha-card-border-radius, 4px);
-
-  // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
-  // should be clipped to fill the thumbnail div whilst maintaining
-  // aspect-ratio.
-  object-fit: cover;
-
-  // Restrict images to a maximum of thumbnail size.
-  aspect-ratio: 1 / 1;
-  height: 100%;
-
-  max-width: var(--frigate-card-thumbnail-size-max);
-  max-height: var(--frigate-card-thumbnail-size-max);
-
-  transition: transform 0.2s linear;
-}
-img:hover {
-  transform: scale(1.04);
+ha-icon {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
 }
 
 ha-icon.favorite {
-  position: absolute;
   color: gold;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 50%;
   opacity: 0.8;
 }
 
 ha-icon.timeline {
-  position: absolute;
   color: var(--primary-color);
   right: 0px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 50%;
 }
+
+frigate-card-thumbnail-details-event, frigate-card-thumbnail-details-recording {
+  flex: 1;
+}

src/scss/timeline-core.scss

@@ -46,10 +46,18 @@ div.timeline.right-margin {
   color: var(--primary-text-color);
   background-color: var(--primary-color);
 }
+.vis-item.vis-background {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
-.vis-item:hover {
-  // Float icons upwards when the user hovers over them.
-  z-index: 2;
+.vis-item:not(.vis-background) {
+  cursor: pointer;
+}
+.vis-item.vis-background, .vis-labelset, .vis-time-axis {
+  cursor: crosshair;
+}
+.vis-item:active {
+  cursor: unset;
 }
 
 .vis-item.vis-box {