Add platform detection functionality and cache implementation

Author: Ipmake

frontend/src/common/DesktopApp.ts

@@ -0,0 +1,19 @@
+export interface DesktopPlatformVersion {
+    appVersion: string; // 1.0.0
+    arch: string; // x64
+    platform: string; // linux
+    version: string; // 6.15.7-1-MANJARO
+}
+
+export async function getPlatform(): Promise<DesktopPlatformVersion | null> {
+    if ((window as any).electronAPI) {
+        return await (window as any).electronAPI.getPlatform();
+    }
+    return null;
+}
+
+export const platformCache: {
+    platform: DesktopPlatformVersion | null;
+} = {
+    platform: null
+};

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@emotion/react";
 import { CssBaseline, createTheme } from "@mui/material";
 import { BrowserRouter } from "react-router-dom";
 import { makeid, uuidv4 } from "./plex/QuickFunctions";
+import { getPlatform, platformCache } from "./common/DesktopApp";
 
 import "@fontsource-variable/quicksand";
 import "@fontsource-variable/rubik";
@@ -37,6 +38,19 @@ const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 
+getPlatform().then((platformData) => {
+  if(!platformData) return;
+
+  // make platformData.platform lowercase but capitalize the first letter
+  platformData.platform = platformData.platform.charAt(0).toUpperCase() + platformData.platform.slice(1).toLowerCase();
+
+  platformCache.platform = platformData;
+
+  if (platformCache.platform)
+    console.log("Platform detected:", platformCache.platform);
+  else console.warn("Platform detection failed.");
+});
+
 root.render(
   <ThemeProvider
     theme={createTheme({
@@ -99,7 +113,7 @@ root.render(
           styleOverrides: {
             root: {
               height: "100vh",
-              zIndex: 200
+              zIndex: 200,
             },
           },
         },
@@ -111,4 +125,4 @@ root.render(
       <App />
     </BrowserRouter>
   </ThemeProvider>
-);
+);

frontend/src/plex/QuickFunctions.ts

@@ -1,4 +1,5 @@
 import { ProxiedRequest } from "../backendURL";
+import { platformCache } from "../common/DesktopApp";
 import { useSessionStore } from "../states/SessionState";
 
 export async function authedGet(url: string) {
@@ -52,8 +53,8 @@ export function getXPlexProps() {
         "X-Plex-Product": "NEVU",
         "X-Plex-Version": "0.1.0",
         "X-Plex-Client-Identifier": localStorage.getItem("clientID"),
-        "X-Plex-Platform": getBrowserName(),
-        "X-Plex-Platform-Version": getBrowserVersion(),
+        "X-Plex-Platform": platformCache.platform?.platform ?? getBrowserName(),
+        "X-Plex-Platform-Version": platformCache.platform?.version ?? getBrowserVersion(),
         "X-Plex-Features": "external-media,indirect-media,hub-style-list",
         "X-Plex-Model": "bundled",
         "X-Plex-Device": getBrowserName(),