Add ability to change media layout.

src/scss/const.scss

@@ -1,4 +1,6 @@
 :host {
   --frigate-card-thumbnail-size-max: 175px;
-  --frigate-card-thumbnail-details-width: calc(var(--frigate-card-thumbnail-size) + 200px);
+  --frigate-card-thumbnail-details-width: calc(
+    var(--frigate-card-thumbnail-size) + 200px
+  );
 }

src/scss/editor.scss

@@ -26,6 +26,11 @@
   background: var(--secondary-background-color);
   display: grid;
 }
+// Space submenus from the next top-level options.
+.values + .option,
+.submenu + .option {
+  margin-top: 10px;
+}
 div.upgrade {
   width: auto;
   border: 1px dotted var(--primary-color);

src/scss/image.scss

@@ -1,6 +1,9 @@
+@use 'media-layout.scss';
+
 img {
   width: 100%;
   height: 100%;
   display: block;
-  object-fit: scale-down;
+
+  @include media-layout.media-layout();
 }

src/scss/live-ha-components.scss

@@ -0,0 +1,5 @@
+@use 'media-layout.scss'; 
+
+img, video {
+  @include media-layout.media-layout();
+}

src/scss/live-jsmpeg.scss

@@ -1,3 +1,5 @@
+@use 'media-layout.scss';
+
 :host {
   width: 100%;
   height: 100%;
@@ -8,5 +10,6 @@ canvas {
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: contain;
-}
+
+  @include media-layout.media-layout();
+}

src/scss/live-webrtc.scss

@@ -1,3 +1,5 @@
+@use 'media-layout.scss';
+
 :host {
   width: 100%;
   height: 100%;
@@ -12,4 +14,8 @@
   // To get the WebRTC player to line up correctly with some themes.
   margin: 0px;
   box-shadow: none;
-}
+}
+
+#webrtc #video {
+  @include media-layout.media-layout();
+}

src/scss/media-layout.scss

@@ -0,0 +1,5 @@
+@mixin media-layout {
+  object-fit: var(--frigate-card-media-layout-fit, contain);
+  object-position: var(--frigate-card-media-layout-position-x, 50%)
+    var(--frigate-card-media-layout-position-y, 50%);
+}

src/scss/viewer-carousel.scss

@@ -1,3 +1,5 @@
+@use 'media-layout.scss';
+
 .embla__slide {
   height: 100%;
   flex: 0 0 100%;
@@ -8,7 +10,5 @@
   width: 100%;
   height: 100%;
 
-  // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
-  // its element.
-  object-fit: contain;
-}
+  @include media-layout.media-layout();
+}