administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 09:37:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Refactor export cards to match existing cards in other UI pages

Browse Source
This commit is contained in:
Nicolas Mowen 2025-12-15 09:37:24 -07:00
parent 5cced22f65
commit d3a88fc78c
1 changed files with 76 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
web/src/components/card/ExportCard.tsx
View File

@ -1,9 +1,8 @@
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { LuTrash } from "react-icons/lu";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { isDesktop, isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa"; import { FiMoreVertical } from "react-icons/fi";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { import {
Dialog, Dialog,
@ -15,15 +14,19 @@ import {
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { DeleteClipType, Export } from "@/types/export"; import { DeleteClipType, Export } from "@/types/export";
import { MdEditSquare } from "react-icons/md";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { shareOrCopy } from "@/utils/browserUtil"; import { shareOrCopy } from "@/utils/browserUtil";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay"; import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
import BlurredIconButton from "../button/BlurredIconButton"; import BlurredIconButton from "../button/BlurredIconButton";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { useIsAdmin } from "@/hooks/use-is-admin"; import { useIsAdmin } from "@/hooks/use-is-admin";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
type ExportProps = { type ExportProps = {
className: string; className: string;
@ -42,7 +45,6 @@ export default function ExportCard({
}: ExportProps) { }: ExportProps) {
const { t } = useTranslation(["views/exports"]); const { t } = useTranslation(["views/exports"]);
const isAdmin = useIsAdmin(); const isAdmin = useIsAdmin();
const [hovered, setHovered] = useState(false);
const [loading, setLoading] = useState( const [loading, setLoading] = useState(
exportedRecording.thumb_path.length > 0, exportedRecording.thumb_path.length > 0,
); );
@ -136,12 +138,14 @@ export default function ExportCard({
<div <div
className={cn( className={cn(
"relative flex aspect-video items-center justify-center rounded-lg bg-black md:rounded-2xl", "relative flex aspect-video cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl",
className, className,
)} )}
onMouseEnter={isDesktop ? () => setHovered(true) : undefined} onClick={() => {
onMouseLeave={isDesktop ? () => setHovered(false) : undefined} if (!exportedRecording.in_progress) {
onClick={isDesktop ? undefined : () => setHovered(!hovered)} onSelect(exportedRecording);
}
}}
> >
{exportedRecording.in_progress ? ( {exportedRecording.in_progress ? (
<ActivityIndicator /> <ActivityIndicator />
@ -158,95 +162,76 @@ export default function ExportCard({
)} )}
</> </>
)} )}
{hovered && ( {!exportedRecording.in_progress && (
<> <div className="absolute bottom-2 right-3 z-40">
<div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" /> <DropdownMenu>
<div className="absolute right-3 top-2"> <DropdownMenuTrigger>
<div className="flex items-center justify-center gap-4"> <BlurredIconButton
{!exportedRecording.in_progress && ( aria-label={t("tooltip.editName")}
<Tooltip> onClick={(e) => e.stopPropagation()}
<TooltipTrigger asChild> >
<BlurredIconButton <FiMoreVertical className="size-5" />
onClick={() => </BlurredIconButton>
shareOrCopy( </DropdownMenuTrigger>
`${baseUrl}export?id=${exportedRecording.id}`, <DropdownMenuContent align="end">
exportedRecording.name.replaceAll("_", " "), <DropdownMenuItem
) className="cursor-pointer"
} aria-label={t("tooltip.shareExport")}
> onClick={(e) => {
<FaShareAlt className="size-4" /> e.stopPropagation();
</BlurredIconButton> shareOrCopy(
</TooltipTrigger> `${baseUrl}export?id=${exportedRecording.id}`,
<TooltipContent>{t("tooltip.shareExport")}</TooltipContent> exportedRecording.name.replaceAll("_", " "),
</Tooltip> );
)} }}
{!exportedRecording.in_progress && ( >
{t("tooltip.shareExport")}
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.downloadVideo")}
>
<a <a
download download
href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`} href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
onClick={(e) => e.stopPropagation()}
> >
<Tooltip> {t("tooltip.downloadVideo")}
<TooltipTrigger asChild>
<BlurredIconButton>
<FaDownload className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>
{t("tooltip.downloadVideo")}
</TooltipContent>
</Tooltip>
</a> </a>
)} </DropdownMenuItem>
{isAdmin && !exportedRecording.in_progress && ( {isAdmin && (
<Tooltip> <DropdownMenuItem
<TooltipTrigger asChild> className="cursor-pointer"
<BlurredIconButton aria-label={t("tooltip.editName")}
onClick={() => onClick={(e) => {
setEditName({ e.stopPropagation();
original: exportedRecording.name, setEditName({
update: undefined, original: exportedRecording.name,
}) update: undefined,
} });
> }}
<MdEditSquare className="size-4" /> >
</BlurredIconButton> {t("tooltip.editName")}
</TooltipTrigger> </DropdownMenuItem>
<TooltipContent>{t("tooltip.editName")}</TooltipContent>
</Tooltip>
)} )}
{isAdmin && ( {isAdmin && (
<Tooltip> <DropdownMenuItem
<TooltipTrigger asChild> className="cursor-pointer"
<BlurredIconButton aria-label={t("tooltip.deleteExport")}
onClick={() => onClick={(e) => {
onDelete({ e.stopPropagation();
file: exportedRecording.id, onDelete({
exportName: exportedRecording.name, file: exportedRecording.id,
}) exportName: exportedRecording.name,
} });
> }}
<LuTrash className="size-4 fill-destructive text-destructive hover:text-white" /> >
</BlurredIconButton> {t("tooltip.deleteExport")}
</TooltipTrigger> </DropdownMenuItem>
<TooltipContent>{t("tooltip.deleteExport")}</TooltipContent>
</Tooltip>
)} )}
</div> </DropdownMenuContent>
</div> </DropdownMenu>
</div>
{!exportedRecording.in_progress && (
<Button
className="absolute left-1/2 top-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
aria-label={t("button.play", { ns: "common" })}
variant="ghost"
onClick={() => {
onSelect(exportedRecording);
}}
>
<FaPlay />
</Button>
)}
</>
)} )}
{loading && ( {loading && (
<Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" /> <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />