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

fix incorrect focus when reopening search detail dialog on video tab

Browse Source
This commit is contained in:
Josh Hawkins 2025-05-07 15:52:45 -05:00
parent 68ef0b88fb
commit cfe819df77
1 changed files with 52 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -1234,55 +1234,58 @@ export function VideoTab({ search }: VideoTabProps) {
const source = `${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`; const source = `${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`;
return ( return (
<GenericVideoPlayer source={source}> <>
{reviewItem && ( <span tabIndex={0} className="sr-only" />
<div <GenericVideoPlayer source={source}>
className={cn( {reviewItem && (
"absolute top-2 z-10 flex items-center gap-2", <div
isIOS ? "right-8" : "right-2", className={cn(
)} "absolute top-2 z-10 flex items-center gap-2",
> isIOS ? "right-8" : "right-2",
<Tooltip> )}
<TooltipTrigger> >
<Chip <Tooltip>
className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500" <TooltipTrigger>
onClick={() => { <Chip
if (reviewItem?.id) { className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
const params = new URLSearchParams({ onClick={() => {
id: reviewItem.id, if (reviewItem?.id) {
}).toString(); const params = new URLSearchParams({
navigate(`/review?${params}`); id: reviewItem.id,
} }).toString();
}} navigate(`/review?${params}`);
> }
<FaHistory className="size-4 text-white" /> }}
</Chip> >
</TooltipTrigger> <FaHistory className="size-4 text-white" />
<TooltipPortal>
<TooltipContent>
{t("itemMenu.viewInHistory.label")}
</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<a
download
href={`${baseUrl}api/${search.camera}/start/${search.start_time}/end/${endTime}/clip.mp4`}
>
<Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
<FaDownload className="size-4 text-white" />
</Chip> </Chip>
</a> </TooltipTrigger>
</TooltipTrigger> <TooltipPortal>
<TooltipPortal> <TooltipContent>
<TooltipContent> {t("itemMenu.viewInHistory.label")}
{t("button.download", { ns: "common" })} </TooltipContent>
</TooltipContent> </TooltipPortal>
</TooltipPortal> </Tooltip>
</Tooltip> <Tooltip>
</div> <TooltipTrigger asChild>
)} <a
</GenericVideoPlayer> download
href={`${baseUrl}api/${search.camera}/start/${search.start_time}/end/${endTime}/clip.mp4`}
>
<Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
<FaDownload className="size-4 text-white" />
</Chip>
</a>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
{t("button.download", { ns: "common" })}
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
)}
</GenericVideoPlayer>
</>
); );
} }