docs: RTSP password is optional

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

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

@@ -1,7 +1,24 @@
-import React from "react";
+import React, { useMemo } 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;
@@ -21,41 +38,38 @@ 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>
-          <input
+          <select
             id="dcg-timezone"
-            type="text"
-            className={styles.input}
-            value={timezone}
-            placeholder={Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC"}
-            onChange={(e) => onTimezoneChange(e.target.value)}
-          />
+            className={`${styles.input} ${styles.select}`}
+            value={selectedValue}
+            onChange={(e) =>
+              onTimezoneChange(
+                e.target.value === AUTO_TIMEZONE_VALUE ? "" : 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}>
@@ -83,6 +97,25 @@ 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:
+            Config / DB / model cache directory (on your host):
           </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:
+            Recording storage directory (on your host):
           </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: "GPU Acceleration (/dev/dri)"
+    label: "Intel/AMD GPU (/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."
+    description: "Pass through /dev/hailo0 for Hailo-8 / Hailo-8L NPU acceleration. You also need to [install the driver](#hailo-8)."
     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."
+    description: "Pass through /dev/memx0 for MemryX MX3 NPU acceleration. You also need to [install the driver](#memryx-mx3)."
     disabledWhen:
       - "apple-silicon"
       - "stable-synaptics"
@@ -242,7 +242,7 @@ hardware:
         comment: "AXERA libraries"
 
   - id: "video11"
-    label: "Raspberry Pi video11"
+    label: "Raspberry Pi (/dev/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: "RTSP feeds"
+    description: "Access RTSP feeds from go2rtc"
     defaultEnabled: true
 
   - id: "8555-tcp"
@@ -293,5 +293,5 @@ ports:
     host: 1984
     container: 1984
     protocol: "tcp"
-    description: "Go2RTC Web UIport"
+    description: "Go2RTC Web UI"
     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,
+  rtspPassword: string | undefined,
   timezone: string
 ): string[] {
   const allEnv: Record<string, string> = {
@@ -107,11 +107,15 @@ function buildEnvironment(
     ...(device.env ?? {}),
   };
 
-  const lines: string[] = [
-    "    environment:",
-    `      FRIGATE_RTSP_PASSWORD: "${rtspPassword}" # RTSP password — change to your own`,
-    `      TZ: "${timezone}" # Timezone`,
-  ];
+  const lines: string[] = ["    environment:"];
+
+  if (rtspPassword) {
+    lines.push(
+      `      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,10 +33,8 @@ export function useConfigGenerator() {
   const [nvidiaGpuDeviceId, setNvidiaGpuDeviceId] = useState("");
   const [configPath, setConfigPath] = useState("");
   const [mediaPath, setMediaPath] = useState("");
-  const [rtspPassword, setRtspPassword] = useState("password");
-  const [timezone, setTimezone] = useState(
-    () => Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC"
-  );
+  const [rtspPassword, setRtspPassword] = useState("");
+  const [timezone, setTimezone] = useState("");
   const [shmSize, setShmSize] = useState("512mb");
   const [shmSizeError, setShmSizeError] = useState(false);
   const [gpuDeviceIdError, setGpuDeviceIdError] = useState(false);
@@ -168,7 +166,7 @@ export function useConfigGenerator() {
       enabledPorts: enabledPortLines,
       configPath: configPath || "/path/to/your/config",
       mediaPath: mediaPath || "/path/to/your/storage",
-      rtspPassword: rtspPassword || "password",
+      rtspPassword,
       timezone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC",
       shmSize: shmSize || "512mb",
       nvidiaGpuCount,

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

@@ -103,6 +103,21 @@
   }
 }
 
+/* --- 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;