Fix video currentTime after scrolling away from video

[tlaverdure]

On web, when you scroll away from a video an IntersectionObserver is used to play() and pause() the video. As described in #6035 the currentTime of the video is lost after scrolling away. It appears conditional rendering in the following code is causing this:

social-app/src/view/com/util/post-embeds/VideoEmbed.web.tsx

Lines 145 to 159 in 6bc5a05

	<View style={[a.flex_1, a.flex_row]}>
	{nearScreen && children}
	<div
	ref={ref}
	style={{
	position: 'absolute',
	top: 'calc(50% - 50vh)',
	left: '50%',
	height: '100vh',
	width: 1,
	pointerEvents: 'none',
	}}
	/>
	</View>
	)

I've traced these changes back to two prior PRs for context:

• [Video] Fix fullscreen on Chrome #5246
• [Video] Much simpler fix to fullscreen bug #5251

I didn't experience any issues playing a fullscreen video and the currentTime of the video was retained as expected.

[mozzius]

Thanks for the contribution! Unfortunately, this was very much intentional to ensure that the number of video players doesn't grow indefinitely as you scroll. I'd be open to a solution that caches/restores the play position but still unmounts the player when scrolling away. However, afraid I'm gonna close this particular one, sorry :(

[tlaverdure]

Thanks for the feedback. Can you share a little more about the resources you are concerned about consuming? I imagine a paused video should also pause the hls stream and once a user leaves a feed the video element should also be destroyed.

Since a video is unmounted each time you scroll past it, the current experience leads to multiple http requests being fired each time the video is remounted. I feel like this is a more common performance concern as opposed to what may happen if a user loads thousands of videos and they are all paused.

For example, just now on my following feed, which has already been loaded, I scrolled past like 80 posts. On the way down I re-downloaded 8MB, I then scrolled back up and re-downloaded another 8MB.