Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/components/VideoPlayer/BaseVideoPlayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import type {AVPlaybackStatus, VideoFullscreenUpdateEvent} from 'expo-av';
import {ResizeMode, Video, VideoFullscreenUpdate} from 'expo-av';
import type {MutableRefObject} from 'react';
import React, {useCallback, useEffect, useRef, useState} from 'react';
import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
import type {GestureResponderEvent} from 'react-native';
import {View} from 'react-native';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
Expand Down Expand Up @@ -172,6 +172,18 @@ function BaseVideoPlayer({
});
}, [currentVideoPlayerRef, handleFullscreenUpdate, handlePlaybackStatusUpdate]);

// use `useLayoutEffect` instead of `useEffect` because ref is null when unmount in `useEffect` hook
// ref url: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
useLayoutEffect(
() => () => {
if (shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
return;
}
currentVideoPlayerRef.current = null;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coming from #54166 checklist: We should stop the current video using the setStatusAsync function before setting it to null to prevent the video from continuing to play after opening full screen via sharedVideoElement then navigating to another route.

},
[currentVideoPlayerRef, shouldUseSharedVideoElement],
);

useEffect(() => {
if (!isUploading || !videoPlayerRef.current) {
return;
Expand Down