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

Fix playback rate not showing

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-28 13:34:56 -06:00
parent d064e44571
commit 70e8cd7628
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/player/VideoControls.tsx
View File

@ -1,9 +1,10 @@
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import { isMobileOnly, isSafari } from "react-device-detect"; import { isMobileOnly, isSafari } from "react-device-detect";
import { LuPause, LuPlay } from "react-icons/lu"; import { LuPause, LuPlay } from "react-icons/lu";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuPortal,
DropdownMenuRadioGroup, DropdownMenuRadioGroup,
DropdownMenuRadioItem, DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
@ -90,6 +91,12 @@ export default function VideoControls({
onUploadFrame, onUploadFrame,
setFullscreen, setFullscreen,
}: VideoControlsProps) { }: VideoControlsProps) {
// layout
const containerRef = useRef<HTMLDivElement | null>(null);
// controls
const onReplay = useCallback( const onReplay = useCallback(
(e: React.MouseEvent<SVGElement>) => { (e: React.MouseEvent<SVGElement>) => {
e.stopPropagation(); e.stopPropagation();
@ -183,6 +190,7 @@ export default function VideoControls({
MIN_ITEMS_WRAP && MIN_ITEMS_WRAP &&
"min-w-[75%] flex-wrap", "min-w-[75%] flex-wrap",
)} )}
ref={containerRef}
> >
{video && features.volume && ( {video && features.volume && (
<div className="flex cursor-pointer items-center justify-normal gap-2"> <div className="flex cursor-pointer items-center justify-normal gap-2">
@ -230,7 +238,7 @@ export default function VideoControls({
}} }}
> >
<DropdownMenuTrigger>{`${playbackRate}x`}</DropdownMenuTrigger> <DropdownMenuTrigger>{`${playbackRate}x`}</DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent portalProps={{container: containerRef.current}}>
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))} onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}
> >

8
web/src/components/ui/dropdown-menu.tsx
View File

@ -56,9 +56,11 @@ DropdownMenuSubContent.displayName =
const DropdownMenuContent = React.forwardRef< const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>, React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
>(({ className, sideOffset = 4, ...props }, ref) => ( portalProps?: DropdownMenuPrimitive.DropdownMenuPortalProps;
<DropdownMenuPrimitive.Portal> }
>(({ className, portalProps, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal {...portalProps}>
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}