Show webui version from server

crates/librqbit/src/http_api.rs

@@ -66,6 +66,7 @@ impl HttpApi {
                     "GET /web/": "Web UI",
                 },
                 "server": "rqbit",
+                "version": env!("CARGO_PKG_VERSION"),
             }))
         }
 

crates/librqbit/webui/dist/manifest.json

@@ -4,7 +4,7 @@
     "src": "assets/logo.svg"
   },
   "index.html": {
-    "file": "assets/index-a37dffc7.js",
+    "file": "assets/index-f791e636.js",
     "isEntry": true,
     "src": "index.html"
   }

crates/librqbit/webui/src/http-api.ts

@@ -46,7 +46,7 @@ const makeRequest = async (method: string, path: string, data?: any): Promise<an
     return result;
 }
 
-export const API: RqbitAPI = {
+export const API: RqbitAPI & { getVersion: () => Promise<string> } = {
     listTorrents: (): Promise<ListTorrentsResponse> => makeRequest('GET', '/torrents'),
     getTorrentDetails: (index: number): Promise<TorrentDetails> => {
         return makeRequest('GET', `/torrents/${index}`);
@@ -95,5 +95,9 @@ export const API: RqbitAPI = {
 
     delete: (index: number): Promise<void> => {
         return makeRequest('POST', `/torrents/${index}/delete`);
+    },
+    getVersion: async (): Promise<string> => {
+        const r = await makeRequest('GET', '/');
+        return r.version;
     }
 }

crates/librqbit/webui/src/main.tsx

@@ -1,12 +1,27 @@
-import { StrictMode } from "react";
+import { StrictMode, useEffect, useState } from "react";
 import ReactDOM from 'react-dom/client';
-import { RqbitWebUI, APIContext } from "./rqbit-web";
+import { RqbitWebUI, APIContext, customSetInterval } from "./rqbit-web";
 import { API } from "./http-api";
 
-ReactDOM.createRoot(document.getElementById('app') as HTMLInputElement).render(
-    <StrictMode>
+const RootWithVersion = () => {
+    let [title, setTitle] = useState<string>("rqbit web UI");
+    useEffect(() => {
+        const refreshVersion = () => API.getVersion().then((version) => {
+            setTitle(`rqbit web UI - v${version}`);
+            return 10000;
+        }, (e) => {
+            return 1000;
+        });
+        return customSetInterval(refreshVersion, 0)
+    }, [])
+
+    return <StrictMode>
         <APIContext.Provider value={API}>
-            <RqbitWebUI title="rqbit web UI - v5.0.0-beta.0" />
+            <RqbitWebUI title={title} />
         </APIContext.Provider>
-    </StrictMode>
+    </StrictMode>;
+}
+
+ReactDOM.createRoot(document.getElementById('app') as HTMLInputElement).render(
+    <RootWithVersion />
 );

crates/librqbit/webui/src/rqbit-web.tsx

@@ -786,7 +786,7 @@ function formatSecondsToTime(seconds: number): string {
 // Run a function with initial interval, then run it forever with the interval that the
 // callback returns.
 // Returns a callback to clear it.
-function customSetInterval(asyncCallback: () => Promise<number>, initialInterval: number): () => void {
+export function customSetInterval(asyncCallback: () => Promise<number>, initialInterval: number): () => void {
     let timeoutId: number;
     let currentInterval: number = initialInterval;
 
@@ -809,7 +809,7 @@ function customSetInterval(asyncCallback: () => Promise<number>, initialInterval
     };
 }
 
-function loopUntilSuccess<T>(callback: () => Promise<T>, interval: number): () => void {
+export function loopUntilSuccess<T>(callback: () => Promise<T>, interval: number): () => void {
     let timeoutId: number;
 
     const executeCallback = async () => {