Convert viewer to Lit component.

src/scss/card.scss

@@ -50,8 +50,6 @@
   padding: 10%;
 }
 
-
-
 video, img {
   display: block;
 }
@@ -80,41 +78,3 @@ webrtc-camera ha-card {
   border-radius: 0px;
   background-color: var(--secondary-background-color, black);
 }
-
-.frigate-media-controls {
-  position: absolute;
-  z-index: 1;
-  overflow: hidden;
-}
-.frigate-media-controls.previous {
-  left: 45px;
-}
-.frigate-media-controls.next {
-  right: 45px;  
-}
-
-.frigate-media-controls.chevrons {
-  top: calc(50% - (40px / 2));
-}
-
-.frigate-media-controls.thumbnails {
-  border-radius: 50%;
-  height: 48px;
-  top: calc(50% - (48px / 2));
-  box-shadow: 0px 0px 30px 1px black;
-  transition: all .2s ease;
-  opacity: 0.8;
-}
-.frigate-media-controls.thumbnails:hover {
-  opacity: 1 !important;
-  height: 72px;
-  top: calc(50% - (72px / 2));
-}
-
-.frigate-media-controls.previous.thumbnails:hover {
-  left: 33px;
-}
-
-.frigate-media-controls.next.thumbnails:hover {
-  right: 33px;
-}

src/scss/common.scss

@@ -13,4 +13,8 @@ ha-icon-button.button {
 
 ha-icon-button.button.emphasize {
   color: var(--primary-color, white);
+}
+
+video, img {
+  display: block;
 }

src/scss/next-previous-control.scss

@@ -0,0 +1,39 @@
+@use './common.scss';
+
+.controls {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+}
+.controls.previous {
+  left: 45px;
+}
+.controls.next {
+  right: 45px;  
+}
+
+.controls.chevrons {
+  top: calc(50% - (40px / 2));
+}
+
+.controls.thumbnails {
+  border-radius: 50%;
+  height: 48px;
+  top: calc(50% - (48px / 2));
+  box-shadow: 0px 0px 30px 1px black;
+  transition: all .2s ease;
+  opacity: 0.8;
+}
+.controls.thumbnails:hover {
+  opacity: 1 !important;
+  height: 72px;
+  top: calc(50% - (72px / 2));
+}
+
+.controls.previous.thumbnails:hover {
+  left: 33px;
+}
+
+.controls.next.thumbnails:hover {
+  right: 33px;
+}

src/scss/viewer.scss

@@ -0,0 +1,3 @@
+img.media,video.media,canvas.media {
+  width: 100%;
+}