From b08fbc9d592afa4d27ca24011be101ca13c3dac3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 26 Feb 2024 13:53:44 +0100 Subject: [PATCH 1/3] Fix sharing video player from chat to attachment modal --- ios/Podfile.lock | 4 ++-- .../AttachmentCarousel/CarouselItem.js | 1 + src/components/VideoPlayer/BaseVideoPlayer.js | 18 ++++++++++-------- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 52c817c739b3..82ffcd71c92d 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1999,8 +1999,8 @@ SPEC CHECKSUMS: SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2 VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a - Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047 + Yoga: 13c8ef87792450193e117976337b8527b49e8c03 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2 -COCOAPODS: 1.13.0 +COCOAPODS: 1.14.3 diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js index edc8ab11fd27..3b2aa454c2a2 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js @@ -108,6 +108,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) { isHovered={isModalHovered} isFocused={isFocused} optionalVideoDuration={item.duration} + isUsedInCarousel /> diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index df79c7ef18da..321c765b192d 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -8,7 +8,6 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; import VideoPopoverMenu from '@components/VideoPopoverMenu'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; import * as Browser from '@libs/Browser'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -41,7 +40,6 @@ function BaseVideoPlayer({ isVideoHovered, }) { const styles = useThemeStyles(); - const {isSmallScreenWidth} = useWindowDimensions(); const {pauseVideo, playVideo, currentlyPlayingURL, updateSharedElements, sharedElement, originalParent, shareVideoPlayerElements, currentVideoPlayerRef, updateCurrentlyPlayingURL} = usePlaybackContext(); const [duration, setDuration] = useState(videoDuration * 1000); @@ -96,20 +94,24 @@ function BaseVideoPlayer({ const handlePlaybackStatusUpdate = useCallback( (e) => { - if (shouldReplayVideo(e, isPlaying, duration, position)) { + const isVideoPlaying = e.isPlaying || false; + const currentDuration = e.durationMillis || videoDuration * 1000; + const currentPositon = e.positionMillis || 0; + + if (shouldReplayVideo(e, isVideoPlaying, currentDuration, currentPositon)) { videoPlayerRef.current.setStatusAsync({positionMillis: 0, shouldPlay: true}); } - const isVideoPlaying = e.isPlaying || false; + preventPausingWhenExitingFullscreen(isVideoPlaying); setIsPlaying(isVideoPlaying); setIsLoading(!e.isLoaded || Number.isNaN(e.durationMillis)); // when video is ready to display duration is not NaN setIsBuffering(e.isBuffering || false); - setDuration(e.durationMillis || videoDuration * 1000); - setPosition(e.positionMillis || 0); + setDuration(currentDuration); + setPosition(currentPositon); onPlaybackStatusUpdate(e); }, - [onPlaybackStatusUpdate, preventPausingWhenExitingFullscreen, videoDuration, isPlaying, duration, position], + [onPlaybackStatusUpdate, preventPausingWhenExitingFullscreen, videoDuration], ); const handleFullscreenUpdate = useCallback( @@ -165,7 +167,7 @@ function BaseVideoPlayer({ } originalParent.appendChild(sharedElement); }; - }, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, isSmallScreenWidth, originalParent, sharedElement, shouldUseSharedVideoElement, url]); + }, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, originalParent, sharedElement, shouldUseSharedVideoElement, url]); return ( <> From 344a2deec1dc16e7c8ad216dee43a791facdead2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 26 Feb 2024 16:14:32 +0100 Subject: [PATCH 2/3] Remove Podfile.lock changes --- ios/Podfile.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 82ffcd71c92d..52c817c739b3 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1999,8 +1999,8 @@ SPEC CHECKSUMS: SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2 VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a - Yoga: 13c8ef87792450193e117976337b8527b49e8c03 + Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2 -COCOAPODS: 1.14.3 +COCOAPODS: 1.13.0 From 81ff8272823a6710e6f3269cbb783b2114ba50b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Tue, 27 Feb 2024 10:08:07 +0100 Subject: [PATCH 3/3] Fix touchable video area --- src/components/VideoPlayer/BaseVideoPlayer.js | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index 321c765b192d..86ade325dec0 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -175,36 +175,36 @@ function BaseVideoPlayer({ {(isHovered) => ( - {shouldUseSharedVideoElement ? ( - <> - - {/* We are adding transparent absolute View between appended video component and control buttons to enable + { + togglePlayCurrentVideo(); + }} + style={styles.flex1} + > + {shouldUseSharedVideoElement ? ( + <> + + {/* We are adding transparent absolute View between appended video component and control buttons to enable catching onMouse events from Attachment Carousel. Due to late appending React doesn't handle element's events properly. */} - - - ) : ( - { - if (!el) { - return; - } - videoPlayerElementParentRef.current = el; - if (el.childNodes && el.childNodes[0]) { - videoPlayerElementRef.current = el.childNodes[0]; - } - }} - > - { - togglePlayCurrentVideo(); - }} + + + ) : ( + { + if (!el) { + return; + } + videoPlayerElementParentRef.current = el; + if (el.childNodes && el.childNodes[0]) { + videoPlayerElementRef.current = el.childNodes[0]; + } + }} > - - )} + + )} + {(isLoading || isBuffering) && }