Update snapweb to v0.5.0

server/etc/snapweb/index.html

@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#455A64">
   <meta name="author" content="Johannes M. Pohl">
-  <meta name="version" content="0.4.0">
+  <meta name="version" content="0.5.0">
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link rel="manifest" href="manifest.json">

server/etc/snapweb/snapcontrol.js

@@ -361,23 +361,25 @@ class SnapControl {
         console.log('updateMetadata: ', metadata);
         // https://github.com/Microsoft/TypeScript/issues/19473
         let title = metadata.title || "Unknown Title";
-        let artist = (metadata.artist != undefined) ? metadata.artist[0] : "Unknown Artist";
+        let artist = (metadata.artist != undefined) ? metadata.artist.join(', ') : "Unknown Artist";
         let album = metadata.album || "";
-        let artwork = metadata.artUrl || 'snapcast-512.png';
+        let artwork = [{ src: 'snapcast-512.png', sizes: '512x512', type: 'image/png' }];
+        if (metadata.artUrl != undefined) {
+            artwork = [
+                { src: metadata.artUrl, sizes: '96x96', type: 'image/png' },
+                { src: metadata.artUrl, sizes: '128x128', type: 'image/png' },
+                { src: metadata.artUrl, sizes: '192x192', type: 'image/png' },
+                { src: metadata.artUrl, sizes: '256x256', type: 'image/png' },
+                { src: metadata.artUrl, sizes: '384x384', type: 'image/png' },
+                { src: metadata.artUrl, sizes: '512x512', type: 'image/png' },
+            ];
+        } // || 'snapcast-512.png';
         console.log('Metadata title: ' + title + ', artist: ' + artist + ', album: ' + album + ", artwork: " + artwork);
         navigator.mediaSession.metadata = new MediaMetadata({
             title: title,
             artist: artist,
             album: album,
-            artwork: [
+            artwork: artwork
-                // { src: artwork, sizes: '250x250', type: 'image/jpeg' },
-                // 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
-                { src: artwork, sizes: '128x128', type: 'image/png' },
-                { src: artwork, sizes: '192x192', type: 'image/png' },
-                { src: artwork, sizes: '256x256', type: 'image/png' },
-                { src: artwork, sizes: '384x384', type: 'image/png' },
-                { src: artwork, sizes: '512x512', type: 'image/png' },
-            ]
         });
         // mediaSession.setActionHandler('seekbackward', function () { });
         // mediaSession.setActionHandler('seekforward', function () { });
@@ -537,7 +539,7 @@ class SnapControl {
     status_req_id;
 }
 let snapcontrol;
-let snapstream = null;
+let snapstream = new SnapStream(config.baseUrl);
 let hide_offline = true;
 let autoplay_done = false;
 let audio = document.createElement('audio');
@@ -549,7 +551,7 @@ function show() {
     const versionElem = document.getElementsByTagName("meta").namedItem("version");
     console.log("Snapweb version " + (versionElem ? versionElem.content : "null"));
     let play_img;
-    if (snapstream) {
+    if (isPlaying()) {
         play_img = 'stop.png';
     }
     else {
@@ -700,7 +702,12 @@ function show() {
     document.getElementById('show').innerHTML = content;
     let playElem = document.getElementById('play-button');
     playElem.onclick = () => {
-        play();
+        if (isPlaying()) {
+            stop();
+        }
+        else {
+            play();
+        }
     };
     for (let group of snapcontrol.server.groups) {
         if (group.clients.length > 1) {
@@ -773,24 +780,24 @@ function setVolume(id, mute) {
     if (needs_update)
         show();
 }
+function isPlaying() {
+    return document.getElementsByTagName("audio").length > 0;
+}
+function stop() {
+    snapstream.stop();
+    audio.pause();
+    audio.src = "";
+    document.body.removeChild(audio);
+}
 function play() {
-    if (snapstream) {
+    // User interacted with the page. Let's play audio...
-        snapstream.stop();
+    snapstream.resume();
-        snapstream = null;
+    document.body.appendChild(audio);
-        audio.pause();
+    audio.src = "10-seconds-of-silence.mp3";
-        audio.src = '';
+    audio.loop = true;
-        document.body.removeChild(audio);
+    audio.play().then(() => {
-    }
+        snapcontrol.updateProperties(snapcontrol.getMyStreamId());
-    else {
+    });
-        snapstream = new SnapStream(config.baseUrl);
-        // User interacted with the page. Let's play audio...
-        document.body.appendChild(audio);
-        audio.src = "10-seconds-of-silence.mp3";
-        audio.loop = true;
-        audio.play().then(() => {
-            snapcontrol.updateProperties(snapcontrol.getMyStreamId());
-        });
-    }
 }
 function setMuteGroup(id, mute) {
     snapcontrol.muteGroup(id, mute);

server/etc/snapweb/snapstream.js

@@ -712,6 +712,9 @@ class SnapStream {
             alert("Sorry, but the Web Audio API is not supported by your browser");
         }
     }
+    resume() {
+        this.ctx.resume();
+    }
     setupAudioContext() {
         let AudioContext = window.AudioContext // Default
             || window.webkitAudioContext // Safari and old versions of Chrome