`;
const actionEntities = {
previous: s.previous_button,
next: s.next_button,
refresh: s.refresh_button,
};
wrap.querySelectorAll("button.act").forEach((b) => {
b.addEventListener("click", () => {
const id = actionEntities[b.dataset.act];
if (id && this._hass) {
this._hass.callService("button", "press", { entity_id: id });
}
});
});
}
/** Apply a live settings change by calling the appropriate service on
* the backing integration entity. */
_applyLive(field, value) {
const s = this._siblings;
const hass = this._hass;
if (!s || !hass) return;
const id = s[field];
if (!id) return;
if (field === "paused") {
hass.callService("switch", value ? "turn_on" : "turn_off", {
entity_id: id,
});
} else if (
field === "date_filter" ||
field === "missing_date_mode" ||
field === "portrait_mode" ||
field === "order_mode"
) {
hass.callService("select", "select_option", {
entity_id: id,
option: value,
});
} else if (
field === "slide_interval" ||
field === "custom_lookback_days" ||
field === "shuffle_age_bias" ||
field === "pair_divider_px" ||
field === "pair_min_gap_percent"
) {
hass.callService("number", "set_value", {
entity_id: id,
value: Number(value),
});
} else if (field === "pair_divider_color") {
hass.callService("text", "set_value", {
entity_id: id,
value: String(value),
});
}
}
_valueChanged(ev) {
ev.stopPropagation();
const data = ev?.detail?.value || {};
// A changed live_* field maps to an integration entity, not card
// config: route it to a service call and stop. Only one field changes
// per event, so the first difference we find is the edit.
if (this._siblings) {
for (const field of LIVE_FIELDS) {
const key = `live_${field}`;
if (
key in data &&
this._siblings[field] &&
data[key] !== this._liveData[key]
) {
this._applyLive(field, data[key]);
this._liveData = { ...this._liveData, [key]: data[key] };
return;
}
}
}
const n = { type: "custom:album-slideshow-card" };
const photoControls = normalizePhotoControls(data.photo_controls);
if (photoControls === "always") n.photo_controls = true;
if (photoControls === "on_demand") n.photo_controls = "on_demand";
if (data.entity) n.entity = data.entity;
const t = data.transition || DEFAULTS.transition;
if (t !== DEFAULTS.transition) n.transition = t;
const dur = Number(data.duration);
if (!isNaN(dur) && dur !== DEFAULTS.duration) n.duration = dur;
const easing = data.easing || DEFAULTS.easing;
if (easing !== DEFAULTS.easing) n.easing = easing;
const aspect = (data.aspect_ratio || "").trim();
if (aspect && aspect !== DEFAULTS.aspect_ratio) n.aspect_ratio = aspect;
const fit = data.fit || DEFAULTS.fit;
if (fit !== DEFAULTS.fit) n.fit = fit;
const bg = (data.background || "").trim();
if (bg) n.background = bg;
const ta = data.tap_action || DEFAULTS.tap_action;
if (ta !== DEFAULTS.tap_action) n.tap_action = ta;
const tps = Number(data.tap_pause_seconds);
if (!isNaN(tps) && tps !== DEFAULTS.tap_pause_seconds) {
n.tap_pause_seconds = tps;
}
if (Array.isArray(this._config.captions)) n.captions = this._config.captions;
else if (this._config.caption != null) n.caption = this._config.caption;
this._config = n;
this.dispatchEvent(
new CustomEvent("config-changed", {
detail: { config: n },
bubbles: true,
composed: true,
}),
);
}
};
}
/**
* Register both elements so they survive the
* ``@webcomponents/scoped-custom-element-registry`` polyfill that
* browser_mod and hui-element load. That polyfill replaces both
* ``window.customElements`` and ``window.HTMLElement``. A custom element
* only works if its class extends the *current* global ``HTMLElement``
* and is registered in the *current* global registry:
*
* - If we register against the native objects and the polyfill later
* swaps the globals, HA looks the element up in the new registry,
* finds nothing, and renders "Custom element doesn't exist"
* (or throws "Illegal constructor" when it tries to build it).
* - If the polyfill is already active and we extend the native
* ``HTMLElement`` instead of the polyfilled one, the polyfilled
* ``define`` silently refuses the registration.
*
* Building the classes from the live globals on every pass, and
* re-running after the polyfill has had a chance to load, covers all
* orderings. ``get()`` guards make repeat passes harmless no-ops.
*/
function defineAlbumSlideshowCards() {
const reg = window.customElements;
if (!reg) return;
const Base = window.HTMLElement;
if (!reg.get("album-slideshow-card")) {
reg.define(
"album-slideshow-card",
createAlbumSlideshowCardClass(Base),
);
}
if (!reg.get("album-slideshow-card-editor")) {
reg.define(
"album-slideshow-card-editor",
createAlbumSlideshowCardEditorClass(Base),
);
}
}
defineAlbumSlideshowCards();
if (!window.__albumSlideshowCardScheduled) {
window.__albumSlideshowCardScheduled = true;
const retry = () => {
try {
defineAlbumSlideshowCards();
} catch (_) {
/* a concurrent registry swap is harmless; the next pass settles it */
}
};
Promise.resolve().then(retry);
if (typeof requestAnimationFrame === "function") {
requestAnimationFrame(retry);
}
setTimeout(retry, 0);
setTimeout(retry, 1000);
}
window.customCards = window.customCards || [];
if (!window.customCards.find((c) => c.type === "album-slideshow-card")) {
window.customCards.push({
type: "album-slideshow-card",
name: "Album Slideshow",
description:
"Cross-fade slideshow for album_slideshow cameras (browser-side, GPU-composited)",
preview: false,
documentationURL:
"https://github.com/eyalgal/album_slideshow#album-slideshow-card",
// HA 2026.6+ "By entity" card picker (Community section). Only
// suggest for cameras created by THIS integration, never for every
// camera in the house - the dev blog warns an over-eager hook makes
// the picker noisy. We gate on the entity's platform AND the camera
// domain rather than matching the bare ``camera.*`` domain.
getEntitySuggestion: (hass, entityId) => {
if (typeof entityId !== "string" || !entityId.startsWith("camera.")) {
return null;
}
const entry = hass && hass.entities && hass.entities[entityId];
if (!entry || entry.platform !== "album_slideshow") {
return null;
}
return {
config: {
type: "custom:album-slideshow-card",
entity: entityId,
},
};
},
});
}
console.info(
`%c album-slideshow-card %c v${VERSION} `,
"color: white; background: #4a90e2; padding: 1px 4px; border-radius: 3px 0 0 3px;",
"color: #4a90e2; background: white; padding: 1px 4px; border-radius: 0 3px 3px 0;",
);