Refactor viewer to support other viewer players.

src/utils/ha/index.ts

@@ -348,3 +348,18 @@ export const isCardInPanel = (card: HTMLElement): boolean => {
     parent.host.tagName === 'HUI-PANEL-VIEW'
   );
 };
+
+/**
+ * Ensure URLs use the correct HA URL (relevant for Chromecast where the default
+ * location will be the Chromecast receiver, not HA).
+ * @param url The media URL
+ */
+export const canonicalizeHAURL = (
+  hass: ExtendedHomeAssistant,
+  url?: string,
+): string | null => {
+  if (hass && url && url.startsWith('/')) {
+    return hass.hassUrl(url);
+  }
+  return url ?? null;
+};

src/utils/media.ts

@@ -1,3 +1,5 @@
+import { FrigateCardMediaPlayer } from '../types';
+
 // The number of seconds to hide the video controls for after loading (in order
 // to give a cleaner UI appearance, see:
 // https://github.com/dermotduffy/frigate-hass-card/issues/856
@@ -27,3 +29,23 @@ export const hideMediaControlsTemporarily = (
     delete element._controlsHideTimeoutID;
   }, seconds * 1000);
 };
+
+/**
+ * Play a piece of media, muting it if necessary.
+ * @param underlyingPlayer
+ */
+export const playMediaMutingIfNecessary = async (
+  player?: FrigateCardMediaPlayer,
+): Promise<void> => {
+  // If the play call fails, and the media is not already muted, mute it first
+  // and then try again. This works around some browsers that prevent
+  // auto-play unless the video is muted.
+  if (player?.play) {
+    player.play().catch((ev) => {
+      if (ev.name === 'NotAllowedError' && !player.isMuted()) {
+        player.mute();
+        player.play().catch();
+      }
+    });
+  }
+};