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

adapt for mobile

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-04 10:40:26 -06:00
parent 5ab5788e58
commit 9b6e802fd7
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/timeline/MotionSegment.tsx
View File

@ -12,6 +12,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
import { MockMotionData } from "@/pages/UIPlayground";
import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
import { isMobile } from "react-device-detect";
type MotionSegmentProps = {
events: ReviewSegment[];
@ -85,6 +86,10 @@ export function MotionSegment({
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
const segmentKey = useMemo(() => segmentTime, [segmentTime]);
const maxSegmentWidth = useMemo(() => {
return isMobile ? 15 : 25;
}, []);
const alignedMinimapStartTime = useMemo(
() => alignStartDateToTimeline(minimapStartTime ?? 0),
[minimapStartTime, alignStartDateToTimeline],
@ -204,27 +209,27 @@ export function MotionSegment({
segmentKey={segmentKey}
/>
<div className="absolute left-1/2 transform -translate-x-1/2 w-[40px] h-2 ml-[px] z-10 cursor-pointer">
<div className="flex flex-row justify-center w-[40px] mb-[1px]">
<div className="w-[20px] flex justify-end">
<div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
<div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]">
<div className="w-[10px] md:w-[20px] flex justify-end">
<div
key={`${segmentKey}_motion_data_1`}
className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
style={{
width:
20 -
maxSegmentWidth -
interpolateMotionAudioData(
getMotionSegmentValue(segmentTime - segmentDuration / 2),
0,
100,
1,
20,
maxSegmentWidth,
),
}}
></div>
</div>
<div className="w-[20px]">
<div className="w-[10px] md:w-[20px]">
<div
key={`${segmentKey}_audio_data_1`}
className={`h-[2px] rounded-full bg-audio_review`}
@ -235,33 +240,33 @@ export function MotionSegment({
-100,
0,
1,
20,
maxSegmentWidth,
),
}}
></div>
</div>
</div>
<div className="flex flex-row justify-center w-[40px]">
<div className="w-[20px] flex justify-end">
<div className="flex flex-row justify-center w-[20px] md:w-[40px]">
<div className="w-[10px] md:w-[20px] flex justify-end">
<div
key={`${segmentKey}_motion_data_2`}
className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
style={{
width:
20 -
maxSegmentWidth -
interpolateMotionAudioData(
getMotionSegmentValue(segmentTime),
0,
100,
1,
20,
maxSegmentWidth,
),
}}
></div>
</div>
<div className="w-[20px]">
<div className="w-[10px] md:w-[20px]">
<div
key={`${segmentKey}_audio_data_2`}
className={`h-[2px] rounded-full bg-audio_review`}
@ -272,7 +277,7 @@ export function MotionSegment({
-100,
0,
1,
20,
maxSegmentWidth,
),
}}
></div>

2
web/src/pages/UIPlayground.tsx
View File

@ -284,7 +284,7 @@ function UIPlayground() {
</div>
</div>
<div className="w-[100px] overflow-y-auto no-scrollbar">
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
{!isEventsReviewTimeline && (
<MotionReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment