diff --git a/src/components/hooks/useFullscreen.ts b/src/components/hooks/useFullscreen.ts new file mode 100644 index 0000000000..c10d058f58 --- /dev/null +++ b/src/components/hooks/useFullscreen.ts @@ -0,0 +1,26 @@ +import {useCallback, useSyncExternalStore} from 'react' + +import {isWeb} from '#/platform/detection' + +function fullscreenSubscribe(onChange: () => void) { + document.addEventListener('fullscreenchange', onChange) + return () => document.removeEventListener('fullscreenchange', onChange) +} + +export function useFullscreen(ref: React.RefObject) { + if (!isWeb) throw new Error("'useFullscreen' is a web-only hook") + const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () => + Boolean(document.fullscreenElement), + ) + + const toggleFullscreen = useCallback(() => { + if (isFullscreen) { + document.exitFullscreen() + } else { + if (!ref.current) return + ref.current.requestFullscreen() + } + }, [isFullscreen, ref]) + + return [isFullscreen, toggleFullscreen] as const +} diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx index 82c0ab7a66..6e31245b80 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx @@ -1,10 +1,4 @@ -import React, { - useCallback, - useEffect, - useRef, - useState, - useSyncExternalStore, -} from 'react' +import React, {useCallback, useEffect, useRef, useState} from 'react' import {Pressable, View} from 'react-native' import {SvgProps} from 'react-native-svg' import {msg, Trans} from '@lingui/macro' @@ -21,6 +15,7 @@ import { } from '#/state/preferences' import {atoms as a, useTheme, web} from '#/alf' import {Button} from '#/components/Button' +import {useFullscreen} from '#/components/hooks/useFullscreen' import {useInteractionState} from '#/components/hooks/useInteractionState' import { ArrowsDiagonalIn_Stroke2_Corner0_Rounded as ArrowsInIcon, @@ -850,25 +845,3 @@ function useVideoUtils(ref: React.RefObject) { canPlay, } } - -function fullscreenSubscribe(onChange: () => void) { - document.addEventListener('fullscreenchange', onChange) - return () => document.removeEventListener('fullscreenchange', onChange) -} - -function useFullscreen(ref: React.RefObject) { - const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () => - Boolean(document.fullscreenElement), - ) - - const toggleFullscreen = useCallback(() => { - if (isFullscreen) { - document.exitFullscreen() - } else { - if (!ref.current) return - ref.current.requestFullscreen() - } - }, [isFullscreen, ref]) - - return [isFullscreen, toggleFullscreen] as const -}