visual improvements and close window when a browser is launched to improve performance (?)
This commit is contained in:
hippoz
parent
eab9bc5805
commit
e0acb9f448
GPG key ID:
7C52899193467641
10 changed files with 82 additions and 45 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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'>
|
||||
|
||||
<title>app</title>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
import { spawnBrowser } from "../appruntime";
|
||||
|
||||
const app = {
|
||||
name: "duckduckgo",
|
||||
component: null,
|
||||
async open() {
|
||||
await spawnBrowser("https://duckduckgo.com/");
|
||||
}
|
||||
};
|
||||
|
||||
export default app;
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
5
src/appmanager/apputils.js
Normal file
5
src/appmanager/apputils.js
Normal 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]);
|
||||
};
|
||||
|
|
@ -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 = {
|
||||
repository: [
|
||||
duckduckgo
|
||||
/* app tile repository to be filled by user */
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,18 +6,29 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<button on:click={ open } class="app-tile">
|
||||
{ app.name }
|
||||
<button
|
||||
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>
|
||||
|
||||
<style>
|
||||
.app-tile {
|
||||
padding: 0.5rem;
|
||||
padding: 2.5rem;
|
||||
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;
|
||||
min-width: 5rem;
|
||||
min-height: 5rem;
|
||||
min-width: 300px;
|
||||
min-height: 100px;
|
||||
max-height: 200px;
|
||||
border: none;
|
||||
font-size: 2.7em;
|
||||
user-select: none;
|
||||
|
|
@ -27,7 +38,6 @@
|
|||
}
|
||||
|
||||
.app-tile:hover {
|
||||
background-color: var(--old-rose);
|
||||
transform: scale(1.087);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,16 @@
|
|||
{#each applicationRepository as app}
|
||||
<AppTile app={app} />
|
||||
{/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>
|
||||
|
||||
<style>
|
||||
|
|
@ -18,11 +28,9 @@
|
|||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 0px 0px;
|
||||
grid-auto-flow: row dense;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: clamp(10%, 1000px, 90%);
|
||||
height: 100%;
|
||||
width: clamp(10%, 90%, 100%);
|
||||
min-height: 100%;
|
||||
margin: auto;
|
||||
margin-top: 5%;
|
||||
padding: 2.5em;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const env = {
|
||||
browserLaunch: {
|
||||
browserBinary: "chromium",
|
||||
params: ["-kiosk"]
|
||||
browserBinary: "firefox",
|
||||
params: []
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
24
src/index.js
24
src/index.js
|
|
@ -1,20 +1,32 @@
|
|||
const { app, BrowserWindow } = require('electron');
|
||||
const { session } = require('electron')
|
||||
const { app, BrowserWindow, ipcMain } = require('electron');
|
||||
const { spawn } = require('child_process');
|
||||
const path = require('path');
|
||||
|
||||
let mainWindow;
|
||||
|
||||
const createWindow = () => {
|
||||
const mainWindow = new BrowserWindow({
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
}
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
});
|
||||
|
||||
mainWindow.setMenuBarVisibility(false);
|
||||
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);
|
||||
|
|
|
|||
10
src/preload.js
Normal file
10
src/preload.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
const { contextBridge, ipcRenderer } = require("electron");
|
||||
|
||||
contextBridge.exposeInMainWorld(
|
||||
"_$waffletvapi",
|
||||
{
|
||||
spawnAndSuspendRendering(process, args) {
|
||||
ipcRenderer.send("spawnAndSuspendRendering", process, args);
|
||||
}
|
||||
}
|
||||
);
|
||||
Reference in a new issue