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

More z-index cleanup

Browse Source
This commit is contained in:
Nicolas Mowen 2024-07-13 10:47:28 -06:00
parent d2f8d6c978
commit da29e8cbc0
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>