add sidebar

desktop/src/app/preload.ts

@@ -2,7 +2,7 @@ import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron";
 
 contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", {
   desktop: true,
-  notify: (txt: string) => ipcRenderer.send("notify", txt),
+  notify: (txt: string) => ipcRenderer.send("app:notify", txt),
   onMutedKeyPress: (callback: (event: IpcRendererEvent) => void) =>
-    ipcRenderer.on("on-muted-key-press", callback),
+    ipcRenderer.on("app:on-muted-key-press", callback),
 });

desktop/src/ipc.ts

@@ -1,6 +1,7 @@
 import { ipcMain } from "electron";
 import { createAndShowNotification } from "./notification";
-import { getWindow } from "./window";
+import settings from "./settings";
+import { getAppView, getWindow } from "./window";
 
 export function emitMutedKeyPress() {
   const mainWindow = getWindow();
@@ -8,11 +9,62 @@ export function emitMutedKeyPress() {
     throw new Error("Main window not found");
   }
 
-  mainWindow.webContents.send("on-muted-key-press");
+  mainWindow.webContents.send("app:on-muted-key-press");
 }
 
 export default () => {
-  ipcMain.on("notify", (event, txt) => {
+  ipcMain.on("app:notify", (event, txt) => {
     createAndShowNotification({ body: txt });
   });
+
+  ipcMain.handle("sidebar:getServers", () => {
+    // TODO: remove
+    if (!settings.get("servers")) {
+      settings.set("servers", [
+        {
+          _id: "1",
+          name: "WA Demo",
+          url: "https://play.staging.workadventu.re/@/tcm/workadventure/wa-village",
+        },
+        {
+          _id: "2",
+          name: "My Server",
+          url: "http://play.workadventure.localhost/",
+        },
+      ]);
+    }
+
+    return settings.get("servers", []);
+  });
+
+  ipcMain.handle("sidebar:selectServer", (event, serverId: string) => {
+    const appView = getAppView();
+    if (!appView) {
+      throw new Error("App view not found");
+    }
+
+    const servers = settings.get("servers", []);
+    const selectedServer = servers.find((s) => s._id === serverId);
+
+    if (!selectedServer) {
+      return new Error("Server not found");
+    }
+
+    appView.webContents.loadURL(selectedServer.url);
+    return true;
+  });
+
+  ipcMain.handle(
+    "sidebar:addServer",
+    (event, serverName: string, serverUrl: string) => {
+      const servers = settings.get("servers", []);
+      servers.push({
+        _id: `${servers.length + 1}`,
+        name: serverName,
+        url: serverUrl,
+      });
+      settings.set("servers", servers);
+      return true;
+    }
+  );
 };

desktop/src/log.ts

@@ -1,5 +1,4 @@
 import { dialog, shell } from "electron";
-import electronIsDev from "electron-is-dev";
 import log from "electron-log";
 
 import settings from "./settings";
@@ -40,18 +39,12 @@ function onRejection(reason: Error) {
 
 function init() {
   const logLevel = settings.get("log_level", "info");
-  log.transports.file.level = logLevel;
   log.transports.console.level = logLevel;
+  log.transports.file.level = logLevel;
 
   // eslint-disable-next-line no-console
   console.log = log.log.bind(log);
 
-  if (!electronIsDev) {
-    log.transports.file.fileName = "work-adventure.log";
-  } else {
-    console.log("Log file is disabled in dev. Using console output instead.");
-  }
-
   process.on("uncaughtException", onError);
   process.on("unhandledRejection", onRejection);
 }

desktop/src/settings.ts

@@ -1,9 +1,16 @@
 import ElectronLog from "electron-log";
 import Settings from "electron-settings";
 
+type Server = {
+  _id: string;
+  name: string;
+  url: string;
+};
+
 type SettingsData = {
   log_level: ElectronLog.LogLevel;
   auto_launch_enabled: boolean;
+  servers: Server[];
 };
 
 let settings: SettingsData;

desktop/src/sidebar/preload.ts

@@ -0,0 +1,10 @@
+import { contextBridge, ipcRenderer } from "electron";
+
+contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", {
+  desktop: true,
+  getServers: () => ipcRenderer.invoke("sidebar:getServers"),
+  selectServer: (serverId: string) =>
+    ipcRenderer.invoke("sidebar:selectServer", serverId),
+  addServer: (serverName: string, serverUrl: string) =>
+    ipcRenderer.invoke("sidebar:addServer", serverName, serverUrl),
+});

desktop/src/tray.ts

@@ -20,7 +20,7 @@ export function createTray() {
   const trayContextMenu = Menu.buildFromTemplate([
     {
       id: "open",
-      label: "Open / Close",
+      label: "Show / Hide",
       click() {
         const mainWindow = getWindow();
         if (!mainWindow) {

desktop/src/window.ts

@@ -1,17 +1,20 @@
-import { BrowserWindow } from "electron";
-import electronIsDev from "electron-is-dev";
+import { BrowserView, BrowserWindow } from "electron";
 import windowStateKeeper from "electron-window-state";
 import path from "path";
 
 let mainWindow: BrowserWindow | undefined;
+let appView: BrowserView | undefined;
 
-const url = process.env.PLAY_URL;
-// "https://play.staging.workadventu.re/@/tcm/workadventure/wa-village"; // TODO
+const sidebarWidth = 70;
 
 export function getWindow() {
   return mainWindow;
 }
 
+export function getAppView() {
+  return appView;
+}
+
 export function createWindow() {
   // do not re-create window if still existing
   if (mainWindow) {
@@ -32,13 +35,8 @@ export function createWindow() {
     height: windowState.height,
     autoHideMenuBar: true,
     show: false,
-    title: "WorkAdventure",
     webPreferences: {
-      preload: path.join(__dirname, "../dist/preload/index.js"),
-      // allowRunningInsecureContent: false,
-      // contextIsolation: true, // TODO: remove in electron 12
-      // nodeIntegration: false,
-      // sandbox: true,
+      preload: path.join(__dirname, "../dist/sidebar/preload.js"),
     },
   });
 
@@ -47,18 +45,10 @@ export function createWindow() {
   // and restore the maximized or full screen state
   windowState.manage(mainWindow);
 
-  mainWindow.on("show", () => {
-    // TODO
-  });
-
   mainWindow.on("closed", () => {
     mainWindow = undefined;
   });
 
-  mainWindow.once("ready-to-show", () => {
-    mainWindow?.show();
-  });
-
   // mainWindow.on('close', async (event) => {
   //   if (!app.confirmedExitPrompt) {
   //     event.preventDefault(); // Prevents the window from closing
@@ -77,11 +67,37 @@ export function createWindow() {
   //   }
   // });
 
-  if (!url || electronIsDev) {
-    // TODO
-    mainWindow.loadFile("../test-app/index.html");
-    mainWindow.webContents.openDevTools();
-  } else {
-    mainWindow.loadURL(url); // TODO: load app on demand
-  }
+  appView = new BrowserView({
+    webPreferences: {
+      preload: path.join(__dirname, "../dist/app/index.js"),
+    },
+  });
+  mainWindow.setBrowserView(appView);
+  appView.setBounds({
+    x: sidebarWidth,
+    y: 0,
+    width: mainWindow.getBounds().width - sidebarWidth,
+    height: mainWindow.getBounds().height,
+  });
+  appView.setAutoResize({
+    width: true,
+    height: true,
+  });
+
+  mainWindow.once("ready-to-show", () => {
+    (async () => {
+      await appView?.webContents.loadURL("https://workadventu.re/"); // TODO: use some splashscreen ?
+      // appView.webContents.openDevTools({
+      //   mode: "detach",
+      // });
+      mainWindow?.show();
+      // mainWindow?.webContents.openDevTools({ mode: "detach" });
+    })();
+  });
+
+  mainWindow.webContents.on("did-finish-load", () => {
+    mainWindow?.setTitle("WorkAdventure Desktop");
+  });
+
+  mainWindow.loadFile("../sidebar/index.html");
 }