diff --git a/src/lib/lexicon/components/EntryView.svelte b/src/lib/lexicon/components/EntryView.svelte index 274106681..317bff257 100644 --- a/src/lib/lexicon/components/EntryView.svelte +++ b/src/lib/lexicon/components/EntryView.svelte @@ -10,6 +10,12 @@ } from '$lib/data/stores/lexicon.svelte'; import type { SqlValue } from 'sql.js'; + const clips = import.meta.glob('./*', { + import: 'default', + eager: true, + base: '/src/gen-assets/clips' + }) as Record; + interface Props { wordIds: number[] | null; onSelectWord: (word: SelectedWord) => void; @@ -27,7 +33,6 @@ const dynamicQuery = wordIds.map(() => `id = ?`).join(' OR '); const dynamicParams = wordIds.map((id) => id); const results = db.exec(`SELECT xml FROM entries WHERE ${dynamicQuery}`, dynamicParams); - console.log('results:', results[0].values); return results[0].values; } catch (error) { @@ -42,6 +47,9 @@ const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlString, 'text/xml'); + // Collect audio elements to add at the end + let audioElements = ''; + const parseError = xmlDoc.querySelector('parsererror'); if (parseError) { console.error('XML parsing error:', parseError.textContent); @@ -89,6 +97,17 @@ output += `${linkText}`; } + } else if (node.tagName === 'audio-link' && node.hasAttribute('src')) { + // Handle audio-link tag - create audio element and clickable link + const audioFile = node.getAttribute('src'); + const src = clips[`./${audioFile}`] ?? 'clips/' + audioFile; + const audioId = 'audio-' + Math.random().toString(36).substr(2, 9); // Generate unique ID + + // Collect audio element to add at the very end + audioElements += ``; + + // Add just the inline clickable icon - no audio element here + output += ``; } else { output += `<${node.tagName}`; for (let attr of node.attributes) { @@ -123,7 +142,7 @@ return output; } - return processNode(xmlDoc.documentElement); + return processNode(xmlDoc.documentElement) + audioElements; } async function updateXmlData() { @@ -166,6 +185,17 @@ }); }); }); + + const audioButtons = document.querySelectorAll('.audio-link'); + audioButtons.forEach((button) => { + button.addEventListener('click', () => { + const audioId = button.getAttribute('data-audio-id'); + const audioElement = document.getElementById(audioId) as HTMLAudioElement; + if (audioElement) { + audioElement.play(); + } + }); + }); } function applyStyles() {