fix: Camera aspect-ratio should always apply (#2114)

- Closes #2073

src/scss/card.scss

@@ -9,7 +9,7 @@
 
   // Different browsers use different colors as their fullscreen background,
   // this ensures the same experience across all browsers.
-  background-color: var(--card-background-color);
+  background-color: var(--advanced-camera-card-background);
 
   border-radius: var(--ha-card-border-radius, 4px);
   overflow: auto;
@@ -99,6 +99,9 @@ ha-card {
   height: 100%;
   position: static;
   color: var(--secondary-text-color, white);
+
+  // The background color at the outer level has priority.
+  background-color: transparent;
 }
 
 /************

src/scss/image-updating-player.scss

@@ -1,5 +1,4 @@
 @use 'basic-block.scss';
-@use 'media-background.scss';
 @use 'media-layout.scss';
 
 img {

src/scss/image.scss

@@ -1,11 +1 @@
-@use 'basic-block.scss';
-@use 'media-layout.scss';
-@use 'media-background.scss';
-
-img {
-  width: 100%;
-  height: 100%;
-  display: block;
-
-  @include media-layout.media-layout();
-}
+@use 'provider.scss';

src/scss/live-carousel.scss

@@ -24,10 +24,7 @@
 }
 
 .embla__slide {
-  // Center the content horizontally (for cases where the configured aspect
-  // ratio is a mismatch with the card).
   display: flex;
-  justify-content: center;
 
   height: 100%;
   width: 100%;

src/scss/live-provider.scss

@@ -1,9 +1,4 @@
-@use 'basic-block.scss';
-@use 'media-background.scss';
-
-:host {
-  position: relative;
-}
+@use 'provider.scss';
 
 .hidden {
   display: none;

src/scss/media-background.scss

@@ -2,7 +2,7 @@
 $bg-img: url('../images/iris-background.svg');
 
 :host {
-  background-color: var(--primary-background-color);
+  background-color: var(--advanced-camera-card-background);
   background-position: center;
   background-repeat: no-repeat;
   background-image: $bg-img;

src/scss/provider.scss

@@ -0,0 +1,32 @@
+@use 'media-background.scss';
+
+:host {
+  display: flex;
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  display: block;
+
+  // The container will be sized by the provider resize controller.
+  width: fit-content;
+  height: auto;
+  max-width: 100%;
+}
+
+:host([size='unsized']) > .container {
+  width: 100%;
+  height: 100%;
+}
+:host([size='unsized-portrait']) > .container {
+  height: 100%;
+}
+:host([size='unsized-landscape']) > .container {
+  width: 100%;
+}

src/scss/themes/base.scss

@@ -8,7 +8,7 @@
    *********/
 
   --advanced-camera-card-exterior: var(--secondary-background-color, black);
-  --advanced-camera-card-background: var(--primary-background-color, white);
+  --advanced-camera-card-background: var(--card-background-color, white);
 
   --advanced-camera-card-foreground-primary: var(--primary-color, black);
 

src/scss/themes/dark.scss

@@ -2,6 +2,7 @@
   // This file should include only, and exactly match, values from
   // https://github.com/home-assistant/frontend/blob/dev/src/resources/styles-data.ts .
 
+  --card-background-color: #1c1c1c;
   --primary-background-color: #111111;
   --secondary-background-color: #282828;
   --primary-text-color: #e1e1e1;

src/scss/themes/light.scss

@@ -2,6 +2,7 @@
   // This file should include only, and exactly match, values from
   // https://github.com/home-assistant/frontend/blob/dev/src/resources/ha-style.ts
 
+  --card-background-color: #ffffff;
   --primary-background-color: #fafafa;
   --secondary-background-color: #e5e5e5;
   --primary-text-color: #212121;

src/scss/viewer-carousel.scss

@@ -41,6 +41,8 @@
 }
 
 .embla__slide {
+  display: flex;
+
   height: 100%;
   width: 100%;
 

src/scss/viewer-provider.scss

@@ -1,13 +1,4 @@
-@use 'basic-block.scss';
-@use 'media-background.scss';
-
-advanced-camera-card-ha-hls-player,
-advanced-camera-card-image-player,
-advanced-camera-card-video-player {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+@use 'provider.scss';
 
 advanced-camera-card-progress-indicator {
   padding: 30px;