Merge pull request #800 from dermotduffy/leterbox

Add ability to change media layout

src/utils/media-info.ts

@@ -43,7 +43,7 @@ export function createMediaLoadedInfo(
  * @param element The element to send the event.
  * @param source An event or HTMLElement that should be used as a source.
  */
-export function dispatchMediaShowEvent(
+export function dispatchMediaLoadedEvent(
   element: HTMLElement,
   source: Event | HTMLElement,
 ): void {

src/utils/media-layout.ts

@@ -0,0 +1,27 @@
+import { MediaLayoutConfig } from '../types';
+
+/**
+ * Update element style from a media configuration.
+ * @param element The element to update the style for.
+ * @param mediaLayoutConfig The media config object.
+ */
+export const updateElementStyleFromMediaLayoutConfig = (
+  element: HTMLElement,
+  mediaLayoutConfig?: MediaLayoutConfig,
+) => {
+  if (mediaLayoutConfig?.fit !== undefined) {
+    element.style.setProperty('--frigate-card-media-layout-fit', mediaLayoutConfig.fit);
+  } else {
+    element.style.removeProperty('--frigate-card-media-layout-fit');
+  }
+  for (const dimension of ['x', 'y']) {
+    if (mediaLayoutConfig?.position?.[dimension] !== undefined) {
+      element.style.setProperty(
+        `--frigate-card-media-layout-position-${dimension}`,
+        `${mediaLayoutConfig.position[dimension]}%`,
+      );
+    } else {
+      element.style.removeProperty(`--frigate-card-media-layout-position-${dimension}`);
+    }
+  }
+};