Merge pull request toniebox-reverse-engineering#96 from henryk86/swit…

…chToVite

use recommended package, fixed tap editor json preview

README.md

@@ -129,38 +129,11 @@ If none of the existing methods meet your needs, add the new request to `src/api
 
 As the `img_unknown.png` is part of the teddycloud server, normally it's not shown in the running dev environment. To solve that you can do the following:
 
-1. Add `img_unknown.png` to the `/public` folder.
-2. Create the file `setupProxy.js` in `/src` with the following content:
-
-```javascript
-const { createProxyMiddleware } = require("http-proxy-middleware");
-module.exports = function (app) {
-    app.use(
-        "/img_unknown.png",
-        createProxyMiddleware({
-            target: "http://localhost:" + import.meta.env.VITE_APP_TEDDYCLOUD_PORT_HTTP,
-            changeOrigin: true,
-            pathRewrite: {
-                "^/img_unknown.png": import.meta.env.VITE_APP_TEDDYCLOUD_WEB_BASE + "/img_unknown.png",
-            },
-        })
-    );
-    app.use(
-        "/img_unknown.png",
-        createProxyMiddleware({
-            target: "https://localhost:" + import.meta.env.VITE_APP_TEDDYCLOUD_PORT_HTTPS,
-            changeOrigin: true,
-            pathRewrite: {
-                "^/img_unknown.png": import.meta.env.VITE_APP_TEDDYCLOUD_WEB_BASE + "/img_unknown.png",
-            },
-        })
-    );
-};
-```
+1. Just add `img_unknown.png` to the `/public` folder.
 
-3. Restart the dev environment.
+2. Restart the dev environment.
 
-After these steps, the _img_unknown.png_ should be shown. Both files are already part of the file `.gitignore` so you do not have to care about accidentially committing them.
+After these steps, the _img_unknown.png_ should be shown. The file is already part of the file `.gitignore` so you do not have to care about accidentially committing this file.
 
 ### Crashing Dev Environment
 

src/components/tonies/TonieAudioPlaylistEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Modal, Form, Input, Button, Space, Alert } from "antd";
+import { Modal, Form, Input, Button, Space, Alert, theme } from "antd";
 import { CloseOutlined, FolderOpenOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { FileBrowser } from "../utils/FileBrowser";
@@ -26,13 +26,16 @@ export interface TonieAudioPlaylistEditorProps {
     onCancel: () => void;
 }
 
+const { useToken } = theme;
+
 const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
     open,
     initialValuesJson,
     onCreate,
     onCancel,
 }) => {
     const { t } = useTranslation();
+    const { token } = useToken();
     const [form] = Form.useForm<FormValues>();
     const [selectedFiles, setSelectedFiles] = useState<FileItem[]>([]);
     const [isSelectFileModalOpen, setSelectFileModalOpen] = useState(false);
@@ -120,6 +123,7 @@ const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
 
     // just for now, can be removed later when API is available
     const [jsonData, setJsonData] = useState<string>("");
+    const [jsonDataMinimized, setJsonDataMinimized] = useState<string>("");
     const [jsonViewerModalOpened, setJsonViewerModalOpened] = useState(false);
 
     const jsonViewerModalFooter = (
@@ -176,7 +180,7 @@ const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
                             border: "none",
                         }}
                     >
-                        {JSON.stringify(jsonData, null, 0)}
+                        {jsonDataMinimized}
                     </SyntaxHighlighter>
                 </>
             ) : (
@@ -186,6 +190,24 @@ const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
     );
     // end removal json viewer
 
+    const selectModalFooter = (
+        <div
+            style={{
+                display: "flex",
+                gap: 8,
+                justifyContent: "flex-end",
+                padding: "16px 0",
+                margin: "-24px -24px -12px -24px",
+                background: token.colorBgElevated,
+            }}
+        >
+            <Button onClick={handleCancelSelectFile}>{t("tonies.selectFileModal.cancel")}</Button>
+            <Button type="primary" onClick={handleOkSelectFile}>
+                {t("tonies.selectFileModal.ok")}
+            </Button>
+        </div>
+    );
+
     return (
         <>
             <Modal
@@ -203,6 +225,7 @@ const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
                             onCreate(form.getFieldsValue() as FormValues);
                             //remove that if the API is available
                             setJsonData(JSON.stringify(form.getFieldsValue(), null, 2));
+                            setJsonDataMinimized(JSON.stringify(form.getFieldsValue(), null, 0));
                             setJsonViewerModalOpened(true);
                             resetForm();
                         })
@@ -229,6 +252,9 @@ const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
                         files: [],
                     }}
                 >
+                    <Form.Item name="type" hidden label="type">
+                        <Input type="string" />
+                    </Form.Item>
                     <Form.Item name="audio_id" label="Audio ID">
                         <Input type="number" />
                     </Form.Item>
@@ -309,11 +335,13 @@ const TonieAudioPlaylistEditor: React.FC<TonieAudioPlaylistEditorProps> = ({
                     </Form.List>
                 </Form>
                 <Modal
+                    className="sticky-footer"
                     title={t("tonies.selectFileModal.selectFile")}
                     open={isSelectFileModalOpen}
                     onOk={handleOkSelectFile}
                     onCancel={handleCancelSelectFile}
                     width="auto"
+                    footer={selectModalFooter}
                 >
                     <FileBrowser
                         maxSelectedRows={99}

vite.config.ts

@@ -7,24 +7,34 @@ import path from "path";
 export default defineConfig(({ command, mode }) => {
     const portHttp = parseInt(process.env.VITE_APP_TEDDYCLOUD_PORT_HTTP || "3000", 10);
     const portHttps = parseInt(process.env.VITE_APP_TEDDYCLOUD_PORT_HTTPS || "3443", 10);
+    const baseApiUrl = process.env.VITE_APP_TEDDYCLOUD_API_URL || "http://localhost";
     const useHttps = process.env.HTTPS === "true";
 
-    // Define HTTPS options if needed
     const httpsOptions = useHttps
         ? {
               key: fs.readFileSync(path.resolve(__dirname, "./localhost-key.pem")),
               cert: fs.readFileSync(path.resolve(__dirname, "./localhost.pem")),
           }
         : undefined;
 
+    const targetUrl = useHttps ? `https://localhost:${portHttps}` : `http://localhost:${portHttp}`;
+
     return {
         base: "/web",
         plugins: [react(), viteTsconfigPaths()],
         server: {
             open: true,
             port: useHttps ? portHttps : portHttp,
             host: "localhost",
-            https: httpsOptions, // Use the HTTPS options if defined
+            https: httpsOptions,
+            proxy: {
+                "/img_unknown.png": {
+                    target: targetUrl,
+                    changeOrigin: true,
+                    rewrite: (path) => path.replace(/^\/img_unknown\.png/, `${baseApiUrl}/web/img_unknown.png`),
+                    secure: false,
+                },
+            },
         },
     };
 });