From 03174adb8b13980227ac9d6a63471f6e79bcc9a1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 11 Nov 2025 11:05:44 -0600
Subject: [PATCH] hide settings dropdown when fullscreen

---
 web/src/views/live/LiveCameraView.tsx | 536 +++++++++++++-------------
 1 file changed, 270 insertions(+), 266 deletions(-)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index f667afd29..9e639ab7b 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -1030,294 +1030,298 @@ function FrigateCameraFeatures({
           disabled={!cameraEnabled || debug || isSnapshotLoading}
           loading={isSnapshotLoading}
         />
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger>
-            <div
-              className={cn(
-                "flex flex-col items-center justify-center rounded-lg bg-secondary p-2 text-secondary-foreground md:p-0",
-              )}
-            >
-              <FaCog
-                className={`text-secondary-foreground" size-5 md:m-[6px]`}
-              />
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-w-96">
-            <div className="flex flex-col gap-5 p-4">
-              {!isRestreamed && (
-                <div className="flex flex-col gap-2">
-                  <Label>
-                    {t("streaming.label", { ns: "components/dialog" })}
-                  </Label>
-                  <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                    <LuX className="size-4 text-danger" />
-                    <div>
-                      {t("streaming.restreaming.disabled", {
-                        ns: "components/dialog",
-                      })}
-                    </div>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <div className="cursor-pointer p-0">
-                          <LuInfo className="size-4" />
-                          <span className="sr-only">
-                            {t("button.info", { ns: "common" })}
-                          </span>
-                        </div>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-80 text-xs">
-                        {t("streaming.restreaming.desc.title", {
+        {!fullscreen && (
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger>
+              <div
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg bg-secondary p-2 text-secondary-foreground md:p-0",
+                )}
+              >
+                <FaCog
+                  className={`text-secondary-foreground" size-5 md:m-[6px]`}
+                />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="max-w-96">
+              <div className="flex flex-col gap-5 p-4">
+                {!isRestreamed && (
+                  <div className="flex flex-col gap-2">
+                    <Label>
+                      {t("streaming.label", { ns: "components/dialog" })}
+                    </Label>
+                    <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                      <LuX className="size-4 text-danger" />
+                      <div>
+                        {t("streaming.restreaming.disabled", {
                           ns: "components/dialog",
                         })}
-                        <div className="mt-2 flex items-center text-primary">
-                          <Link
-                            to={getLocaleDocUrl("configuration/live")}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline"
-                          >
-                            {t("readTheDocumentation", { ns: "common" })}
-                            <LuExternalLink className="ml-2 inline-flex size-3" />
-                          </Link>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-              )}
-              {isRestreamed &&
-                Object.values(camera.live.streams).length > 0 && (
-                  <div className="flex flex-col gap-1">
-                    <Label htmlFor="streaming-method">
-                      {t("stream.title")}
-                    </Label>
-                    <Select
-                      value={streamName}
-                      disabled={debug}
-                      onValueChange={(value) => {
-                        setStreamName?.(value);
-                      }}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue>
-                          {Object.keys(camera.live.streams).find(
-                            (key) => camera.live.streams[key] === streamName,
-                          )}
-                        </SelectValue>
-                      </SelectTrigger>
-
-                      <SelectContent>
-                        <SelectGroup>
-                          {Object.entries(camera.live.streams).map(
-                            ([stream, name]) => (
-                              <SelectItem
-                                key={stream}
-                                className="cursor-pointer"
-                                value={name}
-                              >
-                                {stream}
-                              </SelectItem>
-                            ),
-                          )}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-
-                    {debug && (
-                      <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                        <>
-                          <LuX className="size-8 text-danger" />
-                          <div>{t("stream.debug.picker")}</div>
-                        </>
                       </div>
-                    )}
-
-                    {preferredLiveMode != "jsmpeg" &&
-                      !debug &&
-                      isRestreamed && (
-                        <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                          {supportsAudioOutput ? (
-                            <>
-                              <LuCheck className="size-4 text-success" />
-                              <div>{t("stream.audio.available")}</div>
-                            </>
-                          ) : (
-                            <>
-                              <LuX className="size-4 text-danger" />
-                              <div>{t("stream.audio.unavailable")}</div>
-                              <Popover>
-                                <PopoverTrigger asChild>
-                                  <div className="cursor-pointer p-0">
-                                    <LuInfo className="size-4" />
-                                    <span className="sr-only">
-                                      {t("button.info", { ns: "common" })}
-                                    </span>
-                                  </div>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-80 text-xs">
-                                  {t("stream.audio.tips.title")}
-                                  <div className="mt-2 flex items-center text-primary">
-                                    <Link
-                                      to={getLocaleDocUrl("configuration/live")}
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="inline"
-                                    >
-                                      {t("readTheDocumentation", {
-                                        ns: "common",
-                                      })}
-                                      <LuExternalLink className="ml-2 inline-flex size-3" />
-                                    </Link>
-                                  </div>
-                                </PopoverContent>
-                              </Popover>
-                            </>
-                          )}
-                        </div>
-                      )}
-                    {preferredLiveMode != "jsmpeg" &&
-                      !debug &&
-                      isRestreamed &&
-                      supportsAudioOutput && (
-                        <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
-                          {supports2WayTalk ? (
-                            <>
-                              <LuCheck className="size-4 text-success" />
-                              <div>{t("stream.twoWayTalk.available")}</div>
-                            </>
-                          ) : (
-                            <>
-                              <LuX className="size-4 text-danger" />
-                              <div>{t("stream.twoWayTalk.unavailable")}</div>
-                              <Popover>
-                                <PopoverTrigger asChild>
-                                  <div className="cursor-pointer p-0">
-                                    <LuInfo className="size-4" />
-                                    <span className="sr-only">
-                                      {t("button.info", { ns: "common" })}
-                                    </span>
-                                  </div>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-80 text-xs">
-                                  {t("stream.twoWayTalk.tips")}
-                                  <div className="mt-2 flex items-center text-primary">
-                                    <Link
-                                      to={getLocaleDocUrl(
-                                        "configuration/live/#webrtc-extra-configuration",
-                                      )}
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="inline"
-                                    >
-                                      {t("readTheDocumentation", {
-                                        ns: "common",
-                                      })}
-                                      <LuExternalLink className="ml-2 inline-flex size-3" />
-                                    </Link>
-                                  </div>
-                                </PopoverContent>
-                              </Popover>
-                            </>
-                          )}
-                        </div>
-                      )}
-
-                    {preferredLiveMode == "jsmpeg" &&
-                      !debug &&
-                      isRestreamed && (
-                        <div className="flex flex-col items-center gap-3">
-                          <div className="flex flex-row items-center gap-2">
-                            <IoIosWarning className="mr-1 size-8 text-danger" />
-
-                            <p className="text-sm">
-                              {t("stream.lowBandwidth.tips")}
-                            </p>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <div className="cursor-pointer p-0">
+                            <LuInfo className="size-4" />
+                            <span className="sr-only">
+                              {t("button.info", { ns: "common" })}
+                            </span>
                           </div>
-                          <Button
-                            className={`flex items-center gap-2.5 rounded-lg`}
-                            aria-label={t("stream.lowBandwidth.resetStream")}
-                            variant="outline"
-                            size="sm"
-                            onClick={() => setLowBandwidth(false)}
-                          >
-                            <MdOutlineRestartAlt className="size-5 text-primary-variant" />
-                            <div className="text-primary-variant">
-                              {t("stream.lowBandwidth.resetStream")}
-                            </div>
-                          </Button>
-                        </div>
-                      )}
+                        </PopoverTrigger>
+                        <PopoverContent className="w-80 text-xs">
+                          {t("streaming.restreaming.desc.title", {
+                            ns: "components/dialog",
+                          })}
+                          <div className="mt-2 flex items-center text-primary">
+                            <Link
+                              to={getLocaleDocUrl("configuration/live")}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="inline"
+                            >
+                              {t("readTheDocumentation", { ns: "common" })}
+                              <LuExternalLink className="ml-2 inline-flex size-3" />
+                            </Link>
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+                )}
+                {isRestreamed &&
+                  Object.values(camera.live.streams).length > 0 && (
+                    <div className="flex flex-col gap-1">
+                      <Label htmlFor="streaming-method">
+                        {t("stream.title")}
+                      </Label>
+                      <Select
+                        value={streamName}
+                        disabled={debug}
+                        onValueChange={(value) => {
+                          setStreamName?.(value);
+                        }}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue>
+                            {Object.keys(camera.live.streams).find(
+                              (key) => camera.live.streams[key] === streamName,
+                            )}
+                          </SelectValue>
+                        </SelectTrigger>
+
+                        <SelectContent>
+                          <SelectGroup>
+                            {Object.entries(camera.live.streams).map(
+                              ([stream, name]) => (
+                                <SelectItem
+                                  key={stream}
+                                  className="cursor-pointer"
+                                  value={name}
+                                >
+                                  {stream}
+                                </SelectItem>
+                              ),
+                            )}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+
+                      {debug && (
+                        <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                          <>
+                            <LuX className="size-8 text-danger" />
+                            <div>{t("stream.debug.picker")}</div>
+                          </>
+                        </div>
+                      )}
+
+                      {preferredLiveMode != "jsmpeg" &&
+                        !debug &&
+                        isRestreamed && (
+                          <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                            {supportsAudioOutput ? (
+                              <>
+                                <LuCheck className="size-4 text-success" />
+                                <div>{t("stream.audio.available")}</div>
+                              </>
+                            ) : (
+                              <>
+                                <LuX className="size-4 text-danger" />
+                                <div>{t("stream.audio.unavailable")}</div>
+                                <Popover>
+                                  <PopoverTrigger asChild>
+                                    <div className="cursor-pointer p-0">
+                                      <LuInfo className="size-4" />
+                                      <span className="sr-only">
+                                        {t("button.info", { ns: "common" })}
+                                      </span>
+                                    </div>
+                                  </PopoverTrigger>
+                                  <PopoverContent className="w-80 text-xs">
+                                    {t("stream.audio.tips.title")}
+                                    <div className="mt-2 flex items-center text-primary">
+                                      <Link
+                                        to={getLocaleDocUrl(
+                                          "configuration/live",
+                                        )}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="inline"
+                                      >
+                                        {t("readTheDocumentation", {
+                                          ns: "common",
+                                        })}
+                                        <LuExternalLink className="ml-2 inline-flex size-3" />
+                                      </Link>
+                                    </div>
+                                  </PopoverContent>
+                                </Popover>
+                              </>
+                            )}
+                          </div>
+                        )}
+                      {preferredLiveMode != "jsmpeg" &&
+                        !debug &&
+                        isRestreamed &&
+                        supportsAudioOutput && (
+                          <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+                            {supports2WayTalk ? (
+                              <>
+                                <LuCheck className="size-4 text-success" />
+                                <div>{t("stream.twoWayTalk.available")}</div>
+                              </>
+                            ) : (
+                              <>
+                                <LuX className="size-4 text-danger" />
+                                <div>{t("stream.twoWayTalk.unavailable")}</div>
+                                <Popover>
+                                  <PopoverTrigger asChild>
+                                    <div className="cursor-pointer p-0">
+                                      <LuInfo className="size-4" />
+                                      <span className="sr-only">
+                                        {t("button.info", { ns: "common" })}
+                                      </span>
+                                    </div>
+                                  </PopoverTrigger>
+                                  <PopoverContent className="w-80 text-xs">
+                                    {t("stream.twoWayTalk.tips")}
+                                    <div className="mt-2 flex items-center text-primary">
+                                      <Link
+                                        to={getLocaleDocUrl(
+                                          "configuration/live/#webrtc-extra-configuration",
+                                        )}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="inline"
+                                      >
+                                        {t("readTheDocumentation", {
+                                          ns: "common",
+                                        })}
+                                        <LuExternalLink className="ml-2 inline-flex size-3" />
+                                      </Link>
+                                    </div>
+                                  </PopoverContent>
+                                </Popover>
+                              </>
+                            )}
+                          </div>
+                        )}
+
+                      {preferredLiveMode == "jsmpeg" &&
+                        !debug &&
+                        isRestreamed && (
+                          <div className="flex flex-col items-center gap-3">
+                            <div className="flex flex-row items-center gap-2">
+                              <IoIosWarning className="mr-1 size-8 text-danger" />
+
+                              <p className="text-sm">
+                                {t("stream.lowBandwidth.tips")}
+                              </p>
+                            </div>
+                            <Button
+                              className={`flex items-center gap-2.5 rounded-lg`}
+                              aria-label={t("stream.lowBandwidth.resetStream")}
+                              variant="outline"
+                              size="sm"
+                              onClick={() => setLowBandwidth(false)}
+                            >
+                              <MdOutlineRestartAlt className="size-5 text-primary-variant" />
+                              <div className="text-primary-variant">
+                                {t("stream.lowBandwidth.resetStream")}
+                              </div>
+                            </Button>
+                          </div>
+                        )}
+                    </div>
+                  )}
+                {isRestreamed && (
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center justify-between">
+                      <Label
+                        className="mx-0 cursor-pointer text-primary"
+                        htmlFor="backgroundplay"
+                      >
+                        {t("stream.playInBackground.label")}
+                      </Label>
+                      <Switch
+                        className="ml-1"
+                        id="backgroundplay"
+                        disabled={debug}
+                        checked={playInBackground}
+                        onCheckedChange={(checked) =>
+                          setPlayInBackground(checked)
+                        }
+                      />
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      {t("stream.playInBackground.tips")}
+                    </p>
                   </div>
                 )}
-              {isRestreamed && (
                 <div className="flex flex-col gap-1">
                   <div className="flex items-center justify-between">
                     <Label
                       className="mx-0 cursor-pointer text-primary"
-                      htmlFor="backgroundplay"
+                      htmlFor="showstats"
                     >
-                      {t("stream.playInBackground.label")}
+                      {t("streaming.showStats.label", {
+                        ns: "components/dialog",
+                      })}
                     </Label>
                     <Switch
                       className="ml-1"
-                      id="backgroundplay"
+                      id="showstats"
                       disabled={debug}
-                      checked={playInBackground}
-                      onCheckedChange={(checked) =>
-                        setPlayInBackground(checked)
-                      }
+                      checked={showStats}
+                      onCheckedChange={(checked) => setShowStats(checked)}
                     />
                   </div>
                   <p className="text-sm text-muted-foreground">
-                    {t("stream.playInBackground.tips")}
+                    {t("streaming.showStats.desc", {
+                      ns: "components/dialog",
+                    })}
                   </p>
                 </div>
-              )}
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between">
-                  <Label
-                    className="mx-0 cursor-pointer text-primary"
-                    htmlFor="showstats"
-                  >
-                    {t("streaming.showStats.label", {
-                      ns: "components/dialog",
-                    })}
-                  </Label>
-                  <Switch
-                    className="ml-1"
-                    id="showstats"
-                    disabled={debug}
-                    checked={showStats}
-                    onCheckedChange={(checked) => setShowStats(checked)}
-                  />
-                </div>
-                <p className="text-sm text-muted-foreground">
-                  {t("streaming.showStats.desc", {
-                    ns: "components/dialog",
-                  })}
-                </p>
-              </div>
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between">
-                  <Label
-                    className="mx-0 cursor-pointer text-primary"
-                    htmlFor="debug"
-                  >
-                    {t("streaming.debugView", {
-                      ns: "components/dialog",
-                    })}
-                  </Label>
-                  <Switch
-                    className="ml-1"
-                    id="debug"
-                    checked={debug}
-                    onCheckedChange={(checked) => setDebug(checked)}
-                  />
+                <div className="flex flex-col gap-1">
+                  <div className="flex items-center justify-between">
+                    <Label
+                      className="mx-0 cursor-pointer text-primary"
+                      htmlFor="debug"
+                    >
+                      {t("streaming.debugView", {
+                        ns: "components/dialog",
+                      })}
+                    </Label>
+                    <Switch
+                      className="ml-1"
+                      id="debug"
+                      checked={debug}
+                      onCheckedChange={(checked) => setDebug(checked)}
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
       </>
     );
   }