fix(media): loader before peer video/audio plays + accurate error (B3/B22)

Streaming a peer file connects over mesh/Tor before the first frame, so the
player sat blank. Add a loading state:
- PeerFiles video modal: spinner overlay ("Connecting to peer…") until the
  <video> fires playing/canplay; an error overlay on failure instead of a
  silent black box.
- useAudioPlayer: loading flag driven by loadstart/waiting vs canplay/playing;
  GlobalAudioPlayer shows a spinner in the transport button while connecting.
- Fix the misleading audio error "Could not play audio. File Browser may not be
  running." (wrong for peer content) → "Could not play this audio file. The peer
  may be offline…" (B22).

type-check clean; useAudioPlayer tests 10/10.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
archipelago
2026-06-16 05:45:17 -04:00
co-authored by Claude Opus 4.8
parent 921363542c
commit c481afc7d9
3 changed files with 63 additions and 8 deletions
+19 -1
View File
@@ -4,6 +4,7 @@ const audio = ref<HTMLAudioElement | null>(null)
const currentSrc = ref<string | null>(null)
const currentName = ref('')
const playing = ref(false)
const loading = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const error = ref<string | null>(null)
@@ -21,8 +22,22 @@ function init() {
duration.value = audio.value?.duration ?? 0
error.value = null
})
// Buffering / connecting over mesh|Tor → show a loader until it can play.
audio.value.addEventListener('loadstart', () => {
loading.value = true
})
audio.value.addEventListener('waiting', () => {
loading.value = true
})
audio.value.addEventListener('canplay', () => {
loading.value = false
})
audio.value.addEventListener('playing', () => {
loading.value = false
})
audio.value.addEventListener('ended', () => {
playing.value = false
loading.value = false
})
audio.value.addEventListener('pause', () => {
playing.value = false
@@ -33,7 +48,8 @@ function init() {
})
audio.value.addEventListener('error', () => {
playing.value = false
error.value = 'Could not play audio. File Browser may not be running.'
loading.value = false
error.value = 'Could not play this audio file. The peer may be offline, or the file may be unavailable.'
})
}
@@ -47,6 +63,7 @@ function play(src: string, name: string) {
}
if (currentSrc.value !== src) {
loading.value = true
audio.value!.src = src
currentSrc.value = src
currentName.value = name
@@ -87,6 +104,7 @@ export function useAudioPlayer() {
seek,
stop,
playing,
loading,
currentName,
currentTime,
duration,