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

Use cn to simplify classnames

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-09 10:54:14 -06:00
parent 02fb4a501f
commit 1af205cd26
2 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/hooks/resize-observer.ts
View File

@ -53,7 +53,10 @@ export function useOverflowObserver(ref: MutableRefObject<HTMLElement | null>) {
new ResizeObserver(() => { new ResizeObserver(() => {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
if (ref.current) { if (ref.current) {
setOverflow(ref.current.scrollWidth > ref.current.clientWidth); setOverflow(
ref.current.scrollWidth > ref.current.clientWidth ||
ref.current.scrollHeight > ref.current.clientHeight,
);
} }
}); });
}), }),

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

@ -44,6 +44,7 @@ import { FaVideo } from "react-icons/fa";
import { VideoResolutionType } from "@/types/live"; import { VideoResolutionType } from "@/types/live";
import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record"; import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { useOverflowObserver } from "@/hooks/resize-observer"; import { useOverflowObserver } from "@/hooks/resize-observer";
import { cn } from "@/lib/utils";
const SEGMENT_DURATION = 30; const SEGMENT_DURATION = 30;
@ -296,17 +297,18 @@ export function RecordingView({
return ( return (
<div ref={contentRef} className="size-full pt-2 flex flex-col"> <div ref={contentRef} className="size-full pt-2 flex flex-col">
<Toaster closeButton={true} /> <Toaster closeButton={true} />
<div <div className="w-full h-11 mb-2 px-2 relative flex items-center justify-between">
className={`w-full h-11 mb-2 px-2 relative flex items-center justify-between`}
>
{isMobile && ( {isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" /> <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
)} )}
<div <div
className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`} className={cn(
"flex items-center gap-2",
isMobile ? "landscape:flex-col" : "",
)}
> >
<Button <Button
className={`flex items-center gap-2.5 rounded-lg`} className="flex items-center gap-2.5 rounded-lg"
size="sm" size="sm"
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
> >
@ -407,19 +409,42 @@ export function RecordingView({
<div <div
ref={mainLayoutRef} ref={mainLayoutRef}
className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col landscape:flex-row gap-2"}`} className={cn(
"h-full flex justify-center overflow-hidden",
isDesktop ? "" : "flex-col landscape:flex-row gap-2",
)}
> >
<div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}> <div
className={cn("flex flex-1 flex-wrap", isDesktop ? "w-[80%]" : "")}
>
<div <div
className={`size-full flex items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`} className={cn(
"size-full flex items-center",
mainCameraAspect == "tall"
? "flex-row justify-evenly"
: "flex-col justify-center gap-2",
)}
> >
<div <div
key={mainCamera} key={mainCamera}
className={`relative ${ className={cn(
"relative",
isDesktop isDesktop
? `${mainCameraAspect == "tall" ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center` ? cn(
: `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}` "px-4 flex justify-center",
}`} mainCameraAspect == "tall"
? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]"
: mainCameraAspect == "wide"
? "w-full"
: "w-[78%]",
)
: cn(
"portrait:w-full pt-2",
mainCameraAspect == "wide"
? "landscape:w-full aspect-wide"
: "landscape:h-[94%] aspect-video",
),
)}
style={{ style={{
aspectRatio: isDesktop aspectRatio: isDesktop
? mainCameraAspect == "tall" ? mainCameraAspect == "tall"
@ -455,7 +480,13 @@ export function RecordingView({
{isDesktop && ( {isDesktop && (
<div <div
ref={previewRowRef} ref={previewRowRef}
className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : `w-full h-28 overflow-x-auto ${previewRowOverflows ? "" : "justify-center items-center"}`}`} className={cn(
"flex gap-2 overflow-auto",
mainCameraAspect == "tall"
? "h-full w-48 flex-col"
: `w-full h-28`,
previewRowOverflows ? "" : "justify-center items-center",
)}
> >
<div className="w-2" /> <div className="w-2" />
{allCameras.map((cam) => { {allCameras.map((cam) => {