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

Adjust thumbnail aspect and add text

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-08 12:48:30 -07:00
parent 3be7021275
commit 7ab4763546
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/image/EventThumbnail.tsx
View File

@ -1,6 +1,7 @@
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { Event as FrigateEvent } from "@/types/event"; import { Event as FrigateEvent } from "@/types/event";
import { LuStar } from "react-icons/lu"; import { LuStar } from "react-icons/lu";
import TimeAgo from "../dynamic/TimeAgo";
type EventThumbnailProps = { type EventThumbnailProps = {
event: FrigateEvent; event: FrigateEvent;
@ -9,16 +10,19 @@ type EventThumbnailProps = {
export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) { export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
return ( return (
<div <div
className="relative rounded bg-cover w-40 h-24 bg-no-repeat bg-center mr-4" className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
style={{ style={{
backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`, backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
}} }}
> >
<LuStar <LuStar
className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer" className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)} onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
fill={event.retain_indefinitely ? "currentColor" : "none"} fill={event.retain_indefinitely ? "currentColor" : "none"}
/> />
<div className="absolute left-1 bottom-0 text-sm text-white">
<TimeAgo time={event.start_time * 1000} dense />
</div>
</div> </div>
); );
} }