Add play/pause/mute/unmute Frigate card commands.

src/utils/audio.ts

@@ -0,0 +1,19 @@
+export interface AudioProperties {
+  mozHasAudio?: boolean;
+  audioTracks?: unknown[];
+}
+
+// There is currently no consistent cross-browser modern way to determine if a
+// viden has audio tracks. The below will work in ~24% of browsers, but notably
+// not in Chrome. There used to be a usable `webkitAudioDecodedByteCount`
+// property, but this now seems to be consistently 0 in Chrome. This generously
+// defaults to assuming there is audio when we cannot rule it out.
+export const mayHaveAudio = (video: HTMLVideoElement & AudioProperties): boolean => {
+  if (video.mozHasAudio !== undefined) {
+    return video.mozHasAudio;
+  }
+  if (video.audioTracks !== undefined) {
+    return Boolean(video.audioTracks?.length);
+  }
+  return true;
+};

src/utils/media-info.ts

@@ -69,6 +69,18 @@ export function dispatchMediaLoadedEvent(
   }
 }
 
+export function dispatchMediaVolumeChangeEvent(target: HTMLElement): void {
+  dispatchFrigateCardEvent(target, 'media:volumechange');
+}
+
+export function dispatchMediaPlayEvent(target: HTMLElement): void {
+  dispatchFrigateCardEvent(target, 'media:play');
+}
+
+export function dispatchMediaPauseEvent(target: HTMLElement): void {
+  dispatchFrigateCardEvent(target, 'media:pause');
+}
+
 /**
  * Dispatch a pre-existing MediaLoadedInfo object as an event.
  * @param element The element to send the event.