Go2RTC configuration editor

docker/rootfs/usr/local/nginx/conf/nginx.conf

@@ -204,6 +204,15 @@ http {
             proxy_set_header Host $host;
         }
 
+        location /api/go2rtc/ {
+            proxy_pass http://go2rtc/;
+            rewrite ^/api/go2rtc/(.*)$ /api/$1 break;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_set_header Host $host;
+        }
+        
         location ~* /api/.*\.(jpg|jpeg|png)$ {
             add_header 'Access-Control-Allow-Origin' '*';
             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';

web/src/Sidebar.jsx

@@ -48,6 +48,7 @@ export default function Sidebar() {
       <Destination href="/storage" text="Storage" />
       <Destination href="/system" text="System" />
       <Destination href="/config" text="Config" />
+      <Destination href="/go2rtc" text="Go2RTC" />
       <Destination href="/logs" text="Logs" />
       <Separator />
       <div className="flex flex-grow" />

web/src/app.tsx

@@ -38,6 +38,7 @@ export default function App() {
                   <AsyncRoute path="/storage" getComponent={Routes.getStorage} />
                   <AsyncRoute path="/system" getComponent={Routes.getSystem} />
                   <AsyncRoute path="/config" getComponent={Routes.getConfig} />
+                  <AsyncRoute path="/go2rtc" getComponent={Routes.getGo2RTC} />
                   <AsyncRoute path="/logs" getComponent={Routes.getLogs} />
                   <AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
                   <Cameras default path="/" />

web/src/routes/Go2RTC.jsx

@@ -0,0 +1,97 @@
+import { h } from 'preact';
+import useSWR from 'swr';
+import axios from 'axios';
+import { useApiHost } from '../api';
+import ActivityIndicator from '../components/ActivityIndicator';
+import Heading from '../components/Heading';
+import { useEffect, useState } from 'preact/hooks';
+import Button from '../components/Button';
+import { editor, Uri } from 'monaco-editor';
+import { setDiagnosticsOptions } from 'monaco-yaml';
+import copy from 'copy-to-clipboard';
+
+export default function Go2RTC() {
+  const apiHost = useApiHost();
+
+  const { data: config } = useSWR('go2rtc/config');
+  const [success, setSuccess] = useState();
+  const [error, setError] = useState();
+
+  const onHandleSaveConfig = async (e) => {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    axios
+      .post('go2rtc/config', window.editor.getValue(), {
+        headers: { 'Content-Type': 'text/plain' },
+      })
+      .then((response) => {
+        if (response.status === 200) {
+          setSuccess(response.data);
+        }
+      })
+      .catch((error) => {
+        if (error.response) {
+          setError(error.response.data.message);
+        } else {
+          setError(error.message);
+        }
+      });
+  };
+
+  const handleCopyConfig = async () => {
+    copy(window.editor.getValue());
+  };
+
+  useEffect(() => {
+    if (!config) {
+      return;
+    }
+
+    if (document.getElementById('container_go2rtc').children.length > 0) {
+      // we don't need to recreate the editor if it already exists
+      return;
+    }
+
+    setDiagnosticsOptions({
+      enableSchemaRequest: true,
+      hover: true,
+      completion: true,
+      validate: true,
+      format: true,
+    });
+    
+    window.editor = editor.create(document.getElementById('container_go2rtc'), {
+      language: 'yaml',
+      value: config,
+      scrollBeyondLastLine: false,
+      theme: 'vs-dark',
+    });
+  });
+
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div className="space-y-4 p-2 px-4 h-full">
+      <div className="flex justify-between">
+        <Heading>go2rtc</Heading>
+        <div>
+          <Button className="mx-2" onClick={(e) => handleCopyConfig(e)}>
+            Copy Config
+          </Button>
+          <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e)}>
+            Save & Restart
+          </Button>
+        </div>
+      </div>
+
+      {success && <div className="max-h-20 text-green-500">{success}</div>}
+      {error && <div className="p-4 overflow-scroll text-red-500 whitespace-pre-wrap">{error}</div>}
+
+      <div id="container_go2rtc" className="h-full" />
+    </div>
+  );
+}

web/src/routes/index.js

@@ -43,6 +43,11 @@ export async function getConfig(_url, _cb, _props) {
   return module.default;
 }
 
+export async function getGo2RTC(_url, _cb, _props) {
+  const module = await import('./Go2RTC.jsx');
+  return module.default;
+}
+
 export async function getLogs(_url, _cb, _props) {
   const module = await import('./Logs.jsx');
   return module.default;