fix: Increase reliability of media auto actions (e.g. play) (#1934)

Refactors media player handling entirely to make the code more
consistent and less boilerplate. Add testing for media player actions.

- Closes #1921
- Closes #1916

src/scss/image-player.scss

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

src/scss/image-updating-player.scss

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

src/scss/image.scss

@@ -1,5 +1,6 @@
-@use 'media-background.scss';
+@use 'basic-block.scss';
 @use 'media-layout.scss';
+@use 'media-background.scss';
 
 img {
   width: 100%;

src/scss/live-provider.scss

@@ -1,9 +1,7 @@
+@use 'basic-block.scss';
 @use 'media-background.scss';
 
 :host {
-  display: block;
-  height: 100%;
-  width: 100%;
   position: relative;
 }
 

src/scss/video-player.scss

@@ -0,0 +1,10 @@
+@use 'basic-block.scss';
+@use 'media-layout.scss';
+
+video {
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  @include media-layout.media-layout();
+}

src/scss/viewer-provider.scss

@@ -1,22 +1,14 @@
+@use 'basic-block.scss';
 @use 'media-background.scss';
-@use 'media-layout.scss';
 
-:host {
+advanced-camera-card-ha-hls-player,
+advanced-camera-card-image-player,
+advanced-camera-card-video-player {
   display: block;
   width: 100%;
   height: 100%;
 }
 
-img,
-video,
-advanced-camera-card-ha-hls-player {
-  display: block;
-  width: 100%;
-  height: 100%;
-
-  @include media-layout.media-layout();
-}
-
 advanced-camera-card-progress-indicator {
   padding: 30px;
   box-sizing: border-box;