Custom video player

2026-07-26 22:26:37 +02:00
parent 7553b9f895
commit 2e3918def4
13 changed files with 3547 additions and 905 deletions
@@ -0,0 +1,69 @@
+/**
+ * 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;
+}