Thumbnail carousel initial draft

src/scss/card.scss

@@ -47,7 +47,8 @@
 /* A relative div to place absolute picture elements onto */
 .picture-elements {
   position: relative;
-  width: inherit;
+  width: 100%;
+  height: 100%;
 }
 
 /* Enforce picture elements to only be the size of the card/fullscreen (and not
@@ -68,13 +69,6 @@ ha-card {
   background-color: var(--secondary-background-color, black);
 }
 
-frigate-card-gallery, frigate-card-viewer, frigate-card-live, frigate-card-message, frigate-card-error-message {
-  width: 100%;
-  display: block;
-}
-frigate-card-gallery {
-  height: 100%;
-}
 frigate-card-gallery.hidden,frigate-card-viewer.hidden,frigate-card-live.hidden  {
   display: none;
 }

src/scss/gallery.scss

@@ -3,6 +3,8 @@
 
 :host {
   display: block;
+  width: 100%;
+  height: 100%;
   overflow: auto;
   -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
   scrollbar-width: none;    /* Hide scrollbar: Firefox */

src/scss/live.scss

@@ -1,10 +1,16 @@
 :host {
+  width: 100%;
+  height: 100%;
+  display: block;
+  
   --video-max-height: none;
 }
 
 canvas {
-  width: 100%;
   display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 /* Don't drop shadow or have radius for nested webrtc card */

src/scss/message.scss

@@ -1,5 +1,7 @@
 :host {
   height: 100%;
+  width: 100%;
+  display: block;
 }
 
 .message {

src/scss/viewer-core.scss

@@ -0,0 +1,89 @@
+:host {
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+
+  --video-max-height: none;
+  --frigate-card-viewer-thumbnail-size: 100px;
+}
+
+img,video {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.embla, .embla-thumbnails {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Master containers, thumbnails are a fixed size and the main viewer panel
+// should grow/shrink accordingly.
+.embla {
+  flex: 1;
+  min-height: 0;
+}
+.embla-thumbnails {
+  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
+  margin-top: 5px;
+  //margin-bottom: 5px;
+}
+
+.embla__container, .embla-thumbnails__container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.embla__viewport, .embla-thumbnails__viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.embla__viewport.is-draggable, .embla-thumbnails__viewport.is-draggable {
+  cursor: move;
+  cursor: grab;
+}
+.embla__viewport.is-dragging, .embla-thumbnails__viewport.is-dragging {
+  cursor: grabbing;
+}
+
+.embla__slide, .embla-thumbnails__slide {
+  position: relative;
+  height: 100%;
+  margin-right: 5px;
+  overflow: hidden;
+}
+.embla__slide {
+  flex: 0 0 100%;
+}
+.embla-thumbnails__slide {
+  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
+  border-radius: 5px;
+  opacity: 0.4;
+  transition: opacity 0.2s;
+}
+.embla-thumbnails__slide.main-carousel-selected {
+  opacity: 1.0;
+}
+
+.embla__slide img,video {
+  // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
+  // its element.
+  object-fit: contain;
+}
+
+frigate-card-ha-hls-player {
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+}

src/scss/viewer.scss

@@ -1,54 +1,5 @@
 :host {
-  --video-max-height: none;
-}
-
-ha-hls-player {
-  transform-style: preserve-3d;
-}
-
-img,video {
+  height: 100%;
   width: 100%;
-  height: auto;
   display: block;
 }
-
-div.container {
-  // Keep the controls positioned relative to the video.
-  position: relative;
-}
-
-.embla {
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.embla__viewport {
-  overflow: hidden;
-  width: 100%;
-}
-
-.embla__container {
-  display: flex;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -khtml-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.embla__viewport.is-draggable {
-  cursor: move;
-  cursor: grab;
-}
-
-.embla__viewport.is-dragging {
-  cursor: grabbing;
-}
-
-.embla__slide {
-  position: relative;
-  min-width: 100%;
-  max-width: 100%;
-  margin-right: 10px;
-  overflow: hidden;
-}