Fixed option ui binidngs.
This commit is contained in:
+185
-77
@@ -34,60 +34,80 @@ class OptionsUIModule extends BaseModule {
|
||||
'handleTtsSystemChanged',
|
||||
'showReloadNotice',
|
||||
'toggle',
|
||||
'setupEventListeners'
|
||||
'setupEventListeners',
|
||||
'saveCurrentSettings'
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the options UI
|
||||
* @returns {boolean} - True if initialization was successful
|
||||
* @returns {Promise<boolean>} - Resolves with success status
|
||||
*/
|
||||
initialize() {
|
||||
console.log('Initializing Options UI Module');
|
||||
|
||||
// Set up dependencies
|
||||
this.dependencies = [
|
||||
'persistence-manager',
|
||||
'localization',
|
||||
'tts-factory',
|
||||
'audio-manager'
|
||||
];
|
||||
|
||||
// Create the options modal
|
||||
this.createModal();
|
||||
|
||||
// Set up event listeners
|
||||
this.setupEventListeners();
|
||||
|
||||
// Add event listener for showing options UI
|
||||
document.addEventListener('ui:showOptions', () => this.show());
|
||||
|
||||
// Add event listener for toggling options UI
|
||||
document.addEventListener('ui:options:toggle', () => this.toggle());
|
||||
|
||||
// Wait for dependencies and populate UI with delay to ensure TTS handlers are registered
|
||||
this.waitForDependencies().then(() => {
|
||||
console.log('Options UI: Dependencies loaded, initializing UI with delay');
|
||||
async initialize() {
|
||||
try {
|
||||
console.log('Initializing Options UI Module');
|
||||
|
||||
// Add a delay to ensure all TTS handlers are registered and initialized
|
||||
setTimeout(() => {
|
||||
// Populate TTS systems
|
||||
this.populateTtsSystems();
|
||||
// Set up dependencies
|
||||
this.dependencies = [
|
||||
'persistence-manager',
|
||||
'localization',
|
||||
'tts-factory',
|
||||
'audio-manager'
|
||||
];
|
||||
|
||||
// Create the options modal
|
||||
this.createModal();
|
||||
|
||||
// Set up event listeners
|
||||
this.setupEventListeners();
|
||||
|
||||
// Add event listener for showing options UI
|
||||
document.addEventListener('ui:showOptions', () => this.show());
|
||||
|
||||
// Add event listener for toggling options UI
|
||||
document.addEventListener('ui:options:toggle', () => this.toggle());
|
||||
|
||||
// Wait for dependencies and populate UI with delay to ensure TTS handlers are registered
|
||||
this.waitForDependencies().then(() => {
|
||||
console.log('Options UI: Dependencies loaded, initializing UI with delay');
|
||||
|
||||
// Populate languages
|
||||
this.populateLanguages();
|
||||
|
||||
// Load current preferences
|
||||
this.loadPreferences();
|
||||
|
||||
// Apply settings
|
||||
this.applySettings();
|
||||
|
||||
console.log('Options UI: Initialization complete');
|
||||
}, 1000); // 1 second delay
|
||||
});
|
||||
|
||||
return true;
|
||||
// Add a delay to ensure all TTS handlers are registered and initialized
|
||||
setTimeout(() => {
|
||||
// Populate TTS systems
|
||||
this.populateTtsSystems();
|
||||
|
||||
// Populate languages
|
||||
this.populateLanguages();
|
||||
|
||||
// Load current preferences
|
||||
this.loadPreferences();
|
||||
|
||||
// Apply settings
|
||||
this.applySettings();
|
||||
|
||||
console.log('Options UI: Initialization complete');
|
||||
}, 1000); // 1 second delay
|
||||
});
|
||||
|
||||
// Register for TTS events to update voices when they change
|
||||
document.addEventListener('tts:voices:updated', () => {
|
||||
console.log('Options UI: Received tts:voices:updated event, updating voice dropdown');
|
||||
this.populateVoices();
|
||||
});
|
||||
|
||||
// Set up key bindings
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && this.modal.style.display === 'flex') {
|
||||
this.saveCurrentSettings();
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Options UI: Error initializing", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -144,7 +164,11 @@ class OptionsUIModule extends BaseModule {
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.className = 'options-close';
|
||||
closeButton.innerHTML = '×';
|
||||
closeButton.addEventListener('click', () => this.hide());
|
||||
closeButton.addEventListener('click', () => {
|
||||
// Save all current settings when closing
|
||||
this.saveCurrentSettings();
|
||||
this.hide();
|
||||
});
|
||||
header.appendChild(closeButton);
|
||||
|
||||
content.appendChild(header);
|
||||
@@ -524,17 +548,11 @@ class OptionsUIModule extends BaseModule {
|
||||
noneOption.textContent = 'None (Disable TTS)';
|
||||
this.elements.ttsSystem.appendChild(noneOption);
|
||||
|
||||
// Debug log for troubleshooting
|
||||
console.log('Options UI: Populating TTS systems');
|
||||
|
||||
// Get available handlers
|
||||
const handlers = ttsFactory.getAvailableHandlers();
|
||||
console.log('Options UI: Available handlers:', handlers);
|
||||
|
||||
// Add all registered handlers
|
||||
for (const id in handlers) {
|
||||
// Always add the handler, even if not initialized yet
|
||||
console.log(`Options UI: Adding TTS option for ${id}`);
|
||||
const option = document.createElement('option');
|
||||
option.value = id;
|
||||
option.textContent = this.getTtsSystemName(id);
|
||||
@@ -543,13 +561,23 @@ class OptionsUIModule extends BaseModule {
|
||||
|
||||
// If no handlers available, add a disabled option
|
||||
if (this.elements.ttsSystem.options.length === 1) {
|
||||
console.log('Options UI: No TTS systems available, adding disabled option');
|
||||
const option = document.createElement('option');
|
||||
option.value = '';
|
||||
option.textContent = 'No TTS systems available';
|
||||
option.disabled = true;
|
||||
this.elements.ttsSystem.appendChild(option);
|
||||
}
|
||||
|
||||
// Set the current provider value in the dropdown
|
||||
if (this.persistenceManager) {
|
||||
const provider = this.persistenceManager.getPreference('tts', 'provider');
|
||||
if (provider) {
|
||||
const option = Array.from(this.elements.ttsSystem.options).find(opt => opt.value === provider);
|
||||
if (option) {
|
||||
this.elements.ttsSystem.value = provider;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -570,32 +598,39 @@ class OptionsUIModule extends BaseModule {
|
||||
* Populate voices dropdown for the current TTS system
|
||||
*/
|
||||
populateVoices() {
|
||||
if (!this.elements || !this.elements.ttsVoice) return;
|
||||
if (!this.elements || !this.elements.ttsVoice) {
|
||||
console.log('Options UI: Cannot populate voices - elements not initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
const localization = this.getModule('localization');
|
||||
if (!ttsFactory || !localization) return;
|
||||
if (!ttsFactory || !localization) {
|
||||
console.log('Options UI: Cannot populate voices - required modules not available');
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear existing options
|
||||
this.elements.ttsVoice.innerHTML = '';
|
||||
|
||||
// Get current locale
|
||||
const currentLocale = localization.getLocale();
|
||||
const languageCode = currentLocale.split('-')[0].toLowerCase();
|
||||
console.log(`Options UI: Current locale from localization module: ${currentLocale}`);
|
||||
|
||||
// Get active TTS handler
|
||||
const activeHandler = ttsFactory.getActiveHandler();
|
||||
const handlerId = activeHandler ? activeHandler.getId() : 'none';
|
||||
|
||||
console.log(`Options UI: Populating voices for locale: ${currentLocale}, handler: ${handlerId}`);
|
||||
|
||||
// Get voices from active handler
|
||||
const allVoices = ttsFactory.getVoices();
|
||||
const voices = ttsFactory.getVoices();
|
||||
console.log(`Options UI: Got ${voices ? voices.length : 0} voices from TTS factory`);
|
||||
|
||||
// Filter voices by current locale
|
||||
const filteredVoices = allVoices.filter(voice => {
|
||||
if (!voice.lang) return true; // Include voices without language info
|
||||
const voiceLang = voice.lang.toLowerCase();
|
||||
return voiceLang.startsWith(languageCode) || languageCode.startsWith(voiceLang.split('-')[0]);
|
||||
});
|
||||
|
||||
if (filteredVoices && filteredVoices.length > 0) {
|
||||
// Add available voices to dropdown
|
||||
if (voices && voices.length > 0) {
|
||||
// Add options for each voice
|
||||
filteredVoices.forEach(voice => {
|
||||
voices.forEach(voice => {
|
||||
const option = document.createElement('option');
|
||||
option.value = voice.id || voice.name;
|
||||
option.textContent = voice.name;
|
||||
@@ -604,13 +639,15 @@ class OptionsUIModule extends BaseModule {
|
||||
}
|
||||
this.elements.ttsVoice.appendChild(option);
|
||||
});
|
||||
console.log(`Options UI: Added ${voices.length} voice options to the dropdown`);
|
||||
} else {
|
||||
// No voices available for current locale
|
||||
// No voices available
|
||||
const option = document.createElement('option');
|
||||
option.value = '';
|
||||
option.textContent = `No voices available for ${currentLocale}`;
|
||||
option.disabled = true;
|
||||
this.elements.ttsVoice.appendChild(option);
|
||||
console.log(`Options UI: No voices available for ${currentLocale}, added placeholder option`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -791,20 +828,91 @@ class OptionsUIModule extends BaseModule {
|
||||
this.reloadRequired = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save current settings
|
||||
*/
|
||||
saveCurrentSettings() {
|
||||
if (!this.persistenceManager) return;
|
||||
|
||||
// Save TTS settings
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (ttsFactory) {
|
||||
const provider = this.elements.ttsSystem.value;
|
||||
const voice = this.elements.ttsVoice.value;
|
||||
const speed = parseInt(this.elements.speechRate.value) / 100;
|
||||
const enabled = this.elements.ttsSpeechToggle.checked;
|
||||
|
||||
this.persistenceManager.updatePreference('tts', 'provider', provider);
|
||||
this.persistenceManager.updatePreference('tts', 'voice', voice);
|
||||
this.persistenceManager.updatePreference('tts', 'speed', speed);
|
||||
this.persistenceManager.updatePreference('tts', 'enabled', enabled);
|
||||
}
|
||||
|
||||
// Save language settings
|
||||
const localization = this.getModule('localization');
|
||||
if (localization && this.elements.language) {
|
||||
const locale = this.elements.language.value;
|
||||
this.persistenceManager.updatePreference('app', 'locale', locale);
|
||||
this.persistenceManager.updatePreference('tts', 'language', locale);
|
||||
}
|
||||
|
||||
// Save audio settings
|
||||
const audioManager = this.getModule('audio-manager');
|
||||
if (audioManager) {
|
||||
const masterVolume = parseInt(this.elements.masterVolume.value) / 100;
|
||||
const musicVolume = parseInt(this.elements.musicVolume.value) / 100;
|
||||
const sfxVolume = parseInt(this.elements.effectsVolume.value) / 100;
|
||||
const speechVolume = parseInt(this.elements.speechVolume.value) / 100;
|
||||
|
||||
this.persistenceManager.updatePreference('audio', 'masterVolume', masterVolume);
|
||||
this.persistenceManager.updatePreference('audio', 'musicVolume', musicVolume);
|
||||
this.persistenceManager.updatePreference('audio', 'sfxVolume', sfxVolume);
|
||||
this.persistenceManager.updatePreference('tts', 'volume', speechVolume);
|
||||
}
|
||||
|
||||
// Save text speed setting
|
||||
const textSpeed = parseInt(this.elements.textSpeed.value);
|
||||
this.persistenceManager.updatePreference('animation', 'speed', textSpeed);
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Listen for language change events
|
||||
document.addEventListener('localization:languageChanged', () => {
|
||||
// Update the language selection in options panel
|
||||
const localization = this.getModule('localization');
|
||||
if (localization && this.elements && this.elements.language) {
|
||||
const currentLocale = localization.getLocale();
|
||||
if (currentLocale && this.elements.language.value !== currentLocale) {
|
||||
this.elements.language.value = currentLocale;
|
||||
this.populateLanguages();
|
||||
this.populateVoices();
|
||||
});
|
||||
|
||||
// Listen for TTS state changes
|
||||
document.addEventListener('tts:stateChange', (event) => {
|
||||
if (this.elements && this.elements.ttsSpeechToggle) {
|
||||
this.elements.ttsSpeechToggle.checked = event.detail.enabled;
|
||||
|
||||
// Update persistence manager
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'enabled', event.detail.enabled);
|
||||
}
|
||||
}
|
||||
|
||||
// Re-populate TTS voices for new language
|
||||
this.populateVoices();
|
||||
});
|
||||
|
||||
// Listen for TTS handler changes
|
||||
document.addEventListener('tts:handlerChanged', (event) => {
|
||||
if (this.elements && this.elements.ttsSystem) {
|
||||
// Update the dropdown to match the active handler
|
||||
const handlerId = event.detail.handlerId;
|
||||
if (handlerId && handlerId !== 'none') {
|
||||
this.elements.ttsSystem.value = handlerId;
|
||||
|
||||
// Update persistence manager
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'provider', handlerId);
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh voices when handler changes
|
||||
this.populateVoices();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for TTS availability events
|
||||
|
||||
Reference in New Issue
Block a user