Refactored modules and updated loader.
This commit is contained in:
@@ -0,0 +1,974 @@
|
||||
/**
|
||||
* Options UI Module
|
||||
* Provides the options UI for the game
|
||||
*/
|
||||
import { BaseModule } from './base-module.js';
|
||||
import { createUIElement, populateDropdown, registerHandler, createPreferenceBinding } from './ui-helper.js';
|
||||
|
||||
class OptionsUIModule extends BaseModule {
|
||||
/**
|
||||
* Create a new options UI module
|
||||
*/
|
||||
constructor() {
|
||||
super('options-ui', 'Options UI');
|
||||
|
||||
// Set up dependencies
|
||||
this.dependencies = [
|
||||
'persistence-manager',
|
||||
'localization',
|
||||
'tts-factory',
|
||||
'audio-manager'
|
||||
];
|
||||
|
||||
// Modal element
|
||||
this.modal = null;
|
||||
|
||||
// UI elements
|
||||
this.elements = {};
|
||||
|
||||
// Settings that require reload
|
||||
this.reloadRequired = false;
|
||||
|
||||
// Bind methods
|
||||
this.bindMethods([
|
||||
'show',
|
||||
'hide',
|
||||
'createModal',
|
||||
'populateTtsSystems',
|
||||
'populateVoices',
|
||||
'populateLanguages',
|
||||
'loadPreferences',
|
||||
'applySettings',
|
||||
'handleTtsSystemChanged',
|
||||
'showReloadNotice',
|
||||
'toggle',
|
||||
'setupEventListeners',
|
||||
'saveCurrentSettings',
|
||||
'setupApiUrlFields',
|
||||
'setupInitialState',
|
||||
'dispatchApiChangeEvent',
|
||||
'getPreference',
|
||||
'updatePreference'
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatches an API change event
|
||||
* @param {string} eventType - Event type (e.g. 'api:key:change')
|
||||
* @param {string} provider - Provider name (e.g. 'elevenlabs')
|
||||
* @param {string} valueType - Value type (e.g. 'key', 'url')
|
||||
* @param {string} value - Value to dispatch
|
||||
*/
|
||||
dispatchApiChangeEvent(eventType, provider, valueType, value) {
|
||||
document.dispatchEvent(new CustomEvent(eventType, {
|
||||
detail: { provider, [valueType]: value }
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a preference from the persistence manager
|
||||
* @param {string} category - Preference category
|
||||
* @param {string} key - Preference key
|
||||
* @param {*} defaultValue - Default value if preference doesn't exist
|
||||
* @returns {*} - Preference value
|
||||
*/
|
||||
getPreference(category, key, defaultValue) {
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
return persistenceManager.getPreference(category, key, defaultValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a preference in the persistence manager
|
||||
* @param {string} category - Preference category
|
||||
* @param {string} key - Preference key
|
||||
* @param {*} value - Value to set
|
||||
*/
|
||||
updatePreference(category, key, value) {
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
persistenceManager.updatePreference(category, key, value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the Options UI module
|
||||
* @returns {Promise<boolean>} - Promise resolves with initialization success
|
||||
*/
|
||||
async initialize() {
|
||||
console.log('Options UI: Initializing');
|
||||
|
||||
// Create DOM elements
|
||||
this.createModal();
|
||||
|
||||
// Set up event listeners
|
||||
this.setupEventListeners();
|
||||
|
||||
// Set up API URL fields
|
||||
this.setupApiUrlFields();
|
||||
|
||||
// Set up initial state
|
||||
await this.setupInitialState();
|
||||
|
||||
// Set up immediate save listeners
|
||||
this.setupImmediateSaveListeners();
|
||||
|
||||
this.reportProgress(100, 'Options UI initialized');
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the options modal
|
||||
*/
|
||||
createModal() {
|
||||
if (this.modal) return;
|
||||
|
||||
const body = document.body;
|
||||
|
||||
// Create modal container
|
||||
this.modal = createUIElement('div', { className: 'options-modal', id: 'options-modal' }, null, body);
|
||||
|
||||
// Create modal content
|
||||
const modalContent = createUIElement('div', { className: 'options-content' }, null, this.modal);
|
||||
|
||||
// Create header
|
||||
const header = createUIElement('div', { className: 'options-header' }, null, modalContent);
|
||||
createUIElement('h2', {}, 'Options', header);
|
||||
this.elements.closeButton = createUIElement('button', { className: 'options-close', 'aria-label': 'Close' }, '×', header);
|
||||
|
||||
// Create settings container
|
||||
const settings = createUIElement('div', { className: 'options-settings' }, null, modalContent);
|
||||
|
||||
// TTS Settings
|
||||
const ttsSection = createUIElement('div', { className: 'options-section' }, null, settings);
|
||||
createUIElement('h3', {}, 'Text-to-Speech', ttsSection);
|
||||
|
||||
// TTS Toggle
|
||||
const ttsSpeechToggleContainer = createUIElement('div', { className: 'options-row' }, null, ttsSection);
|
||||
createUIElement('label', {}, 'Enable Text-to-Speech:', ttsSpeechToggleContainer);
|
||||
this.elements.ttsEnabled = createUIElement('input', { type: 'checkbox', id: 'tts-enabled' }, null, ttsSpeechToggleContainer);
|
||||
|
||||
// TTS System
|
||||
const ttsSystemContainer = createUIElement('div', { className: 'options-row' }, null, ttsSection);
|
||||
createUIElement('label', {}, 'TTS System:', ttsSystemContainer);
|
||||
this.elements.ttsSystem = createUIElement('select', { id: 'tts-system' }, null, ttsSystemContainer);
|
||||
|
||||
// TTS Voice
|
||||
const ttsVoiceContainer = createUIElement('div', { className: 'options-row' }, null, ttsSection);
|
||||
createUIElement('label', {}, 'Voice:', ttsVoiceContainer);
|
||||
this.elements.ttsVoice = createUIElement('select', { id: 'tts-voice' }, null, ttsVoiceContainer);
|
||||
|
||||
// TTS Speed
|
||||
const speedContainer = createUIElement('div', { className: 'options-row' }, null, ttsSection);
|
||||
createUIElement('label', {}, 'TTS Speed:', speedContainer);
|
||||
this.elements.ttsSpeed = createUIElement('input', {
|
||||
type: 'range',
|
||||
id: 'tts-speed',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}, null, speedContainer);
|
||||
|
||||
// Create API settings for each provider
|
||||
const apiSettings = this.createApiSettings(ttsSection);
|
||||
|
||||
// Audio Settings Section
|
||||
const audioSection = createUIElement('div', { className: 'options-section' }, null, settings);
|
||||
createUIElement('h3', {}, 'Audio', audioSection);
|
||||
|
||||
// Master Volume
|
||||
const masterVolumeContainer = createUIElement('div', { className: 'options-row' }, null, audioSection);
|
||||
createUIElement('label', {}, 'Master Volume:', masterVolumeContainer);
|
||||
this.elements.masterVolume = createUIElement('input', {
|
||||
type: 'range',
|
||||
id: 'master-volume',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}, null, masterVolumeContainer);
|
||||
|
||||
// Music Volume
|
||||
const musicVolumeContainer = createUIElement('div', { className: 'options-row' }, null, audioSection);
|
||||
createUIElement('label', {}, 'Music Volume:', musicVolumeContainer);
|
||||
this.elements.musicVolume = createUIElement('input', {
|
||||
type: 'range',
|
||||
id: 'music-volume',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}, null, musicVolumeContainer);
|
||||
|
||||
// SFX Volume
|
||||
const sfxVolumeContainer = createUIElement('div', { className: 'options-row' }, null, audioSection);
|
||||
createUIElement('label', {}, 'Sound Effects Volume:', sfxVolumeContainer);
|
||||
this.elements.sfxVolume = createUIElement('input', {
|
||||
type: 'range',
|
||||
id: 'sfx-volume',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}, null, sfxVolumeContainer);
|
||||
|
||||
// Ambience Volume
|
||||
const ambienceVolumeContainer = createUIElement('div', { className: 'options-row' }, null, audioSection);
|
||||
createUIElement('label', {}, 'Ambience Volume:', ambienceVolumeContainer);
|
||||
this.elements.ambienceVolume = createUIElement('input', {
|
||||
type: 'range',
|
||||
id: 'ambience-volume',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}, null, ambienceVolumeContainer);
|
||||
|
||||
// Language Section
|
||||
const languageSection = createUIElement('div', { className: 'options-section' }, null, settings);
|
||||
createUIElement('h3', {}, 'Language Settings', languageSection);
|
||||
|
||||
// Language selection
|
||||
const languageContainer = createUIElement('div', { className: 'options-row' }, null, languageSection);
|
||||
createUIElement('label', {}, 'Language:', languageContainer);
|
||||
this.elements.language = createUIElement('select', { id: 'app-language' }, null, languageContainer);
|
||||
|
||||
// Initialize with display: none
|
||||
this.modal.style.display = 'none';
|
||||
|
||||
// Add event handlers
|
||||
this.elements.closeButton.addEventListener('click', () => {
|
||||
this.saveCurrentSettings();
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create API settings for TTS providers
|
||||
* @param {HTMLElement} parentSection - Parent section for API settings
|
||||
* @returns {Object} - Object with API settings elements
|
||||
*/
|
||||
createApiSettings(parentSection) {
|
||||
// ElevenLabs settings
|
||||
// API Key
|
||||
const elevenLabsApiKeyContainer = createUIElement('div', {
|
||||
className: 'options-row elevenlabs-setting',
|
||||
'data-provider': 'elevenlabs'
|
||||
}, null, parentSection);
|
||||
|
||||
createUIElement('label', {}, 'ElevenLabs API Key:', elevenLabsApiKeyContainer);
|
||||
this.elements.elevenLabsApiKey = createUIElement('input', {
|
||||
type: 'password',
|
||||
placeholder: 'Enter your ElevenLabs API key'
|
||||
}, null, elevenLabsApiKeyContainer);
|
||||
|
||||
// API URL
|
||||
const elevenLabsApiUrlContainer = createUIElement('div', {
|
||||
className: 'options-row elevenlabs-setting',
|
||||
'data-provider': 'elevenlabs'
|
||||
}, null, parentSection);
|
||||
|
||||
createUIElement('label', {}, 'ElevenLabs API URL:', elevenLabsApiUrlContainer);
|
||||
this.elements.elevenLabsApiUrl = createUIElement('input', {
|
||||
type: 'text',
|
||||
placeholder: 'https://api.elevenlabs.io/v1'
|
||||
}, null, elevenLabsApiUrlContainer);
|
||||
|
||||
// OpenAI settings
|
||||
// API Key
|
||||
const openaiApiKeyContainer = createUIElement('div', {
|
||||
className: 'options-row openai-setting',
|
||||
'data-provider': 'openai'
|
||||
}, null, parentSection);
|
||||
|
||||
createUIElement('label', {}, 'OpenAI API Key:', openaiApiKeyContainer);
|
||||
this.elements.openaiApiKey = createUIElement('input', {
|
||||
type: 'password',
|
||||
placeholder: 'Enter your OpenAI API key'
|
||||
}, null, openaiApiKeyContainer);
|
||||
|
||||
// API URL
|
||||
const openaiApiUrlContainer = createUIElement('div', {
|
||||
className: 'options-row openai-setting',
|
||||
'data-provider': 'openai'
|
||||
}, null, parentSection);
|
||||
|
||||
createUIElement('label', {}, 'OpenAI API URL:', openaiApiUrlContainer);
|
||||
this.elements.openaiApiUrl = createUIElement('input', {
|
||||
type: 'text',
|
||||
placeholder: 'https://api.openai.com/v1'
|
||||
}, null, openaiApiUrlContainer);
|
||||
|
||||
// Initially hide API settings
|
||||
const apiSettings = document.querySelectorAll('.elevenlabs-setting, .openai-setting');
|
||||
apiSettings.forEach(setting => {
|
||||
setting.style.display = 'none';
|
||||
});
|
||||
|
||||
return { elevenLabsApiKeyContainer, elevenLabsApiUrlContainer, openaiApiKeyContainer, openaiApiUrlContainer };
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up event listeners for UI elements
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// TTS System change event
|
||||
if (this.elements.ttsSystem) {
|
||||
this.elements.ttsSystem.addEventListener('change', this.handleTtsSystemChanged);
|
||||
}
|
||||
|
||||
// TTS Enable toggle event
|
||||
if (this.elements.ttsEnabled) {
|
||||
this.elements.ttsEnabled.addEventListener('change', (event) => {
|
||||
const enabled = event.target.checked;
|
||||
console.log('Options UI: TTS enabled changed to', enabled);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('tts', 'enabled', enabled);
|
||||
|
||||
// Update TTS Factory
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (ttsFactory) {
|
||||
ttsFactory.configure({ enabled });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Voice change event
|
||||
if (this.elements.ttsVoice) {
|
||||
this.elements.ttsVoice.addEventListener('change', (event) => {
|
||||
const voice = event.target.value;
|
||||
console.log('Options UI: TTS voice changed to', voice);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('tts', 'voice', voice);
|
||||
|
||||
// Update TTS Factory
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (ttsFactory) {
|
||||
ttsFactory.configure({ voice });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TTS Speed change event
|
||||
if (this.elements.ttsSpeed) {
|
||||
this.elements.ttsSpeed.addEventListener('input', (event) => {
|
||||
const speed = parseInt(event.target.value) / 100;
|
||||
console.log('Options UI: TTS speed changed to', speed);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('tts', 'speed', speed);
|
||||
|
||||
// Update TTS Factory
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (ttsFactory) {
|
||||
ttsFactory.configure({ speed });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Language change event
|
||||
if (this.elements.language) {
|
||||
this.elements.language.addEventListener('change', (event) => {
|
||||
const locale = event.target.value;
|
||||
console.log('Options UI: Language changed to', locale);
|
||||
|
||||
// Save settings
|
||||
this.updatePreference('app', 'locale', locale);
|
||||
this.updatePreference('tts', 'language', locale);
|
||||
|
||||
// Update Localization module
|
||||
const localization = this.getModule('localization');
|
||||
if (localization) {
|
||||
localization.setLocale(locale);
|
||||
}
|
||||
|
||||
// Show reload notice
|
||||
this.showReloadNotice();
|
||||
});
|
||||
}
|
||||
|
||||
// Audio Settings
|
||||
// Master Volume
|
||||
if (this.elements.masterVolume) {
|
||||
this.elements.masterVolume.addEventListener('input', (event) => {
|
||||
const volume = parseInt(event.target.value) / 100;
|
||||
console.log('Options UI: Master volume changed to', volume);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('audio', 'masterVolume', volume);
|
||||
|
||||
// Update Audio Manager
|
||||
const audioManager = this.getModule('audio-manager');
|
||||
if (audioManager) {
|
||||
audioManager.setMasterVolume(volume);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Music Volume
|
||||
if (this.elements.musicVolume) {
|
||||
this.elements.musicVolume.addEventListener('input', (event) => {
|
||||
const volume = parseInt(event.target.value) / 100;
|
||||
console.log('Options UI: Music volume changed to', volume);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('audio', 'musicVolume', volume);
|
||||
|
||||
// Update Audio Manager
|
||||
const audioManager = this.getModule('audio-manager');
|
||||
if (audioManager) {
|
||||
audioManager.setMusicVolume(volume);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// SFX Volume
|
||||
if (this.elements.sfxVolume) {
|
||||
this.elements.sfxVolume.addEventListener('input', (event) => {
|
||||
const volume = parseInt(event.target.value) / 100;
|
||||
console.log('Options UI: SFX volume changed to', volume);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('audio', 'sfxVolume', volume);
|
||||
|
||||
// Update Audio Manager
|
||||
const audioManager = this.getModule('audio-manager');
|
||||
if (audioManager) {
|
||||
audioManager.setSfxVolume(volume);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Ambience Volume
|
||||
if (this.elements.ambienceVolume) {
|
||||
this.elements.ambienceVolume.addEventListener('input', (event) => {
|
||||
const volume = parseInt(event.target.value) / 100;
|
||||
console.log('Options UI: Ambience volume changed to', volume);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('audio', 'ambienceVolume', volume);
|
||||
|
||||
// Update Audio Manager
|
||||
const audioManager = this.getModule('audio-manager');
|
||||
if (audioManager) {
|
||||
audioManager.setAmbienceVolume(volume);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle TTS system change
|
||||
* @param {Event} event - Change event
|
||||
*/
|
||||
async handleTtsSystemChanged(event) {
|
||||
const selectedSystem = event.target.value;
|
||||
console.log('Options UI: TTS system changed to', selectedSystem);
|
||||
|
||||
// Update API settings visibility
|
||||
this.updateApiSettingsVisibility(selectedSystem);
|
||||
|
||||
// Save setting
|
||||
this.updatePreference('tts', 'preferred_handler', selectedSystem);
|
||||
|
||||
// Notify TTSFactory of handler change
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (ttsFactory) {
|
||||
await ttsFactory.setActiveHandler(selectedSystem);
|
||||
|
||||
// Now that the handler has changed, update voices for the selected system
|
||||
await this.populateVoices();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update API settings visibility based on selected TTS system
|
||||
* @param {string} selectedSystem - Selected TTS system
|
||||
*/
|
||||
updateApiSettingsVisibility(selectedSystem) {
|
||||
const elevenLabsSettings = document.querySelectorAll('.elevenlabs-setting');
|
||||
const openaiSettings = document.querySelectorAll('.openai-setting');
|
||||
|
||||
elevenLabsSettings.forEach(setting => {
|
||||
setting.style.display = selectedSystem === 'elevenlabs' ? 'flex' : 'none';
|
||||
});
|
||||
|
||||
openaiSettings.forEach(setting => {
|
||||
setting.style.display = selectedSystem === 'openai' ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the options UI
|
||||
*/
|
||||
show() {
|
||||
if (this.modal) {
|
||||
this.modal.style.display = 'flex';
|
||||
document.body.classList.add('modal-open');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the options UI
|
||||
*/
|
||||
hide() {
|
||||
if (this.modal) {
|
||||
this.modal.style.display = 'none';
|
||||
document.body.classList.remove('modal-open');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the options UI visibility
|
||||
*/
|
||||
toggle() {
|
||||
if (this.modal) {
|
||||
if (this.modal.style.display === 'flex') {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the TTS systems dropdown
|
||||
*/
|
||||
async populateTtsSystems() {
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (!ttsFactory || !this.elements.ttsSystem) return;
|
||||
|
||||
// Get available TTS systems
|
||||
const handlers = ttsFactory.getAvailableHandlers();
|
||||
console.log('Options UI: Available TTS handlers:', handlers);
|
||||
|
||||
// Format for display
|
||||
const systems = handlers.map(handler => ({
|
||||
id: handler.id,
|
||||
name: this.getTtsSystemName(handler.id)
|
||||
}));
|
||||
|
||||
// Populate dropdown
|
||||
populateDropdown(
|
||||
this.elements.ttsSystem,
|
||||
systems,
|
||||
'id',
|
||||
'name',
|
||||
this.getPreference('tts', 'preferred_handler', 'none')
|
||||
);
|
||||
|
||||
// Update API settings visibility
|
||||
this.updateApiSettingsVisibility(this.elements.ttsSystem.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a friendly name for a TTS system
|
||||
* @param {string} id - TTS system ID
|
||||
* @returns {string} - Friendly name
|
||||
*/
|
||||
getTtsSystemName(id) {
|
||||
const names = {
|
||||
'none': 'None',
|
||||
'browser': 'Browser',
|
||||
'kokoro': 'Kokoro',
|
||||
'elevenlabs': 'ElevenLabs',
|
||||
'openai': 'OpenAI'
|
||||
};
|
||||
|
||||
return names[id] || id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the voices dropdown
|
||||
*/
|
||||
async populateVoices() {
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (!ttsFactory || !this.elements.ttsVoice) return;
|
||||
|
||||
// Get voices for current TTS system
|
||||
const voices = await ttsFactory.getVoices() || [];
|
||||
console.log('Options UI: TTS voices:', voices);
|
||||
|
||||
// Populate dropdown
|
||||
populateDropdown(
|
||||
this.elements.ttsVoice,
|
||||
voices,
|
||||
'id',
|
||||
'name',
|
||||
this.getPreference('tts', 'voice', '')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the languages dropdown
|
||||
*/
|
||||
async populateLanguages() {
|
||||
const localization = this.getModule('localization');
|
||||
if (!localization || !this.elements.language) return;
|
||||
|
||||
// Get available languages
|
||||
const languages = localization.getAvailableLocales() || [];
|
||||
console.log('Options UI: Available languages:', languages);
|
||||
|
||||
// Format languages with their names
|
||||
const languageOptions = languages.map(code => ({
|
||||
code,
|
||||
name: localization.getLanguageName(code)
|
||||
}));
|
||||
|
||||
// Populate dropdown
|
||||
populateDropdown(
|
||||
this.elements.language,
|
||||
languageOptions,
|
||||
'code',
|
||||
'name',
|
||||
this.getPreference('app', 'locale', 'en-us')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load user preferences from the persistence manager
|
||||
*/
|
||||
loadPreferences() {
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
if (!persistenceManager) return;
|
||||
|
||||
console.log('Options UI: Loading preferences');
|
||||
|
||||
// TTS Settings
|
||||
// TTS Enable
|
||||
if (this.elements.ttsEnabled) {
|
||||
this.elements.ttsEnabled.checked = this.getPreference('tts', 'enabled', true);
|
||||
}
|
||||
|
||||
// TTS System
|
||||
if (this.elements.ttsSystem) {
|
||||
const preferredHandler = this.getPreference('tts', 'preferred_handler', 'none');
|
||||
if (this.elements.ttsSystem.querySelector(`option[value="${preferredHandler}"]`)) {
|
||||
this.elements.ttsSystem.value = preferredHandler;
|
||||
}
|
||||
}
|
||||
|
||||
// TTS Speed
|
||||
if (this.elements.ttsSpeed) {
|
||||
const speed = this.getPreference('tts', 'speed', 1);
|
||||
this.elements.ttsSpeed.value = Math.round(speed * 100);
|
||||
}
|
||||
|
||||
// Audio Settings
|
||||
// Master Volume
|
||||
if (this.elements.masterVolume) {
|
||||
const masterVolume = this.getPreference('audio', 'masterVolume', 1);
|
||||
this.elements.masterVolume.value = Math.round(masterVolume * 100);
|
||||
}
|
||||
|
||||
// Music Volume
|
||||
if (this.elements.musicVolume) {
|
||||
const musicVolume = this.getPreference('audio', 'musicVolume', 1);
|
||||
this.elements.musicVolume.value = Math.round(musicVolume * 100);
|
||||
}
|
||||
|
||||
// SFX Volume
|
||||
if (this.elements.sfxVolume) {
|
||||
const sfxVolume = this.getPreference('audio', 'sfxVolume', 1);
|
||||
this.elements.sfxVolume.value = Math.round(sfxVolume * 100);
|
||||
}
|
||||
|
||||
// Ambience Volume
|
||||
if (this.elements.ambienceVolume) {
|
||||
const ambienceVolume = this.getPreference('audio', 'ambienceVolume', 1);
|
||||
this.elements.ambienceVolume.value = Math.round(ambienceVolume * 100);
|
||||
}
|
||||
|
||||
// Language
|
||||
if (this.elements.language) {
|
||||
const locale = this.getPreference('app', 'locale', 'en');
|
||||
if (this.elements.language.querySelector(`option[value="${locale}"]`)) {
|
||||
this.elements.language.value = locale;
|
||||
}
|
||||
}
|
||||
|
||||
// Update API settings visibility
|
||||
if (this.elements.ttsSystem) {
|
||||
this.updateApiSettingsVisibility(this.elements.ttsSystem.value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up two-way binding for TTS Enabled
|
||||
* @param {HTMLElement} element - UI element
|
||||
* @param {Object} persistenceManager - Persistence Manager module
|
||||
* @param {string} category - Preference category
|
||||
* @param {string} key - Preference key
|
||||
* @param {*} defaultValue - Default value if preference doesn't exist
|
||||
* @param {Function} [transform] - Optional transform function
|
||||
*/
|
||||
setupTtsEnabledBinding(element, persistenceManager, category, key, defaultValue, transform) {
|
||||
createPreferenceBinding(
|
||||
element,
|
||||
persistenceManager,
|
||||
category,
|
||||
key,
|
||||
defaultValue,
|
||||
transform
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up two-way binding for TTS Voice
|
||||
* @param {HTMLElement} element - UI element
|
||||
* @param {Object} persistenceManager - Persistence Manager module
|
||||
* @param {string} category - Preference category
|
||||
* @param {string} key - Preference key
|
||||
* @param {*} defaultValue - Default value if preference doesn't exist
|
||||
* @param {Function} [transform] - Optional transform function
|
||||
*/
|
||||
setupTtsVoiceBinding(element, persistenceManager, category, key, defaultValue, transform) {
|
||||
createPreferenceBinding(
|
||||
element,
|
||||
persistenceManager,
|
||||
category,
|
||||
key,
|
||||
defaultValue,
|
||||
transform
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up two-way binding for App Language
|
||||
* @param {HTMLElement} element - UI element
|
||||
* @param {Object} persistenceManager - Persistence Manager module
|
||||
* @param {string} category - Preference category
|
||||
* @param {string} key - Preference key
|
||||
* @param {*} defaultValue - Default value if preference doesn't exist
|
||||
* @param {Function} [transform] - Optional transform function
|
||||
*/
|
||||
setupLanguageBinding(element, persistenceManager, category, key, defaultValue, transform) {
|
||||
createPreferenceBinding(
|
||||
element,
|
||||
persistenceManager,
|
||||
category,
|
||||
key,
|
||||
defaultValue,
|
||||
transform
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up two-way binding for API settings
|
||||
* @param {Object} persistenceManager - Persistence Manager module
|
||||
*/
|
||||
setupApiPreferenceBindings(persistenceManager) {
|
||||
// ElevenLabs API Key
|
||||
createPreferenceBinding(
|
||||
this.elements.elevenLabsApiKey,
|
||||
persistenceManager,
|
||||
'tts',
|
||||
'elevenlabs_api_key',
|
||||
null,
|
||||
(value) => {
|
||||
this.dispatchApiChangeEvent('api:key:change', 'elevenlabs', 'key', value);
|
||||
return value;
|
||||
}
|
||||
);
|
||||
|
||||
// ElevenLabs API URL
|
||||
createPreferenceBinding(
|
||||
this.elements.elevenLabsApiUrl,
|
||||
persistenceManager,
|
||||
'tts',
|
||||
'elevenlabs_api_url',
|
||||
null,
|
||||
(value) => {
|
||||
this.dispatchApiChangeEvent('api:url:change', 'elevenlabs', 'url', value);
|
||||
return value;
|
||||
}
|
||||
);
|
||||
|
||||
// OpenAI API Key
|
||||
createPreferenceBinding(
|
||||
this.elements.openaiApiKey,
|
||||
persistenceManager,
|
||||
'tts',
|
||||
'openai_api_key',
|
||||
null,
|
||||
(value) => {
|
||||
this.dispatchApiChangeEvent('api:key:change', 'openai', 'key', value);
|
||||
return value;
|
||||
}
|
||||
);
|
||||
|
||||
// OpenAI API URL
|
||||
createPreferenceBinding(
|
||||
this.elements.openaiApiUrl,
|
||||
persistenceManager,
|
||||
'tts',
|
||||
'openai_api_url',
|
||||
null,
|
||||
(value) => {
|
||||
this.dispatchApiChangeEvent('api:url:change', 'openai', 'url', value);
|
||||
return value;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save current settings
|
||||
*/
|
||||
saveCurrentSettings() {
|
||||
// With two-way binding, settings are saved automatically as they change
|
||||
console.log('Options UI: Settings saved');
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply settings
|
||||
*/
|
||||
applySettings() {
|
||||
const ttsFactory = this.getModule('tts-factory');
|
||||
if (ttsFactory) {
|
||||
// Apply TTS settings
|
||||
const enabled = this.getPreference('tts', 'enabled', false);
|
||||
const preferredHandler = this.getPreference('tts', 'preferred_handler', 'none');
|
||||
|
||||
ttsFactory.configure({ enabled });
|
||||
ttsFactory.setActiveHandler(preferredHandler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a reload notice
|
||||
* @param {string} message - Message to show
|
||||
*/
|
||||
showReloadNotice(message) {
|
||||
console.log('Options UI: Reload required -', message);
|
||||
this.reloadRequired = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up listeners for settings that should save immediately
|
||||
*/
|
||||
setupImmediateSaveListeners() {
|
||||
// Settings are saved immediately with two-way binding
|
||||
}
|
||||
|
||||
/**
|
||||
* Update UI text based on current language
|
||||
*/
|
||||
updateUIText() {
|
||||
// Update UI text based on current language
|
||||
const localization = this.getModule('localization');
|
||||
if (!localization) return;
|
||||
|
||||
// Update modal title
|
||||
const modalTitle = this.modal.querySelector('h2');
|
||||
if (modalTitle) {
|
||||
modalTitle.textContent = localization.translate('options.title', 'Options');
|
||||
}
|
||||
|
||||
// Update section titles
|
||||
const ttsSectionTitle = this.modal.querySelector('.options-section h3:first-child');
|
||||
if (ttsSectionTitle) {
|
||||
ttsSectionTitle.textContent = localization.translate('options.tts.title', 'Text-to-Speech');
|
||||
}
|
||||
|
||||
const langSectionTitle = this.modal.querySelector('.options-section:nth-child(2) h3');
|
||||
if (langSectionTitle) {
|
||||
langSectionTitle.textContent = localization.translate('options.language.title', 'Language Settings');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up API URL fields with default values
|
||||
*/
|
||||
setupApiUrlFields() {
|
||||
// Set up ElevenLabs API URL
|
||||
if (this.elements.elevenLabsApiUrl) {
|
||||
const savedUrl = this.getPreference('tts', 'elevenlabs_api_url');
|
||||
const defaultUrl = 'https://api.elevenlabs.io/v1';
|
||||
|
||||
// If no saved URL, set the default
|
||||
if (!savedUrl) {
|
||||
console.log('Options UI: Setting default ElevenLabs API URL:', defaultUrl);
|
||||
this.updatePreference('tts', 'elevenlabs_api_url', defaultUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// Set up OpenAI API URL
|
||||
if (this.elements.openaiApiUrl) {
|
||||
const savedUrl = this.getPreference('tts', 'openai_api_url');
|
||||
const defaultUrl = 'https://api.openai.com/v1';
|
||||
|
||||
// If no saved URL, set the default
|
||||
if (!savedUrl) {
|
||||
console.log('Options UI: Setting default OpenAI API URL:', defaultUrl);
|
||||
this.updatePreference('tts', 'openai_api_url', defaultUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure API keys are initialized if not already set
|
||||
if (!this.getPreference('tts', 'elevenlabs_api_key')) {
|
||||
this.updatePreference('tts', 'elevenlabs_api_key', '');
|
||||
}
|
||||
|
||||
if (!this.getPreference('tts', 'openai_api_key')) {
|
||||
this.updatePreference('tts', 'openai_api_key', '');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up the initial state of the Options UI
|
||||
* @returns {Promise<boolean>} - Promise resolves when setup is complete
|
||||
*/
|
||||
async setupInitialState() {
|
||||
try {
|
||||
console.log('Options UI: Setting up initial state');
|
||||
|
||||
// Add event listener for toggling options UI
|
||||
document.addEventListener('ui:options:toggle', () => this.toggle());
|
||||
|
||||
// Set up key bindings
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && this.modal && this.modal.style.display === 'flex') {
|
||||
this.saveCurrentSettings();
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate TTS systems
|
||||
await this.populateTtsSystems();
|
||||
|
||||
// Populate languages
|
||||
await this.populateLanguages();
|
||||
|
||||
// Populate voices based on current TTS system
|
||||
await this.populateVoices();
|
||||
|
||||
// Load current preferences
|
||||
this.loadPreferences();
|
||||
|
||||
// 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 language change listener
|
||||
document.addEventListener('locale:changed', async () => {
|
||||
this.updateUIText();
|
||||
await this.populateLanguages();
|
||||
});
|
||||
|
||||
// Register event listeners for TTS availability and voiceId changes
|
||||
document.addEventListener('tts:engine:change', async (event) => {
|
||||
console.log('Options UI: Received TTS engine change event:', event.detail);
|
||||
await this.populateVoices();
|
||||
this.updateApiSettingsVisibility(this.elements.ttsSystem.value);
|
||||
});
|
||||
|
||||
console.log('Options UI: Initial state setup complete');
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Options UI: Error setting up initial state', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create the singleton instance
|
||||
const OptionsUI = new OptionsUIModule();
|
||||
|
||||
// Register with the module registry
|
||||
moduleRegistry.register(OptionsUI);
|
||||
|
||||
// Export the module
|
||||
export { OptionsUI };
|
||||
Reference in New Issue
Block a user