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

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

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