improve local-app
This commit is contained in:
parent
389c2e4844
commit
9301433fdf
@ -1,3 +1,3 @@
|
||||
# Desktop
|
||||
|
||||
The desktop component is an electron app.
|
||||
The desktop component is an electron app. It uses a hybrid setup. The sidebar to view servers and the main window used to add servers are bundled. After selecting a server the main window gets overlayed by a BrowserView showing the frontend of an external deployment with the actual WorkAdventure frontend.
|
Binary file not shown.
Before Width: | Height: | Size: 8.9 KiB |
BIN
desktop/assets/icons/logo-round.png
Normal file
BIN
desktop/assets/icons/logo-round.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
BIN
desktop/assets/icons/logo-text.png
Normal file
BIN
desktop/assets/icons/logo-text.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 KiB |
BIN
desktop/assets/icons/logo-white.png
Normal file
BIN
desktop/assets/icons/logo-white.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 4.2 KiB |
@ -3,7 +3,7 @@ appId: re.workadventu.desktop
|
||||
files:
|
||||
- "build/**/*"
|
||||
- "assets/**/*"
|
||||
- "sidebar/**/*"
|
||||
- "local-app/**/*"
|
||||
|
||||
dmg:
|
||||
icon: false
|
||||
|
@ -12,19 +12,25 @@
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
background-color: #30343D;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
width: 70px;
|
||||
background-color: #25292E;
|
||||
flex-direction: column;
|
||||
background-color: #2B2F37;
|
||||
}
|
||||
|
||||
#servers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#servers div {
|
||||
@ -49,11 +55,25 @@
|
||||
#btn-reload {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="servers"></div>
|
||||
<button id="btn-reload">Refresh</button>
|
||||
<div class="sidebar">
|
||||
<div id="servers">
|
||||
|
||||
</div>
|
||||
<button id="btn-reload">Refresh</button>
|
||||
</div>
|
||||
<div class="main">
|
||||
<img src="../assets/icons/logo-text.png" />
|
||||
</div>
|
||||
<script src="./index.js" lang="javascript"></script>
|
||||
</body>
|
||||
</html>
|
@ -5,7 +5,7 @@
|
||||
"main": "build/main.js",
|
||||
"license": "SEE LICENSE IN LICENSE.txt",
|
||||
"scripts": {
|
||||
"build": "tsup-node -d build ./src/main.ts ./src/sidebar/preload.ts ./src/app/preload.ts",
|
||||
"build": "tsup-node -d build ./src/main.ts ./src/preload-local-app/preload.ts ./src/preload-app/preload.ts",
|
||||
"dev": "yarn build --watch --onSuccess 'yarn electron build/main.js'",
|
||||
"bundle": "electron-builder install-app-deps && electron-builder",
|
||||
"release": "yarn bundle",
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { ipcMain } from "electron";
|
||||
import { createAndShowNotification } from "./notification";
|
||||
import settings from "./settings";
|
||||
import { getAppView, getWindow } from "./window";
|
||||
import { getAppView, getWindow, showAppView } from "./window";
|
||||
|
||||
export function emitMutedKeyPress() {
|
||||
const mainWindow = getWindow();
|
||||
@ -17,7 +17,7 @@ export default () => {
|
||||
createAndShowNotification({ body: txt });
|
||||
});
|
||||
|
||||
ipcMain.handle("sidebar:getServers", () => {
|
||||
ipcMain.handle("local-app:getServers", () => {
|
||||
// TODO: remove
|
||||
if (!settings.get("servers")) {
|
||||
settings.set("servers", [
|
||||
@ -37,7 +37,7 @@ export default () => {
|
||||
return settings.get("servers", []);
|
||||
});
|
||||
|
||||
ipcMain.handle("sidebar:selectServer", (event, serverId: string) => {
|
||||
ipcMain.handle("local-app:selectServer", (event, serverId: string) => {
|
||||
const appView = getAppView();
|
||||
if (!appView) {
|
||||
throw new Error("App view not found");
|
||||
@ -50,11 +50,11 @@ export default () => {
|
||||
return new Error("Server not found");
|
||||
}
|
||||
|
||||
appView.webContents.loadURL(selectedServer.url);
|
||||
showAppView(selectedServer.url);
|
||||
return true;
|
||||
});
|
||||
|
||||
ipcMain.handle("sidebar:addServer", (event, serverName: string, serverUrl: string) => {
|
||||
ipcMain.handle("local-app:addServer", (event, serverName: string, serverUrl: string) => {
|
||||
const servers = settings.get("servers", []);
|
||||
servers.push({
|
||||
_id: `${servers.length + 1}`,
|
||||
|
12
desktop/src/preload-local-app/preload.ts
Normal file
12
desktop/src/preload-local-app/preload.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { contextBridge, ipcRenderer } from "electron";
|
||||
import type { WorkAdventureLocalAppApi } from "./types";
|
||||
|
||||
const api: WorkAdventureLocalAppApi = {
|
||||
desktop: true,
|
||||
getServers: () => ipcRenderer.invoke("local-app:getServers"),
|
||||
selectServer: (serverId: string) => ipcRenderer.invoke("local-app:selectServer", serverId),
|
||||
addServer: (serverName: string, serverUrl: string) =>
|
||||
ipcRenderer.invoke("local-app:addServer", serverName, serverUrl),
|
||||
};
|
||||
|
||||
contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api);
|
@ -4,7 +4,7 @@ export type Server = {
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type WorkAdventureSidebarApi = {
|
||||
export type WorkAdventureLocalAppApi = {
|
||||
desktop: boolean;
|
||||
getServers: () => Promise<Server[]>;
|
||||
selectServer: (serverId: string) => Promise<Error | boolean>;
|
@ -1,6 +1,6 @@
|
||||
import ElectronLog from "electron-log";
|
||||
import Settings from "electron-settings";
|
||||
import type { Server } from "./sidebar/types";
|
||||
import type { Server } from "./preload-local-app/types";
|
||||
|
||||
type SettingsData = {
|
||||
log_level: ElectronLog.LogLevel;
|
||||
|
@ -1,12 +0,0 @@
|
||||
import { contextBridge, ipcRenderer } from "electron";
|
||||
import type { WorkAdventureSidebarApi } from "./types";
|
||||
|
||||
const api: WorkAdventureSidebarApi = {
|
||||
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),
|
||||
};
|
||||
|
||||
contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api);
|
@ -36,7 +36,7 @@ export function createWindow() {
|
||||
autoHideMenuBar: true,
|
||||
show: false,
|
||||
webPreferences: {
|
||||
preload: path.resolve(__dirname, "..", "build", "sidebar", "preload.js"),
|
||||
preload: path.resolve(__dirname, "..", "build", "preload-local-app", "preload.js"),
|
||||
},
|
||||
});
|
||||
|
||||
@ -69,10 +69,9 @@ export function createWindow() {
|
||||
|
||||
appView = new BrowserView({
|
||||
webPreferences: {
|
||||
preload: path.resolve(__dirname, "..", "build", "app", "preload.js"),
|
||||
preload: path.resolve(__dirname, "..", "build", "preload-app", "preload.js"),
|
||||
},
|
||||
});
|
||||
mainWindow.setBrowserView(appView);
|
||||
appView.setBounds({
|
||||
x: sidebarWidth,
|
||||
y: 0,
|
||||
@ -86,12 +85,11 @@ export function createWindow() {
|
||||
|
||||
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.openDevTools({ mode: "detach" });
|
||||
})();
|
||||
});
|
||||
|
||||
@ -99,5 +97,36 @@ export function createWindow() {
|
||||
mainWindow?.setTitle("WorkAdventure Desktop");
|
||||
});
|
||||
|
||||
mainWindow.loadFile(path.resolve(__dirname, "..", "sidebar", "index.html"));
|
||||
mainWindow.loadFile(path.resolve(__dirname, "..", "local-app", "index.html"));
|
||||
}
|
||||
|
||||
export function showAppView(url?: string) {
|
||||
if (!appView) {
|
||||
throw new Error("App view not found");
|
||||
}
|
||||
|
||||
if (!mainWindow) {
|
||||
throw new Error("Main window not found");
|
||||
}
|
||||
|
||||
if (mainWindow.getBrowserView()) {
|
||||
mainWindow.removeBrowserView(appView);
|
||||
}
|
||||
mainWindow.addBrowserView(appView);
|
||||
|
||||
if (url) {
|
||||
appView.webContents.loadURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
export function hideAppView() {
|
||||
if (!appView) {
|
||||
throw new Error("App view not found");
|
||||
}
|
||||
|
||||
if (!mainWindow) {
|
||||
throw new Error("Main window not found");
|
||||
}
|
||||
|
||||
mainWindow.removeBrowserView(appView);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user