[Remote] Full PWA support, misc bugfixes (#280)

- Fix setting remote port properly
- Add web worker support (so it can be installed as an "app")
- build fixes/removing stray console.log
This commit is contained in:
Kendall Garner 2023-10-18 17:49:09 +00:00 committed by GitHub
parent fe298d3232
commit 9964f95d5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 314 additions and 194 deletions

View file

@ -6,6 +6,7 @@ import { deflate, gzip } from 'zlib';
import axios from 'axios';
import { app, ipcMain } from 'electron';
import { Server as WsServer, WebSocketServer, WebSocket } from 'ws';
import manifest from './manifest.json';
import { ClientEvent, ServerEvent } from '../../../../remote/types';
import { PlayerRepeat, SongUpdate } from '../../../../renderer/types';
import { getMainWindow } from '../../../main';
@ -297,6 +298,12 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
await serveFile(req, 'remote', 'js', res);
break;
}
case '/manifest.json': {
res.statusCode = 200;
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(manifest));
break;
}
case '/credentials': {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
@ -304,9 +311,13 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
break;
}
default: {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not FOund');
if (req.url?.startsWith('/worker.js')) {
await serveFile(req, 'worker', 'js', res);
} else {
res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain');
res.end('Not Found');
}
}
}
} catch (error) {

View file

@ -0,0 +1,17 @@
{
"name": "Feishin Remote",
"short_name": "Feishin Remote",
"start_url": "/",
"background_color": "#000100",
"theme_color": "#E7E7E7",
"icons": [
{
"src": "favicon.ico",
"sizes": "32x32",
"type": "image/png",
"purpose": "maskable any"
}
],
"display": "standalone",
"orientation": "portrait"
}

View file

@ -6,6 +6,14 @@
<meta http-equiv="Content-Security-Policy" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feishin Remote</title>
<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
const version = encodeURIComponent("<%= version %>");
const prod = encodeURIComponent("<%= prod %>");
navigator.serviceWorker.register(`/worker.js?version=${version}&prod=${prod}`);
}
</script>
</head>
<body>

17
src/remote/manifest.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "Feishin Remote",
"short_name": "Feishin Remote",
"start_url": "/",
"background_color": "#FFDCB5",
"theme_color": "#1E003D",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
}
],
"display": "standalone",
"orientation": "portrait"
}

View file

@ -0,0 +1,48 @@
/// <reference lib="WebWorker" />
export type {};
// eslint-disable-next-line no-undef
declare const self: ServiceWorkerGlobalScope;
// eslint-disable-next-line no-restricted-globals
const url = new URL(location.toString());
const version = url.searchParams.get('version');
const prod = url.searchParams.get('prod') === 'true';
const cacheName = `Feishin-remote-${version}`;
const resourcesToCache = ['./', './remote.js', './favicon.ico'];
if (prod) {
resourcesToCache.push('./remote.css');
}
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(cacheName).then((cache) => {
return cache.addAll(resourcesToCache);
}),
);
});
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then((response) => {
return response || fetch(e.request);
}),
);
});
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(
keyList.map((key) => {
if (key !== cacheName) {
return caches.delete(key);
}
return Promise.resolve();
}),
);
}),
);
});

View file

@ -194,7 +194,6 @@ export const useRemoteStore = create<SettingsSlice>()(
});
},
send: (data: ClientEvent) => {
console.log(data, get().socket);
get().socket?.send(JSON.stringify(data));
},
toggleIsDark: () => {

0
src/remote/worker.js Normal file
View file

View file

@ -28,24 +28,27 @@ export const RemoteSettings = () => {
title: enabled ? 'Error enabling remote' : 'Error disabling remote',
});
}
}, 100);
}, 50);
const debouncedChangeRemotePort = debounce(async (port: number) => {
const errorMsg = await remote!.setRemotePort(port);
if (errorMsg === null) {
if (!errorMsg) {
setSettings({
remote: {
...settings,
port,
},
});
toast.warn({
message: 'To have your port change take effect, stop and restart the server',
});
} else {
toast.error({
message: errorMsg,
title: 'Error setting port',
});
}
});
}, 100);
const isHidden = !isElectron();