administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Make no thumb slider height dynamic

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-19 14:47:14 -06:00
parent 3b0f9988df
commit 5e4c075340
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -520,6 +520,7 @@ export function VideoPreview({
const onStopManualSeek = useCallback(() => {
setTimeout(() => {
setIgnoreClick(false);
setHoverTimeout(undefined);
if (isSafari || (isFirefox && isMobile)) {
setManualPlayback(true);
@ -565,7 +566,7 @@ export function VideoPreview({
{showProgress && (
<NoThumbSlider
ref={sliderRef}
className="absolute inset-x-0 bottom-0 z-30"
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${hoverTimeout != undefined ? "h-4" : "h-2"}`}
value={[progress]}
onValueChange={onManualSeek}
onValueCommit={onStopManualSeek}
@ -740,7 +741,7 @@ export function InProgressPreview({
{showProgress && (
<NoThumbSlider
ref={sliderRef}
className="absolute inset-x-0 bottom-0 z-30"
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${manualFrame ? "h-4" : "h-2"}`}
value={[key]}
onValueChange={onManualSeek}
onValueCommit={onStopManualSeek}

2
web/src/components/ui/slider.tsx
View File

@ -55,7 +55,7 @@ const NoThumbSlider = React.forwardRef<
)}
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
<SliderPrimitive.Track className="relative h-full w-full grow overflow-hidden rounded-full">
<SliderPrimitive.Range className="absolute h-full bg-selected" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-4 w-16 rounded-full bg-transparent -translate-y-[50%] ring-offset-transparent focus-visible:outline-none focus-visible:ring-transparent disabled:pointer-events-none disabled:opacity-50 cursor-col-resize" />