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 { cn } from "@/lib/utils";
import { LogSeverity } from "@/types/log"; import { LogSeverity } from "@/types/log";
import { ReactNode, useMemo, useRef } from "react"; import { ReactNode, useMemo, useRef } from "react";
import { isIOS } from "react-device-detect";
import { CSSTransition } from "react-transition-group"; import { CSSTransition } from "react-transition-group";
type ChipProps = { type ChipProps = {
@ -34,8 +35,9 @@ export default function Chip({
<div <div
ref={nodeRef} ref={nodeRef}
className={cn( 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, className,
!isIOS && "z-10",
)} )}
onClick={onClick} onClick={onClick}
> >

22
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 { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
import { capitalizeFirstLetter } from "@/utils/stringUtil"; import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
type PreviewPlayerProps = { type PreviewPlayerProps = {
review: ReviewSegment; review: ReviewSegment;
@ -229,8 +230,15 @@ export default function PreviewThumbnailPlayer({
onImgLoad(); onImgLoad();
}} }}
/> />
{!playingBack && (
<div className="absolute left-0 top-2 z-40"> <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> <Tooltip>
<div <div
className="flex" className="flex"
@ -276,9 +284,12 @@ export default function PreviewThumbnailPlayer({
</Tooltip> </Tooltip>
</div> </div>
{!playingBack && ( {!playingBack && (
<> <div
<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> className={cn(
<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"> "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"> <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
{review.end_time ? ( {review.end_time ? (
<TimeAgo time={review.start_time * 1000} dense /> <TimeAgo time={review.start_time * 1000} dense />
@ -290,7 +301,6 @@ export default function PreviewThumbnailPlayer({
{formattedDate} {formattedDate}
</div> </div>
</div> </div>
</>
)} )}
</div> </div>
</div> </div>