From c1b5ceacc3fe526cbfbe823a0f71d2cac9fdf72c Mon Sep 17 00:00:00 2001
From: Jorrin <jorrinkievit@hotmail.com>
Date: Fri, 22 Mar 2024 20:37:39 +0100
Subject: [PATCH] use insets to respect notch

---
 apps/expo/src/components/player/VideoPlayer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index 184a265..215b1b0 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -8,6 +8,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ResizeMode, Video } from "expo-av";
 import * as Haptics from "expo-haptics";
 import * as NavigationBar from "expo-navigation-bar";
@@ -279,6 +280,7 @@ function GestureOverlay(props: {
   type: "brightness" | "volume";
 }) {
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -291,8 +293,10 @@ function GestureOverlay(props: {
   return (
     <View
       position="absolute"
-      left={props.type === "brightness" ? "$7" : undefined}
-      right={props.type === "volume" ? "$7" : undefined}
+      // left={props.type === "brightness" ? "$7" : undefined}
+      left={props.type === "brightness" ? insets.left + 20 : undefined}
+      // right={props.type === "volume" ? "$7" : undefined}
+      right={props.type === "volume" ? insets.right + 20 : undefined}
       borderRadius="$4"
       gap={8}
       height="50%"