tinysub / src / js / library.js

// library tree rendering and navigation

// global map to store library items by ID for keyboard access
const libraryItemsById = new Map();

// library keyboard navigation manager
const LibraryNavigator = {
	currentFocusedItem: null,
	currentSection: "artists", // "artists" or "playlists"

	// get all focusable items in library (organized by section for natural navigation)
	getFocusableItems() {
		const items = [];
		const sections = [
			{
				selector: '[data-section="artists"]',
				containerId: DOM_IDS.LIBRARY_TREE,
			},
			{
				selector: '[data-section="playlists"]',
				containerId: DOM_IDS.PLAYLISTS_TREE,
			},
		];

		sections.forEach(({ selector, containerId }) => {
			const toggle = document.querySelector(selector);
			if (toggle) {
				items.push(toggle);
				const sectionItems = Array.from(
					document.querySelectorAll(
						`#${containerId} .${CLASSES.TREE_TOGGLE}, #${containerId} .${CLASSES.TREE_NAME}`,
					),
				);
				items.push(...sectionItems);
			}
		});

		return items;
	},

	// set focus to specific item
	focusItem(element) {
		if (this.currentFocusedItem) {
			this.currentFocusedItem.classList.remove("library-focused");
		}
		if (element) {
			element.classList.add("library-focused");
			element.scrollIntoView({ block: "nearest" });
			this.currentFocusedItem = element;
		}
	},

	// focus first item (first section header)
	navigateFirst() {
		const items = this.getFocusableItems();
		if (items.length > 0) this.focusItem(items[0]);
	},

	navigateLast() {
		const items = this.getFocusableItems();
		if (items.length > 0) this.focusItem(items[items.length - 1]);
	},

	// navigate with direction and optional offset (for page navigation)
	_navigateTo(calcNewIndex) {
		const items = this.getFocusableItems();
		if (items.length === 0) return;

		if (!this.currentFocusedItem) {
			this.focusItem(items[0]);
			return;
		}

		const currentIndex = items.indexOf(this.currentFocusedItem);
		const newIndex = calcNewIndex(currentIndex, items.length);
		if (newIndex >= 0 && newIndex < items.length) {
			this.focusItem(items[newIndex]);
		}
	},

	// navigate up/down through items
	navigate(direction) {
		this._navigateTo((idx) => idx + direction);
	},

	// navigate by page (jump multiple items)
	navigatePageUp(pageSize = 10) {
		this._navigateTo((idx) => Math.max(0, idx - pageSize));
	},

	navigatePageDown(pageSize = 10) {
		this._navigateTo((idx, len) => Math.min(len - 1, idx + pageSize));
	},

	// toggle expand/collapse on current item (if it's a tree toggle)
	toggleCurrent() {
		if (!this.currentFocusedItem) return;
		const isToggle = this.currentFocusedItem.classList.contains(
			CLASSES.TREE_TOGGLE,
		);
		if (isToggle) {
			this.currentFocusedItem.click();
		} else if (this.currentFocusedItem.classList.contains("section-toggle")) {
			// also allow toggling section headers
			this.currentFocusedItem.click();
		}
	},

	// get data (item id and type) from currently focused item
	getCurrentItemData() {
		if (!this.currentFocusedItem) return null;
		const li = this.currentFocusedItem.closest("li");
		if (!li) return null;
		return {
			itemId: li.dataset.itemId,
			section: this.determineSection(),
		};
	},

	// determine which section (artists or playlists) the current item is in
	determineSection() {
		if (!this.currentFocusedItem) return "artists";
		const inArtists =
			this.currentFocusedItem.closest(`#${DOM_IDS.LIBRARY_TREE}`) !== null;
		return inArtists ? "artists" : "playlists";
	},
};

// determine item type based on nesting level in tree
function getLibraryItemType(li, section) {
	let level = 0;
	let parent = li.parentElement;
	const container = section === "artists" ? ui.artistsTree : ui.playlistsTree;
	while (parent && parent !== container) {
		if (
			parent.classList.contains(CLASSES.NESTED) ||
			parent.classList.contains(CLASSES.NESTED_SONGS)
		) {
			level++;
		}
		parent = parent.parentElement;
	}

	// map level to type: for artists tree use level, for playlists distinguish between playlist container and songs
	if (section === "playlists") {
		return level >= 1 ? "song" : "playlist";
	} else if (level === 1) {
		return "album";
	} else if (level >= 2) {
		return "song";
	}
	return "artist";
}

// look up a song in the library cache by ID
function lookupSongInLibrary(songId) {
	return libraryItemsById.get(songId);
}

// add library item to queue (end or next after current track)
function addLibraryItem(addNext = false) {
	const data = LibraryNavigator.getCurrentItemData();
	if (!data || !data.itemId) return;

	const link = LibraryNavigator.currentFocusedItem;
	const li = link?.closest("li");
	if (!li) return;

	const type = getLibraryItemType(li, data.section);

	// for songs, look up the full object from library cache or create minimal one
	let itemData = data.itemId;
	if (type === "song") {
		const song = lookupSongInLibrary(data.itemId);
		if (song) {
			itemData = song;
		} else {
			itemData = { id: data.itemId };
		}
	}

	// get handler and execute
	const handler = addNext ? addNextByType[type] : addByType[type];

	if (handler) {
		handler(itemData);
	}
}

const addByType = {
	artist: (id) => addArtistToQueue(id),
	album: (id) => addAlbumToQueue(id),
	playlist: (id) => addPlaylistToQueue(id),
	song: (song) => addSongToQueue(song),
};

const addNextByType = {
	artist: (id) =>
		addToQueue(() => state.api.getArtist(id), SONG_EXTRACTORS.artist, true),
	album: (id) =>
		addToQueue(() => state.api.getAlbum(id), SONG_EXTRACTORS.album, true),
	playlist: (id) =>
		addToQueue(() => state.api.getPlaylist(id), SONG_EXTRACTORS.playlist, true),
	song: (song) =>
		addToQueue(() => Promise.resolve(song), SONG_EXTRACTORS.song, true),
};

// create tree item with cover art and action buttons
function createTreeItem(
	name,
	coverArtId,
	onToggle,
	onAdd,
	onAddNext,
	artType,
	itemId,
) {
	const li = createElement("li");
	const div = createElement("div", { className: CLASSES.TREE_ITEM });

	if (itemId) li.dataset.itemId = itemId;

	const linkChildren = [];
	if (coverArtId) {
		const imgEl = createElement("img", {
			attributes: {
				alt: "cover",
				loading: "lazy",
			},
		});
		loadCachedImage(imgEl, coverArtId, artType);
		const wrapper = createElement("div", {
			className: "tree-cover",
			children: [imgEl],
		});
		linkChildren.push(wrapper);
	}
	linkChildren.push(createElement("span", { textContent: name }));

	const linkEl = createElement("a", {
		className: onToggle ? CLASSES.TREE_TOGGLE : CLASSES.TREE_NAME,
		listeners: {
			click: (e) => {
				e.preventDefault();
				onToggle?.(li);
			},
		},
		children: linkChildren,
	});

	div.appendChild(linkEl);
	if (onAdd)
		div.appendChild(
			createIconButton("tree-action", "add", ICONS.ADD, "add", onAdd),
		);
	if (onAddNext)
		div.appendChild(
			createIconButton(
				"tree-action",
				"add next",
				ICONS.PLAY_NEXT,
				"add next",
				onAddNext,
			),
		);

	li.appendChild(div);
	return li;
}

// toggle library section expand/collapse
function handleSectionToggle(e) {
	e.preventDefault();
	const section = e.target.dataset.section;
	state.expanded[section] = !state.expanded[section];
	if (
		state.expanded[section] &&
		typeof state.expanded.items[section] === "undefined"
	) {
		state.expanded.items[section] = {};
	}
	const renderers = {
		artists: renderLibraryTree,
		playlists: renderPlaylistsTree,
	};
	renderers[section]?.();
}

async function loadData(config) {
	const { fetcher, transformer, stateKey, renderFn } = config;
	const data = await fetcher();
	state[stateKey] = transformer(data);
	renderFn();
}

async function loadLibrary() {
	return loadData({
		fetcher: () => state.api.getArtists(),
		transformer: (data) =>
			data.artists?.index?.flatMap((idx) => toArray(idx.artist)) || [],
		stateKey: "library",
		renderFn: renderLibraryTree,
	});
}

async function loadPlaylists() {
	return loadData({
		fetcher: () => state.api.getPlaylists(),
		transformer: (data) => toArray(data.playlist || data.playlists?.playlist),
		stateKey: "playlists",
		renderFn: renderPlaylistsTree,
	});
}

async function loadFavorites() {
	const data = await state.api.getStarred2();
	const songs = toArray(data.starred2?.song || data.song);
	state.favorites.clear();
	songs.forEach((song) => state.favorites.add(song.id));
	updateQueueDisplay();
}

function buildTreeItem(item, mapped, onToggle, onAction, onAddNext, artType) {
	libraryItemsById.set(item.id, item);

	return createTreeItem(
		mapped.label,
		mapped.cover || null,
		onToggle ? (li) => onToggle(item, li) : null,
		() => onAction(item),
		onAddNext ? () => onAddNext(item) : null,
		artType,
		item.id,
	);
}

async function loadAndRenderItems(config) {
	const {
		fetcher,
		itemExtractor,
		parentLi,
		ulClassName,
		itemMapper,
		onToggle,
		onAction,
		onAddNext,
		onExpanded,
		artType,
	} = config;
	try {
		const data = await fetcher();
		const items = itemExtractor(data);
		if (!items.length) return;

		const ul = createElement("ul", { className: ulClassName });
		items.forEach((item) => {
			const mapped = itemMapper(item);
			const li = buildTreeItem(
				item,
				mapped,
				onToggle,
				onAction,
				onAddNext,
				artType,
			);
			ul.appendChild(li);
			if (onExpanded && mapped.isExpanded) onExpanded(item, li);
		});
		parentLi.appendChild(ul);
	} catch (error) {
		console.error("[Library] Failed to load items:", error);
	}
}

async function loadAndRenderAlbums(artistId, parentLi) {
	return loadAndRenderItems({
		fetcher: () => state.api.getArtist(artistId),
		itemExtractor: (data) => toArray(data.artist?.album),
		parentLi,
		ulClassName: CLASSES.NESTED,
		artType: "artAlbum",
		itemMapper: (album) => ({
			label: album.name,
			cover: shouldShowArt("artAlbum", album.coverArt),
			isExpanded: state.expanded.items.albums[album.id],
		}),
		onToggle: (album, li) => {
			state.expanded.items.albums[album.id] =
				!state.expanded.items.albums[album.id];
			// clear any existing songs before toggling
			li.querySelector(`ul.${CLASSES.NESTED_SONGS}`)?.remove();
			if (state.expanded.items.albums[album.id]) {
				loadAndRenderSongs(album.id, li);
			}
		},
		onExpanded: (album, li) => loadAndRenderSongs(album.id, li),
		onAction: (album) => addAlbumToQueue(album.id),
		onAddNext: (album) => addNextByType.album(album.id),
	});
}

async function loadAndRenderSongs(albumId, parentLi) {
	return loadAndRenderItems({
		fetcher: () => state.api.getAlbum(albumId),
		itemExtractor: (data) => toArray(data.album?.song),
		parentLi,
		ulClassName: CLASSES.NESTED_SONGS,
		artType: "artSong",
		itemMapper: (song) => ({
			label: song.title,
		}),
		onAction: (song) => addSongToQueue(song),
		onAddNext: (song) => addNextByType.song(song),
	});
}

// tree configuration for sidebar sections
const TREE_CONFIGS = {
	artists: {
		container: () => ui.artistsTree,
		data: () => state.library,
		expandedKey: "artists",
		expandedMap: () => state.expanded.items.artists,
		message: STRINGS.NO_ARTISTS,
		artType: "artArtist",
		itemMapper: (artist) => ({
			label: artist.title || artist.name,
			cover: shouldShowArt("artArtist", artist.coverArt),
		}),
		onToggle: (artist, li) => {
			const map = state.expanded.items.artists;
			map[artist.id] = !map[artist.id];
			li.querySelector(`ul.${CLASSES.NESTED}`)?.remove();
			if (map[artist.id]) loadAndRenderAlbums(artist.id, li);
		},
		onAction: (artist) => addArtistToQueue(artist.id),
		onAddNext: (artist) => addNextByType.artist(artist.id),
		onRestore: (item) => loadAndRenderAlbums(item.id),
	},
	playlists: {
		container: () => ui.playlistsTree,
		data: () => state.playlists,
		expandedKey: "playlists",
		expandedMap: () => state.expanded.items.playlists,
		message: STRINGS.NO_PLAYLISTS,
		artType: "artArtist",
		itemMapper: (playlist) => ({
			label: playlist.name,
			cover: null,
		}),
		onToggle: null,
		onAction: (playlist) => addPlaylistToQueue(playlist.id),
		onAddNext: (playlist) => addNextByType.playlist(playlist.id),
	},
};

// render a sidebar tree section using config
function renderSidebarTree(sectionKey) {
	const config = TREE_CONFIGS[sectionKey];
	const container = config.container();
	const items = config.data();

	container.innerHTML = "";
	if (!state.expanded[config.expandedKey]) return;
	if (!items.length) {
		container.innerHTML = `<div class="item">${config.message}</div>`;
		return;
	}

	const ul = createElement("ul");
	items.forEach((item) => {
		const mapped = config.itemMapper(item);
		const li = buildTreeItem(
			item,
			mapped,
			config.onToggle,
			config.onAction,
			config.onAddNext,
			config.artType,
		);
		ul.appendChild(li);
	});
	container.appendChild(ul);

	// restore expanded items for artists only
	if (config.onRestore && items.length) {
		const expandMap = config.expandedMap();
		items.forEach((item) => {
			if (expandMap[item.id]) {
				const li = container.querySelector(`li[data-item-id="${item.id}"]`);
				if (li && !li.querySelector(`ul.${CLASSES.NESTED}`)) {
					loadAndRenderAlbums(item.id, li);
				}
			}
		});
	}
}

// export for SECTION_RENDERERS
const renderLibraryTree = () => renderSidebarTree("artists");
const renderPlaylistsTree = () => renderSidebarTree("playlists");