Add thumbnail to live view.

src/scss/live-frigate.scss

@@ -0,0 +1,7 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+  
+  --video-max-height: none;
+}

src/scss/live-jsmpeg.scss

@@ -0,0 +1,12 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

src/scss/live-webrtc.scss

@@ -0,0 +1,12 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Don't drop shadow or have radius for nested webrtc card */
+webrtc-camera ha-card {
+  box-shadow: none;
+  border-radius: 0px;
+  background-color: var(--secondary-background-color, black);
+}

src/scss/live.scss

@@ -1,21 +1,16 @@
 :host {
   width: 100%;
   height: 100%;
-  display: block;
-  
-  --video-max-height: none;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+frigate-card-live {
+  flex: 1;
+  min-height: 0;
 }
 
-/* Don't drop shadow or have radius for nested webrtc card */
-webrtc-camera ha-card {
-  box-shadow: none;
-  border-radius: 0px;
-  background-color: var(--secondary-background-color, black);
+frigate-card-thumbnail-carousel {
+  flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
 }

src/scss/thumbnail-carousel.scss

@@ -1,10 +1,11 @@
 :host {
-  --frigate-card-viewer-thumbnail-size: 100px;
+  --frigate-card-carousel-thumbnail-size: 100px;
+  --frigate-card-carousel-thumbnail-opacity: 0.6;
 }
 
 .embla__slide {
-  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
-  opacity: 0.4;
+  flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
+  opacity: var(--frigate-card-carousel-thumbnail-opacity);
   transition: opacity 0.6s ease, transform 0.3s ease;
 }
 .embla__slide.slide-selected {
@@ -15,4 +16,9 @@
 }
 .embla__slide img {
   border-radius: 5px;
+
+  // 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;
 }

src/scss/viewer-core.scss

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  gap: 5px;
 
   height: 100%;
   width: 100%;
@@ -11,7 +12,6 @@ frigate-card-media-carousel {
   min-height: 0;
 }
 
-frigate-card-thumbnail-carousel {
-  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
-  margin-top: 5px;
+frigate-card-thumbnail-carousel-core {
+  flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
 }