From b0238d934e008cd6e97dfb5ed1193527127df749 Mon Sep 17 00:00:00 2001 From: Martin Atukunda Date: Wed, 9 Apr 2025 09:36:36 +0300 Subject: [PATCH 1/4] feat: plugins/web: use media session api for notifications. The Media Session API provides a way to customize media notifications. This commit 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 --- beetsplug/web/static/beets.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/beetsplug/web/static/beets.js b/beetsplug/web/static/beets.js index 97af70110..4167330ad 100644 --- a/beetsplug/web/static/beets.js +++ b/beetsplug/web/static/beets.js @@ -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) { + album_id = item.get("album_id"); + 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); }, From 17147058755b518bd6506a5e018ae8af1bbf40bf Mon Sep 17 00:00:00 2001 From: Martin Atukunda Date: Wed, 9 Apr 2025 09:48:46 +0300 Subject: [PATCH 2/4] doc: plugin/web: now shows notifications using Media Session API --- docs/changelog.rst | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/changelog.rst b/docs/changelog.rst index 0f84f2473..31da975e2 100644 --- a/docs/changelog.rst +++ b/docs/changelog.rst @@ -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: From d1d58569e1929e8e2b194bb21044660ab7a77f73 Mon Sep 17 00:00:00 2001 From: Martin Atukunda Date: Wed, 16 Apr 2025 20:50:37 +0300 Subject: [PATCH 3/4] Update beetsplug/web/static/beets.js don't pollute global scope with album_id Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- beetsplug/web/static/beets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beetsplug/web/static/beets.js b/beetsplug/web/static/beets.js index 4167330ad..46bf71bd3 100644 --- a/beetsplug/web/static/beets.js +++ b/beetsplug/web/static/beets.js @@ -279,7 +279,7 @@ var AppView = Backbone.View.extend({ updateMediaSession: function (item) { if ("mediaSession" in navigator) { - album_id = item.get("album_id"); + const album_id = item.get("album_id"); album_art_url = "album/" + album_id + "/art"; navigator.mediaSession.metadata = new MediaMetadata({ title: item.get("title"), From a75d2b4aa63be0c97a931bfba1b518b2ba9ebe2e Mon Sep 17 00:00:00 2001 From: Martin Atukunda Date: Wed, 16 Apr 2025 20:50:48 +0300 Subject: [PATCH 4/4] Update beetsplug/web/static/beets.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- beetsplug/web/static/beets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beetsplug/web/static/beets.js b/beetsplug/web/static/beets.js index 46bf71bd3..eace4d27d 100644 --- a/beetsplug/web/static/beets.js +++ b/beetsplug/web/static/beets.js @@ -280,7 +280,7 @@ var AppView = Backbone.View.extend({ updateMediaSession: function (item) { if ("mediaSession" in navigator) { const album_id = item.get("album_id"); - album_art_url = "album/" + album_id + "/art"; + const album_art_url = "album/" + album_id + "/art"; navigator.mediaSession.metadata = new MediaMetadata({ title: item.get("title"), artist: item.get("artist"),