administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-19 01:17:06 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add link to debug view

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-26 09:21:01 -06:00
parent b0a3439249
commit 8eff16b197
2 changed files with 137 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/pages/Settings.tsx
View File

@ -37,6 +37,7 @@ import AuthenticationView from "@/views/settings/AuthenticationView";
import NotificationView from "@/views/settings/NotificationsSettingsView"; import NotificationView from "@/views/settings/NotificationsSettingsView";
import SearchSettingsView from "@/views/settings/SearchSettingsView"; import SearchSettingsView from "@/views/settings/SearchSettingsView";
import UiSettingsView from "@/views/settings/UiSettingsView"; import UiSettingsView from "@/views/settings/UiSettingsView";
import { useSearchEffect } from "@/hooks/use-overlay-state";
const allSettingsViews = [ const allSettingsViews = [
"UI settings", "UI settings",
@ -119,6 +120,21 @@ export default function Settings() {
} }
}, [tabsRef, pageToggle]); }, [tabsRef, pageToggle]);
useSearchEffect("page", (page: string) => {
if (allSettingsViews.includes(page as SettingsType)) {
setPage(page as SettingsType);
}
return true;
});
useSearchEffect("camera", (camera: string) => {
const cameraNames = cameras.map((c) => c.name);
if (cameraNames.includes(camera)) {
setSelectedCamera(camera);
}
return true;
});
useEffect(() => { useEffect(() => {
document.title = "Settings - Frigate"; document.title = "Settings - Frigate";
}, []); }, []);

138
web/src/views/live/LiveCameraView.tsx
View File

@ -834,6 +834,8 @@ function FrigateCameraFeatures({
const { payload: autotrackingState, send: sendAutotracking } = const { payload: autotrackingState, send: sendAutotracking } =
useAutotrackingState(camera.name); useAutotrackingState(camera.name);
const navigate = useNavigate();
// desktop shows icons part of row // desktop shows icons part of row
if (isDesktop || isTablet) { if (isDesktop || isTablet) {
return ( return (
@ -1042,27 +1044,40 @@ function FrigateCameraFeatures({
)} )}
</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"
>
Play in background
</Label>
<Switch
className="ml-1"
id="backgroundplay"
checked={playInBackground}
onCheckedChange={(checked) =>
setPlayInBackground(checked)
}
/>
</div>
<p className="text-sm text-muted-foreground">
Enable this option to continue streaming when the player
is hidden.
</p>
</div>
)}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between text-sm">
<Label Debug View
className="mx-0 cursor-pointer text-primary" <LuExternalLink
htmlFor="backgroundplay" onClick={() =>
> navigate(`/settings?page=debug&camera=${camera.name}`)
Play in background
</Label>
<Switch
className="ml-1"
id="backgroundplay"
checked={playInBackground}
onCheckedChange={(checked) =>
setPlayInBackground(checked)
} }
className="ml-2 inline-flex size-5 cursor-pointer"
/> />
</div> </div>
<p className="text-sm text-muted-foreground">
Enable this option to continue streaming when the player is
hidden.
</p>
</div> </div>
</div> </div>
</DropdownMenuContent> </DropdownMenuContent>
@ -1155,6 +1170,84 @@ function FrigateCameraFeatures({
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
{preferredLiveMode != "jsmpeg" && isRestreamed && (
<div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supportsAudioOutput ? (
<>
<LuCheck className="size-4 text-success" />
<div>Audio is available for this stream</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>Audio is unavailable for this stream</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80">
Audio must be output from your camera and configured in
go2rtc for this stream.
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode != "jsmpeg" &&
isRestreamed &&
supportsAudioOutput && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supports2WayTalk ? (
<>
<LuCheck className="size-4 text-success" />
<div>Two-way talk is available for this stream</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>Two-way talk is unavailable for this stream</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80">
Your device must suppport the feature and WebRTC must
be configured for two-way talk.
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live/#webrtc-extra-configuration"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode == "jsmpeg" && isRestreamed && ( {preferredLiveMode == "jsmpeg" && isRestreamed && (
<div className="mt-2 flex flex-col items-center gap-3"> <div className="mt-2 flex flex-col items-center gap-3">
<div className="flex flex-row items-center gap-2"> <div className="flex flex-row items-center gap-2">
@ -1194,6 +1287,17 @@ function FrigateCameraFeatures({
</p> </p>
</> </>
)} )}
<div className="flex flex-col gap-1 px-2">
<div className="flex items-center justify-between text-sm">
Debug View
<LuExternalLink
onClick={() =>
navigate(`/settings?page=debug&camera=${camera.name}`)
}
className="ml-2 inline-flex size-5 cursor-pointer"
/>
</div>
</div>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
); );