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

Cleanup mobile

Browse Source
This commit is contained in:
Nicolas Mowen 2024-09-10 15:42:10 -06:00
parent 8b6105a817
commit 72860ae409
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { isDesktop, isIOS } from "react-device-detect"; import { isDesktop, isIOS, isMobile } from "react-device-detect";
import { import {
Drawer, Drawer,
DrawerContent, DrawerContent,
@ -31,6 +31,7 @@ import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
import { Event } from "@/types/event"; import { Event } from "@/types/event";
import HlsVideoPlayer from "@/components/player/HlsVideoPlayer"; import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
const SEARCH_TABS = ["details", "Frigate+", "video"] as const; const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
type SearchTab = (typeof SEARCH_TABS)[number]; type SearchTab = (typeof SEARCH_TABS)[number];
@ -101,14 +102,16 @@ export default function SearchDetailDialog({
className={ className={
isDesktop isDesktop
? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl" ? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
: "max-h-[75dvh] overflow-hidden p-2 pb-4" : "max-h-[75dvh] overflow-hidden px-2 pb-4"
} }
> >
<Header className="sr-only"> <Header className="sr-only">
<Title>Tracked Object Details</Title> <Title>Tracked Object Details</Title>
<Description>Tracked object details</Description> <Description>Tracked object details</Description>
</Header> </Header>
<ScrollArea className="w-full whitespace-nowrap"> <ScrollArea
className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
>
<div className="flex flex-row"> <div className="flex flex-row">
<ToggleGroup <ToggleGroup
className="*:rounded-md *:px-3 *:py-4" className="*:rounded-md *:px-3 *:py-4"
@ -310,10 +313,12 @@ type VideoTabProps = {
function VideoTab({ search }: VideoTabProps) { function VideoTab({ search }: VideoTabProps) {
const videoRef = useRef<HTMLVideoElement | null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
return ( return (
<HlsVideoPlayer <HlsVideoPlayer
videoRef={videoRef} videoRef={videoRef}
currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${search.end_time ?? 0}/index.m3u8`} currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
hotKeys hotKeys
visible visible
frigateControls={false} frigateControls={false}