better ui for web player

desktop/src/scripts/anime/player.js

@@ -20,6 +20,7 @@ const AnimePlayer = (function() {
     let subtitleRenderer = null;
     let cursorTimeout = null;
     let settingsPanelActive = false;
+    let _settingsView = 'main';
 
     const els = {
         wrapper: null,
@@ -204,9 +205,16 @@ const AnimePlayer = (function() {
 
         // Settings
         if(els.settingsBtn) {
-            els.settingsBtn.onclick = () => {
+            els.settingsBtn.onclick = (e) => {
+                e.stopPropagation();
                 settingsPanelActive = !settingsPanelActive;
-                els.settingsPanel?.classList.toggle('active', settingsPanelActive);
+                if (settingsPanelActive) {
+                    _settingsView = 'main';
+                    buildSettingsPanel();
+                    els.settingsPanel?.classList.add('active');
+                } else {
+                    els.settingsPanel?.classList.remove('active');
+                }
             };
         }
 
@@ -534,143 +542,233 @@ const AnimePlayer = (function() {
         return `${m}:${s.toString().padStart(2, '0')}`;
     }
 
-    // Settings Panel
+    const Icons = {
+        back: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>`,
+        check: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
+        chevron: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
+        quality: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path><path d="M14.31 8l5.74 9.94"></path><path d="M9.69 8h11.48"></path><path d="M7.38 12l5.74-9.94"></path><path d="M9.69 16L3.95 6.06"></path><path d="M14.31 16H2.83"></path><path d="M16.62 12l-5.74 9.94"></path></svg>`,
+        audio: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>`,
+        subs: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
+        speed: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`
+    };
+
     function buildSettingsPanel() {
         if (!els.settingsPanel) return;
 
-        let html = '';
+        els.settingsPanel.innerHTML = '';
 
-        // 1. Quality settings (for HLS)
+        if (_settingsView === 'main') {
+            buildMainMenu();
+        } else {
+            buildSubMenu(_settingsView);
+        }
+    }
+
+    function buildMainMenu() {
+        let html = `<div class="settings-content">`;
+
+        // 1. Quality
         if (hlsInstance && hlsInstance.levels && hlsInstance.levels.length > 1) {
-            html += '<div class="settings-section">';
-            html += '<div class="settings-label">Calidad</div>';
-
-            html += `<div class="settings-option ${hlsInstance.currentLevel === -1 ? 'active' : ''}" data-action="quality" data-value="-1">
-                <span>Auto</span>
-                <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>
-            </div>`;
-
-            hlsInstance.levels.forEach((level, i) => {
-                const active = hlsInstance.currentLevel === i;
-                html += `<div class="settings-option ${active ? 'active' : ''}" data-action="quality" data-value="${i}">
-                    <span>${level.height}p</span>
-                    <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="20 6 9 17 4 12"></polyline>
-                    </svg>
-                </div>`;
-            });
-            html += '</div>';
+            const currentLevel = hlsInstance.currentLevel;
+            const label = currentLevel === -1 ? 'Auto' : (hlsInstance.levels[currentLevel]?.height + 'p');
+            html += createMenuItem('quality', 'Quality', label, Icons.quality);
         }
 
-        // 2. Audio tracks
+        // 2. Audio
         if (hlsInstance && hlsInstance.audioTracks && hlsInstance.audioTracks.length > 1) {
-            html += '<div class="settings-section">';
-            html += '<div class="settings-label">Audio</div>';
-            hlsInstance.audioTracks.forEach((track, i) => {
-                const active = hlsInstance.audioTrack === i;
-                const label = track.name || track.lang || `Audio ${i + 1}`;
-                html += `<div class="settings-option ${active ? 'active' : ''}" data-action="audio" data-value="${i}">
-                    <span>${label}</span>
-                    <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="20 6 9 17 4 12"></polyline>
-                    </svg>
-                </div>`;
-            });
-            html += '</div>';
+            const currentAudio = hlsInstance.audioTrack;
+            const track = hlsInstance.audioTracks[currentAudio];
+            const label = track ? (track.name || track.lang || `Track ${currentAudio + 1}`) : 'Default';
+            html += createMenuItem('audio', 'Audio', label, Icons.audio);
         }
 
-        // 3. Subtitles (ESTO FALTABA)
+        // 3. Subtitles
         if (_currentSubtitles && _currentSubtitles.length > 0) {
-            html += '<div class="settings-section">';
-            html += '<div class="settings-label">Subtítulos</div>';
-
-            // Opción para desactivar
-            const isOff = els.video.textTracks && Array.from(els.video.textTracks).every(t => t.mode === 'hidden' || t.mode === 'disabled');
-
-            html += `<div class="settings-option ${isOff ? 'active' : ''}" data-action="subtitle" data-value="-1">
-                <span>Off</span>
-                <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>
-            </div>`;
-
-            // Lista de subtítulos
-            _currentSubtitles.forEach((sub, i) => {
-                // Verificamos si este track está activo en el elemento de video
-                let isActive = false;
-                if (els.video.textTracks && els.video.textTracks[i]) {
-                    isActive = els.video.textTracks[i].mode === 'showing';
-                }
-
-                html += `<div class="settings-option ${isActive ? 'active' : ''}" data-action="subtitle" data-value="${i}">
-                    <span>${sub.label || sub.language || 'Desconocido'}</span>
-                    <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="20 6 9 17 4 12"></polyline>
-                    </svg>
-                </div>`;
-            });
-            html += '</div>';
+            let label = 'Off';
+            const activeIndex = getActiveSubtitleIndex();
+            if (activeIndex !== -1 && _currentSubtitles[activeIndex]) {
+                label = _currentSubtitles[activeIndex].label || _currentSubtitles[activeIndex].language;
+            }
+            html += createMenuItem('subtitle', 'Subtitles', label, Icons.subs);
         }
 
-        // 4. Playback speed
-        html += '<div class="settings-section">';
-        html += '<div class="settings-label">Velocidad</div>';
-        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-        speeds.forEach(speed => {
-            const active = els.video && Math.abs(els.video.playbackRate - speed) < 0.01;
-            html += `<div class="settings-option ${active ? 'active' : ''}" data-action="speed" data-value="${speed}">
-                <span>${speed}x</span>
-                <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>
-            </div>`;
+        // 4. Playback Speed
+        if (els.video) {
+            const label = els.video.playbackRate === 1 ? 'Normal' : `${els.video.playbackRate}x`;
+            html += createMenuItem('speed', 'Playback Speed', label, Icons.speed);
+        }
+
+        html += `</div>`;
+        els.settingsPanel.innerHTML = html;
+
+        // Listeners del menú principal
+        els.settingsPanel.querySelectorAll('.settings-item').forEach(item => {
+            item.addEventListener('click', (e) => {
+                e.stopPropagation();
+                _settingsView = item.dataset.target;
+                buildSettingsPanel();
+            });
         });
-        html += '</div>';
+    }
+
+    function createMenuItem(target, title, value, icon) {
+        return `
+            <div class="settings-item settings-item-main" data-target="${target}">
+                <div class="settings-label-left">
+                    <span class="settings-label-icon">${icon}</span>
+                    <span>${title}</span>
+                </div>
+                <div class="settings-value-right">
+                    <span>${value}</span>
+                    ${Icons.chevron}
+                </div>
+            </div>
+        `;
+    }
+
+    function buildSubMenu(type) {
+        let title = '';
+        let content = '';
+
+        if (type === 'quality') {
+            title = 'Quality';
+            content = renderQualityOptions();
+        } else if (type === 'audio') {
+            title = 'Audio Track';
+            content = renderAudioOptions();
+        } else if (type === 'subtitle') {
+            title = 'Subtitles';
+            content = renderSubtitleOptions();
+        } else if (type === 'speed') {
+            title = 'Playback Speed';
+            content = renderSpeedOptions();
+        }
+
+        const html = `
+            <div class="settings-header">
+                <button class="settings-back-btn">${Icons.back}</button>
+                <span class="settings-title">${title}</span>
+            </div>
+            <div class="settings-content">
+                ${content}
+            </div>
+        `;
 
         els.settingsPanel.innerHTML = html;
 
-        // Add click handlers
-        els.settingsPanel.querySelectorAll('.settings-option').forEach(opt => {
-            opt.addEventListener('click', () => {
-                const action = opt.dataset.action;
-                const value = opt.dataset.value;
+        // Listener para volver atrás
+        els.settingsPanel.querySelector('.settings-back-btn').addEventListener('click', (e) => {
+            e.stopPropagation();
+            _settingsView = 'main';
+            buildSettingsPanel();
+        });
 
-                if (action === 'quality') {
-                    if (hlsInstance) {
-                        hlsInstance.currentLevel = parseInt(value);
-                        buildSettingsPanel();
-                    }
-                } else if (action === 'audio') {
-                    if (hlsInstance) {
-                        hlsInstance.audioTrack = parseInt(value);
-                        buildSettingsPanel();
-                    }
-                } else if (action === 'subtitle') {
-                    // Lógica para cambiar subtítulos
-                    const idx = parseInt(value);
-                    if (els.video && els.video.textTracks) {
-                        Array.from(els.video.textTracks).forEach((track, i) => {
-                            // Activamos si el índice coincide, desactivamos si es -1 u otro
-                            track.mode = (i === idx) ? 'showing' : 'hidden';
-                        });
-                    }
-
-                    // Si usas SubtitlesOctopus (Canvas) para ASS, aquí podrías necesitar lógica extra,
-                    // pero para la mayoría de los casos web (VTT), cambiar el modo del track es suficiente.
-                    buildSettingsPanel();
-
-                } else if (action === 'speed') {
-                    if (els.video) {
-                        els.video.playbackRate = parseFloat(value);
-                        buildSettingsPanel();
-                    }
-                }
+        // Listeners para opciones CORREGIDO
+        els.settingsPanel.querySelectorAll('.settings-item-option').forEach(opt => {
+            opt.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const val = opt.dataset.value;
+                applySetting(type, val);
             });
         });
     }
 
+    // Funciones de renderizado de opciones
+    function renderQualityOptions() {
+        if (!hlsInstance) return '';
+        let html = '';
+
+        // Auto option
+        const isAuto = hlsInstance.currentLevel === -1;
+        html += `<div class="settings-item settings-item-option ${isAuto ? 'selected' : ''}" data-value="-1">
+            <span>Auto</span>${isAuto ? Icons.check : ''}
+        </div>`;
+
+        // Levels desc
+        hlsInstance.levels.forEach((level, i) => {
+            const isSelected = hlsInstance.currentLevel === i;
+            html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${i}">
+                <span>${level.height}p</span>${isSelected ? Icons.check : ''}
+            </div>`;
+        });
+        return html;
+    }
+
+    function renderAudioOptions() {
+        if (!hlsInstance) return '';
+        let html = '';
+        hlsInstance.audioTracks.forEach((track, i) => {
+            const isSelected = hlsInstance.audioTrack === i;
+            const label = track.name || track.lang || `Audio ${i + 1}`;
+            html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${i}">
+                <span>${label}</span>${isSelected ? Icons.check : ''}
+            </div>`;
+        });
+        return html;
+    }
+
+    function renderSubtitleOptions() {
+        let html = '';
+        const activeIdx = getActiveSubtitleIndex();
+
+        // Off
+        html += `<div class="settings-item settings-item-option ${activeIdx === -1 ? 'selected' : ''}" data-value="-1">
+            <span>Off</span>${activeIdx === -1 ? Icons.check : ''}
+        </div>`;
+
+        _currentSubtitles.forEach((sub, i) => {
+            const isSelected = activeIdx === i;
+            html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${i}">
+                <span>${sub.label || sub.language}</span>${isSelected ? Icons.check : ''}
+            </div>`;
+        });
+        return html;
+    }
+
+    function renderSpeedOptions() {
+        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+        let html = '';
+        const currentRate = els.video ? els.video.playbackRate : 1;
+
+        speeds.forEach(speed => {
+            const isSelected = Math.abs(currentRate - speed) < 0.1;
+            html += `<div class="settings-item settings-item-option ${isSelected ? 'selected' : ''}" data-value="${speed}">
+                <span>${speed === 1 ? 'Normal' : speed + 'x'}</span>${isSelected ? Icons.check : ''}
+            </div>`;
+        });
+        return html;
+    }
+
+    // Aplicar configuración
+    function applySetting(type, value) {
+        if (type === 'quality') {
+            if (hlsInstance) hlsInstance.currentLevel = parseInt(value);
+        } else if (type === 'audio') {
+            if (hlsInstance) hlsInstance.audioTrack = parseInt(value);
+        } else if (type === 'subtitle') {
+            const idx = parseInt(value);
+            if (els.video && els.video.textTracks) {
+                Array.from(els.video.textTracks).forEach((track, i) => {
+                    track.mode = (i === idx) ? 'showing' : 'hidden';
+                });
+            }
+        } else if (type === 'speed') {
+            if (els.video) els.video.playbackRate = parseFloat(value);
+        }
+
+        // Volvemos al menú principal para confirmar visualmente (opcional, estilo YouTube)
+        _settingsView = 'main';
+        buildSettingsPanel();
+    }
+
+    function getActiveSubtitleIndex() {
+        if (!els.video || !els.video.textTracks) return -1;
+        for (let i = 0; i < els.video.textTracks.length; i++) {
+            if (els.video.textTracks[i].mode === 'showing') return i;
+        }
+        return -1;
+    }
+
     // Subtitle renderer with libass
     async function initSubtitleRenderer() {
         if (!window.SubtitlesOctopus || !els.video || !els.subtitlesCanvas) return;
@@ -1246,20 +1344,35 @@ const AnimePlayer = (function() {
     function renderSkipMarkers(intervals) {
         if (!els.progressContainer || !els.video.duration) return;
 
-        // Remove existing markers
-        els.progressContainer.querySelectorAll('.skip-marker').forEach(e => e.remove());
+        els.progressContainer.querySelectorAll('.skip-range, .skip-cut').forEach(e => e.remove());
+
+        const duration = els.video.duration;
 
         intervals.forEach(skip => {
-            const el = document.createElement('div');
-            el.className = `skip-marker ${skip.type}`;
-            const startPct = (skip.startTime / els.video.duration) * 100;
-            const endPct = (skip.endTime / els.video.duration) * 100;
-            el.style.left = `${startPct}%`;
-            el.style.width = `${endPct - startPct}%`;
-            els.progressContainer.appendChild(el);
+            const startPct = (skip.startTime / duration) * 100;
+            const endPct = (skip.endTime / duration) * 100;
+
+            const range = document.createElement('div');
+            range.className = `skip-range ${skip.type}`; // 'op' o 'ed'
+            range.style.left = `${startPct}%`;
+            range.style.width = `${endPct - startPct}%`;
+            els.progressContainer.appendChild(range);
+
+            createCut(startPct);
+
+            createCut(endPct);
         });
     }
 
+    function createCut(percent) {
+        if (percent < 0.5 || percent > 99.5) return;
+
+        const cut = document.createElement('div');
+        cut.className = 'skip-cut';
+        cut.style.left = `${percent}%`;
+        els.progressContainer.appendChild(cut);
+    }
+
     function monitorSkipButton(intervals) {
         if (!_skipBtn || !els.video) return;