mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +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