update help page

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 = 20240116135050
+const EXPECTED_FRONTEND_VERSION int64 = 20240116140759

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

web/src/help/help_page.ts

@@ -3,25 +3,27 @@ import {SettingsData} from "../configuration/hatnote_settings";
 
 export class HelpPage {
     private list: Selection<HTMLUListElement, unknown, HTMLElement, any>;
+    private baseUrl: string = 'hatnote.mpdl.mpg.de'
     constructor(settings: SettingsData) {
         let root = select("#app").append("div")
             .style('font-family', 'HatnoteVisNormal')
             .style('padding', '20px')
 
-        let heading = root.append("h1").html('Hatnoteapp help page')
-        let paragraph = root.append("p").html('Following url parameters are supported:')
+        root.append("h1").html('Hatnoteapp help page')
+        root.append("p").html('Following url parameters are supported:')
         this.list = root.append("ul")
-        this.createHelpListItem('mute', 'mutes sounds.', '.../hatnoteapp?<b>mute</b>', `${settings.audio_mute}`)
-        this.createHelpListItem('service=${option}', 'displays given service. Disables carousel. Options: keeper, minerva, bloxberg.', '.../hatnoteapp?<b>service=bloxberg</b>', `carousel mode enabled`)
-        this.createHelpListItem('carousel-time=${minerva},${keeper},${bloxberg}', 'modifies the carousel display time for individual services. All values must be given and are read in milliseconds.', '.../hatnoteapp?<b>carousel-time=20000,10000,14000</b>', `${settings.carousel_time[0]},${settings.carousel_time[1]},${settings.carousel_time[2]}`)
-        this.createHelpListItem('audio-protection=${time}', 'timeframe in which successive events will be muted. Time is read in milliseconds.', '.../hatnoteapp?<b>audio-protection=200</b>', `${settings.audioProtection}`)
-        this.createHelpListItem('circle-life=${time}', 'time an event circle is displayed. Time is read in milliseconds.', '.../hatnoteapp?<b>circle-life=20000</b>', `${settings.max_life}`)
-        this.createHelpListItem('circle-opacity=${opacity}', 'start opacity of an event circle [0.0,1.0].', '.../hatnoteapp?<b>circle-opacity=0.2</b>', `${settings.circle_start_opacity}`)
-        this.createHelpListItem('audio-overlap=${number}', 'number of audio that can be played at the same time.', '.../hatnoteapp?<b>audio-overlap=7</b>', `${settings.sound_overlap}`)
-        this.createHelpListItem('kiosk', 'enables kiosk mode. UI prompt suggesting to enable the audio will not be displayed. This mode is intended for installations.', '.../hatnoteapp?<b>kiosk</b>', `${settings.kiosk_mode}`)
-        this.createHelpListItem('debug', 'enables debug mode that will generate output in the javascript console.', '.../hatnoteapp?<b>debug</b>', `${settings.debug_mode}`)
-        this.createHelpListItem('help', 'shows help page.', ' Example: .../hatnoteapp?<b>help</b>', `${settings.help}`)
-        let paragraph2 = root.append("p").html('Url parameters can be combined with "<b>&</b>". Order does not matter. <u>Example</u>: ../hatnoteapp?mute<b>&</b>service=bloxberg')
+        this.createHelpListItem('mute', 'mutes sounds.', this.baseUrl+'?<b>mute</b>', `${settings.audio_mute}`)
+        this.createHelpListItem('service=${option}', 'displays given service. Disables carousel. Options: keeper, minerva, bloxberg.', this.baseUrl+'?<b>service=bloxberg</b>', `carousel mode enabled`)
+        this.createHelpListItem('carousel-time=${minerva},${keeper},${bloxberg}', 'modifies the carousel display time for individual services. All values must be given and are read in milliseconds.', this.baseUrl+'?<b>carousel-time=20000,10000,14000</b>', `${settings.carousel_time[0]},${settings.carousel_time[1]},${settings.carousel_time[2]}`)
+        this.createHelpListItem('audio-protection=${time}', 'timeframe in which successive events will be muted. Time is read in milliseconds.', this.baseUrl+'?<b>audio-protection=200</b>', `${settings.audioProtection}`)
+        this.createHelpListItem('circle-life=${time}', 'time an event circle is displayed. Time is read in milliseconds.', this.baseUrl+'?<b>circle-life=20000</b>', `${settings.max_life}`)
+        this.createHelpListItem('circle-opacity=${opacity}', 'start opacity of an event circle [0.0,1.0].', this.baseUrl+'?<b>circle-opacity=0.2</b>', `${settings.circle_start_opacity}`)
+        this.createHelpListItem('audio-overlap=${number}', 'number of audio that can be played at the same time.', this.baseUrl+'?<b>audio-overlap=7</b>', `${settings.sound_overlap}`)
+        this.createHelpListItem('kiosk', 'enables kiosk mode. The followings applies: UI prompt suggesting to enable the audio will not be displayed. This mode is intended for installations.', this.baseUrl+'?<b>kiosk</b>', `${settings.kiosk_mode}`)
+        this.createHelpListItem('embedded', 'enables embedded mode. The followings applies: UI prompt suggesting to enable the audio is replaced by a speaker icon. This mode is intended for integrations with iframe.', this.baseUrl+'?<b>embedded</b>', `${settings.embedded_mode}`)
+        this.createHelpListItem('debug', 'enables debug mode that will generate output in the javascript console.', this.baseUrl+'?<b>debug</b>', `${settings.debug_mode}`)
+        this.createHelpListItem('help', 'shows help page.', ` Example: ${this.baseUrl}?<b>help</b>`, `${settings.help}`)
+        root.append("p").html(`Url parameters can be combined with "<b>&</b>". Order does not matter. <u>Example</u>: ${this.baseUrl}?mute<b>&</b>service=bloxberg`)
 
         document.body.setAttribute("style", "overflow: auto")
     }