70 lines
2.9 KiB
JavaScript
70 lines
2.9 KiB
JavaScript
/**
|
|
* Builds the server/CDN selector submenu panel for the settings menu.
|
|
* @param {string[]} streamServers - Regular CDN server URLs
|
|
* @param {string[]} fallbackServers - Fallback server URLs
|
|
* @param {number} selectedIndex - Index in the combined server list
|
|
* @param {function} onSelect - Callback receiving the combined index
|
|
*/
|
|
export function buildServerMenu(streamServers, fallbackServers, selectedIndex, onSelect) {
|
|
const panel = document.createElement('div');
|
|
panel.className = 'hstream-player__menu-panel';
|
|
panel.setAttribute('data-panel', 'server');
|
|
|
|
const backBtn = document.createElement('button');
|
|
backBtn.className = 'hstream-player__menu-back';
|
|
backBtn.type = 'button';
|
|
backBtn.innerHTML = '<i class="fa-solid fa-chevron-left"></i> Server';
|
|
backBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const menuContainer = panel.closest('.hstream-player__menu-container');
|
|
if (menuContainer) {
|
|
menuContainer.querySelectorAll('.hstream-player__menu-panel').forEach(p => p.classList.remove('hstream-player__menu-panel--active'));
|
|
const mainPanel = menuContainer.querySelector('[data-panel="main"]');
|
|
if (mainPanel) mainPanel.classList.add('hstream-player__menu-panel--active');
|
|
}
|
|
});
|
|
panel.appendChild(backBtn);
|
|
|
|
const addServerItems = (servers, labelPrefix, startIndex) => {
|
|
for (let i = 0; i < servers.length; i++) {
|
|
const index = startIndex + i;
|
|
const item = document.createElement('button');
|
|
item.className = 'hstream-player__menu-item';
|
|
item.type = 'button';
|
|
item.setAttribute('role', 'menuitemradio');
|
|
|
|
if (index === selectedIndex) {
|
|
item.classList.add('hstream-player__menu-item--checked');
|
|
item.setAttribute('aria-checked', 'true');
|
|
} else {
|
|
item.setAttribute('aria-checked', 'false');
|
|
}
|
|
|
|
const num = i + 1;
|
|
item.innerHTML = `<span>${labelPrefix} ${num} <span class="hstream-player__menu-value"><span class="hstream-player__menu-badge">${labelPrefix}${num}</span></span></span><span class="hstream-player__menu-item-radio"></span>`;
|
|
|
|
item.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
onSelect(index);
|
|
});
|
|
panel.appendChild(item);
|
|
}
|
|
};
|
|
|
|
const divider = document.createElement('div');
|
|
divider.className = 'hstream-player__menu-divider';
|
|
panel.appendChild(divider);
|
|
|
|
addServerItems(streamServers, 'Server', 0);
|
|
|
|
if (fallbackServers && fallbackServers.length > 0) {
|
|
const fbDivider = document.createElement('div');
|
|
fbDivider.className = 'hstream-player__menu-divider';
|
|
panel.appendChild(fbDivider);
|
|
|
|
addServerItems(fallbackServers, 'Fallback', streamServers.length);
|
|
}
|
|
|
|
return panel;
|
|
}
|