fix: render audio blocks in lessons - #2718

Fixes #2717

Problem

An upload block whose file_type is audio (mp3/wav/ogg) renders nothing in a lesson. Image, PDF and video blocks in the same lesson render fine, so the fault is confined to the audio path.

There are two separate causes, which is why the symptom changed after fixing only the first.

1. translationPlugin is not installed on the AudioBlock app

frontend/src/utils/upload.js mounts a fresh Vue app per block. The video and PDF branches call app.use(translationPlugin); the audio branch does not:

// video: registerDirectives(app); app.use(translationPlugin); app.mount(...)
// audio: registerDirectives(app);                             app.mount(...)   <-- missing
// pdf:   registerDirectives(app); app.use(translationPlugin); app.mount(...)

translationPlugin assigns __ to app.config.globalProperties, which is per-app. AudioBlock.vue's template calls __('Play'), __('Pause'), __('Mute') and __('Seek'), so on this app __ is undefined and the render throws — the block mounts nothing at all. PdfBlock never calls __, and VideoBlock calls it but already gets the plugin, which is why only audio breaks.

2. document.querySelector('audio') returns null during onMounted

onMounted(() => {
	setTimeout(() => {
		audio.value = document.querySelector('audio')
		audio.value.onloadedmetadata = () => { ... }   // throws
		...
	}, 0)
})

EditorJS's compose() calls the tool's render() and mounts the returned wrapper before inserting it into the document, so the wrapper is still detached here and the query matches nothing:

AudioBlock.vue:71 Uncaught TypeError: Cannot set properties of null (setting 'onloadedmetadata')
    mount → renderFile → render → compose (editorjs.mjs:1789)

The setTimeout(…, 0) looks like it was meant to cover exactly this and does not wait long enough.

The same call carries a second, latent bug: it returns the first <audio> in the document rather than this component's own, so a lesson containing several audio blocks gets several player UIs all driving one element.

Fix

• Install translationPlugin on the AudioBlock app, matching the video and PDF branches.
• Bind the media element through a template ref (ref="audioEl") instead of querying the document. This is correct regardless of DOM attachment order and scopes each player to its own element.
• Guard togglePlay, toggleMute, changeCurrentTime and the isPlaying watcher, which all dereference audio.value unconditionally.

Testing

Verified on frappe 15.120.1 / lms 2.62.1 against a real course:

• Audio blocks render and play; duration and the seek slider populate correctly.
• A lesson with three audio blocks gives three independent players (previously they would all have driven the first element).
• Image, PDF, paragraph, list and header blocks are unaffected.
• Reproduced the original failure in a clean incognito profile first, ruling out caching and service-worker staleness.