MiczFlor · aflatter · Dec 30, 2024 · Jan 2, 2025
diff --git a/docker/Dockerfile.webapp b/docker/Dockerfile.webapp
@@ -8,4 +8,5 @@ COPY --chown=node:node ./src/webapp ./
 
 RUN npm install
 
-CMD ["npm", "start"]
+# This assumes that the `start` script in `package.json` invokes `vite`.
+CMD ["npm", "start", "--", "--host=0.0.0.0", "--port=3000", "--strictPort"]
diff --git a/src/webapp/.gitignore b/src/webapp/.gitignore
@@ -24,3 +24,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.swc
diff --git a/src/webapp/index.html b/src/webapp/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your Web App is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <title>Phoniebox</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/src/webapp/package-lock.json b/src/webapp/package-lock.json
diff --git a/src/webapp/package.json b/src/webapp/package.json
@@ -20,15 +20,12 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^12.3.1",
     "react-router-dom": "^6.18.0",
-    "react-scripts": "^5.0.1",
     "url": "^0.11.3",
     "uuid": "^9.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build"
   },
   "eslintConfig": {
     "extends": [
@@ -49,6 +46,11 @@
     ]
   },
   "devDependencies": {
-    "markdownlint-cli2": "^0.12.1"
+    "@swc/plugin-emotion": "^8.0.2",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "eslint": "^8.57.1",
+    "eslint-config-react-app": "^7.0.1",
+    "markdownlint-cli2": "^0.12.1",
+    "vite-plugin-checker": "^0.8.0"
   }
 }
diff --git a/src/webapp/public/index.html b/src/webapp/public/index.html
diff --git a/src/webapp/src/App.js → src/webapp/src/App.jsx b/src/webapp/src/App.js → src/webapp/src/App.jsx
diff --git a/...onents/Cards/controls/actions-controls.js → ...nents/Cards/controls/actions-controls.jsx b/...onents/Cards/controls/actions-controls.js → ...nents/Cards/controls/actions-controls.jsx
diff --git a/...nts/Cards/controls/actions/audio/index.js → ...ts/Cards/controls/actions/audio/index.jsx b/...nts/Cards/controls/actions/audio/index.js → ...ts/Cards/controls/actions/audio/index.jsx
diff --git a/...ols/actions/audio/slider-change-volume.js → ...ls/actions/audio/slider-change-volume.jsx b/...ols/actions/audio/slider-change-volume.js → ...ls/actions/audio/slider-change-volume.jsx
diff --git a/...ents/Cards/controls/actions/host/index.js → ...nts/Cards/controls/actions/host/index.jsx b/...ents/Cards/controls/actions/host/index.js → ...nts/Cards/controls/actions/host/index.jsx
diff --git a/...ontrols/actions/host/say-my-ip-options.js → ...ntrols/actions/host/say-my-ip-options.jsx b/...ontrols/actions/host/say-my-ip-options.js → ...ntrols/actions/host/say-my-ip-options.jsx
diff --git a/...ards/controls/actions/play-music/index.js → ...rds/controls/actions/play-music/index.jsx b/...ards/controls/actions/play-music/index.js → ...rds/controls/actions/play-music/index.jsx
diff --git a/...s/actions/play-music/no-music-selected.js → .../actions/play-music/no-music-selected.jsx b/...s/actions/play-music/no-music-selected.js → .../actions/play-music/no-music-selected.jsx
diff --git a/...rols/actions/play-music/selected-album.js → ...ols/actions/play-music/selected-album.jsx b/...rols/actions/play-music/selected-album.js → ...ols/actions/play-music/selected-album.jsx
diff --git a/...ols/actions/play-music/selected-folder.js → ...ls/actions/play-music/selected-folder.jsx b/...ols/actions/play-music/selected-folder.js → ...ls/actions/play-music/selected-folder.jsx
diff --git a/...ols/actions/play-music/selected-single.js → ...ls/actions/play-music/selected-single.jsx b/...ols/actions/play-music/selected-single.js → ...ls/actions/play-music/selected-single.jsx
diff --git a/...controls/actions/synchronisation/index.js → ...ontrols/actions/synchronisation/index.jsx b/...controls/actions/synchronisation/index.js → ...ontrols/actions/synchronisation/index.jsx
diff --git a/...ts/Cards/controls/actions/timers/index.js → ...s/Cards/controls/actions/timers/index.jsx b/...ts/Cards/controls/actions/timers/index.js → ...s/Cards/controls/actions/timers/index.jsx
diff --git a/...ntrols/actions/timers/slider-set-timer.js → ...trols/actions/timers/slider-set-timer.jsx b/...ntrols/actions/timers/slider-set-timer.js → ...trols/actions/timers/slider-set-timer.jsx
diff --git a/...onents/Cards/controls/command-selector.js → ...nents/Cards/controls/command-selector.jsx b/...onents/Cards/controls/command-selector.js → ...nents/Cards/controls/command-selector.jsx
diff --git a/...nents/Cards/controls/controls-selector.js → ...ents/Cards/controls/controls-selector.jsx b/...nents/Cards/controls/controls-selector.js → ...ents/Cards/controls/controls-selector.jsx
diff --git a/...onents/Cards/controls/options-selector.js → ...nents/Cards/controls/options-selector.jsx b/...onents/Cards/controls/options-selector.js → ...nents/Cards/controls/options-selector.jsx
diff --git a/.../Cards/controls/select-command-aliases.js → ...Cards/controls/select-command-aliases.jsx b/.../Cards/controls/select-command-aliases.js → ...Cards/controls/select-command-aliases.jsx
diff --git a/...pp/src/components/Cards/dialogs/delete.js → ...p/src/components/Cards/dialogs/delete.jsx b/...pp/src/components/Cards/dialogs/delete.js → ...p/src/components/Cards/dialogs/delete.jsx
diff --git a/src/webapp/src/components/Cards/edit.js → src/webapp/src/components/Cards/edit.jsx b/src/webapp/src/components/Cards/edit.js → src/webapp/src/components/Cards/edit.jsx
diff --git a/src/webapp/src/components/Cards/form.js → src/webapp/src/components/Cards/form.jsx b/src/webapp/src/components/Cards/form.js → src/webapp/src/components/Cards/form.jsx
diff --git a/src/webapp/src/components/Cards/index.js → src/webapp/src/components/Cards/index.jsx b/src/webapp/src/components/Cards/index.js → src/webapp/src/components/Cards/index.jsx
diff --git a/src/webapp/src/components/Cards/list.js → src/webapp/src/components/Cards/list.jsx b/src/webapp/src/components/Cards/list.js → src/webapp/src/components/Cards/list.jsx
diff --git a/src/webapp/src/components/Cards/overview.js → src/webapp/src/components/Cards/overview.jsx b/src/webapp/src/components/Cards/overview.js → src/webapp/src/components/Cards/overview.jsx
diff --git a/src/webapp/src/components/Cards/register.js → src/webapp/src/components/Cards/register.jsx b/src/webapp/src/components/Cards/register.js → src/webapp/src/components/Cards/register.jsx
diff --git a/src/webapp/src/components/Header/index.js → src/webapp/src/components/Header/index.jsx b/src/webapp/src/components/Header/index.js → src/webapp/src/components/Header/index.jsx
diff --git a/src/webapp/src/components/Library/index.js → src/webapp/src/components/Library/index.jsx b/src/webapp/src/components/Library/index.js → src/webapp/src/components/Library/index.jsx
diff --git a/.../src/components/Library/library-header.js → ...src/components/Library/library-header.jsx b/.../src/components/Library/library-header.js → ...src/components/Library/library-header.jsx
diff --git a/...ists/albums/album-list/album-list-item.js → ...sts/albums/album-list/album-list-item.jsx b/...ists/albums/album-list/album-list-item.js → ...sts/albums/album-list/album-list-item.jsx
diff --git a/.../Library/lists/albums/album-list/index.js → ...Library/lists/albums/album-list/index.jsx b/.../Library/lists/albums/album-list/index.js → ...Library/lists/albums/album-list/index.jsx
diff --git a/.../components/Library/lists/albums/index.js → ...components/Library/lists/albums/index.jsx b/.../components/Library/lists/albums/index.js → ...components/Library/lists/albums/index.jsx
diff --git a/...s/Library/lists/albums/song-list/index.js → .../Library/lists/albums/song-list/index.jsx b/...s/Library/lists/albums/song-list/index.js → .../Library/lists/albums/song-list/index.jsx
diff --git a/...ts/albums/song-list/song-list-controls.js → ...s/albums/song-list/song-list-controls.jsx b/...ts/albums/song-list/song-list-controls.js → ...s/albums/song-list/song-list-controls.jsx
diff --git a/...ists/albums/song-list/song-list-header.js → ...sts/albums/song-list/song-list-header.jsx b/...ists/albums/song-list/song-list-header.js → ...sts/albums/song-list/song-list-header.jsx
diff --git a/...ts/albums/song-list/song-list-headline.js → ...s/albums/song-list/song-list-headline.jsx b/...ts/albums/song-list/song-list-headline.js → ...s/albums/song-list/song-list-headline.jsx
diff --git a/.../lists/albums/song-list/song-list-item.js → ...lists/albums/song-list/song-list-item.jsx b/.../lists/albums/song-list/song-list-item.js → ...lists/albums/song-list/song-list-item.jsx
diff --git a/...ents/Library/lists/folders/folder-link.js → ...nts/Library/lists/folders/folder-link.jsx b/...ents/Library/lists/folders/folder-link.js → ...nts/Library/lists/folders/folder-link.jsx
diff --git a/...ry/lists/folders/folder-list-item-back.js → ...y/lists/folders/folder-list-item-back.jsx b/...ry/lists/folders/folder-list-item-back.js → ...y/lists/folders/folder-list-item-back.jsx
diff --git a/...Library/lists/folders/folder-list-item.js → ...ibrary/lists/folders/folder-list-item.jsx b/...Library/lists/folders/folder-list-item.js → ...ibrary/lists/folders/folder-list-item.jsx
diff --git a/...ents/Library/lists/folders/folder-list.js → ...nts/Library/lists/folders/folder-list.jsx b/...ents/Library/lists/folders/folder-list.js → ...nts/Library/lists/folders/folder-list.jsx
diff --git a/...brary/lists/folders/folder-type-avatar.js → ...rary/lists/folders/folder-type-avatar.jsx b/...brary/lists/folders/folder-type-avatar.js → ...rary/lists/folders/folder-type-avatar.jsx
diff --git a/...components/Library/lists/folders/index.js → ...omponents/Library/lists/folders/index.jsx b/...components/Library/lists/folders/index.js → ...omponents/Library/lists/folders/index.jsx
diff --git a/...app/src/components/Library/lists/index.js → ...pp/src/components/Library/lists/index.jsx b/...app/src/components/Library/lists/index.js → ...pp/src/components/Library/lists/index.jsx
diff --git a/...src/components/Library/selector-header.js → ...rc/components/Library/selector-header.jsx b/...src/components/Library/selector-header.js → ...rc/components/Library/selector-header.jsx
diff --git a/...webapp/src/components/Navigation/index.js → ...ebapp/src/components/Navigation/index.jsx b/...webapp/src/components/Navigation/index.js → ...ebapp/src/components/Navigation/index.jsx
diff --git a/src/webapp/src/components/Player/controls.js → ...webapp/src/components/Player/controls.jsx b/src/webapp/src/components/Player/controls.js → ...webapp/src/components/Player/controls.jsx
diff --git a/src/webapp/src/components/Player/cover.js → src/webapp/src/components/Player/cover.jsx b/src/webapp/src/components/Player/cover.js → src/webapp/src/components/Player/cover.jsx
diff --git a/src/webapp/src/components/Player/display.js → src/webapp/src/components/Player/display.jsx b/src/webapp/src/components/Player/display.js → src/webapp/src/components/Player/display.jsx
diff --git a/src/webapp/src/components/Player/index.js → src/webapp/src/components/Player/index.jsx b/src/webapp/src/components/Player/index.js → src/webapp/src/components/Player/index.jsx
diff --git a/src/webapp/src/components/Player/seekbar.js → src/webapp/src/components/Player/seekbar.jsx b/src/webapp/src/components/Player/seekbar.js → src/webapp/src/components/Player/seekbar.jsx
diff --git a/src/webapp/src/components/Player/volume.js → src/webapp/src/components/Player/volume.jsx b/src/webapp/src/components/Player/volume.js → src/webapp/src/components/Player/volume.jsx
diff --git a/...pp/src/components/Settings/audio/index.js → ...p/src/components/Settings/audio/index.jsx b/...pp/src/components/Settings/audio/index.js → ...p/src/components/Settings/audio/index.jsx
diff --git a/...c/components/Settings/audio/max-volume.js → .../components/Settings/audio/max-volume.jsx b/...c/components/Settings/audio/max-volume.js → .../components/Settings/audio/max-volume.jsx
diff --git a/.../src/components/Settings/audio/outputs.js → ...src/components/Settings/audio/outputs.jsx b/.../src/components/Settings/audio/outputs.js → ...src/components/Settings/audio/outputs.jsx
diff --git a/...pp/src/components/Settings/autohotspot.js → ...p/src/components/Settings/autohotspot.jsx b/...pp/src/components/Settings/autohotspot.js → ...p/src/components/Settings/autohotspot.jsx
diff --git a/...src/components/Settings/dialogs/reboot.js → ...rc/components/Settings/dialogs/reboot.jsx b/...src/components/Settings/dialogs/reboot.js → ...rc/components/Settings/dialogs/reboot.jsx
diff --git a/...c/components/Settings/dialogs/shutdown.js → .../components/Settings/dialogs/shutdown.jsx b/...c/components/Settings/dialogs/shutdown.js → .../components/Settings/dialogs/shutdown.jsx
diff --git a/.../src/components/Settings/general/index.js → ...src/components/Settings/general/index.jsx b/.../src/components/Settings/general/index.js → ...src/components/Settings/general/index.jsx
diff --git a/...omponents/Settings/general/show-covers.js → ...mponents/Settings/general/show-covers.jsx b/...omponents/Settings/general/show-covers.js → ...mponents/Settings/general/show-covers.jsx
diff --git a/...mponents/Settings/helpers/battery-icon.js → ...ponents/Settings/helpers/battery-icon.jsx b/...mponents/Settings/helpers/battery-icon.js → ...ponents/Settings/helpers/battery-icon.jsx
diff --git a/src/webapp/src/components/Settings/index.js → src/webapp/src/components/Settings/index.jsx b/src/webapp/src/components/Settings/index.js → src/webapp/src/components/Settings/index.jsx
diff --git a/...pp/src/components/Settings/secondswipe.js → ...p/src/components/Settings/secondswipe.jsx b/...pp/src/components/Settings/secondswipe.js → ...p/src/components/Settings/secondswipe.jsx
diff --git a/...src/components/Settings/status/battery.js → ...rc/components/Settings/status/battery.jsx b/...src/components/Settings/status/battery.js → ...rc/components/Settings/status/battery.jsx
diff --git a/...rc/components/Settings/status/cpu-temp.js → ...c/components/Settings/status/cpu-temp.jsx b/...rc/components/Settings/status/cpu-temp.js → ...c/components/Settings/status/cpu-temp.jsx
diff --git a/.../components/Settings/status/disk-usage.js → ...components/Settings/status/disk-usage.jsx b/.../components/Settings/status/disk-usage.js → ...components/Settings/status/disk-usage.jsx
diff --git a/...p/src/components/Settings/status/index.js → .../src/components/Settings/status/index.jsx b/...p/src/components/Settings/status/index.js → .../src/components/Settings/status/index.jsx
diff --git a/.../components/Settings/status/ip-address.js → ...components/Settings/status/ip-address.jsx b/.../components/Settings/status/ip-address.js → ...components/Settings/status/ip-address.jsx
diff --git a/...src/components/Settings/status/version.js → ...rc/components/Settings/status/version.jsx b/...src/components/Settings/status/version.js → ...rc/components/Settings/status/version.jsx
diff --git a/...src/components/Settings/systemcontrols.js → ...rc/components/Settings/systemcontrols.jsx b/...src/components/Settings/systemcontrols.js → ...rc/components/Settings/systemcontrols.jsx
diff --git a/...p/src/components/Settings/timers/index.js → .../src/components/Settings/timers/index.jsx b/...p/src/components/Settings/timers/index.js → .../src/components/Settings/timers/index.jsx
diff --git a/...nents/Settings/timers/set-timer-dialog.js → ...ents/Settings/timers/set-timer-dialog.jsx b/...nents/Settings/timers/set-timer-dialog.js → ...ents/Settings/timers/set-timer-dialog.jsx
diff --git a/...p/src/components/Settings/timers/timer.js → .../src/components/Settings/timers/timer.jsx b/...p/src/components/Settings/timers/timer.js → .../src/components/Settings/timers/timer.jsx
diff --git a/...app/src/components/general/SliderTimer.js → ...pp/src/components/general/SliderTimer.jsx b/...app/src/components/general/SliderTimer.js → ...pp/src/components/general/SliderTimer.jsx
diff --git a/...rc/components/general/SwitchWithLoader.js → ...c/components/general/SwitchWithLoader.jsx b/...rc/components/general/SwitchWithLoader.js → ...c/components/general/SwitchWithLoader.jsx
diff --git a/src/webapp/src/context/appsettings/index.js → src/webapp/src/context/appsettings/index.jsx b/src/webapp/src/context/appsettings/index.js → src/webapp/src/context/appsettings/index.jsx
diff --git a/src/webapp/src/context/player/index.js → src/webapp/src/context/player/index.jsx b/src/webapp/src/context/player/index.js → src/webapp/src/context/player/index.jsx
diff --git a/src/webapp/src/context/pubsub/index.js → src/webapp/src/context/pubsub/index.jsx b/src/webapp/src/context/pubsub/index.js → src/webapp/src/context/pubsub/index.jsx
diff --git a/src/webapp/src/index.js → src/webapp/src/index.jsx b/src/webapp/src/index.js → src/webapp/src/index.jsx
diff --git a/src/webapp/src/router.js → src/webapp/src/router.jsx b/src/webapp/src/router.js → src/webapp/src/router.jsx
diff --git a/src/webapp/vite.config.js b/src/webapp/vite.config.js
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import reactSWC from '@vitejs/plugin-react-swc'
+import checker from 'vite-plugin-checker';
+
+// https://vite.dev/config/
+export default defineConfig({
+  build: {
+    outDir: 'build',
+  },
+  define: {
+    // Workaround for jszmq -> assert -> util
+    'process.env': {},
+  },
+  plugins: [
+    checker({
+      eslint: {
+        lintCommand: 'eslint "./src/**/*.{js,jsx}"',
+      },
+    }),
+    reactSWC({
+      plugins: [['@swc/plugin-emotion', {}]]
+    }),
+  ],
+  server: {
+    open: true
+  }
+})