add/remove muted attribute (#1283)

Unless the attribute is actually on the element, the browser doesn't recognise it as muted and won't autoplay.
Also added missing volumechange handler to audio.

src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts

@@ -105,9 +105,10 @@ export class MediaElementCenterPanel extends CenterPanel<
       }
     });
 
-    this.extensionHost.subscribe(IIIFEvents.SET_MUTED, (muted) => {
+    this.extensionHost.subscribe(IIIFEvents.SET_MUTED, (muted: boolean) => {
       if (that.player) {
         that.player.setMuted(muted);
+        that.updateMutedAttribute(muted);
       }
     });
 
@@ -127,6 +128,14 @@ export class MediaElementCenterPanel extends CenterPanel<
     this.title = this.extension.helper.getLabel();
   }
 
+  updateMutedAttribute(muted: boolean) {
+    if (muted) {
+      this.$media.attr("muted", "");
+    } else {
+      this.$media.removeAttr("muted");
+    }
+  }
+
   async openMedia(resources: IExternalResource[]) {
     const that = this;
 
@@ -278,10 +287,13 @@ export class MediaElementCenterPanel extends CenterPanel<
 
             if (that.muted === true && muted === false) {
               that.muted = false;
+
               that.extensionHost.fire(
                 MediaElementExtensionEvents.MEDIA_UNMUTED
               );
             }
+
+            that.updateMutedAttribute(that.muted);
           });
         },
       });
@@ -351,6 +363,24 @@ export class MediaElementCenterPanel extends CenterPanel<
               Math.floor(mediaElement.currentTime)
             );
           });
+
+          mediaElement.addEventListener("volumechange", (volume) => {
+            const muted: boolean = volume.detail.target.getMuted();
+
+            if (that.muted === false && muted === true) {
+              that.muted = true;
+              that.extensionHost.fire(MediaElementExtensionEvents.MEDIA_MUTED);
+            }
+
+            if (that.muted === true && muted === false) {
+              that.muted = false;
+              that.extensionHost.fire(
+                MediaElementExtensionEvents.MEDIA_UNMUTED
+              );
+            }
+
+            that.updateMutedAttribute(that.muted);
+          });
         },
       });
     }