From fd9c18658d77f8320fa46aca06947ba044bb5d2c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 21 May 2024 03:10:47 +0530
Subject: [PATCH] Make video controls more consistent

---
 web/src/components/player/HlsVideoPlayer.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 612489137..b90495652 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -16,6 +16,7 @@ import { AxiosResponse } from "axios";
 import { toast } from "sonner";
 import { useOverlayState } from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
+import { cn } from "@/lib/utils";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -70,6 +71,10 @@ export default function HlsVideoPlayer({
           height: videoRef.current.videoHeight,
         });
       }
+
+      setTallCamera(
+        videoRef.current.videoWidth / videoRef.current.videoHeight < 1.5,
+      );
     }
   }, [videoRef, setFullResolution]);
 
@@ -109,6 +114,7 @@ export default function HlsVideoPlayer({
 
   // controls
 
+  const [tallCamera, setTallCamera] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
   const [muted, setMuted] = useOverlayState("playerMuted", true);
   const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
@@ -153,7 +159,10 @@ export default function HlsVideoPlayer({
   return (
     <TransformWrapper minScale={1.0}>
       <VideoControls
-        className="absolute bottom-5 left-1/2 z-50 -translate-x-1/2"
+        className={cn(
+          "absolute left-1/2 z-50 -translate-x-1/2",
+          tallCamera ? "bottom-12" : "bottom-5",
+        )}
         video={videoRef.current}
         isPlaying={isPlaying}
         show={visible && (controls || controlsOpen)}