Initial support for grid for live and media viewer.

src/scss/live-carousel.scss

@@ -1,3 +1,12 @@
+// If the carousel has an unselected attribute set on it, do not let the
+// pointer interact (e.g. hover, scroll) with underlying elements. This is used
+// when the carousel is part of a media-grid. Without this next/prev controls
+// will enlarge on hover, and the wheel-gestures plugin may block scrolling.
+// See matching in viewer-carousel.scss .
+:host([unselected]) frigate-card-media-carousel {
+  pointer-events: none;
+}
+
 .embla__slide {
   height: 100%;
   flex: 0 0 100%;

src/scss/live-image.scss

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

src/scss/media-filter.scss

@@ -21,4 +21,4 @@
 
 frigate-card-select {
   padding: 5px;
-}
+}

src/scss/media-grid.scss

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  --frigate-card-grid-border-size: 3px;
+  --frigate-card-grid-column-size: 100%;
+  --frigate-card-grid-selected-width-factor: 2;
+
+  // Allow the grid to scroll if necessary (e.g. fullscreen).
+  overflow: auto;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+::slotted(*) {
+  box-sizing: border-box;
+  border-radius: var(--ha-card-border-radius, 4px);
+  overflow: hidden;
+  width: var(--frigate-card-grid-column-size);
+
+  // Unselected items included a transparent border to act as the effective
+  // gutter between elements, and to ensure when the item is selected it does
+  // not change in size (even border-box sizing appears to allow size to change
+  // when the element has a non-fixed height).
+  border: var(--frigate-card-grid-border-size) solid transparent;
+}
+
+::slotted([selected]) {
+  border: var(--frigate-card-grid-border-size) solid var(--primary-color);
+  width: min(
+    100%,
+    calc(
+      var(--frigate-card-grid-selected-width-factor) *
+        var(--frigate-card-grid-column-size)
+    )
+  );
+}
+
+slot {
+  display: block;
+}

src/scss/surround.scss

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

src/scss/timeline.scss

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

src/scss/title-control.scss

@@ -1,6 +1,8 @@
 :host {
   --paper-toast-background-color: rgba(0,0,0,0.6);
   --paper-toast-color: white;
+
+  pointer-events: none;
 }
 
 paper-toast {

src/scss/viewer-carousel.scss

@@ -1,3 +1,35 @@
+:host {
+  // Center unseekable icon.
+  position: relative;
+}
+
+// If the carousel has an unselected attribute set on it, do not let the
+// pointer interact (e.g. hover, scroll) with underlying elements. This is used
+// when the carousel is part of a media-grid. Without this next/prev controls
+// will enlarge on hover, and the wheel-gestures plugin may block scrolling.
+// See matching in live-carousel.scss .
+:host([unselected]) frigate-card-media-carousel,
+:host([unselected]) .seek-warning
+{
+  pointer-events: none;
+}
+
+:host([unseekable]) frigate-card-media-carousel {
+  filter: brightness(50%);
+}
+:host([unseekable]) .seek-warning {
+  display: block
+}
+
+.seek-warning {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  color: white;
+}
+
 .embla__slide {
   height: 100%;
   flex: 0 0 100%;