keep content away from the bottom safe area

src/screens/VideoFeed/components/Scrubber.tsx

@@ -191,12 +191,14 @@ export function Scrubber({
             a.justify_end,
             a.py_lg,
             {
-              paddingBottom: insets.bottom + tokens.space.md,
+              paddingBottom: insets.bottom,
+              paddingTop: tokens.space.md,
               height:
                 // bottom padding
                 insets.bottom +
                 // actual height
                 tokens.space.xl +
+                // top padding
                 tokens.space.md,
             },
             a.z_10,

src/screens/VideoFeed/index.tsx

@@ -18,7 +18,6 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 import {
-  SafeAreaView,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context'
@@ -495,7 +494,6 @@ function VideoItem({
 
   return (
     <View style={[a.relative, {height, width}]}>
-      <SafeAreaView edges={['left', 'right', 'bottom']} style={[a.flex_1]}>
       {postShadow === POST_TOMBSTONE ? (
         <View
           style={[
@@ -536,7 +534,6 @@ function VideoItem({
           )}
         </>
       )}
-      </SafeAreaView>
     </View>
   )
 }
@@ -550,6 +547,7 @@ function VideoItemInner({
   embed: AppBskyEmbedVideo.View
   active: boolean
 }) {
+  const {bottom} = useSafeAreaInsets()
   const {status} = useEvent(player, 'statusChange', {status: player.status})
 
   return (
@@ -559,7 +557,7 @@ function VideoItemInner({
           accessible={false}
           style={[
             a.absolute,
-            a.inset_0,
+            {top: 0, left: 0, right: 0, bottom},
             isAndroid && status === 'loading' && {opacity: 0},
           ]}
           player={player}
@@ -914,6 +912,7 @@ function VideoItemPlaceholder({
   style?: ImageStyle
   blur?: boolean
 }) {
+  const {bottom} = useSafeAreaInsets()
   const src = embed.thumbnail
   let contentFit = isTallAspectRatio(embed.aspectRatio)
     ? ('cover' as const)
@@ -925,7 +924,7 @@ function VideoItemPlaceholder({
     <Image
       accessibilityIgnoresInvertColors
       source={{uri: src}}
-      style={[a.absolute, a.inset_0, style]}
+      style={[a.absolute, {top: 0, left: 0, right: 0, bottom}, style]}
       contentFit={contentFit}
       blurRadius={blur ? 40 : 0}
     />