administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 13:15:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Only show back button text on desktop

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-27 10:29:00 -06:00
parent 559e6910c4
commit 18988a0f8c
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/views/events/RecordingView.tsx
View File

@ -70,6 +70,7 @@ export function RecordingView({
const [mainCamera, setMainCamera] = useState(startCamera); const [mainCamera, setMainCamera] = useState(startCamera);
const mainControllerRef = useRef<DynamicVideoController | null>(null); const mainControllerRef = useRef<DynamicVideoController | null>(null);
const previewRefs = useRef<{ [camera: string]: PreviewController }>({}); const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
const [cameraDrawer, setCameraDrawer] = useState(false);
const [playbackStart, setPlaybackStart] = useState(startTime); const [playbackStart, setPlaybackStart] = useState(startTime);
@ -220,37 +221,39 @@ export function RecordingView({
return ( return (
<div ref={contentRef} className="size-full flex flex-col"> <div ref={contentRef} className="size-full flex flex-col">
<Toaster /> <Toaster />
<div className={`w-full h-10 flex items-center justify-between pr-1`}> <div className={`w-full h-10 px-1 flex items-center justify-between`}>
<Button className="rounded-lg" onClick={() => navigate(-1)}> <Button
<IoMdArrowRoundBack className="size-5 mr-[10px]" /> className="flex items-center gap-2 rounded-lg"
Back onClick={() => navigate(-1)}
>
<IoMdArrowRoundBack className="size-5" size="small" />
{isDesktop && "Back"}
</Button> </Button>
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
{isMobile && ( {isMobile && (
<Drawer> <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
<DrawerTrigger asChild> <DrawerTrigger asChild>
<Button <Button
className="rounded-lg capitalize flex items-center gap-2" className="rounded-lg capitalize"
size="sm" size="sm"
variant="secondary" variant="secondary"
> >
<FaVideo className="text-muted-foreground" /> <FaVideo className="text-muted-foreground" />
{mainCamera.replaceAll("_", " ")}
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="max-h-[75dvh] overflow-hidden"> <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2">
{allCameras.map((cam) => ( {allCameras.map((cam) => (
<FilterCheckBox <div
key={cam} key={cam}
CheckIcon={FaCircle} className={`w-full mx-4 py-2 text-center capitalize ${cam == mainCamera ? "bg-secondary rounded-lg" : ""}`}
iconClassName="size-2" onClick={() => {
label={cam.replaceAll("_", " ")}
isChecked={cam == mainCamera}
onCheckedChange={() => {
setPlaybackStart(currentTime); setPlaybackStart(currentTime);
setMainCamera(cam); setMainCamera(cam);
setCameraDrawer(false);
}} }}
/> >
{cam.replaceAll("_", " ")}
</div>
))} ))}
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>