Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

UI Fixes (#11602)

Browse Source 
* Fix playback rate not showing

* Fix export image

* Formatting

* Formatting
This commit is contained in:
Nicolas Mowen 2024-05-28 13:45:08 -06:00 committed by GitHub
parent d064e44571
commit 5513addab8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/card/ExportCard.tsx
View File

@ -177,7 +177,7 @@ export default function ExportCard({
{exportedRecording.thumb_path.length > 0 ? ( {exportedRecording.thumb_path.length > 0 ? (
<img <img
className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl" className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
src={exportedRecording.thumb_path.replace("/media/frigate", "")} src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate", "")}`}
onLoad={() => setLoading(false)} onLoad={() => setLoading(false)}
/> />
) : ( ) : (

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

@ -1,4 +1,4 @@
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 {
@ -90,6 +90,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 +189,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 +237,9 @@ 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}