eq update
This commit is contained in:
parent
b64562d37d
commit
6f6e5c99e9
112
audio_enhancer.js
Normal file
112
audio_enhancer.js
Normal file
@ -0,0 +1,112 @@
|
||||
class AudioEnhancer {
|
||||
constructor(videoElement) {
|
||||
if (!window.AudioContext) {
|
||||
this.isSupported = false;
|
||||
return;
|
||||
}
|
||||
this.isSupported = true;
|
||||
this.isEnabled = false;
|
||||
this.videoElement = videoElement;
|
||||
this.audioContext = new AudioContext();
|
||||
this.sourceNode = this.audioContext.createMediaElementSource(this.videoElement);
|
||||
|
||||
this.preamp = this.audioContext.createGain();
|
||||
this.compressor = this.audioContext.createDynamicsCompressor();
|
||||
this.bandFrequencies = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000];
|
||||
this.filters = this.bandFrequencies.map(freq => {
|
||||
const filter = this.audioContext.createBiquadFilter();
|
||||
filter.type = 'peaking';
|
||||
filter.frequency.value = freq;
|
||||
filter.Q.value = 1.41;
|
||||
filter.gain.value = 0;
|
||||
return filter;
|
||||
});
|
||||
|
||||
this.connectNodes();
|
||||
}
|
||||
|
||||
connectNodes() {
|
||||
this.sourceNode.disconnect();
|
||||
if (this.isEnabled) {
|
||||
let lastNode = this.preamp;
|
||||
this.sourceNode.connect(this.preamp);
|
||||
this.filters.forEach(filter => {
|
||||
lastNode.connect(filter);
|
||||
lastNode = filter;
|
||||
});
|
||||
lastNode.connect(this.compressor);
|
||||
this.compressor.connect(this.audioContext.destination);
|
||||
} else {
|
||||
this.sourceNode.connect(this.audioContext.destination);
|
||||
}
|
||||
}
|
||||
|
||||
toggle(state) {
|
||||
this.isEnabled = state;
|
||||
this.connectNodes();
|
||||
}
|
||||
|
||||
setCompressor(settings) {
|
||||
if (!this.isSupported || !settings) return;
|
||||
this.compressor.threshold.value = settings.threshold || -24;
|
||||
this.compressor.knee.value = settings.knee || 30;
|
||||
this.compressor.ratio.value = settings.ratio || 12;
|
||||
this.compressor.attack.value = settings.attack || 0.003;
|
||||
this.compressor.release.value = settings.release || 0.25;
|
||||
}
|
||||
|
||||
changeGain(bandIndex, gainValue) {
|
||||
if (!this.isSupported || bandIndex < 0 || bandIndex >= this.filters.length) return;
|
||||
this.filters[bandIndex].gain.value = gainValue;
|
||||
}
|
||||
|
||||
changePreamp(gainValue) {
|
||||
if (!this.isSupported) return;
|
||||
const linearValue = Math.pow(10, gainValue / 20);
|
||||
this.preamp.gain.value = linearValue;
|
||||
}
|
||||
|
||||
applySettings(settings) {
|
||||
if (!this.isSupported || !settings) return;
|
||||
|
||||
this.toggle(settings.enabled);
|
||||
|
||||
if (typeof settings.preamp === 'number') {
|
||||
this.changePreamp(settings.preamp);
|
||||
}
|
||||
|
||||
if (Array.isArray(settings.bands)) {
|
||||
settings.bands.forEach((gain, index) => {
|
||||
this.changeGain(index, gain);
|
||||
});
|
||||
}
|
||||
|
||||
if (settings.compressor) {
|
||||
this.setCompressor(settings.compressor);
|
||||
} else {
|
||||
this.setCompressor({});
|
||||
}
|
||||
}
|
||||
|
||||
getSettings() {
|
||||
if (!this.isSupported) return { enabled: false, preamp: 0, bands: new Array(10).fill(0), customPresets: [] };
|
||||
const preampDB = 20 * Math.log10(this.preamp.gain.value);
|
||||
const bandGains = this.filters.map(filter => filter.gain.value);
|
||||
return { enabled: this.isEnabled, preamp: preampDB, bands: bandGains };
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (!this.isSupported) return;
|
||||
try {
|
||||
this.sourceNode.disconnect();
|
||||
this.preamp.disconnect();
|
||||
this.compressor.disconnect();
|
||||
this.filters.forEach(filter => filter.disconnect());
|
||||
if (this.audioContext.state !== 'closed') {
|
||||
this.audioContext.close();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error al destruir AudioEnhancer:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
220
css/eq_panel.css
Normal file
220
css/eq_panel.css
Normal file
@ -0,0 +1,220 @@
|
||||
.eq-panel {
|
||||
position: absolute;
|
||||
bottom: calc(var(--shaka-controls-height, 60px) + 15px);
|
||||
right: 15px;
|
||||
width: 450px;
|
||||
max-width: 90vw;
|
||||
background-color: rgba(var(--rgb-bg-tertiary), 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 5px 20px var(--shadow-color);
|
||||
z-index: 20;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.eq-panel.open {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.eq-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.eq-header strong {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.eq-band-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.eq-band {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.eq-slider-wrapper {
|
||||
width: 25px;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--bg-element);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
input[type="range"].eq-slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
width: 110px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
input[type="range"].eq-slider::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="range"].eq-slider::-moz-range-track {
|
||||
height: 6px;
|
||||
background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="range"].eq-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-top: -7px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 2px solid var(--bg-primary);
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
input[type="range"].eq-slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 2px solid var(--bg-primary);
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
input[type="range"].eq-slider:active::-webkit-slider-thumb {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
input[type="range"].eq-slider:active::-moz-range-thumb {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.eq-band label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-band .eq-value {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-element);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
min-width: 35px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.preamp-band label,
|
||||
.preamp-band .eq-value {
|
||||
font-weight: 600;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.eq-controls-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.eq-static-presets, .eq-custom-presets {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eq-custom-presets {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.eq-custom-presets .form-select {
|
||||
flex-grow: 1;
|
||||
font-size: 0.8rem;
|
||||
height: calc(1.5em + 0.5rem + 2px);
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-custom-presets .btn-control {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.eq-panel .switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
}
|
||||
.eq-panel .switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.eq-slider-toggle {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 22px;
|
||||
}
|
||||
.eq-slider-toggle:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.eq-panel input:checked + .eq-slider-toggle {
|
||||
background-color: var(--accent-primary);
|
||||
}
|
||||
.eq-panel input:focus + .eq-slider-toggle {
|
||||
box-shadow: 0 0 1px var(--accent-primary);
|
||||
}
|
||||
.eq-panel input:checked + .eq-slider-toggle:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
@ -50,6 +50,7 @@
|
||||
"settings_manager.js",
|
||||
"db_manager.js",
|
||||
"m3u_utils.js",
|
||||
"audio_enhancer.js",
|
||||
"shaka_handler.js",
|
||||
"xtream_handler.js",
|
||||
"xcodec_handler.js",
|
||||
@ -78,7 +79,8 @@
|
||||
"css/generic_modals.css",
|
||||
"css/components.css",
|
||||
"css/responsive.css",
|
||||
"css/editor.css"
|
||||
"css/editor.css",
|
||||
"css/eq_panel.css"
|
||||
],
|
||||
"matches": [
|
||||
"chrome-extension://*/*"
|
||||
|
||||
35
player.html
35
player.html
@ -24,9 +24,9 @@
|
||||
<link rel="stylesheet" href="css/components.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
<link rel="stylesheet" href="css/editor.css">
|
||||
<link rel="stylesheet" href="css/eq_panel.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body id="appBody">
|
||||
<div id="particles-js"></div>
|
||||
<div id="app-container">
|
||||
@ -163,6 +163,35 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="eqPanelTemplate">
|
||||
<div class="eq-panel">
|
||||
<div class="eq-header">
|
||||
<strong data-lang-key="eqTitle">Ecualizador de Audio</strong>
|
||||
<label class="switch">
|
||||
<input type="checkbox" class="eq-on-off">
|
||||
<span class="eq-slider-toggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="eq-band-container">
|
||||
</div>
|
||||
<div class="eq-controls-container">
|
||||
<div class="eq-static-presets">
|
||||
<button class="btn-control btn-sm eq-reset-btn" data-lang-key="eqFlatPreset">Plano</button>
|
||||
<button class="btn-control btn-sm" data-preset="dialogue" data-lang-key="eqDialoguePreset">Diálogo</button>
|
||||
<button class="btn-control btn-sm" data-preset="movie" data-lang-key="eqMoviePreset">Cine</button>
|
||||
<button class="btn-control btn-sm" data-preset="night" data-lang-key="eqNightPreset">Noche</button>
|
||||
</div>
|
||||
<div class="eq-custom-presets">
|
||||
<select class="form-select eq-custom-preset-select">
|
||||
<option value="" data-lang-key="eqCustomPresetPlaceholder">-- Presets Guardados --</option>
|
||||
</select>
|
||||
<button class="btn-control btn-sm eq-save-preset-btn" title="Guardar preset actual"><i class="fas fa-save"></i></button>
|
||||
<button class="btn-control btn-sm btn-danger eq-delete-preset-btn" title="Eliminar preset seleccionado"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="modal fade" id="editorModal" tabindex="-1" aria-labelledby="editorModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
@ -258,7 +287,7 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-secondary"><span data-lang-key="multiEditDescription" data-lang-vars="count:<strong id='multiEditChannelCount'>0</strong>">Aplica cambios a todos los ... canales seleccionados...</span></p>
|
||||
<p class="text-secondary"><span data-lang-key="multiEditDescription" data-lang-vars='{"count": "#multiEditChannelCount"}'>Aplica cambios a todos los ... canales seleccionados...</span></p>
|
||||
|
||||
<div class="multi-edit-field">
|
||||
<div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="multiEditEnableGroup"><label for="multiEditEnableGroup" data-lang-key="changeGroupLabel">Cambiar Grupo</label></div>
|
||||
@ -1234,6 +1263,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="libs/jquery-3.7.0.min.js"></script>
|
||||
<script src="libs/Sortable.min.js"></script>
|
||||
<script src="libs/bootstrap.bundle.min.js"></script>
|
||||
@ -1249,6 +1279,7 @@
|
||||
<script src="player_interaction.js" defer></script>
|
||||
<script src="user_session.js" defer></script>
|
||||
<script src="movistar_vod_ui.js" defer></script>
|
||||
<script src="audio_enhancer.js" defer></script>
|
||||
<script src="shaka_handler.js" defer></script>
|
||||
<script src="epg.js" defer></script>
|
||||
<script src="orange_tv_client.js" defer></script>
|
||||
|
||||
@ -36,6 +36,219 @@ class ChannelListButtonFactory {
|
||||
}
|
||||
}
|
||||
|
||||
class EQButton extends shaka.ui.Element {
|
||||
constructor(parent, controls, windowId) {
|
||||
super(parent, controls);
|
||||
this.windowId = windowId;
|
||||
|
||||
this.button_ = document.createElement('button');
|
||||
this.button_.classList.add('shaka-eq-button');
|
||||
this.button_.classList.add('shaka-tooltip');
|
||||
this.button_.setAttribute('aria-label', 'Ecualizador');
|
||||
this.button_.setAttribute('data-tooltip-text', 'Ecualizador');
|
||||
|
||||
const icon = document.createElement('i');
|
||||
icon.classList.add('material-icons-round');
|
||||
icon.textContent = 'equalizer';
|
||||
|
||||
this.button_.appendChild(icon);
|
||||
this.parent.appendChild(this.button_);
|
||||
|
||||
this.eventManager.listen(this.button_, 'click', () => {
|
||||
toggleEQPanel(this.windowId);
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.eventManager.release();
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
class EQButtonFactory {
|
||||
constructor(windowId) {
|
||||
this.windowId = windowId;
|
||||
}
|
||||
create(rootElement, controls) {
|
||||
return new EQButton(rootElement, controls, this.windowId);
|
||||
}
|
||||
}
|
||||
|
||||
function setupEQPanel(windowId) {
|
||||
const instance = playerInstances[windowId];
|
||||
if (!instance || !instance.eqPanel || !instance.audioEnhancer) return;
|
||||
|
||||
const enhancer = instance.audioEnhancer;
|
||||
const panel = instance.eqPanel;
|
||||
|
||||
const onOffSwitch = panel.querySelector('.eq-on-off');
|
||||
const resetBtn = panel.querySelector('.eq-reset-btn');
|
||||
const savePresetBtn = panel.querySelector('.eq-save-preset-btn');
|
||||
const customPresetSelect = panel.querySelector('.eq-custom-preset-select');
|
||||
const deletePresetBtn = panel.querySelector('.eq-delete-preset-btn');
|
||||
const bandContainer = panel.querySelector('.eq-band-container');
|
||||
|
||||
bandContainer.innerHTML = '';
|
||||
|
||||
const updateUIFromSettings = (settings) => {
|
||||
onOffSwitch.checked = settings.enabled;
|
||||
|
||||
const preampSlider = panel.querySelector('.eq-slider.preamp');
|
||||
const preampValueLabel = panel.querySelector('.preamp-band .eq-value');
|
||||
if (preampSlider && preampValueLabel) {
|
||||
preampSlider.value = settings.preamp;
|
||||
preampValueLabel.textContent = `${Math.round(settings.preamp)}dB`;
|
||||
}
|
||||
|
||||
const bandSliders = panel.querySelectorAll('.eq-band:not(.preamp-band) .eq-slider');
|
||||
const bandValueLabels = panel.querySelectorAll('.eq-band:not(.preamp-band) .eq-value');
|
||||
bandSliders.forEach((slider, i) => {
|
||||
if (settings.bands[i] !== undefined) {
|
||||
slider.value = settings.bands[i];
|
||||
if (bandValueLabels[i]) {
|
||||
bandValueLabels[i].textContent = `${settings.bands[i]}dB`;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onOffSwitch.addEventListener('change', () => {
|
||||
const isEnabled = onOffSwitch.checked;
|
||||
enhancer.toggle(isEnabled);
|
||||
userSettings.eqSettings.enabled = isEnabled;
|
||||
saveAppConfigValue('userSettings', userSettings);
|
||||
});
|
||||
|
||||
resetBtn.addEventListener('click', () => {
|
||||
const flatSettings = { enabled: true, preamp: 0, bands: new Array(10).fill(0), compressor: {} };
|
||||
userSettings.eqSettings = { ...userSettings.eqSettings, ...flatSettings };
|
||||
enhancer.applySettings(flatSettings);
|
||||
updateUIFromSettings(flatSettings);
|
||||
customPresetSelect.value = '';
|
||||
saveAppConfigValue('userSettings', userSettings);
|
||||
});
|
||||
|
||||
const preampBand = document.createElement('div');
|
||||
preampBand.className = 'eq-band preamp-band';
|
||||
preampBand.innerHTML = `
|
||||
<div class="eq-slider-wrapper">
|
||||
<input type="range" class="eq-slider preamp" min="-15" max="15" step="1" value="0" orient="vertical">
|
||||
</div>
|
||||
<label>Pre</label>
|
||||
<span class="eq-value">0dB</span>`;
|
||||
bandContainer.appendChild(preampBand);
|
||||
|
||||
const preampSlider = preampBand.querySelector('.eq-slider');
|
||||
const preampValueLabel = preampBand.querySelector('.eq-value');
|
||||
|
||||
preampSlider.addEventListener('input', () => {
|
||||
const gain = parseFloat(preampSlider.value);
|
||||
enhancer.changePreamp(gain);
|
||||
preampValueLabel.textContent = `${Math.round(gain)}dB`;
|
||||
userSettings.eqSettings.preamp = gain;
|
||||
customPresetSelect.value = '';
|
||||
});
|
||||
preampSlider.addEventListener('change', () => saveAppConfigValue('userSettings', userSettings));
|
||||
|
||||
enhancer.bandFrequencies.forEach((freq, i) => {
|
||||
const bandDiv = document.createElement('div');
|
||||
bandDiv.className = 'eq-band';
|
||||
const labelText = freq >= 1000 ? `${freq / 1000}k` : freq;
|
||||
bandDiv.innerHTML = `
|
||||
<div class="eq-slider-wrapper">
|
||||
<input type="range" class="eq-slider" min="-15" max="15" step="1" value="0" orient="vertical">
|
||||
</div>
|
||||
<label>${labelText}</label>
|
||||
<span class="eq-value">0dB</span>`;
|
||||
bandContainer.appendChild(bandDiv);
|
||||
|
||||
const slider = bandDiv.querySelector('.eq-slider');
|
||||
const valueLabel = bandDiv.querySelector('.eq-value');
|
||||
|
||||
slider.addEventListener('input', () => {
|
||||
const gain = parseFloat(slider.value);
|
||||
enhancer.changeGain(i, gain);
|
||||
valueLabel.textContent = `${gain}dB`;
|
||||
userSettings.eqSettings.bands[i] = gain;
|
||||
customPresetSelect.value = '';
|
||||
});
|
||||
slider.addEventListener('change', () => saveAppConfigValue('userSettings', userSettings));
|
||||
});
|
||||
|
||||
const staticPresets = {
|
||||
'dialogue': { enabled: true, preamp: 0, bands: [-2, -1, 0, 2, 4, 4, 2, 0, -1, -2], compressor: {} },
|
||||
'movie': { enabled: true, preamp: 2, bands: [3, 2, 1, 0, -1, 0, 1, 3, 4, 3], compressor: {} },
|
||||
'night': { enabled: true, preamp: 0, bands: [4, 3, 2, 0, -2, -4, -5, -6, -7, -8], compressor: { threshold: -40, knee: 30, ratio: 12 } }
|
||||
};
|
||||
|
||||
panel.querySelectorAll('.eq-static-presets button[data-preset]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const presetName = button.dataset.preset;
|
||||
if (staticPresets[presetName]) {
|
||||
const settings = staticPresets[presetName];
|
||||
userSettings.eqSettings = { ...userSettings.eqSettings, ...settings };
|
||||
enhancer.applySettings(settings);
|
||||
updateUIFromSettings(settings);
|
||||
customPresetSelect.value = '';
|
||||
saveAppConfigValue('userSettings', userSettings);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const populateCustomPresets = () => {
|
||||
customPresetSelect.innerHTML = '<option value="">-- Presets Guardados --</option>';
|
||||
(userSettings.eqSettings.customPresets || []).forEach((preset, index) => {
|
||||
customPresetSelect.innerHTML += `<option value="${index}">${escapeHtml(preset.name)}</option>`;
|
||||
});
|
||||
};
|
||||
|
||||
savePresetBtn.addEventListener('click', () => {
|
||||
const presetName = prompt("Nombre para el preset:", "Mi Sonido");
|
||||
if (presetName) {
|
||||
const newPreset = {
|
||||
name: presetName,
|
||||
settings: {
|
||||
enabled: userSettings.eqSettings.enabled,
|
||||
preamp: userSettings.eqSettings.preamp,
|
||||
bands: [...userSettings.eqSettings.bands]
|
||||
}
|
||||
};
|
||||
if (!userSettings.eqSettings.customPresets) userSettings.eqSettings.customPresets = [];
|
||||
userSettings.eqSettings.customPresets.push(newPreset);
|
||||
populateCustomPresets();
|
||||
customPresetSelect.value = userSettings.eqSettings.customPresets.length - 1;
|
||||
saveAppConfigValue('userSettings', userSettings);
|
||||
}
|
||||
});
|
||||
|
||||
customPresetSelect.addEventListener('change', () => {
|
||||
const index = customPresetSelect.value;
|
||||
if (index !== '') {
|
||||
const preset = userSettings.eqSettings.customPresets[index];
|
||||
if (preset) {
|
||||
const settings = { ...preset.settings, compressor: {} };
|
||||
userSettings.eqSettings = { ...userSettings.eqSettings, ...settings };
|
||||
enhancer.applySettings(settings);
|
||||
updateUIFromSettings(settings);
|
||||
saveAppConfigValue('userSettings', userSettings);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
deletePresetBtn.addEventListener('click', () => {
|
||||
const index = customPresetSelect.value;
|
||||
if (index !== '' && userSettings.eqSettings.customPresets[index]) {
|
||||
if (confirm(`¿Seguro que quieres eliminar el preset "${userSettings.eqSettings.customPresets[index].name}"?`)) {
|
||||
userSettings.eqSettings.customPresets.splice(index, 1);
|
||||
populateCustomPresets();
|
||||
saveAppConfigValue('userSettings', userSettings);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
updateUIFromSettings(userSettings.eqSettings);
|
||||
populateCustomPresets();
|
||||
}
|
||||
|
||||
function createPlayerWindow(channel) {
|
||||
const template = document.getElementById('playerWindowTemplate');
|
||||
@ -69,11 +282,14 @@ function createPlayerWindow(channel) {
|
||||
const playerInstance = new shaka.Player();
|
||||
const uiInstance = new shaka.ui.Overlay(playerInstance, containerElement, videoElement);
|
||||
|
||||
const factory = new ChannelListButtonFactory(uniqueId);
|
||||
shaka.ui.Controls.registerElement('channel_list', factory);
|
||||
const channelListFactory = new ChannelListButtonFactory(uniqueId);
|
||||
shaka.ui.Controls.registerElement('channel_list', channelListFactory);
|
||||
|
||||
const eqButtonFactory = new EQButtonFactory(uniqueId);
|
||||
shaka.ui.Controls.registerElement('eq_button', eqButtonFactory);
|
||||
|
||||
uiInstance.configure({
|
||||
controlPanelElements: ['play_pause', 'time_and_duration', 'volume', 'live_display', 'spacer', 'channel_list', 'quality', 'language', 'captions', 'fullscreen'],
|
||||
controlPanelElements: ['play_pause', 'time_and_duration', 'volume', 'spacer', 'channel_list', 'eq_button', 'quality', 'language', 'captions', 'fullscreen'],
|
||||
overflowMenuButtons: ['cast', 'picture_in_picture', 'playback_rate'],
|
||||
addSeekBar: true,
|
||||
addBigPlayButton: true,
|
||||
@ -84,6 +300,15 @@ function createPlayerWindow(channel) {
|
||||
customContextMenu: true
|
||||
});
|
||||
|
||||
const eqPanelTemplate = document.getElementById('eqPanelTemplate');
|
||||
const eqPanel = eqPanelTemplate.content.firstElementChild.cloneNode(true);
|
||||
containerElement.appendChild(eqPanel);
|
||||
|
||||
const audioEnhancer = new AudioEnhancer(videoElement);
|
||||
if (userSettings.eqSettings) {
|
||||
audioEnhancer.applySettings(userSettings.eqSettings);
|
||||
}
|
||||
|
||||
playerInstances[uniqueId] = {
|
||||
player: playerInstance,
|
||||
ui: uiInstance,
|
||||
@ -92,8 +317,12 @@ function createPlayerWindow(channel) {
|
||||
channel: channel,
|
||||
infobarInterval: null,
|
||||
isChannelListVisible: false,
|
||||
channelListPanelElement: channelListPanel
|
||||
channelListPanelElement: channelListPanel,
|
||||
audioEnhancer: audioEnhancer,
|
||||
eqPanel: eqPanel
|
||||
};
|
||||
|
||||
setupEQPanel(uniqueId);
|
||||
|
||||
setActivePlayer(uniqueId);
|
||||
|
||||
@ -117,6 +346,11 @@ function destroyPlayerWindow(id) {
|
||||
const instance = playerInstances[id];
|
||||
if (instance) {
|
||||
if (instance.infobarInterval) clearInterval(instance.infobarInterval);
|
||||
|
||||
if (instance.audioEnhancer) {
|
||||
instance.audioEnhancer.destroy();
|
||||
}
|
||||
|
||||
if (instance.player) {
|
||||
instance.player.destroy().catch(e => {});
|
||||
}
|
||||
@ -321,4 +555,10 @@ function highlightCurrentChannelInList(windowId) {
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleEQPanel(windowId) {
|
||||
const instance = playerInstances[windowId];
|
||||
if (!instance || !instance.eqPanel) return;
|
||||
instance.eqPanel.classList.toggle('open');
|
||||
}
|
||||
@ -54,7 +54,14 @@ let userSettings = {
|
||||
xcodecDefaultTimeout: 8000,
|
||||
playerWindowOpacity: 1,
|
||||
compactCardView: false,
|
||||
enableHoverPreview: true
|
||||
enableHoverPreview: true,
|
||||
eqSettings: {
|
||||
enabled: true,
|
||||
preamp: 0,
|
||||
bands: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
compressor: { threshold: -24, knee: 30, ratio: 12, attack: 0.003, release: 0.25 },
|
||||
customPresets: []
|
||||
}
|
||||
};
|
||||
|
||||
let daznAuthTokenState = null;
|
||||
|
||||
@ -116,7 +116,8 @@ function buildShakaConfig(channel, isPreview = false) {
|
||||
maxAttempts: isPreview ? 1 : safeParseInt(userSettings.manifestRetryMaxAttempts, 2),
|
||||
timeout: isPreview ? 5000 : safeParseInt(userSettings.manifestRetryTimeout, 15000)
|
||||
},
|
||||
dash: { defaultPresentationDelay: parseFloat(userSettings.shakaDefaultPresentationDelay) },
|
||||
defaultPresentationDelay: parseFloat(userSettings.shakaDefaultPresentationDelay),
|
||||
dash: {},
|
||||
hls: { ignoreTextStreamFailures: true }
|
||||
},
|
||||
streaming: {
|
||||
@ -347,8 +348,10 @@ async function playChannelInCardPreview(channel, videoContainerElement) {
|
||||
await activeCardPreviewPlayer.load(resolvedUrl, null, mimeType);
|
||||
|
||||
videoElement.play().catch(e => {
|
||||
console.warn("Error al iniciar previsualización automática:", e);
|
||||
destroyActiveCardPreviewPlayer();
|
||||
if (e.name !== 'AbortError') {
|
||||
console.warn("Error al iniciar previsualización automática:", e);
|
||||
}
|
||||
destroyActiveCardPreviewPlayer();
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user