Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Make all corners less rounded on mobile (#11068)

Browse Source 
* make corners less rounded on mobile

* fix live dashboard classes
This commit is contained in:
Josh Hawkins 2024-04-22 10:12:45 -05:00 committed by GitHub
parent ba3930ab02
commit d6e93d039d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/camera/CameraImage.tsx
View File

@ -40,7 +40,7 @@ export default function CameraImage({
{enabled ? (
<img
ref={imgRef}
className="object-contain rounded-2xl"
className="object-contain rounded-lg md:rounded-2xl"
onLoad={() => {
setHasLoaded(true);

2
web/src/components/camera/ResizingCameraImage.tsx
View File

@ -100,7 +100,7 @@ export default function CameraImage({
>
{enabled ? (
<canvas
className="rounded-2xl"
className="rounded-lg md:rounded-2xl"
data-testid="cameraimage-canvas"
height={scaledHeight}
ref={canvasRef}

2
web/src/components/card/AnimatedEventCard.tsx
View File

@ -63,7 +63,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
}}
>
<div
className="size-full rounded cursor-pointer overflow-hidden"
className="size-full rounded md:rounded-lg cursor-pointer overflow-hidden"
onClick={onOpenReview}
>
{previews ? (

12
web/src/components/card/ExportCard.tsx
View File

@ -104,7 +104,7 @@ export default function ExportCard({
</Dialog>
<div
className={`relative aspect-video bg-black rounded-2xl flex justify-center items-center ${className}`}
className={`relative aspect-video bg-black rounded-lg md:rounded-2xl flex justify-center items-center ${className}`}
onMouseEnter={
isDesktop && !exportedRecording.in_progress
? () => setHovered(true)
@ -123,7 +123,7 @@ export default function ExportCard({
>
{hovered && (
<>
<div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
<div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-lg md:rounded-2xl" />
<div className="absolute top-1 right-1 flex items-center gap-2">
<a
className="z-20"
@ -172,19 +172,19 @@ export default function ExportCard({
<>
{exportedRecording.thumb_path.length > 0 ? (
<img
className="size-full absolute inset-0 object-contain aspect-video rounded-2xl"
className="size-full absolute inset-0 object-contain aspect-video rounded-lg md:rounded-2xl"
src={exportedRecording.thumb_path.replace("/media/frigate", "")}
onLoad={() => setLoading(false)}
/>
) : (
<div className="absolute inset-0 bg-secondary rounded-2xl" />
<div className="absolute inset-0 bg-secondary rounded-lg md:rounded-2xl" />
)}
</>
)}
{loading && (
<Skeleton className="absolute inset-0 aspect-video rounded-2xl" />
<Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
)}
<div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-2xl">
<div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-lg md:rounded-2xl">
<div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm capitalize">
{exportedRecording.name.replaceAll("_", " ")}
</div>

8
web/src/components/menu/GeneralSettings.tsx
View File

@ -210,7 +210,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</SubItemTrigger>
<Portal>
<SubItemContent
className={isDesktop ? "" : "w-[92%] rounded-2xl"}
className={
isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
}
>
<span tabIndex={0} className="sr-only" />
<MenuItem
@ -280,7 +282,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</SubItemTrigger>
<Portal>
<SubItemContent
className={isDesktop ? "" : "w-[92%] rounded-2xl"}
className={
isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
}
>
<span tabIndex={0} className="sr-only" />
{colorSchemes.map((scheme) => (

4
web/src/components/overlay/ExportDialog.tsx
View File

@ -130,7 +130,9 @@ export default function ExportDialog({
</Trigger>
<Content
className={
isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"
isDesktop
? "sm:rounded-lg md:rounded-2xl"
: "px-4 pb-4 mx-4 rounded-lg md:rounded-2xl"
}
>
<ExportContent

16
web/src/components/player/BirdseyeLivePlayer.tsx
View File

@ -21,12 +21,18 @@ export default function BirdseyeLivePlayer({
let player;
if (liveMode == "webrtc") {
player = (
<WebRtcPlayer className={`rounded-2xl size-full`} camera="birdseye" />
<WebRtcPlayer
className={`rounded-lg md:rounded-2xl size-full`}
camera="birdseye"
/>
);
} else if (liveMode == "mse") {
if ("MediaSource" in window || "ManagedMediaSource" in window) {
player = (
<MSEPlayer className={`rounded-2xl size-full`} camera="birdseye" />
<MSEPlayer
className={`rounded-lg md:rounded-2xl size-full`}
camera="birdseye"
/>
);
} else {
player = (
@ -39,7 +45,7 @@ export default function BirdseyeLivePlayer({
} else if (liveMode == "jsmpeg") {
player = (
<JSMpegPlayer
className="size-full flex justify-center rounded-2xl overflow-hidden"
className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
camera="birdseye"
width={birdseyeConfig.width}
height={birdseyeConfig.height}
@ -54,8 +60,8 @@ export default function BirdseyeLivePlayer({
className={`relative flex justify-center w-full cursor-pointer ${className ?? ""}`}
onClick={onClick}
>
<div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
<div className="size-full">{player}</div>
</div>
);

2
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -164,7 +164,7 @@ export default function HlsVideoPlayer({
>
<video
ref={videoRef}
className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
className={`size-full bg-black rounded-lg md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
preload="auto"
autoPlay
controls={false}

12
web/src/components/player/LivePlayer.tsx
View File

@ -95,7 +95,7 @@ export default function LivePlayer({
if (liveMode == "webrtc") {
player = (
<WebRtcPlayer
className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
camera={cameraConfig.live.stream_name}
playbackEnabled={cameraActive}
audioEnabled={playAudio}
@ -109,7 +109,7 @@ export default function LivePlayer({
if ("MediaSource" in window || "ManagedMediaSource" in window) {
player = (
<MSEPlayer
className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
camera={cameraConfig.name}
playbackEnabled={cameraActive}
audioEnabled={playAudio}
@ -128,7 +128,7 @@ export default function LivePlayer({
} else if (liveMode == "jsmpeg") {
player = (
<JSMpegPlayer
className="size-full flex justify-center rounded-2xl overflow-hidden"
className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
camera={cameraConfig.name}
width={cameraConfig.detect.width}
height={cameraConfig.detect.height}
@ -144,13 +144,13 @@ export default function LivePlayer({
data-camera={cameraConfig.name}
className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
activeTracking
? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
: "outline-0 outline-background"
} transition-all duration-500 ${className}`}
onClick={onClick}
>
<div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
{player}
<div

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

@ -238,7 +238,7 @@ function PreviewVideoPlayer({
return (
<div
className={`relative rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
className={`relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
onClick={onClick}
>
<img
@ -283,7 +283,7 @@ function PreviewVideoPlayer({
)}
</video>
{cameraPreviews && !currentPreview && (
<div className="absolute inset-0 text-white rounded-2xl flex justify-center items-center">
<div className="absolute inset-0 text-white rounded-lg md:rounded-2xl flex justify-center items-center">
No Preview Found
</div>
)}
@ -481,11 +481,11 @@ function PreviewFramesPlayer({
>
<img
ref={imgRef}
className={`size-full object-contain rounded-2xl bg-black`}
className={`size-full object-contain rounded-lg md:rounded-2xl bg-black`}
onLoad={onImageLoaded}
/>
{previewFrames?.length === 0 && (
<div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center">
<div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-lg md:rounded-2xl align-center text-center">
No Preview Found
</div>
)}

2
web/src/components/settings/MotionTuner.tsx
View File

@ -308,7 +308,7 @@ export default function MotionTuner({
</div>
</div>
) : (
<Skeleton className="size-full rounded-2xl" />
<Skeleton className="size-full rounded-lg md:rounded-2xl" />
)}
</div>
);

2
web/src/components/timeline/EventSegment.tsx
View File

@ -247,7 +247,7 @@ export function EventSegment({
</HoverCardTrigger>
<HoverCardPortal>
<HoverCardContent
className="rounded-2xl w-[250px] p-2"
className="rounded-lg md:rounded-2xl w-[250px] p-2"
side="left"
>
<img

2
web/src/pages/Exports.tsx
View File

@ -113,7 +113,7 @@ function Exports() {
<DialogContent className="max-w-7xl">
<DialogTitle>{selected?.name}</DialogTitle>
<video
className="size-full rounded-2xl"
className="size-full rounded-lg md:rounded-2xl"
playsInline
preload="auto"
autoPlay

4
web/src/pages/SubmitPlus.tsx
View File

@ -182,11 +182,11 @@ export default function SubmitPlus() {
return (
<div
key={event.id}
className="w-full rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
className="w-full rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
onClick={() => setUpload(event)}
>
<img
className="aspect-video h-full object-contain rounded-2xl"
className="aspect-video h-full object-contain rounded-lg md:rounded-2xl"
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
loading="lazy"
/>

6
web/src/views/events/EventView.tsx
View File

@ -249,7 +249,7 @@ export default function EventView({
</div>
</ToggleGroupItem>
<ToggleGroupItem
className={`px-3 py-4 rounded-2xl ${
className={`px-3 py-4 rounded-lg ${
severityToggle == "significant_motion"
? ""
: "text-muted-foreground"
@ -891,7 +891,7 @@ function MotionReview({
{motionData ? (
<>
<PreviewPlayer
className={`rounded-2xl ${spans} ${grow}`}
className={`rounded-lg md:rounded-2xl ${spans} ${grow}`}
camera={camera.name}
timeRange={currentTimeRange}
startTime={previewStart}
@ -917,7 +917,7 @@ function MotionReview({
</>
) : (
<Skeleton
className={`rounded-2xl size-full ${spans} ${grow}`}
className={`rounded-lg md:rounded-2xl size-full ${spans} ${grow}`}
/>
)}
</div>

4
web/src/views/live/LiveDashboardView.tsx
View File

@ -175,7 +175,7 @@ export default function LiveDashboardView({
)}
<div
className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
>
{includeBirdseye && birdseyeConfig?.enabled && (
<BirdseyeLivePlayer
@ -198,7 +198,7 @@ export default function LiveDashboardView({
<LivePlayer
cameraRef={cameraRef}
key={camera.name}
className={grow}
className={`${grow} rounded-lg md:rounded-2xl bg-black`}
windowVisible={
windowVisible && visibleCameras.includes(camera.name)
}

8
web/src/views/system/CameraMetrics.tsx
View File

@ -189,7 +189,7 @@ export default function CameraMetrics({
<div className="text-muted-foreground text-sm font-medium">Overview</div>
<div className="grid grid-cols-1 md:grid-cols-3">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">DPS</div>
<CameraLineGraph
graphId="overall-stats"
@ -200,7 +200,7 @@ export default function CameraMetrics({
/>
</div>
) : (
<Skeleton className="w-full h-32" />
<Skeleton className="w-full rounded-lg md:rounded-2xl h-32" />
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -214,7 +214,7 @@ export default function CameraMetrics({
</div>
<div key={camera.name} className="grid sm:grid-cols-2 gap-2">
{Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">CPU</div>
<CameraLineGraph
graphId={`${camera.name}-cpu`}
@ -230,7 +230,7 @@ export default function CameraMetrics({
<Skeleton className="size-full aspect-video" />
)}
{Object.keys(cameraFpsSeries).includes(camera.name) ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">DPS</div>
<CameraLineGraph
graphId={`${camera.name}-dps`}

18
web/src/views/system/GeneralMetrics.tsx
View File

@ -334,7 +334,7 @@ export default function GeneralMetrics({
className={`w-full mt-4 grid grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
>
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector Inference Speed</div>
{detInferenceTimeSeries.map((series) => (
<ThresholdBarGraph
@ -349,12 +349,12 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="w-full rounded-lg md:rounded-2xl aspect-video" />
)}
{statsHistory.length != 0 ? (
<>
{detTempSeries && (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector Temperature</div>
{detTempSeries.map((series) => (
<ThresholdBarGraph
@ -374,7 +374,7 @@ export default function GeneralMetrics({
<Skeleton className="w-full aspect-video" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector CPU Usage</div>
{detCpuSeries.map((series) => (
<ThresholdBarGraph
@ -392,7 +392,7 @@ export default function GeneralMetrics({
<Skeleton className="w-full aspect-video" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector Memory Usage</div>
{detMemSeries.map((series) => (
<ThresholdBarGraph
@ -429,7 +429,7 @@ export default function GeneralMetrics({
</div>
<div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">GPU Usage</div>
{gpuSeries.map((series) => (
<ThresholdBarGraph
@ -449,7 +449,7 @@ export default function GeneralMetrics({
{statsHistory.length != 0 ? (
<>
{gpuMemSeries && (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">GPU Memory</div>
{gpuMemSeries.map((series) => (
<ThresholdBarGraph
@ -477,7 +477,7 @@ export default function GeneralMetrics({
</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Process CPU Usage</div>
{otherProcessCpuSeries.map((series) => (
<ThresholdBarGraph
@ -495,7 +495,7 @@ export default function GeneralMetrics({
<Skeleton className="w-full aspect-tall" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Process Memory Usage</div>
{otherProcessMemSeries.map((series) => (
<ThresholdBarGraph

8
web/src/views/system/StorageMetrics.tsx
View File

@ -45,7 +45,7 @@ export default function StorageMetrics({
<div className="size-full mt-4 flex flex-col overflow-y-auto">
<div className="text-muted-foreground text-sm font-medium">Overview</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5">Recordings</div>
<StorageGraph
graphId="general-recordings"
@ -53,7 +53,7 @@ export default function StorageMetrics({
total={totalStorage.total}
/>
</div>
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5">/tmp/cache</div>
<StorageGraph
graphId="general-cache"
@ -61,7 +61,7 @@ export default function StorageMetrics({
total={stats.service.storage["/tmp/cache"]["total"]}
/>
</div>
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5">/dev/shm</div>
<StorageGraph
graphId="general-shared-memory"
@ -75,7 +75,7 @@ export default function StorageMetrics({
</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
{Object.keys(cameraStorage).map((camera) => (
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
<StorageGraph
graphId={`${camera}-storage`}