docs/src/components/DockerComposeGenerator/components/OtherOptions.tsx

@@ -1,24 +1,7 @@
-import React, { useMemo } from "react";
+import React from "react";
 import CodeInline from "@theme/CodeInline";
 import styles from "../styles.module.css";
 
-const AUTO_TIMEZONE_VALUE = "__auto__";
-
-function getTimezoneList(): string[] {
-  if (typeof Intl !== "undefined") {
-    const intl = Intl as typeof Intl & {
-      supportedValuesOf?: (key: string) => string[];
-    };
-    const supported = intl.supportedValuesOf?.("timeZone");
-    if (supported && supported.length > 0) {
-      return [...supported].sort();
-    }
-  }
-
-  const fallback = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  return fallback ? [fallback] : ["UTC"];
-}
-
 interface Props {
   rtspPassword: string;
   timezone: string;
@@ -38,38 +21,41 @@ export default function OtherOptions({
   onTimezoneChange,
   onShmSizeChange,
 }: Props) {
-  const timezones = useMemo(() => getTimezoneList(), []);
-  const systemTimezone =
-    Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC";
-  const selectedValue = timezone || AUTO_TIMEZONE_VALUE;
-
   return (
     <div className={styles.formSection}>
       <h4>Other Options</h4>
       <div className={styles.formGrid}>
+        <div className={styles.formGroup}>
+          <label htmlFor="dcg-rtsp-password" className={styles.label}>
+            RTSP password:
+          </label>
+          <input
+            id="dcg-rtsp-password"
+            type="text"
+            className={styles.input}
+            value={rtspPassword}
+            placeholder="password"
+            onChange={(e) => onRtspPasswordChange(e.target.value)}
+          />
+          <p className={styles.helpText}>
+            Used as{" "}
+            <CodeInline>{"{FRIGATE_RTSP_PASSWORD}"}</CodeInline>{" "}
+            in the config file to reference camera stream passwords. This is NOT
+            the Frigate login password.
+          </p>
+        </div>
         <div className={styles.formGroup}>
           <label htmlFor="dcg-timezone" className={styles.label}>
             Timezone:
           </label>
-          <select
+          <input
             id="dcg-timezone"
-            className={`${styles.input} ${styles.select}`}
+            type="text"
-            value={selectedValue}
+            className={styles.input}
-            onChange={(e) =>
+            value={timezone}
-              onTimezoneChange(
+            placeholder={Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC"}
-                e.target.value === AUTO_TIMEZONE_VALUE ? "" : e.target.value
+            onChange={(e) => onTimezoneChange(e.target.value)}
-              )
+          />
-            }
-          >
-            <option value={AUTO_TIMEZONE_VALUE}>
-              Use browser timezone ({systemTimezone})
-            </option>
-            {timezones.map((tz) => (
-              <option key={tz} value={tz}>
-                {tz}
-              </option>
-            ))}
-          </select>
         </div>
         <div className={styles.formGroup}>
           <label htmlFor="dcg-shm-size" className={styles.label}>
@@ -97,25 +83,6 @@ export default function OtherOptions({
             </p>
           )}
         </div>
-        <div className={styles.formGroup}>
-          <label htmlFor="dcg-rtsp-password" className={styles.label}>
-            RTSP password:
-          </label>
-          <input
-            id="dcg-rtsp-password"
-            type="text"
-            className={styles.input}
-            value={rtspPassword}
-            placeholder="password"
-            onChange={(e) => onRtspPasswordChange(e.target.value)}
-          />
-          <p className={styles.helpText}>
-            Optional. You can specify{" "}
-            <CodeInline>{"{FRIGATE_RTSP_PASSWORD}"}</CodeInline>{" "}
-            in the config file to reference camera stream passwords. This is NOT
-            the Frigate login password.
-          </p>
-        </div>
       </div>
     </div>
   );

docs/src/components/DockerComposeGenerator/components/StoragePaths.tsx

@@ -24,7 +24,7 @@ export default function StoragePaths({
       <div className={styles.formGrid}>
         <div className={styles.formGroup}>
           <label htmlFor="dcg-config-path" className={styles.label}>
-            Config / DB / model cache directory (on your host):
+            Config / DB / model cache directory:
           </label>
           <input
             id="dcg-config-path"
@@ -43,7 +43,7 @@ export default function StoragePaths({
         </div>
         <div className={styles.formGroup}>
           <label htmlFor="dcg-media-path" className={styles.label}>
-            Recording storage directory (on your host):
+            Recording storage directory:
           </label>
           <input
             id="dcg-media-path"

docs/src/components/DockerComposeGenerator/config/config.yaml

@@ -172,7 +172,7 @@ hardware:
         comment: "PCIe Coral — follow driver instructions at https://github.com/jnicolson/gasket-builder"
 
   - id: "gpu"
-    label: "Intel/AMD GPU (/dev/dri)"
+    label: "GPU Acceleration (/dev/dri)"
     description: "Pass through /dev/dri for GPU hardware acceleration (Intel/AMD)."
     disabledWhen:
       - "stable-tensorrt-jp6"
@@ -198,7 +198,7 @@ hardware:
 
   - id: "hailo"
     label: "Hailo NPU (/dev/hailo0)"
-    description: "Pass through /dev/hailo0 for Hailo-8 / Hailo-8L NPU acceleration. You also need to [install the driver](#hailo-8)."
+    description: "Pass through /dev/hailo0 for Hailo-8 / Hailo-8L NPU acceleration."
     disabledWhen:
       - "apple-silicon"
       - "stable-synaptics"
@@ -208,7 +208,7 @@ hardware:
 
   - id: "memryx"
     label: "MemryX MX3 (/dev/memx0)"
-    description: "Pass through /dev/memx0 for MemryX MX3 NPU acceleration. You also need to [install the driver](#memryx-mx3)."
+    description: "Pass through /dev/memx0 for MemryX MX3 NPU acceleration."
     disabledWhen:
       - "apple-silicon"
       - "stable-synaptics"
@@ -242,7 +242,7 @@ hardware:
         comment: "AXERA libraries"
 
   - id: "video11"
-    label: "Raspberry Pi (/dev/video11)"
+    label: "Raspberry Pi video11"
     description: "Pass through /dev/video11 for Raspberry Pi 4B hardware acceleration."
     disabledWhen:
       - "stable-tensorrt"
@@ -272,7 +272,7 @@ ports:
     host: 8554
     container: 8554
     protocol: "tcp"
-    description: "Access RTSP feeds from go2rtc"
+    description: "RTSP feeds"
     defaultEnabled: true
 
   - id: "8555-tcp"
@@ -293,5 +293,5 @@ ports:
     host: 1984
     container: 1984
     protocol: "tcp"
-    description: "Go2RTC Web UI"
+    description: "Go2RTC Web UIport"
     defaultEnabled: false

docs/src/components/DockerComposeGenerator/generator/index.ts

@@ -15,7 +15,7 @@ export interface GeneratorInput {
   enabledPorts: string[];
   configPath: string;
   mediaPath: string;
-  rtspPassword?: string;
+  rtspPassword: string;
   timezone: string;
   shmSize: string;
   nvidiaGpuCount?: string;
@@ -99,7 +99,7 @@ function buildPorts(enabledPorts: string[]): string[] {
 function buildEnvironment(
   device: DeviceConfig,
   hwEnv: Record<string, string>,
-  rtspPassword: string | undefined,
+  rtspPassword: string,
   timezone: string
 ): string[] {
   const allEnv: Record<string, string> = {
@@ -107,15 +107,11 @@ function buildEnvironment(
     ...(device.env ?? {}),
   };
 
-  const lines: string[] = ["    environment:"];
+  const lines: string[] = [
-
+    "    environment:",
-  if (rtspPassword) {
+    `      FRIGATE_RTSP_PASSWORD: "${rtspPassword}" # RTSP password — change to your own`,
-    lines.push(
+    `      TZ: "${timezone}" # Timezone`,
-      `      FRIGATE_RTSP_PASSWORD: "${rtspPassword}" # RTSP password — change to your own`
+  ];
-    );
-  }
-
-  lines.push(`      TZ: "${timezone}" # Timezone`);
 
   for (const [key, value] of Object.entries(allEnv)) {
     lines.push(`      ${key}: "${value}"`);

docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts

@@ -33,8 +33,10 @@ export function useConfigGenerator() {
   const [nvidiaGpuDeviceId, setNvidiaGpuDeviceId] = useState("");
   const [configPath, setConfigPath] = useState("");
   const [mediaPath, setMediaPath] = useState("");
-  const [rtspPassword, setRtspPassword] = useState("");
+  const [rtspPassword, setRtspPassword] = useState("password");
-  const [timezone, setTimezone] = useState("");
+  const [timezone, setTimezone] = useState(
+    () => Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC"
+  );
   const [shmSize, setShmSize] = useState("512mb");
   const [shmSizeError, setShmSizeError] = useState(false);
   const [gpuDeviceIdError, setGpuDeviceIdError] = useState(false);
@@ -166,7 +168,7 @@ export function useConfigGenerator() {
       enabledPorts: enabledPortLines,
       configPath: configPath || "/path/to/your/config",
       mediaPath: mediaPath || "/path/to/your/storage",
-      rtspPassword,
+      rtspPassword: rtspPassword || "password",
       timezone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC",
       shmSize: shmSize || "512mb",
       nvidiaGpuCount,

docs/src/components/DockerComposeGenerator/styles.module.css

@@ -103,21 +103,6 @@
   }
 }
 
-/* --- Select dropdown --- */
-
-.select {
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  padding-right: 2rem;
-}
-
-[data-theme="light"] .select {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-}
-
 .helpText {
   margin: 0.5rem 0 0 0;
   font-size: 0.85rem;