Make full recordings view usable on mobile (#10134)

* 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

View File

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

View File

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