lift up useFullscreen, hide mediainsetborder when fullscreen

src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useId, useRef, useState} from 'react'
+import {useEffect, useId, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg} from '@lingui/macro'
@@ -7,6 +7,7 @@ import type * as HlsTypes from 'hls.js'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {atoms as a} from '#/alf'
+import {useFullscreen} from '#/components/hooks/useFullscreen'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import * as BandwidthEstimate from './bandwidth-estimate'
 import {Controls} from './web-controls/VideoControls'
@@ -25,10 +26,11 @@ export function VideoEmbedInnerWeb({
   lastKnownTime: React.MutableRefObject<number | undefined>
 }) {
   const containerRef = useRef<HTMLDivElement>(null)
+  const [isFullscreen, toggleFullscreen] = useFullscreen(containerRef)
   const videoRef = useRef<HTMLVideoElement>(null)
   const [focused, setFocused] = useState(false)
   const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
-  const [hlsLoading, setHlsLoading] = React.useState(false)
+  const [hlsLoading, setHlsLoading] = useState(false)
   const figId = useId()
   const {_} = useLingui()
 
@@ -52,6 +54,15 @@ export function VideoEmbedInnerWeb({
     }
   }, [lastKnownTime])
 
+  useEffect(() => {
+    if (isFullscreen) {
+      document.documentElement.style.scrollbarGutter = 'unset'
+      return () => {
+        document.documentElement.style.removeProperty('scrollbar-gutter')
+      }
+    }
+  }, [isFullscreen])
+
   return (
     <View
       style={[a.flex_1, a.rounded_md, a.overflow_hidden]}
@@ -98,10 +109,11 @@ export function VideoEmbedInnerWeb({
           setFocused={setFocused}
           hlsLoading={hlsLoading}
           onScreen={onScreen}
-          fullscreenRef={containerRef}
+          isFullscreen={isFullscreen}
+          toggleFullscreen={toggleFullscreen}
           hasSubtitleTrack={hasSubtitleTrack}
         />
-        <MediaInsetBorder />
+        {!isFullscreen && <MediaInsetBorder />}
       </div>
     </View>
   )

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -14,7 +14,6 @@ import {
 } from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
-import {useFullscreen} from '#/components/hooks/useFullscreen'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {
   ArrowsDiagonalIn_Stroke2_Corner0_Rounded as ArrowsInIcon,
@@ -42,7 +41,8 @@ export function Controls({
   focused,
   setFocused,
   onScreen,
-  fullscreenRef,
+  isFullscreen,
+  toggleFullscreen,
   hlsLoading,
   hasSubtitleTrack,
 }: {
@@ -53,7 +53,8 @@ export function Controls({
   focused: boolean
   setFocused: (focused: boolean) => void
   onScreen: boolean
-  fullscreenRef: React.RefObject<HTMLDivElement>
+  isFullscreen: boolean
+  toggleFullscreen: () => void
   hlsLoading: boolean
   hasSubtitleTrack: boolean
 }) {
@@ -79,7 +80,6 @@ export function Controls({
     onIn: onHover,
     onOut: onEndHover,
   } = useInteractionState()
-  const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
   const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const [interactingViaKeypress, setInteractingViaKeypress] = useState(false)
   const showSpinner = hlsLoading || buffering
@@ -104,15 +104,6 @@ export function Controls({
     }
   }, [interactingViaKeypress])
 
-  useEffect(() => {
-    if (isFullscreen) {
-      document.documentElement.style.scrollbarGutter = 'unset'
-      return () => {
-        document.documentElement.style.removeProperty('scrollbar-gutter')
-      }
-    }
-  }, [isFullscreen])
-
   // pause + unfocus when another video is active
   useEffect(() => {
     if (!active) {