add mute icon, add embedded mode

api/globals/globals.go

@@ -6,4 +6,4 @@ const VERSION string = "20231210154026"
 // This has to be replaced manually by the developer. The prupose of this is to show a notification on the frontend
 // if there is a new frontend version. This might be helpful if the program runs on a long term installation or
 // if the user has to clear the cache to get the newest frontend version
-const EXPECTED_FRONTEND_VERSION int64 = 20240115141327
+const EXPECTED_FRONTEND_VERSION int64 = 20240116135050

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=20240115141327
\ No newline at end of file
+VERSION=20240116135050
\ No newline at end of file

web/assets/images/volume_off_FILL1_wght400_GRAD0_opsz24.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="24" fill="#fff" viewBox="0 -960 960 960" width="24"><path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Z"/></svg>
\ No newline at end of file

web/src/canvas/canvas.ts

@@ -13,6 +13,7 @@ import {SettingsData} from "../configuration/hatnote_settings";
 import {HatnoteVisService} from "../service_event/model";
 import {Carousel} from "./carousel";
 import {Navigation} from "./navigation";
+import {MuteIcon} from "./mute_icon";
 
 export class Canvas {
     public readonly circles_layer: CirclesLayer;
@@ -24,6 +25,7 @@ export class Canvas {
     public readonly info_box_websocket: InfoBox;
     public readonly info_box_audio: InfoBox;
     public readonly info_box_legend: InfoBox;
+    public readonly mute_icon: MuteIcon;
     public readonly theme: Theme;
     public readonly settings: SettingsData;
     public readonly newCircleSubject: Subject<CircleData>
@@ -95,6 +97,10 @@ 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 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) {
@@ -104,7 +110,11 @@ export class Canvas {
         this.renderCurrentTheme();
 
         if(!settings.kiosk_mode && !settings.audio_mute){
-            this.info_box_audio.show(InfoboxType.audio_enable, true)
+            if(settings.embedded_mode){
+                this.mute_icon.show()
+            } else {
+                this.info_box_audio.show(InfoboxType.audio_enable, true)
+            }
         }
 
         window.onresize = (_) => this.windowUpdate();
@@ -158,5 +168,8 @@ export class Canvas {
 
         // update audio info box
         this.info_box_audio.windowUpdate()
+
+        // update mute icon
+        this.mute_icon.windowUpdate()
     }
 }
\ No newline at end of file

web/src/canvas/mute_icon.ts

+import {Selection} from "d3";
+import {Canvas} from "./canvas";
+import QrCodeMinerva from "../../assets/images/volume_off_FILL1_wght400_GRAD0_opsz24.svg";
+
+export class MuteIcon{
+    private readonly root: Selection<SVGGElement, unknown, HTMLElement, any>;
+    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 image_width = 100;
+    private readonly text_color = '#fff';
+    private readonly canvas: Canvas;
+
+    constructor(canvas: Canvas) {
+        this.canvas = canvas
+        this.root = canvas.appendSVGElement('g')
+            .attr('id', 'qr_code')
+            .attr('opacity', 0)
+            .attr('cursor', 'auto')
+            .attr('id', 'mute_icon')
+        this.image = this.root.append('image')
+            .attr('href', QrCodeMinerva)
+            .attr('width', this.image_width)
+        this.text = this.root.append('text')
+            .attr('text-anchor', 'middle')
+        this.line1 = this.text.append('tspan')
+            .text('line1')
+            .attr('font-family', 'HatnoteVisNormal')
+            .attr('font-size', '12px')
+            .attr('fill', this.text_color)
+            .attr('text-anchor', 'middle')
+        this.line1.text('Click here to unmute')
+
+        this.setPosition()
+
+        document.getElementById('mute_icon')?.addEventListener("click", (_) => {
+            this.hide();
+        });
+    }
+
+    public windowUpdate(){
+        this.setPosition();
+    }
+
+    public show(){
+        this.root.attr('opacity', 0.7).attr('cursor', 'pointer')
+    }
+
+    public hide(){
+        this.root.attr('opacity', 0).attr('cursor', 'auto')
+    }
+
+    private setPosition(){
+        this.image.attr('x', this.canvas.width/2 - this.image_width).attr('y', this.canvas.height/2 - this.image_width)
+        let text_x: number = this.canvas.width/2 - this.image_width/2;
+        this.text.attr('x', text_x).attr('y', (this.canvas.height/2 + 16))
+        this.line1.attr('x', text_x)
+    }
+}
\ No newline at end of file

web/src/configuration/hatnote_settings.ts

@@ -17,6 +17,7 @@ export class HatnoteSettings {
             max_life: 60000,
             circle_start_opacity: 0.75,
             kiosk_mode: false,
+            embedded_mode: false,
             debug_mode: false,
             carousel_mode: true,
             initialService: HatnoteVisService.Minerva,
@@ -143,6 +144,10 @@ export class HatnoteSettings {
             this._settings_data.kiosk_mode = true;
         }
 
+        if(url_search_parameters.has("embedded")){
+            this._settings_data.embedded_mode = true;
+        }
+
         let service_parameter = url_search_parameters.get("service")
         this._settings_data.carousel_mode = false;
         switch (service_parameter ) {
@@ -171,7 +176,8 @@ export interface SettingsData{
     sound_overlap: number,
     circle_start_opacity: number,
     max_life: number, // in ms
-    kiosk_mode: boolean,
+    kiosk_mode: boolean, // used for long running showcases of the website e.g. on a monitor in a hall
+    embedded_mode: boolean, // used for iframe integration
     debug_mode: boolean,
     carousel_mode: boolean,
     initialService: HatnoteVisService,