Fix to address #229 Base urls. Alot of hacky code here. hope it doesnt break

.vscode/launch.json

@@ -1,27 +1,33 @@
 {
-    "version": "0.2.0",
+  "version": "0.2.0",
-    "configurations": [
+  "configurations": [
-        {
+    {
-            "type": "chrome",
+      "type": "chrome",
-            "request": "launch",
+      "request": "launch",
-            "name": "Launch Chrome against localhost",
+      "name": "Launch Chrome against localhost",
-            "url": "http://10.0.0.20:3000",
+      "url": "http://10.0.0.20:3000",
-            "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}"
-        },
+    },
-        {
+    {
-            "type": "node-terminal",
+      "type": "node-terminal",
-            "name": "Run Script: start",
+      "name": "Run Script: start",
-            "request": "launch",
+      "request": "launch",
-            "command": "npm run start",
+      "command": "npm run start",
-            "cwd": "${workspaceFolder}"
+      "cwd": "${workspaceFolder}"
-        }
+    },
-        ,
+    {
-        {
+      "type": "node-terminal",
-            "type": "node-terminal",
+      "name": "Run Script: start client",
-            "name": "Run Script: start-server",
+      "request": "launch",
-            "request": "launch",
+      "command": "npm run start-client",
-            "command": "npm run start-server",
+      "cwd": "${workspaceFolder}"
-            "cwd": "${workspaceFolder}"
+    },
-        }
+    {
-    ]
+      "type": "node-terminal",
-}
+      "name": "Run Script: start-server",
+      "request": "launch",
+      "command": "npm run start-server",
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}

backend/classes/env.js

@@ -2,9 +2,11 @@ const fs = require("fs");
 const path = require("path");
 
 async function writeEnvVariables() {
+  //Define sensitive variables that should not be exposed
+  const excludedVariables = ["JS_GEOLITE_LICENSE_KEY", "JS_USER", "JS_PASSWORD"];
   // Fetch environment variables that start with JS_
   const envVariables = Object.keys(process.env).reduce((acc, key) => {
-    if (key.startsWith("JS_")) {
+    if (key.startsWith("JS_") && !excludedVariables.includes(key)) {
       acc[key] = process.env[key];
     }
     return acc;

backend/server.js

@@ -1,6 +1,7 @@
 // core
 require("dotenv").config();
 const http = require("http");
+const fs = require("fs");
 const path = require("path");
 const express = require("express");
 const compression = require("compression");
@@ -36,9 +37,20 @@ const writeEnvVariables = require("./classes/env");
 const app = express();
 const db = knex(knexConfig.development);
 
+const ensureSlashes = (url) => {
+  if (!url.startsWith("/")) {
+    url = "/" + url;
+  }
+  if (url.endsWith("/")) {
+    url = url.slice(0, -1);
+  }
+  return url;
+};
+
 const PORT = 3000;
 const LISTEN_IP = "0.0.0.0";
 const JWT_SECRET = process.env.JWT_SECRET;
+const BASE_NAME = process.env.JS_BASE_URL ? ensureSlashes(process.env.JS_BASE_URL) : "";
 
 if (JWT_SECRET === undefined) {
   console.log("JWT Secret cannot be undefined");
@@ -68,8 +80,60 @@ function typeInferenceMiddleware(req, res, next) {
 
 app.use(typeInferenceMiddleware);
 
+const findFile = (dir, fileName) => {
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat.isDirectory()) {
+      const result = findFile(fullPath, fileName);
+      if (result) {
+        return result;
+      }
+    } else if (file === fileName) {
+      return fullPath;
+    }
+  }
+  return null;
+};
+
+const root = path.join(__dirname, "..", "dist");
+
+//hacky middleware to handle basename changes for UI
+
+app.use((req, res, next) => {
+  // Ignore requests containing 'socket.io'
+  if (req.url.includes("socket.io")) {
+    return next();
+  }
+
+  const fileRegex = /\/([^\/]+\.(css|ico|js|json|png))$/;
+  const match = req.url.match(fileRegex);
+  if (match) {
+    // Extract the file name
+    const fileName = match[1];
+
+    //Exclude translation.json from this hack as it messes up the translations by returning the first file regardless of language chosen
+    if (fileName != "translation.json") {
+      // Find the file
+      const filePath = findFile(root, fileName);
+      if (filePath) {
+        return res.sendFile(filePath);
+      } else {
+        return res.status(404).send("File not found");
+      }
+    }
+  }
+
+  if (BASE_NAME && req.url.startsWith(BASE_NAME) && req.url !== BASE_NAME) {
+    req.url = req.url.slice(BASE_NAME.length);
+    // console.log("URL: " + req.url);
+  }
+  next();
+});
+
 // initiate routes
-app.use("/auth", authRouter, () => {
+app.use(`/auth`, authRouter, () => {
   /*  #swagger.tags = ['Auth'] */
 }); // mount the API router at /auth
 app.use("/proxy", proxyRouter, () => {
@@ -99,9 +163,11 @@ app.use("/swagger", swaggerUi.serve, swaggerUi.setup(swaggerDocument));
 
 // for deployment of static page
 writeEnvVariables().then(() => {
-  const root = path.join(__dirname, "..", "dist");
   app.use(express.static(root));
-  app.get("*", (req, res) => {
+  app.get("*", (req, res, next) => {
+    if (req.url.includes("socket.io")) {
+      return next();
+    }
     res.sendFile(path.join(__dirname, "..", "dist", "index.html"));
   });
 });
@@ -163,7 +229,7 @@ try {
     db.migrate.latest().then(() => {
       const server = http.createServer(app);
 
-      setupWebSocketServer(server);
+      setupWebSocketServer(server, BASE_NAME);
       server.listen(PORT, LISTEN_IP, async () => {
         console.log(`[JELLYSTAT] Server listening on http://127.0.0.1:${PORT}`);
         ActivityMonitor.ActivityMonitor(1000);

backend/ws.js

@@ -1,27 +1,30 @@
 // ws.js
-const socketIO = require('socket.io');
+const socketIO = require("socket.io");
 
 let io; // Store the socket.io server instance
 
-const setupWebSocketServer = (server) => {
+const setupWebSocketServer = (server, namespacePath) => {
-  io = socketIO(server);
+  io = socketIO(server, { path: namespacePath + "/socket.io" }); // Create the socket.io server
 
-  io.on('connection', (socket) => {
+  io.on("connection", (socket) => {
-    // console.log('Client connected');
+    console.log("Client connected to namespace:", namespacePath);
-
-    socket.on('message', (message) => {
-      // console.log(`Received: ${message}`);
 
+    socket.on("message", (message) => {
+      console.log(`Received: ${message}`);
     });
   });
 };
 
 const sendToAllClients = (message) => {
-  io.emit('message', message);
+  if (io) {
+    io.emit("message", message);
+  }
 };
 
-const sendUpdate = (tag,message) => {
+const sendUpdate = (tag, message) => {
-  io.emit(tag, message);
+  if (io) {
+    io.emit(tag, message);
+  }
 };
 
 module.exports = { setupWebSocketServer, sendToAllClients, sendUpdate };

index.html

@@ -2,23 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Jellyfin stats for the masses" />
-    <link rel="apple-touch-icon" href="/icon-b-192.png" />
+    <link rel="apple-touch-icon" href="icon-b-192.png" />
-    <script src="/env.js"></script>
+    <script src="env.js"></script>
     <!--
       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" />
+    <link rel="manifest" href="manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->

src/App.jsx

@@ -2,7 +2,7 @@
 import "./App.css";
 import React, { useState, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
-import axios from "axios";
+import axios from "./lib/axios_instance";
 
 import socket from "./socket";
 import { ToastContainer, toast } from "react-toastify";

src/index.jsx

@@ -13,20 +13,7 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
 import Loading from "./pages/components/general/loading.jsx";
-import routes from "./routes.jsx";
+import baseUrl from "./lib/baseurl.jsx";
-
-const baseUrl = window.env.JS_BASE_URL ?? import.meta.env.JS_BASE_URL ?? "/";
-let validBaseUrls = [...new Set([baseUrl, ...routes.map((route) => "/" + route.path.split("/")[1])])];
-if (baseUrl != "/") {
-  validBaseUrls = validBaseUrls.filter((url) => url != "/");
-}
-const locationBase = "/" + window.location.pathname.split("/")[1];
-console.log("Base URL: ", baseUrl);
-console.log("Valid Base URLs: ", validBaseUrls);
-
-if (!validBaseUrls.includes(locationBase)) {
-  window.location.assign(baseUrl);
-}
 
 i18n
   .use(Backend)
@@ -35,6 +22,9 @@ i18n
   .init({
     fallbackLng: "en-UK",
     debug: false,
+    backend: {
+      loadPath: `${baseUrl}/locales/{{lng}}/{{ns}}.json`,
+    },
     detection: {
       order: ["cookie", "localStorage", "sessionStorage", "navigator", "htmlTag", "querystring", "path", "subdomain"],
       cache: ["cookie"],

src/lib/axios_instance.jsx

@@ -1,5 +1,6 @@
 import Axios from "axios";
+import baseUrl from "./baseurl";
 
-const axios = Axios.create();
+const axios = Axios.create({ baseURL: baseUrl });
 
 export default axios;

src/lib/baseurl.jsx

@@ -0,0 +1,11 @@
+const ensureSlashes = (url) => {
+  if (!url.startsWith("/")) {
+    url = "/" + url;
+  }
+  if (url.endsWith("/")) {
+    url = url.slice(0, -1);
+  }
+  return url;
+};
+const baseUrl = window.env?.JS_BASE_URL ? ensureSlashes(window.env?.JS_BASE_URL) : "";
+export default baseUrl;

src/lib/config.jsx

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "../lib/axios_instance";
 
 class Config {
   async fetchConfig() {

src/pages/about.jsx

@@ -1,31 +1,28 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../lib/axios_instance";
-import Row from 'react-bootstrap/Row';
+import Row from "react-bootstrap/Row";
-import Col from 'react-bootstrap/Col';
+import Col from "react-bootstrap/Col";
 import Loading from "./components/general/loading";
 
-
 import "./css/about.css";
 import { Card } from "react-bootstrap";
 import { Trans } from "react-i18next";
 
 export default function SettingsAbout() {
-
+  const token = localStorage.getItem("token");
-  const token = localStorage.getItem('token');
   const [data, setData] = useState();
   useEffect(() => {
-
     const fetchVersion = () => {
       if (token) {
         const url = `/api/CheckForUpdates`;
 
         axios
-        .get(url, {
+          .get(url, {
-          headers: {
+            headers: {
-            Authorization: `Bearer ${token}`,
+              Authorization: `Bearer ${token}`,
-            "Content-Type": "application/json",
+              "Content-Type": "application/json",
-          },
+            },
-        })
+          })
           .then((data) => {
             setData(data.data);
           })
@@ -35,56 +32,51 @@ export default function SettingsAbout() {
       }
     };
 
-    if(!data)
+    if (!data) {
-    {
+      fetchVersion();
-        fetchVersion();
     }
 
     const intervalId = setInterval(fetchVersion, 60000 * 5);
     return () => clearInterval(intervalId);
-  }, [data,token]);
+  }, [data, token]);
-    
 
-  if(!data)
+  if (!data) {
-  {
+    return <Loading />;
-    return <Loading/>;
   }
 
-
+  return (
-    return (
+    <div className="tasks">
-      <div className="tasks">
+      <h1 className="py-3">
-        <h1 className="py-3"><Trans i18nKey={"ABOUT_PAGE.ABOUT_JELLYSTAT"}/></h1>
+        <Trans i18nKey={"ABOUT_PAGE.ABOUT_JELLYSTAT"} />
-    <Card  className="about p-0" >
+      </h1>
-       <Card.Body >
+      <Card className="about p-0">
-            <Row>
+        <Card.Body>
-                 <Col className="px-0">
+          <Row>
-                 <Trans i18nKey={"ABOUT_PAGE.VERSION"}/>:
+            <Col className="px-0">
-                 </Col>
+              <Trans i18nKey={"ABOUT_PAGE.VERSION"} />:
-                 <Col>
+            </Col>
-                 {data.current_version}
+            <Col>{data.current_version}</Col>
-                 </Col>
+          </Row>
-             </Row>
+          <Row style={{ color: data.update_available ? "#00A4DC" : "White" }}>
-             <Row style={{color:(data.update_available ? "#00A4DC": "White")}}>
+            <Col className="px-0">
-                 <Col className="px-0">
+              <Trans i18nKey={"ABOUT_PAGE.UPDATE_AVAILABLE"} />:
-                 <Trans i18nKey={"ABOUT_PAGE.UPDATE_AVAILABLE"}/>:
+            </Col>
-                 </Col>
+            <Col>{data.message}</Col>
-                 <Col>
+          </Row>
-                 {data.message}
+          <Row style={{ height: "20px" }}></Row>
-                 </Col>
+          <Row>
-             </Row>
+            <Col className="px-0">
-             <Row style={{height:'20px'}}></Row>
+              <Trans i18nKey={"ABOUT_PAGE.GITHUB"} />:
-             <Row>
+            </Col>
-                 <Col className="px-0">
+            <Col>
-                 <Trans i18nKey={"ABOUT_PAGE.GITHUB"}/>:
+              <a href="https://github.com/CyferShepard/Jellystat" target="_blank" rel="noreferrer">
-                 </Col>
+                {" "}
-                 <Col>
+                https://github.com/CyferShepard/Jellystat
-                 <a href="https://github.com/CyferShepard/Jellystat" target="_blank" rel="noreferrer" > https://github.com/CyferShepard/Jellystat</a>
+              </a>
-                 </Col>
+            </Col>
-             </Row>
+          </Row>
-       </Card.Body>
+        </Card.Body>
-   </Card>
+      </Card>
-   </div>
+    </div>
-    );
+  );
-
-
 }

src/pages/activity.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import axios from "axios";
+import axios from "../lib/axios_instance";
 
 import "./css/activity.css";
 import Config from "../lib/config";

src/pages/components/LibrarySelector/SelectionCard.jsx

@@ -1,5 +1,5 @@
 import {useState} from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import "../../css/library/library-card.css";
 
 import { Form  ,Card,Row,Col } from 'react-bootstrap';
@@ -9,6 +9,7 @@ import FilmLineIcon from "remixicon-react/FilmLineIcon";
 import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
 import CheckboxMultipleBlankLineIcon from "remixicon-react/CheckboxMultipleBlankLineIcon";
 import { Trans } from "react-i18next";
+import baseUrl from "../../../lib/baseurl";
 
 function SelectionCard(props) {
   const [imageLoaded, setImageLoaded] = useState(true);
@@ -54,7 +55,7 @@ function SelectionCard(props) {
                <Card.Img
                variant="top"
                className="library-card-banner default_library_image"
-               src={"/proxy/Items/Images/Primary?id=" + props.data.Id + "&fillWidth=800&quality=50"}
+               src={baseUrl+"/proxy/Items/Images/Primary?id=" + props.data.Id + "&fillWidth=800&quality=50"}
                onError={() =>setImageLoaded(false)}
                />
                :

src/pages/components/activity/activity-table.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import { enUS } from "@mui/material/locale";
 
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
@@ -155,8 +155,7 @@ export default function ActivityTable(props) {
         row = row.original;
         if (
           isRemoteSession(row.RemoteEndPoint) &&
-          (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) &&
+          (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID)
-          (window.env.JS_GEOLITE_LICENSE_KEY ?? import.meta.env.JS_GEOLITE_LICENSE_KEY)
         ) {
           return (
             <Link className="text-decoration-none" onClick={() => showIPDataModal(row.RemoteEndPoint)}>

src/pages/components/general/last-watched-card.jsx

@@ -6,6 +6,7 @@ import ArchiveDrawerFillIcon from "remixicon-react/ArchiveDrawerFillIcon";
 import "../../css/lastplayed.css";
 import { Trans } from "react-i18next";
 import i18next from "i18next";
+import baseUrl from "../../../lib/baseurl";
 
 function formatTime(time) {
   const units = {
@@ -42,7 +43,7 @@ function LastWatchedCard(props) {
           ) : null}
           {!props.data.archived ? (
             <img
-              src={`${"/proxy/Items/Images/Primary?id=" + props.data.Id + "&fillHeight=320&fillWidth=213&quality=50"}`}
+              src={`${baseUrl+"/proxy/Items/Images/Primary?id=" + props.data.Id + "&fillHeight=320&fillWidth=213&quality=50"}`}
               alt=""
               onLoad={() => setLoaded(true)}
               style={loaded ? { display: "block" } : { display: "none" }}

src/pages/components/general/version-card.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 

src/pages/components/ip-info.jsx

@@ -8,7 +8,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import axios from "axios";
+import axios from "../../lib/axios_instance";
 import { Trans } from "react-i18next";
 
 export default function IpInfoModal(props) {

src/pages/components/item-info.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../lib/axios_instance";
 import { useParams } from "react-router-dom";
 import { Link } from "react-router-dom";
 import { Blurhash } from "react-blurhash";
@@ -26,6 +26,7 @@ import TvLineIcon from "remixicon-react/TvLineIcon";
 import FilmLineIcon from "remixicon-react/FilmLineIcon";
 import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
 import CheckboxMultipleBlankLineIcon from "remixicon-react/CheckboxMultipleBlankLineIcon";
+import baseUrl from "../../lib/baseurl";
 
 function ItemInfo() {
   const { Id } = useParams();
@@ -207,7 +208,7 @@ function ItemInfo() {
                 <img
                   className="item-image"
                   src={
-                    "/proxy/Items/Images/Primary?id=" +
+                    baseUrl+"/proxy/Items/Images/Primary?id=" +
                     (["Episode", "Season"].includes(data.Type) ? data.SeriesId : data.Id) +
                     "&fillWidth=200&quality=90"
                   }

src/pages/components/item-info/globalStats.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import "../../css/globalstats.css";
 
 import WatchTimeStats from "./globalstats/watchtimestats";

src/pages/components/item-info/item-activity.jsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import ActivityTable from "../activity/activity-table";
 import { Trans } from "react-i18next";
-import { Button, FormControl, FormSelect } from "react-bootstrap";
+import { FormControl, FormSelect } from "react-bootstrap";
 import i18next from "i18next";
 
 function ItemActivity(props) {

src/pages/components/item-info/item-not-found.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import "../../css/error.css";
 import { Button } from "react-bootstrap";
 import Loading from "../general/loading";

src/pages/components/item-info/item-options.jsx

@@ -1,5 +1,5 @@
 
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import i18next from "i18next";
 import { useState } from "react";
 import { Container, Row,Col, Modal } from "react-bootstrap";

src/pages/components/item-info/more-items.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 
 import MoreItemCards from "./more-items/more-items-card";
 

src/pages/components/item-info/more-items/more-items-card.jsx

@@ -9,6 +9,7 @@ import TvLineIcon from "remixicon-react/TvLineIcon";
 import FilmLineIcon from "remixicon-react/FilmLineIcon";
 import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
 import CheckboxMultipleBlankLineIcon from "remixicon-react/CheckboxMultipleBlankLineIcon";
+import baseUrl from "../../../../lib/baseurl";
 
 function MoreItemCards(props) {
   const { Id } = useParams();
@@ -88,7 +89,7 @@ function MoreItemCards(props) {
                 </div>
               ) : (
                 <img
-                  src={`${"/proxy/Items/Images/Primary?id=" + Id + "&fillHeight=320&fillWidth=213&quality=50"}`}
+                  src={`${baseUrl+"/proxy/Items/Images/Primary?id=" + Id + "&fillHeight=320&fillWidth=213&quality=50"}`}
                   alt=""
                   onLoad={() => setLoaded(true)}
                   style={loaded ? { display: "block" } : { display: "none" }}
@@ -96,7 +97,7 @@ function MoreItemCards(props) {
               )
             ) : (
               <img
-                src={`${
+                src={`${baseUrl+
                   "/proxy/Items/Images/Primary?id=" +
                   (props.data.Type === "Episode" ? props.data.EpisodeId : props.data.Id) +
                   (props.data.Type === "Audio"

src/pages/components/library-info.jsx

@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../lib/axios_instance";
 import TvLineIcon from "remixicon-react/TvLineIcon";
 import FilmLineIcon from "remixicon-react/FilmLineIcon";
 

src/pages/components/library/RecentlyAdded/recently-added-card.jsx

@@ -8,6 +8,7 @@ import TvLineIcon from "remixicon-react/TvLineIcon";
 import FilmLineIcon from "remixicon-react/FilmLineIcon";
 import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
 import CheckboxMultipleBlankLineIcon from "remixicon-react/CheckboxMultipleBlankLineIcon";
+import baseUrl from "../../../../lib/baseurl";
 
 function RecentlyAddedCard(props) {
   const [loaded, setLoaded] = useState(false);
@@ -73,7 +74,7 @@ function RecentlyAddedCard(props) {
           ) : null}
           <img
             src={`${
-              "/proxy/Items/Images/Primary?id=" +
+              baseUrl+"/proxy/Items/Images/Primary?id=" +
               (props.data.Type === "Episode" ? props.data.SeriesId : props.data.Id) +
               "&fillHeight=320&fillWidth=213&quality=50"
             }`}

src/pages/components/library/last-watched.jsx

@@ -1,8 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
-
-// import ItemCardInfo from "./LastWatched/last-watched-card";
-
 import LastWatchedCard from "../general/last-watched-card";
 
 

src/pages/components/library/library-activity.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 
 import ActivityTable from "../activity/activity-table";
 import { Trans } from "react-i18next";

src/pages/components/library/library-card.jsx

@@ -12,6 +12,7 @@ import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
 import CheckboxMultipleBlankLineIcon from "remixicon-react/CheckboxMultipleBlankLineIcon";
 import { Trans } from "react-i18next";
 import i18next from "i18next";
+import baseUrl from "../../../lib/baseurl";
 
 function LibraryCard(props) {
   const [imageLoaded, setImageLoaded] = useState(true);
@@ -146,7 +147,7 @@ function LibraryCard(props) {
                <Card.Img
                variant="top"
                className="library-card-banner library-card-banner-hover"
-               src={"/proxy/Items/Images/Primary?id=" + props.data.Id + "&fillWidth=800&quality=50"}
+               src={baseUrl+"/proxy/Items/Images/Primary?id=" + props.data.Id + "&fillWidth=800&quality=50"}
                onError={() =>setImageLoaded(false)}
                />
                :

src/pages/components/library/library-items.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import { FormControl, FormSelect, Button } from "react-bootstrap";
 import SortAscIcon from "remixicon-react/SortAscIcon";
 import SortDescIcon from "remixicon-react/SortDescIcon";

src/pages/components/library/library-options.jsx

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import i18next from "i18next";
 import { useState } from "react";
 import { Container, Row, Col, Modal } from "react-bootstrap";

src/pages/components/library/library-stats.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import "../../css/globalstats.css";
 
 import WatchTimeStats from "./globalstats/watchtimestats";

src/pages/components/library/recently-added.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 
 import RecentlyAddedCard from "./RecentlyAdded/recently-added-card";
 

src/pages/components/libraryOverview.jsx

@@ -1,6 +1,6 @@
 import "../css/libraryOverview.css";
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../lib/axios_instance";
 import Loading from "./general/loading";
 
 import LibraryStatComponent from "./libraryStatCard/library-stat-component";

src/pages/components/playbackactivity.jsx

@@ -1,8 +1,5 @@
-import React, { useState, useEffect } from "react";
+import  { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../lib/axios_instance";
-// import Config from "../lib/config";
-
-// import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
 
 import "../css/users/users.css";
 

src/pages/components/sessions/session-card.jsx

@@ -14,6 +14,7 @@ import { clientData } from "../../../lib/devices";
 import Tooltip from "@mui/material/Tooltip";
 import IpInfoModal from "../ip-info";
 import { Trans } from "react-i18next";
+import baseUrl from "../../../lib/baseurl";
 
 function ticksToTimeString(ticks) {
   // Convert ticks to seconds
@@ -112,7 +113,7 @@ function SessionCard(props) {
                   : "stat-card-image rounded-0 rounded-start"
               }
               src={
-                "/proxy/Items/Images/Primary?id=" +
+                baseUrl+"/proxy/Items/Images/Primary?id=" +
                 (props.data.session.NowPlayingItem.SeriesId
                   ? props.data.session.NowPlayingItem.SeriesId
                   : props.data.session.NowPlayingItem.Id) +
@@ -164,8 +165,7 @@ function SessionCard(props) {
                     <Row>
                       <Col className="col-auto ellipse">
                         {isRemoteSession(props.data.session.RemoteEndPoint) &&
-                        (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) &&
+                        (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID)  ? (
-                        (window.env.JS_GEOLITE_LICENSE_KEY ?? import.meta.env.JS_GEOLITE_LICENSE_KEY) ? (
                           <Link
                             className="text-decoration-none text-white"
                             onClick={() => showIPDataModal(props.data.session.RemoteEndPoint)}
@@ -185,7 +185,7 @@ function SessionCard(props) {
                     <img
                       className="card-device-image"
                       src={
-                        "/proxy/web/assets/img/devices/?devicename=" +
+                        baseUrl+"/proxy/web/assets/img/devices/?devicename=" +
                         (props.data.session.Client.toLowerCase() === "jellyfin mobile (ios)" &&
                         props.data.session.DeviceName.toLowerCase() === "iphone"
                           ? "apple"
@@ -246,7 +246,7 @@ function SessionCard(props) {
                       {props.data.session.UserPrimaryImageTag !== undefined ? (
                         <img
                           className="session-card-user-image"
-                          src={"/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
+                          src={baseUrl+"/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
                           alt=""
                         />
                       ) : (

src/pages/components/settings/Tasks.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Button from "react-bootstrap/Button";
 
 import Table from "@mui/material/Table";

src/pages/components/settings/apiKeys.jsx

@@ -1,5 +1,5 @@
 import React, { useState,useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import {Form, Row, Col,ButtonGroup, Button } from 'react-bootstrap';
 
 import Table from '@mui/material/Table';

src/pages/components/settings/backup_tables.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 
 import "../../css/settings/backups.css";
 import { Trans } from "react-i18next";

src/pages/components/settings/backupfiles.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import { Form, DropdownButton, Dropdown, ButtonGroup, Button } from "react-bootstrap";
 
 import Table from "@mui/material/Table";

src/pages/components/settings/logs.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import {ButtonGroup, Button } from 'react-bootstrap';
 
 import Table from '@mui/material/Table';

src/pages/components/settings/security.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";

src/pages/components/settings/settingsConfig.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 import Loading from "../general/loading";
 import Form from "react-bootstrap/Form";

src/pages/components/statCards/most_active_users.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 import ItemStatComponent from "./ItemStatComponent";
 

src/pages/components/statCards/most_used_client.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import ItemStatComponent from "./ItemStatComponent";
 
 

src/pages/components/statCards/mp_movies.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 
 

src/pages/components/statCards/mp_music.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 
 import ItemStatComponent from "./ItemStatComponent";

src/pages/components/statCards/mp_series.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 import ItemStatComponent from "./ItemStatComponent";
 import { Trans } from "react-i18next";

src/pages/components/statCards/mv_libraries.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
-
 
 import ItemStatComponent from "./ItemStatComponent";
 

src/pages/components/statCards/mv_movies.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 
 import Config from "../../../lib/config";
 

src/pages/components/statCards/mv_music.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 import ItemStatComponent from "./ItemStatComponent";
 import { Trans } from "react-i18next";

src/pages/components/statCards/mv_series.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 
 

src/pages/components/statCards/playback_method_stats.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Config from "../../../lib/config";
 
 import ItemStatComponent from "./ItemStatComponent";

src/pages/components/statistics/daily-play-count.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
-
 import Chart from "./chart";
 
 import "../../css/stats.css";

src/pages/components/statistics/play-stats-by-day.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Chart from "./chart";
 
 import "../../css/stats.css";

src/pages/components/statistics/play-stats-by-hour.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import Chart from "./chart";
 import "../../css/stats.css";
 import { Trans } from "react-i18next";

src/pages/components/statistics/playbackMethodStats.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 
 import "../../css/stats.css";
 import { Trans } from "react-i18next";

src/pages/components/user-info.jsx

@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../lib/axios_instance";
 import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
 import Config from "../../lib/config";
 import { Tabs, Tab, Button, ButtonGroup } from "react-bootstrap";
@@ -10,6 +10,7 @@ import LastPlayed from "./user-info/lastplayed";
 import UserActivity from "./user-info/user-activity";
 import "../css/users/user-details.css";
 import { Trans } from "react-i18next";
+import baseUrl from "../../lib/baseurl";
 
 function UserInfo() {
   const { UserId } = useParams();
@@ -76,7 +77,7 @@ function UserInfo() {
           ) : (
             <img
               className="user-image"
-              src={"/proxy/Users/Images/Primary?id=" + UserId + "&quality=100"}
+              src={baseUrl+"/proxy/Users/Images/Primary?id=" + UserId + "&quality=100"}
               onError={handleImageError}
               alt=""
             ></img>

src/pages/components/user-info/globalStats.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import "../../css/globalstats.css";
 
 import WatchTimeStats from "./globalstats/watchtimestats";

src/pages/components/user-info/lastplayed.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
-
 import LastWatchedCard from "../general/last-watched-card";
 import ErrorBoundary from "../general/ErrorBoundary";
 

src/pages/components/user-info/user-activity.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../../../lib/axios_instance";
 import ActivityTable from "../activity/activity-table";
 import { Trans } from "react-i18next";
 import { Button, FormControl, FormSelect, Modal } from "react-bootstrap";

src/pages/debugTools/session-card.jsx

@@ -14,6 +14,7 @@ import { clientData } from "../../lib/devices";
 import Tooltip from "@mui/material/Tooltip";
 import IpInfoModal from "../components/ip-info";
 import "./sessionCard.css";
+import baseUrl from "../../lib/baseurl";
 
 function ticksToTimeString(ticks) {
   // Convert ticks to seconds
@@ -117,7 +118,7 @@ function SessionCard(props) {
                   : "stat-card-image rounded-0 rounded-start"
               }
               src={
-                "/proxy/Items/Images/Primary?id=" +
+                baseUrl+"/proxy/Items/Images/Primary?id=" +
                 (props.data.session.NowPlayingItem.SeriesId
                   ? props.data.session.NowPlayingItem.SeriesId
                   : props.data.session.NowPlayingItem.Id) +
@@ -183,7 +184,7 @@ function SessionCard(props) {
                     <img
                       className="card-device-image"
                       src={
-                        "/proxy/web/assets/img/devices/?devicename=" +
+                        baseUrl+"/proxy/web/assets/img/devices/?devicename=" +
                         (props.data.session.Client.toLowerCase() === "jellyfin mobile (ios)" &&
                         props.data.session.DeviceName.toLowerCase() === "iphone"
                           ? "apple"
@@ -244,7 +245,7 @@ function SessionCard(props) {
                       {props.data.session.UserPrimaryImageTag !== undefined ? (
                         <img
                           className="session-card-user-image"
-                          src={"/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
+                          src={baseUrl+"/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
                           alt=""
                         />
                       ) : (

src/pages/libraries.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../lib/axios_instance";
 import Config from "../lib/config";
 
 import "./css/library/libraries.css";

src/pages/library_selector.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../lib/axios_instance";
 import Config from "../lib/config";
 
 import "./css/library/libraries.css";

src/pages/login.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../lib/axios_instance";
 import Config from "../lib/config";
 import CryptoJS from "crypto-js";
 import "./css/setup.css";

src/pages/setup.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../lib/axios_instance";
 import Config from "../lib/config";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
@@ -12,7 +12,6 @@ import logo_dark from "./images/icon-b-512.png";
 import "./css/setup.css";
 import i18next from "i18next";
 import { Trans } from "react-i18next";
-const token = localStorage.getItem("token");
 
 function Setup() {
   const [config, setConfig] = useState(null);

src/pages/signup.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import axios from "axios";
+import axios from "../lib/axios_instance";
 import Config from "../lib/config";
 import CryptoJS from "crypto-js";
 import "./css/setup.css";

src/pages/users.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
+import axios from "../lib/axios_instance";
 import Config from "../lib/config";
 import { Link } from "react-router-dom";
 import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";

src/socket.js

@@ -1,5 +1,8 @@
-import { io } from 'socket.io-client';
+import { io } from "socket.io-client";
+import baseUrl from "./lib/baseurl";
 
-const socket = io();
+const socket = io({
+  path: baseUrl + "/socket.io/",
+});
 
-export default socket;
+export default socket;

vite.config.js

@@ -4,6 +4,7 @@ import react from "@vitejs/plugin-react-swc";
 // https://vitejs.dev/config/
 export default defineConfig({
   envPrefix: "JS_",
+  base: "",
   optimizeDeps: {
     include: ["react", "react-dom", "react-router-dom", "axios", "react-toastify"],
     esbuildOptions: {