Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Improve safari image scrolling performance (#12429)

Browse Source 
* Don't set z-height on iOS

* More z-index cleanup
This commit is contained in:
Nicolas Mowen 2024-07-13 10:54:24 -06:00 committed by GitHub
parent 843d301950
commit a4eb435f1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/indicators/Chip.tsx
View File

@ -1,6 +1,7 @@
import { cn } from "@/lib/utils";
import { LogSeverity } from "@/types/log";
import { ReactNode, useMemo, useRef } from "react";
import { isIOS } from "react-device-detect";
import { CSSTransition } from "react-transition-group";
type ChipProps = {
@ -34,8 +35,9 @@ export default function Chip({
<div
ref={nodeRef}
className={cn(
"z-10 flex items-center rounded-2xl px-2 py-1.5",
"flex items-center rounded-2xl px-2 py-1.5",
className,
!isIOS && "z-10",
)}
onClick={onClick}
>

42
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -26,6 +26,7 @@ import { NoThumbSlider } from "../ui/slider";
import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
type PreviewPlayerProps = {
review: ReviewSegment;
@ -229,8 +230,15 @@ export default function PreviewThumbnailPlayer({
onImgLoad();
}}
/>
<div className="absolute left-0 top-2 z-40">
{!playingBack && (
<div
className={cn(
"rounded-t-l pointer-events-none absolute inset-x-0 top-0 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent",
!isIOS && "z-10",
)}
/>
)}
<div className={cn("absolute left-0 top-2", !isIOS && "z-40")}>
<Tooltip>
<div
className="flex"
@ -276,21 +284,23 @@ export default function PreviewThumbnailPlayer({
</Tooltip>
</div>
{!playingBack && (
<>
<div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
<div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
<div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
{review.end_time ? (
<TimeAgo time={review.start_time * 1000} dense />
) : (
<div>
<ActivityIndicator size={24} />
</div>
)}
{formattedDate}
</div>
<div
className={cn(
"rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent",
!isIOS && "z-10",
)}
>
<div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
{review.end_time ? (
<TimeAgo time={review.start_time * 1000} dense />
) : (
<div>
<ActivityIndicator size={24} />
</div>
)}
{formattedDate}
</div>
</>
</div>
)}
</div>
</div>