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

135
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 && (
<>
<div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
<div className="absolute right-3 top-2">
<div className="flex items-center justify-center gap-4">
{!exportedRecording.in_progress && ( {!exportedRecording.in_progress && (
<Tooltip> <div className="absolute bottom-2 right-3 z-40">
<TooltipTrigger asChild> <DropdownMenu>
<DropdownMenuTrigger>
<BlurredIconButton <BlurredIconButton
onClick={() => aria-label={t("tooltip.editName")}
onClick={(e) => e.stopPropagation()}
>
<FiMoreVertical className="size-5" />
</BlurredIconButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.shareExport")}
onClick={(e) => {
e.stopPropagation();
shareOrCopy( shareOrCopy(
`${baseUrl}export?id=${exportedRecording.id}`, `${baseUrl}export?id=${exportedRecording.id}`,
exportedRecording.name.replaceAll("_", " "), exportedRecording.name.replaceAll("_", " "),
) );
} }}
>
{t("tooltip.shareExport")}
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.downloadVideo")}
> >
<FaShareAlt className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.shareExport")}</TooltipContent>
</Tooltip>
)}
{!exportedRecording.in_progress && (
<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>
<TooltipTrigger asChild>
<BlurredIconButton>
<FaDownload className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>
{t("tooltip.downloadVideo")} {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) => {
e.stopPropagation();
setEditName({ setEditName({
original: exportedRecording.name, original: exportedRecording.name,
update: undefined, update: undefined,
}) });
} }}
> >
<MdEditSquare className="size-4" /> {t("tooltip.editName")}
</BlurredIconButton> </DropdownMenuItem>
</TooltipTrigger>
<TooltipContent>{t("tooltip.editName")}</TooltipContent>
</Tooltip>
)} )}
{isAdmin && ( {isAdmin && (
<Tooltip> <DropdownMenuItem
<TooltipTrigger asChild> className="cursor-pointer"
<BlurredIconButton aria-label={t("tooltip.deleteExport")}
onClick={() => onClick={(e) => {
e.stopPropagation();
onDelete({ onDelete({
file: exportedRecording.id, file: exportedRecording.id,
exportName: exportedRecording.name, exportName: exportedRecording.name,
}) });
}
>
<LuTrash className="size-4 fill-destructive text-destructive hover:text-white" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.deleteExport")}</TooltipContent>
</Tooltip>
)}
</div>
</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 /> {t("tooltip.deleteExport")}
</Button> </DropdownMenuItem>
)} )}
</> </DropdownMenuContent>
</DropdownMenu>
</div>
)} )}
{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" />