Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix video play control broken after coming back from thread #40275

Merged
merged 1 commit into from
Apr 17, 2024
Merged

Fix video play control broken after coming back from thread #40275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
<VideoPlayerPreview
key={key}
videoUrl={sourceURL}
reportID={report?.reportID ?? ''}
fileName={fileName}
thumbnailUrl={thumbnailUrl}
videoDimensions={{width, height}}
Expand Down
20 changes: 17 additions & 3 deletions src/components/VideoPlayerContexts/PlaybackContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const Context = React.createContext<PlaybackContext | null>(null);

function PlaybackContextProvider({children}: ChildrenProps) {
const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState<string | null>(null);
const [currentlyPlayingURLReportID, setCurrentlyPlayingURLReportID] = useState<string | undefined>();
const [sharedElement, setSharedElement] = useState<View | HTMLDivElement | null>(null);
const [originalParent, setOriginalParent] = useState<View | HTMLDivElement | null>(null);
const currentVideoPlayerRef = useRef<VideoWithOnFullScreenUpdate | null>(null);
Expand All @@ -21,7 +22,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
}, [currentVideoPlayerRef]);

const stopVideo = useCallback(() => {
currentVideoPlayerRef.current?.stopAsync?.();
currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false, positionMillis: 0});
}, [currentVideoPlayerRef]);

const playVideo = useCallback(() => {
Expand All @@ -43,9 +44,10 @@ function PlaybackContextProvider({children}: ChildrenProps) {
if (currentlyPlayingURL && url !== currentlyPlayingURL) {
pauseVideo();
}
setCurrentlyPlayingURLReportID(currentReportID);
setCurrentlyPlayingURL(url);
},
[currentlyPlayingURL, pauseVideo],
[currentlyPlayingURL, currentReportID, pauseVideo],
);

const shareVideoPlayerElements = useCallback(
Expand Down Expand Up @@ -91,6 +93,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
() => ({
updateCurrentlyPlayingURL,
currentlyPlayingURL,
currentlyPlayingURLReportID,
originalParent,
sharedElement,
currentVideoPlayerRef,
Expand All @@ -101,7 +104,18 @@ function PlaybackContextProvider({children}: ChildrenProps) {
checkVideoPlaying,
videoResumeTryNumber,
}),
[updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying, setCurrentlyPlayingURL],
[
updateCurrentlyPlayingURL,
currentlyPlayingURL,
currentlyPlayingURLReportID,
originalParent,
sharedElement,
shareVideoPlayerElements,
playVideo,
pauseVideo,
checkVideoPlaying,
setCurrentlyPlayingURL,
],
);
return <Context.Provider value={contextValue}>{children}</Context.Provider>;
}
Expand Down
1 change: 1 addition & 0 deletions src/components/VideoPlayerContexts/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type CONST from '@src/CONST';
type PlaybackContext = {
updateCurrentlyPlayingURL: (url: string | null) => void;
currentlyPlayingURL: string | null;
currentlyPlayingURLReportID: string | undefined;
originalParent: View | HTMLDivElement | null;
sharedElement: View | HTMLDivElement | null;
videoResumeTryNumber: MutableRefObject<number>;
Expand Down
11 changes: 7 additions & 4 deletions src/components/VideoPlayerPreview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ type VideoPlayerPreviewProps = {
/** Url to a video. */
videoUrl: string;

/** reportID of the video */
reportID: string;

/** Dimension of a video. */
videoDimensions: VideoDimensions;

Expand All @@ -37,10 +40,10 @@ type VideoPlayerPreviewProps = {
onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
};

function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {currentlyPlayingURL, updateCurrentlyPlayingURL} = usePlaybackContext();
const {currentlyPlayingURL, currentlyPlayingURLReportID, updateCurrentlyPlayingURL} = usePlaybackContext();
const {isSmallScreenWidth} = useWindowDimensions();
const [isThumbnail, setIsThumbnail] = useState(true);
const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);
Expand All @@ -60,11 +63,11 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
};

useEffect(() => {
if (videoUrl !== currentlyPlayingURL) {
if (videoUrl !== currentlyPlayingURL || reportID !== currentlyPlayingURLReportID) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This change caused the play button to be unresponsive in a double reply thread (#42303), we fixed this in #43891.

return;
}
setIsThumbnail(false);
}, [currentlyPlayingURL, updateCurrentlyPlayingURL, videoUrl]);
}, [currentlyPlayingURL, currentlyPlayingURLReportID, updateCurrentlyPlayingURL, videoUrl, reportID]);

return (
<View style={[styles.webViewStyles.tagStyles.video, thumbnailDimensionsStyles]}>
Expand Down
Loading