blakeblackshear.frigate/web/src/components/ui/slider.tsx
Nicolas Mowen 509e46adc8
Review segment UI (#9945)
* Add ui for events

* Display data for review items

* Use preview thumbnails

* Implement paging

* Show icons for what was detected

* Show progress bar on preview thumbnail

* Hide the overlays on hover and update reviewed status

* Dim previews that have been reviewed

* Show audio icons

* Cleanup preview thumb player

* initial implementation of review timeline

* Use timeout for hover playback

* Break apart mobile and desktop views

* Show icons for sub labels

* autoplay first video on mobile

* Only show the last 24 hours by default

* Rework scrolling to fix nested scrolling

* Final scroll cleanups

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
2024-02-21 13:07:32 -07:00

26 lines
774 B
TypeScript

import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
import { cn } from "@/lib/utils";
const Slider = React.forwardRef<
React.ElementRef<typeof SliderPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
<SliderPrimitive.Root
ref={ref}
className={cn(
"relative flex w-full touch-none select-none items-center",
className
)}
{...props}
>
<SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full">
<SliderPrimitive.Range className="absolute h-full bg-blue-500" />
</SliderPrimitive.Track>
</SliderPrimitive.Root>
));
Slider.displayName = SliderPrimitive.Root.displayName;
export { Slider };