_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve local-app

Browse Source
This commit is contained in:
Anton Bracke 2022-02-19 01:08:33 +01:00
parent 389c2e4844
commit 9301433fdf
No known key found for this signature in database
GPG Key ID: B1222603899C6B25
18 changed files with 82 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/README.md
View File

@ -1,3 +1,3 @@
# Desktop # 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.

BIN
desktop/assets/icons/1024x1024.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.9 KiB

BIN
desktop/assets/icons/logo-round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
desktop/assets/icons/logo-text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
desktop/assets/icons/logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
desktop/assets/icons/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

2
desktop/electron-builder.yml
View File

@ -3,7 +3,7 @@ appId: re.workadventu.desktop
files: files:
- "build/**/*" - "build/**/*"
- "assets/**/*" - "assets/**/*"
- "sidebar/**/*" - "local-app/**/*"
dmg: dmg:
icon: false icon: false

30
desktop/sidebar/index.html → desktop/local-app/index.html
View File

@ -12,19 +12,25 @@
html, body { html, body {
height: 100%; height: 100%;
width: 100%;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
background-color: #30343D;
}
.sidebar {
display: flex;
width: 70px; width: 70px;
background-color: #25292E; flex-direction: column;
background-color: #2B2F37;
} }
#servers { #servers {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1rem;
} }
#servers div { #servers div {
@ -49,11 +55,25 @@
#btn-reload { #btn-reload {
margin-top: auto; margin-top: auto;
} }
.main {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
</style> </style>
</head> </head>
<body> <body>
<div id="servers"></div> <div class="sidebar">
<button id="btn-reload">Refresh</button> <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> <script src="./index.js" lang="javascript"></script>
</body> </body>
</html> </html>

0
desktop/sidebar/index.js → desktop/local-app/index.js
View File

2
desktop/package.json
View File

@ -5,7 +5,7 @@
"main": "build/main.js", "main": "build/main.js",
"license": "SEE LICENSE IN LICENSE.txt", "license": "SEE LICENSE IN LICENSE.txt",
"scripts": { "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'", "dev": "yarn build --watch --onSuccess 'yarn electron build/main.js'",
"bundle": "electron-builder install-app-deps && electron-builder", "bundle": "electron-builder install-app-deps && electron-builder",
"release": "yarn bundle", "release": "yarn bundle",

10
desktop/src/ipc.ts
View File

@ -1,7 +1,7 @@
import { ipcMain } from "electron"; import { ipcMain } from "electron";
import { createAndShowNotification } from "./notification"; import { createAndShowNotification } from "./notification";
import settings from "./settings"; import settings from "./settings";
import { getAppView, getWindow } from "./window"; import { getAppView, getWindow, showAppView } from "./window";
export function emitMutedKeyPress() { export function emitMutedKeyPress() {
const mainWindow = getWindow(); const mainWindow = getWindow();
@ -17,7 +17,7 @@ export default () => {
createAndShowNotification({ body: txt }); createAndShowNotification({ body: txt });
}); });
ipcMain.handle("sidebar:getServers", () => { ipcMain.handle("local-app:getServers", () => {
// TODO: remove // TODO: remove
if (!settings.get("servers")) { if (!settings.get("servers")) {
settings.set("servers", [ settings.set("servers", [
@ -37,7 +37,7 @@ export default () => {
return settings.get("servers", []); return settings.get("servers", []);
}); });
ipcMain.handle("sidebar:selectServer", (event, serverId: string) => { ipcMain.handle("local-app:selectServer", (event, serverId: string) => {
const appView = getAppView(); const appView = getAppView();
if (!appView) { if (!appView) {
throw new Error("App view not found"); throw new Error("App view not found");
@ -50,11 +50,11 @@ export default () => {
return new Error("Server not found"); return new Error("Server not found");
} }
appView.webContents.loadURL(selectedServer.url); showAppView(selectedServer.url);
return true; 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", []); const servers = settings.get("servers", []);
servers.push({ servers.push({
_id: `${servers.length + 1}`, _id: `${servers.length + 1}`,

0
desktop/src/app/preload.ts → desktop/src/preload-app/preload.ts
View File

0
desktop/src/app/types.ts → desktop/src/preload-app/types.ts
View File

12
desktop/src/preload-local-app/preload.ts Normal file
View 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);

2
desktop/src/sidebar/types.ts → desktop/src/preload-local-app/types.ts
View File

@ -4,7 +4,7 @@ export type Server = {
url: string; url: string;
}; };
export type WorkAdventureSidebarApi = { export type WorkAdventureLocalAppApi = {
desktop: boolean; desktop: boolean;
getServers: () => Promise<Server[]>; getServers: () => Promise<Server[]>;
selectServer: (serverId: string) => Promise<Error | boolean>; selectServer: (serverId: string) => Promise<Error | boolean>;

2
desktop/src/settings.ts
View File

@ -1,6 +1,6 @@
import ElectronLog from "electron-log"; import ElectronLog from "electron-log";
import Settings from "electron-settings"; import Settings from "electron-settings";
import type { Server } from "./sidebar/types"; import type { Server } from "./preload-local-app/types";
type SettingsData = { type SettingsData = {
log_level: ElectronLog.LogLevel; log_level: ElectronLog.LogLevel;

12
desktop/src/sidebar/preload.ts
View File

@ -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);

41
desktop/src/window.ts
View File

@ -36,7 +36,7 @@ export function createWindow() {
autoHideMenuBar: true, autoHideMenuBar: true,
show: false, show: false,
webPreferences: { 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({ appView = new BrowserView({
webPreferences: { webPreferences: {
preload: path.resolve(__dirname, "..", "build", "app", "preload.js"), preload: path.resolve(__dirname, "..", "build", "preload-app", "preload.js"),
}, },
}); });
mainWindow.setBrowserView(appView);
appView.setBounds({ appView.setBounds({
x: sidebarWidth, x: sidebarWidth,
y: 0, y: 0,
@ -86,12 +85,11 @@ export function createWindow() {
mainWindow.once("ready-to-show", () => { mainWindow.once("ready-to-show", () => {
(async () => { (async () => {
await appView?.webContents.loadURL("https://workadventu.re/"); // TODO: use some splashscreen ?
// appView?.webContents.openDevTools({ // appView?.webContents.openDevTools({
// mode: "detach", // mode: "detach",
// }); // });
mainWindow?.show(); mainWindow?.show();
// mainWindow?.webContents.openDevTools({ mode: "detach" }); mainWindow?.webContents.openDevTools({ mode: "detach" });
})(); })();
}); });
@ -99,5 +97,36 @@ export function createWindow() {
mainWindow?.setTitle("WorkAdventure Desktop"); 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);
} }