Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Make full recordings view usable on mobile (#10134)

Browse Source 
* adapt timeline to mobile

* remove unused

* tweaks

* pointer cursor on segments

* make full recordings view look better on mobile

* explicitly set timeline width for md

* button positioning
This commit is contained in:
Josh Hawkins 2024-02-28 09:57:56 -06:00 committed by GitHub
parent a978adc5a9
commit dce4e3fb0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/timeline/EventSegment.tsx
View File

@ -238,7 +238,7 @@ export function EventSegment({
} }
}, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]); }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
const segmentClasses = `h-2 relative w-[55px] md:w-[100px] ${ const segmentClasses = `h-2 relative w-full ${
showMinimap showMinimap
? isInMinimapRange ? isInMinimapRange
? "bg-card" ? "bg-card"

6
web/src/views/events/DesktopRecordingView.tsx
View File

@ -79,14 +79,14 @@ export default function DesktopRecordingView({
return ( return (
<div ref={contentRef} className="relative w-full h-full"> <div ref={contentRef} className="relative w-full h-full">
<Button <Button
className="absolute left-0 top-0 rounded-lg" className="md:absolute md:top-0 md:left-0 rounded-lg"
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
> >
<IoMdArrowRoundBack className="size-5 mr-[10px]" /> <IoMdArrowRoundBack className="size-5 mr-[10px]" />
Back Back
</Button> </Button>
<div className="absolute top-8 inset-x-[20%]"> <div className="md:absolute md:top-8 md:inset-x-[20%]">
<DynamicVideoPlayer <DynamicVideoPlayer
camera={selectedReview.camera} camera={selectedReview.camera}
timeRange={timeRange.ranges[selectedRangeIdx]} timeRange={timeRange.ranges[selectedRangeIdx]}
@ -106,7 +106,7 @@ export default function DesktopRecordingView({
/> />
</div> </div>
<div className="absolute inset-y-0 right-0"> <div className="md:absolute md:w-[100px] md:inset-y-0 md:right-0">
<EventReviewTimeline <EventReviewTimeline
segmentDuration={30} segmentDuration={30}
timestampSpread={15} timestampSpread={15}