/**
* My Music Library Card
* A responsive music player card for Home Assistant + Music Assistant.
* No external dependencies — pure vanilla JS Custom Element.
* @version 1.0.0
*/
const CARD_VERSION = "4.8.6";
/* ─── Icons (inline SVG strings) ─────────────────────────── */
const ICONS = {
swap: `${ICONS[name] || ""} `;
}
function throttle(fn, ms) {
let last = 0, timer = null, latestArgs = null;
return (...args) => {
latestArgs = args;
const now = Date.now();
if (now - last >= ms) {
last = now;
if (timer) { clearTimeout(timer); timer = null; }
fn(...args);
} else if (!timer) {
timer = setTimeout(() => {
last = Date.now();
timer = null;
fn(...latestArgs);
}, ms - (now - last));
}
};
}
/* ─── Main Card Class ─────────────────────────────────────── */
/* Pure function of `config` — shared by MyMusicLibraryCard (to build its actual
panels) and MyMusicLibraryCardEditor (to compute the same tab ids so nav
actions like mml_navigate_tab can target a specific tab unambiguously). */
function _buildResolvedTabs(config) {
const DEFAULT_SECTIONS = ["artists", "albums", "playlists", "tracks"];
const VALID_SECTIONS = ["artists", "albums", "playlists", "tracks", "radios", "recently_played", "recently_added", "recommended", "flows"];
const TAB_ICONS = { player: "player", search: "search", library: "library", playlist: "playlist", settings: "settings", discovery: "sparkle" };
if (config.tabs && Array.isArray(config.tabs)) {
let idx = 0;
const typeCounts = {};
return config.tabs.map(t => {
const type = t.type || "button";
if (type === "custom_element") {
return { type: "custom_element", id: `ce-${idx++}`, element: t.element || "",
element_config: t.element_config || {}, name: t.name || "",
tap_action: t.tap_action, hold_action: t.hold_action, double_tap_action: t.double_tap_action,
width: t.width, height: t.height };
}
if (type === "button") {
return { type: "button", id: `btn-${idx++}`, icon: t.icon, name: t.name || "", entity: t.entity,
tap_action: t.tap_action, hold_action: t.hold_action, double_tap_action: t.double_tap_action,
width: t.width, height: t.height };
}
typeCounts[type] = (typeCounts[type] || 0) + 1;
const id = type === "settings" ? "settings" : (typeCounts[type] > 1 ? `${type}-${typeCounts[type] - 1}` : type);
const tab = { type, id, label: t.label || null, iconOverride: t.icon || null,
defaultIcon: TAB_ICONS[type] || null, show_in_nav: t.show_in_nav !== false,
// Optional: let this panel carry its own custom nav element (button-card etc.)
// instead of the default icon+label button — see _renderCustomElementSlot.
element: t.element || null, element_config: t.element_config || null,
width: t.width, height: t.height };
if (type === "library") {
const sections = Array.isArray(t.sections) ? t.sections.filter(s => VALID_SECTIONS.includes(s)) : null;
tab.sections = sections && sections.length ? sections : DEFAULT_SECTIONS;
const VALID_LAYOUTS = ["lanes", "grid", "columns", "auto"];
tab.layout = VALID_LAYOUTS.includes(t.layout) ? t.layout : "lanes";
}
if (type === "search") {
tab.search_layout = t.search_layout === "columns" ? "columns" : "rows";
}
if (type === "playlist") {
tab.playlist_uri = t.playlist_uri || "";
tab.playlist_label = t.playlist_label || "";
tab.playlist_thumbnail = t.playlist_thumbnail || "";
}
return tab;
});
}
// Backward compatibility: build from legacy config
const tabs = [];
if (config.nav_buttons_left) {
let idx = 0;
for (const b of config.nav_buttons_left) {
tabs.push({ type: "button", id: `btn-${idx++}`, icon: b.icon, name: b.name || "", entity: b.entity,
tap_action: b.tap_action, hold_action: b.hold_action, double_tap_action: b.double_tap_action,
width: b.width, height: b.height });
}
}
tabs.push({ type: "player", id: "player", label: null, iconOverride: null, defaultIcon: "player" });
tabs.push({ type: "search", id: "search", label: null, iconOverride: null, defaultIcon: "search", search_layout: "rows" });
tabs.push({ type: "library", id: "library", label: null, iconOverride: null, defaultIcon: "library",
sections: DEFAULT_SECTIONS, layout: "lanes" });
if (config.nav_buttons_right) {
let idx = (config.nav_buttons_left?.length || 0);
for (const b of config.nav_buttons_right) {
tabs.push({ type: "button", id: `btn-${idx++}`, icon: b.icon, name: b.name || "", entity: b.entity,
tap_action: b.tap_action, hold_action: b.hold_action, double_tap_action: b.double_tap_action,
width: b.width, height: b.height });
}
}
tabs.push({ type: "settings", id: "settings", label: null, iconOverride: null, defaultIcon: "settings" });
return tabs;
}
class MyMusicLibraryCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this._hass = null;
this._config = {};
this._tab = "player";
this._searchQuery = "";
this._searchFilter = "all";
this._searchResults = null;
this._searchLoading = false;
this._libData = {};
this._libLoading = false;
this._libLoadedTabs = new Set();
this._plLoadedTabs = new Set();
this._discoveryLoadedTabs = new Set();
this._libSections = {}; // type → { offset, loading, exhausted, favorite, iconName }
this._libTabState = {}; // tabId → { source, fav, browse, browseStack }
this._maProviders = [];
this._enabledProviders = (() => {
try {
const s = this._loadPref("mml_providers");
if (!s) return null;
const set = new Set(JSON.parse(s));
set.delete("builtin");
return set.size > 0 ? set : null;
} catch (_) { return null; }
})();
this._searching = false;
this._searchTimeout = null;
this._searchId = 0;
this._players = [];
this._activePlayer = null;
this._progressInterval = null;
this._localPosition = null;
this._localPositionTime = null;
this._localPositionKey = null; // player + track the seek override belongs to
this._maQueueItems = [];
this._maQueueId = null; // MA queue_id of the active player, from the last ma_queue load
this._queueLoadSeq = 0; // drops out-of-order ma_queue responses
this._queuePushUnsub = null; // unsubscribe fn of my_music_library/subscribe_queue
this._queuePushActive = false; // true while the backend pushes queue changes
this._queuePushTimer = null;
this._lastKnownUri = null;
this._queueVisible = this._loadPref("mml_queue_visible") !== "false";
this._outputs = null; // Map entity_id → MA facts (GET outputs), see _loadOutputs
this._outputsSeq = 0;
this._outputsSig = null;
this._presets = []; // favorite groups (server-side)
this._outputPanelOpen = false;
this._outputMode = "switch"; // switch | group | control
this._switchSel = new Set(); // switch mode: selected destinations, first = new leader
this._showOffline = false;
this._presetEditing = false;
this._outDragging = false;
this._excludedPlayers = []; // entity_ids hidden from the device picker (HA options)
// Per-tab library filter state is in this._libTabState[tabId]
this._rendered = false;
this._isMobile = this._detectMobile();
// MA config fetched from backend via WebSocket
this._maUrl = null; // stored but only used as a last-resort hint
this._maConfigLoaded = false;
this._maConnected = true; // assume connected until the config fetch says otherwise
this._debugMode = false;
}
_debugLog(...args) {
if (this._debugMode) console.debug("[MML]", ...args);
}
_detectMobile() {
const isCompanion = !!window.externalApp || !!window.webkit?.messageHandlers?.getExternalAuth;
return isCompanion && window.innerWidth < 640;
}
/* ── i18n helper ── */
_t(key) {
const raw = this._hass?.locale?.language || this._hass?.language || "en";
const lang = raw.toLowerCase().split("-")[0];
const dict = TRANSLATIONS[lang] || TRANSLATIONS.en;
const val = key.split(".").reduce((o, k) => o?.[k], dict);
if (val !== undefined) return val;
return key.split(".").reduce((o, k) => o?.[k], TRANSLATIONS.en) ?? key;
}
/* ── MA Queue (via Music Assistant native queue) ── */
async _loadMAQueue() {
if (!this._activePlayer || !this._hass) { this._maQueueItems = []; this._maQueueId = null; this._updateQueueUI(); return; }
// Loads can overlap (push event + safety timer): only the latest one may update the UI.
const seq = ++this._queueLoadSeq;
let items = [];
let queueId = null;
try {
const data = await this._callIntegration("GET", `ma_queue?player=${encodeURIComponent(this._activePlayer)}&limit=100`);
items = data?.items || [];
queueId = data?.queue_id || null;
} catch (_) {
items = [];
}
if (seq !== this._queueLoadSeq) return;
this._maQueueItems = items;
this._maQueueId = queueId;
this._debugLog("MA queue loaded →", items.length, "items, queue:", queueId);
this._updateQueueUI();
}
/* Timed queue reload after an action. With push active (my_music_library/subscribe_queue),
MA itself tells us when the queue changes, so this only remains as a safety net for a
lost event; without push (subscription failure) it is the only mechanism. */
_refreshQueueSoon(delay = 1200) {
clearTimeout(this._queueRefreshTimer);
const wait = this._queuePushActive ? Math.max(delay, 4000) : delay;
this._queueRefreshTimer = setTimeout(() => this._loadMAQueue(), wait);
}
/* ── Queue push: MA queue events relayed by the backend ── */
async _subscribeQueuePush() {
if (this._queuePushUnsub || this._queuePushSubscribing || !this._hass?.connection) return;
this._queuePushSubscribing = true;
try {
const unsub = await this._hass.connection.subscribeMessage(
(msg) => this._onQueuePush(msg),
{ type: "my_music_library/subscribe_queue" },
);
if (!this.isConnected) {
// Card left the DOM while subscribing.
Promise.resolve().then(() => unsub()).catch(() => {});
return;
}
this._queuePushUnsub = unsub;
this._queuePushActive = true;
this._debugLog("Queue push: subscribed");
} catch (err) {
this._queuePushActive = false;
this._debugLog("Queue push unavailable, using timed refresh:", err);
} finally {
this._queuePushSubscribing = false;
}
}
_unsubscribeQueuePush() {
const unsub = this._queuePushUnsub;
this._queuePushUnsub = null;
this._queuePushActive = false;
clearTimeout(this._queuePushTimer);
if (unsub) Promise.resolve().then(() => unsub()).catch(() => {});
}
_onQueuePush(msg) {
if (!this._isActiveQueue(msg?.queue_id)) return;
// MA often emits several events for one action (items, then current item): coalesce them.
clearTimeout(this._queuePushTimer);
this._queuePushTimer = setTimeout(() => {
clearTimeout(this._queueRefreshTimer);
this._loadMAQueue();
}, 100);
}
_isActiveQueue(queueId) {
if (!queueId || !this._activePlayer) return false;
if (!this._maQueueId || queueId === this._maQueueId) return true;
// The active queue may have changed (e.g. player joined a group): also accept the player's own id.
return queueId === this._hass?.states?.[this._activePlayer]?.attributes?.mass_player_id;
}
_updateQueueUI() {
const card = this.shadowRoot?.querySelector(".card-root");
if (card) this._updateQueueDisplay(card);
}
async _callIntegration(method, path, body) {
this._debugLog(`API ${method} /my_music_library/${path}`, body !== undefined ? body : "");
const opts = { method };
if (body !== undefined) {
opts.headers = { "Content-Type": "application/json" };
opts.body = JSON.stringify(body);
}
const resp = await this._hass.fetchWithAuth(`/my_music_library/${path}`, opts);
if (!resp.ok) {
const text = await resp.text().catch(() => "");
this._debugLog(`API ${method} /my_music_library/${path} → ${resp.status}:`, text);
throw new Error(`${resp.status}: ${text}`);
}
const data = await resp.json();
this._debugLog(`API ${method} /my_music_library/${path} → OK`, data);
return data;
}
/* ── Lovelace required ── */
setConfig(config) {
this._config = { default_tab: "player", ...config };
this._resolvedTabs = _buildResolvedTabs(config);
const firstPanel = this._resolvedTabs.find(t => t.type !== "button");
const defaultTab = this._config.default_tab || (firstPanel ? firstPanel.id : "player");
this._tab = defaultTab;
if (config.height != null && config.height !== "") {
const h = typeof config.height === "number" ? `${config.height}px` : String(config.height);
this.style.setProperty("--mml-height", h);
}
}
// Tell Lovelace masonry how many rows to reserve (1 row ≈ 50px)
getCardSize() {
const h = this._config?.height;
if (h && typeof h === "number") return Math.ceil(h / 50);
if (h && typeof h === "string" && h.endsWith("px")) return Math.ceil(parseInt(h) / 50);
return 8; // default ~400px
}
static getConfigElement() {
return document.createElement("my-music-library-card-editor");
}
static getStubConfig() {
return { default_tab: "player" };
}
set hass(hass) {
this._hass = hass;
// Fetch integration config from backend once
if (!this._maConfigLoaded) {
this._maConfigLoaded = true;
this._fetchMaConfig();
}
if (!this._queuePushUnsub && this.isConnected) this._subscribeQueuePush();
this._players = this._getMaPlayers();
if (this._players.length === 0) {
this._activePlayer = null;
} else {
if (!this._activePlayer || !this._players.find(p => p.entity_id === this._activePlayer)) {
const saved = this._loadSavedPlayer();
const pinned = this._loadPref("mml_default_player");
const prevActive = this._activePlayer;
const known = (eid) => eid && this._players.find(p => p.entity_id === eid) ? eid : null;
// Pinned output of this device (output panel, Control mode) wins over the last one used.
this._activePlayer = known(pinned) || known(saved)
|| this._config.entity
|| (this._players.find(p => p.state === "playing") || this._players[0])?.entity_id;
this._debugLog("Player selected:", this._activePlayer, "prev:", prevActive, "saved:", saved, "players:", this._players.map(p => p.entity_id));
if (this._activePlayer && this._activePlayer !== prevActive) {
this._loadMAQueue();
}
}
}
this._scheduleOutputsReload();
if (!this._rendered) {
this._render();
this._rendered = true;
} else {
this._update();
}
}
connectedCallback() {
this._startProgressTick();
if (this._hass) this._subscribeQueuePush();
// hui-card (HA wrapper) has auto height by default — force it to fill its grid cell
// so our height:100% resolves to the actual allocated height instead of auto.
requestAnimationFrame(() => {
let p = this.parentNode;
while (p && p.tagName) {
if (p.tagName.toLowerCase() === "hui-card") {
p.style.height = "100%";
p.style.display = "block";
break;
}
p = p.parentNode;
}
});
}
disconnectedCallback() {
this._stopProgressTick();
this._unsubscribeQueuePush();
// Force config re-fetch on next reconnect so excluded_players stays in sync
// with any options changes made while the card was away from the DOM.
this._maConfigLoaded = false;
}
/* ── Fetch integration config (ma_entry_id, ma_url) via WebSocket ── */
async _fetchMaConfig() {
try {
const cfg = await this._hass.callWS({ type: "my_music_library/config" });
this._debugMode = !!cfg?.debug_mode;
this._debugLog("Config loaded:", JSON.stringify(cfg));
// Only flip to "disconnected" on an explicit false — a missing/failed
// fetch (cfg undefined) shouldn't itself trigger the banner.
this._maConnected = cfg?.connected !== false;
this._updateConnectionBanner();
await this._fetchProviders();
if (cfg?.ma_url) {
this._maUrl = cfg.ma_url.replace(/\/$/, "");
}
if (Array.isArray(cfg?.excluded_players)) {
this._excludedPlayers = cfg.excluded_players;
this._players = this._getMaPlayers();
const card = this.shadowRoot?.querySelector(".card-root");
if (card) this._updatePlayerContent(card);
}
} catch (e) {
this._debugLog("Config fetch failed:", e);
}
}
async _fetchProviders() {
try {
const data = await this._callIntegration("GET", "providers");
this._maProviders = (data?.providers || []).filter(p => (p.domain || p.instance_id) !== "builtin");
if (this._enabledProviders !== null && this._maProviders.length > 0) {
const validKeys = new Set(this._maProviders.flatMap(p => [p.instance_id, p.domain].filter(Boolean)));
const hasAnyValid = [...this._enabledProviders].some(k => validKeys.has(k));
if (!hasAnyValid) {
this._enabledProviders = null;
this._savePref("mml_providers", "");
}
}
if (this._libLoadedTabs.size > 0) {
this._libLoadedTabs.clear();
const activeTabDef = this._resolvedTabs?.find(t => t.id === this._tab);
if (activeTabDef?.type === "library") this._loadLibrary();
}
if (this._discoveryLoadedTabs.size > 0) {
this._discoveryLoadedTabs.clear();
const activeTabDef = this._resolvedTabs?.find(t => t.id === this._tab);
if (activeTabDef?.type === "discovery") this._loadDiscovery(this._tab);
}
} catch (_) {
this._maProviders = [];
}
}
/* ── Return an MA-capable entity for browse/search operations ──
This is DIFFERENT from _activePlayer (which is the playback target).
Browse operations (search, library) must go through an MA entity. ── */
_getBrowseEntity() {
const players = this._players || [];
// Prefer: active player if it's an MA player
if (this._activePlayer) {
const active = players.find(p => p.entity_id === this._activePlayer);
if (active?.isMa) return this._activePlayer;
}
// Fall back to first detected MA player
const firstMa = players.find(p => p.isMa);
if (firstMa) return firstMa.entity_id;
return null;
}
/* ── Get media_player entities (all non-unavailable, MA players first) ── */
/** Return true if entityId matches a plain ID or a glob pattern (supports *). */
_isExcluded(entityId) {
for (const pattern of (this._excludedPlayers || [])) {
if (!pattern) continue;
if (pattern.includes("*")) {
// Glob → regex: escape regex meta-chars except *, then replace * with .*
const re = new RegExp(
"^" + pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*") + "$"
);
// Test against full entity_id AND against the name part (after "media_player.")
if (re.test(entityId) || re.test(entityId.replace(/^media_player\./, ""))) return true;
} else {
if (pattern === entityId) return true;
}
}
return false;
}
_getMaPlayers() {
if (!this._hass) return [];
// MediaPlayerEntityFeature.GROUPING = 524288 (bit 19)
const FEATURE_GROUPING = 524288;
const all = Object.entries(this._hass.states)
.filter(([id, state]) => id.startsWith("media_player.") && state.state !== "unavailable" && !this._isExcluded(id)
&& !this._config.devices?.[id]?.hidden
&& (this._config.show_other_players || !!state.attributes?.mass_player_id))
.map(([entity_id, state]) => {
const attr = state.attributes || {};
// isMa: used for browse/search operations (requires MA Python client)
const isMa = typeof attr.mass_player_id === "string" && attr.mass_player_id.length > 0;
// canJoin: player declares support for media_player.join in HA supported_features
const canJoin = typeof attr.supported_features === "number"
&& (attr.supported_features & FEATURE_GROUPING) !== 0;
return {
entity_id,
name: attr.friendly_name || entity_id,
state: state.state,
attributes: attr,
isMa,
canJoin,
};
});
return all
// MA players first, then alphabetical within each group
.sort((a, b) => {
if (a.isMa !== b.isMa) return a.isMa ? -1 : 1;
return a.name.localeCompare(b.name);
});
}
_getActiveState() {
if (!this._hass || !this._activePlayer) return null;
return this._hass.states[this._activePlayer] || null;
}
/* ── Render full card ── */
_render() {
const root = this.shadowRoot;
root.innerHTML = "";
const style = document.createElement("style");
style.textContent = STYLES;
root.appendChild(style);
this._isMobile = this._detectMobile();
const card = document.createElement("div");
card.className = `card-root${this._isMobile ? " mml-mobile" : ""}`;
const navPos = this._config.nav_bar?.position || "top";
if (navPos !== "top") card.dataset.navPos = navPos;
const panels = this._resolvedTabs.filter(t => t.type !== "button" && t.type !== "custom_element");
const panelRenderers = {
player: (t) => this._renderPlayerTab(),
search: (t) => this._renderSearchTab(),
library: (t) => this._renderLibraryTab(t),
playlist: (t) => this._renderPlaylistTab(t),
discovery: (t) => this._renderDiscoveryTab(t),
};
card.innerHTML = `
${this._renderNav()}
${panels.map(t => panelRenderers[t.type] ? panelRenderers[t.type](t) : "").join("")}
${panels.some(t => t.type === "player") ? "" : '
'}
${this._renderSettingsModal()}
`;
root.appendChild(card);
this._updateConnectionBanner(card);
if (!this._imgErrorBound) {
this._imgErrorBound = true;
root.addEventListener("error", (e) => {
const img = e.target;
if (!(img instanceof HTMLImageElement) || img.classList.contains("art")) return;
const classes = img.className.split(" ").filter(Boolean);
const primary = classes[0] || "result-thumb";
const isRound = classes.includes("round");
const ph = document.createElement("div");
ph.className = [primary + "-placeholder", ...classes.slice(1)].join(" ");
ph.innerHTML = isRound ? ICONS.artist : ICONS.music;
img.replaceWith(ph);
}, true);
}
this._attachListeners(card);
this._setActiveTab(this._tab, card);
this._updatePlayerContent(card);
}
/* ── Show/hide the "needs reconfiguration" banner based on _maConnected ── */
_updateConnectionBanner(card) {
const el = (card || this.shadowRoot?.querySelector(".card-root"))?.querySelector("#mml-connection-banner");
if (!el) return;
el.hidden = this._maConnected !== false;
}
/* `asPanelTab`: for a real panel (player/search/library/...) that carries its
own `element`/`element_config` — same custom-element slot mechanism as a
pure `custom_element` tab, but clicking it switches to that panel (like any
other nav-tab) instead of running a configurable tap_action. This lets one
tab entry be BOTH the content panel AND its own styled nav trigger, instead
of needing a separate hidden panel + a separate custom_element button. */
_renderCustomElementSlot(tab, { asPanelTab = false } = {}) {
const sizeParts = [];
if (tab.width) sizeParts.push(`width:${typeof tab.width === "number" ? tab.width + "px" : tab.width}`);
if (tab.height) sizeParts.push(`height:${typeof tab.height === "number" ? tab.height + "px" : tab.height}`);
const sizeStyle = sizeParts.length ? ` style="${sizeParts.join(";")}"` : "";
if (asPanelTab) {
const activeClass = this._tab === tab.id ? " active" : "";
return `
`;
}
return `
`;
}
_renderNav() {
const align = this._config.nav_bar?.align || "start";
const items = this._resolvedTabs.filter(t => t.show_in_nav !== false).map(t => {
if (t.type === "custom_element") {
return this._renderCustomElementSlot(t);
}
if (t.type === "button") {
return this._renderNavButton(t);
}
if (t.element) {
return this._renderCustomElementSlot(t, { asPanelTab: true });
}
if (t.type === "settings") {
const label = t.label || this._t("tabs.settings");
const icon = t.iconOverride
? `
${icon}${this._esc(label)}
`;
}
const label = t.label || this._t(`tabs.${t.type}`);
const icon = t.iconOverride
? `
${icon}${this._esc(label)}
`;
}).join("");
const alignAttr = align !== "start" ? ` data-align="${align}"` : "";
const navStyle = this._config.nav_bar?.style ? ` style="${this._esc(this._config.nav_bar.style)}"` : "";
return `
`;
}
_renderNavButton(btn) {
const entity = btn.entity ? this._hass?.states[btn.entity] : null;
const isActive = entity
? ["on", "playing", "active", "home"].includes(entity.state)
: false;
const icon = btn.icon || entity?.attributes?.icon || "mdi:gesture-tap";
const label = btn.name || "";
const title = label || entity?.attributes?.friendly_name || "";
const sizeParts = [];
if (btn.width) sizeParts.push(`width:${typeof btn.width === "number" ? btn.width + "px" : btn.width}`);
if (btn.height) sizeParts.push(`height:${typeof btn.height === "number" ? btn.height + "px" : btn.height}`);
const sizeStyle = sizeParts.length ? ` style="${sizeParts.join(";")}"` : "";
return `
${this._esc(label)} ` : ""}
`;
}
_renderPlayerTab() {
return `
—
${this._t("player.select_player")}
${ICONS.artist}${this._t("player.goto_artist")}
${ICONS.shuffle}
${ICONS.prev}
${ICONS.play}
${ICONS.next}
${ICONS.repeat}
${ICONS.queue}
${ICONS.volumeHigh}
${this._t("player.no_player")}
${ICONS.swap}
${this._t("queue.empty")}
`;
}
_renderSearchTab() {
return `
${ICONS.search}
${this._t("search.type_hint")}
`;
}
_renderLibraryTab(tabDef) {
const panelId = tabDef?.id || "library";
const st = this._getLibTabState(panelId);
const src = st.source;
const browse = st.browse;
return `
${this._t("lib.filter_all")}
${this._t("lib.filter_local")}
${this._t("lib.filter_streaming")}
${this._t("lib.mode_catalogue")}
${this._t("lib.mode_browse")}
${this._t("lib.loading")}
`;
}
_renderDiscoveryTab(tabDef) {
const panelId = tabDef?.id || "discovery";
return `
${this._t("lib.loading")}
`;
}
_renderPlaylistTab(tabDef) {
const panelId = tabDef?.id || "playlist";
const name = tabDef?.playlist_label || tabDef?.label || this._t("tabs.playlist");
const thumb = tabDef?.playlist_thumbnail
? ``
: ``;
const configured = !!tabDef?.playlist_uri;
const view = this._plView(panelId);
return `
${configured
? `
${this._t("lib.loading_short")}
`
: `
${ICONS.playlist}
${this._t("playlist.not_configured")}
`}
${this._renderMiniPlayerBar()}
`;
}
/* Persisted per-tab track view mode ("list" | "grid") for playlist tabs. */
_plView(tabId) {
return this._loadPref(`mml_playlist_view_${tabId}`) || "list";
}
_setPlView(tabId, view) {
this._savePref(`mml_playlist_view_${tabId}`, view);
}
_renderPlaylistTrackList(tabDef, items) {
if (!items.length) return `${ICONS.playlist}
${this._t("playlist.empty")}
${items.map(i => this._renderLibCard(i, "music")).join("")}
`;
}
return items.map(i => this._renderLibListItem(i)).join("");
}
_renderMiniPlayerBar() {
return `
—
${ICONS.prev}
${ICONS.play}
${ICONS.next}
${ICONS.volumeHigh}
${this._t("player.no_player")}
${ICONS.swap}
`;
}
_renderSettingsModal() {
return `
${this._t("settings.title")}
${ICONS.close}
v${CARD_VERSION}
`;
}
/* ── Event Listeners ── */
_attachListeners(card) {
// Nav tabs (panel tabs + settings)
card.querySelectorAll(".nav-tab").forEach(btn => {
btn.addEventListener("click", () => {
const tab = btn.dataset.tab;
if (tab === "settings") {
this._openSettings(card);
return;
}
this._setActiveTab(tab, card);
const tabDef = this._resolvedTabs.find(t => t.id === tab);
if (tabDef?.type === "library" && !this._libLoadedTabs.has(tab)) this._loadLibrary();
if (tabDef?.type === "playlist" && !this._plLoadedTabs.has(tab)) this._loadPlaylistTab(tabDef);
if (tabDef?.type === "discovery" && !this._discoveryLoadedTabs.has(tab)) this._loadDiscovery(tab);
});
});
// Nav scroll fade indicators
const navEl = card.querySelector(".nav");
if (navEl) {
const fadeL = card.querySelector(".nav-fade-left");
const fadeR = card.querySelector(".nav-fade-right");
const updateFades = () => {
const { scrollLeft, scrollWidth, clientWidth } = navEl;
fadeL?.classList.toggle("visible", scrollLeft > 2);
fadeR?.classList.toggle("visible", scrollLeft + clientWidth < scrollWidth - 2);
};
navEl.addEventListener("scroll", updateFades, { passive: true });
requestAnimationFrame(updateFades);
}
// Library filters — attach per panel so multi-library-tab setups work independently
for (const libPanel of card.querySelectorAll('.tab-panel')) {
const tabId = libPanel.dataset.panel;
const tabDef = this._resolvedTabs.find(t => t.id === tabId);
if (tabDef?.type !== "library") continue;
const ts = this._getLibTabState(tabId);
libPanel.querySelector(".lib-filter-group")?.addEventListener("click", (e) => {
const btn = e.target.closest(".lib-filter-btn");
if (!btn || btn.classList.contains("active")) return;
const source = btn.dataset.source;
ts.source = source;
this._savePref(`mml_lib_source_${tabId}`, source);
if (source !== "local") ts.browse = false;
libPanel.querySelectorAll(".lib-filter-btn").forEach(b => b.classList.toggle("active", b.dataset.source === source));
this._libLoadedTabs.delete(tabId);
if (this._tab === tabId) this._reloadLibrary();
});
libPanel.querySelector(".browse-mode-toggle")?.addEventListener("click", (e) => {
const btn = e.target.closest(".browse-mode-btn");
if (!btn || btn.classList.contains("active")) return;
ts.browse = btn.dataset.browse === "true";
ts.browseStack = [];
this._libLoadedTabs.delete(tabId);
if (this._tab === tabId) this._reloadLibrary();
});
}
const hasPanel = (type) => this._resolvedTabs.some(t => t.type === type);
// Player controls (only if player tab is present)
if (hasPanel("player")) {
card.querySelector("#btn-playpause").addEventListener("click", () => this._togglePlayPause());
card.querySelector("#btn-prev").addEventListener("click", () => this._callService("media_previous_track"));
card.querySelector("#btn-next").addEventListener("click", () => this._callService("media_next_track"));
card.querySelector("#btn-shuffle").addEventListener("click", () => this._toggleShuffle());
card.querySelector("#btn-repeat").addEventListener("click", () => this._cycleRepeat());
card.querySelector("#btn-goto-artist").addEventListener("click", (e) => this._openCurrentArtistPage(e.currentTarget));
card.querySelector("#btn-mute").addEventListener("click", () => this._toggleMute());
// Volume — send command only on release (pointerup), not during drag
this._bindVolumeSlider(card.querySelector("#volume-slider"));
// Progress bar — seek on release only (covers both tap and drag)
this._bindSeekBar(card.querySelector("#progress-bar"), card.querySelector("#progress-fill"), card.querySelector("#pos-time"));
// Queue toggle
card.querySelector("#btn-queue-toggle")?.addEventListener("click", (e) => {
e.stopPropagation();
this._queueVisible = !this._queueVisible;
this._savePref("mml_queue_visible", String(this._queueVisible));
this._applyQueueVisibility(card);
});
// Queue close (mobile: backdrop tap or close button)
const closeQueue = () => {
this._queueVisible = false;
this._savePref("mml_queue_visible", "false");
this._applyQueueVisibility(card);
};
card.querySelector("#queue-backdrop")?.addEventListener("click", closeQueue);
card.querySelector("#queue-close-btn")?.addEventListener("click", closeQueue);
// Output row → output panel
card.querySelector("#device-row").addEventListener("click", () => this._openOutputPanel(card));
}
// Mini player bar (playlist tabs) — independent of the "player" tab being present.
// Same callbacks as the main player tab: _togglePlayPause / _callService / _toggleMute /
// _bindSeekBar / _bindVolumeSlider / _openOutputPanel — just bound to a second set of elements.
card.querySelectorAll(".mini-player-bar").forEach(bar => {
bar.querySelector(".mini-ctrl-playpause")?.addEventListener("click", () => this._togglePlayPause());
bar.querySelector(".mini-ctrl-prev")?.addEventListener("click", () => this._callService("media_previous_track"));
bar.querySelector(".mini-ctrl-next")?.addEventListener("click", () => this._callService("media_next_track"));
bar.querySelector(".mini-ctrl-mute")?.addEventListener("click", () => this._toggleMute());
this._bindSeekBar(bar.querySelector(".mini-progress-bar"), bar.querySelector(".mini-progress-fill"), bar.querySelector(".mini-pos-time"));
this._bindVolumeSlider(bar.querySelector(".mini-volume-slider"));
bar.querySelector(".mini-device-row")?.addEventListener("click", () => this._openOutputPanel(card));
});
// Playlist tabs — header buttons (play all, list/grid view toggle)
for (const plPanel of card.querySelectorAll(".tab-panel")) {
const tabDef = this._resolvedTabs.find(t => t.id === plPanel.dataset.panel);
if (tabDef?.type !== "playlist") continue;
plPanel.querySelector(".playlist-play-all")?.addEventListener("click", () => {
if (tabDef.playlist_uri) this._playItem(tabDef.playlist_uri, "playlist");
});
plPanel.querySelector(".playlist-view-toggle")?.addEventListener("click", (e) => {
const next = this._plView(tabDef.id) === "grid" ? "list" : "grid";
this._setPlView(tabDef.id, next);
e.currentTarget.innerHTML = next === "grid" ? ICONS.list : ICONS.grid;
const listEl = plPanel.querySelector(".playlist-track-list");
const items = (this._plTracks && this._plTracks[tabDef.id]) || [];
if (listEl) {
listEl.innerHTML = this._renderPlaylistTrackList(tabDef, items);
this._attachItemActions(listEl, { switchToPlayer: false });
}
});
}
// Settings modal close
card.querySelector("#settings-close").addEventListener("click", () => this._closeSettings(card));
card.querySelector("#settings-modal").addEventListener("click", (e) => {
if (e.target === card.querySelector("#settings-modal")) this._closeSettings(card);
});
// Search (only if search tab is present)
const searchInput = card.querySelector("#search-input");
searchInput?.addEventListener("input", (e) => {
clearTimeout(this._searchTimeout);
this._searchQuery = e.target.value;
if (this._searchQuery.trim().length < 2) {
this._renderSearchResults(card, null);
return;
}
this._searchTimeout = setTimeout(() => this._doSearch(card), 700);
});
// Nav action buttons (tap / hold / double-tap → HA actions)
card.querySelectorAll("[data-tab-btn]").forEach(btn => {
let holdTimer = null;
let didHold = false;
const getBtnCfg = () => {
const id = btn.dataset.tabBtn;
return this._resolvedTabs.find(t => t.id === id);
};
btn.addEventListener("pointerdown", () => {
didHold = false;
const cfg = getBtnCfg();
if (!cfg?.hold_action) return;
holdTimer = setTimeout(() => {
didHold = true;
this._handleNavAction(cfg, "hold_action");
}, 500);
});
btn.addEventListener("pointerup", () => clearTimeout(holdTimer));
btn.addEventListener("pointercancel", () => clearTimeout(holdTimer));
btn.addEventListener("click", () => {
if (didHold) { didHold = false; return; }
const cfg = getBtnCfg();
if (cfg) this._handleNavAction(cfg, "tap_action");
});
btn.addEventListener("dblclick", (e) => {
e.stopPropagation();
const cfg = getBtnCfg();
if (cfg?.double_tap_action) this._handleNavAction(cfg, "double_tap_action");
});
});
this._mountCustomElements(card);
}
_mountCustomElements(card) {
card.querySelectorAll("[data-ce-slot]").forEach(slot => {
if (slot._ceMounted) return;
const id = slot.dataset.ceSlot;
const tab = this._resolvedTabs.find(t => t.id === id);
if (!tab?.element) return;
// Strip Lovelace "custom:" prefix — the actual DOM tag name never has it
const tagName = tab.element.replace(/^custom:/, "");
const el = document.createElement(tagName);
if (typeof el.setConfig === "function") {
try { el.setConfig(tab.element_config || {}); } catch(e) {
console.warn(`[mml] custom_element "${tagName}" setConfig error:`, e);
}
}
if (this._hass) el.hass = this._hass;
slot.appendChild(el);
slot._ceMounted = true;
});
}
/* ── Nav button action handler ── */
_handleNavAction(btnCfg, actionKey) {
const action = btnCfg[actionKey];
if (!action || action.action === "none") return;
switch (action.action) {
case "call-service":
case "perform-action": {
// HA 2024.8+ uses "perform_action"; older uses "service"
const svcStr = action.perform_action || action.service || "";
const [domain, service] = svcStr.split(".", 2);
if (domain && service) {
this._hass.callService(
domain, service,
action.service_data || action.data || {},
action.target || {}
);
}
break;
}
case "toggle": {
const entityId = action.entity_id || btnCfg.entity;
if (entityId) {
const st = this._hass.states[entityId];
const dom = entityId.split(".")[0];
const svc = st?.state === "on" ? "turn_off" : "turn_on";
this._hass.callService(dom, svc, {}, { entity_id: entityId });
}
break;
}
case "more-info": {
const entityId = action.entity_id || btnCfg.entity;
if (entityId) {
this.dispatchEvent(new CustomEvent("hass-more-info", {
detail: { entityId },
bubbles: true,
composed: true,
}));
}
break;
}
case "navigate": {
const path = action.navigation_path || "/";
history.pushState(null, "", path);
this.dispatchEvent(new CustomEvent("location-changed", {
detail: { replace: false },
bubbles: true,
composed: true,
}));
break;
}
case "url": {
const url = action.url_path || action.url || "";
if (url) window.open(url, action.new_tab !== false ? "_blank" : "_self");
break;
}
case "assist": {
this.dispatchEvent(new CustomEvent("show-dialog", {
detail: { dialogTag: "ha-voice-command-dialog", dialogImport: () => {} },
bubbles: true,
composed: true,
}));
break;
}
case "mml_navigate_tab": {
const tabTypeOrId = action.tab;
if (!tabTypeOrId) break;
const card = this.shadowRoot?.querySelector(".card-root");
if (!card) break;
const tabDef = this._resolvedTabs.find(t => t.id === tabTypeOrId) ||
this._resolvedTabs.find(t => t.type === tabTypeOrId);
if (!tabDef) break;
if (tabDef.type === "settings") {
this._openSettings(card);
} else {
this._setActiveTab(tabDef.id, card);
if (tabDef.type === "library" && !this._libLoadedTabs.has(tabDef.id)) this._loadLibrary();
if (tabDef.type === "playlist" && !this._plLoadedTabs.has(tabDef.id)) this._loadPlaylistTab(tabDef);
if (tabDef.type === "discovery" && !this._discoveryLoadedTabs.has(tabDef.id)) this._loadDiscovery(tabDef.id);
}
break;
}
case "mml_navigate_section": {
const section = action.section;
if (!section) break;
const card = this.shadowRoot?.querySelector(".card-root");
if (!card) break;
const libTab = this._resolvedTabs.find(t => t.type === "library" && t.sections?.includes(section)) ||
this._resolvedTabs.find(t => t.type === "library");
if (!libTab) break;
const alreadyLoaded = this._libLoadedTabs.has(libTab.id);
this._setActiveTab(libTab.id, card);
if (!alreadyLoaded) this._loadLibrary();
setTimeout(() => {
const panel = card.querySelector(`[data-panel="${libTab.id}"]`);
const secEl = panel?.querySelector(`#lib-sec-${section}`);
if (secEl) secEl.scrollIntoView({ behavior: "smooth", block: "start" });
}, alreadyLoaded ? 50 : 600);
break;
}
case "mml_control": {
const cmd = action.command;
const player = this._activePlayer;
if (!cmd || !player) break;
switch (cmd) {
case "play_pause": {
const state = this._hass?.states[player]?.state;
this._hass?.callService("media_player", state === "playing" ? "media_pause" : "media_play", {}, { entity_id: player });
break;
}
case "next":
this._hass?.callService("media_player", "media_next_track", {}, { entity_id: player });
break;
case "prev":
this._hass?.callService("media_player", "media_previous_track", {}, { entity_id: player });
break;
case "shuffle": {
const shuffleOn = this._hass?.states[player]?.attributes?.shuffle;
this._hass?.callService("media_player", "shuffle_set", { shuffle: !shuffleOn }, { entity_id: player });
break;
}
case "repeat": {
const cur = this._hass?.states[player]?.attributes?.repeat || "off";
const next = cur === "off" ? "all" : cur === "all" ? "one" : "off";
this._hass?.callService("media_player", "repeat_set", { repeat: next }, { entity_id: player });
break;
}
case "mute": {
const isMuted = this._hass?.states[player]?.attributes?.is_volume_muted;
this._hass?.callService("media_player", "volume_mute", { is_volume_muted: !isMuted }, { entity_id: player });
break;
}
}
break;
}
default:
break;
}
}
/* ── Tab switching ── */
_setActiveTab(tab, card) {
this._tab = tab;
card.querySelectorAll(".nav-tab").forEach(b => b.classList.toggle("active", b.dataset.tab === tab));
card.querySelectorAll(".tab-panel").forEach(p => p.classList.toggle("active", p.dataset.panel === tab));
}
/* ── Update (called on every hass update) ── */
_update() {
const card = this.shadowRoot.querySelector(".card-root");
if (!card) return;
this._updatePlayerContent(card);
this._updateNavButtons(card);
if (this._outputPanelOpen && !this._outDragging && this._outputPanelSignature() !== this._outPanelSig) {
this._renderOutputPanel(card);
}
const activeTabDef = this._resolvedTabs.find(t => t.id === this._tab);
if (activeTabDef?.type === "library" && !this._libLoadedTabs.has(this._tab)) this._loadLibrary();
if (activeTabDef?.type === "playlist" && !this._plLoadedTabs.has(this._tab)) this._loadPlaylistTab(activeTabDef);
if (activeTabDef?.type === "discovery" && !this._discoveryLoadedTabs.has(this._tab)) this._loadDiscovery(this._tab);
}
_updateNavButtons(card) {
for (const tab of this._resolvedTabs) {
if (tab.type === "button" && tab.entity) {
const st = this._hass?.states[tab.entity];
const isActive = st ? ["on", "playing", "active", "home"].includes(st.state) : false;
const el = card.querySelector(`[data-tab-btn="${tab.id}"]`);
if (el) el.classList.toggle("active", isActive);
}
}
// Propagate hass updates to mounted custom elements
card.querySelectorAll("[data-ce-slot] > *").forEach(el => {
if (this._hass) el.hass = this._hass;
});
}
_resolveImageUrl(url) {
if (!url) return "";
if (!url.startsWith("http")) {
const hasHassUrl = typeof this._hass?.hassUrl === "function";
return hasHassUrl ? this._hass.hassUrl(url) : url;
}
const isMixedContent = location.protocol === "https:" && url.startsWith("http://");
if (isMixedContent) {
return `/my_music_library/image_proxy?url=${encodeURIComponent(url)}`;
}
return url;
}
_updatePlayerContent(card) {
const state = this._getActiveState();
const attr = state?.attributes || {};
const isPlaying = state?.state === "playing";
// Album art
const artWrapper = card.querySelector("#art-wrapper");
if (artWrapper) {
if (attr.entity_picture) {
const ep = attr.entity_picture;
const src = this._resolveImageUrl(ep);
console.debug("[MML] Cover art: entity_picture=%s → src=%s", ep, src);
const existing = artWrapper.querySelector("img.art");
if (!existing || existing.src !== src) {
artWrapper.innerHTML = "";
const img = document.createElement("img");
img.className = "art";
img.alt = "Album art";
img.src = src;
img.onload = () => console.debug("[MML] Cover art loaded OK: %s", img.src);
img.onerror = () => {
console.warn("[MML] Cover art FAILED: %s", img.src);
artWrapper.innerHTML = `${ICONS.music}
`;
};
artWrapper.appendChild(img);
}
} else {
artWrapper.innerHTML = `${ICONS.music}
`;
}
}
// Track info
const titleEl = card.querySelector("#track-title");
const artistEl = card.querySelector("#track-artist");
if (titleEl) titleEl.textContent = attr.media_title || (state ? this._t("player.nothing_playing") : "—");
if (artistEl) {
artistEl.textContent = [attr.media_artist, attr.media_album_name].filter(Boolean).join(" · ") || this._t("player.select_player");
}
const gotoArtistBtn = card.querySelector("#btn-goto-artist");
if (gotoArtistBtn) {
// the artist page lives in the search panel: no search tab, no button
const canOpen = attr.media_artist && attr.media_content_id && card.querySelector("#artist-page");
gotoArtistBtn.style.display = canOpen ? "" : "none";
}
// Mini player bar (playlist tabs) — text is the only "art" substitute, per design
card.querySelectorAll(".mini-player-title").forEach(el => {
el.textContent = attr.media_title || (state ? this._t("player.nothing_playing") : "—");
});
card.querySelectorAll(".mini-player-artist").forEach(el => {
el.textContent = [attr.media_artist, attr.media_album_name].filter(Boolean).join(" · ") || "";
});
// Play/pause button (main + any mini player bar)
card.querySelectorAll("#btn-playpause, .mini-ctrl-playpause").forEach(btn => {
btn.innerHTML = isPlaying ? ICONS.pause : ICONS.play;
});
// Shuffle
const shuffleBtn = card.querySelector("#btn-shuffle");
if (shuffleBtn) shuffleBtn.classList.toggle("active", !!attr.shuffle);
// Repeat
const repeatBtn = card.querySelector("#btn-repeat");
if (repeatBtn) {
const repeat = attr.repeat || "off";
repeatBtn.innerHTML = repeat === "one" ? ICONS.repeatOne : ICONS.repeat;
repeatBtn.classList.toggle("active", repeat !== "off");
}
// Volume — skip update while user is dragging to prevent snap-back (main + any mini bar)
if (attr.volume_level !== undefined && !this._volumeDragging) {
card.querySelectorAll("#volume-slider, .mini-volume-slider").forEach(sl => {
sl.value = Math.round(attr.volume_level * 100);
});
}
// Mute (main + any mini bar)
card.querySelectorAll("#btn-mute, .mini-ctrl-mute").forEach(btn => {
btn.innerHTML = attr.is_volume_muted ? ICONS.volumeMute : ICONS.volumeHigh;
btn.classList.toggle("active", !!attr.is_volume_muted);
});
// Progress
this._updateProgress(card, state);
// Device row (name + icon reflect group state)
this._updateDeviceRow(card);
// Refresh MA queue when the current track changes
const currentUri = attr.media_content_id || null;
if (currentUri !== this._lastKnownUri) {
this._lastKnownUri = currentUri;
this._refreshQueueSoon(800);
}
}
_updateProgress(card, state) {
const attr = state?.attributes || {};
const dur = attr.media_duration || 0;
const isPlaying = state?.state === "playing";
// The seek override only bridges the gap until HA reports the new position: drop it
// on another track or player, or once a position report newer than the seek arrives.
if (this._localPosition !== null) {
const posUpdated = attr.media_position_updated_at;
if (this._localPositionKey !== `${this._activePlayer}|${attr.media_content_id}`
|| (posUpdated && new Date(posUpdated).getTime() / 1000 > this._localPositionTime + 1)) {
this._localPosition = null;
}
}
let pos;
if (isPlaying && this._localPosition !== null) {
const elapsed = Date.now() / 1000 - this._localPositionTime;
pos = this._localPosition + elapsed;
} else if (isPlaying) {
const statePos = attr.media_position || 0;
const posUpdated = attr.media_position_updated_at;
if (posUpdated) {
const elapsed = (Date.now() - new Date(posUpdated).getTime()) / 1000;
pos = statePos + elapsed;
} else {
pos = statePos;
}
} else {
pos = attr.media_position || 0;
this._localPosition = null;
}
// never below 0: a device clock a bit behind HA's puts media_position_updated_at in the future
pos = Math.max(0, Math.min(pos || 0, dur));
const pct = dur > 0 ? (pos / dur) * 100 : 0;
if (!this._seekDragging) {
card.querySelectorAll("#progress-fill, .mini-progress-fill").forEach(fill => {
fill.style.width = `${pct.toFixed(1)}%`;
});
card.querySelectorAll("#pos-time, .mini-pos-time").forEach(el => { el.textContent = fmt(pos); });
}
card.querySelectorAll("#dur-time, .mini-dur-time").forEach(el => { el.textContent = fmt(dur); });
}
/* ── Progress ticker ── */
_startProgressTick() {
this._stopProgressTick();
this._progressInterval = setInterval(() => {
const card = this.shadowRoot?.querySelector(".card-root");
if (!card) return;
const state = this._getActiveState();
if (state?.state === "playing") this._updateProgress(card, state);
}, 1000);
}
_stopProgressTick() {
if (this._progressInterval) { clearInterval(this._progressInterval); this._progressInterval = null; }
}
/* ── Service calls ── */
_callService(service, data = {}) {
if (!this._hass || !this._activePlayer) return;
this._hass.callService("media_player", service, {
entity_id: this._activePlayer,
...data,
});
}
_togglePlayPause() {
const state = this._getActiveState();
if (!state) return;
this._callService(state.state === "playing" ? "media_pause" : "media_play");
}
_toggleShuffle() {
const state = this._getActiveState();
if (!state) return;
this._callService("shuffle_set", { shuffle: !state.attributes.shuffle });
}
_cycleRepeat() {
const state = this._getActiveState();
if (!state) return;
const modes = ["off", "all", "one"];
const cur = state.attributes.repeat || "off";
const next = modes[(modes.indexOf(cur) + 1) % modes.length];
this._callService("repeat_set", { repeat: next });
}
_toggleMute() {
this._callService("volume_mute", { is_volume_muted: !this._getActiveState()?.attributes?.is_volume_muted });
}
/* ── Volume slider — shared by the main player and any mini player bar ── */
_bindVolumeSlider(slider) {
if (!slider) return;
slider.addEventListener("pointerdown", () => { this._volumeDragging = true; });
const endVolDrag = (e) => {
if (!this._volumeDragging) return;
this._volumeDragging = false;
this._callService("volume_set", { volume_level: parseInt(e.target.value) / 100 });
};
slider.addEventListener("pointerup", endVolDrag);
slider.addEventListener("pointercancel", () => { this._volumeDragging = false; });
}
/* ── Seek bar — shared by the main player and any mini player bar ── */
_bindSeekBar(progressBar, progressFill, posTimeEl) {
if (!progressBar || !progressFill) return;
const getSeekPct = (e) => {
const rect = progressBar.getBoundingClientRect();
return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
};
progressBar.addEventListener("pointerdown", (e) => {
const state = this._getActiveState();
if (!state?.attributes?.media_duration) return;
this._seekDragging = true;
progressBar.setPointerCapture(e.pointerId);
progressFill.style.transition = "none";
const pct = getSeekPct(e);
progressFill.style.width = `${(pct * 100).toFixed(1)}%`;
if (posTimeEl) posTimeEl.textContent = fmt(pct * state.attributes.media_duration);
});
progressBar.addEventListener("pointermove", (e) => {
if (!this._seekDragging) return;
const state = this._getActiveState();
if (!state?.attributes?.media_duration) return;
const pct = getSeekPct(e);
progressFill.style.width = `${(pct * 100).toFixed(1)}%`;
if (posTimeEl) posTimeEl.textContent = fmt(pct * state.attributes.media_duration);
});
const endSeekDrag = (e) => {
if (!this._seekDragging) return;
this._seekDragging = false;
progressFill.style.transition = "";
const state = this._getActiveState();
if (!state?.attributes?.media_duration) return;
const pct = getSeekPct(e);
const pos = pct * state.attributes.media_duration;
this._callService("media_seek", { seek_position: Math.round(pos) });
this._localPosition = pos;
this._localPositionTime = Date.now() / 1000;
this._localPositionKey = `${this._activePlayer}|${state.attributes.media_content_id}`;
};
progressBar.addEventListener("pointerup", endSeekDrag);
progressBar.addEventListener("pointercancel", () => {
this._seekDragging = false;
progressFill.style.transition = "";
});
}
/* ── Device row ── */
/* ══ Audio outputs: output row + output panel (switch / group / control) ══
Facts only Music Assistant knows (group leader, members, who can group with whom,
powered, HA area) come from GET /my_music_library/outputs, reloaded when the group
layout of our players changes in hass.states; live state (playing, volume, title)
comes from hass.states. Every action goes through POST /my_music_library/outputs. */
_outputInfo(eid) { return this._outputs?.get(eid) || null; }
async _loadOutputs() {
if (!this._hass) return;
const seq = ++this._outputsSeq;
try {
const data = await this._callIntegration("GET", "outputs");
if (seq !== this._outputsSeq) return;
this._outputs = new Map((data?.outputs || []).map(o => [o.entity_id, o]));
this._presets = data?.presets || [];
} catch (err) {
this._debugLog("outputs load failed:", err);
return;
}
const card = this.shadowRoot?.querySelector(".card-root");
if (card) {
this._updateDeviceRow(card);
this._renderOutputPanel(card);
}
}
/* Group layout of our players as seen in hass.states: when it changes (MA regrouped,
a player went offline or off), the MA-side facts are reloaded. */
_outputsSignature() {
return Object.entries(this._hass?.states || {})
.filter(([, s]) => s.attributes?.mass_player_id)
.map(([id, s]) => `${id}:${s.state === "unavailable" ? "u" : s.state === "off" ? "o" : "1"}:${(s.attributes.group_members || []).join(",")}`)
.join("|");
}
_scheduleOutputsReload() {
const sig = this._outputsSignature();
if (sig === this._outputsSig) return;
this._outputsSig = sig;
clearTimeout(this._outputsReloadTimer);
this._outputsReloadTimer = setTimeout(() => this._loadOutputs(), this._outputs ? 400 : 0);
}
_groupLeaderOf(eid) {
return this._outputInfo(eid)?.leader || eid;
}
_groupMembersOf(leader) {
const info = this._outputInfo(leader);
const members = info ? info.members : (this._hass?.states[leader]?.attributes?.group_members || []);
return members.filter(m => m !== leader);
}
_canGroup(a, b) {
return !!(this._outputInfo(a)?.groupable?.includes(b) || this._outputInfo(b)?.groupable?.includes(a));
}
_outputFullName(eid) {
return this._hass?.states[eid]?.attributes?.friendly_name || this._outputInfo(eid)?.name || eid;
}
_outputArea(eid) {
const info = this._outputInfo(eid);
if (info) return info.area || null;
const ent = this._hass?.entities?.[eid];
const areaId = ent?.area_id || this._hass?.devices?.[ent?.device_id]?.area_id;
return (areaId && this._hass?.areas?.[areaId]?.name) || null;
}
/* Short display name: card alias → HA area (when it is the only output there) → cleaned name. */
_outputName(eid) {
const alias = this._config.devices?.[eid]?.name;
if (alias) return alias;
const area = this._outputArea(eid);
if (area) {
const sameArea = Object.keys(this._hass?.states || {})
.filter(id => id.startsWith("media_player.") && this._isOfferedOutput(id, { includeOffline: true }))
.filter(id => this._outputArea(id) === area);
if (sameArea.length === 1) return area;
}
return this._cleanOutputName(this._outputFullName(eid));
}
/* "squeeze-salle-d-eau" → "Salle d'eau", "browser_mod_80df8189_b0b53f25" → "Browser 80df". */
_cleanOutputName(name) {
let n = String(name || "").trim();
const bm = n.match(/^browser_mod_([0-9a-f]{4})/i);
if (bm) return `${this._t("outputs.browser")} ${bm[1]}`;
n = n.replace(/^(squeezelite|squeeze|snapcast|sonos|airplay|chromecast)[-_ ]+/i, "");
if (/[-_]/.test(n) && !/\s/.test(n)) {
n = n.replace(/[-_]+/g, " ").replace(/\b([dlj]) (?=[aeiouyhàâéèêëîïôöûü])/gi, "$1'");
}
return n ? n.charAt(0).toUpperCase() + n.slice(1) : String(name || "");
}
_outputIcon(eid) {
const custom = this._config.devices?.[eid]?.icon;
if (custom) return custom;
const info = this._outputInfo(eid);
const name = this._outputFullName(eid);
if (info) {
if (["group", "sync_group", "stereo_pair"].includes(info.type)) return "mdi:speaker-multiple";
const prov = (info.provider || "").split("--")[0];
if (prov === "sendspin" || /^web\b/i.test(name)) return "mdi:web";
if (prov === "chromecast") return "mdi:cast-audio";
if (prov === "airplay") return "mdi:apple-airplay";
if (/\b(tv|webos|bravia|television)\b/i.test(`${name} ${info.model || ""}`)) return "mdi:television";
return info.icon || "mdi:speaker";
}
const attr = this._hass?.states[eid]?.attributes || {};
if (/browser/i.test(eid)) return "mdi:web";
if (attr.device_class === "tv" || /\b(tv|fire_tv)\b/i.test(eid)) return "mdi:television";
return attr.icon || "mdi:speaker";
}
/* An output the panel may show: our MA players, plus other HA media players when
show_other_players is set — minus those hidden by the card or the integration options. */
_isOfferedOutput(eid, { includeOffline = false, includeOthers = false } = {}) {
const st = this._hass?.states[eid];
if (!st || this._isExcluded(eid) || this._config.devices?.[eid]?.hidden) return false;
if (!st.attributes?.mass_player_id && !(includeOthers && this._config.show_other_players)) return false;
return includeOffline || st.state !== "unavailable";
}
_panelOutputIds(opts = {}) {
return Object.keys(this._hass?.states || {})
.filter(id => id.startsWith("media_player.") && this._isOfferedOutput(id, opts))
.sort((a, b) => this._outputName(a).localeCompare(this._outputName(b)));
}
_stateLabel(eid) {
const st = this._hass?.states[eid];
const info = this._outputInfo(eid);
if (!st || st.state === "unavailable" || info?.available === false) return this._t("outputs.unavailable");
if (st.state === "off" || info?.powered === false) return this._t("outputs.off");
if (st.state === "playing") return this._t("outputs.playing");
if (st.state === "paused") return this._t("outputs.paused");
return this._t("outputs.idle");
}
_tf(key, vars = {}) {
return String(this._t(key)).replace(/\{(\w+)\}/g, (m, k) => (k in vars ? vars[k] : m));
}
_setActivePlayerTo(eid) {
if (!eid || eid === this._activePlayer) return;
this._activePlayer = eid;
this._savePlayer(eid);
this._loadMAQueue();
const card = this.shadowRoot?.querySelector(".card-root");
if (card) this._updatePlayerContent(card);
}
/* ── Output row (player tab + mini player bar) ── */
_updateDeviceRow(card) {
let text = this._t("player.no_player");
let full = "";
let icon = "mdi:speaker";
if (this._activePlayer) {
const leader = this._groupLeaderOf(this._activePlayer);
const ids = [leader, ...this._groupMembersOf(leader)];
text = ids.length > 3
? `${this._outputName(leader)} +${ids.length - 1}`
: ids.map(id => this._outputName(id)).join(" + ");
full = ids.map(id => this._outputFullName(id)).join(" + ");
icon = ids.length > 1 ? "mdi:speaker-multiple" : this._outputIcon(this._activePlayer);
}
card.querySelectorAll("#device-name, .mini-device-name").forEach(el => {
el.textContent = text;
el.title = full;
});
card.querySelectorAll("#device-icon-wrap, .mini-device-icon-wrap").forEach(el => {
if (el.dataset.icon === icon) return;
el.dataset.icon = icon;
el.innerHTML = `
${["switch", "group", "control"].map(m => `${this._t(`outputs.mode_${m}`)} `).join("")}
${ICONS.close}
${this._t(`outputs.hint_${mode}`)}
${body}
${this._renderOutFooter(mode)}
`;
panel.querySelector(".out-body").scrollTop = scroll;
this._outPanelSig = this._outputPanelSignature();
if (!panel._mmlBound) {
panel._mmlBound = true;
this._bindOutputPanel(card, panel);
}
requestAnimationFrame(() => this._markTruncatedNames(panel));
}
/* The "i" button shows on tiles whose name is cut, or differs from the full name. */
_markTruncatedNames(panel) {
panel.querySelectorAll(".out-tile").forEach(tile => {
const nameEl = tile.querySelector(".out-tile-name");
const btn = tile.querySelector(".out-info");
if (!nameEl || !btn) return;
const cut = nameEl.scrollHeight > nameEl.clientHeight + 1 || nameEl.scrollWidth > nameEl.clientWidth + 1;
if (cut || nameEl.textContent !== nameEl.dataset.full) btn.hidden = false;
});
}
_renderOutTile(eid, { selected = false, disabled = false, reason = "", sub = "", action = "", extra = "" } = {}) {
const st = this._hass?.states[eid];
const info = this._outputInfo(eid);
const offline = !st || st.state === "unavailable" || info?.available === false;
const off = !offline && (st.state === "off" || info?.powered === false);
const playing = st?.state === "playing";
const name = this._outputName(eid);
const full = this._outputFullName(eid);
const isLeader = (info?.members || []).length > 0;
const cls = ["out-tile", selected && "sel", (disabled || offline) && "disabled", playing && "playing", off && "off"].filter(Boolean).join(" ");
return `
${ICONS.crown} ` : ""}
${this._esc(name)}
${this._esc(reason || sub || this._stateLabel(eid))}
${selected ? `
${ICONS.check} ` : ""}
${ICONS.info}
${off && info?.can_power ? `
${ICONS.power} ` : ""}
${extra}
`;
}
_renderPresetChips(mode) {
if (!this._presets?.length) return "";
return `
${this._t("outputs.presets")}
${this._presets.map(p => `
${ICONS.star}${this._esc(p.name)}
${mode === "group" ? `${ICONS.close} ` : ""}
`).join("")}
`;
}
_renderOfflineToggle() {
const offline = this._panelOutputIds({ includeOffline: true }).filter(id => this._hass.states[id]?.state === "unavailable");
if (!offline.length) return "";
return `${this._showOffline ? this._t("outputs.hide_offline") : this._tf("outputs.show_offline", { n: offline.length })} `;
}
_renderOutSwitch() {
const src = this._activePlayer;
if (!src) return `${this._t("outputs.no_outputs")}
${this._t("outputs.source")}
${group.map(id => `
${this._esc(group.map(id => this._outputName(id)).join(" + "))}
${this._esc(nowPlaying)}
${this._renderPresetChips("switch")}
${this._t("outputs.to")}
${tiles}
${this._renderOfflineToggle()}`;
}
_renderOutGroup() {
if (!this._activePlayer) return `${this._t("outputs.no_outputs")}
${this._tf("outputs.group_of", { name: this._esc(this._outputName(leader)) })}
${tiles || `
${this._t("outputs.no_other_outputs")}
`}
${this._esc(label)}
${isGroup ? `${ICONS.group} ` : `${muted ? ICONS.volumeMute : ICONS.volumeHigh} `}
${value}%
`;
};
return `
${this._t("outputs.volumes")}
${members.length ? row(leader, this._t("outputs.group_volume"), true) : ""}
${ids.map(id => row(id, this._outputName(id))).join("")}
`;
}
_renderOutControl() {
const ids = this._panelOutputIds({ includeOffline: this._showOffline });
const leaders = ids.filter(id => !this._outputInfo(id)?.leader);
const isActive = (id) => ["playing", "paused"].includes(this._hass?.states[id]?.state);
const sessions = leaders.filter(isActive);
const others = leaders.filter(id => !isActive(id));
const activeLeader = this._activePlayer ? this._groupLeaderOf(this._activePlayer) : null;
const pinned = this._loadPref("mml_default_player");
const pinBtn = (eid) => `${ICONS.pin} `;
const sessionRow = (eid) => {
const a = this._hass.states[eid].attributes || {};
const group = [eid, ...this._groupMembersOf(eid)];
const art = a.entity_picture
? `
${art}
${this._esc(group.map(id => this._outputName(id)).join(" + "))}
${this._hass.states[eid].state === "playing" ? ICONS.play : ICONS.pause}${this._esc(np)}
${pinBtn(eid)}
`;
};
const othersHa = this._config.show_other_players
? this._panelOutputIds({ includeOthers: true }).filter(id => !this._hass.states[id].attributes?.mass_player_id)
: [];
return `
${this._t("outputs.sessions")}
${sessions.length ? `${sessions.map(sessionRow).join("")}
` : `${this._t("outputs.no_sessions")}
`}
${others.length ? `
${this._t("outputs.other_outputs")}
${others.map(eid => this._renderOutTile(eid, { selected: eid === activeLeader, action: "control", extra: pinBtn(eid) })).join("")}
` : ""}
${this._renderOfflineToggle()}
${othersHa.length ? `
${this._t("outputs.other_players")}
${othersHa.map(eid => this._renderOutTile(eid, { selected: eid === this._activePlayer, action: "control" })).join("")}
` : ""}`;
}
_renderOutFooter(mode) {
if (mode === "switch") {
const sel = [...this._switchSel];
const leader = this._activePlayer ? this._groupLeaderOf(this._activePlayer) : null;
const current = leader ? [leader, ...this._groupMembersOf(leader)] : [];
const unchanged = sel.length === current.length && sel.every(id => current.includes(id)) && sel.includes(leader);
const label = !sel.length ? this._t("outputs.select_hint")
: sel.length === 1 ? this._tf("outputs.switch_to_one", { name: this._outputName(sel[0]) })
: this._tf("outputs.switch_to_many", { n: sel.length });
return ``;
}
if (mode === "group") {
const leader = this._activePlayer ? this._groupLeaderOf(this._activePlayer) : null;
if (!leader) return "";
const members = this._groupMembersOf(leader);
if (this._presetEditing) {
return `
`;
}
return `
`;
}
return "";
}
_bindOutputPanel(card, panel) {
const pop = () => panel.querySelector(".out-info-pop");
panel.addEventListener("pointerdown", (e) => {
if (e.target.matches('input[type="range"]')) this._outDragging = true;
});
panel.addEventListener("input", (e) => {
const pct = e.target.closest(".out-vol-row")?.querySelector(".out-vol-pct");
if (pct && e.target.matches('input[type="range"]')) pct.textContent = `${e.target.value}%`;
});
panel.addEventListener("change", (e) => {
const t = e.target;
if (!t.matches('input[type="range"]')) return;
this._outDragging = false;
if (t.dataset.vol) {
this._hass.callService("media_player", "volume_set", { entity_id: t.dataset.vol, volume_level: Number(t.value) / 100 });
} else if (t.dataset.groupVol) {
this._outputAction({ action: "group_volume", leader: t.dataset.groupVol, volume: Number(t.value) }, { reload: false });
}
});
panel.addEventListener("click", (e) => {
const t = e.target;
const popEl = pop();
if (popEl && !popEl.hidden && !t.closest(".out-info-pop") && !t.closest(".out-info")) popEl.hidden = true;
const btn = (sel) => t.closest(sel);
let el;
if ((el = btn(".out-mode"))) {
this._outputMode = el.dataset.mode;
this._switchSel = new Set();
this._presetEditing = false;
this._renderOutputPanel(card);
} else if (btn(".out-close")) {
this._closeOutputPanel(card);
} else if ((el = btn(".out-info"))) {
e.stopPropagation();
this._showOutputInfo(panel, el);
} else if ((el = btn(".out-power"))) {
e.stopPropagation();
this._outputAction({ action: "power", player: el.dataset.power, powered: true });
} else if ((el = btn(".out-pin"))) {
e.stopPropagation();
const eid = el.dataset.pin;
if (this._loadPref("mml_default_player") === eid) this._removePref("mml_default_player");
else this._savePref("mml_default_player", eid);
this._renderOutputPanel(card);
} else if ((el = btn(".out-mute"))) {
const eid = el.dataset.mute;
this._hass.callService("media_player", "volume_mute", { entity_id: eid, is_volume_muted: !this._hass.states[eid]?.attributes?.is_volume_muted });
} else if ((el = btn(".out-chip-del"))) {
e.stopPropagation();
const preset = this._presets.find(p => p.id === el.dataset.delPreset);
if (preset && confirm(this._tf("outputs.delete_preset_confirm", { name: preset.name }))) {
this._outputAction({ action: "delete_preset", id: preset.id });
}
} else if ((el = btn(".out-chip"))) {
this._applyPreset(card, this._presets.find(p => p.id === el.dataset.preset));
} else if (btn("[data-toggle-offline]")) {
this._showOffline = !this._showOffline;
this._renderOutputPanel(card);
} else if (btn("[data-do-switch]")) {
this._doSwitch(card);
} else if (btn("[data-edit-preset]")) {
this._presetEditing = true;
this._renderOutputPanel(card);
panel.querySelector(".out-preset-input")?.focus();
} else if (btn("[data-cancel-preset]")) {
this._presetEditing = false;
this._renderOutputPanel(card);
} else if (btn("[data-save-preset]")) {
this._saveCurrentGroupAsPreset(card, panel.querySelector(".out-preset-input")?.value || "");
} else if (btn("[data-dissolve]")) {
const leader = this._groupLeaderOf(this._activePlayer);
this._outputAction({ action: "set_members", leader, remove: this._groupMembersOf(leader) });
} else if ((el = btn(".out-tile, .out-session"))) {
if (el.getAttribute("aria-disabled") === "true") return;
this._onOutputTileClick(card, el.dataset.action, el.dataset.eid);
}
});
panel.addEventListener("keydown", (e) => {
if (e.key === "Enter" && e.target.matches(".out-preset-input")) this._saveCurrentGroupAsPreset(card, e.target.value);
if (e.key === "Escape") this._closeOutputPanel(card);
});
}
_onOutputTileClick(card, action, eid) {
if (action === "switch-toggle") {
if (this._switchSel.has(eid)) this._switchSel.delete(eid);
else this._switchSel.add(eid);
this._renderOutputPanel(card);
} else if (action === "group-toggle") {
const leader = this._groupLeaderOf(this._activePlayer);
const inGroup = this._groupMembersOf(leader).includes(eid);
this._outputAction({ action: "set_members", leader, [inGroup ? "remove" : "add"]: [eid] });
} else if (action === "control") {
this._setActivePlayerTo(eid);
this._closeOutputPanel(card);
}
}
async _doSwitch(card) {
const targets = [...this._switchSel];
if (!targets.length || !this._activePlayer) return;
const source = this._groupLeaderOf(this._activePlayer);
const ok = await this._outputAction({ action: "transfer", source, targets });
if (!ok) return;
const names = targets.map(id => this._outputName(id)).join(" + ");
this._showToast(this._tf("outputs.switched", { name: names }));
// Control follows the music: the new group's leader (the source when it stays in).
this._setActivePlayerTo(targets.includes(source) ? source : targets[0]);
this._closeOutputPanel(card);
}
_applyPreset(card, preset) {
if (!preset) return;
const wanted = [preset.leader, ...preset.members].filter(id => this._isOfferedOutput(id));
if (this._outputMode === "switch") {
this._switchSel = new Set(wanted);
this._renderOutputPanel(card);
} else if (this._outputMode === "group") {
const leader = this._groupLeaderOf(this._activePlayer);
const members = this._groupMembersOf(leader);
const add = wanted.filter(id => id !== leader && !members.includes(id) && this._canGroup(leader, id));
const remove = members.filter(id => !wanted.includes(id));
if (add.length || remove.length) this._outputAction({ action: "set_members", leader, add, remove });
}
}
async _saveCurrentGroupAsPreset(card, name) {
name = name.trim();
if (!name) return;
const leader = this._groupLeaderOf(this._activePlayer);
const ok = await this._outputAction({ action: "save_preset", name, leader, members: this._groupMembersOf(leader) });
if (ok) {
this._presetEditing = false;
this._showToast(this._tf("outputs.preset_saved", { name }));
}
}
_showOutputInfo(panel, btn) {
const eid = btn.dataset.info;
const info = this._outputInfo(eid);
const pop = panel.querySelector(".out-info-pop");
if (!pop) return;
const rows = [
[this._t("outputs.info_entity"), eid],
[this._t("outputs.info_area"), this._outputArea(eid)],
[this._t("outputs.info_model"), [info?.manufacturer, info?.model].filter(Boolean).join(" ")],
[this._t("outputs.info_provider"), info?.provider],
[this._t("outputs.info_state"), this._stateLabel(eid)],
].filter(([, v]) => v);
pop.innerHTML = `
${this._esc(this._outputFullName(eid))}
${rows.map(([k, v]) => `${this._esc(k)} ${this._esc(v)}
`).join("")}`;
pop.hidden = false;
const r = btn.getBoundingClientRect();
const pr = panel.getBoundingClientRect();
const width = Math.min(260, pr.width - 16);
pop.style.width = `${width}px`;
pop.style.left = `${Math.max(8, Math.min(r.right - pr.left - width, pr.width - width - 8))}px`;
const below = r.bottom - pr.top + 6;
pop.style.top = `${below + pop.offsetHeight > pr.height ? Math.max(8, r.top - pr.top - pop.offsetHeight - 6) : below}px`;
}
async _outputAction(body, { reload = true } = {}) {
try {
await this._callIntegration("POST", "outputs", body);
return true;
} catch (err) {
let msg = err?.message || String(err);
try { msg = JSON.parse(msg.replace(/^\d+:\s*/, "")).message || msg; } catch (_) { /* plain text */ }
this._showToast(this._tf("outputs.action_failed", { msg }));
return false;
} finally {
if (reload) this._loadOutputs();
}
}
/* ── Settings ── */
_openSettings(card) {
const modal = card.querySelector("#settings-modal");
const content = card.querySelector("#settings-content");
content.innerHTML = this._buildSettingsContent();
this._attachSettingsListeners(content, card);
modal.classList.add("open");
}
_closeSettings(card) {
card.querySelector("#settings-modal").classList.remove("open");
}
_buildSettingsContent() {
const debugBanner = this._debugMode ? `
${this._t("settings.debug_active")}
${this._t("settings.debug_hint")}
` : "";
if (this._maProviders.length === 0) {
return `${debugBanner}${this._t("settings.providers_empty")}
`;
}
const rows = this._maProviders.map(p => {
const key = p.instance_id || p.domain;
const enabled = this._enabledProviders === null || this._enabledProviders.has(key);
return `
${this._esc(p.name || p.domain)}
`;
}).join("");
return `
${debugBanner}
${this._t("settings.providers_title")}
${this._t("settings.providers_hint")}
${rows}`;
}
_attachSettingsListeners(content, card) {
content.querySelectorAll("input[data-provider]").forEach(input => {
input.addEventListener("change", () => {
const key = input.dataset.provider;
if (this._enabledProviders === null) {
this._enabledProviders = new Set(this._maProviders.map(p => p.instance_id || p.domain));
}
if (input.checked) {
this._enabledProviders.add(key);
} else {
this._enabledProviders.delete(key);
}
if (this._enabledProviders.size >= this._maProviders.length) {
this._enabledProviders = null;
}
this._savePref("mml_providers", this._enabledProviders ? JSON.stringify([...this._enabledProviders]) : "");
const activeTabDef = this._resolvedTabs?.find(t => t.id === this._tab);
if (activeTabDef?.type === "discovery") {
this._discoveryLoadedTabs.delete(this._tab);
this._loadDiscovery(this._tab);
} else {
this._reloadLibrary();
}
});
});
}
_savePlayer(entityId) {
try { localStorage.setItem("mml_active_player", entityId); } catch (_) {}
}
_loadSavedPlayer() {
try { return localStorage.getItem("mml_active_player"); } catch (_) { return null; }
}
_savePref(key, value) {
try { localStorage.setItem(key, value); } catch (_) {}
}
_loadPref(key) {
try { return localStorage.getItem(key); } catch (_) { return null; }
}
_removePref(key) {
try { localStorage.removeItem(key); } catch (_) {}
}
_applyQueueVisibility(card) {
const qs = card.querySelector("#queue-section");
const btn = card.querySelector("#btn-queue-toggle");
const backdrop = card.querySelector("#queue-backdrop");
if (this._isMobile) {
if (qs) qs.classList.toggle("mml-queue-open", this._queueVisible);
if (backdrop) backdrop.classList.toggle("open", this._queueVisible);
} else {
if (qs) qs.style.display = this._queueVisible ? "" : "none";
}
if (btn) btn.classList.toggle("active", this._queueVisible);
}
/* ── Search ── */
async _doSearch(card) {
if (!this._hass) return;
const id = ++this._searchId;
const query = this._searchQuery;
this._debugLog("Search start:", query, "id:", id);
this._searchLoading = true;
const resultsEl = card.querySelector("#search-results");
resultsEl.innerHTML = `
${this._t("search.searching")}
${ICONS.search}
${this._t("search.type_hint")}
${ICONS.search}
${this._t("search.unavailable")}
${this._t("search.player_label")}: ${this._activePlayer || "—"}
${this._esc(results.error)}
${this._t("search.console_hint")}
${ICONS.search}
${this._t("search.no_results")} « ${this._searchQuery} »
${label}
`
+ items.map(i => this._renderResultItem(i, iconName)).join("");
wrapper.appendChild(col);
}
el.appendChild(wrapper);
this._attachItemActions(el);
} else {
const lazyState = [];
for (const { key, label, icon: iconName, card: isCard } of populated) {
const allItems = results[key] || [];
const initial = isCard ? INITIAL_CARDS : INITIAL_LIST;
const shown = allItems.slice(0, initial);
const remaining = allItems.slice(initial);
const secEl = document.createElement("div");
secEl.className = "search-section";
if (isCard) {
secEl.innerHTML = `${label}
${shown.map(i => this._renderSearchCard(i, iconName)).join("")}
`;
} else {
secEl.innerHTML = `${label}
`
+ shown.map(i => this._renderResultItem(i, iconName)).join("");
}
el.appendChild(secEl);
if (remaining.length > 0) {
lazyState.push({ el: secEl, items: remaining, iconName, isCard, loaded: 0 });
}
}
this._attachItemActions(el);
if (lazyState.length > 0) {
const scrollContainer = el.closest(".tab-panel") || el.parentElement;
const onScroll = () => {
let allDone = true;
for (const st of lazyState) {
if (st.loaded >= st.items.length) continue;
const rect = st.el.getBoundingClientRect();
const containerRect = scrollContainer.getBoundingClientRect();
if (rect.bottom < containerRect.bottom + 200) {
const batch = st.items.slice(st.loaded, st.loaded + LAZY_BATCH);
st.loaded += batch.length;
if (st.isCard) {
const scroll = st.el.querySelector(".lib-scroll");
if (scroll) scroll.insertAdjacentHTML("beforeend", batch.map(i => this._renderSearchCard(i, st.iconName)).join(""));
} else {
st.el.insertAdjacentHTML("beforeend", batch.map(i => this._renderResultItem(i, st.iconName)).join(""));
}
this._attachItemActions(st.el);
}
if (st.loaded < st.items.length) allDone = false;
}
if (allDone) scrollContainer.removeEventListener("scroll", onScroll);
};
scrollContainer.addEventListener("scroll", onScroll, { passive: true });
}
}
}
_renderResultItem(item, iconName) {
const thumb = item.thumbnail
? `${ICONS[iconName] || ICONS.music}
`;
const queueType = item.type === "track" || iconName === "music" ? "track" : item.type;
const canQueue = ["track", "music", "album", "playlist", "artist"].includes(queueType);
return `
${thumb}
${this._esc(item.title)}
${item.subtitle ? `
${this._esc(item.subtitle)}
` : ""}
${canQueue ? `
${ICONS.plus} ` : ""}
${item.can_play ? `
${ICONS.play} ` : ""}
${this._t("lib.loading")}
`
: `
`;
let containerClass, containerId;
if (isTrackList) {
containerId = `lib-list-${type}`;
containerClass = "";
} else if (layout === "grid" || layout === "columns") {
containerId = `lib-grid-${type}`;
containerClass = "lib-grid";
} else {
containerId = `lib-scroll-${type}`;
containerClass = "lib-scroll";
}
const inner = `${itemsHtml}${sentinel}
`;
const body = (layout === "lanes" && !isTrackList)
? `
${ICONS.chevronLeft}
${inner}
${ICONS.chevronRight}
`
: inner;
return `
${body}
`;
};
// Helper: append a section into its pre-created placeholder
const appendSection = (type, label, iconName, items) => {
if (loadId !== this._libLoadId) return; // stale load
const loader = libEl.querySelector("#lib-loader");
if (loader) loader.remove();
const placeholder = libEl.querySelector(`#lib-slot-${type}`);
if (!placeholder) return;
placeholder.innerHTML = sectionHtml(type, label, iconName, items);
const sec = placeholder.querySelector(`#lib-sec-${type}`);
if (sec) this._attachItemActions(sec);
if (layout === "lanes") this._attachLaneArrows(sec);
};
// Lazy-load recommendations: fetched once on first discover section, shared by all
let _recPromise = null;
const _getRecommendations = () => {
if (_recPromise) return _recPromise;
const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), 8000));
const fetcher = this._callIntegration("GET", "recommendations").then(d => d?.folders || []);
_recPromise = Promise.race([fetcher, timeout]).catch(err => {
this._debugLog("Recommendations fetch failed:", err);
return [];
});
return _recPromise;
};
const _extractDiscoverItems = async (sectionType) => {
const recFolders = await _getRecommendations();
if (!recFolders || recFolders.length === 0) return [];
const folders = recFolders.filter(f => this._isFolderEnabled(f));
const mapping = DISCOVER_FOLDER_MAP[sectionType];
if (Array.isArray(mapping)) {
return folders
.filter(f => mapping.includes(f.folder_id))
.flatMap(f => f.items || []);
}
if (sectionType === "flows") {
return folders
.filter(f => {
const id = (f.folder_id || "").toLowerCase();
const name = (f.name || "").toLowerCase();
return id.includes("flow") || name.includes("flow");
})
.flatMap(f => f.items || []);
}
const claimedIds = new Set();
for (const [key, val] of Object.entries(DISCOVER_FOLDER_MAP)) {
if (key === "recommended") continue;
if (Array.isArray(val)) val.forEach(id => claimedIds.add(id));
}
return folders
.filter(f => {
if (claimedIds.has(f.folder_id)) return false;
const id = (f.folder_id || "").toLowerCase();
const name = (f.name || "").toLowerCase();
if (id.includes("flow") || name.includes("flow")) return false;
if (["random_artists", "random_albums", "recent_favorite_tracks", "favorite_playlists", "favorite_radio", "in_progress"].includes(f.folder_id)) return false;
return true;
})
.flatMap(f => f.items || []);
};
// Fetch one section: first page in parallel, then lazy-paginate if source filter needs more
const multiProvider = activeProviders && activeProviders.length > 1;
const fetchSection = async (s) => {
// Discover sections fetch recommendations lazily (with timeout, non-blocking for other sections)
if (DISCOVER_SECTIONS.includes(s.type)) {
try {
const raw = await _extractDiscoverItems(s.type);
if (loadId !== this._libLoadId) return;
const items = this._filterLibItems(raw);
if (items.length > 0) {
this._libSections[s.type] = { offset: items.length, loading: false, exhausted: true, favorite: false, iconName: s.icon };
appendSection(s.type, s.label, s.icon, items);
} else {
this._libSections[s.type] = { offset: 0, loading: false, exhausted: true, favorite: false, iconName: s.icon };
}
} catch (err) {
this._debugLog("Discover section failed:", s.type, err);
this._libSections[s.type] = { offset: 0, loading: false, exhausted: true, favorite: false, iconName: s.icon };
}
return;
}
let offset = 0;
let exhausted = false;
let pages = 0;
let rendered = false;
while (pages < MAX_PAGES && !exhausted) {
if (loadId !== this._libLoadId) return; // stale load
pages++;
const raw = await this._fetchLibraryFiltered(s.type, PAGE, offset, s.favorite, activeProviders);
offset += raw.length;
if (raw.length < PAGE || multiProvider) exhausted = true;
const filtered = this._filterLibItems(raw);
const hasClientFilter = sourceFilter !== "all";
if (filtered.length > 0 && !rendered) {
this._libSections[s.type] = { offset, loading: false, exhausted, favorite: s.favorite, iconName: s.icon };
appendSection(s.type, s.label, s.icon, filtered);
rendered = true;
if (!hasClientFilter || exhausted) break;
continue;
}
if (filtered.length > 0 && rendered) {
this._libSections[s.type].offset = offset;
this._libSections[s.type].exhausted = exhausted;
const isTrackList = s.icon === "music";
const sentinel = libEl.querySelector(`#lib-sentinel-${s.type}`);
const container = isTrackList
? libEl.querySelector(`#lib-list-${s.type}`)
: (libEl.querySelector(`#lib-scroll-${s.type}`) || libEl.querySelector(`#lib-grid-${s.type}`));
if (container && sentinel) {
const tmp = document.createElement("div");
tmp.innerHTML = filtered.map(i => isTrackList ? this._renderLibListItem(i) : this._renderLibCard(i, s.icon)).join("");
while (tmp.firstChild) container.insertBefore(tmp.firstChild, sentinel);
this._attachItemActions(container);
}
break;
}
if (!hasClientFilter || exhausted) break;
}
if (!this._libSections[s.type]) {
this._libSections[s.type] = { offset, loading: false, exhausted: true, favorite: s.favorite, iconName: s.icon };
}
};
// Pre-create ordered placeholders so parallel fetches render in config order
if (layout === "columns") {
const colsHtml = SECTIONS.map(s =>
`
`
).join("");
const colsWrap = document.createElement("div");
colsWrap.className = "lib-columns-wrap";
colsWrap.innerHTML = colsHtml;
libEl.appendChild(colsWrap);
} else {
for (const s of SECTIONS) {
const slot = document.createElement("div");
slot.id = `lib-slot-${s.type}`;
libEl.appendChild(slot);
}
}
// Launch all sections in parallel — each renders itself as soon as ready
await Promise.allSettled(SECTIONS.map(s => fetchSection(s)));
if (loadId !== this._libLoadId) return;
// Clean up loader if still present (all sections empty)
const loader = libEl.querySelector("#lib-loader");
if (loader) loader.remove();
if (!libEl.querySelector(".lib-section")) {
libEl.innerHTML = `${ICONS.library}
${this._t("lib.empty")}
${this._t("lib.empty_hint")}
${this._t("lib.loading")}
${ICONS.sparkle}
${this._t("discovery.load_error")}
${ICONS.chevronLeft}
${cardsHtml}
${ICONS.chevronRight}
`;
}).filter(Boolean).join("");
if (loadId !== this._discoveryLoadId) return;
libEl.innerHTML = sectionsHtml || `${ICONS.sparkle}
${this._t("discovery.empty")}
${ICONS[iconName] || ICONS.music}
`;
const type = item.type || iconName;
const action = type === "artist" ? "browse" : (type === "track" ? "play" : "play-queue");
const extra = type === "artist" ? `data-title="${this._esc(item.title)}" data-thumb="${this._esc(this._resolveImageUrl(item.thumbnail) || "")}"` : "";
const canQueue = ["album", "playlist", "track", "artist"].includes(type);
return `
${art}
${this._esc(item.title)}
${item.subtitle ? `
${this._esc(item.subtitle)}
` : ""}
${canQueue ? `
${ICONS.plus} ` : ""}
${ICONS.artist}
`;
// undefined = still loading, null = load failed, Array = loaded (see _renderArtistAllAlbumsSection)
this._artistAllAlbums = undefined;
this._artistAllAlbumsSort = { field: "name", dir: "asc" };
artistPanel.innerHTML = `
${this._t("artist.favorites")}
${this._t("lib.loading_short")}
${this._t("artist.all_albums")}
${this._t("artist.sort_name")}
${this._t("artist.sort_date")}
${this._t("lib.loading_short")}
`;
artistPanel.querySelector("#artist-back").addEventListener("click", () => {
artistPanel.style.display = "none";
searchMain.style.display = "";
if (opts.backTab) this._setActiveTab(opts.backTab, card);
});
artistPanel.querySelector("#artist-queue-btn")?.addEventListener("click", (e) => {
e.stopPropagation();
this._showQueueDropdown(e.currentTarget, id, "artist");
});
artistPanel.querySelectorAll(".artist-sort-btn").forEach(btn => {
btn.addEventListener("click", () => {
const field = btn.dataset.sortField;
if (this._artistAllAlbumsSort.field === field) {
this._artistAllAlbumsSort.dir = this._artistAllAlbumsSort.dir === "asc" ? "desc" : "asc";
} else {
this._artistAllAlbumsSort = { field, dir: field === "date" ? "desc" : "asc" };
}
this._renderArtistAllAlbumsSection(artistPanel);
});
});
this._callIntegration("GET", `subitems?action=artist_albums&uri=${encodeURIComponent(id)}&limit=100`)
.then(r => this._renderArtistFavoritesSection(artistPanel, r?.items || []))
.catch(() => this._renderArtistFavoritesSection(artistPanel, null));
this._callIntegration("GET", `subitems?action=artist_albums_all&uri=${encodeURIComponent(id)}&limit=300`)
.then(r => {
this._artistAllAlbums = r?.items || [];
this._renderArtistAllAlbumsSection(artistPanel);
})
.catch(() => {
this._artistAllAlbums = null;
this._renderArtistAllAlbumsSection(artistPanel);
});
}
/* ── Artist page: "Favoris" section (library/favorite albums, grouped by type) ── */
_renderArtistFavoritesSection(artistPanel, items) {
const body = artistPanel.querySelector(".artist-favorites-body");
if (!body) return;
if (items === null) {
body.innerHTML = `${ICONS.library}
${this._t("lib.load_error")}
${ICONS.library}
${this._t("lib.no_albums")}
${this._t(`lib.album_types.${t}`)}
${groups[t].map(i => this._renderSearchCard({ id: i.media_content_id, type: "album", title: i.title, subtitle: i.media_artist, thumbnail: i.thumbnail }, "album")).join("")}
`).join("");
}
/* ── Artist page: "Tous les albums" section (full catalog, sortable) ── */
_renderArtistAllAlbumsSection(artistPanel) {
const section = artistPanel.querySelector("#artist-all-albums-section");
const body = artistPanel.querySelector(".artist-all-albums-body");
if (!body) return;
const items = this._artistAllAlbums;
if (items === undefined) return; // still loading — keep spinner as-is
if (items === null) {
body.innerHTML = `${ICONS.library}
${this._t("artist.load_error")}
${ICONS.library}
${this._t("artist.no_albums")}
${this._t("queue.empty")}
`;
return;
}
list.innerHTML = this._maQueueItems.map((t, i) => `
${i + 1}
${this._esc(t.title)}
${t.media_artist ? `
${this._esc(t.media_artist)}
` : ""}
${t.duration ? `
${fmt(t.duration)}
` : ""}
${ICONS.remove}
`).join("");
list.querySelectorAll(".queue-item").forEach(item => {
item.addEventListener("click", (e) => {
if (e.target.closest(".queue-remove")) return;
this._jumpToQueueIndex(parseInt(item.dataset.queueIdx, 10));
});
});
list.querySelectorAll(".queue-remove").forEach(btn => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
this._removeFromQueue(btn.dataset.queueItemId);
});
});
}
async _removeFromQueue(queueItemId) {
if (!queueItemId || !this._activePlayer) return;
try {
await this._callIntegration("POST", "ma_queue", {
player: this._activePlayer,
action: "delete_item",
item_id: queueItemId,
});
this._refreshQueueSoon(500);
} catch (err) {
this._debugLog("removeFromQueue failed:", err);
}
}
async _addItemToQueue(id, type, mode) {
if (!this._hass || !this._activePlayer) return;
const enqueue = mode === "next" ? "next" : "add";
try {
await this._callServiceSilent("my_music_library", "play_media", {
entity_id: this._activePlayer,
media_id: id,
enqueue,
});
this._showToast(this._t(mode === "next" ? "queue.added_next" : "queue.added_end"));
this._refreshQueueSoon(1000);
} catch (err) {
this._debugLog("addItemToQueue failed:", err);
}
}
_showQueueDropdown(btnEl, id, type) {
this._closeQueueDropdown();
const dd = document.createElement("div");
dd.className = "queue-dropdown";
dd.id = "mml-queue-dropdown";
dd.innerHTML = `
${this._t("queue.play_next")}
${this._t("queue.add_to_end")}
${ICONS.shuffle} ${this._t("queue.start_mix")}
`;
dd.querySelectorAll(".queue-dropdown-item").forEach(item => {
item.addEventListener("click", (e) => {
e.stopPropagation();
if (item.dataset.mode === "radio") {
this._startRadioMode(id, type);
} else {
this._addItemToQueue(id, type, item.dataset.mode);
}
this._closeQueueDropdown();
});
});
const root = this.shadowRoot;
root.appendChild(dd);
const rect = btnEl.getBoundingClientRect();
const hostRect = this.getBoundingClientRect();
dd.style.top = `${rect.bottom - hostRect.top}px`;
dd.style.left = `${Math.max(0, rect.right - hostRect.left - 200)}px`;
const autoClose = (e) => {
const path = e.composedPath();
if (!path.includes(dd) && !path.includes(btnEl)) {
this._closeQueueDropdown();
}
};
setTimeout(() => {
document.addEventListener("click", autoClose, true);
root.addEventListener("click", autoClose, true);
}, 0);
this._queueDropdownCleanup = () => {
document.removeEventListener("click", autoClose, true);
root.removeEventListener("click", autoClose, true);
};
}
_closeQueueDropdown() {
const existing = this.shadowRoot?.querySelector("#mml-queue-dropdown");
if (existing) existing.remove();
if (this._queueDropdownCleanup) { this._queueDropdownCleanup(); this._queueDropdownCleanup = null; }
}
/* Music Assistant builds the whole mix (similar-track lookups at the providers) before
answering, which takes several seconds: give feedback right away instead of after. */
async _startRadioMode(id, type) {
if (!this._hass || !this._activePlayer) return;
const card = this.shadowRoot.querySelector(".card-root");
if (card) this._setActiveTab("player", card);
this._showToast(this._t("queue.mix_preparing"), 30000);
try {
await this._callServiceSilent("my_music_library", "play_media", {
entity_id: this._activePlayer,
media_id: id,
enqueue: "replace",
radio_mode: true,
});
this._showToast(this._t("queue.mix_started"));
this._refreshQueueSoon(1500);
} catch (err) {
this._debugLog("startRadioMode failed:", err);
this._showToast(`${this._t("errors.play_failed")}: ${this._extractErrorMessage(err)}`);
}
}
async _jumpToQueueIndex(index) {
if (!this._hass || !this._activePlayer) return;
if (index < 0 || index >= this._maQueueItems.length) return;
try {
await this._callIntegration("POST", "queue_jump", {
player: this._activePlayer,
index,
});
} catch (err) {
this._debugLog("queue jump failed:", err);
}
}
/* ── Browse mode ── */
_buildBrowseNav() {
// Breadcrumb always rendered — present in all states (success, empty, error)
const crumbs = [{ uri: null, label: this._t("lib.browse_root") }, ...this._browseStack];
const crumbHtml = crumbs.map((c, i) => {
const isLast = i === crumbs.length - 1;
const sep = i > 0 ? `› ` : "";
return `${sep}${this._esc(c.label)} `;
}).join("");
return `${crumbHtml}
`;
}
_attachBrowseNav(libEl) {
libEl.querySelector("#browse-crumbs")?.addEventListener("click", (e) => {
const btn = e.target.closest(".browse-crumb");
if (!btn || btn.classList.contains("current")) return;
const idx = parseInt(btn.dataset.crumbIdx, 10);
// idx 0 = root → empty stack; idx N → keep first N-1 entries
this._browseStack = idx === 0 ? [] : this._browseStack.slice(0, idx);
this._libLoadedTabs.delete(this._tab);
this._loadLibrary();
});
}
async _loadBrowse(uri, libEl) {
if (!libEl) {
const card = this.shadowRoot.querySelector(".card-root");
const activePanel = card?.querySelector(`.tab-panel[data-panel="${this._tab}"]`);
libEl = (activePanel || card)?.querySelector("#lib-content-inner");
}
if (!libEl) return;
libEl.innerHTML = `
${this._buildBrowseNav()}
${this._t("lib.loading_short")}
${items.length
? items.map(item => this._renderBrowseItem(item)).join("")
: `
${ICONS.folder}
${this._t("lib.browse_empty")}
`
}
${ICONS.library}
${this._t("lib.browse_error")}
${isFolder ? ICONS.folderOpen : ICONS.music}
`;
const subtitle = item.subtitle
? `${this._esc(item.subtitle)}
` : "";
const chevron = isFolder
? `${ICONS.chevronRight}
` : "";
return `
${iconHtml}
${this._esc(item.title)}
${subtitle}
${ICONS.play}
${chevron}
${ICONS[iconName] || ICONS.music}
`;
const action = iconName === "artist" ? "browse" : (iconName === "music" ? "play" : "play-queue");
const extra = iconName === "artist" ? `data-title="${this._esc(item.title)}" data-thumb="${this._esc(this._resolveImageUrl(item.thumbnail) || "")}"` : "";
const type = iconName === "artist" ? "artist" : (item.media_content_type || iconName);
const id = item.media_content_id || item.uri || "";
const artist = item.media_artist || item.subtitle || "";
const canQueue = ["album", "playlist", "track", "artist"].includes(type);
return `
${thumb}
${this._esc(item.title)}
${artist ? `
${this._esc(artist)}
` : ""}
${canQueue ? `
${ICONS.plus} ` : ""}
${thumb}
${this._esc(item.title)}
${item.media_artist ? `
${this._esc(item.media_artist)}
` : ""}
${ICONS.plus}
${ICONS.play}
${this._t("lib.loading_short")}
${ICONS.playlist}
${this._t("playlist.load_error")}
${this._t("editor.tabs_title")}
${tabs.map((tab, i) => this._renderTabItem(tab, i, tabs.length)).join("")}
${this._showAddMenu ? `
` : `
+ ${this._t("editor.add_tab")}
`}
`;
root.appendChild(wrap);
this._attachEditorListeners(wrap, tabs);
}
/* Per-output overrides: devices: { : { name, icon, hidden } } (empty values dropped). */
_renderOutputsFields() {
this._renderedOutputsKey = this._outputsKey();
const states = this._hass?.states || {};
const ids = Object.keys(states)
.filter(id => id.startsWith("media_player.") && (states[id].attributes?.mass_player_id || this._config.show_other_players))
.filter(id => states[id].state !== "unavailable" || this._config.devices?.[id])
.sort((a, b) => (states[a].attributes?.friendly_name || a).localeCompare(states[b].attributes?.friendly_name || b));
if (!ids.length) return "";
const devices = this._config.devices || {};
return `
${this._t("editor.outputs_title")}
${this._t("editor.outputs_hint")}
${ids.map(id => {
const d = devices[id] || {};
return `
`;
}).join("")}
`;
}
_setDeviceOverride(eid, { name, icon, hidden }) {
const devices = { ...(this._config.devices || {}) };
const entry = {};
if (name) entry.name = name;
if (icon) entry.icon = icon;
if (hidden) entry.hidden = true;
if (Object.keys(entry).length) devices[eid] = entry;
else delete devices[eid];
this._config = { ...this._config };
if (Object.keys(devices).length) this._config.devices = devices;
else delete this._config.devices;
this._fireChanged();
}
_renderBasicFields(defaultTabOptions) {
const cfg = this._config;
const navPos = cfg.nav_bar?.position || "top";
const navAlign = cfg.nav_bar?.align || "start";
return `
${this._renderOutputsFields()}
${this._t("editor.nav_bar_section")}
${this._t("editor.nav_bar_position")}
${["top","bottom","left","right"].map(p =>
`${this._t(`editor.nav_bar_pos_${p}`)} `
).join("")}
${this._t("editor.nav_bar_align")}
${["start","center","end","space-between"].map(a =>
`${this._t(`editor.nav_bar_align_${a.replace("-","_")}`)} `
).join("")}
`;
}
_renderTabItem(tab, index, total) {
const isExpanded = this._expandedTab === index;
const typeClass = tab.type === "button" ? " button" : tab.type === "custom_element" ? " custom_element" : "";
return `
${isExpanded ? this._renderTabBody(tab, index) : ""}
`;
}
_renderActionSelect(tab, index) {
const actionType = tab.tap_action?.action || "none";
const allActions = ["none","toggle","more-info","navigate","url","call-service","assist",
"mml_navigate_tab","mml_navigate_section","mml_control"];
let actionFields = "";
if (actionType === "navigate") {
actionFields = `${this._t("editor.btn_nav_path")}
`;
} else if (actionType === "url") {
actionFields = `${this._t("editor.btn_url")}
`;
} else if (actionType === "call-service" || actionType === "perform-action") {
actionFields = `${this._t("editor.btn_service")}
`;
} else if (actionType === "mml_navigate_tab") {
// Use each tab's resolved *id* (not just its type) as the option value: when
// several tabs share a type (e.g. two "library" tabs with different sections),
// targeting by type alone is ambiguous — it always resolves to the first one.
// _buildResolvedTabs computes the same ids the card itself uses at runtime.
const resolvedTabs = _buildResolvedTabs(this._config);
const panelTabs = resolvedTabs.filter(t => t.type && !["button","custom_element"].includes(t.type));
const typeCounts = {};
for (const t of panelTabs) typeCounts[t.type] = (typeCounts[t.type] || 0) + 1;
const optionLabel = (t) => {
const base = t.label || this._t(`tabs.${t.type}`) || t.type;
return (!t.label && typeCounts[t.type] > 1) ? `${base} (${t.id})` : base;
};
// Backward compat: older bindings may store a bare type (e.g. "library") from
// before ids were used here — if nothing matches by id, fall back to matching
// the first tab of that type, same as the runtime resolver does.
const storedValue = tab.tap_action?.tab;
const matchesById = panelTabs.some(t => t.id === storedValue);
let firstTypeMatchUsed = false;
actionFields = `${this._t("editor.btn_mml_tab")} ${panelTabs.map(t => {
let isSelected = t.id === storedValue;
if (!matchesById && !firstTypeMatchUsed && t.type === storedValue) {
isSelected = true;
firstTypeMatchUsed = true;
}
return `${this._esc(optionLabel(t))} `;
}).join("")}
`;
} else if (actionType === "mml_navigate_section") {
const sections = ["artists","albums","playlists","tracks","radios","recently_played","recently_added","recommended","flows"];
actionFields = `${this._t("editor.btn_mml_section")} ${sections.map(s => `${this._t(`lib.${s}`) || s} `).join("")}
`;
} else if (actionType === "mml_control") {
const cmds = ["play_pause","next","prev","shuffle","repeat","mute"];
actionFields = `${this._t("editor.btn_mml_command")} ${cmds.map(c => `${this._t(`editor.mml_cmd_${c}`) || c} `).join("")}
`;
}
return `
${this._t("editor.btn_action_type")}
${allActions.map(a => `${this._t(`editor.action_${a.replace(/-/g,"_")}`) || a} `).join("")}
${actionFields}`;
}
_renderCustomElementBody(tab, index) {
return `
${this._t("editor.btn_element_name")}
${this._t("editor.btn_element_config")}
${this._renderShowInNavField(tab, index)}
${this._renderActionSelect(tab, index)}
${this._renderAdvancedBlock(tab, index)}
`;
}
/* Keys already covered by a dedicated control for a given tab type — the
advanced block only shows/edits whatever is left over, so nothing is
ever edited in two places at once. */
static _HANDLED_KEYS = {
player: ["type", "label", "icon", "show_in_nav"],
search: ["type", "label", "icon", "show_in_nav", "search_layout"],
library: ["type", "label", "icon", "show_in_nav", "sections", "layout"],
discovery: ["type", "label", "icon", "show_in_nav"],
playlist: ["type", "label", "icon", "show_in_nav", "playlist_uri", "playlist_label", "playlist_thumbnail"],
settings: ["type", "label", "icon", "show_in_nav"],
button: ["type", "icon", "name", "entity", "show_in_nav", "width", "height"],
custom_element: ["type", "element", "element_config", "name", "show_in_nav", "width", "height"],
};
_renderShowInNavField(tab, index) {
const checked = tab.show_in_nav !== false;
return `
${this._t("editor.tab_show_in_nav")}
`;
}
/* Generic escape hatch: whatever isn't managed by a dedicated control above
(e.g. tap_action's `data`/`target`, or any other property) is shown here
as raw YAML — one text block instead of a form control per property. */
_renderAdvancedBlock(tab, index) {
const handled = MyMusicLibraryCardEditor._HANDLED_KEYS[tab.type] || ["type"];
const extra = {};
for (const [k, v] of Object.entries(tab)) {
if (!handled.includes(k)) extra[k] = v;
}
const hasExtra = Object.keys(extra).length > 0;
return `
${this._t("editor.advanced_config")}
`;
}
_renderTabBody(tab, index) {
if (tab.type === "button") return this._renderButtonBody(tab, index);
if (tab.type === "custom_element") return this._renderCustomElementBody(tab, index);
let body = `
`;
return body;
}
_renderSectionsEditor(tab, index) {
const ALL_SECTIONS = ["artists", "albums", "playlists", "tracks", "radios", "recently_played", "recently_added", "recommended", "flows"];
const current = tab.sections || ["artists", "albums", "playlists", "tracks"];
const ordered = [...current, ...ALL_SECTIONS.filter(s => !current.includes(s))];
const currentLayout = tab.layout || "lanes";
const enabledCount = current.length;
const gridDisabled = enabledCount > 1;
const gridHint = gridDisabled ? this._t("editor.layout_grid_disabled") : "";
return `
${this._t("editor.layout_label")}
${["lanes", "grid", "columns", "auto"].map(l => {
const dis = (l === "grid" && gridDisabled) ? " disabled" : "";
const label = this._t(`settings.layout_${l}`) + (l === "grid" && gridDisabled ? ` (⚠)` : "");
return `${label} `;
}).join("")}
${gridDisabled && currentLayout === "grid" ? `
${this._esc(gridHint)}
` : ""}
${this._t("editor.sections_title")}
${ordered.map((sec, si) => {
const enabled = current.includes(sec);
const posInCurrent = current.indexOf(sec);
return `
${this._t(`lib.${sec}`) || sec}
▲
= current.length - 1 ? "disabled" : ""}>▼
`;
}).join("")}
`;
}
_renderSearchLayoutEditor(tab, index) {
const current = tab.search_layout || "rows";
return `
${this._t("editor.search_layout")}
${["rows", "columns"].map(l =>
`${this._t(`editor.search_layout_${l}`)} `
).join("")}
`;
}
_renderPlaylistEditor(tab, index) {
this._fetchPlaylistOptions();
const options = this._playlistOptions || [];
const loading = this._playlistOptionsLoading && !this._playlistOptions;
return `
${this._t("editor.playlist_select")}
${loading ? this._t("lib.loading_short") : this._t("editor.playlist_select_placeholder")}
${options.map(p => `${this._esc(p.title)} `).join("")}
`;
}
/** Lazily fetch the user's Music Assistant playlists once, then re-render.
* Some providers (e.g. Deezer) only expose their synced playlists through MA's
* "favorite" set — a plain favorite=false catalogue call returns none of them,
* confirmed via direct API testing (favorite=false + provider=deezer → empty).
* Fetch both favorite=false and favorite=true and merge, so coverage doesn't
* depend on how a given provider happens to sync into the MA library. */
async _fetchPlaylistOptions() {
if (!this._hass || this._playlistOptions || this._playlistOptionsLoading) return;
this._playlistOptionsLoading = true;
const PAGE = 100;
const MAX_PAGES = 10;
const items = [];
const seen = new Set();
const addItems = (batch) => {
for (const item of batch) {
const key = item.media_content_id || item.title;
if (key && !seen.has(key)) { seen.add(key); items.push(item); }
}
};
const fetchPages = async (favorite) => {
for (let page = 0; page < MAX_PAGES; page++) {
const offset = page * PAGE;
const resp = await this._hass.fetchWithAuth(
`/my_music_library/library?type=playlists&limit=${PAGE}&offset=${offset}&favorite=${favorite}`);
const data = resp.ok ? await resp.json() : null;
const batch = data?.items || [];
addItems(batch);
if (batch.length < PAGE) break;
}
};
try {
await fetchPages(false);
await fetchPages(true);
} catch (_) {
// keep whatever was accumulated before the failure
}
this._playlistOptions = items;
this._playlistOptionsLoading = false;
this._render();
}
_renderButtonBody(tab, index) {
return `
`;
}
_attachEditorListeners(wrap, tabs) {
// Basic fields
wrap.querySelector("#ed-default-tab")?.addEventListener("change", (e) => {
this._config = { ...this._config, default_tab: e.target.value };
this._fireChanged();
});
wrap.querySelector("#ed-entity")?.addEventListener("change", (e) => {
const val = e.target.value.trim();
this._config = { ...this._config };
if (val) this._config.entity = val; else delete this._config.entity;
this._fireChanged();
});
wrap.querySelector("#ed-height")?.addEventListener("change", (e) => {
const val = e.target.value.trim();
this._config = { ...this._config };
if (val) {
this._config.height = /^\d+$/.test(val) ? parseInt(val) : val;
} else {
delete this._config.height;
}
this._fireChanged();
});
wrap.querySelector("#ed-show-device")?.addEventListener("change", (e) => {
this._config = { ...this._config, show_device_select: e.target.checked };
this._fireChanged();
});
wrap.querySelector("#ed-show-other-players")?.addEventListener("change", (e) => {
this._config = { ...this._config };
if (e.target.checked) this._config.show_other_players = true;
else delete this._config.show_other_players;
this._fireChanged();
this._render();
});
wrap.querySelectorAll(".ed-out-row").forEach(row => {
const eid = row.dataset.eid;
row.querySelectorAll("input").forEach(input => input.addEventListener("change", () => {
this._setDeviceOverride(eid, {
name: row.querySelector(".ed-out-name").value.trim(),
icon: row.querySelector(".ed-out-icon").value.trim(),
hidden: row.querySelector(".ed-out-hide").checked,
});
}));
});
const _setNavBar = (key, val, defaultVal) => {
const navBar = { ...(this._config.nav_bar || {}) };
if (val === defaultVal) delete navBar[key]; else navBar[key] = val;
this._config = { ...this._config };
if (Object.keys(navBar).length) this._config.nav_bar = navBar;
else delete this._config.nav_bar;
this._fireChanged();
};
wrap.querySelector("#ed-nav-pos")?.addEventListener("change", (e) => _setNavBar("position", e.target.value, "top"));
wrap.querySelector("#ed-nav-align")?.addEventListener("change", (e) => _setNavBar("align", e.target.value, "start"));
// Toggle expand
wrap.querySelectorAll("[data-toggle-idx]").forEach(el => {
el.addEventListener("click", (e) => {
if (e.target.closest("[data-move]") || e.target.closest("[data-delete]")) return;
const idx = parseInt(el.dataset.toggleIdx);
this._expandedTab = this._expandedTab === idx ? -1 : idx;
this._render();
});
});
// Move up/down
wrap.querySelectorAll("[data-move]").forEach(btn => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
const idx = parseInt(btn.dataset.idx);
const dir = btn.dataset.move === "up" ? -1 : 1;
const t = [...tabs];
[t[idx], t[idx + dir]] = [t[idx + dir], t[idx]];
this._expandedTab = idx + dir;
this._updateTabs(t);
});
});
// Delete
wrap.querySelectorAll("[data-delete]").forEach(btn => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
const idx = parseInt(btn.dataset.delete);
const t = [...tabs];
t.splice(idx, 1);
this._expandedTab = -1;
this._updateTabs(t);
});
});
// Add tab
wrap.querySelector("#add-tab-btn")?.addEventListener("click", () => {
this._showAddMenu = true;
this._render();
});
wrap.querySelectorAll("[data-add-type]").forEach(btn => {
btn.addEventListener("click", () => {
const type = btn.dataset.addType;
const t = [...tabs];
const newTab = { type };
if (type === "library") newTab.sections = ["artists", "albums", "playlists", "tracks"];
if (type === "button") { newTab.icon = "mdi:gesture-tap"; newTab.tap_action = { action: "none" }; }
if (type === "custom_element") { newTab.element = ""; newTab.element_config = {}; newTab.tap_action = { action: "none" }; }
t.push(newTab);
this._showAddMenu = false;
this._expandedTab = t.length - 1;
this._updateTabs(t);
});
});
// Tab field edits (label, icon, name, entity)
wrap.querySelectorAll("[data-field]").forEach(input => {
input.addEventListener("change", () => {
const idx = parseInt(input.dataset.idx);
const field = input.dataset.field;
const val = input.value.trim();
const t = [...tabs];
t[idx] = { ...t[idx] };
if (val) t[idx][field] = val; else delete t[idx][field];
this._updateTabs(t);
});
});
// show_in_nav toggle (defaults to true, so it's only stored when false)
wrap.querySelectorAll("[data-field-checkbox]").forEach(input => {
input.addEventListener("change", () => {
const idx = parseInt(input.dataset.idx);
const field = input.dataset.fieldCheckbox;
const t = [...tabs];
t[idx] = { ...t[idx] };
if (input.checked) delete t[idx][field]; else t[idx][field] = false;
this._updateTabs(t);
});
});
// Advanced (raw YAML) block: merges/overrides whatever isn't managed by a
// dedicated control above — the escape hatch for tap_action.data/target,
// hold_action, double_tap_action, or any other one-off property.
wrap.querySelectorAll("[data-advanced-config]").forEach(ta => {
ta.addEventListener("change", () => {
const idx = parseInt(ta.dataset.idx);
try {
const extra = _yamlLoad(ta.value.trim() || "{}");
const t = [...tabs];
const handled = MyMusicLibraryCardEditor._HANDLED_KEYS[t[idx].type] || ["type"];
const kept = {};
for (const k of handled) if (k in t[idx]) kept[k] = t[idx][k];
t[idx] = { ...kept, ...extra };
this._updateTabs(t);
} catch (_) { /* invalid YAML — ignore, keep previous value */ }
});
});
// Button action type change
wrap.querySelectorAll("[data-btn-action-type]").forEach(select => {
select.addEventListener("change", () => {
const idx = parseInt(select.dataset.idx);
const action = select.value;
const t = [...tabs];
t[idx] = { ...t[idx], tap_action: { action } };
this._updateTabs(t);
});
});
// Button action field edits (navigation_path, url_path, perform_action)
wrap.querySelectorAll("[data-btn-field]").forEach(input => {
input.addEventListener("change", () => {
const idx = parseInt(input.dataset.idx);
const field = input.dataset.btnField;
const val = input.value.trim();
const t = [...tabs];
t[idx] = { ...t[idx], tap_action: { ...t[idx].tap_action, [field]: val } };
this._updateTabs(t);
});
});
// Layout select (library tab)
wrap.querySelectorAll("[data-layout-select]").forEach(sel => {
sel.addEventListener("change", () => {
const tabIdx = parseInt(sel.dataset.tabIdx);
const t = [...tabs];
t[tabIdx] = { ...t[tabIdx], layout: sel.value };
this._updateTabs(t);
});
});
// Search layout select
wrap.querySelectorAll("[data-search-layout-select]").forEach(sel => {
sel.addEventListener("change", () => {
const tabIdx = parseInt(sel.dataset.tabIdx);
const t = [...tabs];
t[tabIdx] = { ...t[tabIdx], search_layout: sel.value };
this._updateTabs(t);
});
});
// Playlist select
wrap.querySelectorAll("[data-playlist-select]").forEach(sel => {
sel.addEventListener("change", () => {
const tabIdx = parseInt(sel.dataset.tabIdx);
const opt = (this._playlistOptions || []).find(p => p.media_content_id === sel.value);
const t = [...tabs];
t[tabIdx] = { ...t[tabIdx],
playlist_uri: sel.value,
playlist_label: opt?.title || "",
playlist_thumbnail: opt?.thumbnail || "",
};
this._updateTabs(t);
});
});
// Section toggles
wrap.querySelectorAll("[data-sec-toggle]").forEach(el => {
const handler = () => {
const sec = el.dataset.secToggle;
const tabIdx = parseInt(el.dataset.tabIdx);
const t = [...tabs];
t[tabIdx] = { ...t[tabIdx] };
const current = [...(t[tabIdx].sections || ["artists","albums","playlists","tracks"])];
const pos = current.indexOf(sec);
if (pos >= 0) {
current.splice(pos, 1);
} else {
current.push(sec);
}
t[tabIdx].sections = current;
this._updateTabs(t);
};
if (el.tagName === "INPUT") el.addEventListener("change", handler);
else el.addEventListener("click", handler);
});
// Section reorder
wrap.querySelectorAll("[data-sec-move]").forEach(btn => {
btn.addEventListener("click", () => {
const sec = btn.dataset.sec;
const tabIdx = parseInt(btn.dataset.tabIdx);
const dir = btn.dataset.secMove === "up" ? -1 : 1;
const t = [...tabs];
t[tabIdx] = { ...t[tabIdx] };
const current = [...(t[tabIdx].sections || ["artists","albums","playlists","tracks"])];
const pos = current.indexOf(sec);
if (pos < 0) return;
[current[pos], current[pos + dir]] = [current[pos + dir], current[pos]];
t[tabIdx].sections = current;
this._updateTabs(t);
});
});
// Custom element JSON config textarea
wrap.querySelectorAll("[data-ce-config]").forEach(ta => {
ta.addEventListener("change", () => {
const idx = parseInt(ta.dataset.idx);
try {
const cfg = _yamlLoad(ta.value.trim() || "{}");
const t = [...tabs];
t[idx] = { ...t[idx], element_config: cfg };
this._updateTabs(t);
} catch(_) { /* invalid YAML — ignore, keep previous value */ }
});
});
}
_esc(str) {
if (!str) return "";
return String(str).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """);
}
}
if (!customElements.get("my-music-library-card-editor")) {
customElements.define("my-music-library-card-editor", MyMusicLibraryCardEditor);
}
if (!customElements.get("my-music-library-card")) {
customElements.define("my-music-library-card", MyMusicLibraryCard);
}
// Self-announce
window.customCards = window.customCards || [];
window.customCards.push({
type: "my-music-library-card",
name: "My Music Library",
description: "A responsive music player for Home Assistant + Music Assistant",
preview: false,
documentationURL: "https://github.com/your-user/my-music-library",
});
console.info(
`%c MY-MUSIC-LIBRARY-CARD %c v${CARD_VERSION} `,
"background:#1db954;color:#000;font-weight:700;padding:2px 4px;border-radius:3px 0 0 3px",
"background:#333;color:#fff;padding:2px 4px;border-radius:0 3px 3px 0"
);