add further details in readme, expand clickable area of mute icon

README.md

@@ -3,3 +3,17 @@
 An audiovisualisation of the Max Planck Digital Library services (minervamessenger, keeper, bloxberg). Events of these
 services are presented as fading dots accompanied by a relaxing soundscape. Dot sizes and tone pitches vary based on event
 information. Based on [Hatnote](https://github.com/hatnote/listen-to-wikipedia).
+
+## Build
+
+For development run `npm run build-dev`. Staging: `npm run build-staging`. Production: `npm run build-prod`.
+
+Then run `npm run start` to start the web server.
+
+Now you can open the website on http://localhost:3000.
+
+## Deployment
+See on Keeper.
+
+## Additional notes
+Further documentation and possible missing files can be found on Keeper.
\ No newline at end of file

web/.env.defaults

 # the following line will be replaced by a script ("update_version.sh"). Do not change the line. If you do, make sure to change the script. You also need to copy this number manually to the backend code if you want to trigger a notification for the user when the user is running the application but has not updated the browser, or if the user has to clear the browser cache.
-VERSION=20240116140759
+VERSION=20240226105052
\ No newline at end of file

web/src/canvas/canvas.ts

@@ -97,16 +97,16 @@ export class Canvas {
             this.carousel = new Carousel(this)
         }
 
-        // needs to be here because otherwise the transition animation layer of the carousel would lay above the mute icon
-        // and block the cursor event of the mute icon
-        this.mute_icon = new MuteIcon(this)
-
         // needs to be added after the carousel transition because the transition layer spans over the entire screen
         // which captures mouse clicks that otherwise would not arrive at the navigation buttons
         if (this.isMobileScreen && !this.settings.embedded_mode) {
             this.navigation = new Navigation(this)
         }
 
+        // needs to be here because otherwise the transition animation and mobile navigation layer of the carousel would lay above the mute icon
+        // and block the cursor event of the mute icon
+        this.mute_icon = new MuteIcon(this)
+
         this.renderCurrentTheme();
 
         if(!settings.kiosk_mode && !settings.audio_mute){

web/src/canvas/mute_icon.ts

@@ -7,16 +7,19 @@ export class MuteIcon{
     private readonly image: Selection<SVGImageElement, unknown, HTMLElement, any>;
     private readonly text: Selection<SVGTextElement, unknown, HTMLElement, any>;
     private readonly line1: Selection<SVGTSpanElement, unknown, HTMLElement, any>;
+    private readonly background: Selection<SVGRectElement, unknown, HTMLElement, any>;
     private readonly image_width = 100;
     private readonly text_color = '#fff';
     private readonly canvas: Canvas;
 
+    // consists not only of the icon but also spans a transparent clickable container above everything
     constructor(canvas: Canvas) {
         this.canvas = canvas
         this.root = canvas.appendSVGElement('g')
             .attr('id', 'qr_code')
             .attr('opacity', 0)
             .attr('cursor', 'auto')
+            .attr('pointer-events','none')
             .attr('id', 'mute_icon')
         this.image = this.root.append('image')
             .attr('href', QrCodeMinerva)
@@ -31,23 +34,32 @@ export class MuteIcon{
             .attr('text-anchor', 'middle')
         this.line1.text('Click here to unmute')
 
+        // needs to be added last so the click on this layer is not blocked by other elements
+        this.background = this.root.append('rect')
+            .attr('opacity', 0)
+            .attr('width', this.canvas.width)
+            .attr('height', this.canvas.height)
+            .attr('id', 'mute_icon_background')
+
         this.setPosition()
 
-        document.getElementById('mute_icon')?.addEventListener("click", (_) => {
+        document.getElementById('mute_icon_background')?.addEventListener("click", (_) => {
             this.hide();
         });
     }
 
     public windowUpdate(){
         this.setPosition();
+        this.background.attr('width', this.canvas.width)
+        this.background.attr('height', this.canvas.height)
     }
 
     public show(){
-        this.root.attr('opacity', 0.7).attr('cursor', 'pointer')
+        this.root.attr('opacity', 0.7).attr('cursor', 'pointer').attr('pointer-events','visiblePainted')
     }
 
     public hide(){
-        this.root.attr('opacity', 0).attr('cursor', 'auto')
+        this.root.attr('opacity', 0).attr('cursor', 'auto').attr('pointer-events','none')
     }
 
     private setPosition(){