From 75feea0d9c69dcdeae11bf281ab6647b0c92a911 Mon Sep 17 00:00:00 2001
From: Kanashimo <66676567+Kanashimo@users.noreply.github.com>
Date: Tue, 15 Sep 2026 20:59:04 +0200
Subject: [PATCH] feat: add custom branding (#575)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Emrik Östling <emrik.ostling@gmail.com>
---
 README.md                    |  1 +
 src/components/header.tsx    |  6 +++++-
 src/helpers/env.ts           |  2 ++
 src/pages/history.tsx        | 10 +++++++++-
 src/pages/listConverters.tsx |  9 +++++++--
 src/pages/results.tsx        |  9 +++++++--
 src/pages/root.tsx           |  2 ++
 src/pages/user.tsx           |  4 ++++
 8 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 96511b7e..12aa61af 100644
--- a/README.md
+++ b/README.md
@@ -96,6 +96,7 @@ All are optional, JWT_SECRET is recommended to be set.
 | ALLOW_UNAUTHENTICATED        | false                                              | Allow unauthenticated users to use the service, only set this to true locally                                                                                 |
 | AUTO_DELETE_EVERY_N_HOURS    | 24                                                 | Checks every n hours for files older then n hours and deletes them, set to 0 to disable                                                                       |
 | WEBROOT                      |                                                    | The address to the root path setting this to "/convert" will serve the website on "example.com/convert/"                                                      |
+| BRANDING                     | ConvertX                                           | Custom string that allows you to change the display name of the website in the header (max 26 characters)                                                     |
 | FFMPEG_ARGS                  |                                                    | Arguments to pass to the input file of ffmpeg, e.g. `-hwaccel vaapi`. See https://github.com/C4illin/ConvertX/issues/190 for more info about hw-acceleration. |
 | FFMPEG_OUTPUT_ARGS           |                                                    | Arguments to pass to the output of ffmpeg, e.g. `-preset veryfast`                                                                                            |
 | HIDE_HISTORY                 | false                                              | Hide the history page                                                                                                                                         |
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 7f72fead..d63f5b9b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -4,12 +4,14 @@ export const Header = ({
   allowUnauthenticated,
   hideHistory,
   webroot = "",
+  branding = "ConvertX",
 }: {
   loggedIn?: boolean;
   accountRegistration?: boolean;
   allowUnauthenticated?: boolean;
   hideHistory?: boolean;
   webroot?: string;
+  branding?: string;
 }) => {
   let rightNav: JSX.Element;
   if (loggedIn) {
@@ -93,7 +95,9 @@ export const Header = ({
         <ul>
           <li>
             <strong>
-              <a href={`${webroot}/`}>ConvertX</a>
+              <a href={`${webroot}/`} safe>
+                {branding.length < 26 ? branding : branding.slice(0, 26)}
+              </a>
             </strong>
           </li>
         </ul>
diff --git a/src/helpers/env.ts b/src/helpers/env.ts
index 53f6a8fc..c5207882 100644
--- a/src/helpers/env.ts
+++ b/src/helpers/env.ts
@@ -12,6 +12,8 @@ export const AUTO_DELETE_EVERY_N_HOURS = process.env.AUTO_DELETE_EVERY_N_HOURS
 
 export const HIDE_HISTORY = process.env.HIDE_HISTORY?.toLowerCase() === "true" || false;
 
+export const BRANDING = process.env.BRANDING ?? "ConvertX";
+
 export const WEBROOT = process.env.WEBROOT ?? "";
 
 export const LANGUAGE = process.env.LANGUAGE?.toLowerCase() || "en";
diff --git a/src/pages/history.tsx b/src/pages/history.tsx
index 89176982..d0cecdf0 100644
--- a/src/pages/history.tsx
+++ b/src/pages/history.tsx
@@ -3,7 +3,14 @@ import { BaseHtml } from "../components/base";
 import { Header } from "../components/header";
 import db from "../db/db";
 import { Filename, Jobs } from "../db/types";
-import { ALLOW_UNAUTHENTICATED, HIDE_HISTORY, LANGUAGE, TIMEZONE, WEBROOT } from "../helpers/env";
+import {
+  ALLOW_UNAUTHENTICATED,
+  HIDE_HISTORY,
+  LANGUAGE,
+  TIMEZONE,
+  WEBROOT,
+  BRANDING,
+} from "../helpers/env";
 import { userService } from "./user";
 import { EyeIcon } from "../icons/eye";
 import { DeleteIcon } from "../icons/delete";
@@ -36,6 +43,7 @@ export const history = new Elysia().use(userService).get(
         <>
           <Header
             webroot={WEBROOT}
+            branding={BRANDING}
             allowUnauthenticated={ALLOW_UNAUTHENTICATED}
             hideHistory={HIDE_HISTORY}
             loggedIn
diff --git a/src/pages/listConverters.tsx b/src/pages/listConverters.tsx
index 2e3cc772..881037af 100644
--- a/src/pages/listConverters.tsx
+++ b/src/pages/listConverters.tsx
@@ -2,7 +2,7 @@ import Elysia from "elysia";
 import { BaseHtml } from "../components/base";
 import { Header } from "../components/header";
 import { getAllInputs, getAllTargets } from "../converters/main";
-import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
+import { ALLOW_UNAUTHENTICATED, WEBROOT, BRANDING } from "../helpers/env";
 import { userService } from "./user";
 
 export const listConverters = new Elysia().use(userService).get(
@@ -11,7 +11,12 @@ export const listConverters = new Elysia().use(userService).get(
     return (
       <BaseHtml webroot={WEBROOT} title="ConvertX | Converters">
         <>
-          <Header webroot={WEBROOT} allowUnauthenticated={ALLOW_UNAUTHENTICATED} loggedIn />
+          <Header
+            webroot={WEBROOT}
+            allowUnauthenticated={ALLOW_UNAUTHENTICATED}
+            branding={BRANDING}
+            loggedIn
+          />
           <main
             class={`
               w-full flex-1 px-2
diff --git a/src/pages/results.tsx b/src/pages/results.tsx
index a9809f69..c30dbdd8 100644
--- a/src/pages/results.tsx
+++ b/src/pages/results.tsx
@@ -4,7 +4,7 @@ import { Header } from "../components/header";
 import db from "../db/db";
 import { Filename, Jobs } from "../db/types";
 import { buildDownloadUrl } from "../helpers/buildDownloadUrl";
-import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
+import { ALLOW_UNAUTHENTICATED, WEBROOT, BRANDING } from "../helpers/env";
 import { DownloadIcon } from "../icons/download";
 import { DeleteIcon } from "../icons/delete";
 import { EyeIcon } from "../icons/eye";
@@ -175,7 +175,12 @@ export const results = new Elysia()
       return (
         <BaseHtml webroot={WEBROOT} title="ConvertX | Result">
           <>
-            <Header webroot={WEBROOT} allowUnauthenticated={ALLOW_UNAUTHENTICATED} loggedIn />
+            <Header
+              webroot={WEBROOT}
+              allowUnauthenticated={ALLOW_UNAUTHENTICATED}
+              loggedIn
+              branding={BRANDING}
+            />
             <main
               class={`
                 w-full flex-1 px-2
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index bf1a73cf..eba32384 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -13,6 +13,7 @@ import {
   HTTP_ALLOWED,
   UNAUTHENTICATED_USER_SHARING,
   WEBROOT,
+  BRANDING,
 } from "../helpers/env";
 import { FIRST_RUN, userService } from "./user";
 
@@ -109,6 +110,7 @@ export const root = new Elysia().use(userService).get(
         <>
           <Header
             webroot={WEBROOT}
+            branding={BRANDING}
             accountRegistration={ACCOUNT_REGISTRATION}
             allowUnauthenticated={ALLOW_UNAUTHENTICATED}
             hideHistory={HIDE_HISTORY}
diff --git a/src/pages/user.tsx b/src/pages/user.tsx
index 5fa9e045..fe9d7308 100644
--- a/src/pages/user.tsx
+++ b/src/pages/user.tsx
@@ -9,6 +9,7 @@ import {
   HIDE_HISTORY,
   HTTP_ALLOWED,
   WEBROOT,
+  BRANDING,
 } from "../helpers/env";
 import { userService } from "../services/user";
 
@@ -89,6 +90,7 @@ export const user = new Elysia()
         <>
           <Header
             webroot={WEBROOT}
+            branding={BRANDING}
             accountRegistration={ACCOUNT_REGISTRATION}
             allowUnauthenticated={ALLOW_UNAUTHENTICATED}
             hideHistory={HIDE_HISTORY}
@@ -211,6 +213,7 @@ export const user = new Elysia()
           <>
             <Header
               webroot={WEBROOT}
+              branding={BRANDING}
               accountRegistration={ACCOUNT_REGISTRATION}
               allowUnauthenticated={ALLOW_UNAUTHENTICATED}
               hideHistory={HIDE_HISTORY}
@@ -346,6 +349,7 @@ export const user = new Elysia()
           <>
             <Header
               webroot={WEBROOT}
+              branding={BRANDING}
               accountRegistration={ACCOUNT_REGISTRATION}
               allowUnauthenticated={ALLOW_UNAUTHENTICATED}
               hideHistory={HIDE_HISTORY}