Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-10-15 20:07:23 +02:00
Code Issues Projects Releases Wiki Activity

UI Tweaks (#11931)

Browse Source 
* Show number of items instead of dot

* Don't call error when connection has been closed on purpose

* Use motion icon for motion

* Show text on tablets as well
This commit is contained in:
Nicolas Mowen 2024-06-13 09:45:07 -05:00 committed by GitHub
parent 3e1861e2ce
commit e56ce993df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 80 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/player/MsePlayer.tsx
View File

@ -328,7 +328,10 @@ function MSEPlayer({
setBufferTimeout(
setTimeout(() => {
if (document.visibilityState === "visible") {
if (
document.visibilityState === "visible" &&
wsRef.current != undefined
) {
onError("stalled");
}
}, 3000),

5
web/src/components/player/WebRTCPlayer.tsx
View File

@ -238,7 +238,10 @@ export default function WebRtcPlayer({
setBufferTimeout(
setTimeout(() => {
if (document.visibilityState === "visible") {
if (
document.visibilityState === "visible" &&
pcRef.current != undefined
) {
onError("stalled");
}
}, 3000),

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

@ -29,7 +29,7 @@ import {
useRef,
useState,
} from "react";
import { isDesktop, isMobile } from "react-device-detect";
import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
import { LuFolderCheck, LuFolderX } from "react-icons/lu";
import { MdCircle } from "react-icons/md";
import useSWR from "swr";
@ -50,6 +50,7 @@ import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { FilterList } from "@/types/filter";
import { GiSoundWaves } from "react-icons/gi";
type EventViewProps = {
reviewItems?: SegmentedReviewData;
@ -243,46 +244,89 @@ export default function EventView({
} // don't allow the severity to be unselected
>
<ToggleGroupItem
className={`${severityToggle == "alert" ? "" : "text-muted-foreground"}`}
className={cn(severityToggle != "alert" && "text-muted-foreground")}
value="alert"
aria-label="Select alerts"
>
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Alerts
{reviewCounts.alert > -1 ? (
` ∙ ${reviewCounts.alert}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
{isMobileOnly ? (
<div
className={cn(
"flex size-6 items-center justify-center rounded text-severity_alert",
severityToggle == "alert" ? "font-semibold" : "font-medium",
)}
>
{reviewCounts.alert > -1 ? (
reviewCounts.alert
) : (
<ActivityIndicator className="size-4" />
)}
</div>
) : (
<>
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Alerts
{reviewCounts.alert > -1 ? (
` ∙ ${reviewCounts.alert}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
)}
</ToggleGroupItem>
<ToggleGroupItem
className={`${severityToggle == "detection" ? "" : "text-muted-foreground"}`}
className={cn(
severityToggle != "detection" && "text-muted-foreground",
)}
value="detection"
aria-label="Select detections"
>
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Detections
{reviewCounts.detection > -1 ? (
` ∙ ${reviewCounts.detection}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
{isMobileOnly ? (
<div
className={cn(
"flex size-6 items-center justify-center rounded text-severity_detection",
severityToggle == "detection"
? "font-semibold"
: "font-medium",
)}
>
{reviewCounts.detection > -1 ? (
reviewCounts.detection
) : (
<ActivityIndicator className="size-4" />
)}
</div>
) : (
<>
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Detections
{reviewCounts.detection > -1 ? (
` ∙ ${reviewCounts.detection}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
)}
</ToggleGroupItem>
<ToggleGroupItem
className={`rounded-lg px-3 py-4 ${
severityToggle == "significant_motion"
? ""
: "text-muted-foreground"
}`}
className={cn(
"rounded-lg px-3 py-4",
severityToggle != "significant_motion" && "text-muted-foreground",
)}
value="significant_motion"
aria-label="Select motion"
>
<MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
<div className="hidden md:block">Motion</div>
{isMobileOnly ? (
<GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion" />
) : (
<>
<MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
<div className="hidden md:block">Motion</div>
</>
)}
</ToggleGroupItem>
</ToggleGroup>