Settings features: **Quality Preferences:** - Default quality preset (High Quality, Balanced, Small File, Web Optimized) **Behavior Preferences:** - Auto-start conversion when files are selected - Show/hide conversion history - Clear history on reset **Default Output Formats:** - Set default format for video conversions (MP4, WebM, AVI, MOV) - Set default format for audio conversions (MP3, WAV, OGG, AAC) - Set default format for image conversions (WebP, PNG, JPG, GIF) Implementation: - Created settings storage system with localStorage - SettingsModal component with categorized settings - Settings button in app header - Real-time settings updates across components - Custom event system for settings synchronization - Reset to defaults functionality - Professional UI with checkboxes and selects User experience: - Settings persist across sessions - Changes apply immediately - Clear categorization (Quality, Behavior, Formats) - Easy reset to defaults with confirmation - Conditional history display based on settings - Clean modal interface Technical features: - Type-safe settings interface - Event-driven updates - Graceful fallback to defaults - Error handling for localStorage - Platform-aware functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
export interface UserSettings {
|
|
// Quality preferences
|
|
defaultQualityPreset: 'high-quality' | 'balanced' | 'small-file' | 'web-optimized';
|
|
|
|
// Behavior preferences
|
|
autoStartConversion: boolean;
|
|
showConversionHistory: boolean;
|
|
clearHistoryOnReset: boolean;
|
|
|
|
// Default formats (optional)
|
|
defaultVideoFormat?: string;
|
|
defaultAudioFormat?: string;
|
|
defaultImageFormat?: string;
|
|
}
|
|
|
|
const SETTINGS_KEY = 'convert-ui-settings';
|
|
|
|
const DEFAULT_SETTINGS: UserSettings = {
|
|
defaultQualityPreset: 'balanced',
|
|
autoStartConversion: false,
|
|
showConversionHistory: true,
|
|
clearHistoryOnReset: false,
|
|
};
|
|
|
|
/**
|
|
* Get user settings from localStorage
|
|
*/
|
|
export function getSettings(): UserSettings {
|
|
if (typeof window === 'undefined') return DEFAULT_SETTINGS;
|
|
|
|
try {
|
|
const stored = localStorage.getItem(SETTINGS_KEY);
|
|
if (!stored) return DEFAULT_SETTINGS;
|
|
|
|
const settings = JSON.parse(stored);
|
|
return { ...DEFAULT_SETTINGS, ...settings };
|
|
} catch (error) {
|
|
console.error('Failed to load settings:', error);
|
|
return DEFAULT_SETTINGS;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Save user settings to localStorage
|
|
*/
|
|
export function saveSettings(settings: Partial<UserSettings>): void {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
try {
|
|
const current = getSettings();
|
|
const updated = { ...current, ...settings };
|
|
localStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
|
|
|
|
// Dispatch custom event for settings updates
|
|
window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: updated }));
|
|
} catch (error) {
|
|
console.error('Failed to save settings:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reset settings to defaults
|
|
*/
|
|
export function resetSettings(): void {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
try {
|
|
localStorage.setItem(SETTINGS_KEY, JSON.stringify(DEFAULT_SETTINGS));
|
|
window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: DEFAULT_SETTINGS }));
|
|
} catch (error) {
|
|
console.error('Failed to reset settings:', error);
|
|
}
|
|
}
|