administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-16 12:02:09 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: add mobile page camera nickname

Browse Source
This commit is contained in:
ZhaiSoul 2025-08-21 14:04:53 +00:00
parent 4a5f7bd6a3
commit af99fbac28
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/overlay/MobileCameraDrawer.tsx
View File

@ -4,6 +4,7 @@ import { Button } from "../ui/button";
import { FaVideo } from "react-icons/fa"; import { FaVideo } from "react-icons/fa";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { CameraNameLabel } from "../camera/CameraNameLabel";
type MobileCameraDrawerProps = { type MobileCameraDrawerProps = {
allCameras: string[]; allCameras: string[];
@ -44,7 +45,7 @@ export default function MobileCameraDrawer({
setCameraDrawer(false); setCameraDrawer(false);
}} }}
> >
{cam.replaceAll("_", " ")} <CameraNameLabel camera={cam} />
</div> </div>
))} ))}
</div> </div>

7
web/src/components/player/PreviewPlayer.tsx
View File

@ -21,6 +21,7 @@ import {
usePreviewForTimeRange, usePreviewForTimeRange,
} from "@/hooks/use-camera-previews"; } from "@/hooks/use-camera-previews";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useCameraNickname } from "@/hooks/use-camera-nickname";
type PreviewPlayerProps = { type PreviewPlayerProps = {
previewRef?: (ref: HTMLDivElement | null) => void; previewRef?: (ref: HTMLDivElement | null) => void;
@ -148,6 +149,7 @@ function PreviewVideoPlayer({
const { t } = useTranslation(["components/player"]); const { t } = useTranslation(["components/player"]);
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const cameraName = useCameraNickname(camera);
// controlling playback // controlling playback
const previewRef = useRef<HTMLVideoElement | null>(null); const previewRef = useRef<HTMLVideoElement | null>(null);
@ -342,7 +344,7 @@ function PreviewVideoPlayer({
)} )}
{cameraPreviews && !currentPreview && ( {cameraPreviews && !currentPreview && (
<div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl"> <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
{t("noPreviewFoundFor", { camera: camera.replaceAll("_", " ") })} {t("noPreviewFoundFor", { camera: cameraName })}
</div> </div>
)} )}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />} {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@ -464,6 +466,7 @@ function PreviewFramesPlayer({
}: PreviewFramesPlayerProps) { }: PreviewFramesPlayerProps) {
const { t } = useTranslation(["components/player"]); const { t } = useTranslation(["components/player"]);
const cameraName = useCameraNickname(camera);
// frames data // frames data
const { data: previewFrames } = useSWR<string[]>( const { data: previewFrames } = useSWR<string[]>(
@ -564,7 +567,7 @@ function PreviewFramesPlayer({
/> />
{previewFrames?.length === 0 && ( {previewFrames?.length === 0 && (
<div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl"> <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
{t("noPreviewFoundFor", { cameraName: camera.replaceAll("_", " ") })} {t("noPreviewFoundFor", { cameraName: cameraName })}
</div> </div>
)} )}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />} {firstLoad && <Skeleton className="absolute aspect-video size-full" />}

3
web/src/views/recording/RecordingView.tsx
View File

@ -64,6 +64,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
type RecordingViewProps = { type RecordingViewProps = {
startCamera: string; startCamera: string;
@ -719,7 +720,7 @@ export function RecordingView({
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="smart-capitalize"> <TooltipContent className="smart-capitalize">
{cam.replaceAll("_", " ")} <CameraNameLabel camera={cam} />
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
); );