feat: plugins/web: use media session api for notifications. (#5714)

The Media Session API provides a way to customize media notifications.
This PR has commits that, in summary, updates the metadata for the media
session whenever a new track (item) starts playing.

https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API
This commit is contained in:
Šarūnas Nejus 2025-05-18 17:21:18 +01:00 committed by GitHub
commit e88aa8a450
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 1 deletions

View file

@ -266,7 +266,9 @@ var AppView = Backbone.View.extend({
playItem: function(item) {
var url = 'item/' + item.get('id') + '/file';
$('#player audio').attr('src', url);
$('#player audio').get(0).play();
$('#player audio').get(0).play().then(() => {
this.updateMediaSession(item);
});
if (this.playingItem != null) {
this.playingItem.entryView.setPlaying(false);
@ -275,6 +277,26 @@ var AppView = Backbone.View.extend({
this.playingItem = item;
},
updateMediaSession: function (item) {
if ("mediaSession" in navigator) {
const album_id = item.get("album_id");
const album_art_url = "album/" + album_id + "/art";
navigator.mediaSession.metadata = new MediaMetadata({
title: item.get("title"),
artist: item.get("artist"),
album: item.get("album"),
artwork: [
{ src: album_art_url, sizes: "96x96" },
{ src: album_art_url, sizes: "128x128" },
{ src: album_art_url, sizes: "192x192" },
{ src: album_art_url, sizes: "256x256" },
{ src: album_art_url, sizes: "384x384" },
{ src: album_art_url, sizes: "512x512" },
],
});
}
},
audioPause: function() {
this.playingItem.entryView.setPlaying(false);
},

View file

@ -8,6 +8,9 @@ Unreleased
New features:
* :doc:`plugins/web`: Show notifications when a track plays. This uses the
Media Session API to customize media notifications.
Bug fixes:
For packagers: