Fix audio property mismatch: Use 'name' instead of 'filename'

Critical property mismatch fix:

Root Cause:
- Audio objects stored in customAudio have 'name' property (from desktop-file-manager.js)
- But UI templates and functions were looking for 'filename' property
- This caused audio files to never be found for deletion or enable/disable

Fixed Components:

1. HTML Template (loadAudioCategory):
   - data-filename now uses audio.name instead of audio.filename
   - Display filename now uses audio.name
   - onchange handler now passes audio.name

2. Deletion Logic (deleteSelectedAudio):
   - Search logic now looks for audio.name === filename
   - Removed incorrect audio.filename references

3. Storage Operations:
   - removeAudioFromStorage now filters by audio.name
   - toggleAudioEnabled now finds files by audio.name

4. Consistency:
   - All audio operations now use consistent 'name' property
   - Matches the actual storage structure from import process

This fixes:
 Audio file deletion (files can now be found in storage)
 Enable/disable toggles (files can be located properly)
 Storage operations (consistent property references)
 UI display consistency (proper filename display)

Audio deletion should now work correctly.
This commit is contained in:
fritzsenpai 2025-09-25 21:41:11 -05:00
parent 663bc9c489
commit c2e5b572ec
1 changed files with 6 additions and 6 deletions

12
game.js
View File

@ -1989,15 +1989,15 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
const audioItems = audioFiles.map(audio => {
return `
<div class="audio-item" data-category="${category}" data-filename="${audio.filename}" onclick="game.toggleAudioSelection(this)">
<div class="audio-item" data-category="${category}" data-filename="${audio.name}" onclick="game.toggleAudioSelection(this)">
<div class="audio-icon" data-category="${category}"></div>
<div class="audio-title">${audio.title}</div>
<div class="audio-filename">${audio.filename}</div>
<div class="audio-filename">${audio.name}</div>
<div class="audio-controls">
<button class="audio-preview-btn" onclick="event.stopPropagation(); game.previewAudio('${audio.path}', '${audio.title}')">🎧 Preview</button>
<label class="audio-status" onclick="event.stopPropagation()">
<input type="checkbox" class="audio-checkbox" ${audio.enabled !== false ? 'checked' : ''}
onchange="game.toggleAudioEnabled('${category}', '${audio.filename}', this.checked)">
onchange="game.toggleAudioEnabled('${category}', '${audio.name}', this.checked)">
<span class="${audio.enabled !== false ? 'audio-enabled' : 'audio-disabled'}">
${audio.enabled !== false ? 'Enabled' : 'Disabled'}
</span>
@ -2076,7 +2076,7 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
const audioFile = customAudio[category].find(audio =>
(typeof audio === 'string' && audio.includes(filename)) ||
(typeof audio === 'object' && (audio.filename === filename || audio.name === filename))
(typeof audio === 'object' && (audio.name === filename))
);
console.log(`Found audio file:`, audioFile);
@ -2128,7 +2128,7 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
if (typeof audio === 'string') {
return !audio.includes(filename);
} else if (typeof audio === 'object') {
return audio.filename !== filename && audio.name !== filename;
return audio.name !== filename;
}
return true;
});
@ -2194,7 +2194,7 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
const customAudio = this.dataManager.get('customAudio') || { background: [], ambient: [], effects: [] };
if (customAudio[category]) {
const audioFile = customAudio[category].find(audio => audio.filename === filename);
const audioFile = customAudio[category].find(audio => audio.name === filename);
if (audioFile) {
audioFile.enabled = enabled;
this.dataManager.set('customAudio', customAudio);