mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
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:
parent
a978adc5a9
commit
dce4e3fb0b
@ -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"
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user