Initial common.js refactor.

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;

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:
  *

src/components/gallery.ts

@@ -1,26 +1,23 @@
 /* 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 { BrowseMediaUtil } from '../utils/ha/browse-media.js';
+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 {

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);

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 { BrowseMediaUtil } 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;

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`;

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 =

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,
+  });
+}

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 {

src/components/surround-thumbnails.ts

@@ -1,23 +1,20 @@
-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 { BrowseMediaUtil } from '../utils/ha/browse-media.js';
 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,7 +68,10 @@ export class FrigateCardSurround extends LitElement {
     }
     let parent: FrigateBrowseMediaSource | null;
     try {
-      parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, browseMediaParams);
+      parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(
+        this.hass,
+        browseMediaParams,
+      );
     } catch (e) {
       return dispatchErrorMessageEvent(this, (e as Error).message);
     }

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 { BrowseMediaUtil } from '../utils/ha/browse-media.js';
+import { View } from '../view.js';
+import { FrigateCardCarousel } from './carousel.js';
+import './thumbnail.js';
 
 export interface ThumbnailCarouselTap {
   slideIndex: number;

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/frigate.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">

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,26 @@ 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 { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { dispatchFrigateCardEvent } from '../utils/basic.js';
+import { getCameraTitle } from '../utils/camera.js';
+import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
 import { View, ViewContext } from '../view';
-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';
-
+import { dispatchErrorMessageEvent, dispatchMessageEvent } from './message.js';
 import './surround-thumbnails.js';
 
 const TIMELINE_EVENT_MANAGER_MAX_AGE_SECONDS = 10;

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,21 @@ 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 { stopEventFromActivatingCardWideActions } from '../utils/action.js';
+import { contentsChanged } from '../utils/basic.js';
+import { BrowseMediaUtil } from '../utils/ha/browse-media.js';
+import { createMediaShowInfo } from '../utils/media-info.js';
+import { ResolvedMediaCache, ResolvedMediaUtil } from '../utils/resolved-media.js';
 import { View } from '../view.js';
-import {
-  contentsChanged,
-  createMediaShowInfo,
-  dispatchErrorMessageEvent,
-  stopEventFromActivatingCardWideActions,
-} from '../common.js';
-import { renderProgressIndicator } from '../components/message.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 })