visual improvements and close window when a browser is launched to improve performance (?)

This commit is contained in:
hippoz 2021-11-07 19:03:45 +02:00
parent eab9bc5805
commit e0acb9f448
Signed by: hippoz
GPG key ID: 7C52899193467641
10 changed files with 82 additions and 45 deletions

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name='viewport' content='width=device-width,initial-scale=1'>
<title>app</title> <title>app</title>

View file

@ -1,11 +0,0 @@
import { spawnBrowser } from "../appruntime";
const app = {
name: "duckduckgo",
component: null,
async open() {
await spawnBrowser("https://duckduckgo.com/");
}
};
export default app;

View file

@ -1,12 +0,0 @@
import env from '../env';
const { spawn } = require('child_process');
export function spawnBrowser(url, params=[]) {
return new Promise((resolve, reject) => {
const browserProcess = spawn(env.browserLaunch.browserBinary, [...env.browserLaunch.params, ...params, url]);
browserProcess.on("spawn", () => resolve(browserProcess));
browserProcess.on("error", e => reject(e));
});
}

View file

@ -0,0 +1,5 @@
import env from '../env';
export function spawnBrowser(url, params=[]) {
window._$waffletvapi.spawnAndSuspendRendering(env.browserLaunch.browserBinary, [...env.browserLaunch.params, ...params, url]);
};

View file

@ -1,8 +1,23 @@
import duckduckgo from "./applications/duckduckgo";
/*
Example of an app tile definition:
const myApp = {
name: "App",
style: {
backgroundImageExt: `url("http://example.com/my-app-logo.svg")`,
backgroundColor: "#ffffff"
},
component: null,
async open() {
await spawnBrowser("https://example.com");
}
};
*/
const provider = { const provider = {
repository: [ repository: [
duckduckgo /* app tile repository to be filled by user */
] ]
}; };

View file

@ -6,18 +6,29 @@
}; };
</script> </script>
<button on:click={ open } class="app-tile"> <button
{ app.name } on:click={ open }
class="app-tile"
style="--current-tile-bg-color: { app.style.backgroundColor || '#000000' }; --current-tile-bg-image: { app.style.backgroundImageExt || 'unset' }"
>
{ app.style.backgroundImageExt ? "" : app.name }
</button> </button>
<style> <style>
.app-tile { .app-tile {
padding: 0.5rem; padding: 2.5rem;
margin: 2rem; margin: 2rem;
background-color: var(--fuzzy-wuzzy); background-color: var(--current-tile-bg-color);
background-image: var(--current-tile-bg-image);
background-repeat: no-repeat;
background-position-y: center;
background-position-x: center;
background-origin: content-box;
background-size: contain;
border-radius: 2rem; border-radius: 2rem;
min-width: 5rem; min-width: 300px;
min-height: 5rem; min-height: 100px;
max-height: 200px;
border: none; border: none;
font-size: 2.7em; font-size: 2.7em;
user-select: none; user-select: none;
@ -27,7 +38,6 @@
} }
.app-tile:hover { .app-tile:hover {
background-color: var(--old-rose);
transform: scale(1.087); transform: scale(1.087);
} }

View file

@ -9,6 +9,16 @@
{#each applicationRepository as app} {#each applicationRepository as app}
<AppTile app={app} /> <AppTile app={app} />
{/each} {/each}
{#if applicationRepository.length < 1}
<div class="no-apps-heads-up">
<h1>
Nothing to see here!
</h1>
<p>
You must first specify which apps tiles to have on the home screen by editing `appmanager/provider.js`. This will be easier in the future.
</p>
</div>
{/if}
</div> </div>
<style> <style>
@ -18,11 +28,9 @@
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px; gap: 0px 0px;
grid-auto-flow: row dense; grid-auto-flow: row dense;
overflow-y: auto; overflow-y: auto;
width: clamp(10%, 90%, 100%);
width: clamp(10%, 1000px, 90%); min-height: 100%;
height: 100%;
margin: auto; margin: auto;
margin-top: 5%; margin-top: 5%;
padding: 2.5em; padding: 2.5em;

View file

@ -1,7 +1,7 @@
const env = { const env = {
browserLaunch: { browserLaunch: {
browserBinary: "chromium", browserBinary: "firefox",
params: ["-kiosk"] params: []
} }
}; };

View file

@ -1,20 +1,32 @@
const { app, BrowserWindow } = require('electron'); const { app, BrowserWindow, ipcMain } = require('electron');
const { session } = require('electron') const { spawn } = require('child_process');
const path = require('path'); const path = require('path');
let mainWindow;
const createWindow = () => { const createWindow = () => {
const mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, preload: path.join(__dirname, 'preload.js'),
} },
}); });
mainWindow.setMenuBarVisibility(false); mainWindow.setMenuBarVisibility(false);
mainWindow.loadFile(path.join(__dirname, '../public/index.html')); mainWindow.loadFile(path.join(__dirname, '../public/index.html'));
mainWindow.webContents.openDevTools();
}; };
ipcMain.on("spawnAndSuspendRendering", (event, process, args) => {
const proc = spawn(process, args);
mainWindow.destroy();
proc.on("close", () => {
createWindow();
});
});
app.on("window-all-closed", () => {});
app.on('ready', createWindow); app.on('ready', createWindow);

10
src/preload.js Normal file
View file

@ -0,0 +1,10 @@
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld(
"_$waffletvapi",
{
spawnAndSuspendRendering(process, args) {
ipcRenderer.send("spawnAndSuspendRendering", process, args);
}
}
);