save auto-launch option, disable shortcuts in settings

desktop/electron/src/ipc.ts

@@ -3,7 +3,7 @@ import electronIsDev from "electron-is-dev";
 import { createAndShowNotification } from "./notification";
 import { Server } from "./preload-local-app/types";
 import settings, { SettingsData } from "./settings";
-import { loadShortcuts, saveShortcut } from "./shortcuts";
+import { loadShortcuts, saveShortcut, setShortcutsEnabled } from "./shortcuts";
 import { getWindow, hideAppView, showAppView } from "./window";
 
 export function emitMuteToggle() {
@@ -92,10 +92,14 @@ export default () => {
         return true;
     });
 
-    ipcMain.handle("local-app:reloadShortcuts", (event, shortcut, key) => loadShortcuts());
+    ipcMain.handle("local-app:reloadShortcuts", (event) => loadShortcuts());
 
     ipcMain.handle("local-app:getSettings", (event) => settings.get() || {});
-    ipcMain.handle("local-app:saveSetting", <T extends keyof SettingsData>(event, key: T, value: SettingsData[T]) =>
+    ipcMain.handle(
-        settings.set(key, value)
+        "local-app:saveSetting",
+        <T extends keyof SettingsData>(event: Electron.IpcMainInvokeEvent, key: T, value: SettingsData[T]) =>
+            settings.set(key, value)
     );
+
+    ipcMain.handle("local-app:setShortcutsEnabled", (event, enabled: boolean) => setShortcutsEnabled(enabled));
 };

desktop/electron/src/preload-local-app/preload.ts

@@ -12,7 +12,8 @@ const api: WorkAdventureLocalAppApi = {
     removeServer: (serverId) => ipcRenderer.invoke("local-app:removeServer", serverId),
     reloadShortcuts: () => ipcRenderer.invoke("local-app:reloadShortcuts"),
     getSettings: () => ipcRenderer.invoke("local-app:getSettings"),
-    saveSetting: (key, value) => ipcRenderer.invoke("local-app:setSetting", key, value),
+    saveSetting: (key, value) => ipcRenderer.invoke("local-app:saveSetting", key, value),
+    setShortcutsEnabled: (enabled) => ipcRenderer.invoke("local-app:setShortcutsEnabled", enabled),
 };
 
 contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api);

desktop/electron/src/preload-local-app/types.ts

@@ -20,4 +20,5 @@ export type WorkAdventureLocalAppApi = {
     reloadShortcuts: () => Promise<void>;
     getSettings: () => Promise<SettingsData>;
     saveSetting: <T extends keyof SettingsData>(key: T, value: SettingsData[T]) => Promise<void>;
+    setShortcutsEnabled: (enabled: boolean) => Promise<void>;
 };

desktop/electron/src/shortcuts.ts

@@ -1,6 +1,15 @@
 import { globalShortcut } from "electron";
 import settings, { SettingsData } from "./settings";
 import { emitCameraToggle, emitMuteToggle } from "./ipc";
+import { createAndShowNotification } from "./notification";
+
+export function setShortcutsEnabled(enabled: boolean) {
+    if (enabled) {
+        loadShortcuts();
+    } else {
+        globalShortcut.unregisterAll();
+    }
+}
 
 export function loadShortcuts() {
     globalShortcut.unregisterAll();
@@ -11,12 +20,14 @@ export function loadShortcuts() {
     if (shortcuts?.mute_toggle && shortcuts.mute_toggle.length > 0) {
         globalShortcut.register(shortcuts.mute_toggle, () => {
             emitMuteToggle();
+            createAndShowNotification({ body: "Toggled mute" }); // TODO
         });
     }
 
     if (shortcuts?.camera_toggle && shortcuts.camera_toggle.length > 0) {
         globalShortcut.register(shortcuts.camera_toggle, () => {
             emitCameraToggle();
+            createAndShowNotification({ body: "Toggled camera" }); // TODO
         });
     }
 }

desktop/local-app/src/lib/ToggleSwitch.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
+
     export let id: string;
     export let value: boolean;
     export let title: string = null;
@@ -7,7 +10,15 @@
 <div class="flex w-full my-2">
     <label for={id} class="flex items-center cursor-pointer">
         <div class="relative">
-            <input {id} type="checkbox" class="sr-only" checked={value} />
+            <input
+                {id}
+                type="checkbox"
+                class="sr-only"
+                checked={value}
+                on:change={(e) => {
+                    dispatch("change", e.target.checked);
+                }}
+            />
             <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
             <div class="dot absolute w-6 h-6 bg-gray-500 rounded-full shadow -left-1 -top-1 transition" />
         </div>

desktop/local-app/src/main.ts

@@ -1,5 +1,5 @@
 import "virtual:windi.css";
-import App from "./App.svelte";
+import App from "~/App.svelte";
 
 const app = new App({
     target: document.getElementById("app"),

desktop/local-app/src/views/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onMount, onDestroy } from "svelte";
     import { writable, get } from "svelte/store";
 
     import ToggleSwitch from "~/lib/ToggleSwitch.svelte";
@@ -7,35 +7,35 @@
     import KeyRecord from "~/lib/KeyRecord.svelte";
     import { api, SettingsData } from "../lib/ipc";
 
-    type ShortCuts = Record<"mute_toggle" | "camera_toggle", string>;
+    const settings = writable<SettingsData | undefined>();
-
-    const shortCuts = writable<ShortCuts>({
-        mute_toggle: "",
-                camera_toggle: "",
-    });
 
     onMount(async () => {
-        const newShortCuts = await api.getSettings()?.["shortcuts"];
+        await api.setShortcutsEnabled(false);
-        shortCuts.set({
+        $settings = await api.getSettings();
-            ...get(shortCuts),
-            ...newShortCuts,
-        });
     });
 
-    async function saveShortcut(key: keyof SettingsData['shortcuts'], value: string) {
+    onDestroy(async () => {
-        shortCuts.update((shortCuts) => ({
+        await api.setShortcutsEnabled(true);
-            ...shortCuts,
+    });
-            [key]: value,
+
-        }));
+    async function saveShortcut(key: keyof SettingsData["shortcuts"], value: string) {
-        await api.saveSetting('shortcuts', get(shortCuts));
+        const shortcuts = get(settings)['shortcuts'] || { "camera_toggle": "", "mute_toggle": "" };
+        shortcuts[key] = value;
+        settings.update((s) => ({ ...s, shortcuts }));
+        await api.saveSetting("shortcuts", shortcuts);
+    }
+
+    async function saveAutoLaunch(auto_launch_enabled: boolean) {
+        settings.update((s) => ({ ...s, auto_launch_enabled }));
+        await api.saveSetting("auto_launch_enabled", auto_launch_enabled);
     }
 </script>
 
 <div class="flex flex-col w-full h-full justify-center items-center">
     <h1 class="text-gray-200 text-2xl mb-6">Settings</h1>
 
-    <div class="flex flex-col justify-start max-w-152">
+    <div class="flex flex-col justify-start max-w-148">
-        {#if $shortCuts}
+        {#if $settings}
             <InputField
                 id="toggle-camera"
                 title="Toggle Mute"
@@ -43,7 +43,7 @@
             >
                 <KeyRecord
                     id="toggle-mute"
-                    value={$shortCuts.mute_toggle}
+                    value={$settings.shortcuts.mute_toggle}
                     on:change={(e) => saveShortcut("mute_toggle", e.detail)}
                 />
             </InputField>
@@ -55,19 +55,21 @@
             >
                 <KeyRecord
                     id="toggle-camera"
-                    value={$shortCuts.camera_toggle}
+                    value={$settings.shortcuts.camera_toggle}
                     on:change={(e) => saveShortcut("camera_toggle", e.detail)}
                 />
             </InputField>
-        {/if}
 
-        <InputField id="toggle-autostart" title="Toggle autostart">
+            <InputField id="toggle-autostart" title="Toggle autostart">
-            <ToggleSwitch
+                <ToggleSwitch
                 id="toggle-autostart"
-                value={true}
+                value={$settings.auto_launch_enabled}
                 title="Autostart WorkAdventure after your PC started"
-                on:change={(e) => {}}
+                on:change={(e) => saveAutoLaunch(e.detail)}
-            />
+                />
-        </InputField>
+            </InputField>
+
+            <span class="mt-8 text-xs text-gray-200 max-w-128">Hint: Shortcuts are disabled while seeing this page</span>
+            {/if}
     </div>
 </div>