From 70e8cd76288902715c38b0d03cbe6956f2267387 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 28 May 2024 13:34:56 -0600
Subject: [PATCH] Fix playback rate not showing

---
 web/src/components/player/VideoControls.tsx | 12 ++++++++++--
 web/src/components/ui/dropdown-menu.tsx     |  8 +++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index f700747e5..00efe939e 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -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 { LuPause, LuPlay } from "react-icons/lu";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
@@ -90,6 +91,12 @@ export default function VideoControls({
   onUploadFrame,
   setFullscreen,
 }: VideoControlsProps) {
+  // layout
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // controls
+
   const onReplay = useCallback(
     (e: React.MouseEvent<SVGElement>) => {
       e.stopPropagation();
@@ -183,6 +190,7 @@ export default function VideoControls({
             MIN_ITEMS_WRAP &&
           "min-w-[75%] flex-wrap",
       )}
+      ref={containerRef}
     >
       {video && features.volume && (
         <div className="flex cursor-pointer items-center justify-normal gap-2">
@@ -230,7 +238,7 @@ export default function VideoControls({
           }}
         >
           <DropdownMenuTrigger>{`${playbackRate}x`}</DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent portalProps={{container: containerRef.current}}>
             <DropdownMenuRadioGroup
               onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}
             >
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
index 769ff7aa7..5d89b180e 100644
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -56,9 +56,11 @@ DropdownMenuSubContent.displayName =
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    portalProps?: DropdownMenuPrimitive.DropdownMenuPortalProps;
+  }
+>(({ className, portalProps, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal {...portalProps}>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}