diff --git a/front/public/embed.html b/front/public/embed.html
index a43ed6b40..fc789be81 100644
--- a/front/public/embed.html
+++ b/front/public/embed.html
@@ -163,7 +163,7 @@
// NOTE: Fetch tracks only if there is no error
if (error.value === false) {
- fetchTracks().then(() => updateMediaSessionMetadata()).catch(err => {
+ fetchTracks().catch(err => {
console.error(err)
error.value = `An unknown error occurred while loading ${type} data.`
})
@@ -189,10 +189,8 @@
const Logo = () => ({ $template: '#logo-template' })
// Media Session
- const updateMediaSessionMetadata = () => {
- const { current } = player
-
- if (tracks[current] && 'mediaSession' in navigator) {
+ const initializeMediaSession = () => {
+ if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', () => {
player.playing = true
audio.element.play()
@@ -203,23 +201,41 @@
audio.element.pause()
})
- navigator.mediaSession.setActionHandler('seekbackward', () => player.seekTime({ target: { value: player.seek - 5 } }))
- navigator.mediaSession.setActionHandler('seekforward', () => player.seekTime({ target: { value: player.seek + 5 } }))
+ navigator.mediaSession.setActionHandler('seekbackward', () => player.seekTime({
+ target: { value: (audio.element.currentTime - 5) / audio.element.duration * 100 }
+ }))
+
+ navigator.mediaSession.setActionHandler('seekforward', () => player.seekTime({
+ target: { value: (audio.element.currentTime + 5) / audio.element.duration * 100 }
+ }))
navigator.mediaSession.setActionHandler('previoustrack', () => player.prev())
navigator.mediaSession.setActionHandler('nexttrack', () => player.next())
+ }
+ }
- navigator.mediaSession.metadata = new MediaMetadata({
+ const updateMediaSessionMetadata = () => {
+ const { current } = player
+
+ if (tracks[current] && 'mediaSession' in navigator) {
+ const metadata = new MediaMetadata({
title: tracks[current].title,
- album: tracks[current].album.title,
- artist: tracks[current].artist.name,
+ album: tracks[current]?.album.title ?? '',
+ artist: tracks[current]?.artist.name ?? '',
artwork: [
{ src: tracks[current]?.cover ?? cover.value, sizes: '96x96', type: 'image/png' },
{ src: tracks[current]?.cover ?? cover.value, sizes: '128x128', type: 'image/png' },
{ src: tracks[current]?.cover ?? cover.value, sizes: '192x192', type: 'image/png' },
{ src: tracks[current]?.cover ?? cover.value, sizes: '256x256', type: 'image/png' },
+ { src: tracks[current]?.cover ?? cover.value, sizes: '384x384', type: 'image/png' },
+ { src: tracks[current]?.cover ?? cover.value, sizes: '512x512', type: 'image/png' }
]
})
+
+ console.log(metadata)
+ requestAnimationFrame(() => {
+ navigator.mediaSession.metadata = metadata
+ })
}
}
@@ -240,6 +256,7 @@
audio.element.load()
if (wasPlaying) audio.element.play()
+
updateMediaSessionMetadata()
},
@@ -255,7 +272,7 @@
if (!audio.element) return
const seek = audio.element.duration * event.target.value / 100
- audio.element.currentTime = isNaN(seek) ? 0 : seek
+ audio.element.currentTime = isNaN(seek) ? 0 : Math.min(seek, audio.element.duration - 1)
},
togglePlay () {
@@ -263,6 +280,8 @@
if (this.playing) audio.element.play()
else audio.element.pause()
+
+ updateMediaSessionMetadata()
}
})
@@ -293,7 +312,7 @@
volume: -1
})
- const watchAudio = (element, current, volume) => {
+ const watchAudio = (element, volume) => {
if (audio.element !== element) {
audio.element = element
@@ -327,6 +346,7 @@
error,
// Playback
+ initializeMediaSession,
watchAudio,
player,
volume,
@@ -461,7 +481,7 @@
-