Convert all major views to separate chunks.

src/components/live/live-ha.ts

@@ -8,6 +8,9 @@ import { CameraConfig, FrigateCardMediaPlayer } from '../../types.js';
 import { getCameraTitle } from '../../utils/camera.js';
 import { dispatchErrorMessageEvent, dispatchMessageEvent } from '../message.js';
 import '../../patches/ha-camera-stream';
+import '../../patches/ha-hls-player.js';
+import '../../patches/ha-web-rtc-player.ts';
+
 
 @customElement('frigate-card-live-ha')
 export class FrigateCardLiveHA extends LitElement {

src/components/live/live.ts

@@ -49,10 +49,8 @@ import {
 import '../next-prev-control.js';
 import '../title-control.js';
 import '../surround.js';
-import '../../patches/ha-camera-stream';
 import { EmblaCarouselPlugins } from '../carousel.js';
 import { classMap } from 'lit/directives/class-map.js';
-import '../image';
 import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
 import { DataManager } from '../../utils/data-manager.js';
 
@@ -760,6 +758,9 @@ export class FrigateCardLiveProvider extends LitElement {
     }
     if (changedProps.has('liveConfig')) {
       updateElementStyleFromMediaLayoutConfig(this, this.liveConfig?.layout);
+      if (this.liveConfig?.show_image_during_load) {
+        import('../image.js');
+      }
     }
     if (changedProps.has('cameraConfig')) {
       if (this._getResolvedProvider() === 'frigate-jsmpeg') {

src/components/surround.ts

@@ -122,7 +122,7 @@ export class FrigateCardSurround extends LitElement {
    */
   protected willUpdate(changedProperties: PropertyValues): void {
     if (this.timelineConfig?.mode && this.timelineConfig.mode !== 'none') {
-      import('./timeline-core.js');
+      import('./timeline.js');
     }
 
     // Once the component will certainly update, dispatch a media request. Only

src/components/thumbnail.ts

@@ -17,7 +17,7 @@ import { getEventDurationString } from '../utils/frigate.js';
 import { renderTask } from '../utils/task.js';
 import { createFetchThumbnailTask } from '../utils/thumbnail.js';
 import { View } from '../view.js';
-import { MediaSeek } from './viewer.js';
+import type { MediaSeek } from './viewer.js';
 import { TaskStatus } from '@lit-labs/task';
 
 import type {

src/components/timeline.ts

@@ -5,6 +5,7 @@ import { CameraConfig, ExtendedHomeAssistant, TimelineConfig } from '../types';
 import { DataManager } from '../utils/data-manager';
 import { View } from '../view';
 import './surround.js';
+import './timeline-core.js';
 
 // This file is kept separate from timeline-core.ts to avoid a circular dependency:
 //   FrigateCardTimeline ->
@@ -28,13 +29,6 @@ export class FrigateCardTimeline extends LitElement {
   @property({ attribute: false })
   public dataManager?: DataManager;
 
-  /**
-   * Called on first update.
-   */
-  protected firstUpdated(): void {
-    import('./timeline-core.js');    
-  }
-
   /**
    * Master render method.
    * @returns A rendered template.