diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts
index 25fcd421..b381996d 100644
--- a/src/action-handler-directive.ts
+++ b/src/action-handler-directive.ts
@@ -1,17 +1,16 @@
+import { fireEvent } from 'custom-card-helpers';
+import type {
+  ActionHandlerDetail,
+  ActionHandlerOptions
+} from 'custom-card-helpers/dist/types.d.js';
 import { noChange } from 'lit';
 import {
   AttributePart,
   directive,
   Directive,
-  DirectiveParameters,
+  DirectiveParameters
 } from 'lit/directive.js';
-
-import type {
-  ActionHandlerDetail,
-  ActionHandlerOptions,
-} from 'custom-card-helpers/dist/types.d.js';
-import { fireEvent } from 'custom-card-helpers';
-import { stopEventFromActivatingCardWideActions } from './common';
+import { stopEventFromActivatingCardWideActions } from './utils/action.js';
 
 interface ActionHandler extends HTMLElement {
   holdTime: number;
diff --git a/src/browse-media-util.ts b/src/browse-media-util.ts
deleted file mode 100644
index aa58e3ad..00000000
--- a/src/browse-media-util.ts
+++ /dev/null
@@ -1,415 +0,0 @@
-import { HomeAssistant } from 'custom-card-helpers';
-
-import {
-  BrowseMediaQueryParameters,
-  FrigateBrowseMediaSource,
-  CameraConfig,
-  MEDIA_CLASS_PLAYLIST,
-  MEDIA_TYPE_PLAYLIST,
-} from './types.js';
-import { View } from './view.js';
-import { frigateBrowseMediaSourceSchema } from './types.js';
-import {
-  dispatchErrorMessageEvent,
-  dispatchMessageEvent,
-  getCameraTitle,
-  homeAssistantWSRequest,
-} from './common.js';
-import { localize } from './localize/localize.js';
-
-export class BrowseMediaUtil {
-  /**
-   * Return the Frigate event_id given a FrigateBrowseMediaSource object.
-   * @param media The event to get the id from.
-   * @returns The `event_id` or `null` if not successfully parsed.
-   */
-  static getEventID(media: FrigateBrowseMediaSource): string | null {
-    return media.frigate?.event.id ?? null;
-  }
-
-  /**
-   * Return the event start time given a FrigateBrowseMediaSource object.
-   * @param browseMedia The media object to get the start time from.
-   * @returns The start time in unix/epoch time, or null if it cannot be determined.
-   */
-  static getEventStartTime(media: FrigateBrowseMediaSource): number | null {
-    return media.frigate?.event.start_time ?? null;
-  }
-
-  /**
-   * Determine if a FrigateBrowseMediaSource object is truly a media item (vs a folder).
-   * @param media The media object.
-   * @returns `true` if it's truly a media item, `false` otherwise.
-   */
-  static isTrueMedia(media?: FrigateBrowseMediaSource): boolean {
-    return !!media && !media.can_expand;
-  }
-
-  /**
-   * From a FrigateBrowseMediaSource item extract the first true media item from the
-   * children (i.e. a clip/snapshot, not a folder).
-   * @param media The media object with children.
-   * @returns The first true media item found.
-   */
-  static getFirstTrueMediaChildIndex(
-    media: FrigateBrowseMediaSource | null,
-  ): number | null {
-    if (!media || !media.children) {
-      return null;
-    }
-    const index = media.children.findIndex((child) => this.isTrueMedia(child));
-    return index >= 0 ? index : null;
-  }
-
-  /**
-   * Browse Frigate media with a media content id. May throw.
-   * @param hass The HomeAssistant object.
-   * @param media_content_id The media content id to browse.
-   * @returns A FrigateBrowseMediaSource object or null on malformed.
-   */
-  static async browseMedia(
-    hass: HomeAssistant,
-    media_content_id: string,
-  ): Promise<FrigateBrowseMediaSource> {
-    const request = {
-      type: 'media_source/browse_media',
-      media_content_id: media_content_id,
-    };
-    return await homeAssistantWSRequest(hass, frigateBrowseMediaSourceSchema, request);
-  }
-
-  /**
-   * Browse Frigate media with a media query. May throw.
-   * @param hass The HomeAssistant object.
-   * @param params The search parameters to use to search for media.
-   * @returns A FrigateBrowseMediaSource object or null on malformed.
-   */
-  static async browseMediaQuery(
-    hass: HomeAssistant,
-    params: BrowseMediaQueryParameters,
-  ): Promise<FrigateBrowseMediaSource> {
-    return this.browseMedia(
-      hass,
-      // Defined in:
-      // https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
-      [
-        'media-source://frigate',
-        params.clientId,
-        'event-search',
-        params.mediaType,
-
-        // If the name field ends in '.all' the integration will return up to 10K events.
-        params.unlimited ? '.all' : '',
-        params.after ? String(Math.floor(params.after)) : '',
-        params.before ? String(Math.ceil(params.before)) : '',
-        params.cameraName,
-        params.label,
-        params.zone,
-      ].join('/'),
-    );
-  }
-
-  /**
-   * Browse multiple Frigate media queries. May throw.
-   * @param hass The HomeAssistant object.
-   * @param params An array of search parameters to use to search for media.
-   * @returns A map of FrigateBrowseMediaSource object or null on malformed.
-   */
-  static async multipleBrowseMediaQuery(
-    hass: HomeAssistant,
-    params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
-  ): Promise<Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>> {
-    params = Array.isArray(params) ? params : [params];
-    const output: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource> = new Map();
-    await Promise.all(
-      params.map(async (param: BrowseMediaQueryParameters): Promise<void> => {
-        output.set(param, await this.browseMediaQuery(hass, param));
-      }),
-    );
-    return output;
-  }
-
-  /**
-   * Browse multiple Frigate media queries, then merged them. May throw.
-   * @param hass The HomeAssistant object.
-   * @param params An array of search parameters to use to search for media.
-   * @returns A single FrigateBrowseMediaSource object or null on malformed.
-   */
-  static async multipleBrowseMediaQueryMerged(
-    hass: HomeAssistant,
-    params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
-  ): Promise<FrigateBrowseMediaSource> {
-    return this.mergeFrigateBrowseMediaSources(
-      await this.multipleBrowseMediaQuery(hass, params),
-    );
-  }
-
-  /**
-   * Merge multiple FrigateBrowseMediaSource into a single. Note that this may
-   * use information from the query to differentiate results that may otherwise
-   * be identical.
-   * @param input A map of query -> result.
-   * @returns A single FrigateBrowseMediaSource object.
-   */
-  static mergeFrigateBrowseMediaSources(
-    input: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>,
-  ): FrigateBrowseMediaSource {
-    const children: FrigateBrowseMediaSource[] = [];
-
-    for (const [query, result] of input.entries()) {
-      for (const child of result.children || []) {
-        if (this.isTrueMedia(child)) {
-          children.push(child);
-        } else {
-          // If there are multiple inputs, separate the folder names with the
-          // query title (if available).
-          if (query.title && input.size > 1) {
-            children.push({ ...child, title: `[${query.title}] ${child.title}` });
-          } else {
-            children.push(child);
-          }
-        }
-      }
-    }
-
-    const eventSort = (
-      a: FrigateBrowseMediaSource,
-      b: FrigateBrowseMediaSource,
-    ): number => {
-      if (
-        !a.frigate?.event ||
-        (b.frigate?.event && b.frigate.event.start_time > a.frigate.event.start_time)
-      ) {
-        return 1;
-      }
-
-      if (
-        !b.frigate?.event ||
-        (a.frigate?.event && b.frigate.event.start_time < a.frigate.event.start_time)
-      ) {
-        return -1;
-      }
-      return 0;
-    };
-
-    return this.createEventParentForChildren('Merged events', children.sort(eventSort));
-  }
-
-  /**
-   * Get the parameters to search for media.
-   * @returns A BrowseMediaQueryParameters object.
-   */
-  static getBrowseMediaQueryParameters(
-    hass: HomeAssistant,
-    cameraID: string,
-    cameraConfig?: CameraConfig,
-    overrides?: Partial<BrowseMediaQueryParameters>,
-  ): BrowseMediaQueryParameters | null {
-    if (!cameraConfig || !cameraConfig.camera_name) {
-      return null;
-    }
-    return {
-      clientId: cameraConfig.client_id,
-      cameraName: cameraConfig.camera_name,
-      label: cameraConfig.label,
-      zone: cameraConfig.zone,
-      title: getCameraTitle(hass, cameraConfig),
-      cameraID: cameraID,
-      ...overrides,
-    };
-  }
-
-  /**
-   * Apply overrides to multiple query parameters.
-   * @param parameters An array of query parameters.
-   * @param overrides The overrides to apply.
-   * @returns The override query parameters.
-   */
-  static overrideMultiBrowseMediaQueryParameters(
-    parameters: BrowseMediaQueryParameters[],
-    overrides: Partial<BrowseMediaQueryParameters>,
-  ): BrowseMediaQueryParameters[] {
-    const output: BrowseMediaQueryParameters[] = [];
-    parameters.forEach((param) => {
-      output.push({ ...param, ...overrides });
-    });
-    return output;
-  }
-
-  /**
-   * Get BrowseMediaQueryParameters for a camera (including its dependencies).
-   * @param hass Home Assistant object.
-   * @param cameras Cameras map.
-   * @param camera Name of the current camera.
-   * @param mediaType Optional media type to include in the parameters.
-   * @returns An array of query parameters.
-   */
-  static getFullDependentBrowseMediaQueryParameters(
-    hass: HomeAssistant,
-    cameras: Map<string, CameraConfig>,
-    camera: string,
-    mediaType?: 'clips' | 'snapshots',
-  ): BrowseMediaQueryParameters[] | null {
-    const cameraIDs: Set<string> = new Set();
-    const getDependentCameras = (camera: string): void => {
-      const cameraConfig = cameras.get(camera);
-      if (cameraConfig) {
-        cameraIDs.add(camera);
-        for (const eventCameraID of cameraConfig.dependent_cameras || []) {
-          if (!cameraIDs.has(eventCameraID)) {
-            getDependentCameras(eventCameraID);
-          }
-        }
-      }
-    };
-    getDependentCameras(camera);
-
-    const params: BrowseMediaQueryParameters[] = [];
-    for (const cameraID of cameraIDs) {
-      const param = BrowseMediaUtil.getBrowseMediaQueryParameters(
-        hass,
-        cameraID,
-        cameras.get(cameraID),
-        mediaType ? { mediaType: mediaType } : {},
-      );
-      // Fail on a single bad camera, as it's almost certainly a user error that
-      // should be fixed rather than hidden.
-      if (!param) {
-        return null;
-      }
-      params.push(param);
-    }
-    return params.length ? params : null;
-  }
-
-  /**
-   * Get BrowseMediaQueryParameters for a camera (including its dependencies) or dispatch an error.
-   * @param element The element from which to dispatch the error.
-   * @param hass Home Assistant object.
-   * @param cameras Cameras map.
-   * @param camera Name of the current camera.
-   * @param mediaType Optional media type to include in the parameters.
-   * @returns An array of query parameters.
-   */
-  static getFullDependentBrowseMediaQueryParametersOrDispatchError(
-    element: HTMLElement,
-    hass: HomeAssistant,
-    cameras: Map<string, CameraConfig>,
-    camera: string,
-    mediaType?: 'clips' | 'snapshots',
-  ): BrowseMediaQueryParameters[] | null {
-    const params = this.getFullDependentBrowseMediaQueryParameters(
-      hass,
-      cameras,
-      camera,
-      mediaType,
-    );
-    if (!params) {
-      dispatchErrorMessageEvent(
-        element,
-        localize('error.no_camera_name'),
-        cameras.get(camera),
-      );
-      return null;
-    }
-    return params;
-  }
-
-  /**
-   * Fetch the latest media and dispatch a change view event to reflect the
-   * results. If no media is found a suitable message event will be triggered
-   * instead.
-   * @param element The HTMLElement to dispatch events from.
-   * @param hass The Home Assistant object.
-   * @param view The current view to evolve.
-   * @param browseMediaQueryParameters The media parameters to query with.
-   * @returns
-   */
-  static async fetchLatestMediaAndDispatchViewChange(
-    element: HTMLElement,
-    hass: HomeAssistant,
-    view: Readonly<View>,
-    browseMediaQueryParameters:
-      | BrowseMediaQueryParameters
-      | BrowseMediaQueryParameters[],
-  ): Promise<void> {
-    let parent: FrigateBrowseMediaSource | null;
-    try {
-      parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(
-        hass,
-        browseMediaQueryParameters,
-      );
-    } catch (e) {
-      return dispatchErrorMessageEvent(element, (e as Error).message);
-    }
-    const childIndex = BrowseMediaUtil.getFirstTrueMediaChildIndex(parent);
-    if (!parent || !parent.children || childIndex == null) {
-      return dispatchMessageEvent(
-        element,
-        view.isClipRelatedView()
-          ? localize('common.no_clip')
-          : localize('common.no_snapshot'),
-        view.isClipRelatedView() ? 'mdi:filmstrip-off' : 'mdi:camera-off',
-      );
-    }
-
-    view
-      .evolve({
-        target: parent,
-        childIndex: childIndex,
-      })
-      .dispatchChangeEvent(element);
-  }
-
-  /**
-   * Fetch the media of a child FrigateBrowseMediaSource object and dispatch a change
-   * view event to reflect the results.
-   * @param node The HTMLElement to dispatch events from.
-   * @param hass The Home Assistant object.
-   * @param view The current view to evolve.
-   * @param child The FrigateBrowseMediaSource child to query for.
-   * @returns
-   */
-  static async fetchChildMediaAndDispatchViewChange(
-    element: HTMLElement,
-    hass: HomeAssistant,
-    view: Readonly<View>,
-    child: Readonly<FrigateBrowseMediaSource>,
-  ): Promise<void> {
-    let parent: FrigateBrowseMediaSource;
-    try {
-      parent = await BrowseMediaUtil.browseMedia(hass, child.media_content_id);
-    } catch (e) {
-      return dispatchErrorMessageEvent(element, (e as Error).message);
-    }
-
-    view
-      .evolve({
-        target: parent,
-      })
-      .dispatchChangeEvent(element);
-  }
-
-  /**
-   * Given an array of media children, create a parent for them.
-   * @param title The title to use for the parent.
-   * @param children The children media items.
-   * @returns A single parent containing the children.
-   */
-  static createEventParentForChildren(
-    title: string,
-    children: FrigateBrowseMediaSource[],
-  ): FrigateBrowseMediaSource {
-    return {
-      title: title,
-      media_class: MEDIA_CLASS_PLAYLIST,
-      media_content_type: MEDIA_TYPE_PLAYLIST,
-      media_content_id: '',
-      can_play: false,
-      can_expand: true,
-      children_media_class: MEDIA_CLASS_PLAYLIST,
-      thumbnail: null,
-      children: children,
-    };
-  }
-}
diff --git a/src/card.ts b/src/card.ts
index 8d33002b..59aaa443 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1,98 +1,94 @@
+import { getLovelace, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import {
   CSSResultGroup,
+  html,
   LitElement,
   PropertyValues,
   TemplateResult,
-  html,
-  unsafeCSS,
+  unsafeCSS
 } from 'lit';
-import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-helpers';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import screenfull from 'screenfull';
-import { throttle } from 'lodash-es';
+import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { until } from 'lit/directives/until.js';
+import { throttle } from 'lodash-es';
+import screenfull from 'screenfull';
 import { z } from 'zod';
-
+import { actionHandler } from './action-handler-directive.js';
 import {
-  Actions,
-  ActionType,
-  CameraConfig,
-  FrigateCardView,
-  FrigateCardCustomAction,
-  FRIGATE_CARD_VIEWS_USER_SPECIFIED,
-  RawFrigateCardConfig,
-  entitySchema,
-  frigateCardConfigSchema,
-} from './types.js';
+  ConditionState,
+  conditionStateRequestHandler,
+  getOverriddenConfig,
+  getOverridesByKey
+} from './card-condition.js';
+import './components/elements.js';
+import { FrigateCardElements } from './components/elements.js';
+import './components/gallery.js';
+import './components/image.js';
+import { FrigateCardImage } from './components/image.js';
+import './components/live.js';
+import './components/menu.js';
+import { FrigateCardMenu, FRIGATE_BUTTON_MENU_ICON } from './components/menu.js';
+import './components/message.js';
+import { renderMessage, renderProgressIndicator } from './components/message.js';
+import './components/thumbnail-carousel.js';
+import './components/timeline.js';
+import './components/viewer.js';
+import { isConfigUpgradeable } from './config-mgmt.js';
+import {
+  CAMERA_BIRDSEYE,
+  CARD_VERSION,
+  MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
+  REPO_URL
+} from './const.js';
+import './editor.js';
+import { localize } from './localize/localize.js';
+import './patches/ha-camera-stream.js';
+import './patches/ha-hls-player.js';
+import './patches/ha-web-rtc-player.ts';
+import cardStyle from './scss/card.scss';
 import type {
   Entity,
   ExtendedHomeAssistant,
   FrigateCardConfig,
   MediaShowInfo,
   MenuButton,
-  Message,
+  Message
 } from './types.js';
-
 import {
-  CAMERA_BIRDSEYE,
-  CARD_VERSION,
-  MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
-  REPO_URL,
-} from './const.js';
-import { FrigateCardElements } from './components/elements.js';
-import { FrigateCardImage } from './components/image.js';
-import { FRIGATE_BUTTON_MENU_ICON, FrigateCardMenu } from './components/menu.js';
-import { View } from './view.js';
+  Actions,
+  ActionType,
+  CameraConfig,
+  entitySchema,
+  frigateCardConfigSchema,
+  FrigateCardCustomAction,
+  FrigateCardView,
+  FRIGATE_CARD_VIEWS_USER_SPECIFIED,
+  RawFrigateCardConfig
+} from './types.js';
 import {
-  contentsChanged,
   convertActionToFrigateCardCustomAction,
   createFrigateCardCustomAction,
   frigateCardHandleAction,
   frigateCardHasAction,
-  getActionConfigGivenAction,
-  getCameraIcon,
-  getCameraID,
-  getCameraTitle,
+  getActionConfigGivenAction
+} from './utils/action.js';
+import { contentsChanged } from './utils/basic.js';
+import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js';
+import {
   getEntityIcon,
   getEntityTitle,
   homeAssistantSignPath,
   homeAssistantWSRequest,
-  isValidMediaShowInfo,
   shouldUpdateBasedOnHass,
-  sideLoadHomeAssistantElements,
-} from './common.js';
-import { localize } from './localize/localize.js';
-import { renderMessage, renderProgressIndicator } from './components/message.js';
-
-import './editor.js';
-import './components/elements.js';
-import './components/gallery.js';
-import './components/image.js';
-import './components/live.js';
-import './components/menu.js';
-import './components/message.js';
-import './components/viewer.js';
-import './components/thumbnail-carousel.js';
-import './components/timeline.js';
-import './patches/ha-camera-stream.js';
-import './patches/ha-hls-player.js';
-import './patches/ha-web-rtc-player.ts';
-
-import cardStyle from './scss/card.scss';
-import { ResolvedMediaCache } from './resolved-media.js';
-import { BrowseMediaUtil } from './browse-media-util.js';
-import { isConfigUpgradeable } from './config-mgmt.js';
-import { actionHandler } from './action-handler-directive.js';
-import {
-  ConditionState,
-  conditionStateRequestHandler,
-  getOverriddenConfig,
-  getOverridesByKey,
-} from './card-condition.js';
-import { supportsFeature } from './icons/update.js';
+  sideLoadHomeAssistantElements
+} from './utils/ha';
+import { getEventID } from './utils/ha/browse-media.js';
+import { supportsFeature } from './utils/ha/update.js';
+import { isValidMediaShowInfo } from './utils/media-info.js';
+import { ResolvedMediaCache } from './utils/resolved-media.js';
+import { View } from './view.js';
 
 /** A note on media callbacks:
  *
@@ -919,7 +915,7 @@ export class FrigateCard extends LitElement {
       });
       return;
     }
-    const event_id = BrowseMediaUtil.getEventID(this._view.media);
+    const event_id = getEventID(this._view.media);
     if (!event_id) {
       this._setMessageAndUpdate({
         message: localize('error.download_no_event_id'),
diff --git a/src/common.ts b/src/common.ts
deleted file mode 100644
index d3873370..00000000
--- a/src/common.ts
+++ /dev/null
@@ -1,723 +0,0 @@
-import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
-import {
-  HomeAssistant,
-  computeStateDomain,
-  handleActionConfig,
-  hasAction,
-  ActionConfig,
-} from 'custom-card-helpers';
-import { StyleInfo } from 'lit/directives/style-map.js';
-import { ZodSchema, z } from 'zod';
-import {
-  differenceInSeconds,
-  differenceInMinutes,
-  differenceInHours,
-  fromUnixTime,
-} from 'date-fns';
-import { isEqual } from 'lodash-es';
-import { localize } from './localize/localize.js';
-import {
-  Actions,
-  ActionsConfig,
-  ActionType,
-  CameraConfig,
-  CardHelpers,
-  ExtendedHomeAssistant,
-  FrigateCardAction,
-  FrigateCardCustomAction,
-  frigateCardCustomActionSchema,
-  FrigateEvent,
-  MediaShowInfo,
-  Message,
-  RawFrigateCardConfig,
-  SignedPath,
-  signedPathSchema,
-  StateParameters,
-} from './types.js';
-import { stateIcon } from './icons/state-icon.js';
-
-const MEDIA_INFO_HEIGHT_CUTOFF = 50;
-const MEDIA_INFO_WIDTH_CUTOFF = MEDIA_INFO_HEIGHT_CUTOFF;
-
-/**
- * Get the keys that didn't parse from a ZodError.
- * @param error The zoderror to extract the keys from.
- * @returns An array of error keys.
- */
-export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
-  const errors = error.format();
-  return Object.keys(errors).filter((v) => !v.startsWith('_'));
-}
-
-/**
- * Make a HomeAssistant websocket request. May throw.
- * @param hass The HomeAssistant object to send the request with.
- * @param schema The expected Zod schema of the response.
- * @param request The request to make.
- * @returns The parsed valid response or null on malformed.
- */
-export async function homeAssistantWSRequest<T>(
-  hass: HomeAssistant,
-  schema: ZodSchema<T>,
-  request: MessageBase,
-): Promise<T> {
-  const response = await hass.callWS<T>(request);
-
-  if (!response) {
-    const error_message = `${localize('error.empty_response')}: ${JSON.stringify(
-      request,
-    )}`;
-    console.warn(error_message);
-    throw new Error(error_message);
-  }
-  const parseResult = schema.safeParse(response);
-  if (!parseResult.success) {
-    const keys = getParseErrorKeys<T>(parseResult.error);
-    const error_message =
-      `${localize('error.invalid_response')}: ${JSON.stringify(request)}. ` +
-      localize('error.invalid_keys') +
-      `: '${keys}'`;
-    console.warn(error_message);
-    throw new Error(error_message);
-  }
-  return parseResult.data;
-}
-
-/**
- * Request that HA sign a path. May throw.
- * @param hass The HomeAssistant object used to request the signature.
- * @param path The path to sign.
- * @param expires An optional number of seconds to sign the path for.
- * @returns The signed URL, or null if the response was malformed.
- */
-export async function homeAssistantSignPath(
-  hass: ExtendedHomeAssistant,
-  path: string,
-  expires?: number,
-): Promise<string | null> {
-  const request = {
-    type: 'auth/sign_path',
-    path: path,
-    expires: expires,
-  };
-  const response = await homeAssistantWSRequest<SignedPath>(
-    hass,
-    signedPathSchema,
-    request,
-  );
-  if (!response) {
-    return null;
-  }
-  return hass.hassUrl(response.path);
-}
-
-/**
- * Dispatch a Frigate Card event.
- * @param element The element to send the event.
- * @param name The name of the Frigate card event to send.
- * @param detail An optional detail object to attach.
- */
-export function dispatchFrigateCardEvent<T>(
-  target: EventTarget,
-  name: string,
-  detail?: T,
-): void {
-  target.dispatchEvent(
-    new CustomEvent<T>(`frigate-card:${name}`, {
-      bubbles: true,
-      composed: true,
-      detail: detail,
-    }),
-  );
-}
-
-/**
- * Create a MediaShowInfo object.
- * @param source An event or HTMLElement that should be used as a source.
- * @returns A new MediaShowInfo object or null if one could not be created.
- */
-export function createMediaShowInfo(source: Event | HTMLElement): MediaShowInfo | null {
-  let target: HTMLElement | EventTarget;
-  if (source instanceof Event) {
-    target = source.composedPath()[0];
-  } else {
-    target = source;
-  }
-
-  if (target instanceof HTMLImageElement) {
-    return {
-      width: (target as HTMLImageElement).naturalWidth,
-      height: (target as HTMLImageElement).naturalHeight,
-    };
-  } else if (target instanceof HTMLVideoElement) {
-    return {
-      width: (target as HTMLVideoElement).videoWidth,
-      height: (target as HTMLVideoElement).videoHeight,
-    };
-  } else if (target instanceof HTMLCanvasElement) {
-    return {
-      width: (target as HTMLCanvasElement).width,
-      height: (target as HTMLCanvasElement).height,
-    };
-  }
-  return null;
-}
-
-/**
- * Dispatch a Frigate card media show event.
- * @param element The element to send the event.
- * @param source An event or HTMLElement that should be used as a source.
- */
-export function dispatchMediaShowEvent(
-  element: HTMLElement,
-  source: Event | HTMLElement,
-): void {
-  const mediaShowInfo = createMediaShowInfo(source);
-  if (mediaShowInfo) {
-    dispatchExistingMediaShowInfoAsEvent(element, mediaShowInfo);
-  }
-}
-
-/**
- * Dispatch a pre-existing MediaShowInfo object as an event.
- * @param element The element to send the event.
- * @param mediaShowInfo The MediaShowInfo object to send.
- */
-export function dispatchExistingMediaShowInfoAsEvent(
-  element: HTMLElement,
-  mediaShowInfo: MediaShowInfo,
-): void {
-  dispatchFrigateCardEvent<MediaShowInfo>(element, 'media-show', mediaShowInfo);
-}
-
-/**
- * Dispatch an event with a message to show to the user.
- * @param element The element to send the event.
- * @param message The message to show.
- * @param icon An optional icon to attach to the message.
- */
-export function dispatchMessageEvent(
-  element: HTMLElement,
-  message: string,
-  icon?: string,
-  context?: unknown,
-): void {
-  dispatchFrigateCardEvent<Message>(element, 'message', {
-    message: message,
-    type: 'info',
-    icon: icon,
-    context: context,
-  });
-}
-
-/**
- * Dispatch an event with an error message to show to the user.
- * @param element The element to send the event.
- * @param message The message to show.
- */
-export function dispatchErrorMessageEvent(
-  element: HTMLElement,
-  message: string,
-  context?: unknown,
-): void {
-  dispatchFrigateCardEvent<Message>(element, 'message', {
-    message: message,
-    type: 'error',
-    context: context,
-  });
-}
-
-/**
- * Determine whether the card should be updated based on Home Assistant changes.
- * @param newHass The new HA object.
- * @param oldHass The old HA object.
- * @param entities The entities to examine for changes.
- * @returns A boolean indicating whether or not to allow an update.
- */
-export function shouldUpdateBasedOnHass(
-  newHass: HomeAssistant | undefined | null,
-  oldHass: HomeAssistant | undefined | null,
-  entities: string[] | null,
-): boolean {
-  if (!newHass || !entities || !entities.length) {
-    return false;
-  }
-  if (!oldHass) {
-    return true;
-  }
-
-  for (let i = 0; i < entities.length; i++) {
-    const entity = entities[i];
-    if (entity && oldHass.states[entity] !== newHass.states[entity]) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Determine if a MediaShowInfo object is valid/acceptable.
- * @param info The MediaShowInfo object.
- * @returns True if the object is valid, false otherwise.
- */
-export function isValidMediaShowInfo(info: MediaShowInfo): boolean {
-  return (
-    info.height >= MEDIA_INFO_HEIGHT_CUTOFF && info.width >= MEDIA_INFO_WIDTH_CUTOFF
-  );
-}
-
-/**
- * Convert a generic Action to a FrigateCardCustomAction if it parses correctly.
- * @param action The generic action configuration.
- * @returns A FrigateCardCustomAction or null if it cannot be converted.
- */
-export function convertActionToFrigateCardCustomAction(
-  action: ActionType | null,
-): FrigateCardCustomAction | null {
-  if (!action) {
-    return null;
-  }
-  // Parse a custom event as other things could generate ll-custom events that
-  // are not related to Frigate Card.
-  const parseResult = frigateCardCustomActionSchema.safeParse(action);
-  return parseResult.success ? parseResult.data : null;
-}
-
-/**
- * Create a Frigate card custom action.
- * @param action The Frigate card action string (e.g. 'fullscreen')
- * @returns A FrigateCardCustomAction for that action string or null.
- */
-export function createFrigateCardCustomAction(
-  action: FrigateCardAction,
-  args?: {
-    camera?: string;
-    media_player?: string;
-    media_player_action?: 'play' | 'stop';
-  },
-): FrigateCardCustomAction | null {
-  if (action === 'camera_select') {
-    if (!args?.camera) {
-      return null;
-    }
-    return {
-      action: 'fire-dom-event',
-      frigate_card_action: action,
-      camera: args.camera as string,
-    };
-  }
-  if (action === 'media_player') {
-    if (!args?.media_player || !args.media_player_action) {
-      return null;
-    }
-    return {
-      action: 'fire-dom-event',
-      frigate_card_action: action,
-      media_player: args.media_player,
-      media_player_action: args.media_player_action,
-    };
-  }
-  return {
-    action: 'fire-dom-event',
-    frigate_card_action: action,
-  };
-}
-
-/**
- * Get an action configuration given a config and an interaction (e.g. 'tap').
- * @param interaction The interaction: `tap`, `hold` or `double_tap`
- * @param config The configuration containing multiple actions.
- * @returns The relevant action configuration or null if none found.
- */
-export function getActionConfigGivenAction(
-  interaction?: string,
-  config?: Actions,
-): ActionType | ActionType[] | undefined {
-  if (!interaction || !config) {
-    return undefined;
-  }
-  if (interaction == 'tap' && config.tap_action) {
-    return config.tap_action;
-  } else if (interaction == 'hold' && config.hold_action) {
-    return config.hold_action;
-  } else if (interaction == 'double_tap' && config.double_tap_action) {
-    return config.double_tap_action;
-  } else if (interaction == 'end_tap' && config.end_tap_action) {
-    return config.end_tap_action;
-  } else if (interaction == 'start_tap' && config.start_tap_action) {
-    return config.start_tap_action;
-  }
-  return undefined;
-}
-
-/**
- * Calculate a style brightness from a hass state.
- * Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L296
- * @param state The hass state object.
- * @returns A CSS brightness string.
- */
-function computeBrightnessFromState(state: HassEntity): string {
-  if (state.state === 'off' || !state.attributes.brightness) {
-    return '';
-  }
-  const brightness = state.attributes.brightness;
-  return `brightness(${(brightness + 245) / 5}%)`;
-}
-
-/**
- * Calculate a style color from a hass state.
- * Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L304
- * @param state The hass state object.
- * @returns A CSS color string.
- */
-function computeColorFromState(state: HassEntity): string {
-  if (state.state === 'off') {
-    return '';
-  }
-  return state.attributes.rgb_color
-    ? `rgb(${state.attributes.rgb_color.join(',')})`
-    : '';
-}
-
-/**
- * Get the style of emphasized menu items.
- * @returns A StyleInfo.
- */
-function computeStyle(state: HassEntity): StyleInfo {
-  return {
-    color: computeColorFromState(state),
-    filter: computeBrightnessFromState(state),
-  };
-}
-
-/**
- * Determine the string state of a given stateObj.
- * From: https://github.com/home-assistant/frontend/blob/dev/src/common/entity/compute_active_state.ts
- * @param stateObj The HassEntity object from `hass.states`.
- * @returns A string state, e.g. 'on'.
- */
-export const computeActiveState = (stateObj: HassEntity): string => {
-  const domain = stateObj.entity_id.split('.')[0];
-  let state = stateObj.state;
-
-  if (domain === 'climate') {
-    state = stateObj.attributes.hvac_action;
-  }
-
-  return state;
-};
-
-/**
- * Use Home Assistant state to refresh state parameters for an item to be rendered.
- * @param hass Home Assistant object.
- * @param params A StateParameters object to modify in place.
- * @returns A StateParameters object updated based on HASS state.
- */
-export function refreshDynamicStateParameters(
-  hass: HomeAssistant,
-  params: StateParameters,
-): StateParameters {
-  if (!params.entity) {
-    return params;
-  }
-  const state = hass.states[params.entity];
-  if (!!state && !!params.state_color) {
-    params.style = { ...computeStyle(state), ...params.style };
-  }
-  params.title = params.title ?? (state?.attributes?.friendly_name || params.entity);
-  params.icon = params.icon ?? stateIcon(state);
-
-  const domain = state ? computeStateDomain(state) : undefined;
-  params.data_domain =
-    params.state_color || (domain === 'light' && params.state_color !== false)
-      ? domain
-      : undefined;
-  if (state) {
-    params.data_state = computeActiveState(state);
-  }
-  return params;
-}
-
-/**
- * Prettify a Frigate name by converting '_' to spaces and capitalizing words.
- * @param input The input Frigate (camera/label/zone) name.
- * @returns A prettified name.
- */
-export function prettifyFrigateName(input?: string): string | undefined {
-  if (!input) {
-    return undefined;
-  }
-  const words = input.split(/[_\s]+/);
-  return words
-    .map((word) => {
-      return word[0].toUpperCase() + word.substring(1);
-    })
-    .join(' ');
-}
-
-/**
- * Get the title of an entity.
- * @param entity The entity id.
- * @param hass The Home Assistant object.
- * @returns The title or undefined.
- */
-export function getEntityTitle(
-  hass?: HomeAssistant,
-  entity?: string,
-): string | undefined {
-  return entity ? hass?.states[entity]?.attributes?.friendly_name : undefined;
-}
-
-/**
- * Get the icon of an entity.
- * @param entity The entity id.
- * @param hass The Home Assistant object.
- * @returns The icon or undefined.
- */
-export function getEntityIcon(hass?: HomeAssistant, entity?: string): string {
-  return stateIcon(entity ? hass?.states[entity] : null);
-}
-
-/**
- * Get a camera id.
- * @param config The camera config (either parsed or raw).
- * @returns A camera id.
- */
-export function getCameraID(
-  config?: CameraConfig | RawFrigateCardConfig | null,
-): string {
-  return (
-    (typeof config?.id === 'string' && config.id) ||
-    (typeof config?.camera_entity === 'string' && config.camera_entity) ||
-    (typeof config?.webrtc_card === 'object' &&
-      config.webrtc_card &&
-      typeof config.webrtc_card['entity'] === 'string' &&
-      config.webrtc_card['entity']) ||
-    (typeof config?.camera_name === 'string' && config.camera_name) ||
-    ''
-  );
-}
-
-/**
- * Get a camera text title.
- * @param hass The Home Assistant object.
- * @param config The camera config (either parsed or raw).
- * @returns A title string.
- */
-export function getCameraTitle(
-  hass?: HomeAssistant,
-  config?: CameraConfig | RawFrigateCardConfig | null,
-): string {
-  // Attempt to render a recognizable name for the camera,
-  // starting with the most likely to be useful and working our
-  // ways towards the least useful. Extra type checking here since this is also
-  // used on raw configuration in the editor.
-  return (
-    (typeof config?.title === 'string' && config.title) ||
-    (typeof config?.camera_entity === 'string'
-      ? getEntityTitle(hass, config.camera_entity)
-      : '') ||
-    (typeof config?.webrtc_card === 'object' &&
-      config.webrtc_card &&
-      typeof config.webrtc_card['entity'] === 'string' &&
-      config.webrtc_card['entity']) ||
-    (typeof config?.camera_name === 'string'
-      ? prettifyFrigateName(config.camera_name)
-      : '') ||
-    (typeof config?.id === 'string' && config.id) ||
-    ''
-  );
-}
-
-/**
- * Get a camera icon.
- * @param hass The Home Assistant object.
- * @param config The camera config.
- * @returns An icon string.
- */
-export function getCameraIcon(
-  hass?: HomeAssistant,
-  config?: CameraConfig | null,
-): string {
-  return config?.icon || getEntityIcon(hass, config?.camera_entity) || 'mdi:video';
-}
-
-/**
- * Move an element within an array.
- * @param target Target array.
- * @param from From index.
- * @param to To index.
- */
-export function arrayMove(target: unknown[], from: number, to: number): void {
-  const element = target[from];
-  target.splice(from, 1);
-  target.splice(to, 0, element);
-}
-
-/**
- * Determine if the contents of the n(ew) and o(ld) values have changed. For use
- * in lit web components that may have a value that changes address but not
- * contents -- and for which a re-render is expensive/jarring.
- * @param n The new value.
- * @param o The old value.
- * @returns `true` is the contents have changed.
- */
-export function contentsChanged(n: unknown, o: unknown): boolean {
-  return !isEqual(n, o);
-}
-
-/**
- * Frigate card custom version of handleAction
- * (https://github.com/custom-cards/custom-card-helpers/blob/master/src/handle-action.ts)
- * that handles the custom action events the card supports.
- * @param node The node that fired the event.
- * @param hass The Home Assistant object.
- * @param config The multi-action configuration.
- * @param action The action string (e.g. 'hold')
- * @returns Whether or not an action was executed.
- */
-export const frigateCardHandleAction = (
-  node: HTMLElement,
-  hass: HomeAssistant,
-  config: ActionsConfig,
-  action: string,
-): boolean => {
-  return frigateCardHandleActionConfig(
-    node,
-    hass,
-    config,
-    action,
-    getActionConfigGivenAction(action, config),
-  );
-};
-
-/**
- * Handle an ActionConfig or array of ActionConfigs.
- * @param node The node that fired the event.
- * @param hass The Home Assistant object.
- * @param actionConfig A single action config, array of action configs or
- * undefined for the default action config for 'tap'.
- * @param action The action string (e.g. 'hold')
- * @returns Whether or not an action was executed.
- */
-export const frigateCardHandleActionConfig = (
-  node: HTMLElement,
-  hass: HomeAssistant,
-  config: {
-    camera_image?: string;
-    entity?: string;
-  },
-  action: string,
-  actionConfig: ActionType | ActionType[] | undefined,
-): boolean => {
-  // Only allow a tap action to use a default non-config (the more-info config).
-  if (actionConfig || action == 'tap') {
-    // ActionConfig vs ActionType:
-    // There is a slight typing (but not functional) difference between
-    // ActionType in this card and ActionConfig in `custom-card-helpers`. See
-    // `ExtendedConfirmationRestrictionConfig` in `types.ts` for the source and
-    // reason behind this difference.
-    if (Array.isArray(actionConfig)) {
-      actionConfig.forEach((action) =>
-        handleActionConfig(node, hass, config, action as ActionConfig | undefined),
-      );
-    } else {
-      handleActionConfig(node, hass, config, actionConfig as ActionConfig | undefined);
-    }
-    return true;
-  }
-  return false;
-};
-
-/**
- * Determine if an action config has a real action. A modified version of
- * custom-card-helpers hasAction to also work with arrays of action configs.
- * @param config The action config in question.
- * @returns `true` if there's a real action defined, `false` otherwise.
- */
-export const frigateCardHasAction = (
-  config?: ActionType | ActionType[] | undefined,
-): boolean => {
-  // See note above on 'ActionConfig vs ActionType' for why this cast is
-  // necessary and harmless.
-  if (Array.isArray(config)) {
-    return !!config.find((item) => hasAction(item as ActionConfig | undefined));
-  }
-  return hasAction(config as ActionConfig | undefined);
-};
-
-/**
- * Stop an event from activating card wide actions.
- */
-export const stopEventFromActivatingCardWideActions = (ev: Event): void => {
-  ev.stopPropagation();
-};
-
-/**
- * Convenience function to convert a timestamp to hours, minutes and seconds
- * string. Heavily inspired by, and returning the same format as, the Frigate
- * UI: https://github.com/blakeblackshear/frigate/blob/master/web/src/components/RecordingPlaylist.jsx#L97
- * @param event The Frigate event.
- * @returns A duration string.
- */
-export function getEventDurationString(event: FrigateEvent): string {
-  if (!event.end_time) {
-    return localize('event.in_progress');
-  }
-  const start = fromUnixTime(event.start_time);
-  const end = fromUnixTime(event.end_time);
-  const hours = differenceInHours(end, start);
-  const minutes = differenceInMinutes(end, start) - hours * 60;
-  const seconds = differenceInSeconds(end, start) - hours * 60 * 60 - minutes * 60;
-  let duration = '';
-
-  if (hours) {
-    duration += `${hours}h `;
-  }
-  if (minutes) {
-    duration += `${minutes}m `;
-  }
-  duration += `${seconds}s`;
-  return duration;
-}
-
-/**
- * Side loads the HA elements this card needs. This trickery is unfortunate
- * necessary, see:
- *  - https://github.com/thomasloven/hass-config/wiki/PreLoading-Lovelace-Elements
- * @returns `true` if the load is successful, `false` otherwise.
- */
-export const sideLoadHomeAssistantElements = async (): Promise<boolean> => {
-  const neededElements = [
-    'ha-selector',
-    'ha-menu-button',
-    'ha-camera-stream',
-    'ha-hls-player',
-    'ha-web-rtc-player',
-    'ha-icon',
-    'ha-circular-progress',
-    'ha-icon-button',
-    'ha-card',
-    'ha-svg-icon',
-    'ha-button-menu',
-  ];
-
-  if (neededElements.every((element) => customElements.get(element))) {
-    return true;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const helpers: CardHelpers = await (window as any).loadCardHelpers();
-
-  // The picture-glance editor loads everything this card needs.
-  const pictureGlance = await helpers.createCardElement({
-    type: 'picture-glance',
-    entities: [],
-    camera_image: 'dummy-to-load-editor-components',
-  });
-  if (pictureGlance.constructor.getConfigElement) {
-    await pictureGlance.constructor.getConfigElement();
-    return true;
-  }
-  return false;
-};
diff --git a/src/components/carousel.ts b/src/components/carousel.ts
index 9cd9b923..9da0102f 100644
--- a/src/components/carousel.ts
+++ b/src/components/carousel.ts
@@ -1,17 +1,14 @@
-import { CSSResultGroup, LitElement, unsafeCSS, PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
-
 import EmblaCarousel, {
   EmblaCarouselType,
   EmblaOptionsType,
-  EmblaPluginType,
+  EmblaPluginType
 } from 'embla-carousel';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
-
-import { TransitionEffect } from '../types';
-import { dispatchFrigateCardEvent } from '../common';
-
+import { CSSResultGroup, LitElement, PropertyValues, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
 import carouselStyle from '../scss/carousel.scss';
+import { TransitionEffect } from '../types';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
 
 export interface CarouselSelect {
   index: number;
diff --git a/src/components/elements.ts b/src/components/elements.ts
index 2eada158..e815a5fe 100644
--- a/src/components/elements.ts
+++ b/src/components/elements.ts
@@ -1,28 +1,27 @@
-import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResultGroup,
-  unsafeCSS,
-  PropertyValues,
-} from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  unsafeCSS
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-
+import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
+import { localize } from '../localize/localize.js';
+import elementsStyle from '../scss/elements.scss';
 import {
   FrigateConditional,
   MenuButton,
   MenuIcon,
   MenuStateIcon,
-  PictureElements,
   MenuSubmenu,
   MenuSubmenuSelect,
+  PictureElements
 } from '../types.js';
-import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js';
-
-import elementsStyle from '../scss/elements.scss';
-import { localize } from '../localize/localize.js';
-import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
+import { dispatchErrorMessageEvent } from './message.js';
 
 /* A note on picture element rendering:
  *
diff --git a/src/components/gallery.ts b/src/components/gallery.ts
index 1bdcf2a7..80fabf2a 100644
--- a/src/components/gallery.ts
+++ b/src/components/gallery.ts
@@ -1,26 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { HomeAssistant } from 'custom-card-helpers';
 import {
+  css,
   CSSResultGroup,
+  html,
   LitElement,
   PropertyValues,
   TemplateResult,
-  css,
-  html,
-  unsafeCSS,
+  unsafeCSS
 } from 'lit';
-import { HomeAssistant } from 'custom-card-helpers';
 import { customElement, property } from 'lit/decorators.js';
-
-import { CameraConfig, GalleryConfig, frigateCardConfigDefaults } from '../types.js';
-import { BrowseMediaUtil } from '../browse-media-util.js';
-import { View } from '../view.js';
-import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
-import { renderProgressIndicator } from './message.js';
-import { stopEventFromActivatingCardWideActions } from '../common.js';
-
-import './thumbnail.js';
-
 import galleryStyle from '../scss/gallery.scss';
+import { CameraConfig, frigateCardConfigDefaults, GalleryConfig } from '../types.js';
+import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import {
+  fetchChildMediaAndDispatchViewChange,
+  fetchLatestMediaAndDispatchViewChange,
+  getFullDependentBrowseMediaQueryParametersOrDispatchError
+} from '../utils/ha/browse-media';
+import { View } from '../view.js';
+import { renderProgressIndicator } from './message.js';
+import './thumbnail.js';
+import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
 
 @customElement('frigate-card-gallery')
 export class FrigateCardGallery extends LitElement {
@@ -54,7 +55,7 @@ export class FrigateCardGallery extends LitElement {
 
     if (!this.view.target) {
       const browseMediaQueryParameters =
-        BrowseMediaUtil.getFullDependentBrowseMediaQueryParametersOrDispatchError(
+        getFullDependentBrowseMediaQueryParametersOrDispatchError(
           this,
           this.hass,
           this.cameras,
@@ -66,7 +67,7 @@ export class FrigateCardGallery extends LitElement {
         return;
       }
 
-      BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange(
+      fetchLatestMediaAndDispatchViewChange(
         this,
         this.hass,
         this.view,
@@ -219,7 +220,7 @@ export class FrigateCardGalleryCore extends LitElement {
                   <ha-card
                     @click=${(ev) => {
                       if (this.hass && this.view) {
-                        BrowseMediaUtil.fetchChildMediaAndDispatchViewChange(
+                        fetchChildMediaAndDispatchViewChange(
                           this,
                           this.hass,
                           this.view,
diff --git a/src/components/image.ts b/src/components/image.ts
index 28d1c0de..0ba8f042 100644
--- a/src/components/image.ts
+++ b/src/components/image.ts
@@ -1,28 +1,23 @@
+import { HomeAssistant } from 'custom-card-helpers';
 import {
   CSSResultGroup,
+  html,
   LitElement,
   PropertyValues,
   TemplateResult,
-  html,
-  unsafeCSS,
+  unsafeCSS
 } from 'lit';
-import { HomeAssistant } from 'custom-card-helpers';
-import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { customElement, property, state } from 'lit/decorators.js';
-
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { CachedValueController } from '../cached-value-controller.js';
-import { CameraConfig, ImageViewConfig } from '../types.js';
-import { View } from '../view.js';
-import {
-  dispatchErrorMessageEvent,
-  dispatchMediaShowEvent,
-  shouldUpdateBasedOnHass,
-} from '../common.js';
-import { localize } from '../localize/localize.js';
-
 import defaultImage from '../images/frigate-bird-in-sky.jpg';
-
+import { localize } from '../localize/localize.js';
 import imageStyle from '../scss/image.scss';
+import { CameraConfig, ImageViewConfig } from '../types.js';
+import { shouldUpdateBasedOnHass } from '../utils/ha';
+import { dispatchMediaShowEvent } from '../utils/media-info.js';
+import { View } from '../view.js';
+import { dispatchErrorMessageEvent } from './message.js';
 
 // See: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L101
 const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
@@ -41,7 +36,7 @@ export class FrigateCardImage extends LitElement {
   @state()
   protected _imageConfig?: ImageViewConfig;
 
-  protected _refImage: Ref<HTMLImageElement> = createRef() ;
+  protected _refImage: Ref<HTMLImageElement> = createRef();
 
   protected _cachedValueController?: CachedValueController<string>;
   protected _boundVisibilityHandler = this._visibilityHandler.bind(this);
diff --git a/src/components/live.ts b/src/components/live.ts
index 7c1d52ce..6c78aa43 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -1,60 +1,56 @@
+import JSMpeg from '@cycjimmy/jsmpeg-player';
+import { Task } from '@lit-labs/task';
+import { HomeAssistant } from 'custom-card-helpers';
+import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
 import {
   CSSResultGroup,
-  LitElement,
-  TemplateResult,
   html,
-  unsafeCSS,
+  LitElement,
   PropertyValues,
+  TemplateResult,
+  unsafeCSS
 } from 'lit';
-import {
-  ExtendedHomeAssistant,
-  CameraConfig,
-  JSMPEGConfig,
-  LiveConfig,
-  MediaShowInfo,
-  WebRTCCardConfig,
-  FrigateCardError,
-  FrigateCardMediaPlayer,
-  LiveOverrides,
-  LiveProvider,
-  TransitionEffect,
-  frigateCardConfigDefaults,
-} from '../types.js';
-import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
-import { HomeAssistant } from 'custom-card-helpers';
-import JSMpeg from '@cycjimmy/jsmpeg-player';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
-import { Task } from '@lit-labs/task';
 import { customElement, property, state } from 'lit/decorators.js';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { until } from 'lit/directives/until.js';
-
-import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js';
-import { BrowseMediaUtil } from '../browse-media-util.js';
 import { ConditionState, getOverriddenConfig } from '../card-condition.js';
-import { FrigateCardMediaCarousel } from './media-carousel.js';
-import { FrigateCardNextPreviousControl } from './next-prev-control.js';
-import { Lazyload } from './embla-plugins/lazyload.js';
-import { View } from '../view.js';
-import { localize } from '../localize/localize.js';
-import {
-  contentsChanged,
-  dispatchErrorMessageEvent,
-  dispatchExistingMediaShowInfoAsEvent,
-  dispatchMediaShowEvent,
-  getCameraIcon,
-  getCameraTitle,
-  homeAssistantSignPath,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
 import { renderProgressIndicator } from '../components/message.js';
-
-import './next-prev-control.js';
-import './title-control.js';
-
-import liveStyle from '../scss/live.scss';
+import { localize } from '../localize/localize.js';
 import liveFrigateStyle from '../scss/live-frigate.scss';
 import liveJSMPEGStyle from '../scss/live-jsmpeg.scss';
 import liveWebRTCStyle from '../scss/live-webrtc.scss';
+import liveStyle from '../scss/live.scss';
+import {
+  CameraConfig,
+  ExtendedHomeAssistant,
+  frigateCardConfigDefaults,
+  FrigateCardError,
+  FrigateCardMediaPlayer,
+  JSMPEGConfig,
+  LiveConfig,
+  LiveOverrides,
+  LiveProvider,
+  MediaShowInfo,
+  TransitionEffect,
+  WebRTCCardConfig
+} from '../types.js';
+import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { contentsChanged } from '../utils/basic.js';
+import { getCameraIcon, getCameraTitle } from '../utils/camera.js';
+import { homeAssistantSignPath } from '../utils/ha';
+import { getFullDependentBrowseMediaQueryParameters } from '../utils/ha/browse-media.js';
+import {
+  dispatchExistingMediaShowInfoAsEvent,
+  dispatchMediaShowEvent
+} from '../utils/media-info.js';
+import { View } from '../view.js';
+import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js';
+import { Lazyload } from './embla-plugins/lazyload.js';
+import { FrigateCardMediaCarousel } from './media-carousel.js';
+import { dispatchErrorMessageEvent } from './message.js';
+import './next-prev-control.js';
+import { FrigateCardNextPreviousControl } from './next-prev-control.js';
+import './title-control.js';
 
 // Number of seconds a signed URL is valid for.
 const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
@@ -129,7 +125,7 @@ export class FrigateCardLive extends LitElement {
     // Does not use getFullDependentBrowseMediaQueryParametersOrDispatchError to
     // ensure that non-Frigate cameras will work in live view (they will not
     // have a Frigate camera name).
-    const browseMediaParams = BrowseMediaUtil.getFullDependentBrowseMediaQueryParameters(
+    const browseMediaParams = getFullDependentBrowseMediaQueryParameters(
       this.hass,
       this.cameras,
       this.view.camera,
diff --git a/src/components/media-carousel.ts b/src/components/media-carousel.ts
index fa6afa4f..2ff28371 100644
--- a/src/components/media-carousel.ts
+++ b/src/components/media-carousel.ts
@@ -1,21 +1,18 @@
-import { CSSResultGroup, unsafeCSS } from 'lit';
 import { EmblaCarouselType } from 'embla-carousel';
-import { createRef, Ref } from 'lit/directives/ref.js';
+import { CSSResultGroup, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
-
-import { AutoMediaPluginType } from './embla-plugins/automedia.js';
-import { FrigateCardCarousel } from './carousel.js';
-import { FrigateCardNextPreviousControl } from './next-prev-control.js';
-import { FrigateCardTitleControl } from './title-control.js';
+import { createRef, Ref } from 'lit/directives/ref.js';
+import mediaCarouselStyle from '../scss/media-carousel.scss';
 import type { MediaShowInfo } from '../types.js';
 import {
   dispatchExistingMediaShowInfoAsEvent,
-  isValidMediaShowInfo,
-} from '../common.js';
-
+  isValidMediaShowInfo
+} from '../utils/media-info.js';
+import { FrigateCardCarousel } from './carousel.js';
+import { AutoMediaPluginType } from './embla-plugins/automedia.js';
 import './next-prev-control.js';
-
-import mediaCarouselStyle from '../scss/media-carousel.scss';
+import { FrigateCardNextPreviousControl } from './next-prev-control.js';
+import { FrigateCardTitleControl } from './title-control.js';
 
 const getEmptyImageSrc = (width: number, height: number) =>
   `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`;
diff --git a/src/components/menu.ts b/src/components/menu.ts
index 07888542..a58b07e3 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -1,38 +1,34 @@
+import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
 import {
   CSSResultGroup,
-  LitElement,
-  TemplateResult,
   html,
-  unsafeCSS,
+  LitElement,
   PropertyValues,
+  TemplateResult,
+  unsafeCSS
 } from 'lit';
-import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
-
 import { actionHandler } from '../action-handler-directive.js';
-
-import './submenu.js';
-
+import menuStyle from '../scss/menu.scss';
 import type {
   ActionsConfig,
   ActionType,
   MenuButton,
   MenuConfig,
   MenuItem,
-  StateParameters,
+  StateParameters
 } from '../types.js';
 import {
   convertActionToFrigateCardCustomAction,
   frigateCardHandleActionConfig,
   frigateCardHasAction,
-  getActionConfigGivenAction,
-  refreshDynamicStateParameters,
-} from '../common.js';
-
-import menuStyle from '../scss/menu.scss';
+  getActionConfigGivenAction
+} from '../utils/action.js';
+import { refreshDynamicStateParameters } from '../utils/ha';
+import './submenu.js';
 
 export const FRIGATE_BUTTON_MENU_ICON = 'frigate';
 export const FRIGATE_ICON_FILLED =
diff --git a/src/components/message.ts b/src/components/message.ts
index cc947653..12547788 100644
--- a/src/components/message.ts
+++ b/src/components/message.ts
@@ -1,11 +1,10 @@
-import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-
-import { Message } from '../types.js';
 import { TROUBLESHOOTING_URL } from '../const.js';
 import { localize } from '../localize/localize.js';
-
 import messageStyle from '../scss/message.scss';
+import { Message } from '../types.js';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
 
 @customElement('frigate-card-message')
 export class FrigateCardMessage extends LitElement {
@@ -21,18 +20,19 @@ export class FrigateCardMessage extends LitElement {
   // Render the menu.
   protected render(): TemplateResult {
     const icon = this.icon ? this.icon : 'mdi:information-outline';
-    return html`
-      <div class="wrapper">
-        <div class="message">
-          <div class="icon">
-            <ha-icon icon="${icon}"> </ha-icon>
-          </div>
-          <div class="contents">
-            <span> ${this.message ? html`${this.message}` : ''} </span>
-            ${this.context ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>` : ''}
-          </div>
+    return html` <div class="wrapper">
+      <div class="message">
+        <div class="icon">
+          <ha-icon icon="${icon}"> </ha-icon>
         </div>
-      </div>`;
+        <div class="contents">
+          <span> ${this.message ? html`${this.message}` : ''} </span>
+          ${this.context
+            ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>`
+            : ''}
+        </div>
+      </div>
+    </div>`;
   }
 
   static get styles(): CSSResultGroup {
@@ -103,3 +103,40 @@ export function renderProgressIndicator(message?: string): TemplateResult {
     </frigate-card-progress-indicator>
   `;
 }
+
+/**
+ * Dispatch an event with a message to show to the user.
+ * @param element The element to send the event.
+ * @param message The message to show.
+ * @param icon An optional icon to attach to the message.
+ */
+export function dispatchMessageEvent(
+  element: HTMLElement,
+  message: string,
+  icon?: string,
+  context?: unknown,
+): void {
+  dispatchFrigateCardEvent<Message>(element, 'message', {
+    message: message,
+    type: 'info',
+    icon: icon,
+    context: context,
+  });
+}
+
+/**
+ * Dispatch an event with an error message to show to the user.
+ * @param element The element to send the event.
+ * @param message The message to show.
+ */
+export function dispatchErrorMessageEvent(
+  element: HTMLElement,
+  message: string,
+  context?: unknown,
+): void {
+  dispatchFrigateCardEvent<Message>(element, 'message', {
+    message: message,
+    type: 'error',
+    context: context,
+  });
+}
diff --git a/src/components/submenu.ts b/src/components/submenu.ts
index df601177..f7a77562 100644
--- a/src/components/submenu.ts
+++ b/src/components/submenu.ts
@@ -1,29 +1,25 @@
 import type { Corner } from '@material/mwc-menu';
+import { HomeAssistant } from 'custom-card-helpers';
 import {
   CSSResultGroup,
   html,
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS,
+  unsafeCSS
 } from 'lit';
-import { HomeAssistant } from 'custom-card-helpers';
 import { customElement, property } from 'lit/decorators.js';
-
-import {
-  frigateCardHasAction,
-  refreshDynamicStateParameters,
-  shouldUpdateBasedOnHass,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
-
-import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js';
 import { actionHandler } from '../action-handler-directive.js';
-import { domainIcon } from '../icons/domain-icon.js';
-
 import submenuStyle from '../scss/submenu.scss';
+import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js';
+import {
+  frigateCardHasAction,
+  stopEventFromActivatingCardWideActions
+} from '../utils/action.js';
+import { refreshDynamicStateParameters, shouldUpdateBasedOnHass } from '../utils/ha';
+import { domainIcon } from '../utils/icons/domain-icon.js';
 
 @customElement('frigate-card-submenu')
 export class FrigateCardSubmenu extends LitElement {
diff --git a/src/components/surround-thumbnails.ts b/src/components/surround-thumbnails.ts
index 9bd707f9..b65267b7 100644
--- a/src/components/surround-thumbnails.ts
+++ b/src/components/surround-thumbnails.ts
@@ -1,23 +1,23 @@
-import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { HomeAssistant } from 'custom-card-helpers';
 import { Task } from '@lit-labs/task';
+import { HomeAssistant } from 'custom-card-helpers';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-
-import { BrowseMediaUtil } from '../browse-media-util.js';
+import surroundThumbnailsStyle from '../scss/surround.scss';
 import {
   BrowseMediaQueryParameters,
   FrigateBrowseMediaSource,
   FrigateCardView,
-  ThumbnailsControlConfig,
+  ThumbnailsControlConfig
 } from '../types.js';
-
-import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
+import {
+  getFirstTrueMediaChildIndex,
+  multipleBrowseMediaQueryMerged
+} from '../utils/ha/browse-media';
 import { View } from '../view.js';
-import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js';
-
+import { dispatchErrorMessageEvent } from './message.js';
 import './surround.js';
-
-import surroundThumbnailsStyle from '../scss/surround.scss';
+import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 
 @customElement('frigate-card-surround-thumbnails')
 export class FrigateCardSurround extends LitElement {
@@ -71,11 +71,11 @@ export class FrigateCardSurround extends LitElement {
     }
     let parent: FrigateBrowseMediaSource | null;
     try {
-      parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, browseMediaParams);
+      parent = await multipleBrowseMediaQueryMerged(this.hass, browseMediaParams);
     } catch (e) {
       return dispatchErrorMessageEvent(this, (e as Error).message);
     }
-    if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) !== null) {
+    if (getFirstTrueMediaChildIndex(parent) !== null) {
       this.view
         ?.evolve({
           ...(this.targetView && { view: this.targetView }),
diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts
index bfa0b36b..d62d1711 100644
--- a/src/components/thumbnail-carousel.ts
+++ b/src/components/thumbnail-carousel.ts
@@ -1,22 +1,16 @@
-import { BrowseMediaUtil } from '../browse-media-util.js';
-import { CSSResultGroup, TemplateResult, html, unsafeCSS, PropertyValues } from 'lit';
 import { EmblaOptionsType } from 'embla-carousel';
-import { classMap } from 'lit/directives/class-map.js';
+import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-
-import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
-import { FrigateCardCarousel } from './carousel.js';
-import { View } from '../view.js';
-import {
-  contentsChanged,
-  dispatchFrigateCardEvent,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
-
-import './thumbnail.js';
-
 import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
+import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
+import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
+import { isTrueMedia } from '../utils/ha/browse-media';
+import { View } from '../view.js';
+import { FrigateCardCarousel } from './carousel.js';
+import './thumbnail.js';
 
 export interface ThumbnailCarouselTap {
   slideIndex: number;
@@ -160,7 +154,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     if (
       !parent.children ||
       !parent.children.length ||
-      !BrowseMediaUtil.isTrueMedia(parent.children[childIndex])
+      !isTrueMedia(parent.children[childIndex])
     ) {
       return;
     }
diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts
index 4a4480a4..d5315c9c 100644
--- a/src/components/thumbnail.ts
+++ b/src/components/thumbnail.ts
@@ -1,18 +1,14 @@
-import { CSSResult, TemplateResult, html, unsafeCSS, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
 import { format, fromUnixTime } from 'date-fns';
-
-import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js';
-import { View } from '../view.js';
-import {
-  getEventDurationString,
-  prettifyFrigateName,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
+import { CSSResult, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { localize } from '../localize/localize.js';
-
-import thumbnailStyle from '../scss/thumbnail.scss';
 import thumbnailDetailsStyle from '../scss/thumbnail-details.scss';
+import thumbnailStyle from '../scss/thumbnail.scss';
+import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js';
+import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { prettifyTitle } from '../utils/basic.js';
+import { getEventDurationString } from '../utils/ha/browse-media.js';
+import { View } from '../view.js';
 
 // The minimum width of a thumbnail with details enabled.
 export const THUMBNAIL_DETAILS_WIDTH_MIN = 300;
@@ -28,14 +24,14 @@ export class FrigateCardThumbnailDetails extends LitElement {
     }
     const score = (this.event.top_score * 100).toFixed(2) + '%';
     return html`<div class="left">
-        <div class="larger">${prettifyFrigateName(this.event.label)}</div>
+        <div class="larger">${prettifyTitle(this.event.label)}</div>
         <div>
-            <span class="heading">${localize('event.start')}:</span>
-            <span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
+          <span class="heading">${localize('event.start')}:</span>
+          <span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
         </div>
         <div>
-            <span class="heading">${localize('event.duration')}:</span>
-            <span>${getEventDurationString(this.event)}</span>
+          <span class="heading">${localize('event.duration')}:</span>
+          <span>${getEventDurationString(this.event)}</span>
         </div>
       </div>
       <div class="right">
diff --git a/src/components/timeline.ts b/src/components/timeline.ts
index 108aa6f7..3b8ba9bf 100644
--- a/src/components/timeline.ts
+++ b/src/components/timeline.ts
@@ -1,11 +1,17 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { add, fromUnixTime, sub } from 'date-fns';
 import {
   CSSResultGroup,
-  LitElement,
-  TemplateResult,
   html,
-  unsafeCSS,
+  LitElement,
   PropertyValues,
+  TemplateResult,
+  unsafeCSS
 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { isEqual } from 'lodash-es';
 import { DataSet } from 'vis-data/esnext';
 import {
   DataGroupCollectionType,
@@ -14,38 +20,31 @@ import {
   TimelineItem,
   TimelineOptions,
   TimelineOptionsCluster,
-  TimelineWindow,
+  TimelineWindow
 } from 'vis-timeline/esnext';
-import { HomeAssistant } from 'custom-card-helpers';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
-import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { add, fromUnixTime, sub } from 'date-fns';
-import { isEqual } from 'lodash-es';
-
-import { BrowseMediaUtil } from '../browse-media-util';
+import { CAMERA_BIRDSEYE } from '../const';
+import { localize } from '../localize/localize';
+import timelineCoreStyle from '../scss/timeline-core.scss';
+import timelineStyle from '../scss/timeline.scss';
 import {
   BrowseMediaQueryParameters,
   CameraConfig,
   FrigateBrowseMediaSource,
-  TimelineConfig,
-  FrigateEvent,
   frigateCardConfigDefaults,
+  FrigateEvent,
+  TimelineConfig
 } from '../types';
-import { CAMERA_BIRDSEYE } from '../const';
-import { View, ViewContext } from '../view';
+import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
+import { getCameraTitle } from '../utils/camera.js';
 import {
-  dispatchErrorMessageEvent,
-  dispatchFrigateCardEvent,
-  dispatchMessageEvent,
-  getCameraTitle,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
-import { localize } from '../localize/localize';
-
-import timelineCoreStyle from '../scss/timeline-core.scss';
-import timelineStyle from '../scss/timeline.scss';
-
+  createEventParentForChildren,
+  getBrowseMediaQueryParameters,
+  isTrueMedia,
+  multipleBrowseMediaQuery
+} from '../utils/ha/browse-media';
+import { View, ViewContext } from '../view';
+import { dispatchErrorMessageEvent, dispatchMessageEvent } from './message.js';
 import './surround-thumbnails.js';
 
 const TIMELINE_EVENT_MANAGER_MAX_AGE_SECONDS = 10;
@@ -143,7 +142,7 @@ class TimelineEventManager {
       const event = child.frigate?.event;
       if (
         event &&
-        BrowseMediaUtil.isTrueMedia(child) &&
+        isTrueMedia(child) &&
         ['video', 'image'].includes(child.media_content_type)
       ) {
         let item = this._dataset.get(event.id);
@@ -288,20 +287,15 @@ class TimelineEventManager {
           this._dateStart &&
           cameraConfig.camera_name !== CAMERA_BIRDSEYE
         ) {
-          const param = BrowseMediaUtil.getBrowseMediaQueryParameters(
-            hass,
-            cameraID,
-            cameraConfig,
-            {
-              // Events are always fetched for the maximum extent of the managed
-              // range. This is because events may change at any point in time
-              // (e.g. a long-running event that ends).
-              before: this._dateEnd.getTime() / 1000,
-              after: this._dateStart.getTime() / 1000,
-              unlimited: true,
-              mediaType: mediaType as 'clips' | 'snapshots',
-            },
-          );
+          const param = getBrowseMediaQueryParameters(hass, cameraID, cameraConfig, {
+            // Events are always fetched for the maximum extent of the managed
+            // range. This is because events may change at any point in time
+            // (e.g. a long-running event that ends).
+            before: this._dateEnd.getTime() / 1000,
+            after: this._dateStart.getTime() / 1000,
+            unlimited: true,
+            mediaType: mediaType as 'clips' | 'snapshots',
+          });
           if (param) {
             params.push(param);
           }
@@ -315,7 +309,7 @@ class TimelineEventManager {
 
     let results: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>;
     try {
-      results = await BrowseMediaUtil.multipleBrowseMediaQuery(hass, params);
+      results = await multipleBrowseMediaQuery(hass, params);
     } catch (e) {
       return dispatchErrorMessageEvent(element, (e as Error).message);
     }
@@ -578,10 +572,7 @@ export class FrigateCardTimelineCore extends LitElement {
       return null;
     }
 
-    const target = BrowseMediaUtil.createEventParentForChildren(
-      'Timeline events',
-      children,
-    );
+    const target = createEventParentForChildren('Timeline events', children);
     return {
       target: target,
       childIndex: childIndex < 0 ? null : childIndex,
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index c9923252..73c3fd26 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -1,19 +1,21 @@
+import { Task } from '@lit-labs/task';
+import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
 import {
   CSSResultGroup,
+  html,
   LitElement,
   PropertyValues,
   TemplateResult,
-  html,
-  unsafeCSS,
+  unsafeCSS
 } from 'lit';
-import { BrowseMediaUtil } from '../browse-media-util.js';
-import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
-import { Task } from '@lit-labs/task';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ref } from 'lit/directives/ref.js';
-
-import { AutoMediaPlugin } from './embla-plugins/automedia.js';
+import {
+  dispatchErrorMessageEvent,
+  renderProgressIndicator
+} from '../components/message.js';
+import viewerStyle from '../scss/viewer.scss';
 import type {
   BrowseMediaNeighbors,
   BrowseMediaQueryParameters,
@@ -22,26 +24,28 @@ import type {
   FrigateBrowseMediaSource,
   MediaShowInfo,
   TransitionEffect,
-  ViewerConfig,
+  ViewerConfig
 } from '../types.js';
-import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
-import { FrigateCardNextPreviousControl } from './next-prev-control.js';
-import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
-import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
-import { View } from '../view.js';
+import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { contentsChanged } from '../utils/basic.js';
 import {
-  contentsChanged,
-  createMediaShowInfo,
-  dispatchErrorMessageEvent,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
-import { renderProgressIndicator } from '../components/message.js';
-
+  fetchLatestMediaAndDispatchViewChange,
+  getEventStartTime,
+  getFullDependentBrowseMediaQueryParametersOrDispatchError,
+  isTrueMedia,
+  multipleBrowseMediaQueryMerged,
+  overrideMultiBrowseMediaQueryParameters
+} from '../utils/ha/browse-media.js';
+import { createMediaShowInfo } from '../utils/media-info.js';
+import { ResolvedMediaCache, resolveMedia } from '../utils/resolved-media.js';
+import { View } from '../view.js';
+import { AutoMediaPlugin } from './embla-plugins/automedia.js';
+import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
+import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
 import './next-prev-control.js';
+import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import './title-control.js';
 
-import viewerStyle from '../scss/viewer.scss';
-
 @customElement('frigate-card-viewer')
 export class FrigateCardViewer extends LitElement {
   @property({ attribute: false })
@@ -69,7 +73,7 @@ export class FrigateCardViewer extends LitElement {
     }
 
     const browseMediaQueryParameters =
-      BrowseMediaUtil.getFullDependentBrowseMediaQueryParametersOrDispatchError(
+      getFullDependentBrowseMediaQueryParametersOrDispatchError(
         this,
         this.hass,
         this.cameras,
@@ -86,14 +90,13 @@ export class FrigateCardViewer extends LitElement {
         return;
       }
 
-      BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange(
+      fetchLatestMediaAndDispatchViewChange(
         this,
         this.hass,
         this.view,
-        BrowseMediaUtil.overrideMultiBrowseMediaQueryParameters(
-          browseMediaQueryParameters,
-          { mediaType: mediaType },
-        ),
+        overrideMultiBrowseMediaQueryParameters(browseMediaQueryParameters, {
+          mediaType: mediaType,
+        }),
       );
       return renderProgressIndicator();
     }
@@ -164,8 +167,8 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
         i < (target.children || []).length;
         ++i
       ) {
-        if (BrowseMediaUtil.isTrueMedia(target.children[i])) {
-          await ResolvedMediaUtil.resolveMedia(
+        if (isTrueMedia(target.children[i])) {
+          await resolveMedia(
             this.hass,
             target.children[i],
             this.resolvedMediaCache,
@@ -324,7 +327,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     let prevIndex: number | null = null;
     for (let i = this.view.childIndex - 1; i >= 0; i--) {
       const media = this.view.target.children[i];
-      if (media && BrowseMediaUtil.isTrueMedia(media)) {
+      if (media && isTrueMedia(media)) {
         prevIndex = i;
         break;
       }
@@ -334,7 +337,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     let nextIndex: number | null = null;
     for (let i = this.view.childIndex + 1; i < this.view.target.children.length; i++) {
       const media = this.view.target.children[i];
-      if (media && BrowseMediaUtil.isTrueMedia(media)) {
+      if (media && isTrueMedia(media)) {
         nextIndex = i;
         break;
       }
@@ -368,7 +371,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       return null;
     }
 
-    const snapshotStartTime = BrowseMediaUtil.getEventStartTime(snapshot);
+    const snapshotStartTime = getEventStartTime(snapshot);
     if (!snapshotStartTime) {
       return null;
     }
@@ -386,10 +389,10 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     let latest: number | null = null;
     for (let i = 0; i < this.view.target.children.length; i++) {
       const child = this.view.target.children[i];
-      if (!BrowseMediaUtil.isTrueMedia(child)) {
+      if (!isTrueMedia(child)) {
         continue;
       }
-      const startTime = BrowseMediaUtil.getEventStartTime(child);
+      const startTime = getEventStartTime(child);
 
       if (startTime && (earliest === null || startTime < earliest)) {
         earliest = startTime;
@@ -404,7 +407,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
 
     let clips: FrigateBrowseMediaSource | null;
 
-    const params = BrowseMediaUtil.overrideMultiBrowseMediaQueryParameters(
+    const params = overrideMultiBrowseMediaQueryParameters(
       this.browseMediaQueryParameters,
       {
         mediaType: 'clips',
@@ -414,7 +417,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     );
 
     try {
-      clips = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, params);
+      clips = await multipleBrowseMediaQueryMerged(this.hass, params);
     } catch (e) {
       // This is best effort.
       return null;
@@ -426,10 +429,10 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
 
     for (let i = 0; i < clips.children.length; i++) {
       const child = clips.children[i];
-      if (!BrowseMediaUtil.isTrueMedia(child)) {
+      if (!isTrueMedia(child)) {
         continue;
       }
-      const clipStartTime = BrowseMediaUtil.getEventStartTime(child);
+      const clipStartTime = getEventStartTime(child);
       if (clipStartTime && clipStartTime === snapshotStartTime) {
         return this.view.evolve({
           view: 'clip',
@@ -490,12 +493,12 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       !this.view ||
       !this.view.target ||
       !this.view.target.children ||
-      !BrowseMediaUtil.isTrueMedia(this.view.target.children[childIndex])
+      !isTrueMedia(this.view.target.children[childIndex])
     ) {
       return;
     }
 
-    ResolvedMediaUtil.resolveMedia(
+    resolveMedia(
       this.hass,
       this.view.target.children[childIndex],
       this.resolvedMediaCache,
@@ -667,7 +670,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       !this.hass ||
       !this.view ||
       !this.viewerConfig ||
-      !BrowseMediaUtil.isTrueMedia(mediaToRender) ||
+      !isTrueMedia(mediaToRender) ||
       !['video', 'image'].includes(mediaToRender.media_content_type)
     ) {
       return;
diff --git a/src/editor.ts b/src/editor.ts
index b003f60b..981ef41c 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -1,18 +1,15 @@
-import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-
-import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
-import { localize } from './localize/localize.js';
 import {
-  BUTTON_SIZE_MIN,
-  FRIGATE_MENU_PRIORITY_MAX,
-  RawFrigateCardConfig,
-  RawFrigateCardConfigArray,
-  THUMBNAIL_WIDTH_MAX,
-  THUMBNAIL_WIDTH_MIN,
-  frigateCardConfigDefaults,
-} from './types.js';
-
+  copyConfig,
+  deleteConfigValue,
+  getArrayConfigPath,
+  getConfigValue,
+  isConfigUpgradeable,
+  setConfigValue,
+  upgradeConfig,
+} from './config-mgmt.js';
 import {
   CONF_CAMERAS,
   CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
@@ -89,23 +86,20 @@ import {
   CONF_VIEW_UPDATE_FORCE,
   CONF_VIEW_UPDATE_SECONDS,
 } from './const.js';
-import {
-  arrayMove,
-  getCameraID,
-  getCameraTitle,
-  sideLoadHomeAssistantElements,
-} from './common.js';
-import {
-  copyConfig,
-  deleteConfigValue,
-  getArrayConfigPath,
-  getConfigValue,
-  isConfigUpgradeable,
-  setConfigValue,
-  upgradeConfig,
-} from './config-mgmt.js';
-
+import { localize } from './localize/localize.js';
 import frigate_card_editor_style from './scss/editor.scss';
+import {
+  BUTTON_SIZE_MIN,
+  frigateCardConfigDefaults,
+  FRIGATE_MENU_PRIORITY_MAX,
+  RawFrigateCardConfig,
+  RawFrigateCardConfigArray,
+  THUMBNAIL_WIDTH_MAX,
+  THUMBNAIL_WIDTH_MIN,
+} from './types.js';
+import { arrayMove } from './utils/basic.js';
+import { getCameraID, getCameraTitle } from './utils/camera.js';
+import { sideLoadHomeAssistantElements } from './utils/ha';
 
 const MENU_BUTTONS = 'buttons';
 const MENU_CAMERAS = 'cameras';
@@ -1006,12 +1000,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 })}
               </div>
               <div class="submenu">
-                ${this._renderMenuButton('frigate')}
-                ${this._renderMenuButton('live')}
-                ${this._renderMenuButton('clips')}
-                ${this._renderMenuButton('snapshots')}
-                ${this._renderMenuButton('image')}
-                ${this._renderMenuButton('download')}
+                ${this._renderMenuButton('frigate')} ${this._renderMenuButton('live')}
+                ${this._renderMenuButton('clips')} ${this._renderMenuButton('snapshots')}
+                ${this._renderMenuButton('image')} ${this._renderMenuButton('download')}
                 ${this._renderMenuButton('frigate_ui')}
                 ${this._renderMenuButton('fullscreen')}
                 ${this._renderMenuButton('timeline')}
diff --git a/src/icons/alarm-panel-icon.ts b/src/icons/alarm-panel-icon.ts
deleted file mode 100644
index 8f85affa..00000000
--- a/src/icons/alarm-panel-icon.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export const alarmPanelIcon = (state?: string) => {
-    switch (state) {
-        case "armed_away":
-            return "mdi:shield-lock";
-        case "armed_vacation":
-            return "mdi:shield-airplane";
-        case "armed_home":
-            return "mdi:shield-home";
-        case "armed_night":
-            return "mdi:shield-moon";
-        case "armed_custom_bypass":
-            return "mdi:security";
-        case "pending":
-        case "arming":
-            return "mdi:shield-sync";
-        case "triggered":
-            return "mdi:bell-ring";
-        case "disarmed":
-            return "mdi:shield-off";
-        default:
-            return "mdi:shield";
-    }
-};
-
-export const alarmPanelIconAction = (state?: string) => {
-    switch (state) {
-        case "armed_away":
-            return "mdi:shield-lock-outline";
-        case "armed_vacation":
-            return "mdi:shield-airplane-outline";
-        case "armed_home":
-            return "mdi:shield-home-outline";
-        case "armed_night":
-            return "mdi:shield-moon-outline";
-        case "armed_custom_bypass":
-            return "mdi:shield-half-full";
-        case "disarmed":
-            return "mdi:shield-off-outline";
-        default:
-            return "mdi:shield-outline";
-    }
-};
diff --git a/src/icons/binary-sensor-icon.ts b/src/icons/binary-sensor-icon.ts
deleted file mode 100644
index c97c198e..00000000
--- a/src/icons/binary-sensor-icon.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-
-export const binarySensorIcon = (state?: string, entity?: HassEntity) => {
-    const isOff = state === "off";
-    switch (entity?.attributes.device_class) {
-        case "battery":
-            return isOff ? "mdi:battery" : "mdi:battery-outline";
-        case "battery_charging":
-            return isOff ? "mdi:battery" : "mdi:battery-charging";
-        case "cold":
-            return isOff ? "mdi:thermometer" : "mdi:snowflake";
-        case "connectivity":
-            return isOff ? "mdi:close-network-outline" : "mdi:check-network-outline";
-        case "door":
-            return isOff ? "mdi:door-closed" : "mdi:door-open";
-        case "garage_door":
-            return isOff ? "mdi:garage" : "mdi:garage-open";
-        case "power":
-            return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
-        case "gas":
-        case "problem":
-        case "safety":
-        case "tamper":
-            return isOff ? "mdi:check-circle" : "mdi:alert-circle";
-        case "smoke":
-            return isOff ? "mdi:check-circle" : "mdi:smoke";
-        case "heat":
-            return isOff ? "mdi:thermometer" : "mdi:fire";
-        case "light":
-            return isOff ? "mdi:brightness5" : "mdi:brightness-7";
-        case "lock":
-            return isOff ? "mdi:lock" : "mdi:lock-open";
-        case "moisture":
-            return isOff ? "mdi:water-off" : "mdi:water";
-        case "motion":
-            return isOff ? "mdi:motion-sensor-off" : "mdi:motion-sensor";
-        case "occupancy":
-            return isOff ? "mdi:home-outline" : "mdi:home";
-        case "opening":
-            return isOff ? "mdi:square" : "mdi:square-outline";
-        case "plug":
-            return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
-        case "presence":
-            return isOff ? "mdi:home-outline" : "mdi:home";
-        case "running":
-            return isOff ? "mdi:stop" : "mdi:play";
-        case "sound":
-            return isOff ? "mdi:music-note-off" : "mdi:music-note";
-        case "update":
-            return isOff ? "mdi:package" : "mdi:package-up";
-        case "vibration":
-            return isOff ? "mdi:crop-portrait" : "mdi:vibrate";
-        case "window":
-            return isOff ? "mdi:window-closed" : "mdi:window-open";
-        default:
-            return isOff ? "mdi:radiobox-blank" : "mdi:checkbox-marked-circle";
-    }
-};
diff --git a/src/icons/cover-icon.ts b/src/icons/cover-icon.ts
deleted file mode 100644
index db3ff716..00000000
--- a/src/icons/cover-icon.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-
-export const coverIcon = (state?: string, entity?: HassEntity): string => {
-    const open = state !== "closed";
-
-    switch (entity?.attributes.device_class) {
-        case "garage":
-            switch (state) {
-                case "opening":
-                    return "mdi:arrow-up-box";
-                case "closing":
-                    return "mdi:arrow-down-box";
-                case "closed":
-                    return "mdi:garage";
-                default:
-                    return "mdi:garage-open";
-            }
-        case "gate":
-            switch (state) {
-                case "opening":
-                case "closing":
-                    return "mdi:gate-arrow-right";
-                case "closed":
-                    return "mdi:gate";
-                default:
-                    return "mdi:gate-open";
-            }
-        case "door":
-            return open ? "mdi:door-open" : "mdi:door-closed";
-        case "damper":
-            return open ? "md:circle" : "mdi:circle-slice-8";
-        case "shutter":
-            switch (state) {
-                case "opening":
-                    return "mdi:arrow-up-box";
-                case "closing":
-                    return "mdi:arrow-down-box";
-                case "closed":
-                    return "mdi:window-shutter";
-                default:
-                    return "mdi:window-shutter-open";
-            }
-        case "curtain":
-            switch (state) {
-                case "opening":
-                    return "mdi:arrow-split-vertical";
-                case "closing":
-                    return "mdi:arrow-collapse-horizontal";
-                case "closed":
-                    return "mdi:curtains-closed";
-                default:
-                    return "mdi:curtains";
-            }
-        case "blind":
-        case "shade":
-            switch (state) {
-                case "opening":
-                    return "mdi:arrow-up-box";
-                case "closing":
-                    return "mdi:arrow-down-box";
-                case "closed":
-                    return "mdi:blinds";
-                default:
-                    return "mdi:blinds-open";
-            }
-        case "window":
-            switch (state) {
-                case "opening":
-                    return "mdi:arrow-up-box";
-                case "closing":
-                    return "mdi:arrow-down-box";
-                case "closed":
-                    return "mdi:window-closed";
-                default:
-                    return "mdi:window-open";
-            }
-    }
-
-    switch (state) {
-        case "opening":
-            return "mdi:arrow-up-box";
-        case "closing":
-            return "mdi:arrow-down-box";
-        case "closed":
-            return "mdi:window-closed";
-        default:
-            return "mdi:window-open";
-    }
-};
-
-export const computeOpenIcon = (stateObj: HassEntity): string => {
-    switch (stateObj.attributes.device_class) {
-        case "awning":
-        case "curtain":
-        case "door":
-        case "gate":
-            return "mdi:arrow-expand-horizontal";
-        default:
-            return "mdi:arrow-up";
-    }
-};
-
-export const computeCloseIcon = (stateObj: HassEntity): string => {
-    switch (stateObj.attributes.device_class) {
-        case "awning":
-        case "curtain":
-        case "door":
-        case "gate":
-            return "mdi:arrow-collapse-horizontal";
-        default:
-            return "mdi:arrow-down";
-    }
-};
diff --git a/src/icons/domain-icon.ts b/src/icons/domain-icon.ts
deleted file mode 100644
index 3a6f4e25..00000000
--- a/src/icons/domain-icon.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { UpdateEntity, updateIsInstalling } from "./update";
-import { alarmPanelIcon } from "./alarm-panel-icon";
-import { binarySensorIcon } from "./binary-sensor-icon";
-import { coverIcon } from "./cover-icon";
-import { sensorIcon } from "./sensor-icon";
-
-export const DEFAULT_DOMAIN_ICON = "mdi:bookmark";
-
-const FIXED_DOMAIN_ICONS = {
-    alert: "mdi:alert",
-    air_quality: "mdi:air-filter",
-    automation: "mdi:robot",
-    calendar: "mdi:calendar",
-    camera: "mdi:video",
-    climate: "mdi:thermostat",
-    configurator: "mdi:cog",
-    conversation: "mdi:text-to-speech",
-    counter: "mdi:counter",
-    fan: "mdi:fan",
-    google_assistant: "mdi:google-assistant",
-    group: "mdi:google-circles-communities",
-    homeassistant: "mdi:home-assistant",
-    homekit: "mdi:home-automation",
-    image_processing: "mdi:image-filter-frames",
-    input_button: "mdi:gesture-tap-button",
-    input_datetime: "mdi:calendar-clock",
-    input_number: "mdi:ray-vertex",
-    input_select: "mdi:format-list-bulleted",
-    input_text: "mdi:form-textbox",
-    light: "mdi:lightbulb",
-    mailbox: "mdi:mailbox",
-    notify: "mdi:comment-alert",
-    number: "mdi:ray-vertex",
-    persistent_notification: "mdi:bell",
-    person: "mdi:account",
-    plant: "mdi:flower",
-    proximity: "mdi:apple-safari",
-    remote: "mdi:remote",
-    scene: "mdi:palette",
-    script: "mdi:script-text",
-    select: "mdi:format-list-bulleted",
-    sensor: "mdi:eye",
-    siren: "mdi:bullhorn",
-    simple_alarm: "mdi:bell",
-    sun: "mdi:white-balance-sunny",
-    timer: "mdi:timer-outline",
-    updater: "mdi:cloud-upload",
-    vacuum: "mdi:robot-vacuum",
-    water_heater: "mdi:thermometer",
-    weather: "mdi:weather-cloudy",
-    zone: "mdi:map-marker-radius",
-};
-
-export function domainIcon(domain: string, entity?: HassEntity, state?: string): string {
-    switch (domain) {
-        case "alarm_control_panel":
-            return alarmPanelIcon(state);
-
-        case "binary_sensor":
-            return binarySensorIcon(state, entity);
-
-        case "button":
-            switch (entity?.attributes.device_class) {
-                case "restart":
-                    return "mdi:restart";
-                case "update":
-                    return "mdi:package-up";
-                default:
-                    return "mdi:gesture-tap-button";
-            }
-
-        case "cover":
-            return coverIcon(state, entity);
-
-        case "device_tracker":
-            if (entity?.attributes.source_type === "router") {
-                return state === "home" ? "mdi:lan-connect" : "mdi:lan-disconnect";
-            }
-            if (["bluetooth", "bluetooth_le"].includes(entity?.attributes.source_type)) {
-                return state === "home" ? "mdi:bluetooth-connect" : "mdi:bluetooth";
-            }
-            return state === "not_home" ? "mdi:account-arrow-right" : "mdi:account";
-
-        case "humidifier":
-            return state && state === "off" ? "mdi:air-humidifier-off" : "mdi:air-humidifier";
-
-        case "input_boolean":
-            return state === "on" ? "mdi:check-circle-outline" : "mdi:close-circle-outline";
-
-        case "lock":
-            switch (state) {
-                case "unlocked":
-                    return "mdi:lock-open";
-                case "jammed":
-                    return "mdi:lock-alert";
-                case "locking":
-                case "unlocking":
-                    return "mdi:lock-clock";
-                default:
-                    return "mdi:lock";
-            }
-
-        case "media_player":
-            return state === "playing" ? "mdi:cast-connected" : "mdi:cast";
-
-        case "switch":
-            switch (entity?.attributes.device_class) {
-                case "outlet":
-                    return state === "on" ? "mdi:power-plug" : "mdi:power-plug-off";
-                case "switch":
-                    return state === "on" ? "mdi:toggle-switch" : "mdi:toggle-switch-off";
-                default:
-                    return "mdi:flash";
-            }
-
-        case "zwave":
-            switch (state) {
-                case "dead":
-                    return "mdi:emoticon-dead";
-                case "sleeping":
-                    return "mdi:sleep";
-                case "initializing":
-                    return "mdi:timer-sand";
-                default:
-                    return "mdi:z-wave";
-            }
-
-        case "sensor": {
-            const icon = sensorIcon(entity);
-            if (icon) {
-                return icon;
-            }
-
-            break;
-        }
-
-        case "input_datetime":
-            if (!entity?.attributes.has_date) {
-                return "mdi:clock";
-            }
-            if (!entity.attributes.has_time) {
-                return "mdi:calendar";
-            }
-            break;
-
-        case "sun":
-            return entity?.state === "above_horizon"
-                ? FIXED_DOMAIN_ICONS[domain]
-                : "mdi:weather-night";
-
-        case "update":
-            return entity?.state === "on"
-                ? updateIsInstalling(entity as UpdateEntity)
-                    ? "mdi:package-down"
-                    : "mdi:package-up"
-                : "mdi:package";
-    }
-
-    if (domain in FIXED_DOMAIN_ICONS) {
-        return FIXED_DOMAIN_ICONS[domain];
-    }
-
-    console.warn(`Unable to find icon for domain ${domain}`);
-    return DEFAULT_DOMAIN_ICON;
-}
diff --git a/src/icons/sensor-icon.ts b/src/icons/sensor-icon.ts
deleted file mode 100644
index b8673522..00000000
--- a/src/icons/sensor-icon.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { UNIT_C, UNIT_F } from "custom-card-helpers";
-import { HassEntity } from "home-assistant-js-websocket";
-
-const FIXED_DEVICE_CLASS_ICONS = {
-    apparent_power: "mdi:flash",
-    aqi: "mdi:air-filter",
-    carbon_dioxide: "mdi:molecule-co2",
-    carbon_monoxide: "mdi:molecule-co",
-    current: "mdi:current-ac",
-    date: "mdi:calendar",
-    energy: "mdi:lightning-bolt",
-    frequency: "mdi:sine-wave",
-    gas: "mdi:gas-cylinder",
-    humidity: "mdi:water-percent",
-    illuminance: "mdi:brightness-5",
-    monetary: "mdi:cash",
-    nitrogen_dioxide: "mdi:molecule",
-    nitrogen_monoxide: "mdi:molecule",
-    nitrous_oxide: "mdi:molecule",
-    ozone: "mdi:molecule",
-    pm1: "mdi:molecule",
-    pm10: "mdi:molecule",
-    pm25: "mdi:molecule",
-    power: "mdi:flash",
-    power_factor: "mdi:angle-acute",
-    pressure: "mdi:gauge",
-    reactive_power: "mdi:flash",
-    signal_strength: "mdi:wifi",
-    sulphur_dioxide: "mdi:molecule",
-    temperature: "mdi:thermometer",
-    timestamp: "mdi:clock",
-    volatile_organic_compounds: "mdi:molecule",
-    voltage: "mdi:sine-wave",
-};
-
-const SENSOR_DEVICE_CLASS_BATTERY = "battery";
-
-const BATTERY_ICONS = {
-    10: "mdi:battery-10",
-    20: "mdi:battery-20",
-    30: "mdi:battery-30",
-    40: "mdi:battery-40",
-    50: "mdi:battery-50",
-    60: "mdi:battery-60",
-    70: "mdi:battery-70",
-    80: "mdi:battery-80",
-    90: "mdi:battery-90",
-    100: "mdi:battery",
-};
-const BATTERY_CHARGING_ICONS = {
-    10: "mdi:battery-charging-10",
-    20: "mdi:battery-charging-20",
-    30: "mdi:battery-charging-30",
-    40: "mdi:battery-charging-40",
-    50: "mdi:battery-charging-50",
-    60: "mdi:battery-charging-60",
-    70: "mdi:battery-charging-70",
-    80: "mdi:battery-charging-80",
-    90: "mdi:battery-charging-90",
-    100: "mdi:battery-charging",
-};
-
-const batteryStateIcon = (batteryEntity: HassEntity, batteryChargingEntity?: HassEntity) => {
-    const battery = batteryEntity.state;
-    const batteryCharging = batteryChargingEntity?.state === "on";
-
-    return batteryIcon(battery, batteryCharging);
-};
-
-export const batteryIcon = (batteryState: number | string, batteryCharging?: boolean) => {
-    const batteryValue = Number(batteryState);
-    if (isNaN(batteryValue)) {
-        if (batteryState === "off") {
-            return "mdi:battery";
-        }
-        if (batteryState === "on") {
-            return "mdi:battery-alert";
-        }
-        return "mdi:battery-unknown";
-    }
-
-    const batteryRound = Math.round(batteryValue / 10) * 10;
-    if (batteryCharging && batteryValue >= 10) {
-        return BATTERY_CHARGING_ICONS[batteryRound];
-    }
-    if (batteryCharging) {
-        return "mdi:battery-charging-outline";
-    }
-    if (batteryValue <= 5) {
-        return "mdi:battery-alert-variant-outline";
-    }
-    return BATTERY_ICONS[batteryRound];
-};
-
-export const sensorIcon = (entity?: HassEntity): string | undefined => {
-    const dclass = entity?.attributes.device_class;
-
-    if (dclass && dclass in FIXED_DEVICE_CLASS_ICONS) {
-        return FIXED_DEVICE_CLASS_ICONS[dclass];
-    }
-
-    if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
-        return entity ? batteryStateIcon(entity) : "mdi:battery";
-    }
-
-    const unit = entity?.attributes.unit_of_measurement;
-    if (unit === UNIT_C || unit === UNIT_F) {
-        return "mdi:thermometer";
-    }
-
-    return undefined;
-};
diff --git a/src/icons/state-icon.ts b/src/icons/state-icon.ts
deleted file mode 100644
index 44d8e8da..00000000
--- a/src/icons/state-icon.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { computeDomain } from "custom-card-helpers";
-import { HassEntity } from "home-assistant-js-websocket";
-import { DEFAULT_DOMAIN_ICON, domainIcon } from "./domain-icon";
-
-export function stateIcon(entity?: HassEntity | null): string {
-    if (!entity) {
-        return DEFAULT_DOMAIN_ICON;
-    }
-    if (entity.attributes.icon) {
-        return entity.attributes.icon;
-    }
-
-    const domain = computeDomain(entity.entity_id);
-
-    const state = entity.state;
-
-    return domainIcon(domain, entity, state);
-}
diff --git a/src/icons/update.ts b/src/icons/update.ts
deleted file mode 100644
index 4fa2d460..00000000
--- a/src/icons/update.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { HassEntity, HassEntityAttributeBase, HassEntityBase } from "home-assistant-js-websocket";
-
-export const UPDATE_SUPPORT_INSTALL = 1;
-export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
-export const UPDATE_SUPPORT_PROGRESS = 4;
-export const UPDATE_SUPPORT_BACKUP = 8;
-export const UPDATE_SUPPORT_RELEASE_NOTES = 16;
-
-interface UpdateEntityAttributes extends HassEntityAttributeBase {
-    auto_update: boolean | null;
-    installed_version: string | null;
-    in_progress: boolean | number;
-    latest_version: string | null;
-    release_summary: string | null;
-    release_url: string | null;
-    skipped_version: string | null;
-    title: string | null;
-}
-
-export interface UpdateEntity extends HassEntityBase {
-    attributes: UpdateEntityAttributes;
-}
-
-export const supportsFeature = (stateObj: HassEntity, feature: number): boolean =>
-    ((stateObj.attributes.supported_features ?? 0) & feature) !== 0;
-
-export const updateUsesProgress = (entity: UpdateEntity): boolean =>
-    supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
-    typeof entity.attributes.in_progress === "number";
-
-export const updateIsInstalling = (entity: UpdateEntity): boolean =>
-    updateUsesProgress(entity) || !!entity.attributes.in_progress;
diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index 68a4ddd9..0d41744f 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/src/patches/ha-camera-stream.ts
@@ -9,12 +9,11 @@
 // available as compilation time.
 // ====================================================================
 
-import { TemplateResult, css, html } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
-
 import { FrigateCardMediaPlayer } from '../types.js';
-import { dispatchMediaShowEvent } from '../common.js';
+import { dispatchMediaShowEvent } from '../utils/media-info.js';
 
 customElements.whenDefined('ha-camera-stream').then(() => {
   // ========================================================================================
diff --git a/src/patches/ha-hls-player.ts b/src/patches/ha-hls-player.ts
index 6c83817f..693acfb3 100644
--- a/src/patches/ha-hls-player.ts
+++ b/src/patches/ha-hls-player.ts
@@ -9,11 +9,11 @@
 // available as compilation time.
 // ====================================================================
 
-import { TemplateResult, css, html } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
-
-import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js';
+import { dispatchErrorMessageEvent } from '../components/message.js';
+import { dispatchMediaShowEvent } from '../utils/media-info.js';
 
 customElements.whenDefined('ha-hls-player').then(() => {
   @customElement('frigate-card-ha-hls-player')
diff --git a/src/patches/ha-web-rtc-player.ts b/src/patches/ha-web-rtc-player.ts
index be6c16ef..ecafbc30 100644
--- a/src/patches/ha-web-rtc-player.ts
+++ b/src/patches/ha-web-rtc-player.ts
@@ -9,11 +9,11 @@
 // available as compilation time.
 // ====================================================================
 
-import { TemplateResult, html } from 'lit';
+import { html, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
-
-import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js';
+import { dispatchErrorMessageEvent } from '../components/message.js';
+import { dispatchMediaShowEvent } from '../utils/media-info.js';
 
 customElements.whenDefined('ha-web-rtc-player').then(() => {
   @customElement('frigate-card-ha-web-rtc-player')
diff --git a/src/resolved-media.ts b/src/resolved-media.ts
deleted file mode 100644
index afd3e2ac..00000000
--- a/src/resolved-media.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { HomeAssistant } from 'custom-card-helpers';
-import { homeAssistantWSRequest } from './common.js';
-import {
-  FrigateBrowseMediaSource,
-  ResolvedMedia,
-  resolvedMediaSchema,
-} from './types.js';
-import QuickLRU from 'quick-lru';
-
-// It's important the cache size be at least as large as the largest likely
-// media query or media items will from a given query will be evicted for other
-// items in the same query (which would result in only partial results being
-// returned to the user).
-// Note: Each entry is about 400 bytes. 
-
-const RESOLVED_MEDIA_CACHE_SIZE = 1000; 
-
-export class ResolvedMediaCache {
-  protected _cache: QuickLRU<string, ResolvedMedia>;
-
-  constructor() {
-    this._cache = new QuickLRU({maxSize: RESOLVED_MEDIA_CACHE_SIZE});
-  }
-
-  public has(id: string): boolean {
-    return this._cache.has(id);
-  }
-
-  public get(id: string): ResolvedMedia | undefined {
-    return this._cache.get(id);
-  }
-
-  public set(id: string, resolvedMedia: ResolvedMedia): void {
-    this._cache.set(id, resolvedMedia);
-  }
-}
-
-export class ResolvedMediaUtil {
-  static async resolveMedia(
-    hass: HomeAssistant,
-    mediaSource?: FrigateBrowseMediaSource,
-    cache?: ResolvedMediaCache,
-  ): Promise<ResolvedMedia | null> {
-    if (!mediaSource) {
-      return null;
-    }
-    const cachedValue = cache ? cache.get(mediaSource.media_content_id) : undefined;
-    if (cachedValue) {
-      return cachedValue;
-    }
-    const request = {
-      type: 'media_source/resolve_media',
-      media_content_id: mediaSource.media_content_id,
-    };
-    const resolvedMedia = await homeAssistantWSRequest(
-      hass,
-      resolvedMediaSchema,
-      request,
-    );
-    if (cache && resolvedMedia) {
-      cache.set(mediaSource.media_content_id, resolvedMedia);
-    }
-    return resolvedMedia;
-  }
-}
diff --git a/src/types.ts b/src/types.ts
index 67873814..704b0e44 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,3 @@
-import { StyleInfo } from 'lit/directives/style-map.js';
 import {
   CallServiceActionConfig,
   ConfirmationRestrictionConfig,
@@ -12,11 +11,11 @@ import {
   NoActionConfig,
   Themes,
   ToggleActionConfig,
-  UrlActionConfig,
+  UrlActionConfig
 } from 'custom-card-helpers';
+import { StyleInfo } from 'lit/directives/style-map.js';
 import { z } from 'zod';
-
-import { deepRemoveDefaults } from './zod-util';
+import { deepRemoveDefaults } from './utils/zod.js';
 
 // The min allowed size of buttons.
 export const BUTTON_SIZE_MIN = 20;
@@ -1156,7 +1155,7 @@ export interface FrigateCardMediaPlayer {
 export interface CardHelpers {
   createCardElement(config: LovelaceCardConfig): Promise<{
     constructor: {
-      getConfigElement(): HTMLElement
+      getConfigElement(): HTMLElement;
     };
   }>;
 }
diff --git a/src/utils/action.ts b/src/utils/action.ts
new file mode 100644
index 00000000..e7b6d5f5
--- /dev/null
+++ b/src/utils/action.ts
@@ -0,0 +1,185 @@
+import {
+    ActionConfig,
+    handleActionConfig,
+    hasAction,
+    HomeAssistant
+} from 'custom-card-helpers';
+import {
+    Actions,
+    ActionsConfig,
+    ActionType,
+    FrigateCardAction,
+    FrigateCardCustomAction,
+    frigateCardCustomActionSchema
+} from '../types.js';
+
+/**
+ * Convert a generic Action to a FrigateCardCustomAction if it parses correctly.
+ * @param action The generic action configuration.
+ * @returns A FrigateCardCustomAction or null if it cannot be converted.
+ */
+export function convertActionToFrigateCardCustomAction(
+  action: ActionType | null,
+): FrigateCardCustomAction | null {
+  if (!action) {
+    return null;
+  }
+  // Parse a custom event as other things could generate ll-custom events that
+  // are not related to Frigate Card.
+  const parseResult = frigateCardCustomActionSchema.safeParse(action);
+  return parseResult.success ? parseResult.data : null;
+}
+
+/**
+ * Create a Frigate card custom action.
+ * @param action The Frigate card action string (e.g. 'fullscreen')
+ * @returns A FrigateCardCustomAction for that action string or null.
+ */
+export function createFrigateCardCustomAction(
+  action: FrigateCardAction,
+  args?: {
+    camera?: string;
+    media_player?: string;
+    media_player_action?: 'play' | 'stop';
+  },
+): FrigateCardCustomAction | null {
+  if (action === 'camera_select') {
+    if (!args?.camera) {
+      return null;
+    }
+    return {
+      action: 'fire-dom-event',
+      frigate_card_action: action,
+      camera: args.camera as string,
+    };
+  }
+  if (action === 'media_player') {
+    if (!args?.media_player || !args.media_player_action) {
+      return null;
+    }
+    return {
+      action: 'fire-dom-event',
+      frigate_card_action: action,
+      media_player: args.media_player,
+      media_player_action: args.media_player_action,
+    };
+  }
+  return {
+    action: 'fire-dom-event',
+    frigate_card_action: action,
+  };
+}
+
+/**
+ * Get an action configuration given a config and an interaction (e.g. 'tap').
+ * @param interaction The interaction: `tap`, `hold` or `double_tap`
+ * @param config The configuration containing multiple actions.
+ * @returns The relevant action configuration or null if none found.
+ */
+export function getActionConfigGivenAction(
+  interaction?: string,
+  config?: Actions,
+): ActionType | ActionType[] | undefined {
+  if (!interaction || !config) {
+    return undefined;
+  }
+  if (interaction == 'tap' && config.tap_action) {
+    return config.tap_action;
+  } else if (interaction == 'hold' && config.hold_action) {
+    return config.hold_action;
+  } else if (interaction == 'double_tap' && config.double_tap_action) {
+    return config.double_tap_action;
+  } else if (interaction == 'end_tap' && config.end_tap_action) {
+    return config.end_tap_action;
+  } else if (interaction == 'start_tap' && config.start_tap_action) {
+    return config.start_tap_action;
+  }
+  return undefined;
+}
+
+/**
+ * Frigate card custom version of handleAction
+ * (https://github.com/custom-cards/custom-card-helpers/blob/master/src/handle-action.ts)
+ * that handles the custom action events the card supports.
+ * @param node The node that fired the event.
+ * @param hass The Home Assistant object.
+ * @param config The multi-action configuration.
+ * @param action The action string (e.g. 'hold')
+ * @returns Whether or not an action was executed.
+ */
+export const frigateCardHandleAction = (
+  node: HTMLElement,
+  hass: HomeAssistant,
+  config: ActionsConfig,
+  action: string,
+): boolean => {
+  return frigateCardHandleActionConfig(
+    node,
+    hass,
+    config,
+    action,
+    getActionConfigGivenAction(action, config),
+  );
+};
+
+/**
+ * Handle an ActionConfig or array of ActionConfigs.
+ * @param node The node that fired the event.
+ * @param hass The Home Assistant object.
+ * @param actionConfig A single action config, array of action configs or
+ * undefined for the default action config for 'tap'.
+ * @param action The action string (e.g. 'hold')
+ * @returns Whether or not an action was executed.
+ */
+export const frigateCardHandleActionConfig = (
+  node: HTMLElement,
+  hass: HomeAssistant,
+  config: {
+    camera_image?: string;
+    entity?: string;
+  },
+  action: string,
+  actionConfig: ActionType | ActionType[] | undefined,
+): boolean => {
+  // Only allow a tap action to use a default non-config (the more-info config).
+  if (actionConfig || action == 'tap') {
+    // ActionConfig vs ActionType:
+    // There is a slight typing (but not functional) difference between
+    // ActionType in this card and ActionConfig in `custom-card-helpers`. See
+    // `ExtendedConfirmationRestrictionConfig` in `types.ts` for the source and
+    // reason behind this difference.
+    if (Array.isArray(actionConfig)) {
+      actionConfig.forEach((action) =>
+        handleActionConfig(node, hass, config, action as ActionConfig | undefined),
+      );
+    } else {
+      handleActionConfig(node, hass, config, actionConfig as ActionConfig | undefined);
+    }
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Determine if an action config has a real action. A modified version of
+ * custom-card-helpers hasAction to also work with arrays of action configs.
+ * @param config The action config in question.
+ * @returns `true` if there's a real action defined, `false` otherwise.
+ */
+export const frigateCardHasAction = (
+  config?: ActionType | ActionType[] | undefined,
+): boolean => {
+  // See note above on 'ActionConfig vs ActionType' for why this cast is
+  // necessary and harmless.
+  if (Array.isArray(config)) {
+    return !!config.find((item) => hasAction(item as ActionConfig | undefined));
+  }
+  return hasAction(config as ActionConfig | undefined);
+};
+
+/**
+ * Stop an event from activating card wide actions.
+ */
+export const stopEventFromActivatingCardWideActions = (ev: Event): void => {
+  ev.stopPropagation();
+};
diff --git a/src/utils/basic.ts b/src/utils/basic.ts
new file mode 100644
index 00000000..6f1fa47c
--- /dev/null
+++ b/src/utils/basic.ts
@@ -0,0 +1,62 @@
+import { isEqual } from 'lodash-es';
+
+/**
+ * Dispatch a Frigate Card event.
+ * @param element The element to send the event.
+ * @param name The name of the Frigate card event to send.
+ * @param detail An optional detail object to attach.
+ */
+export function dispatchFrigateCardEvent<T>(
+  target: EventTarget,
+  name: string,
+  detail?: T,
+): void {
+  target.dispatchEvent(
+    new CustomEvent<T>(`frigate-card:${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: detail,
+    }),
+  );
+}
+
+/**
+ * Prettify a title by converting '_' to spaces and capitalizing words.
+ * @param input The input Frigate (camera/label/zone) name.
+ * @returns A prettified name.
+ */
+export function prettifyTitle(input?: string): string | undefined {
+  if (!input) {
+    return undefined;
+  }
+  const words = input.split(/[_\s]+/);
+  return words
+    .map((word) => {
+      return word[0].toUpperCase() + word.substring(1);
+    })
+    .join(' ');
+}
+
+/**
+ * Move an element within an array.
+ * @param target Target array.
+ * @param from From index.
+ * @param to To index.
+ */
+export function arrayMove(target: unknown[], from: number, to: number): void {
+  const element = target[from];
+  target.splice(from, 1);
+  target.splice(to, 0, element);
+}
+
+/**
+ * Determine if the contents of the n(ew) and o(ld) values have changed. For use
+ * in lit web components that may have a value that changes address but not
+ * contents -- and for which a re-render is expensive/jarring.
+ * @param n The new value.
+ * @param o The old value.
+ * @returns `true` is the contents have changed.
+ */
+export function contentsChanged(n: unknown, o: unknown): boolean {
+  return !isEqual(n, o);
+}
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
new file mode 100644
index 00000000..72756216
--- /dev/null
+++ b/src/utils/camera.ts
@@ -0,0 +1,66 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { CameraConfig, RawFrigateCardConfig } from '../types.js';
+import { prettifyTitle } from './basic.js';
+import { getEntityIcon, getEntityTitle } from './ha';
+
+/**
+ * Get a camera id.
+ * @param config The camera config (either parsed or raw).
+ * @returns A camera id.
+ */
+export function getCameraID(
+  config?: CameraConfig | RawFrigateCardConfig | null,
+): string {
+  return (
+    (typeof config?.id === 'string' && config.id) ||
+    (typeof config?.camera_entity === 'string' && config.camera_entity) ||
+    (typeof config?.webrtc_card === 'object' &&
+      config.webrtc_card &&
+      typeof config.webrtc_card['entity'] === 'string' &&
+      config.webrtc_card['entity']) ||
+    (typeof config?.camera_name === 'string' && config.camera_name) ||
+    ''
+  );
+}
+
+/**
+ * Get a camera text title.
+ * @param hass The Home Assistant object.
+ * @param config The camera config (either parsed or raw).
+ * @returns A title string.
+ */
+export function getCameraTitle(
+  hass?: HomeAssistant,
+  config?: CameraConfig | RawFrigateCardConfig | null,
+): string {
+  // Attempt to render a recognizable name for the camera,
+  // starting with the most likely to be useful and working our
+  // ways towards the least useful. Extra type checking here since this is also
+  // used on raw configuration in the editor.
+  return (
+    (typeof config?.title === 'string' && config.title) ||
+    (typeof config?.camera_entity === 'string'
+      ? getEntityTitle(hass, config.camera_entity)
+      : '') ||
+    (typeof config?.webrtc_card === 'object' &&
+      config.webrtc_card &&
+      typeof config.webrtc_card['entity'] === 'string' &&
+      config.webrtc_card['entity']) ||
+    (typeof config?.camera_name === 'string' ? prettifyTitle(config.camera_name) : '') ||
+    (typeof config?.id === 'string' && config.id) ||
+    ''
+  );
+}
+
+/**
+ * Get a camera icon.
+ * @param hass The Home Assistant object.
+ * @param config The camera config.
+ * @returns An icon string.
+ */
+export function getCameraIcon(
+  hass?: HomeAssistant,
+  config?: CameraConfig | null,
+): string {
+  return config?.icon || getEntityIcon(hass, config?.camera_entity) || 'mdi:video';
+}
diff --git a/src/utils/ha/browse-media.ts b/src/utils/ha/browse-media.ts
new file mode 100644
index 00000000..743fe125
--- /dev/null
+++ b/src/utils/ha/browse-media.ts
@@ -0,0 +1,438 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import {
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds,
+  fromUnixTime
+} from 'date-fns';
+import { homeAssistantWSRequest } from '.';
+import {
+  dispatchErrorMessageEvent,
+  dispatchMessageEvent
+} from '../../components/message.js';
+import { localize } from '../../localize/localize.js';
+import {
+  BrowseMediaQueryParameters,
+  CameraConfig,
+  FrigateBrowseMediaSource,
+  frigateBrowseMediaSourceSchema, FrigateEvent, MEDIA_CLASS_PLAYLIST,
+  MEDIA_TYPE_PLAYLIST
+} from '../../types.js';
+import { View } from '../../view.js';
+import { getCameraTitle } from '../camera.js';
+
+/**
+ * Return the Frigate event_id given a FrigateBrowseMediaSource object.
+ * @param media The event to get the id from.
+ * @returns The `event_id` or `null` if not successfully parsed.
+ */
+export const getEventID = (media: FrigateBrowseMediaSource): string | null => {
+  return media.frigate?.event.id ?? null;
+};
+
+/**
+ * Return the event start time given a FrigateBrowseMediaSource object.
+ * @param browseMedia The media object to get the start time from.
+ * @returns The start time in unix/epoch time, or null if it cannot be determined.
+ */
+export const getEventStartTime = (media: FrigateBrowseMediaSource): number | null => {
+  return media.frigate?.event.start_time ?? null;
+};
+
+/**
+ * Determine if a FrigateBrowseMediaSource object is truly a media item (vs a folder).
+ * @param media The media object.
+ * @returns `true` if it's truly a media item, `false` otherwise.
+ */
+export const isTrueMedia = (media?: FrigateBrowseMediaSource): boolean => {
+  return !!media && !media.can_expand;
+};
+
+/**
+ * From a FrigateBrowseMediaSource item extract the first true media item from the
+ * children (i.e. a clip/snapshot, not a folder).
+ * @param media The media object with children.
+ * @returns The first true media item found.
+ */
+export const getFirstTrueMediaChildIndex = (
+  media: FrigateBrowseMediaSource | null,
+): number | null => {
+  if (!media || !media.children) {
+    return null;
+  }
+  const index = media.children.findIndex((child) => isTrueMedia(child));
+  return index >= 0 ? index : null;
+};
+
+/**
+ * Browse Frigate media with a media content id. May throw.
+ * @param hass The HomeAssistant object.
+ * @param media_content_id The media content id to browse.
+ * @returns A FrigateBrowseMediaSource object or null on malformed.
+ */
+export const browseMedia = async (
+  hass: HomeAssistant,
+  media_content_id: string,
+): Promise<FrigateBrowseMediaSource> => {
+  const request = {
+    type: 'media_source/browse_media',
+    media_content_id: media_content_id,
+  };
+  return await homeAssistantWSRequest(hass, frigateBrowseMediaSourceSchema, request);
+};
+
+/**
+ * Browse Frigate media with a media query. May throw.
+ * @param hass The HomeAssistant object.
+ * @param params The search parameters to use to search for media.
+ * @returns A FrigateBrowseMediaSource object or null on malformed.
+ */
+export const browseMediaQuery = async (
+  hass: HomeAssistant,
+  params: BrowseMediaQueryParameters,
+): Promise<FrigateBrowseMediaSource> => {
+  return browseMedia(
+    hass,
+    // Defined in:
+    // https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
+    [
+      'media-source://frigate',
+      params.clientId,
+      'event-search',
+      params.mediaType,
+
+      // If the name field ends in '.all' the integration will return up to 10K events.
+      params.unlimited ? '.all' : '',
+      params.after ? String(Math.floor(params.after)) : '',
+      params.before ? String(Math.ceil(params.before)) : '',
+      params.cameraName,
+      params.label,
+      params.zone,
+    ].join('/'),
+  );
+};
+
+/**
+ * Browse multiple Frigate media queries. May throw.
+ * @param hass The HomeAssistant object.
+ * @param params An array of search parameters to use to search for media.
+ * @returns A map of FrigateBrowseMediaSource object or null on malformed.
+ */
+export const multipleBrowseMediaQuery = async (
+  hass: HomeAssistant,
+  params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
+): Promise<Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>> => {
+  params = Array.isArray(params) ? params : [params];
+  const output: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource> = new Map();
+  await Promise.all(
+    params.map(async (param: BrowseMediaQueryParameters): Promise<void> => {
+      output.set(param, await browseMediaQuery(hass, param));
+    }),
+  );
+  return output;
+};
+
+/**
+ * Browse multiple Frigate media queries, then merged them. May throw.
+ * @param hass The HomeAssistant object.
+ * @param params An array of search parameters to use to search for media.
+ * @returns A single FrigateBrowseMediaSource object or null on malformed.
+ */
+export const multipleBrowseMediaQueryMerged = async (
+  hass: HomeAssistant,
+  params: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
+): Promise<FrigateBrowseMediaSource> => {
+  return mergeFrigateBrowseMediaSources(await multipleBrowseMediaQuery(hass, params));
+};
+
+/**
+ * Merge multiple FrigateBrowseMediaSource into a single. Note that this may
+ * use information from the query to differentiate results that may otherwise
+ * be identical.
+ * @param input A map of query -> result.
+ * @returns A single FrigateBrowseMediaSource object.
+ */
+export const mergeFrigateBrowseMediaSources = async (
+  input: Map<BrowseMediaQueryParameters, FrigateBrowseMediaSource>,
+): Promise<FrigateBrowseMediaSource> => {
+  const children: FrigateBrowseMediaSource[] = [];
+
+  for (const [query, result] of input.entries()) {
+    for (const child of result.children || []) {
+      if (isTrueMedia(child)) {
+        children.push(child);
+      } else {
+        // If there are multiple inputs, separate the folder names with the
+        // query title (if available).
+        if (query.title && input.size > 1) {
+          children.push({ ...child, title: `[${query.title}] ${child.title}` });
+        } else {
+          children.push(child);
+        }
+      }
+    }
+  }
+
+  const eventSort = (
+    a: FrigateBrowseMediaSource,
+    b: FrigateBrowseMediaSource,
+  ): number => {
+    if (
+      !a.frigate?.event ||
+      (b.frigate?.event && b.frigate.event.start_time > a.frigate.event.start_time)
+    ) {
+      return 1;
+    }
+
+    if (
+      !b.frigate?.event ||
+      (a.frigate?.event && b.frigate.event.start_time < a.frigate.event.start_time)
+    ) {
+      return -1;
+    }
+    return 0;
+  };
+
+  return createEventParentForChildren('Merged events', children.sort(eventSort));
+};
+
+/**
+ * Get the parameters to search for media.
+ * @returns A BrowseMediaQueryParameters object.
+ */
+export const getBrowseMediaQueryParameters = (
+  hass: HomeAssistant,
+  cameraID: string,
+  cameraConfig?: CameraConfig,
+  overrides?: Partial<BrowseMediaQueryParameters>,
+): BrowseMediaQueryParameters | null => {
+  if (!cameraConfig || !cameraConfig.camera_name) {
+    return null;
+  }
+  return {
+    clientId: cameraConfig.client_id,
+    cameraName: cameraConfig.camera_name,
+    label: cameraConfig.label,
+    zone: cameraConfig.zone,
+    title: getCameraTitle(hass, cameraConfig),
+    cameraID: cameraID,
+    ...overrides,
+  };
+};
+
+/**
+ * Apply overrides to multiple query parameters.
+ * @param parameters An array of query parameters.
+ * @param overrides The overrides to apply.
+ * @returns The override query parameters.
+ */
+export const overrideMultiBrowseMediaQueryParameters = (
+  parameters: BrowseMediaQueryParameters[],
+  overrides: Partial<BrowseMediaQueryParameters>,
+): BrowseMediaQueryParameters[] => {
+  const output: BrowseMediaQueryParameters[] = [];
+  parameters.forEach((param) => {
+    output.push({ ...param, ...overrides });
+  });
+  return output;
+};
+
+/**
+ * Get BrowseMediaQueryParameters for a camera (including its dependencies).
+ * @param hass Home Assistant object.
+ * @param cameras Cameras map.
+ * @param camera Name of the current camera.
+ * @param mediaType Optional media type to include in the parameters.
+ * @returns An array of query parameters.
+ */
+export const getFullDependentBrowseMediaQueryParameters = (
+  hass: HomeAssistant,
+  cameras: Map<string, CameraConfig>,
+  camera: string,
+  mediaType?: 'clips' | 'snapshots',
+): BrowseMediaQueryParameters[] | null => {
+  const cameraIDs: Set<string> = new Set();
+  const getDependentCameras = (camera: string): void => {
+    const cameraConfig = cameras.get(camera);
+    if (cameraConfig) {
+      cameraIDs.add(camera);
+      for (const eventCameraID of cameraConfig.dependent_cameras || []) {
+        if (!cameraIDs.has(eventCameraID)) {
+          getDependentCameras(eventCameraID);
+        }
+      }
+    }
+  };
+  getDependentCameras(camera);
+
+  const params: BrowseMediaQueryParameters[] = [];
+  for (const cameraID of cameraIDs) {
+    const param = getBrowseMediaQueryParameters(
+      hass,
+      cameraID,
+      cameras.get(cameraID),
+      mediaType ? { mediaType: mediaType } : {},
+    );
+    // Fail on a single bad camera, as it's almost certainly a user error that
+    // should be fixed rather than hidden.
+    if (!param) {
+      return null;
+    }
+    params.push(param);
+  }
+  return params.length ? params : null;
+};
+
+/**
+ * Get BrowseMediaQueryParameters for a camera (including its dependencies) or dispatch an error.
+ * @param element The element from which to dispatch the error.
+ * @param hass Home Assistant object.
+ * @param cameras Cameras map.
+ * @param camera Name of the current camera.
+ * @param mediaType Optional media type to include in the parameters.
+ * @returns An array of query parameters.
+ */
+export const getFullDependentBrowseMediaQueryParametersOrDispatchError = (
+  element: HTMLElement,
+  hass: HomeAssistant,
+  cameras: Map<string, CameraConfig>,
+  camera: string,
+  mediaType?: 'clips' | 'snapshots',
+): BrowseMediaQueryParameters[] | null => {
+  const params = getFullDependentBrowseMediaQueryParameters(
+    hass,
+    cameras,
+    camera,
+    mediaType,
+  );
+  if (!params) {
+    dispatchErrorMessageEvent(
+      element,
+      localize('error.no_camera_name'),
+      cameras.get(camera),
+    );
+    return null;
+  }
+  return params;
+};
+
+/**
+ * Fetch the latest media and dispatch a change view event to reflect the
+ * results. If no media is found a suitable message event will be triggered
+ * instead.
+ * @param element The HTMLElement to dispatch events from.
+ * @param hass The Home Assistant object.
+ * @param view The current view to evolve.
+ * @param browseMediaQueryParameters The media parameters to query with.
+ * @returns
+ */
+export const fetchLatestMediaAndDispatchViewChange = async (
+  element: HTMLElement,
+  hass: HomeAssistant,
+  view: Readonly<View>,
+  browseMediaQueryParameters: BrowseMediaQueryParameters | BrowseMediaQueryParameters[],
+): Promise<void> => {
+  let parent: FrigateBrowseMediaSource | null;
+  try {
+    parent = await multipleBrowseMediaQueryMerged(hass, browseMediaQueryParameters);
+  } catch (e) {
+    return dispatchErrorMessageEvent(element, (e as Error).message);
+  }
+  const childIndex = getFirstTrueMediaChildIndex(parent);
+  if (!parent || !parent.children || childIndex == null) {
+    return dispatchMessageEvent(
+      element,
+      view.isClipRelatedView()
+        ? localize('common.no_clip')
+        : localize('common.no_snapshot'),
+      view.isClipRelatedView() ? 'mdi:filmstrip-off' : 'mdi:camera-off',
+    );
+  }
+
+  view
+    .evolve({
+      target: parent,
+      childIndex: childIndex,
+    })
+    .dispatchChangeEvent(element);
+};
+
+/**
+ * Fetch the media of a child FrigateBrowseMediaSource object and dispatch a change
+ * view event to reflect the results.
+ * @param node The HTMLElement to dispatch events from.
+ * @param hass The Home Assistant object.
+ * @param view The current view to evolve.
+ * @param child The FrigateBrowseMediaSource child to query for.
+ * @returns
+ */
+export const fetchChildMediaAndDispatchViewChange = async (
+  element: HTMLElement,
+  hass: HomeAssistant,
+  view: Readonly<View>,
+  child: Readonly<FrigateBrowseMediaSource>,
+): Promise<void> => {
+  let parent: FrigateBrowseMediaSource;
+  try {
+    parent = await browseMedia(hass, child.media_content_id);
+  } catch (e) {
+    return dispatchErrorMessageEvent(element, (e as Error).message);
+  }
+
+  view
+    .evolve({
+      target: parent,
+    })
+    .dispatchChangeEvent(element);
+};
+
+/**
+ * Given an array of media children, create a parent for them.
+ * @param title The title to use for the parent.
+ * @param children The children media items.
+ * @returns A single parent containing the children.
+ */
+export const createEventParentForChildren = (
+  title: string,
+  children: FrigateBrowseMediaSource[],
+): FrigateBrowseMediaSource => {
+  return {
+    title: title,
+    media_class: MEDIA_CLASS_PLAYLIST,
+    media_content_type: MEDIA_TYPE_PLAYLIST,
+    media_content_id: '',
+    can_play: false,
+    can_expand: true,
+    children_media_class: MEDIA_CLASS_PLAYLIST,
+    thumbnail: null,
+    children: children,
+  };
+};
+
+/**
+ * Convenience function to convert a timestamp to hours, minutes and seconds
+ * string. Heavily inspired by, and returning the same format as, the Frigate
+ * UI: https://github.com/blakeblackshear/frigate/blob/master/web/src/components/RecordingPlaylist.jsx#L97
+ * @param event The Frigate event.
+ * @returns A duration string.
+ */
+export function getEventDurationString(event: FrigateEvent): string {
+  if (!event.end_time) {
+    return localize('event.in_progress');
+  }
+  const start = fromUnixTime(event.start_time);
+  const end = fromUnixTime(event.end_time);
+  const hours = differenceInHours(end, start);
+  const minutes = differenceInMinutes(end, start) - hours * 60;
+  const seconds = differenceInSeconds(end, start) - hours * 60 * 60 - minutes * 60;
+  let duration = '';
+
+  if (hours) {
+    duration += `${hours}h `;
+  }
+  if (minutes) {
+    duration += `${minutes}m `;
+  }
+  duration += `${seconds}s`;
+  return duration;
+}
diff --git a/src/utils/ha/index.ts b/src/utils/ha/index.ts
new file mode 100644
index 00000000..ebc3d5a7
--- /dev/null
+++ b/src/utils/ha/index.ts
@@ -0,0 +1,256 @@
+import { computeStateDomain, HomeAssistant } from 'custom-card-helpers';
+import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
+import { StyleInfo } from 'lit/directives/style-map.js';
+import { ZodSchema } from 'zod';
+import { localize } from '../../localize/localize.js';
+import {
+    CardHelpers,
+    ExtendedHomeAssistant,
+    SignedPath,
+    signedPathSchema,
+    StateParameters
+} from '../../types.js';
+import { stateIcon } from '../icons/state-icon.js';
+import { getParseErrorKeys } from '../zod.js';
+
+/**
+ * Make a HomeAssistant websocket request. May throw.
+ * @param hass The HomeAssistant object to send the request with.
+ * @param schema The expected Zod schema of the response.
+ * @param request The request to make.
+ * @returns The parsed valid response or null on malformed.
+ */
+export async function homeAssistantWSRequest<T>(
+  hass: HomeAssistant,
+  schema: ZodSchema<T>,
+  request: MessageBase,
+): Promise<T> {
+  const response = await hass.callWS<T>(request);
+
+  if (!response) {
+    const error_message = `${localize('error.empty_response')}: ${JSON.stringify(
+      request,
+    )}`;
+    console.warn(error_message);
+    throw new Error(error_message);
+  }
+  const parseResult = schema.safeParse(response);
+  if (!parseResult.success) {
+    const keys = getParseErrorKeys<T>(parseResult.error);
+    const error_message =
+      `${localize('error.invalid_response')}: ${JSON.stringify(request)}. ` +
+      localize('error.invalid_keys') +
+      `: '${keys}'`;
+    console.warn(error_message);
+    throw new Error(error_message);
+  }
+  return parseResult.data;
+}
+
+/**
+ * Request that HA sign a path. May throw.
+ * @param hass The HomeAssistant object used to request the signature.
+ * @param path The path to sign.
+ * @param expires An optional number of seconds to sign the path for.
+ * @returns The signed URL, or null if the response was malformed.
+ */
+export async function homeAssistantSignPath(
+  hass: ExtendedHomeAssistant,
+  path: string,
+  expires?: number,
+): Promise<string | null> {
+  const request = {
+    type: 'auth/sign_path',
+    path: path,
+    expires: expires,
+  };
+  const response = await homeAssistantWSRequest<SignedPath>(
+    hass,
+    signedPathSchema,
+    request,
+  );
+  if (!response) {
+    return null;
+  }
+  return hass.hassUrl(response.path);
+}
+
+/**
+ * Determine whether the card should be updated based on Home Assistant changes.
+ * @param newHass The new HA object.
+ * @param oldHass The old HA object.
+ * @param entities The entities to examine for changes.
+ * @returns A boolean indicating whether or not to allow an update.
+ */
+export function shouldUpdateBasedOnHass(
+  newHass: HomeAssistant | undefined | null,
+  oldHass: HomeAssistant | undefined | null,
+  entities: string[] | null,
+): boolean {
+  if (!newHass || !entities || !entities.length) {
+    return false;
+  }
+  if (!oldHass) {
+    return true;
+  }
+
+  for (let i = 0; i < entities.length; i++) {
+    const entity = entities[i];
+    if (entity && oldHass.states[entity] !== newHass.states[entity]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Calculate a style brightness from a hass state.
+ * Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L296
+ * @param state The hass state object.
+ * @returns A CSS brightness string.
+ */
+function computeBrightnessFromState(state: HassEntity): string {
+  if (state.state === 'off' || !state.attributes.brightness) {
+    return '';
+  }
+  const brightness = state.attributes.brightness;
+  return `brightness(${(brightness + 245) / 5}%)`;
+}
+
+/**
+ * Calculate a style color from a hass state.
+ * Inspired by https://github.com/home-assistant/frontend/blob/7d5b5663123bb16d1da0c5bac3f2fc26d5f69ae8/src/panels/lovelace/cards/hui-button-card.ts#L304
+ * @param state The hass state object.
+ * @returns A CSS color string.
+ */
+function computeColorFromState(state: HassEntity): string {
+  if (state.state === 'off') {
+    return '';
+  }
+  return state.attributes.rgb_color
+    ? `rgb(${state.attributes.rgb_color.join(',')})`
+    : '';
+}
+
+/**
+ * Get the style of emphasized menu items.
+ * @returns A StyleInfo.
+ */
+function computeStyle(state: HassEntity): StyleInfo {
+  return {
+    color: computeColorFromState(state),
+    filter: computeBrightnessFromState(state),
+  };
+}
+
+/**
+ * Determine the string state of a given stateObj.
+ * From: https://github.com/home-assistant/frontend/blob/dev/src/common/entity/compute_active_state.ts
+ * @param stateObj The HassEntity object from `hass.states`.
+ * @returns A string state, e.g. 'on'.
+ */
+export const computeActiveState = (stateObj: HassEntity): string => {
+  const domain = stateObj.entity_id.split('.')[0];
+  let state = stateObj.state;
+
+  if (domain === 'climate') {
+    state = stateObj.attributes.hvac_action;
+  }
+
+  return state;
+};
+
+/**
+ * Use Home Assistant state to refresh state parameters for an item to be rendered.
+ * @param hass Home Assistant object.
+ * @param params A StateParameters object to modify in place.
+ * @returns A StateParameters object updated based on HASS state.
+ */
+export function refreshDynamicStateParameters(
+  hass: HomeAssistant,
+  params: StateParameters,
+): StateParameters {
+  if (!params.entity) {
+    return params;
+  }
+  const state = hass.states[params.entity];
+  if (!!state && !!params.state_color) {
+    params.style = { ...computeStyle(state), ...params.style };
+  }
+  params.title = params.title ?? (state?.attributes?.friendly_name || params.entity);
+  params.icon = params.icon ?? stateIcon(state);
+
+  const domain = state ? computeStateDomain(state) : undefined;
+  params.data_domain =
+    params.state_color || (domain === 'light' && params.state_color !== false)
+      ? domain
+      : undefined;
+  if (state) {
+    params.data_state = computeActiveState(state);
+  }
+  return params;
+}
+
+/**
+ * Get the title of an entity.
+ * @param entity The entity id.
+ * @param hass The Home Assistant object.
+ * @returns The title or undefined.
+ */
+export function getEntityTitle(
+  hass?: HomeAssistant,
+  entity?: string,
+): string | undefined {
+  return entity ? hass?.states[entity]?.attributes?.friendly_name : undefined;
+}
+
+/**
+ * Get the icon of an entity.
+ * @param entity The entity id.
+ * @param hass The Home Assistant object.
+ * @returns The icon or undefined.
+ */
+export function getEntityIcon(hass?: HomeAssistant, entity?: string): string {
+  return stateIcon(entity ? hass?.states[entity] : null);
+}
+
+/**
+ * Side loads the HA elements this card needs. This trickery is unfortunate
+ * necessary, see:
+ *  - https://github.com/thomasloven/hass-config/wiki/PreLoading-Lovelace-Elements
+ * @returns `true` if the load is successful, `false` otherwise.
+ */
+export const sideLoadHomeAssistantElements = async (): Promise<boolean> => {
+  const neededElements = [
+    'ha-selector',
+    'ha-menu-button',
+    'ha-camera-stream',
+    'ha-hls-player',
+    'ha-web-rtc-player',
+    'ha-icon',
+    'ha-circular-progress',
+    'ha-icon-button',
+    'ha-card',
+    'ha-svg-icon',
+    'ha-button-menu',
+  ];
+
+  if (neededElements.every((element) => customElements.get(element))) {
+    return true;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const helpers: CardHelpers = await (window as any).loadCardHelpers();
+
+  // The picture-glance editor loads everything this card needs.
+  const pictureGlance = await helpers.createCardElement({
+    type: 'picture-glance',
+    entities: [],
+    camera_image: 'dummy-to-load-editor-components',
+  });
+  if (pictureGlance.constructor.getConfigElement) {
+    await pictureGlance.constructor.getConfigElement();
+    return true;
+  }
+  return false;
+};
diff --git a/src/utils/ha/update.ts b/src/utils/ha/update.ts
new file mode 100644
index 00000000..9499b89d
--- /dev/null
+++ b/src/utils/ha/update.ts
@@ -0,0 +1,36 @@
+import {
+    HassEntity,
+    HassEntityAttributeBase,
+    HassEntityBase
+} from 'home-assistant-js-websocket';
+
+export const UPDATE_SUPPORT_INSTALL = 1;
+export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
+export const UPDATE_SUPPORT_PROGRESS = 4;
+export const UPDATE_SUPPORT_BACKUP = 8;
+export const UPDATE_SUPPORT_RELEASE_NOTES = 16;
+
+interface UpdateEntityAttributes extends HassEntityAttributeBase {
+  auto_update: boolean | null;
+  installed_version: string | null;
+  in_progress: boolean | number;
+  latest_version: string | null;
+  release_summary: string | null;
+  release_url: string | null;
+  skipped_version: string | null;
+  title: string | null;
+}
+
+export interface UpdateEntity extends HassEntityBase {
+  attributes: UpdateEntityAttributes;
+}
+
+export const supportsFeature = (stateObj: HassEntity, feature: number): boolean =>
+  ((stateObj.attributes.supported_features ?? 0) & feature) !== 0;
+
+export const updateUsesProgress = (entity: UpdateEntity): boolean =>
+  supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
+  typeof entity.attributes.in_progress === 'number';
+
+export const updateIsInstalling = (entity: UpdateEntity): boolean =>
+  updateUsesProgress(entity) || !!entity.attributes.in_progress;
diff --git a/src/icons/LICENSE b/src/utils/icons/LICENSE
similarity index 100%
rename from src/icons/LICENSE
rename to src/utils/icons/LICENSE
diff --git a/src/icons/README.md b/src/utils/icons/README.md
similarity index 100%
rename from src/icons/README.md
rename to src/utils/icons/README.md
diff --git a/src/utils/icons/alarm-panel-icon.ts b/src/utils/icons/alarm-panel-icon.ts
new file mode 100644
index 00000000..fd9915fa
--- /dev/null
+++ b/src/utils/icons/alarm-panel-icon.ts
@@ -0,0 +1,42 @@
+export const alarmPanelIcon = (state?: string) => {
+  switch (state) {
+    case 'armed_away':
+      return 'mdi:shield-lock';
+    case 'armed_vacation':
+      return 'mdi:shield-airplane';
+    case 'armed_home':
+      return 'mdi:shield-home';
+    case 'armed_night':
+      return 'mdi:shield-moon';
+    case 'armed_custom_bypass':
+      return 'mdi:security';
+    case 'pending':
+    case 'arming':
+      return 'mdi:shield-sync';
+    case 'triggered':
+      return 'mdi:bell-ring';
+    case 'disarmed':
+      return 'mdi:shield-off';
+    default:
+      return 'mdi:shield';
+  }
+};
+
+export const alarmPanelIconAction = (state?: string) => {
+  switch (state) {
+    case 'armed_away':
+      return 'mdi:shield-lock-outline';
+    case 'armed_vacation':
+      return 'mdi:shield-airplane-outline';
+    case 'armed_home':
+      return 'mdi:shield-home-outline';
+    case 'armed_night':
+      return 'mdi:shield-moon-outline';
+    case 'armed_custom_bypass':
+      return 'mdi:shield-half-full';
+    case 'disarmed':
+      return 'mdi:shield-off-outline';
+    default:
+      return 'mdi:shield-outline';
+  }
+};
diff --git a/src/utils/icons/binary-sensor-icon.ts b/src/utils/icons/binary-sensor-icon.ts
new file mode 100644
index 00000000..ec6a74b2
--- /dev/null
+++ b/src/utils/icons/binary-sensor-icon.ts
@@ -0,0 +1,58 @@
+import { HassEntity } from 'home-assistant-js-websocket';
+
+export const binarySensorIcon = (state?: string, entity?: HassEntity) => {
+  const isOff = state === 'off';
+  switch (entity?.attributes.device_class) {
+    case 'battery':
+      return isOff ? 'mdi:battery' : 'mdi:battery-outline';
+    case 'battery_charging':
+      return isOff ? 'mdi:battery' : 'mdi:battery-charging';
+    case 'cold':
+      return isOff ? 'mdi:thermometer' : 'mdi:snowflake';
+    case 'connectivity':
+      return isOff ? 'mdi:close-network-outline' : 'mdi:check-network-outline';
+    case 'door':
+      return isOff ? 'mdi:door-closed' : 'mdi:door-open';
+    case 'garage_door':
+      return isOff ? 'mdi:garage' : 'mdi:garage-open';
+    case 'power':
+      return isOff ? 'mdi:power-plug-off' : 'mdi:power-plug';
+    case 'gas':
+    case 'problem':
+    case 'safety':
+    case 'tamper':
+      return isOff ? 'mdi:check-circle' : 'mdi:alert-circle';
+    case 'smoke':
+      return isOff ? 'mdi:check-circle' : 'mdi:smoke';
+    case 'heat':
+      return isOff ? 'mdi:thermometer' : 'mdi:fire';
+    case 'light':
+      return isOff ? 'mdi:brightness5' : 'mdi:brightness-7';
+    case 'lock':
+      return isOff ? 'mdi:lock' : 'mdi:lock-open';
+    case 'moisture':
+      return isOff ? 'mdi:water-off' : 'mdi:water';
+    case 'motion':
+      return isOff ? 'mdi:motion-sensor-off' : 'mdi:motion-sensor';
+    case 'occupancy':
+      return isOff ? 'mdi:home-outline' : 'mdi:home';
+    case 'opening':
+      return isOff ? 'mdi:square' : 'mdi:square-outline';
+    case 'plug':
+      return isOff ? 'mdi:power-plug-off' : 'mdi:power-plug';
+    case 'presence':
+      return isOff ? 'mdi:home-outline' : 'mdi:home';
+    case 'running':
+      return isOff ? 'mdi:stop' : 'mdi:play';
+    case 'sound':
+      return isOff ? 'mdi:music-note-off' : 'mdi:music-note';
+    case 'update':
+      return isOff ? 'mdi:package' : 'mdi:package-up';
+    case 'vibration':
+      return isOff ? 'mdi:crop-portrait' : 'mdi:vibrate';
+    case 'window':
+      return isOff ? 'mdi:window-closed' : 'mdi:window-open';
+    default:
+      return isOff ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
+  }
+};
diff --git a/src/utils/icons/cover-icon.ts b/src/utils/icons/cover-icon.ts
new file mode 100644
index 00000000..37cd15d6
--- /dev/null
+++ b/src/utils/icons/cover-icon.ts
@@ -0,0 +1,113 @@
+import { HassEntity } from 'home-assistant-js-websocket';
+
+export const coverIcon = (state?: string, entity?: HassEntity): string => {
+  const open = state !== 'closed';
+
+  switch (entity?.attributes.device_class) {
+    case 'garage':
+      switch (state) {
+        case 'opening':
+          return 'mdi:arrow-up-box';
+        case 'closing':
+          return 'mdi:arrow-down-box';
+        case 'closed':
+          return 'mdi:garage';
+        default:
+          return 'mdi:garage-open';
+      }
+    case 'gate':
+      switch (state) {
+        case 'opening':
+        case 'closing':
+          return 'mdi:gate-arrow-right';
+        case 'closed':
+          return 'mdi:gate';
+        default:
+          return 'mdi:gate-open';
+      }
+    case 'door':
+      return open ? 'mdi:door-open' : 'mdi:door-closed';
+    case 'damper':
+      return open ? 'md:circle' : 'mdi:circle-slice-8';
+    case 'shutter':
+      switch (state) {
+        case 'opening':
+          return 'mdi:arrow-up-box';
+        case 'closing':
+          return 'mdi:arrow-down-box';
+        case 'closed':
+          return 'mdi:window-shutter';
+        default:
+          return 'mdi:window-shutter-open';
+      }
+    case 'curtain':
+      switch (state) {
+        case 'opening':
+          return 'mdi:arrow-split-vertical';
+        case 'closing':
+          return 'mdi:arrow-collapse-horizontal';
+        case 'closed':
+          return 'mdi:curtains-closed';
+        default:
+          return 'mdi:curtains';
+      }
+    case 'blind':
+    case 'shade':
+      switch (state) {
+        case 'opening':
+          return 'mdi:arrow-up-box';
+        case 'closing':
+          return 'mdi:arrow-down-box';
+        case 'closed':
+          return 'mdi:blinds';
+        default:
+          return 'mdi:blinds-open';
+      }
+    case 'window':
+      switch (state) {
+        case 'opening':
+          return 'mdi:arrow-up-box';
+        case 'closing':
+          return 'mdi:arrow-down-box';
+        case 'closed':
+          return 'mdi:window-closed';
+        default:
+          return 'mdi:window-open';
+      }
+  }
+
+  switch (state) {
+    case 'opening':
+      return 'mdi:arrow-up-box';
+    case 'closing':
+      return 'mdi:arrow-down-box';
+    case 'closed':
+      return 'mdi:window-closed';
+    default:
+      return 'mdi:window-open';
+  }
+};
+
+export const computeOpenIcon = (stateObj: HassEntity): string => {
+  switch (stateObj.attributes.device_class) {
+    case 'awning':
+    case 'curtain':
+    case 'door':
+    case 'gate':
+      return 'mdi:arrow-expand-horizontal';
+    default:
+      return 'mdi:arrow-up';
+  }
+};
+
+export const computeCloseIcon = (stateObj: HassEntity): string => {
+  switch (stateObj.attributes.device_class) {
+    case 'awning':
+    case 'curtain':
+    case 'door':
+    case 'gate':
+      return 'mdi:arrow-collapse-horizontal';
+    default:
+      return 'mdi:arrow-down';
+  }
+};
diff --git a/src/utils/icons/domain-icon.ts b/src/utils/icons/domain-icon.ts
new file mode 100644
index 00000000..3c01bd76
--- /dev/null
+++ b/src/utils/icons/domain-icon.ts
@@ -0,0 +1,166 @@
+import { HassEntity } from 'home-assistant-js-websocket';
+import { UpdateEntity, updateIsInstalling } from '../ha/update.js';
+import { alarmPanelIcon } from './alarm-panel-icon';
+import { binarySensorIcon } from './binary-sensor-icon';
+import { coverIcon } from './cover-icon';
+import { sensorIcon } from './sensor-icon';
+
+export const DEFAULT_DOMAIN_ICON = 'mdi:bookmark';
+
+const FIXED_DOMAIN_ICONS = {
+  alert: 'mdi:alert',
+  air_quality: 'mdi:air-filter',
+  automation: 'mdi:robot',
+  calendar: 'mdi:calendar',
+  camera: 'mdi:video',
+  climate: 'mdi:thermostat',
+  configurator: 'mdi:cog',
+  conversation: 'mdi:text-to-speech',
+  counter: 'mdi:counter',
+  fan: 'mdi:fan',
+  google_assistant: 'mdi:google-assistant',
+  group: 'mdi:google-circles-communities',
+  homeassistant: 'mdi:home-assistant',
+  homekit: 'mdi:home-automation',
+  image_processing: 'mdi:image-filter-frames',
+  input_button: 'mdi:gesture-tap-button',
+  input_datetime: 'mdi:calendar-clock',
+  input_number: 'mdi:ray-vertex',
+  input_select: 'mdi:format-list-bulleted',
+  input_text: 'mdi:form-textbox',
+  light: 'mdi:lightbulb',
+  mailbox: 'mdi:mailbox',
+  notify: 'mdi:comment-alert',
+  number: 'mdi:ray-vertex',
+  persistent_notification: 'mdi:bell',
+  person: 'mdi:account',
+  plant: 'mdi:flower',
+  proximity: 'mdi:apple-safari',
+  remote: 'mdi:remote',
+  scene: 'mdi:palette',
+  script: 'mdi:script-text',
+  select: 'mdi:format-list-bulleted',
+  sensor: 'mdi:eye',
+  siren: 'mdi:bullhorn',
+  simple_alarm: 'mdi:bell',
+  sun: 'mdi:white-balance-sunny',
+  timer: 'mdi:timer-outline',
+  updater: 'mdi:cloud-upload',
+  vacuum: 'mdi:robot-vacuum',
+  water_heater: 'mdi:thermometer',
+  weather: 'mdi:weather-cloudy',
+  zone: 'mdi:map-marker-radius',
+};
+
+export function domainIcon(domain: string, entity?: HassEntity, state?: string): string {
+  switch (domain) {
+    case 'alarm_control_panel':
+      return alarmPanelIcon(state);
+
+    case 'binary_sensor':
+      return binarySensorIcon(state, entity);
+
+    case 'button':
+      switch (entity?.attributes.device_class) {
+        case 'restart':
+          return 'mdi:restart';
+        case 'update':
+          return 'mdi:package-up';
+        default:
+          return 'mdi:gesture-tap-button';
+      }
+
+    case 'cover':
+      return coverIcon(state, entity);
+
+    case 'device_tracker':
+      if (entity?.attributes.source_type === 'router') {
+        return state === 'home' ? 'mdi:lan-connect' : 'mdi:lan-disconnect';
+      }
+      if (['bluetooth', 'bluetooth_le'].includes(entity?.attributes.source_type)) {
+        return state === 'home' ? 'mdi:bluetooth-connect' : 'mdi:bluetooth';
+      }
+      return state === 'not_home' ? 'mdi:account-arrow-right' : 'mdi:account';
+
+    case 'humidifier':
+      return state && state === 'off' ? 'mdi:air-humidifier-off' : 'mdi:air-humidifier';
+
+    case 'input_boolean':
+      return state === 'on' ? 'mdi:check-circle-outline' : 'mdi:close-circle-outline';
+
+    case 'lock':
+      switch (state) {
+        case 'unlocked':
+          return 'mdi:lock-open';
+        case 'jammed':
+          return 'mdi:lock-alert';
+        case 'locking':
+        case 'unlocking':
+          return 'mdi:lock-clock';
+        default:
+          return 'mdi:lock';
+      }
+
+    case 'media_player':
+      return state === 'playing' ? 'mdi:cast-connected' : 'mdi:cast';
+
+    case 'switch':
+      switch (entity?.attributes.device_class) {
+        case 'outlet':
+          return state === 'on' ? 'mdi:power-plug' : 'mdi:power-plug-off';
+        case 'switch':
+          return state === 'on' ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off';
+        default:
+          return 'mdi:flash';
+      }
+
+    case 'zwave':
+      switch (state) {
+        case 'dead':
+          return 'mdi:emoticon-dead';
+        case 'sleeping':
+          return 'mdi:sleep';
+        case 'initializing':
+          return 'mdi:timer-sand';
+        default:
+          return 'mdi:z-wave';
+      }
+
+    case 'sensor': {
+      const icon = sensorIcon(entity);
+      if (icon) {
+        return icon;
+      }
+
+      break;
+    }
+
+    case 'input_datetime':
+      if (!entity?.attributes.has_date) {
+        return 'mdi:clock';
+      }
+      if (!entity.attributes.has_time) {
+        return 'mdi:calendar';
+      }
+      break;
+
+    case 'sun':
+      return entity?.state === 'above_horizon'
+        ? FIXED_DOMAIN_ICONS[domain]
+        : 'mdi:weather-night';
+
+    case 'update':
+      return entity?.state === 'on'
+        ? updateIsInstalling(entity as UpdateEntity)
+          ? 'mdi:package-down'
+          : 'mdi:package-up'
+        : 'mdi:package';
+  }
+
+  if (domain in FIXED_DOMAIN_ICONS) {
+    return FIXED_DOMAIN_ICONS[domain];
+  }
+
+  console.warn(`Unable to find icon for domain ${domain}`);
+  return DEFAULT_DOMAIN_ICON;
+}
diff --git a/src/utils/icons/sensor-icon.ts b/src/utils/icons/sensor-icon.ts
new file mode 100644
index 00000000..885641ef
--- /dev/null
+++ b/src/utils/icons/sensor-icon.ts
@@ -0,0 +1,118 @@
+import { UNIT_C, UNIT_F } from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
+
+const FIXED_DEVICE_CLASS_ICONS = {
+  apparent_power: 'mdi:flash',
+  aqi: 'mdi:air-filter',
+  carbon_dioxide: 'mdi:molecule-co2',
+  carbon_monoxide: 'mdi:molecule-co',
+  current: 'mdi:current-ac',
+  date: 'mdi:calendar',
+  energy: 'mdi:lightning-bolt',
+  frequency: 'mdi:sine-wave',
+  gas: 'mdi:gas-cylinder',
+  humidity: 'mdi:water-percent',
+  illuminance: 'mdi:brightness-5',
+  monetary: 'mdi:cash',
+  nitrogen_dioxide: 'mdi:molecule',
+  nitrogen_monoxide: 'mdi:molecule',
+  nitrous_oxide: 'mdi:molecule',
+  ozone: 'mdi:molecule',
+  pm1: 'mdi:molecule',
+  pm10: 'mdi:molecule',
+  pm25: 'mdi:molecule',
+  power: 'mdi:flash',
+  power_factor: 'mdi:angle-acute',
+  pressure: 'mdi:gauge',
+  reactive_power: 'mdi:flash',
+  signal_strength: 'mdi:wifi',
+  sulphur_dioxide: 'mdi:molecule',
+  temperature: 'mdi:thermometer',
+  timestamp: 'mdi:clock',
+  volatile_organic_compounds: 'mdi:molecule',
+  voltage: 'mdi:sine-wave',
+};
+
+const SENSOR_DEVICE_CLASS_BATTERY = 'battery';
+
+const BATTERY_ICONS = {
+  10: 'mdi:battery-10',
+  20: 'mdi:battery-20',
+  30: 'mdi:battery-30',
+  40: 'mdi:battery-40',
+  50: 'mdi:battery-50',
+  60: 'mdi:battery-60',
+  70: 'mdi:battery-70',
+  80: 'mdi:battery-80',
+  90: 'mdi:battery-90',
+  100: 'mdi:battery',
+};
+const BATTERY_CHARGING_ICONS = {
+  10: 'mdi:battery-charging-10',
+  20: 'mdi:battery-charging-20',
+  30: 'mdi:battery-charging-30',
+  40: 'mdi:battery-charging-40',
+  50: 'mdi:battery-charging-50',
+  60: 'mdi:battery-charging-60',
+  70: 'mdi:battery-charging-70',
+  80: 'mdi:battery-charging-80',
+  90: 'mdi:battery-charging-90',
+  100: 'mdi:battery-charging',
+};
+
+const batteryStateIcon = (
+  batteryEntity: HassEntity,
+  batteryChargingEntity?: HassEntity,
+) => {
+  const battery = batteryEntity.state;
+  const batteryCharging = batteryChargingEntity?.state === 'on';
+
+  return batteryIcon(battery, batteryCharging);
+};
+
+export const batteryIcon = (
+  batteryState: number | string,
+  batteryCharging?: boolean,
+) => {
+  const batteryValue = Number(batteryState);
+  if (isNaN(batteryValue)) {
+    if (batteryState === 'off') {
+      return 'mdi:battery';
+    }
+    if (batteryState === 'on') {
+      return 'mdi:battery-alert';
+    }
+    return 'mdi:battery-unknown';
+  }
+
+  const batteryRound = Math.round(batteryValue / 10) * 10;
+  if (batteryCharging && batteryValue >= 10) {
+    return BATTERY_CHARGING_ICONS[batteryRound];
+  }
+  if (batteryCharging) {
+    return 'mdi:battery-charging-outline';
+  }
+  if (batteryValue <= 5) {
+    return 'mdi:battery-alert-variant-outline';
+  }
+  return BATTERY_ICONS[batteryRound];
+};
+
+export const sensorIcon = (entity?: HassEntity): string | undefined => {
+  const dclass = entity?.attributes.device_class;
+
+  if (dclass && dclass in FIXED_DEVICE_CLASS_ICONS) {
+    return FIXED_DEVICE_CLASS_ICONS[dclass];
+  }
+
+  if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
+    return entity ? batteryStateIcon(entity) : 'mdi:battery';
+  }
+
+  const unit = entity?.attributes.unit_of_measurement;
+  if (unit === UNIT_C || unit === UNIT_F) {
+    return 'mdi:thermometer';
+  }
+
+  return undefined;
+};
diff --git a/src/utils/icons/state-icon.ts b/src/utils/icons/state-icon.ts
new file mode 100644
index 00000000..0e45a66d
--- /dev/null
+++ b/src/utils/icons/state-icon.ts
@@ -0,0 +1,18 @@
+import { computeDomain } from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
+import { DEFAULT_DOMAIN_ICON, domainIcon } from './domain-icon';
+
+export function stateIcon(entity?: HassEntity | null): string {
+  if (!entity) {
+    return DEFAULT_DOMAIN_ICON;
+  }
+  if (entity.attributes.icon) {
+    return entity.attributes.icon;
+  }
+
+  const domain = computeDomain(entity.entity_id);
+
+  const state = entity.state;
+
+  return domainIcon(domain, entity, state);
+}
diff --git a/src/utils/media-info.ts b/src/utils/media-info.ts
new file mode 100644
index 00000000..d5482b51
--- /dev/null
+++ b/src/utils/media-info.ts
@@ -0,0 +1,75 @@
+import { MediaShowInfo } from '../types.js';
+import { dispatchFrigateCardEvent } from './basic.js';
+
+const MEDIA_INFO_HEIGHT_CUTOFF = 50;
+const MEDIA_INFO_WIDTH_CUTOFF = MEDIA_INFO_HEIGHT_CUTOFF;
+
+/**
+ * Create a MediaShowInfo object.
+ * @param source An event or HTMLElement that should be used as a source.
+ * @returns A new MediaShowInfo object or null if one could not be created.
+ */
+export function createMediaShowInfo(source: Event | HTMLElement): MediaShowInfo | null {
+  let target: HTMLElement | EventTarget;
+  if (source instanceof Event) {
+    target = source.composedPath()[0];
+  } else {
+    target = source;
+  }
+
+  if (target instanceof HTMLImageElement) {
+    return {
+      width: (target as HTMLImageElement).naturalWidth,
+      height: (target as HTMLImageElement).naturalHeight,
+    };
+  } else if (target instanceof HTMLVideoElement) {
+    return {
+      width: (target as HTMLVideoElement).videoWidth,
+      height: (target as HTMLVideoElement).videoHeight,
+    };
+  } else if (target instanceof HTMLCanvasElement) {
+    return {
+      width: (target as HTMLCanvasElement).width,
+      height: (target as HTMLCanvasElement).height,
+    };
+  }
+  return null;
+}
+
+/**
+ * Dispatch a Frigate card media show event.
+ * @param element The element to send the event.
+ * @param source An event or HTMLElement that should be used as a source.
+ */
+export function dispatchMediaShowEvent(
+  element: HTMLElement,
+  source: Event | HTMLElement,
+): void {
+  const mediaShowInfo = createMediaShowInfo(source);
+  if (mediaShowInfo) {
+    dispatchExistingMediaShowInfoAsEvent(element, mediaShowInfo);
+  }
+}
+
+/**
+ * Dispatch a pre-existing MediaShowInfo object as an event.
+ * @param element The element to send the event.
+ * @param mediaShowInfo The MediaShowInfo object to send.
+ */
+export function dispatchExistingMediaShowInfoAsEvent(
+  element: HTMLElement,
+  mediaShowInfo: MediaShowInfo,
+): void {
+  dispatchFrigateCardEvent<MediaShowInfo>(element, 'media-show', mediaShowInfo);
+}
+
+/**
+ * Determine if a MediaShowInfo object is valid/acceptable.
+ * @param info The MediaShowInfo object.
+ * @returns True if the object is valid, false otherwise.
+ */
+export function isValidMediaShowInfo(info: MediaShowInfo): boolean {
+  return (
+    info.height >= MEDIA_INFO_HEIGHT_CUTOFF && info.width >= MEDIA_INFO_WIDTH_CUTOFF
+  );
+}
diff --git a/src/utils/resolved-media.ts b/src/utils/resolved-media.ts
new file mode 100644
index 00000000..3ce77436
--- /dev/null
+++ b/src/utils/resolved-media.ts
@@ -0,0 +1,58 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import QuickLRU from 'quick-lru';
+import {
+  FrigateBrowseMediaSource,
+  ResolvedMedia,
+  resolvedMediaSchema
+} from '../types.js';
+import { homeAssistantWSRequest } from './ha';
+
+// It's important the cache size be at least as large as the largest likely
+// media query or media items will from a given query will be evicted for other
+// items in the same query (which would result in only partial results being
+// returned to the user).
+// Note: Each entry is about 400 bytes.
+const RESOLVED_MEDIA_CACHE_SIZE = 1000;
+
+export class ResolvedMediaCache {
+  protected _cache: QuickLRU<string, ResolvedMedia>;
+
+  constructor() {
+    this._cache = new QuickLRU({ maxSize: RESOLVED_MEDIA_CACHE_SIZE });
+  }
+
+  public has(id: string): boolean {
+    return this._cache.has(id);
+  }
+
+  public get(id: string): ResolvedMedia | undefined {
+    return this._cache.get(id);
+  }
+
+  public set(id: string, resolvedMedia: ResolvedMedia): void {
+    this._cache.set(id, resolvedMedia);
+  }
+}
+
+export const resolveMedia = async (
+  hass: HomeAssistant,
+  mediaSource?: FrigateBrowseMediaSource,
+  cache?: ResolvedMediaCache,
+): Promise<ResolvedMedia | null> => {
+  if (!mediaSource) {
+    return null;
+  }
+  const cachedValue = cache ? cache.get(mediaSource.media_content_id) : undefined;
+  if (cachedValue) {
+    return cachedValue;
+  }
+  const request = {
+    type: 'media_source/resolve_media',
+    media_content_id: mediaSource.media_content_id,
+  };
+  const resolvedMedia = await homeAssistantWSRequest(hass, resolvedMediaSchema, request);
+  if (cache && resolvedMedia) {
+    cache.set(mediaSource.media_content_id, resolvedMedia);
+  }
+  return resolvedMedia;
+};
diff --git a/src/zod-util.ts b/src/utils/zod.ts
similarity index 80%
rename from src/zod-util.ts
rename to src/utils/zod.ts
index 1d7f6b3b..2298797c 100644
--- a/src/zod-util.ts
+++ b/src/utils/zod.ts
@@ -46,3 +46,13 @@ export function deepRemoveDefaults<T extends z.ZodTypeAny>(schema: T): any {
   }
   return schema;
 }
+
+/**
+ * Get the keys that didn't parse from a ZodError.
+ * @param error The zoderror to extract the keys from.
+ * @returns An array of error keys.
+ */
+export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
+  const errors = error.format();
+  return Object.keys(errors).filter((v) => !v.startsWith('_'));
+}
diff --git a/src/view.ts b/src/view.ts
index 243b4873..e73577cb 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -1,5 +1,5 @@
 import type { FrigateBrowseMediaSource, FrigateCardView } from './types.js';
-import { dispatchFrigateCardEvent } from './common.js';
+import { dispatchFrigateCardEvent } from './utils/basic.js';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ViewContext {}