frigate-delivery-card.js

const de = {
  appearance: "Darstellung",
  fitModeLabel: "Videoanpassung",
  fitContain: "Gesamtes Video einpassen",
  fitCover: "Zuschneiden und ausfüllen",
  fitModeHelp: "Gilt für die Wiedergabe in der Karte und im Vollbild. Einpassen kann schwarze Balken anzeigen; Ausfüllen schneidet die Ränder ab.",
  advanced: "Erweitert",
  all: "Alle",
  backToImage: "Zurück zum Bild",
  cameraHelp: "Wie in der Frigate-Konfiguration benannt",
  cameraLabel: "Frigate-Kameraname (wie in der Frigate-Konfiguration)",
  clipsLabel: "Schaltfläche zur Clip-Wiedergabe (erfordert aktivierte Frigate-Aufzeichnung)",
  clipRequiresRecord: "Clips erfordern eine aktivierte Aufzeichnung in Frigate.",
  clipUnavailable: "Für dieses Ereignis ist kein Clip verfügbar.",
  close: "Schließen",
  customCardDescription: "Frigate-Ereignisschnappschüsse, nach sub_label (Zustelldienste, Gesichter, Kennzeichen) gefiltert, mit Diashow, Zeitleiste, Filterchips und Clip-Wiedergabe.",
  eventSnapshot: "Ereignis-Schnappschuss: {company}",
  eventThumbnail: "Ereignis-Vorschaubild: {company}",
  extraCategories: "Zusätzliche Ereigniskategorien (SONSTIGE & PERSON)",
  fullscreen: "Vollbild",
  hoursLabel: "Rückblick (Stunden, nur gleitendes Zeitfenster)",
  instanceIdLabel: "Frigate-Instanz-ID",
  labelsHelp: "Schränkt die Hauptabfrage ein; anders als PERSON wird keine separate Kategorie hinzugefügt",
  labelsLabel: "Objekt-Labels (Hauptabfrage)",
  legacyCardDescription: "Früherer Elementname der Frigate Delivery Card – dieselbe Karte, für alte Konfigurationen beibehalten.",
  legacyCardName: "Frigate Delivery Card (früherer Name)",
  limitLabel: "Maximale Ereignisanzahl",
  missingCameraError: "Frigate Delivery Card: Bitte 'camera' (oder 'cameras') festlegen.",
  nextEvent: "Nächstes Ereignis",
  noMatchingLastHour: "Keine passenden Ereignisse in der letzten Stunde.",
  noMatchingLastHours: "Keine passenden Ereignisse in den letzten {hours} Stunden.",
  noMatchingToday: "Heute keine passenden Ereignisse.",
  otherCategory: "Sonstige",
  periodHours: "Gleitendes Zeitfenster (letzte N Stunden)",
  periodLabel: "Zeitraum",
  periodToday: "Heute (seit Mitternacht, Ortszeit)",
  personCategory: "Person",
  personsLabel: "PERSON: alle Personenereignisse anzeigen",
  playClip: "Clip abspielen",
  previousEvent: "Vorheriges Ereignis",
  queryFailed: "Frigate-Abfrage fehlgeschlagen",
  refreshLabel: "Aktualisieren alle (s)",
  reel: "Reel (Diashow + Vorschaubildleiste)",
  showAllLabel: "Filterchip ALLE anzeigen",
  slideshowLabel: "Diashow-Intervall (s, 0 = aus)",
  sortLabel: "Sortierreihenfolge",
  sortNewest: "Neueste zuerst",
  sortOldest: "Älteste zuerst",
  subLabelsHelp: "Zustelldienste auswählen oder eigene Werte eingeben – leer lassen, um die sub_label-Filterung zu deaktivieren",
  subLabelsLabel: "Zustelldienste / Sub-Labels",
  timeline: "Zeitleiste (farbige Zeitmarken + Diashow)",
  timeRange: "Zeitraum",
  unrecognizedLabel: "SONSTIGE: Fahrzeugstopps ohne erkanntes Zustellerlogo anzeigen",
  unrecognizedMinDurationLabel: "SONSTIGE: Mindestdauer des Stopps (s)",
  viewLabel: "Ansicht",
  viewPlayback: "Ansicht & Wiedergabe",
  yesterday: "gestern",
  zonesHelp: "Optional, Frigate-Zonennamen eingeben, z. B. mailbox",
  zonesLabel: "Zonen"
};
const en = {
  appearance: "Appearance",
  fitModeLabel: "Video fit",
  fitContain: "Fit entire video",
  fitCover: "Crop to fill",
  fitModeHelp: "Applies to card playback and fullscreen. Fit entire video may leave black bars; Crop to fill crops the edges.",
  advanced: "Advanced",
  all: "All",
  backToImage: "Back to image",
  cameraHelp: "As named in your Frigate configuration",
  cameraLabel: "Frigate camera name (as in Frigate configuration)",
  clipsLabel: "Clip playback button (requires 'record' to be enabled in Frigate)",
  clipRequiresRecord: "Clips require 'record' to be enabled in Frigate.",
  clipUnavailable: "No clip available for this event.",
  close: "Close",
  customCardDescription: "Frigate event snapshots filtered by sub_label (delivery companies, faces, plates) with slideshow, timeline, filter chips and clip playback.",
  eventSnapshot: "{company} event snapshot",
  eventThumbnail: "{company} event thumbnail",
  extraCategories: "Additional event categories (OTHER & PERSON)",
  fullscreen: "Fullscreen",
  hoursLabel: "Look back (hours, rolling window only)",
  instanceIdLabel: "Frigate instance id",
  labelsHelp: "Restricts the main query; unlike PERSON, it does not add a separate category",
  labelsLabel: "Object labels (main query)",
  legacyCardDescription: "Legacy element name of the Frigate Delivery Card - same card, kept for old configurations.",
  legacyCardName: "Frigate Delivery Card (legacy name)",
  limitLabel: "Max events",
  missingCameraError: "Frigate Delivery Card: please set 'camera' (or 'cameras').",
  nextEvent: "Next event",
  noMatchingLastHour: "No matching events in the last hour.",
  noMatchingLastHours: "No matching events in the last {hours} hours.",
  noMatchingToday: "No matching events today.",
  otherCategory: "Other",
  periodHours: "Rolling window (look back N hours)",
  periodLabel: "Time range",
  periodToday: "Today (since local midnight)",
  personCategory: "Person",
  personsLabel: "PERSON: show all person events",
  playClip: "Play clip",
  previousEvent: "Previous event",
  queryFailed: "Frigate query failed",
  refreshLabel: "Refresh every (s)",
  reel: "Reel (slideshow + thumbnail strip)",
  showAllLabel: "Show the ALL filter chip",
  slideshowLabel: "Slideshow interval (s, 0 = off)",
  sortLabel: "Sort order",
  sortNewest: "Newest first",
  sortOldest: "Oldest first",
  subLabelsHelp: "Pick couriers or type custom values - leave empty to disable sub_label filtering",
  subLabelsLabel: "Couriers / sub labels",
  timeline: "Timeline (brand-colored time pills + slideshow)",
  timeRange: "Time range",
  unrecognizedLabel: "OTHER: show vehicle stops without a courier logo",
  unrecognizedMinDurationLabel: "OTHER: minimum stop duration (s)",
  viewLabel: "View",
  viewPlayback: "View & playback",
  yesterday: "yesterday",
  zonesHelp: "Optional, type your Frigate zone names, e.g. mailbox",
  zonesLabel: "Zones"
};
const translations = { de, en };
function resolveLanguage(language) {
  const detected = language?.trim() || (typeof document !== "undefined" ? document.documentElement.lang : "") || (typeof navigator !== "undefined" ? navigator.language : "") || "en";
  try {
    return Intl.getCanonicalLocales(detected)[0] ?? "en";
  } catch {
    return "en";
  }
}
function resolveLocale(language) {
  const detected = resolveLanguage(language).toLowerCase();
  if (detected in translations) return detected;
  const base = detected.split("-")[0] ?? "en";
  return base in translations ? base : "en";
}
function getTranslations(language) {
  return translations[resolveLocale(language)];
}
function localize(key, language, replacements = {}) {
  const catalog = translations[resolveLocale(language)];
  const template = catalog[key] ?? en[key] ?? key;
  return Object.entries(replacements).reduce(
    (value, [name, replacement]) => value.replaceAll(`{${name}}`, String(replacement)),
    template
  );
}
const FDC_VERSION = "1.28.0";
const FDC_COLORS = {
  dhl: { bg: "#FFCC00", fg: "#D40511" },
  dpd: { bg: "#DC0032", fg: "#FFFFFF" },
  gls: { bg: "#061AB1", fg: "#FFD100" },
  ups: { bg: "#351C15", fg: "#FFB500" },
  amazon: { bg: "#232F3E", fg: "#FF9900" },
  hermes: { bg: "#0091DF", fg: "#FFFFFF" },
  fedex: { bg: "#4D148C", fg: "#FF6600" },
  usps: { bg: "#333366", fg: "#FFFFFF" },
  postnl: { bg: "#FF6200", fg: "#001A70" },
  postnord: { bg: "#00A0D6", fg: "#FFFFFF" },
  royal_mail: { bg: "#DA202A", fg: "#FFDD00" },
  an_post: { bg: "#00594C", fg: "#FFFFFF" },
  canada_post: { bg: "#E31837", fg: "#FFFFFF" },
  purolator: { bg: "#003087", fg: "#FFFFFF" },
  nzpost: { bg: "#E4002B", fg: "#FFFFFF" },
  person: { bg: "#00897B", fg: "#FFFFFF" },
  other: { bg: "#607D8B", fg: "#FFFFFF" }
};
const fdcLanguage = (hass, internationalization) => resolveLanguage(
  internationalization?.locale?.language ?? internationalization?.language ?? hass?.locale?.language ?? hass?.language
);
const escapeHtml = (value) => String(value ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
const FDC_SCHEMA = (copy) => [
  { name: "camera", required: true, selector: { text: {} } },
  {
    name: "sub_labels",
    selector: {
      select: {
        multiple: true,
        custom_value: true,
        options: [
          // every courier logo the current Frigate+ model supports (hermes is
          // still only a candidate label - type it manually if you need it)
          "dhl",
          "dpd",
          "gls",
          "ups",
          "amazon",
          "fedex",
          "usps",
          "postnl",
          "postnord",
          "royal_mail",
          "an_post",
          "canada_post",
          "purolator",
          "nzpost"
        ]
      }
    }
  },
  {
    name: "",
    type: "expandable",
    title: copy.viewPlayback,
    icon: "mdi:palette-outline",
    schema: [
      {
        name: "view",
        required: true,
        selector: {
          select: {
            mode: "dropdown",
            options: [
              { value: "reel", label: copy.reel },
              { value: "timeline", label: copy.timeline }
            ]
          }
        }
      },
      {
        name: "sort",
        required: true,
        selector: {
          select: {
            mode: "dropdown",
            options: [
              { value: "newest", label: copy.sortNewest },
              { value: "oldest", label: copy.sortOldest }
            ]
          }
        }
      },
      { name: "show_all", selector: { boolean: {} } },
      { name: "clips", selector: { boolean: {} } },
      {
        type: "grid",
        name: "",
        schema: [
          { name: "slideshow", selector: { number: { min: 0, max: 60, mode: "box" } } },
          { name: "refresh", selector: { number: { min: 10, max: 3600, mode: "box" } } }
        ]
      }
    ]
  },
  {
    name: "",
    type: "expandable",
    title: copy.appearance,
    icon: "mdi:palette-outline",
    schema: [
      {
        name: "fit_mode",
        required: true,
        selector: {
          select: {
            mode: "dropdown",
            options: [
              { value: "contain", label: copy.fitContain },
              { value: "cover", label: copy.fitCover }
            ]
          }
        }
      }
    ]
  },
  {
    name: "",
    type: "expandable",
    title: copy.timeRange,
    icon: "mdi:clock-outline",
    schema: [
      {
        name: "period",
        required: true,
        selector: {
          select: {
            mode: "dropdown",
            options: [
              { value: "hours", label: copy.periodHours },
              { value: "today", label: copy.periodToday }
            ]
          }
        }
      },
      {
        type: "grid",
        name: "",
        schema: [
          { name: "hours", selector: { number: { min: 1, max: 720, mode: "box" } } },
          { name: "limit", selector: { number: { min: 1, max: 500, mode: "box" } } }
        ]
      }
    ]
  },
  {
    name: "",
    type: "expandable",
    title: copy.extraCategories,
    icon: "mdi:shape-plus",
    schema: [
      { name: "unrecognized", selector: { boolean: {} } },
      { name: "unrecognized_min_duration", selector: { number: { min: 5, max: 600, mode: "box" } } },
      { name: "persons", selector: { boolean: {} } }
    ]
  },
  {
    name: "",
    type: "expandable",
    title: copy.advanced,
    icon: "mdi:tune",
    schema: [
      {
        name: "labels",
        selector: {
          select: { multiple: true, custom_value: true, options: ["person", "car", "package", "bicycle", "motorcycle"] }
        }
      },
      {
        name: "zones",
        selector: { select: { multiple: true, custom_value: true, options: [] } }
      },
      { name: "instance_id", selector: { text: {} } }
    ]
  }
];
const FDC_HELPERS = (copy) => ({
  sub_labels: copy.subLabelsHelp,
  labels: copy.labelsHelp,
  zones: copy.zonesHelp,
  camera: copy.cameraHelp,
  fit_mode: copy.fitModeHelp
});
const FDC_LABELS = (copy) => ({
  camera: copy.cameraLabel,
  sub_labels: copy.subLabelsLabel,
  view: copy.viewLabel,
  sort: copy.sortLabel,
  show_all: copy.showAllLabel,
  clips: copy.clipsLabel,
  fit_mode: copy.fitModeLabel,
  slideshow: copy.slideshowLabel,
  refresh: copy.refreshLabel,
  period: copy.periodLabel,
  hours: copy.hoursLabel,
  limit: copy.limitLabel,
  unrecognized: copy.unrecognizedLabel,
  unrecognized_min_duration: copy.unrecognizedMinDurationLabel,
  persons: copy.personsLabel,
  labels: copy.labelsLabel,
  zones: copy.zonesLabel,
  instance_id: copy.instanceIdLabel
});
class FrigateDeliveryCardEditor extends HTMLElement {
  connectedCallback() {
    if (!this._languageObserver && typeof MutationObserver !== "undefined") {
      this._languageObserver = new MutationObserver(() => {
        if (!this._internationalization) this._render();
      });
      this._languageObserver.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["lang"]
      });
    }
    if (!this._unsubscribeInternationalization) {
      const event = new CustomEvent("context-request", {
        bubbles: true,
        composed: true,
        cancelable: true
      });
      event.context = "hassInternationalization";
      event.subscribe = true;
      event.callback = (internationalization, unsubscribe) => {
        const previousLanguage = this._language();
        this._internationalization = internationalization;
        this._unsubscribeInternationalization = unsubscribe;
        if (this._language() !== previousLanguage) this._render();
      };
      this.dispatchEvent(event);
    }
  }
  disconnectedCallback() {
    if (this._unsubscribeInternationalization) this._unsubscribeInternationalization();
    this._unsubscribeInternationalization = null;
    if (this._languageObserver) this._languageObserver.disconnect();
    this._languageObserver = null;
  }
  _language() {
    return fdcLanguage(this._hass, this._internationalization);
  }
  setConfig(config) {
    this._config = config || {};
    this._render();
  }
  set hass(h) {
    const previousLanguage = this._language();
    this._hass = h;
    if (this._form) this._form.hass = h;
    if (this._language() !== previousLanguage) this._render();
  }
  _render() {
    const copy = getTranslations(this._language());
    const labels = FDC_LABELS(copy);
    const helpers = FDC_HELPERS(copy);
    if (!this._form) {
      this.style.display = "block";
      this.style.padding = "0 4px 4px";
      this.style.overflow = "visible";
      this._form = document.createElement("ha-form");
      this._form.addEventListener("value-changed", (ev) => {
        const cfg = { ...this._config, ...ev.detail.value };
        this._config = cfg;
        this.dispatchEvent(
          new CustomEvent("config-changed", { detail: { config: cfg }, bubbles: true, composed: true })
        );
      });
      this.appendChild(this._form);
    }
    this._form.computeLabel = (s) => labels[s.name] || s.name;
    this._form.computeHelper = (s) => helpers[s.name];
    this._form.hass = this._hass;
    this._form.data = {
      view: "reel",
      sort: "newest",
      clips: true,
      fit_mode: "contain",
      show_all: true,
      unrecognized: false,
      unrecognized_min_duration: 30,
      persons: false,
      period: "hours",
      hours: 24,
      slideshow: 6,
      limit: 100,
      refresh: 120,
      instance_id: "frigate",
      sub_labels: ["dhl", "dpd", "gls", "ups", "amazon", "fedex", "usps", "postnl", "postnord", "royal_mail", "an_post", "canada_post", "purolator", "nzpost"],
      ...this._config
    };
    this._form.schema = FDC_SCHEMA(copy);
  }
}
customElements.define("frigate-delivery-card-editor", FrigateDeliveryCardEditor);
class FrigateDeliveryCard extends HTMLElement {
  static getConfigElement() {
    return document.createElement("frigate-delivery-card-editor");
  }
  static getStubConfig() {
    return {
      camera: "entrance",
      sub_labels: ["dhl", "dpd", "gls", "ups", "amazon", "fedex", "usps", "postnl", "postnord", "royal_mail", "an_post", "canada_post", "purolator", "nzpost"],
      hours: 24
    };
  }
  setConfig(cfg) {
    if (!cfg.camera && !cfg.cameras) {
      throw new Error(localize("missingCameraError", this._language()));
    }
    const previousCfg = this._cfg;
    this._cfg = Object.assign(
      {
        instance_id: "frigate",
        camera: null,
        cameras: null,
        labels: null,
        // optional: e.g. ["person"]
        sub_labels: ["dhl", "dpd", "gls", "ups", "amazon", "fedex", "usps", "postnl", "postnord", "royal_mail", "an_post", "canada_post", "purolator", "nzpost"],
        zones: null,
        // optional: e.g. ["mailbox"]
        view: "reel",
        // "reel" | "timeline"
        sort: "newest",
        // "newest" | "oldest"
        fit_mode: "contain",
        // "contain" | "cover" for recording playback
        clips: true,
        // show the clip playback button (requires record enabled in Frigate)
        show_all: true,
        // show the ALL filter chip (total count + one-tap filter reset)
        unrecognized: false,
        // also show long vehicle stops without a courier logo
        unrecognized_min_duration: 30,
        // seconds a vehicle must stay to count as a stop
        persons: false,
        // also show every person event as a PERSON category
        period: "hours",
        // "hours" = rolling window | "today" = since local midnight
        hours: 24,
        // only used when period === "hours"
        limit: 100,
        slideshow: 6,
        // seconds; 0 disables auto-advance
        refresh: 120
        // seconds between refetches
      },
      cfg
    );
    for (const k of ["sub_labels", "labels", "zones"]) {
      if (Array.isArray(this._cfg[k])) {
        this._cfg[k] = this._cfg[k].map((v) => String(v).trim()).filter((v) => v);
        if (!this._cfg[k].length && k !== "sub_labels") this._cfg[k] = null;
      }
    }
    if (!["reel", "timeline"].includes(this._cfg.view)) this._cfg.view = "reel";
    if (!["newest", "oldest"].includes(this._cfg.sort)) this._cfg.sort = "newest";
    if (!["contain", "cover"].includes(this._cfg.fit_mode)) this._cfg.fit_mode = "contain";
    this._cfg.clips = this._cfg.clips !== false;
    const withoutGridOptions = (config) => {
      const comparable = { ...config };
      delete comparable.grid_options;
      return JSON.stringify(comparable);
    };
    const sizingOnly = previousCfg && withoutGridOptions(previousCfg) === withoutGridOptions(this._cfg);
    if (!sizingOnly) {
      this._events = [];
      this._loaded = false;
      this._idx = 0;
      this._filter = null;
      this._hover = false;
      this._playing = false;
      this._clipFor = null;
    }
    if (this.shadowRoot) {
      const card = this.shadowRoot.querySelector("ha-card");
      if (card) card.classList.toggle("fixed-height", this._hasFixedGridRows());
      this._scheduleResizeCheck();
    }
  }
  getGridOptions() {
    const timeline = this._cfg?.view === "timeline";
    return {
      columns: 12,
      min_columns: 6,
      rows: "auto",
      min_rows: timeline ? 3 : 4
    };
  }
  getCardSize() {
    const height = this.shadowRoot?.querySelector("ha-card")?.getBoundingClientRect().height;
    return height > 0 ? Math.max(1, Math.ceil(height / 50)) : 6;
  }
  connectedCallback() {
    if (!this._languageObserver && typeof MutationObserver !== "undefined") {
      this._languageObserver = new MutationObserver(() => {
        if (!this._internationalization && this._loaded) this._render();
      });
      this._languageObserver.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["lang"]
      });
    }
    if (!this._unsubscribeInternationalization) {
      const event = new CustomEvent("context-request", {
        bubbles: true,
        composed: true,
        cancelable: true
      });
      event.context = "hassInternationalization";
      event.subscribe = true;
      event.callback = (internationalization, unsubscribe) => {
        const previousLanguage = this._language();
        this._internationalization = internationalization;
        this._unsubscribeInternationalization = unsubscribe;
        if (this._language() !== previousLanguage && this._loaded) this._render();
      };
      this.dispatchEvent(event);
    }
    if (this.shadowRoot) this._startResizeObserver();
  }
  set hass(h) {
    const hadHass = Boolean(this._hass);
    const previousLanguage = this._language();
    this._hass = h;
    if (!this.shadowRoot) this._build();
    if (hadHass && this._language() !== previousLanguage && this._loaded) this._render();
    if (!this._booted) {
      this._booted = true;
      this._fetch();
      this._poll = setInterval(() => this._fetch(), this._cfg.refresh * 1e3);
      this._scheduleMidnight();
      this._startShow();
    }
  }
  disconnectedCallback() {
    if (this._poll) clearInterval(this._poll);
    if (this._mid) clearTimeout(this._mid);
    this._stopClip();
    this._stopShow();
    this._poll = null;
    this._mid = null;
    this._booted = false;
    if (this._resizeObserver) this._resizeObserver.disconnect();
    this._resizeObserver = null;
    if (this._resizeFrame) cancelAnimationFrame(this._resizeFrame);
    this._resizeFrame = null;
    if (this._unsubscribeInternationalization) this._unsubscribeInternationalization();
    this._unsubscribeInternationalization = null;
    if (this._languageObserver) this._languageObserver.disconnect();
    this._languageObserver = null;
  }
  _language() {
    return fdcLanguage(this._hass, this._internationalization);
  }
  _t(key, replacements) {
    return localize(key, this._language(), replacements);
  }
  _companyLabel(company) {
    if (company === "person") return this._t("personCategory");
    if (company === "other") return this._t("otherCategory");
    return company.replace(/_/g, " ");
  }
  _hasFixedGridRows() {
    const rows = this._cfg?.grid_options?.rows;
    return typeof rows === "number" && Number.isFinite(rows);
  }
  _startResizeObserver() {
    if (this._resizeObserver || typeof ResizeObserver === "undefined") return;
    const card = this.shadowRoot?.querySelector("ha-card");
    const body = this.shadowRoot?.getElementById("body");
    if (!card || !body) return;
    this._resizeObserver = new ResizeObserver(() => this._scheduleResizeCheck());
    this._resizeObserver.observe(this);
    this._resizeObserver.observe(card);
    this._resizeObserver.observe(body);
    this._scheduleResizeCheck();
  }
  _scheduleResizeCheck() {
    if (this._resizeFrame || !this.isConnected) return;
    this._resizeFrame = requestAnimationFrame(() => {
      this._resizeFrame = null;
      this._updateHeightMode();
    });
  }
  /**
   * Detect a height-constrained editor preview without involving rendering or
   * card state. The observer is deliberately limited to measuring geometry and
   * toggling one layout class so a resize cannot restart video or data loading.
   */
  _updateHeightMode() {
    const card = this.shadowRoot?.querySelector("ha-card");
    const body = this.shadowRoot?.getElementById("body");
    if (!card || !body) return;
    if (this._hasFixedGridRows()) {
      card.classList.add("fixed-height");
      return;
    }
    card.classList.remove("fixed-height");
    const tolerance = 1;
    const hostRect = this.getBoundingClientRect();
    const cardRect = card.getBoundingClientRect();
    const measured = [body, ...body.children];
    const cardOutsideHost = cardRect.top < hostRect.top - tolerance || cardRect.left < hostRect.left - tolerance || cardRect.right > hostRect.right + tolerance || cardRect.bottom > hostRect.bottom + tolerance;
    const outsideCard = measured.some((element) => {
      const rect = element.getBoundingClientRect();
      return rect.top < cardRect.top - tolerance || rect.left < cardRect.left - tolerance || rect.right > cardRect.right + tolerance || rect.bottom > cardRect.bottom + tolerance;
    });
    const verticallyClipped = [this, card, body, ...body.children].some(
      (element) => element.scrollHeight > element.clientHeight + tolerance
    );
    card.classList.toggle("fixed-height", cardOutsideHost || outsideCard || verticallyClipped);
  }
  /** In "today" mode, wipe the reel promptly when the day rolls over. */
  _scheduleMidnight() {
    if (this._mid) clearTimeout(this._mid);
    this._mid = null;
    if (this._cfg.period !== "today") return;
    const next = /* @__PURE__ */ new Date();
    next.setHours(24, 0, 5, 0);
    this._mid = setTimeout(() => {
      this._fetch();
      this._scheduleMidnight();
    }, next.getTime() - Date.now());
  }
  _startShow() {
    this._stopShow();
    const s = Number(this._cfg.slideshow);
    if (s > 0)
      this._show = setInterval(() => {
        if (!this._hover && !this._playing && this._list().length > 1) {
          this._idx = (this._idx + 1) % this._list().length;
          this._render();
        }
      }, s * 1e3);
  }
  _stopShow() {
    if (this._show) {
      clearInterval(this._show);
      this._show = null;
    }
  }
  /** Unix timestamp (s) that events must start after. */
  _after() {
    if (this._cfg.period === "today") {
      const d = /* @__PURE__ */ new Date();
      d.setHours(0, 0, 0, 0);
      return Math.floor(d.getTime() / 1e3);
    }
    return Math.floor(Date.now() / 1e3) - this._cfg.hours * 3600;
  }
  /** Localized wording for the current time range, used in the empty state. */
  _emptyMessage() {
    if (this._cfg.period === "today") return this._t("noMatchingToday");
    const hours = Number(this._cfg.hours);
    return hours === 1 ? this._t("noMatchingLastHour") : this._t("noMatchingLastHours", { hours });
  }
  async _fetch() {
    if (!this._hass) return;
    const c = this._cfg;
    const msg = {
      type: "frigate/events/get",
      instance_id: c.instance_id,
      cameras: c.cameras || [c.camera],
      after: this._after(),
      limit: c.limit
    };
    if (Array.isArray(c.labels) && c.labels.length) msg.labels = c.labels;
    if (Array.isArray(c.sub_labels) && c.sub_labels.length) msg.sub_labels = c.sub_labels;
    if (Array.isArray(c.zones) && c.zones.length) msg.zones = c.zones;
    try {
      let res = await this._hass.callWS(msg);
      if (typeof res === "string") res = JSON.parse(res);
      let raw = Array.isArray(res) ? res : [];
      if (c.unrecognized && Array.isArray(c.sub_labels) && c.sub_labels.length) {
        const msg2 = { ...msg, labels: ["car"] };
        delete msg2.sub_labels;
        let res2 = await this._hass.callWS(msg2);
        if (typeof res2 === "string") res2 = JSON.parse(res2);
        const seen = new Set(raw.map((e) => e.id));
        const minDur = Number(c.unrecognized_min_duration) > 0 ? Number(c.unrecognized_min_duration) : 30;
        for (const e of Array.isArray(res2) ? res2 : []) {
          if (seen.has(e.id) || e.sub_label) continue;
          const end = e.end_time || Date.now() / 1e3;
          if (end - e.start_time < minDur) continue;
          raw.push({ ...e, __unrecognized: true });
        }
      }
      if (c.persons && Array.isArray(c.sub_labels) && c.sub_labels.length) {
        const msg3 = { ...msg, labels: ["person"] };
        delete msg3.sub_labels;
        let res3 = await this._hass.callWS(msg3);
        if (typeof res3 === "string") res3 = JSON.parse(res3);
        const seenP = new Set(raw.map((e) => e.id));
        for (const e of Array.isArray(res3) ? res3 : []) {
          if (seenP.has(e.id)) continue;
          raw.push({ ...e, __person: true });
        }
      }
      const evs = raw.map((e) => ({
        id: e.id,
        co: e.__person ? "person" : e.__unrecognized ? "other" : String(Array.isArray(e.sub_label) ? e.sub_label[0] : e.sub_label || e.label || "").split(",")[0].trim().toLowerCase(),
        t: e.start_time
      })).filter((e) => e.id && e.co).sort((a, b) => c.sort === "oldest" ? a.t - b.t : b.t - a.t);
      const cur = this._list()[this._idx];
      this._events = evs;
      const keep = cur ? this._list().findIndex((e) => e.id === cur.id) : -1;
      this._idx = keep >= 0 ? keep : 0;
      this._err = null;
    } catch (e) {
      this._err = e && e.message || this._t("queryFailed");
    }
    this._loaded = true;
    if (!this._playing) this._render();
  }
  _list() {
    return this._filter ? this._events.filter((e) => e.co === this._filter) : this._events;
  }
  _img(id) {
    return `/api/frigate/notifications/${id}/snapshot.jpg`;
  }
  /** Small object-crop thumbnail - exists for every event, even without a saved snapshot. */
  _thumb(id) {
    return `/api/frigate/notifications/${id}/thumbnail.jpg`;
  }
  /** Inline playback of the full-quality clip as a plain progressive stream -
   *  starts within a couple of seconds and plays at full resolution. The
   *  scrubber only covers what has buffered so far; that's the honest trade-off
   *  of progressive streaming through the HA proxy (no range-request support). */
  _startClip(id) {
    this._stopClip();
    this._clipFor = id;
    this._playing = true;
    this._render();
  }
  _stopClip() {
    this._clipFor = null;
    this._playing = false;
  }
  _clip(id) {
    return `/api/frigate/notifications/${id}/clip.mp4`;
  }
  /** Pick the right clip source for this browser. Safari/iOS (incl. the HA
   *  companion app) refuses progressive MP4 from servers without range-request
   *  support - which the HA proxy lacks - but plays Frigate's HLS VOD natively.
   *  Everything else streams the MP4 directly. The HLS playlist path is signed
   *  via auth/sign_path; the Frigate integration pre-signs every segment URL. */
  async _clipSrc(id) {
    const probe = document.createElement("video");
    if (probe.canPlayType("application/vnd.apple.mpegurl")) {
      try {
        const signed = await this._hass.callWS({
          type: "auth/sign_path",
          path: `/api/frigate/vod/event/${id}/index.m3u8`,
          expires: 3600
        });
        return signed.path;
      } catch (e) {
      }
    }
    return this._clip(id);
  }
  _when(t) {
    const d = new Date(t * 1e3);
    const now = /* @__PURE__ */ new Date();
    const language = this._language();
    const timePreference = this._hass?.locale?.time_format;
    const timeOptions = { hour: "2-digit", minute: "2-digit" };
    if (timePreference === "12") timeOptions.hour12 = true;
    if (timePreference === "24") timeOptions.hour12 = false;
    const hm = new Intl.DateTimeFormat(language, timeOptions).format(d);
    if (d.toDateString() === now.toDateString()) return hm;
    const yest = new Date(now);
    yest.setDate(now.getDate() - 1);
    if (d.toDateString() === yest.toDateString()) {
      let yesterday = this._t("yesterday");
      try {
        yesterday = new Intl.RelativeTimeFormat(language, { numeric: "auto" }).format(-1, "day");
      } catch (e) {
      }
      return `${yesterday} ${hm}`;
    }
    const dateFormatter = new Intl.DateTimeFormat(language, {
      day: "2-digit",
      month: "2-digit",
      year: "numeric"
    });
    const datePreference = this._hass?.locale?.date_format;
    let date = dateFormatter.format(d);
    if (["DMY", "MDY", "YMD"].includes(datePreference)) {
      const parts = dateFormatter.formatToParts(d);
      const values = Object.fromEntries(parts.filter((part) => part.type !== "literal").map((part) => [part.type, part.value]));
      const separator = parts.find((part) => part.type === "literal")?.value || "/";
      const order = datePreference === "DMY" ? ["day", "month", "year"] : datePreference === "MDY" ? ["month", "day", "year"] : ["year", "month", "day"];
      date = order.map((part) => values[part]).join(separator);
    }
    return `${date} ${hm}`;
  }
  /** Inline style for a company badge; falls back to theme colors. */
  _badge(co) {
    const c = FDC_COLORS[co];
    return c ? `background:${c.bg};color:${c.fg};border-color:${c.bg}` : `background:var(--secondary-background-color);color:var(--primary-text-color);border-color:var(--divider-color)`;
  }
  _build() {
    const r = this.attachShadow({ mode: "open" });
    r.innerHTML = `<style>
      :host{display:block;width:100%;max-width:100%;min-width:0;height:100%;container-type:inline-size}
      *,*::before,*::after{box-sizing:border-box}
      ha-card{width:100%;max-width:100%;min-width:0;height:100%;overflow:hidden}
      #body,#body>*{min-width:0}
      .chips{display:flex;gap:clamp(4px,1.2cqi,6px);padding:clamp(7px,2cqi,10px) clamp(8px,2.4cqi,12px) 0;flex-wrap:wrap;min-width:0}
      .chip{max-width:100%;border-radius:16px;padding:clamp(7px,2cqi,9px) clamp(10px,3cqi,14px);font-size:clamp(11px,2.8cqi,12px);cursor:pointer;
        background:var(--secondary-background-color);color:var(--primary-text-color);
        border:1px solid var(--divider-color);text-transform:uppercase;letter-spacing:.5px;
        font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;touch-action:manipulation}
      .chip.on{box-shadow:0 0 0 2.5px var(--primary-color)}
      .chip.all.on{background:var(--primary-color);color:var(--text-primary-color,#fff);border-color:var(--primary-color)}
      .badge{min-width:0;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.8px;font-weight:700;font-size:clamp(11px,2.7cqi,12px);
        border-radius:12px;padding:2px clamp(7px,2.2cqi,10px);border:1px solid transparent;flex:none}
      .tl{display:flex;gap:clamp(4px,1.2cqi,6px);padding:clamp(7px,2cqi,10px) clamp(8px,2.4cqi,12px) 0;overflow-x:auto;min-width:0;
        scrollbar-width:none;-ms-overflow-style:none}
      .tl::-webkit-scrollbar{display:none}
      .pill{border-radius:16px;padding:clamp(7px,2cqi,9px) clamp(10px,3cqi,14px);font-size:clamp(11px,2.8cqi,12px);font-weight:700;cursor:pointer;
        border:1px solid transparent;flex:none;letter-spacing:.5px;line-height:1.2;
        text-transform:uppercase;white-space:nowrap;touch-action:manipulation}
      .stage{position:relative;min-width:0;margin:clamp(7px,2cqi,10px) clamp(8px,2.4cqi,12px);border-radius:var(--ha-card-border-radius,12px);overflow:hidden;
        aspect-ratio:16/9;background:var(--secondary-background-color);cursor:pointer}
      .stage img{width:100%;height:100%;object-fit:cover;display:block}
      .stage video{width:100%;height:100%;object-fit:${this._cfg.fit_mode};background:#000;display:block}
      .cliperr{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;
        color:#fff;background:#000;font-size:clamp(12px,3cqi,14px);padding:clamp(12px,4cqi,20px);text-align:center;line-height:1.5;overflow:auto}
      .cap{position:absolute;z-index:1;inset-inline:0;bottom:0;min-width:0;padding:clamp(16px,4cqi,20px) clamp(10px,3cqi,14px) clamp(7px,2cqi,10px);color:#fff;font-size:clamp(12px,3.2cqi,14px);font-weight:500;
        background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;gap:8px;justify-content:space-between;align-items:baseline;pointer-events:none}
      .cap>span:last-child{min-width:0;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:end}
      .cap .badge{font-size:clamp(11px,2.8cqi,12px)}
      .nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:clamp(34px,9cqi,40px);height:clamp(34px,9cqi,40px);border-radius:50%;
        background:rgba(0,0,0,.45);color:#fff;border:0;font-size:clamp(18px,5cqi,22px);cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
      .nav:hover{background:rgba(0,0,0,.7)}
      .prev{inset-inline-start:clamp(6px,2cqi,8px)}.next{inset-inline-end:clamp(6px,2cqi,8px)}
      .playbtn{position:absolute;z-index:2;inset-inline-end:clamp(7px,2.5cqi,10px);top:clamp(7px,2.5cqi,10px);width:clamp(36px,9cqi,40px);height:clamp(36px,9cqi,40px);border-radius:50%;
        background:rgba(0,0,0,.5);color:#fff;border:0;cursor:pointer;padding:0;line-height:0;
        display:flex;align-items:center;justify-content:center;transition:background .15s ease;touch-action:manipulation}
      .playbtn:hover{background:rgba(0,0,0,.78)}
      .playbtn svg{display:block;margin-left:2px}
      .playbtn.fs{inset-inline-end:clamp(50px,12cqi,58px)}
      .playbtn.fs svg{margin-left:0}
      .thumbs{display:flex;min-width:0;gap:clamp(5px,1.6cqi,8px);overflow-x:auto;padding:0 clamp(8px,2.4cqi,12px) clamp(8px,2.4cqi,12px)}
      .thumbs img{width:clamp(72px,22cqi,96px);height:clamp(40px,12.4cqi,54px);object-fit:cover;border-radius:clamp(6px,1.8cqi,8px);cursor:pointer;opacity:.65;flex:none;
        border:2px solid transparent}
      .thumbs img.on{opacity:1;border-color:var(--primary-color)}
      .empty{min-width:0;padding:clamp(20px,6cqi,28px) clamp(12px,4cqi,16px);font-size:clamp(12px,3.2cqi,14px);line-height:1.45;text-align:center;color:var(--secondary-text-color);overflow-wrap:anywhere}
      ha-card.fixed-height{container-type:size}
      ha-card.fixed-height #body{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
      ha-card.fixed-height .chips{flex:none;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-inline:contain}
      ha-card.fixed-height .chip{flex:0 0 auto;max-width:calc(100% - 16px)}
      ha-card.fixed-height .tl,ha-card.fixed-height .thumbs{flex:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}
      ha-card.fixed-height .stage{flex:1 1 auto;min-height:96px;aspect-ratio:auto}
      ha-card.fixed-height .empty{display:flex;flex:1 1 auto;min-height:0;align-items:center;justify-content:center;overflow:auto}
      .lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}
      .lb img{max-width:96vw;max-height:96vh;border-radius:6px}
      .lb video{max-width:96vw;max-height:96vh;border-radius:6px;cursor:default}
      .lb video.crop{width:min(96vw,170.6667vh);height:min(54vw,96vh);object-fit:cover;background:#000}
      .lbmsg{color:#fff;text-align:center;font-size:14px;line-height:1.7;padding:24px;max-width:420px}
      .lb .playbtn{position:absolute;top:16px;inset-inline-end:16px}
      .lb .playbtn.lbplay{inset-inline-end:64px}
    </style><ha-card><div id="body"></div></ha-card>`;
    r.host.addEventListener("mouseenter", () => this._hover = true);
    r.host.addEventListener("mouseleave", () => this._hover = false);
    r.querySelector("ha-card").classList.toggle("fixed-height", this._hasFixedGridRows());
    this._startResizeObserver();
  }
  _render() {
    const b = this.shadowRoot && this.shadowRoot.getElementById("body");
    if (!b) return;
    if (this._err) {
      b.innerHTML = `<div class="empty">${escapeHtml(this._err)}</div>`;
      this._scheduleResizeCheck();
      return;
    }
    const view = this._cfg.view;
    const list = this._list();
    const rank = (x) => x === "other" ? 2 : x === "person" ? 1 : 0;
    const companies = [...new Set(this._events.map((e) => e.co))].sort((a, b2) => rank(a) - rank(b2));
    const chips = this._events.length && view !== "timeline" ? `<div class="chips">
          ${this._cfg.show_all !== false ? `<button class="chip all ${this._filter ? "" : "on"}" data-co="">${this._filter ? "" : "&#10003; "}${escapeHtml(this._t("all"))} (${this._events.length})</button>` : ""}
          ${companies.map(
      (c) => `<button class="chip ${this._filter === c ? "on" : ""}" style="${this._badge(c)}" data-co="${escapeHtml(c)}">${this._filter === c ? "&#10003; " : ""}${escapeHtml(this._companyLabel(c))} (${this._events.filter((e) => e.co === c).length})</button>`
    ).join("")}
        </div>` : "";
    if (!list.length) {
      b.innerHTML = chips + `<div class="empty">${escapeHtml(this._emptyMessage())}</div>`;
    } else {
      if (this._idx >= list.length) this._idx = 0;
      const ev = list[this._idx];
      const tl = view === "timeline" ? `<div class="tl">${list.map(
        (e, i) => `<button class="pill ${i === this._idx ? "on" : ""}" style="${this._badge(e.co)}" title="${escapeHtml(this._companyLabel(e.co))}" data-i="${i}">${i === this._idx ? "&#10003; " : ""}${this._when(e.t)}</button>`
      ).join("")}</div>` : "";
      const media = this._playing === true ? `<video id="clipvid" controls autoplay playsinline></video>` : this._playing === "error" ? `<div class="cliperr">${escapeHtml(this._t("clipUnavailable"))}<br>${escapeHtml(this._t("clipRequiresRecord"))}</div>` : `<img src="${escapeHtml(this._img(ev.id))}" alt="${escapeHtml(this._t("eventSnapshot", { company: this._companyLabel(ev.co) }))}" onerror="this.onerror=null;this.src='${escapeHtml(this._thumb(ev.id))}'">`;
      const stage = `
        <div class="stage" id="stage">
          ${media}
          ${list.length > 1 && !this._playing ? `<button class="nav prev" id="prev" title="${escapeHtml(this._t("previousEvent"))}" aria-label="${escapeHtml(this._t("previousEvent"))}">&#8249;</button><button class="nav next" id="next" title="${escapeHtml(this._t("nextEvent"))}" aria-label="${escapeHtml(this._t("nextEvent"))}">&#8250;</button>` : ""}
          ${this._cfg.clips ? this._playing ? `<button class="playbtn" id="play" title="${escapeHtml(this._t("backToImage"))}" aria-label="${escapeHtml(this._t("backToImage"))}"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg></button>` : `<button class="playbtn" id="play" title="${escapeHtml(this._t("playClip"))}" aria-label="${escapeHtml(this._t("playClip"))}"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg></button>` : ""}
          ${this._playing ? "" : `<button class="playbtn fs" id="fs" title="${escapeHtml(this._t("fullscreen"))}" aria-label="${escapeHtml(this._t("fullscreen"))}"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" fill="none"/></svg></button>`}
          ${this._playing === true ? "" : `<div class="cap"><span class="badge" style="${this._badge(ev.co)}">${escapeHtml(this._companyLabel(ev.co))}</span><span>${escapeHtml(this._when(
        ev.t
      ))} &#183; ${this._idx + 1}/${list.length}</span></div>`}
        </div>`;
      const thumbs = view === "reel" ? `<div class="thumbs">${list.map(
        (e, i) => `<img src="${escapeHtml(this._img(e.id))}" class="${i === this._idx ? "on" : ""}" data-i="${i}" alt="${escapeHtml(this._t("eventThumbnail", { company: this._companyLabel(e.co) }))}" onerror="this.onerror=null;this.src='${escapeHtml(this._thumb(e.id))}'">`
      ).join("")}</div>` : "";
      b.innerHTML = chips + tl + stage + thumbs;
      const go = (i) => {
        this._idx = (i + list.length) % list.length;
        this._stopClip();
        this._render();
      };
      const q = (s) => b.querySelector(s);
      if (q("#prev")) q("#prev").onclick = (e) => {
        e.stopPropagation();
        go(this._idx - 1);
      };
      if (q("#next")) q("#next").onclick = (e) => {
        e.stopPropagation();
        go(this._idx + 1);
      };
      if (q("#fs"))
        q("#fs").onclick = (e) => {
          e.stopPropagation();
          this._lightbox(ev.id);
        };
      const stageImg = q(".stage > img");
      if (stageImg) stageImg.onclick = () => this._lightbox(ev.id);
      if (q("#play"))
        q("#play").onclick = (e) => {
          e.stopPropagation();
          if (this._playing) {
            this._stopClip();
            this._render();
          } else {
            this._startClip(ev.id);
          }
        };
      const vid = q("#clipvid");
      if (vid) {
        this._clipSrc(ev.id).then((src) => {
          if (this._playing === true && this._clipFor === ev.id && vid.isConnected) vid.src = src;
        });
        vid.onerror = () => {
          if (!vid.src) return;
          this._stopClip();
          this._playing = "error";
          this._render();
        };
      }
      b.querySelectorAll(".thumbs img").forEach((el) => el.onclick = () => go(Number(el.dataset.i)));
      b.querySelectorAll(".pill").forEach((el) => el.onclick = () => go(Number(el.dataset.i)));
      const onPill = b.querySelector(".pill.on");
      if (onPill) onPill.scrollIntoView({ block: "nearest", inline: "nearest" });
    }
    b.querySelectorAll(".chip").forEach(
      (el) => el.onclick = () => {
        const co = el.dataset.co || null;
        this._filter = co === this._filter ? null : co;
        this._idx = 0;
        this._stopClip();
        this._render();
      }
    );
    this._scheduleResizeCheck();
  }
  _lightbox(id) {
    const d = document.createElement("div");
    d.className = "lb";
    d.setAttribute("role", "dialog");
    d.setAttribute("aria-modal", "true");
    d.innerHTML = `
      <img src="${escapeHtml(this._img(id))}" alt="" onerror="this.onerror=null;this.src='${escapeHtml(this._thumb(id))}'">
      ${this._cfg.clips ? `<button class="playbtn lbplay" title="${escapeHtml(this._t("playClip"))}" aria-label="${escapeHtml(this._t("playClip"))}"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg></button>` : ""}
      <button class="playbtn lbclose" title="${escapeHtml(this._t("close"))}" aria-label="${escapeHtml(this._t("close"))}"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg></button>`;
    d.onclick = () => d.remove();
    d.querySelector(".lbclose").onclick = (e) => {
      e.stopPropagation();
      d.remove();
    };
    const pb = d.querySelector(".lbplay");
    if (pb)
      pb.onclick = (e) => {
        e.stopPropagation();
        const img = d.querySelector("img");
        if (img) img.remove();
        pb.remove();
        const v = document.createElement("video");
        v.classList.toggle("crop", this._cfg.fit_mode === "cover");
        v.controls = true;
        v.autoplay = true;
        v.playsInline = true;
        v.onclick = (ev2) => ev2.stopPropagation();
        v.onerror = () => {
          if (!v.src) return;
          v.replaceWith(
            Object.assign(document.createElement("div"), {
              className: "lbmsg",
              innerHTML: `${escapeHtml(this._t("clipUnavailable"))}<br>${escapeHtml(this._t("clipRequiresRecord"))}`
            })
          );
        };
        d.insertBefore(v, d.querySelector(".lbclose"));
        this._clipSrc(id).then((src) => {
          if (v.isConnected) v.src = src;
        });
      };
    this.shadowRoot.appendChild(d);
  }
}
customElements.define("frigate-delivery-card", FrigateDeliveryCard);
if (!customElements.get("delivery-reel-card")) {
  customElements.define("delivery-reel-card", class extends FrigateDeliveryCard {
  });
}
window.customCards = window.customCards || [];
const registrationCopy = getTranslations();
window.customCards.push({
  type: "frigate-delivery-card",
  name: "Frigate Delivery Card",
  description: registrationCopy.customCardDescription
});
window.customCards.push({
  type: "delivery-reel-card",
  name: registrationCopy.legacyCardName,
  description: registrationCopy.legacyCardDescription
});
console.info(
  `%c FRIGATE-DELIVERY-CARD %c v${FDC_VERSION} `,
  "color:#fff;background:#03a9f4;font-weight:700",
  "color:#03a9f4;background:#fff;font-weight:700"
);