| author |  maria <maria@kuuro.net> 2026-09-10 19:50:41-03:00 |
| committer |  GitHub <noreply@github.com> 2026-09-10 19:50:41-03:00 |
| log | a5ac766596bdf6c7d6852ecda453e2a85a7b08d4 |
| tree | 21b91d9d1c5941f13ff134b0b730bdba7fe68ba0 |
| parent | 1a9336bcda98e75814c1985e9274d919e580dbc5 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(media): preserve playback during fullscreen transitions (#11113)
2 files changed, 20 insertions(+), 3 deletions(-)
apps
mobile
src
components
web
src
components
media
apps/mobile/src/components/MediaVideoPlayer.tsx+11-2
| ... | ... | @@ -19,6 +19,7 @@ function LoadedMediaVideo(props: { |
| 19 | 19 | }) { |
| 20 | 20 | const focused = useIsFocused(); |
| 21 | 21 | const active = useRef(focused && AppState.currentState === "active"); |
| 22 | const fullscreen = useRef(false); | |
| 22 | 23 | const [attempt, setAttempt] = useState(0); |
| 23 | 24 | // Expo's Android player also reports completed playback as idle. |
| 24 | 25 | const [loadState, setLoadState] = useState<"pending" | "complete" | "error">("pending"); |
| ... | ... | @@ -38,10 +39,12 @@ function LoadedMediaVideo(props: { |
| 38 | 39 | |
| 39 | 40 | useEffect(() => { |
| 40 | 41 | active.current = focused && !props.paused && AppState.currentState === "active"; |
| 41 | if (!active.current) player.pause(); | |
| 42 | if (!focused || props.paused || (!active.current && !fullscreen.current)) player.pause(); | |
| 43 | // Native background handling distinguishes Android's fullscreen activity | |
| 44 | // from leaving the app; React Native reports both as background. | |
| 42 | 45 | const subscription = AppState.addEventListener("change", (state) => { |
| 43 | 46 | active.current = focused && !props.paused && state === "active"; |
| 44 | if (!active.current) player.pause(); | |
| 47 | if (state === "inactive" || (state === "background" && !fullscreen.current)) player.pause(); | |
| 45 | 48 | }); |
| 46 | 49 | return () => subscription.remove(); |
| 47 | 50 | }, [focused, player, props.paused]); |
| ... | ... | @@ -70,6 +73,12 @@ function LoadedMediaVideo(props: { |
| 70 | 73 | nativeControls |
| 71 | 74 | contentFit="contain" |
| 72 | 75 | fullscreenOptions={{ enable: true }} |
| 76 | onFullscreenEnter={() => { | |
| 77 | fullscreen.current = true; | |
| 78 | }} | |
| 79 | onFullscreenExit={() => { | |
| 80 | fullscreen.current = false; | |
| 81 | }} | |
| 73 | 82 | allowsPictureInPicture={false} |
| 74 | 83 | /> |
| 75 | 84 | {loadState === "error" || (loadState === "complete" && status === "error") ? ( |
apps/web/src/components/media/MediaVideoPlayer.tsx+9-1
| ... | ... | @@ -93,11 +93,19 @@ export function MediaVideoPlayer({ |
| 93 | 93 | const video = videoRef.current; |
| 94 | 94 | if (!video) return; |
| 95 | 95 | const pauseWhenHidden = () => { |
| 96 | if (document.hidden) video.pause(); | |
| 96 | // Native fullscreen can hide the inline page while this video is still visible. | |
| 97 | const fullscreen = | |
| 98 | document.fullscreenElement?.contains(video) || | |
| 99 | ("webkitDisplayingFullscreen" in video && video.webkitDisplayingFullscreen === true); | |
| 100 | if (document.hidden && !fullscreen) video.pause(); | |
| 97 | 101 | }; |
| 98 | 102 | document.addEventListener("visibilitychange", pauseWhenHidden); |
| 103 | document.addEventListener("fullscreenchange", pauseWhenHidden); | |
| 104 | video.addEventListener("webkitendfullscreen", pauseWhenHidden); | |
| 99 | 105 | return () => { |
| 100 | 106 | document.removeEventListener("visibilitychange", pauseWhenHidden); |
| 107 | document.removeEventListener("fullscreenchange", pauseWhenHidden); | |
| 108 | video.removeEventListener("webkitendfullscreen", pauseWhenHidden); | |
| 101 | 109 | video.pause(); |
| 102 | 110 | }; |
| 103 | 111 | }, [src, failed, loadAttempt]); |